Figma Design System To Design.md
Extrahiert CSS/Tailwind/Figma Design Tokens in ein strukturiertes Design.md, auf das KI-Coding-Tools verweisen können.
Getestet · Funktioniert
Was es kann
Scannt ein Projekt nach Token-Dateien (tokens.css, tailwind.config.js, theme.ts usw.), reichert es optional mit Figma MCP-Daten an und schreibt ein Design.md, das Farben, Typografie, Abstände, Radien, Höhen und responsive Regeln abdeckt — alles, was es nicht finden kann, wird als TODO markiert, anstatt es zu erfinden. Löst bei 'generate design.md', 'extract design system' oder 'design tokens to markdown' aus.
Testbericht
Habe es gegen eine echte tokens.css + tailwind.config.js-Fixture ausgeführt: Es hat die fehlende Typografie-Skala und Höhendaten korrekt als TODO markiert, anstatt Werte zu erfinden, und den 'netural'-Token-Namen-Tippfehler der Quelle gemäß seiner eigenen Regel beibehalten, im Gegensatz zu einem Baseline-Dump, der dieselben Tokens ohne solche Disziplin tabellierte.
Getestet am: 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
Befehle & Beispiel-Prompts
/figma-design-system-to-design-mdExtrahiert CSS/Tailwind/Figma Design Tokens in ein strukturiertes Design.md, auf das KI-Coding-Tools verweisen können.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Extract our design tokens into a design.md for the AI toolsPull colors and spacing from tailwind.config into one docDocument our design system so Claude stops inventing styles