Back to blog

I automated design system documentation with Claude Code. The team thought I spent a week on it.

LinkedIn

Design system docs are the task everyone agrees is important and nobody wants to do. I had 340 components with inconsistent naming, missing descriptions, and zero usage guidelines.

I wrote a Claude Code script that reads the Figma file via MCP, pulls component names and variants, cross-references with the codebase, and generates a markdown doc per component. Usage guidelines, do/don't examples, prop tables.

Total time: one afternoon. The output covered what would have taken a solo designer 2 weeks minimum.

The key was not asking Claude to "document the design system." It was giving it a specific template per component type. Buttons get one format. Cards get another. Forms get a third.

Install the Figma MCP server. Export one component category. Write a template for its doc page. Run it against the full set.