Design System Generator
Analyze the user’s provided design references (images, screenshots, PDFs, links, text descriptions, or existing code) and generate a comprehensive 3-file design system documentation.
Inputs
Accept ANY combination of:
- Images: Screenshots of UIs, mockups, design tool exports
- PDFs: Brand guidelines, style guides, design specs
- Links: URLs to design system documentation, component libraries, or live websites
- Text descriptions: Written descriptions of the design language
- Existing code: CSS files, theme configs, Tailwind configs, design tokens
If the user provides a link, use WebFetch to retrieve the content. If they provide a file path, read the file.
Output
Generate exactly 3 markdown files in the user’s working directory (or a specified path):
- design.md — Token Reference
- design-guidelines.md — Accessibility & Do’s/Don’ts
- design-components.md — Component Specs
File Specifications
design.md — Token Reference
# [System Name] Design System — Token Reference
> Always read this file first. For component specs see [design-components.md](design-components.md). For accessibility and do's/don'ts see [design-guidelines.md](design-guidelines.md).
[1-2 sentence intro: design language, core architecture, primary typeface, base spacing unit, platform coverage]Required sections:
Colors
Group by semantic role using H3 subsections (e.g., Accent — Primary, Surface & Neutral, Semantic/Status).
| Role | Hex | Usage |
|---|---|---|
| primary | #6442d6 | High-emphasis fills, text, icons |
| on-primary | #ffffff | Text/icons on primary |
Include light/dark hex where detectable.
Typography
Default font family + fallback chain.
| Style | Size | Weight | Line Height | Spacing |
|---|---|---|---|---|
| Display Large | 57sp | 400 | 64sp | -0.25sp |
| Body Medium | 14sp | 400 | 20sp | 0.25sp |
List all scale levels (Display, Headline, Title, Body, Label or equivalent).
Shape
| Token | Radius | Components |
|---|---|---|
| Small | 8dp | Chips, snackbars |
| Medium | 12dp | Cards |
| Full | 50% | Buttons, search bars |
Elevation
| Level | dp | CSS Shadow | Usage |
|---|---|---|---|
| 0 | 0 | none | Base surface |
| 1 | 1 | 0 1px 2px rgb(0 0 0/.3), 0 1px 3px 1px rgb(0 0 0/.15) | Cards |
Interaction States
| State | Layer Opacity | Notes |
|---|---|---|
| Enabled | 0% | Resting |
| Hover | 8% | Cursor over |
| Focus | 10% | Keyboard focus |
| Pressed | 10% | Tap/click |
| Disabled | 38% content, 12% container | Inoperable |
Layout
| Class | Width | Panes | Navigation |
|---|---|---|---|
| Compact | < 600dp | 1 | Nav bar |
| Medium | 600–839dp | 1–2 | Nav rail or bar |
| Expanded | 840–1199dp | 1–2 | Nav rail or drawer |
Motion
Easing curves (CSS cubic-bezier values), duration tokens (short/medium/long), transition types.
Icons
Icon system specs: style, sizes, grid, stroke weight. Omit if not detectable.
Design Tokens
Naming convention format (e.g., md.sys.color.primary).
design-guidelines.md — Accessibility & Do’s/Don’ts
# [System Name] Guidelines — Accessibility & Do's/Don'ts
> See [design.md](design.md) for token values. See [design-components.md](design-components.md) for component specs.Required sections:
Accessibility
- Contrast Requirements: Table with Requirement | Ratio, then Component | 3:1 Against
- Touch Targets: Minimum sizes, spacing rules, density constraints
- Keyboard Navigation: Table with Key | Action
- Assistive Technology: Screen reader rules, labels, roles
Gestures
Table with Gesture | Use (Tap, Double tap, Long press, Scroll, Swipe, Drag, Pinch).
Content Design
Writing rules: tone, capitalization, line length, label constraints.
Do’s and Don’ts
Organize by category with H3 subsections: Color, Shape, Elevation, Interaction, Layout, Typography, Motion, Components.
Format:
- Do use primary for the single most important action
- Don’t apply primary fill to multiple buttons in a group
design-components.md — Component Specs
# [System Name] Components
> Full specifications for all [N] components. Grouped by workflow.
> For tokens see [design.md](design.md). For rules & accessibility see [design-guidelines.md](design-guidelines.md).Find ALL components detectable from the provided references. Do not limit to a fixed list.
Organize by workflow category using H2 headings:
-
Actions
-
Input
-
Navigation
-
Containment
-
Data Display
-
Feedback
Each component as an H3 section:
### Button
**Types:** Filled (primary) > Tonal (secondary) > Elevated > Outlined > Text.
Height 40dp. Target 48dp. Label: 14sp/500. Sentence case.
| Property | Value |
|---|---|
| Contrast | 4.5:1 text, 3:1 icons/borders |
| States | Rest, Hover, Pressed, Focus, Disabled |
| Touch target | 48x48dp min |
**Do:** Use sentence case; keep labels concise (1-3 words).
**Don't:** Use "Click here"; end with punctuation.
---Typical components to cover:
- Actions: Button, Icon Button, FAB, Toolbar, Link
- Input: Text Field, Checkbox, Radio, Switch, Slider, Dropdown/Select, Combobox, Picker, Textarea
- Navigation: Navigation Bar/Rail/Drawer, Tabs, Breadcrumb, Menu, Search, App Bar
- Containment: Card, Dialog, Bottom Sheet, Drawer, Popover, Accordion, Divider
- Data Display: Avatar, Badge, List, Carousel, Icon, Image, Tag/Chip, Skeleton, Tooltip
- Feedback: Progress Indicator, Spinner, Snackbar/Toast, Message Bar
General Rules
- Be specific: measurements in dp/sp/px, hex colors, CSS box-shadow values
- If a value cannot be determined from references, make a reasonable inference based on the design language and note it with “(inferred)”
- Use tables over prose — keep scannable
- Aim for 150–400 lines per file
- Each file must cross-reference the other two in its opening blockquote
- Separate components with horizontal rules (
---) - Use consistent markdown formatting throughout
Workflow
- Gather all reference materials from the user (read files, fetch URLs)
- Analyze the design language: identify colors, typography, spacing patterns, component inventory
- Generate all 3 files
- Write each file to the specified directory
- Summarize what was generated: system name, token count, component count