Figma Design System To Design.md

Extraherar CSS/Tailwind/Figma design tokens till en strukturerad design.md som AI-kodningsverktyg kan referera till.

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

Testad · Fungerar ★ 9.2/10

Figma Design System To Design.md — Extraherar CSS/Tailwind/Figma design tokens till en strukturerad design.md som AI-kodningsverktyg kan referera till.

Vad den gör

Skannar ett projekt efter token-filer (tokens.css, tailwind.config.js, theme.ts, etc.), berikar eventuellt med Figma MCP-data, och skriver en design.md som täcker färger, typografi, avstånd, radie, höjd och responsiva regler — märker allt den inte kan hitta som TODO istället för att uppfinna det. Triggar vid 'generera design.md', 'extrahera designsystem', eller 'design tokens till markdown'.

Testrapport

Körde den mot en verklig tokens.css + tailwind.config.js fixture: den flaggade korrekt den saknade typografiskalan och höjddata som TODO istället för att uppfinna värden, och bevarade källans 'netural' token-namn-felstavning enligt sin egen regel, jämfört med en baslinje-dump som tabellerade samma tokens utan sådan disciplin.

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

Installation

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

Kommandon och exempelprompter

/figma-design-system-to-design-mdExtraherar CSS/Tailwind/Figma design tokens till en strukturerad design.md som AI-kodningsverktyg kan referera till.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →