brianamazzio
UserTwo Claude Code skills for design systems: generate one from a brand interview, or import an existing one from Figma into a spec + code tokens + visual guide.
Categories
Indexed Skills (2)
design-system-generator
Generates a complete design system for a project. Use when asked to create, generate, or build a design system. Runs a structured brand interview, then produces two outputs: an HTML visual style guide and a markdown spec file at /docs/design-system.md. Also updates CLAUDE.md references automatically. Invoke with /design-system-generator.
design-system-importer
Imports an EXISTING design system from Figma into a Claude-readable format and into code. Use this when the design system already exists (usually in Figma) and just needs to be translated into a spec Claude can apply and tokens the codebase can use — NOT when starting from scratch (use design-system-generator for greenfield/taste-based creation). Pulls colors, type, spacing, radius, shadows, icons, and component specs from Figma as the source of truth, writes a precise markdown spec at docs/design-system.md, syncs the actual code tokens (e.g. src/styles.css @theme) to match Figma, produces an HTML visual style guide, and updates CLAUDE.md. Trigger whenever the user wants to import, sync, translate, extract, or 'get my Figma design system into code / into a format Claude can read', or wants the prototype's tokens corrected to match the real Figma system. The Figma file is always the source of truth; the existing code/prototype is not.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.