Figma Design System To Design.md

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

Autor: albertzhangz10 · albertzhangz10/figma-design-system-to-design-md

Testowano · Działa ★ 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.

Co robi ten skill

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

Raport z testu

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.

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

Instalacja

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

Komendy i przykładowe prompty

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

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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

Pełny raport →