Figma Design System To Design.md

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

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

Probado · Funciona ★ 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.

Qué hace

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'.

Informe de la prueba

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.

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

Instalación

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

Comandos y prompts de ejemplo

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

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →