hatch3r

Hatch3r Design System Create — Design skill for Claude Code

Design community

Create a project design system from brand assets or an elicitation dialog — DTCG 2025.10 token emission, 3-tier taxonomy (primitive → semantic → component), OKLCH ramps, dual output design.md + design.

How to install Hatch3r Design System Create

Installs to ~/.claude/skills/hatch3r-hatch3r-hatch3r-design-system-create/SKILL.md

Terminal

mkdir -p ~/.claude/skills/hatch3r-hatch3r-hatch3r-design-system-create && curl -fsSL https://raw.githubusercontent.com/hatch3r/hatch3r/HEAD/commands/hatch3r-design-system-create.md -o ~/.claude/skills/hatch3r-hatch3r-hatch3r-design-system-create/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Hatch3r Design System Create does

id: hatch3r-design-system-create type: command orchestrator: true agentPipeline: [hatch3r-researcher, hatch3r-implementer, hatch3r-ui, hatch3r-ux] description: "Create a project design system from brand assets or an elicitation dialog — DTCG 2025.10 token emission, 3-tier taxonomy (primitive → semantic → component), OKLCH ramps, dual output design.md + design-tokens.json, gated on WCAG 2.2 AA contrast, 100% theme parity, and 0 dangling aliases." argument-hint: "[brand-asset-path]" disable-mo

Alternatives in Design

Figma — Fetch design context, screenshots, and assets from Figma for implementation 14.6k ★
Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★
Canvas — Open, create, or update a visual canvas — add images, text, PDFs, wiki pages, and banana-generated assets to O 3.3k ★