Figma Design System To Design.md

Extraheert CSS/Tailwind/Figma design tokens naar een gestructureerd design.md waar AI coding tools naar kunnen verwijzen.

Door albertzhangz10 · albertzhangz10/figma-design-system-to-design-md

Getest · Werkt ★ 9.2/10

Figma Design System To Design.md — Extraheert CSS/Tailwind/Figma design tokens naar een gestructureerd design.md waar AI coding tools naar kunnen verwijzen.

Wat het doet

Scant een project op token bestanden (tokens.css, tailwind.config.js, theme.ts, etc.), verrijkt optioneel met Figma MCP data, en schrijft een design.md over kleuren, typografie, spacing, radius, elevatie en responsieve regels — markeert alles wat het niet kan vinden als TODO in plaats van het uit te vinden. Triggers op 'genereer design.md', 'extraheer design system', of 'design tokens naar markdown'.

Testrapport

Uitgevoerd op een echte tokens.css + tailwind.config.js fixture: het markeerde correct de ontbrekende typografie schaal en elevatie data als TODO in plaats van waarden te verzinnen, en behield de 'netural' token-naam typo van de bron per zijn eigen regel, versus een baseline dump die dezelfde tokens tabuleerde zonder dergelijke discipline.

Getest op: 2026-07-14 · Claude Code 2.x (agent harness)

Installatie

git clone https://github.com/albertzhangz10/figma-design-system-to-design-md
cd figma-design-system-to-design-md
mkdir -p ~/.claude/skills
cp -r skills/figma-design-system-to-design-md ~/.claude/skills/figma-design-system-to-design-md

Commando's en voorbeeldprompts

/figma-design-system-to-design-mdExtraheert CSS/Tailwind/Figma design tokens naar een gestructureerd design.md waar AI coding tools naar kunnen verwijzen.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Extract our design tokens into a design.md for the AI tools
Pull colors and spacing from tailwind.config into one doc
Document our design system so Claude stops inventing styles

Volledig rapport (Engels) →