design-system-documenter

Generate developer-ready documentation by processing raw design tokens into token reference tables, usage guidelines, code examples, and accessibility notes automatically. This creates comprehensive documentation that bridges the gap between raw design tokens and developer adoption.

Yes, you can output design system docs in Storybook or MDX format. The documentation generation supports Markdown, MDX, and Storybook output formats, allowing you to create interactive visual swatches and elements alongside standard reference tables.

Document accessibility considerations for a style guide by automatically generating accessibility notes that highlight contrast ratios and reduced motion considerations. This ensures developers understand visual constraints directly within the token reference tables and usage guidelines.

The best way to prevent design token misuse is by generating do/don't examples within your developer docs. This prevents misuse by showing common mistakes alongside correct implementation patterns and clear usage instructions.

Yes, you need generated design tokens before generating design system documentation. The Skill requires a token file, such as 'tokens.json', and integrates with design-system-generator to process raw tokens into comprehensive documentation pages.

Your design system documentation lacks usage guidelines because it hasn't been automatically generated from design tokens. Automating the process creates comprehensive, developer-friendly content including usage instructions, code examples, and visual demonstrations instantly.