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

{
  "context": "Tests whether the agent uses critique and refine mode on a weak existing theme draft. The strongest answers diagnose exactly why the draft feels generic, preserve useful signals, replace weak decisions with archive-specific system rules, and produce concrete implementation deltas instead of restarting from a blank theme.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Critique and refine structure is complete",
      "description": "The output includes the critique concepts strongest signal, most generic signal, hardest-failing axis, and fix sequence, plus the refine concepts preserve, sharpen, remove, and implementation delta. Equivalent labels are acceptable if the roles are clear.",
      "max_score": 10
    },
    {
      "name": "Generic root causes are specific",
      "description": "The critique ties the generic feeling to concrete draft decisions such as Inter everywhere, cold blue palette, rounded cards, aurora hero, shadow-heavy surfaces, generic icons, fade-up animation, two-column layout, or card-heavy scanning problems.",
      "max_score": 10
    },
    {
      "name": "Refines instead of restarting",
      "description": "At least one useful existing draft signal is preserved or reframed, and every major removal is paired with a replacement that serves fieldwork, provenance, archival trust, or dense research use.",
      "max_score": 8
    },
    {
      "name": "Fix sequence is dependency-aware",
      "description": "The refinement gives an ordered sequence of at least three changes, explains why the first change comes first, and separates foundational direction fixes from downstream component and token changes.",
      "max_score": 8
    },
    {
      "name": "Refined direction contract is explicit",
      "description": "The refined direction includes 3-5 listed brand adjectives, exactly one primary visual archetype, and one explicit anti-target such as avoiding generic SaaS knowledge-base styling or polar tourism aesthetics.",
      "max_score": 10
    },
    {
      "name": "Archive-specific system replaces SaaS defaults",
      "description": "The refined theme translates field notes, provenance, specimen records, mixed media, oral histories, research density, and community respect into component and layout behavior while avoiding polar tourism, icy luxury, adventure branding, or decorative snowflake motifs.",
      "max_score": 12
    },
    {
      "name": "Typography and color become concrete",
      "description": "Typography recommendations include role-level changes and concrete size/leading values for multiple roles, while color recommendations name at least five semantic roles and discuss contrast, serif or monospace implications, and readable dense metadata.",
      "max_score": 10
    },
    {
      "name": "Motifs are bounded and mapped to archive components",
      "description": "The refinement defines exactly 2-4 recurring visual motifs and maps each to behavior across archive components such as navigation, search, filters, record rows, metadata tables, media cards, citations, people pages, or callouts.",
      "max_score": 10
    },
    {
      "name": "Density and responsive rules are systematic",
      "description": "Responsive behavior is described as reusable rules for density, hierarchy, grids, metadata, record tables, browse/search flows, and media. Mobile behavior should preserve archival identity rather than only saying columns stack.",
      "max_score": 8
    },
    {
      "name": "Motion and accessibility are explicit",
      "description": "The output specifies prefers-reduced-motion behavior and accessibility implications for contrast, screen readers, user font-size preferences, cognitive load, dense tables, and long captions rather than only naming aesthetic motion preferences.",
      "max_score": 7
    },
    {
      "name": "Implementation delta is token-level",
      "description": "The implementation section includes CSS custom properties or named tokens for repeated decisions, explains how they change from the draft, and maps token changes to component rules without introducing raw one-off design values.",
      "max_score": 7
    }
  ]
}

evals

README.md

tile.json