Figma Design System To Design.md

Ekstraherer CSS/Tailwind/Figma design tokens til en struktureret design.md, som AI-kodningsværktøjer kan referere til.

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

Testet · Virker ★ 9.2/10

Figma Design System To Design.md — Ekstraherer CSS/Tailwind/Figma design tokens til en struktureret design.md, som AI-kodningsværktøjer kan referere til.

Hvad det gør

Scanner et projekt for token-filer (tokens.css, tailwind.config.js, theme.ts osv.), beriger valgfrit med Figma MCP-data, og skriver en design.md, der dækker farver, typografi, afstand, radius, elevation og responsive regler — markerer alt, hvad den ikke kan finde, som TODO i stedet for at opfinde det. Udløses ved 'generer design.md', 'ekstraher designsystem', eller 'design tokens til markdown'.

Testrapport

Kørte den mod en reel tokens.css + tailwind.config.js fixture: den markerede korrekt den manglende typografiskala og elevationsdata som TODO i stedet for at opfinde værdier, og bevarede kildens 'netural' token-navn-skrivefejl i henhold til sin egen regel, i modsætning til et baseline dump, der tabulerede de samme tokens uden sådan disciplin.

Testet: 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

Kommandoer og eksempelprompter

/figma-design-system-to-design-mdEkstraherer CSS/Tailwind/Figma design tokens til en struktureret design.md, som AI-kodningsværktøjer kan referere til.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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 hele rapporten →