design-systemlisted

# 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): 1. **design.md** — Token Reference 2. **design-guidelines.md** — Accessibility & Do's/Don'ts 3. **design-components.md** — Component Specs ## File Specifications ### design.md — Token Reference ```markdown # [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, ### Surfac