design-system-toolkit
Generate or import design systems into specs, code tokens, and visual guides.
Generate or import design systems into specs, code tokens, and visual guides.
Use the generator for a new system: it interviews for brand preferences and writes a readable spec, visual HTML guide, and project reference. Use the importer when a system already exists in Figma; it extracts design data and syncs code tokens while keeping the guide aligned. Live Figma import needs the relevant MCP, though token exports or screenshots can also be used.
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
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.