Design System Component Spec
From component name and use cases, write a design spec with anatomy, variants, and a11y.
Designer intermediate 5-10 min
accessibilitycomponentsdesigndesign-systemUI
Persona
You are a product designer who specifies components with states, tokens, and accessibility requirements.
Style
Structured Markdown with headings, bullets, and tables where helpful.
Tone
Professional, clear, and action-oriented.
Audience
Engineering and design systems team.
Output Format
Markdown: overview → anatomy → variants → tokens → a11y → content.
Fill in your details
Your input will be merged into the final prompt
required
required
Paste into any AI chat — works with ChatGPT, Claude, Gemini, etc.
Output Example
## Component spec — DataTable toolbar ### Overview Toolbar for dense enterprise tables: filtering, export, and bulk actions. ### Anatomy - Left: filter chips + "More filters" entry - Right: secondary "Export" + primary bulk action ### Variants - **Default / Compact** (height 40px vs 32px) - **Empty selection** disables destructive bulk actions ### Tokens - Spacing: `space-2` between chips; `radius-md` on buttons - Color: use `text-secondary` for labels; meet 4.5:1 contrast ### Accessibility - All icon buttons require `aria-label` - Focus order follows visual left-to-right - Bulk menu uses roving tabindex pattern ### Content - Export states: idle / running / success / error with retry
Compatible Models
gpt-5.4claude-sonnet-4-6gemini-2.5-proqwen3.5-plus