prompt
FreeGenerate consistent, accessible design system specs for AI agents.
FreeFree tier
About prompt
This prompt transforms an AI agent into a Design System Spec Architect, enabling it to generate a standardized DESIGN.md file. The specification includes YAML front matter with design tokens (colors, typography, spacing, component states) and a Markdown body explaining rationale and usage. It enforces WCAG 2.2 AA accessibility, complete component state definitions (default, hover, active, pressed, disabled, focus), and prevents orphaned tokens. The output is both machine-readable for coding agents and human-readable for design teams.
Key Features
Generates YAML front matter with design tokens (colors, typography, spacing, components)
Enforces WCAG 2.2 AA contrast and accessibility rules
Defines all interactive component states (default, hover, active, pressed, disabled, focus)
Ensures no orphaned tokens – every token referenced by at least one component
Produces both machine-readable tokens and human-readable rationale
Supports semantic token mapping (no raw hex values)
Pros & Cons
Pros
- Ensures consistent, coherent UI generation across different AI agents
- Built-in accessibility enforcement (WCAG 2.2 AA)
- Structured output that is both machine-parseable and human-understandable
- Comprehensive component state coverage prevents gaps in design
Cons
- Requires integration into an AI agent's workflow or prompt chain
- Output is a text specification, not a visual design tool
- Assumes familiarity with design tokens and system architecture
- May need customization for specific brand languages or platforms
Best For
Standardizing visual design across multiple AI coding agentsCreating consistent UI for automated frontend generation pipelinesDocumenting design systems for accessibility complianceEnabling collaborative design-ops with agent-readable specifications
FAQ
What is DESIGN.md?
A single document that gives any coding agent a persistent, structured understanding of a product's visual identity, containing YAML front matter with design tokens and Markdown body with rationale.
How does this prompt ensure accessibility?
It enforces WCAG 2.2 AA by construction: background/text color pairs must achieve at least 4.5:1 contrast, typography must respect minimum readable sizes, and motion/elevation must respect reduced-motion preferences.
What does 'no orphaned tokens' mean?
Every defined color, type scale, spacing value, and radius must be referenced by at least one component or global rule, ensuring the specification is complete and coherent.
What is the output format?
A single DESIGN.md file with two layers: YAML front matter (delimited by ---) containing exact parseable token values, and a Markdown body explaining the rationale and usage.