CtrlK
BlogDocsLog inGet started
Tessl Logo

sharaf/theme-designer

Use when the user wants to design, critique, or refine a website theme, visual style, look and feel, branding, CSS theme, design system, tokens.css file, or CSS token system. Produces theme directions, typography/color/composition/motion systems, implementation-ready CSS custom properties, component motif rules, and light/dark/density variant strategy.

99

1.45x
Quality

100%

Does it follow best practices?

Impact

99%

1.45x

Average score across 7 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-6/

{
  "context": "Tests whether the agent can transform vague taste notes and a weak token draft into a distinctive ecommerce theme system. Strong answers explore routes, choose one direction, avoid safe Shopify sameness, and produce practical tokens and component behavior for dense commerce workflows.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Routes and recommendation are useful",
      "description": "The output presents 2-3 named routes, names a concrete tradeoff for each, recommends one, and explains why it best fits dense durable-tool ecommerce rather than only aesthetics.",
      "max_score": 9
    },
    {
      "name": "Direction contract is specific",
      "description": "The recommended direction includes 3-5 brand adjectives, exactly one primary visual archetype, and one explicit anti-target that rejects safe ecommerce sameness, luxury styling, and fake ruggedness.",
      "max_score": 10
    },
    {
      "name": "Domain translation is non-generic",
      "description": "The theme translates stamped labels, bench marks, old catalogs, machine plates, repair manuals, product comparison, parts compatibility, and long-lived tools into interface decisions without nostalgia cosplay.",
      "max_score": 13
    },
    {
      "name": "Typography and color serve dense comparison",
      "description": "Typography includes role-level choices and concrete scale values for product names, specs, UI, diagrams, and warranty copy. Color roles support light/dark mode, contrast, price/error/focus distinction, and workshop readability.",
      "max_score": 11
    },
    {
      "name": "Composition covers ecommerce workflows",
      "description": "The composition system defines rules for product grids, filters, spec tables, comparison rows, checkout, account pages, bundles, diagrams, and replacement part compatibility rather than only product cards.",
      "max_score": 11
    },
    {
      "name": "Complete implementation tokens",
      "description": "tokens.css includes semantic tokens for color composition (RGB channels or an equivalent color-mix strategy), alpha, font roles, type scale, spacing, borders, radii, surface/depth, focus, hit sizes, font weights, durations, easings, transforms, and responsive or density variants.",
      "max_score": 13
    },
    {
      "name": "No raw reusable component values",
      "description": "Reusable component mapping avoids raw hex, rgba, font names, repeated spacing, numeric weights, border widths, radius, transition shorthands, focus offsets, and transform distances unless defined as tokens first. Local layout constraints such as a one-off sticky column minimum may be literal when they are not repeated theme decisions. Do not penalize token-derived color expressions such as rgb(var(--color-rgb) / var(--alpha-state)) under this raw-value criterion when they contain no raw literals; alias consistency belongs to semantic architecture or handoff completeness, not raw-value elimination.",
      "max_score": 11
    },
    {
      "name": "Signature motifs exactly four",
      "description": "The direction identifies exactly four named recurring motifs and maps them to component behavior rather than loose visual decoration.",
      "max_score": 8
    },
    {
      "name": "Accessibility and state behavior is explicit",
      "description": "The system covers disabled, active, selected, invalid, loading, empty, focus-visible, reduced-motion, high-contrast or forced-colors, 44px controls, and mobile browsing constraints.",
      "max_score": 10
    },
    {
      "name": "Risks and buildability are candid",
      "description": "The answer names risks such as over-rugged styling, scan density, diagram performance, checkout trust, or dark-mode contrast, and explains how the token/component system mitigates them.",
      "max_score": 4
    }
  ]
}

evals

README.md

tile.json