Design System
Captures the user's brand identity once via a 10-question onboarding wizard, validates contrast, derives CSS custom properties.
Before & after
Same prompt, same agent — the only difference is the skill.
That's a good idea to establish a design system. You'd want to think about your primary and accent colors, decide on fonts for headings and body text, and consider what overall design style fits your brand. Do you know which fonts you prefer? What colors are you thinking? Once we nail those details, we could create some basic CSS or design tokens. This will help keep things consistent going forward. What's your vision for how things should look?
ONBOARDING WIZARD (10 Questions) 1. Primary color: #2563EB 2. Accent color: #F59E0B 3. Heading font: Inter 4. Body font: Open Sans 5. Design style: Minimal 6. Default output directory: ./design-exports 7. Syntax highlighting: One Dark 8. Table of contents: Left sidebar 9. Company name: Acme Inc 10. Logo: (skipped) GENERATED CSS CUSTOM PROPERTIES --primary-hsl: 217 91% 60% --primary-rgb: 37 99 235 --accent-hsl: 38 92% 50% --accent-rgb: 245 158 11 --heading-font: Inter, sans-serif --body-font: Open Sans, sans-serif --bg-light: #FFFFFF --text-primary: #1F2937 --text-muted: #6B7280 CONTRAST VALIDATION Body text on white: 13.2:1 (AAA pass) Accent on white: 5.8:1 (AA pass) Muted on white: 5.1:1 (AA pass) STORAGE Saved to: ./.markdown-html/config.json Applies to: All markdown-html conversions Override: Set MARKDOWN_HTML_NO_CONFIG=1 to skip
About this skill
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.
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.
SKILL.md preview
---
name: design-system
description: Use before any markdown-to-HTML conversion to capture, validate, or reset a project's brand identity so every converter renders consistently.
version: 1.0.0
category: Docs & Writing / Docs and Formatting
author: AgentVolt
license: proprietary
tags:
- docs-writing
- docs-and-formatting
---
# Design System
Captures the user's brand identity once via a 10-question onboarding wizard, validates contrast, derives CSS custom properties, and stores the result for every markdown-html converter to consume.
## When to use
… (sign up to view the full skill)More content & writing skills
View all Content & Writing skills →Markdown HTML Orchestrator
Routes a markdown file to the right converter — long-form document, code review with diffs, or slide deck — and renders it as a single self-contained interactive HTML file.
Md Slides
Converts a markdown deck (slides separated by `
Md Review
Converts a markdown code review — fenced \`\`\`diff blocks plus severity callouts like \`[!BLOCKER]\`, \`[!MAJOR]\`, \`[!MINOR]\`, \`[!NIT]\` — into a single-file.
Md Document
Converts long-form markdown into a single-file HTML document with a sticky table of contents, scrollspy, search filtering, code-copy buttons, and brand-token styling.