pantheon-ai/web-reference-sheet-generator
Generate a comprehensive web design reference sheet (docs/design/design-reference.md) and its companion enforcement skill (.agents/skills/{project-slug}/SKILL.md) for any website project. Extracts tokens from CSS files, validates completeness against a JSON schema scratchpad, inspects existing components, and produces a 12-section living document covering colours, typography, spacing, layout, borders, shadows, motion, component patterns, accessibility, dark mode, and Figma sync notes. Use when starting a new project, onboarding a design system, creating a Figma reference sheet, porting design tokens, or auditing existing styles. Triggers on: "create a design reference", "generate a style guide", "document the design tokens", "make a brand reference sheet", "create design docs", "port design tokens", "audit existing styles".
97
100%
Does it follow best practices?
Impact
89%
2.61xAverage score across 3 eval scenarios
Passed
No known issues
Evaluation results
87%
59%Task — Generate design reference for a Tailwind v4 project
Generate a project-specific design reference sheet and companion enforcement skill from a Tailwind v4 codebase with @theme CSS tokens, correctly extracting all found tokens, marking absent sections as TBD, and producing both output files with the structured Step 8 confirmation report.
Token discovery
0%
50%
Tailwind config check
0%
0%
Component inspection
0%
0%
Output file created
0%
100%
No placeholders
100%
100%
Accurate colour tokens
100%
100%
Dark mode TBD
0%
100%
All 12 sections present
20%
100%
Companion SKILL.md location
0%
100%
Companion SKILL.md specificity
0%
100%
Confirmation block printed
0%
100%
TBD items listed
0%
100%
Authoritative token file named
100%
100%
No assumed breakpoints
60%
60%
Actual component classNames
100%
100%
Scratchpad used
0%
100%
Schema validation referenced
0%
100%
85%
26%Task — Document design tokens for a plain CSS site with dark mode
Generate a complete design reference sheet from a plain CSS project with media-query dark mode, correctly identifying the dark mode strategy, listing all overridden tokens with dark values, populating motion tokens, and extracting accessibility patterns from HTML components.
Token discovery
25%
0%
Dark mode strategy
100%
100%
Dark mode tokens
100%
100%
Motion tokens populated
100%
100%
Spacing tokens accurate
100%
100%
Accessibility noted
50%
100%
Output file created
0%
100%
Companion SKILL.md location
0%
100%
Companion SKILL.md specificity
0%
100%
All 12 sections present
25%
100%
Confirmation block printed
0%
80%
Authoritative token file named
100%
100%
Component inspection
0%
0%
Scratchpad used
0%
0%
No invented colours
100%
100%
97%
82%Task — Generate a brand reference sheet for a sparse, early-stage project
Generate a design reference sheet from a sparse codebase with no formal design tokens, correctly refraining from inventing values, marking all undiscovered sections as TBD, extracting only the hardcoded hex values present in CSS, and producing both output files without aborting or refusing due to insufficient data.
Does not abort
53%
100%
No invented tokens
0%
80%
No palette expansion
0%
100%
Typography TBD
0%
100%
Spacing TBD
0%
100%
Shadows TBD
0%
100%
Motion TBD
0%
100%
Dark mode TBD
0%
100%
All 12 sections present
0%
100%
TBD sections listed in confirmation
25%
100%
Companion SKILL.md not skipped
0%
100%
Companion SKILL.md specificity
0%
100%
No empty sections
71%
100%
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6