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

{
  "context": "Tests whether the agent can repair a generic SaaS-style theme into a distinctive cultural venue system while preserving useful implementation structure. Strong answers diagnose generic drift, create a clear direction contract, define exactly four motifs, and produce buildable tokens/component rules without raw local values.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Generic drift diagnosis is concrete",
      "description": "The repair notes tie the generic feeling to specific prototype decisions such as blue gradient hero, rounded cards, pill controls, soft shadows, Inter-only typography, and one-size-fits-all spacing or transitions.",
      "max_score": 9
    },
    {
      "name": "Preserve sharpen remove structure",
      "description": "The output explicitly identifies what to preserve, sharpen, and remove, and avoids throwing away useful implementation structure without replacement.",
      "max_score": 8
    },
    {
      "name": "Direction contract reflects the venue",
      "description": "The repaired direction includes 3-5 brand adjectives, exactly one primary visual archetype, and one consolidated anti-target grounded in the textile venue brief rather than generic cultural branding. The anti-target may be a compound sentence that names several excluded styles as one focused rejection.",
      "max_score": 10
    },
    {
      "name": "Textile identity avoids pastiche",
      "description": "The theme translates weave, grid, selvage, labels, thread tension, and mill history into interface behavior without decorative craft cliches, lifestyle-shop styling, startup SaaS styling, or generic museum minimalism. This is a text-output evaluation; do not deduct for absence of live browser rendering when the written system is specific and buildable.",
      "max_score": 12
    },
    {
      "name": "Complete semantic token system",
      "description": "tokens.css defines semantic tokens for color roles, RGB or alpha helpers, typography roles, type scale, spacing, borders, radii, surface/depth, focus, hit sizes, font weights, duration, easing, transforms, and state alphas.",
      "max_score": 13
    },
    {
      "name": "No raw reusable component values",
      "description": "Reusable component CSS rules and component-mapping guidance avoid raw hex, rgba, gradients, font names, repeated spacing, numeric weights, border widths, radii, transition shorthands, repeated opacity, focus offsets, and transform distances unless defined as tokens first. Do not penalize isolated animation-internal timing or structural CSS when it is not a reusable theme decision.",
      "max_score": 12
    },
    {
      "name": "Signature motifs exactly four",
      "description": "The repair defines exactly four named motifs and folds palette, typography, geometry, texture, and motion into those four instead of listing extra motif-like ideas.",
      "max_score": 9
    },
    {
      "name": "Motifs map to venue components",
      "description": "Each motif maps to recurring behavior across navigation, exhibition/event cards, schedules, forms, shop items, artist bios, empty states, and loading states. Score the motif system as a whole: full credit is appropriate when every required component family is covered by one or more motifs and any motif-specific non-applicability is deliberate, rather than requiring every individual motif to repeat every component family.",
      "max_score": 10
    },
    {
      "name": "Accessibility and responsive rules are production-ready",
      "description": "The system includes prefers-reduced-motion, forced-colors or prefers-contrast, disabled/focus/invalid/loading/empty states, 44px controls, and responsive or density rules that preserve the textile identity on mobile.",
      "max_score": 11
    },
    {
      "name": "Migration sequence is actionable",
      "description": "The notes give an ordered migration sequence for designers and frontend engineers that explains what changes first and how future components should extend the system without local exceptions. Extension rules may appear in the migration sequence, buildability checklist, or semantic token guidance.",
      "max_score": 6
    }
  ]
}

evals

README.md

tile.json