design-system-builder
Build design tokens, Tailwind config, and Figma Variables in six phases.
- Stars
- 1
- Forks
- 0
- Updated
- Updated Jun 11, 2026
Build design tokens, Tailwind config, and Figma Variables in six phases.
This Claude skill guides a six-phase design-system setup: brand decisions, color scales, typography, token integration, Figma Variables, and documentation. It uses Supa Palette, Typescale, Figma MCP, and a Next.js/Tailwind project, with Figma Desktop and local fonts needed for the visual stages. Users still supply the rationale behind their design decisions.
Resource types
Use cases
Platforms
Turns one idea into a clean peanut-led concept illustration.
Keeps generated UI aligned with explicit design rules.
Protocols & integrations
Capabilities
Public GitHub facts last synced Jul 10, 2026.
Route a design brief through color, effects, typography, and icon skills in a coherent order.
Plan product design projects in Claude with reusable PRCSS workflows.