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
task.mdevals/scenario-3/
Task — Generate a brand reference sheet for a sparse, early-stage project
You are working in a new project with almost no design tokens defined yet.
Codebase state
src/index.css:
body {
font-family: sans-serif;
color: #333;
background: #fff;
}
.btn {
background: #0070f3;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
}No CSS custom properties (--). No Tailwind config. No font imports. No aria- attributes. No dark mode. No transitions defined. No component library.
Your task
Make a brand reference sheet for this project.