design-system-builderlisted

# Design System Builder A step-by-step workflow for building a complete design system from scratch. Integrates Supa Palette, Typescale, and Figma MCP to produce a production-ready token architecture. --- ## Tools | Tool | Role | |------|------| | [Supa Palette](https://supapalette.com) | Color scale generation | | [Typescale](https://typescale.com) | Type scale generation | | Figma MCP | Create Variables + visual showcase pages | | tokens.json | Design source of truth | | Tailwind config | Frontend token integration | --- ## Phase 1: Brand Decisions (Human only — do not skip) **Ask the user these three questions before proceeding:** ``` Q1. Brand personality — pick 3 keywords (or add your own): Bold, Playful, Rebellious, Nostalgic, Electronic, Dreamy, Energetic, Cute, Lo-fi aesthetic, Minimalist, Corporate, Warm, Luxurious, Trustworthy Q2. Do you have a brand color? A. Yes — provide the hex code directly B. No — describe the feeling you want (e.g. warm, cool, vibrant, calm, vivid, neutral...) → AI recommends 1-2 Primary hex options based on the description Q3. Usage context — how do users interact with this product? Quick impulsive actions (mobile, on-the-go)? Or focused sessions (desktop, task-oriented)? ``` **This phase determines the direction of all tokens. It cannot be skipped.** --- ## Phase 2: Color System (Supa Palette) ### Steps 1. Based on Q2, suggest a Primary hex starting point 2. Ask the user to go to https://supapalette