Generates comprehensive style guide documentation and design tokens from existing themes and configuration files.
The Style Guide Generator automates the creation of professional design system documentation by parsing your project's design tokens, CSS variables, and theme configurations. It bridges the gap between code and design by exporting live style guides in Markdown, interactive HTML, or Figma-ready tokens, ensuring visual consistency across your application while providing a single source of truth for developers and designers alike. It is particularly useful for maintaining design systems during rapid development cycles or when syncing code-side changes back to design tools.
Key Features
01Interactive HTML output with live color swatches and component playgrounds
0238 GitHub stars
03Automated parsing of CSS variables and JSON design token definitions
04Comprehensive documentation of brand colors, typography, and spacing scales
05Multi-format exports including Markdown, interactive HTML, and Figma Tokens
06Integration with design-token-management for deep architectural analysis
Use Cases
01Syncing developer-defined CSS variables and theme tokens back to Figma for design team alignment
02Generating a live, interactive documentation site for a shared frontend component library
03Automating the creation of brand guidelines and accessibility checklists for new web projects
