Brand Guide Visualizer

This skill turns a brand-guide.md into a single-file HTML artifact that renders the brand guide as an interactive reference document. The artifact is the visual checkpoint before product development starts — the user uses it to see their brand system before shipping anything.

Output is a single .html file. Vanilla HTML/CSS/JS. No React, no build tooling, no framework. Opens directly in a browser by double-clicking. This is what makes it work in Claude Code: the file hits disk and the user sees it immediately.

Core principle

The visualizer is born from the brand, not from a template. Every brand guide has a personality. The chrome around the content — navigation pattern, section order, cover treatment, typographic rhythm, whether there's animation, decorative elements — must be designed FROM that personality. Do not default to conventions that happen to have worked for other brands.

Component atoms (button, input, badge, etc.) must be auto-generated from tokens so they reflect the brand's actual design system — but how those atoms are presented, grouped, and contextualized is a creative decision that should suit the brand.

Workflow