17 skills, 16 sub-agents, a 10-phase pipeline, and 286 reference DESIGN.md files — installed into your AI coding agent in one command. No API keys. No external infra. Then you just talk to your agent.
npx oh-my-design-cli install-skillsnpx oh-my-design-cli install-skills--agent cursor (writes the .cursor/rules shim + the shared reference catalog). Restart your agent (Cmd+Q in Claude Code, then relaunch) so the new skills + agents are loaded.“Set up the design system for a calm B2B fintech dashboard.”Agent picks a reference, proposes a hybrid DESIGN.md, asks you to confirm, writes the file plus shims.
“Make the empty-state for the search results page.”
Skills are markdown rule files that activate based on what you say. They route complex tasks to the right sub-agents.
omd:applyAuthoritative brand context for every UI request. Routes complex tasks (assets, charts, full screens, a11y audit) to specialist sub-agents.
omd:initPick from 286 reference design systems. Hybrid variation — preserves the reference voice while shifting only the axes you name.
omd:harness10-phase pipeline (Discovery → Handoff) with 7 hero archetypes (rule 9 matches brand vibe to layout — center-text / carousel / split-screen / editorial / dashboard / quote-led / left-character). Wordmark-only logo (rule 5), reveal safety net (rule 10).
omd:rememberAppend-only log at .omd/preferences.md. Auto-fires when you say things like "we never use uppercase CTAs" or "stop using emoji icons".
omd:learnFolds pending preferences back into DESIGN.md by scope (global / page / component). Keeps your brand spec the single source.
omd:syncKeeps CLAUDE.md, AGENTS.md, .cursor/rules/omd-design.mdc up-to-date so every coding agent reads the same DESIGN.md.
omd:reference-captureNavigates the brand's live site via CDP and writes assets/_reference/<id>/ with tokens.json, structure.json, fonts.json, screenshots, and .live-inspect-proof.json. Phase 3.9 browser-harness fast-path auto-detected — 3-5x faster than playwright MCP when the user has it set up.
omd:asset-fetchLooks up verified CC0 / MIT / SIL OFL CDN URLs (DiceBear avatars, Lucide icons, Picsum / Loremflickr photos, Bricolage Grotesque / Space Grotesk / DM Serif Display / Fraunces display fonts). Handcrafted character SVG is forbidden — every placeholder is a real licensed asset.
omd:experiment-galleryBuilds a single index.html that previews every brand experiment under a folder as iframe-scaled cards with archetype badges, wow ratings, multi-turn deltas, and IP audit counts. Reusable across batches.
A supervisor + specialist topology for long-form authoring and image generation. Installed alongside the core skills — KR voice synthesis, locale adaptation, design review, publish QA, deterministic orthography linting, and channel-aware image generation.
omd:orchestrator5-stage workflow (write → review → revise → localize → critic → images → handoff) with a hard 2-round revision cap. Anthropic orchestrator-workers + LangGraph supervisor pattern.
omd:kr-writertoss-tech-design (default) / karrot-neighborly / brunch-maker / naver-d2 / biz-report / academic / journalism … Each preset has a 9-field voice spec. Anti translation-ese.
omd:locale-adapterKR is the source of truth. Cultural reference swaps, JP honorific matching, ZH-TW traditional idioms — voice/register match, not literal translation.
omd:designer-reviewAudits HTML/MD/JSX against DESIGN.md — typo hierarchy, color budget, radius scale, component states, mobile. Severity BLOCK / WARN / FYI with line refs. Read-only advisory.
omd:final-qaRead-only critic. Forbids 'looks good' rubber-stamps, requires line refs for every FAIL, hard 2-round revision cap.
omd:codex-imageOne <!-- omd:gen-image --> spec, three downstream paths: Codex native generation · omd-asset-curator free-license fallback (Claude Code) · OpenCode user-queue. Idempotent, IP-safe (no logo/face synthesis).
omd-master runs the harness phases and dispatches the 10 harness specialists below in parallel where independent. The v0.2 agent layer adds 6 more (orchestrator / kr-writer / locale-adapter / designer-review / final-qa / codex-image) — shown in the section above.
omd-masterConversational state machine. Runs the harness phases, asks the 3 mandatory user checkpoints, dispatches sub-agents.
omd-ux-researcherReads bundled references, validates Tier-1 official design system URLs, drafts the brief.
omd-ui-juniorGenerates wireframes and component manifests strictly from DESIGN.md tokens. Defines all 5 states for every screen.
omd-ux-engineerSection-level interaction / motion / IA / mobile / Web Vitals / WAI-ARIA audit + code-level fixes. NN/g + Refactoring UI integrated. Pairs with ui-junior (generator).
omd-asset-curatorPicks medium (inline SVG / chart library / Lottie / Rive / Unsplash / 3D). Stack-aware (recharts vs chartjs, lucide vs heroicons).
omd-microcopyVoice-consistent copy generation strictly tied to DESIGN.md §10. Refuses forbidden phrases.
omd-ux-writerSection-level copy audit + 2-3 strong alternatives + A/B hypothesis. Podmajersky / Mailchimp / Stripe / GitHub voice docs integrated. Pairs with microcopy (generator).
omd-a11y-auditorDeterministic WCAG checks. axe-core + lighthouse + Tier-1 DS URL liveness. Pass/fail is binary.
omd-persona-testerWalks the generated UI under 4 strict personas (V/J/F/S) with hard turn budget. Emits 6 quantitative metrics.
omd-criticReads full run output, user feedback, persona ABANDONs. Writes a critique that re-enters at the lowest broken phase, not surface patches.
omd-master spawns the right specialists at each phase, asks 3 mandatory user checkpoints, and emits artifacts to .omd/runs/<id>/.
Define the brief and the constraints.
Brief · constraints · success metrics
Tier-1 DS scan · competitor URLs
Information architecture · sitemap
Lock the brand tokens and components.
ASCII wireframes · 5 states / screen
DESIGN.md · tokens · philosophy
Component manifest · variants
Generate artifacts in parallel.
Inline SVG / chart / 3D / image picks
Voice-consistent copy · §10 cited
Catch issues, package the deliverable.
axe-core + 4-persona walkthrough
Zip · v0/Cursor-ready package
Once the system is locked, Asset sourcing and Microcopy dispatch in parallel.
Both agents read the same DESIGN.md but emit independent artifacts — fastest end-to-end.
Three points where the harness pauses for your OK:
Skipping any aborts the run cleanly.
What you say · what the agent does. No magic — every transition is a skill firing.
Agent picks a reference (likely Linear or Stripe), proposes a hybrid DESIGN.md, asks for confirmation, writes the file plus shims.
Reads DESIGN.md, builds the component with brand tokens, picks an inline SVG matching the voice, drops microcopy that follows §10 voice rules.
Invokes the harness — runs the 10-phase pipeline, spawns sub-agents in parallel, asks 3 user checkpoints, hands back a v0/Cursor-ready package.
Reads your package.json, sees recharts is installed, builds with brand colors. No library mismatch.
Silently appends to .omd/preferences.md. Next CTA anywhere in the project applies the rule. Run "fold preferences" later to merge by scope.
Nothing hidden. Every path is documented; every owner is named.
.claude/skills/omd-*/SKILL.mdinstall-skillsClaude Code skill bundle — 17 skills (core flow + capture/assets + v0.2 agent layer).agents/skills/omd-*/SKILL.mdinstall-skillsCodex skill bundle (same 17 skills — official discovery path).opencode/skills/omd-*/SKILL.mdinstall-skillsOpenCode skill bundle (same 17 skills).cursor/rules/omd-design.mdcinstall-skillsCursor channel (--agent cursor) — rules shim + shared .claude/data catalog, no skills/hooks.claude/agents/omd-*.mdinstall-skills16 canonical sub-agents (master + 15 specialists).claude/data/*install-skillsreference catalog + ctx-prime, fingerprints, vocabulary, opt-out corpus.claude/hooks/*.cjsinstall-skillsUserPromptSubmit / SessionStart / PostToolUse hooksreferences/*/DESIGN.mdbundled286 real design systemsDESIGN.mdyour agentYour project's authoritative brand specCLAUDE.md / AGENTS.md / .cursor/rules/omd-design.mdcomd:syncPointers so every agent reads DESIGN.md.omd/preferences.mdomd:rememberAppend-only design correction log.omd/runs/<id>/omd:harnessPer-harness-run artifacts (briefs, wireframes, eval, handoff zips)DESIGN.md is a structured markdown file that defines your project's brand spec — tokens (colors, typography, spacing, radius), voice, narrative, principles, personas, states, and motion. AI coding agents (Claude Code, Codex, OpenCode, Cursor) read it as authoritative context before generating any UI, so the output looks like your brand instead of generic 'modern minimalist' slop.
Run `npx oh-my-design-cli install-skills` once in your project. It installs 17 skills (core flow + live-capture + asset + the v0.2 agent layer: orchestrator, kr-writer, locale-adapter, designer-review, final-qa, codex-image), 16 sub-agents (master orchestrator + 15 specialists), 4 hooks, and 221 reference DESIGN.md files. After restarting your AI coding agent, you just talk in natural language — skills route to the right sub-agents automatically.
No. The install is a pure markdown copy — zero API calls, zero data leaves your machine. Your AI coding agent (Claude Code, Codex, OpenCode, or Cursor) is the inference layer; install just teaches it where to look.
Re-run `npx oh-my-design-cli@latest install-skills` in your project. It's idempotent — managed files (those with the `<!-- omd:installed-skill -->` marker) refresh in place; your edits without the marker stay untouched (status `skipped-drift`). Pass `--force` to overwrite custom edits. Then restart your agent. See CHANGELOG.md for what changed each release.
Claude Code, Codex, OpenCode, and Cursor — Cursor has a dedicated install channel (--agent cursor) that writes the .cursor/rules shim plus the shared reference catalog. The skill markdown files are agent-agnostic; hooks ship for Claude Code specifically.
Yes. Every reference has a raw markdown twin at oh-my-design.kr/design-systems/<id>.md — agents can fetch the full DESIGN.md directly over HTTP. Curated sets by use case live at oh-my-design.kr/collections.
The builder preview composes your first prompt from your live config (reference, components, token overrides, dark mode). Copy it from the install CTA and paste it into your agent — omd:init reads the prompt and bootstraps a matching DESIGN.md.
Yes. If a DESIGN.md exists at repo root, omd:apply uses it as-is. Otherwise omd:init proposes a hybrid from one of the 221 references.
.omd/preferences.md is the running log of corrections (append-only). DESIGN.md is the canonical spec. Run "fold preferences" to merge by scope.
The omd-harness skill runs a 10-phase design pipeline (Discovery → Research → IA → Wireframes → Design system → Components → Asset sourcing → Microcopy → Validation → Handoff). It dispatches sub-agents in parallel where independent, asks 3 mandatory user checkpoints, and emits a v0/Cursor-ready package. Trigger it by saying things like 'design the entire onboarding from scratch' or '/omd-harness <task>'.
Invoking /omd-harness <task> creates .omd/runs/<id>/ and steps through the 10 phases. Each phase emits artifacts. The final zip is v0/Cursor-ready.
Yes — MIT licensed, open source, no signup, no API key, no paid tier. The references in the bundle belong to their respective companies and are reproduced for educational reference only.