Figma Design System To Design.md

Extracts CSS/Tailwind/Figma design tokens into a structured design.md that AI coding tools can reference.

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

Promosso ★ 9.2/10

Figma Design System To Design.md — Extracts CSS/Tailwind/Figma design tokens into a structured design.md that AI coding tools can reference.

Cosa fa

Scans a project for token files (tokens.css, tailwind.config.js, theme.ts, etc.), optionally enriches with Figma MCP data, and writes a design.md covering colors, typography, spacing, radius, elevation and responsive rules — marking anything it can't find as TODO rather than inventing it. Triggers on 'generate design.md', 'extract design system', or 'design tokens to markdown'.

Rapporto di test

Ran it against a real tokens.css + tailwind.config.js fixture: it correctly flagged the missing typography scale and elevation data as TODO instead of inventing values, and preserved the source's 'netural' token-name typo per its own rule, versus a baseline dump that tabled the same tokens with no such discipline.

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

Installazione

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

Comandi e prompt di esempio

/figma-design-system-to-design-mdExtracts CSS/Tailwind/Figma design tokens into a structured design.md that AI coding tools can reference.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

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

Rapporto completo →