design-system-builderlisted

Build a complete, AI-ready design system from scratch using Supa Palette (color), Typescale (typography), Figma Variables, and tokens.json. Trigger when the user says "build a design system", "set up design tokens", "I need a color system", "create a brand token", "typography scale", "design tokens from scratch", "token integration", "llms.txt", "make my design system AI-readable", "spec file", or "my UI looks inconsistent". Outputs: tokens.json, Tailwind config, Figma Variables (color + typography layers), design-system-doc.md (for humans), llms.txt (for AI agents), and a token audit script. Scope: this skill builds a NEW system from scratch. For auditing an existing Figma file, cataloguing naming drift, or back-filling docs for an existing system, use design:design-system.
hsiangyilu/design-system-builder · ★ 1 · Web & Frontend · score 62

Install: claude install-skill hsiangyilu/design-system-builder

# 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. **Core principles (AI-readiness):** 1. **Design decisions are infrastructure.** Every decision — a color choice, a tradeoff, a usage restriction — must find its way into the spec file that AI tools read. A decision that lives only in a chat log or a human-facing doc does not exist as far as AI is concerned. 2. **Closed set.** When AI generates UI, it picks from named tokens only. It never invents plausible-looking hex or px values. 3. **Text beats screenshots.** Pass values as text (hex codes, CSS output). Screenshots are for visual confirmation only. Making AI decode numbers from an image is both more expensive and less accurate. 4. **Verifiable.** Ship an audit script so hard-coded values are caught by a machine, not by eye. --- ## 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 | Single source of truth for the whole system | | Tailwind config | Frontend token integration (derived from tokens.json) | | llms.txt | Spec file consumed by AI agents (derived from tokens.json + decisions) | | audit script | Scans output for hard-coded values | --- ## Phase 1: Brand Decisions (Human only