---

name: design-system description: Use when Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output dir...

Design System

Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output directory + syntax theme + TOC behavior + optional logo/company), validates body-text and link contrast against WCAG 2.2 AA, derives 12 CSS custom properties in HSL space, and stores the result for every markdown-html converter to consume. Use before any markdown-html conversion. Triggers on first-run onboarding ("set up the brand", "configure markdown-html", "run onboarding"), on explicit reset ("reset the design system", "re-onboard"), and is checked by every converter via config_loader.py before rendering. Refuses to save if body-text contrast fails AA 4.5:1 or the output dir isn't writable. Precedence: project (./.markdown-html/) > global (~/.config/markdown-html/) > built-in defaults; MARKDOWN_HTML_NO_CONFIG=1 bypasses. — One of 337+ skills in Ali Reza's multi-agent claude-skills collection (Claude, Codex, Gemini, Hermes; ~19k stars).

What you get

• Public GitHub repo (alirezarezvani/claude-skills)
• the design-system skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.

Customize your output

• Fork the repo and adapt the skill's instructions and references to your workflow.

Example output

Activates automatically when your request matches Design System; chains with the other skills, agents, and commands in the collection.

Best for

Creators, builders, and teams using Claude Code.