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

Evaluation results

100%

17%

Website Theme Direction for an Independent Architecture Practice

Design mode multi-route exploration with full theme direction

Criteria
Without context
With context

Routes and recommendation have tradeoffs

90%

100%

Direction contract is explicit

75%

100%

Category-default avoidance is specific

91%

100%

Typography supports institution-scale content

70%

100%

Color roles and mode behavior are usable

90%

100%

Composition rhythm governs multiple page types

100%

100%

Theme identity survives inner pages and mobile

70%

100%

Surface and motifs repeat across components

90%

100%

Motion and accessibility are designed together

71%

100%

Implementation token mapping is buildable

71%

100%

100%

48%

CSS Token System for a Cartography Studio

CSS token system with buildability gate and motifs

Criteria
Without context
With context

Semantic token architecture

87%

100%

Complete reusable value coverage

71%

100%

No raw design values in component guidance

85%

100%

Interactive and accessibility states tokenized

75%

100%

Signature motifs exactly four

10%

100%

Motifs mapped to recurring component behavior

33%

100%

Variant strategy with stable names

10%

100%

Rules-based responsive identity

25%

100%

Core Web Vitals and performance constraints

33%

100%

Developer handoff completeness

66%

100%

100%

23%

Critique and Refine an Existing Website Theme Draft

Critique and refinement of a weak existing theme draft

Criteria
Without context
With context

Critique and refine structure is complete

70%

100%

Generic root causes are specific

100%

100%

Refines instead of restarting

100%

100%

Fix sequence is dependency-aware

100%

100%

Refined direction contract is explicit

40%

100%

Archive-specific system replaces SaaS defaults

91%

100%

Typography and color become concrete

100%

100%

Motifs are bounded and mapped to archive components

40%

100%

Density and responsive rules are systematic

62%

100%

Motion and accessibility are explicit

42%

100%

Implementation delta is token-level

100%

100%

100%

37%

Repair a Drifted Theme Token Handoff

Repair a drifted CSS token handoff into a production theme system

Criteria
Without context
With context

Direction-preserving audit

87%

100%

Semantic token architecture is complete

78%

100%

Raw reusable values are eliminated

71%

100%

State and accessibility contract is explicit

57%

100%

Signature motifs exactly four

20%

100%

Motifs map to archive components

40%

100%

Variant and responsive rules are stable

60%

100%

Migration delta is actionable

87%

100%

Performance constraints are concrete

50%

100%

Deliverables are buildable

83%

100%

99%

36%

Refactor a Generic SaaS Theme Into a Cultural Venue System

Refactor a generic SaaS theme into a distinctive cultural venue system

Criteria
Without context
With context

Generic drift diagnosis is concrete

100%

100%

Preserve sharpen remove structure

87%

100%

Direction contract reflects the venue

70%

100%

Textile identity avoids pastiche

91%

100%

Complete semantic token system

61%

100%

No raw reusable component values

83%

91%

Signature motifs exactly four

22%

100%

Motifs map to venue components

30%

100%

Accessibility and responsive rules are production-ready

27%

100%

Migration sequence is actionable

50%

100%

100%

34%

Turn a Vague Ecommerce Theme Brief Into Implementation-Ready Art Direction

Turn a vague ecommerce theme brief into implementation-ready art direction

Criteria
Without context
With context

Routes and recommendation are useful

33%

100%

Direction contract is specific

60%

100%

Domain translation is non-generic

92%

100%

Typography and color serve dense comparison

100%

100%

Composition covers ecommerce workflows

81%

100%

Complete implementation tokens

61%

100%

No raw reusable component values

45%

100%

Signature motifs exactly four

62%

100%

Accessibility and state behavior is explicit

50%

100%

Risks and buildability are candid

50%

100%

100%

25%

Audit a Competitor-Same Fintech Theme and Produce a Stricter System

Audit a competitor-same fintech theme and produce a stricter system

Criteria
Without context
With context

Critique identifies generic fintech signals

88%

100%

Preserve sharpen remove decisions are concrete

87%

100%

Direction contract avoids false personality

70%

100%

Restaurant treasury domain translation

92%

100%

State semantics are operational

91%

100%

Complete token implementation

76%

100%

No raw component design values

90%

100%

Motifs exactly four and mapped

30%

100%

Accessibility and responsiveness are explicit

70%

100%

Risks and implementation delta are useful

20%

100%

Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

Table of Contents