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-7/

{
  "context": "Tests whether the agent can critique a generic fintech theme and repair it into a domain-specific, accessible, production-ready system. Strong answers preserve trust while rejecting competitor sameness, define a precise direction contract, and map tokens/motifs to dense restaurant treasury workflows.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Critique identifies generic fintech signals",
      "description": "The critique names specific generic signals such as dark navy cards, purple-blue gradients, Inter everywhere, rounded cards, pill filters, soft glows, fade-up motion, generic icons, and default dense tables.",
      "max_score": 9
    },
    {
      "name": "Preserve sharpen remove decisions are concrete",
      "description": "The answer states what to preserve, sharpen, and remove, preserving trust and credibility while replacing generic finance styling with restaurant treasury-specific behavior.",
      "max_score": 8
    },
    {
      "name": "Direction contract avoids false personality",
      "description": "The repaired direction includes 3-5 brand adjectives, exactly one primary archetype, and one anti-target that avoids neon crypto, restaurant decor branding, and generic enterprise finance.",
      "max_score": 10
    },
    {
      "name": "Restaurant treasury domain translation",
      "description": "The theme translates service pressure, multi-location operations, cash risk, imports, bank status, payroll/vendor/rent/deposit scenarios, and tablet readability into concrete visual and interaction rules.",
      "max_score": 13
    },
    {
      "name": "State semantics are operational",
      "description": "Alert and status colors use semantic roles for cash risk, import errors, bank connection issues, staffing-impact scenarios, selected comparison rows, disabled actions, loading, empty states, and focus.",
      "max_score": 12
    },
    {
      "name": "Complete token implementation",
      "description": "tokens.css defines semantic tokens for color roles and RGB/alpha helpers, typography roles, type scale, spacing, borders, radii, surface/depth, focus, hit sizes, font weights, durations, easings, transforms, state alphas, density, and light/dark variants.",
      "max_score": 13
    },
    {
      "name": "No raw component design values",
      "description": "Reusable component mapping does not introduce raw hex, rgba, repeated gradients, font names, repeated spacing, numeric weights, border widths, radii, transition shorthands, repeated opacity, focus offsets, or transform distances unless defined as tokens first. Local one-off layout constraints may be literal when they are not repeated theme decisions; judge badge or chip padding as repeated only when the same literal establishes a reusable status-component pattern without nearby token guidance. Do not penalize structural CSS zeroes such as box-shadow offsets for spread-only focus rings, CSS timing keywords such as linear, token-derived expressions, tokenized base spacing references such as var(--space-3), or raw values inside token declarations or non-component explanatory sections under this criterion; those belong to semantic architecture, token completeness, or handoff completeness rather than raw-value elimination.",
      "max_score": 10
    },
    {
      "name": "Motifs exactly four and mapped",
      "description": "The repaired system defines exactly four motifs and maps each to behavior across navigation, dashboard panels, forecast tables, scenario comparison, invoice import status, alerts, onboarding, loading states, and empty states.",
      "max_score": 10
    },
    {
      "name": "Accessibility and responsiveness are explicit",
      "description": "The system covers tablet readability, dense mode, reduced motion, high contrast or forced colors, 44px controls, user font-size preference, and readable dense tables.",
      "max_score": 10
    },
    {
      "name": "Risks and implementation delta are useful",
      "description": "The audit names risks and gives an ordered implementation delta so designers and engineers know what changes first and how to extend the theme without local exceptions.",
      "max_score": 5
    }
  ]
}

evals

README.md

tile.json