zugzbot 1.0.21 → 1.0.23

package/.opencode/oh-my-design/web/public/llms-full.txt

@@ -1,3149 +0,0 @@
-# oh-my-design — llms-full.txt
-
-> Full concatenated context for LLM agents. Pair with the curated TOC at `/llms.txt`.
-> Generated by `scripts/gen-llms-full.cjs` at build time. Sources are canonical (README, CHANGELOG, primary SKILL.md, agent prose, brand catalog).
-> Generated: 2026-06-10T15:53:25.292Z
-
-
-===========================================================
-# README
-===========================================================
-
-<p align="center">
-  <img src=".github/assets/logo-bg.png" width="480" alt="oh-my-design" />
-</p>
-
-<h1 align="center">oh-my-design</h1>
-
-<p align="center">
-  <strong>One-command bootstrap for skill-driven design with your AI coding agent.</strong> 246 real company design systems. Zero AI calls in the install. Then you just talk to your agent.
-</p>
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/oh-my-design-cli"><img src="https://img.shields.io/npm/v/oh-my-design-cli?style=flat-square&color=cb3837" alt="npm version" /></a>
-  <a href="https://www.npmjs.com/package/oh-my-design-cli"><img src="https://img.shields.io/npm/dm/oh-my-design-cli?style=flat-square&color=cb3837" alt="npm downloads" /></a>
-  <a href="LICENSE"><img src="https://img.shields.io/github/license/kwakseongjae/oh-my-design?style=flat-square" alt="License" /></a>
-  <a href="https://github.com/kwakseongjae/oh-my-design/stargazers"><img src="https://img.shields.io/github/stars/kwakseongjae/oh-my-design?style=social" alt="GitHub Stars" /></a>
-  <img src="https://img.shields.io/badge/references-246-7c5cfc?style=flat-square" alt="246 References" />
-  <img src="https://img.shields.io/badge/CLI%20commands-1-blue?style=flat-square" alt="One CLI command" />
-</p>
-
-<p align="center">
-  English | <a href="README.ko.md">한국어</a> | <a href="README.ja.md">日本語</a> | <a href="README.zh-TW.md">繁體中文</a>
-</p>
-
----
-
-## What is oh-my-design?
-
-**oh-my-design (OmD)** is a design system for AI coding agents. It turns Claude Code / Codex / OpenCode / Cursor into a senior product designer with a working memory of your brand. You install once. After that, you just describe what you want — components, screens, copy, assets, charts — and the agent applies your project's design system and ships. `DESIGN.md` is the brand spec ([Google Stitch](https://stitch.withgoogle.com/docs/design-md/overview/) tokens + a brand-philosophy layer: Voice / Narrative / Principles / Personas / States / Motion), and 246 real-company DESIGN.md files ship in this package. **No API keys. No external infra. Everything runs inside your existing CLI session.**
-
-## Install
-
-```bash
-npx oh-my-design-cli install-skills
-```
-
-Then restart your agent (Cmd+Q in Claude Code, then relaunch) so the new skills + agents are loaded.
-
-That is the only CLI command you will run. Everything else is natural language to your agent.
-
-The installer asks **where** to install: **Project** (`./.claude/skills` — this project only, the default) or **Global** (`~/.claude/skills` — every project; skills + sub-agents, leaves your global hooks/settings untouched). Skip the prompt with `--global` for the user-level install.
-
-## Your first 60 seconds
-
-This is the whole point: one prompt turns into a `DESIGN.md` your agent remembers across every future session.
-
-1. Install (above), then **restart your agent** (Cmd+Q, relaunch) so it loads the new skills.
-
-2. In your project, type your first prompt — copy this exactly:
-
-   > Set up our design system — Toss-style, for a family meal-tracking app.
-
-   Your agent runs **`omd:init`**: it recommends a reference from the 246 real-company catalog, asks you to confirm, and writes **`DESIGN.md`** to your project root. (`omd:sync` then wires up the `CLAUDE.md` / `AGENTS.md` / Cursor shims so every agent reads it automatically.)
-
-   **That `DESIGN.md` is your activation — your agent now remembers your brand.**
-
-3. Now build against it:
-
-   > Design the home screen.
-
-   The agent reads `DESIGN.md` and ships brand-correct UI. No re-explaining your design system, ever again.
-
-Don't want Toss? Any brand works — `Stripe-style`, `Linear-clone B2B SaaS`, `Karrot-style marketplace`. Browse the full catalog at [oh-my-design.kr/design-systems](https://oh-my-design.kr/design-systems).
-
-## Supported agents
-
-| Agent | Channel | What gets installed |
-|---|---|---|
-| **Claude Code** | `--agent claude-code` (default) | Full bundle — skills, 16 sub-agents, hooks, data under `.claude/` |
-| **Codex** | `--agent codex` | Skill bundle at `.agents/skills/` (official discovery path) |
-| **OpenCode** | `--agent opencode` | Skill bundle at `.opencode/skills/` |
-| **Cursor** | `--agent cursor` | First-class rules channel — `.cursor/rules/omd-design.mdc` shim + the shared `.claude/data` catalog (no skills/hooks) |
-
-The default install targets every detected agent; pass `--agent <name>` to install a single channel.
-
-## What's inside
-
-**17 skills · 16 sub-agents · 246 verified references · activation hooks** — installed by the one command above.
-
-- **Skills** — core flow (`omd:init` / `omd:apply` / `omd:harness` / `omd:sync` / `omd:remember` / `omd:learn` / `omd:taste` — say "what are my preferences" to see everything the loop has learned, pending, or snoozed), live capture + assets (`omd:reference-capture` / `omd:asset-fetch` / `omd:experiment-gallery`), the v0.2 agent layer (`omd:orchestrator` / `omd:kr-writer` / `omd:locale-adapter` / `omd:designer-review` / `omd:final-qa` / `omd:codex-image`), plus the standalone `claude-design` skill that drives claude.ai/design from your terminal.
-- **Sub-agents** — `omd-master` + 15 specialists (UX research, UI generation, asset curation, microcopy, a11y audit, persona testing, critique, …).
-- **References** — 246 real-company `DESIGN.md` files, each verified against live sources. Every reference is also served as raw markdown at `oh-my-design.kr/design-systems/<id>.md`, so agents can fetch it directly.
-- **Hooks** — UserPromptSubmit / SessionStart / PostToolUse activation so the skills trigger on natural language, not just slash commands.
-
-Full skill-by-skill and agent-by-agent reference: **[oh-my-design.kr/docs](https://oh-my-design.kr/docs)**.
-
-Prefer MCP? **[oh-my-design-mcp](./packages/mcp/)** exposes the same catalog as MCP resources/tools for Claude Desktop, Cursor, Cline, Continue, and Codex — see [`packages/mcp/README.md`](./packages/mcp/README.md).
-
-## Upgrading
-
-```bash
-npx oh-my-design-cli@latest install-skills
-```
-
-Idempotent. Managed files (those carrying the `<!-- omd:installed-skill -->` marker) are refreshed in place; files you edited are left untouched (`skipped-drift`) unless you pass `--force`. Restart your agent after re-running.
-
-```bash
-npx oh-my-design-cli --version       # what your project currently uses
-npm view oh-my-design-cli version    # latest on the registry
-```
-
-What changed each release — including anything that needs more than a re-install — is in [CHANGELOG.md](./CHANGELOG.md).
-
-## Links
-
-- **Catalog** — [oh-my-design.kr/design-systems](https://oh-my-design.kr/design-systems) (every reference, with raw `.md` twins for agents)
-- **Collections** — [oh-my-design.kr/collections](https://oh-my-design.kr/collections) (curated sets by use case)
-- **Docs** — [oh-my-design.kr/docs](https://oh-my-design.kr/docs) (install options, skills, agents, FAQ)
-- **Changelog** — [CHANGELOG.md](CHANGELOG.md) · migrating from 0.1.x: [MIGRATION.md](MIGRATION.md)
-
-## License
-
-MIT — see [LICENSE](LICENSE). References belong to their respective companies; reproduced for educational reference.
-
-
-===========================================================
-# CHANGELOG (full release history)
-===========================================================
-
-# Changelog
-
-User-facing changes to `oh-my-design-cli` and the bundled skill / agent files.
-
-After any release: `npx oh-my-design-cli@latest install-skills`. Managed files (those carrying the `<!-- omd:installed-skill -->` marker) refresh automatically; your edits outside the marker block are preserved. See `Upgrading` in `README.md`.
-
----
-
-## 1.8.1 — 2026-06-11
-
-**Catalog +25: KR/JP/TW/US 배치 — 카탈로그가 221 → 246개로. 수집→검수→배포 파이프라인 스크립트화.**
-
-- **KR 5** — 3o3(삼쩜삼) · Blind(블라인드) · MiriCanvas(미리캔버스) · Imweb(아임웹) · Modusign(모두싸인). 미리캔버스가 KR design-tools 공백을 채움.
-- **JP 5** — Rakuten(ReX 토큰을 공개 npm tarball에서 직접 추출) · Wantedly(공식 Brand Guide PDF 기반) · ABEMA(다크 스트리밍 시스템) · STORES · Timee.
-- **TW 5** — Accupass · FunNow · Firstory · Omnichat · Greenvines(綠藤生機).
-- **US 5** — Google(Material 3) · Microsoft(Fluent 2) · Adobe(Spectrum 2) · Salesforce(SLDS 2 styling hooks) · Dropbox(brand.dropbox.com). 공식 DS 헤비웨이트 5종이 처음으로 카탈로그에 합류.
-- 전 레퍼런스 Proof Gate(라이브 inspect raw sample ≥5) + token↔prose 정합 게이트 통과, KR/TW는 brand-owned Tier-1 소스 ≥2 충족.
-- **KR 5 (2차)** — Ringle(링글) · POSTYPE(포스타입) · LaundryGo(런드리고) · Greeting(그리팅) · Danawa(다나와). 개선된 게이트 파이프라인으로 추가 — 5/5 첫 실행에 전 게이트 그린.
-- **새 파이프라인 스크립트** — `web/scripts/verify-reference.mjs`(레퍼런스 단독 게이트: catalog-integrity per-ref 항목 + strict-YAML + 로고 liveness, registry 빌드 불필요) + `web/scripts/sync-catalog.mjs`(fingerprints ×3 / design-md mirror / 카운트 문자열 / llms.txt Examples / npm test 일괄). `omd:add-reference` 스킬에 batch 서브에이전트 프로토콜 명문화.
-
----
-
-## 1.8.0 — 2026-06-10
-
-**The taste loop closes: your corrections become preferences, preferences become proposals, and one click folds them into DESIGN.md. Plus a taste dashboard and a scripted release bench.**
-
-- **Auto-fold gate.** When a preference scope recurs past the threshold, `session-end-foldin` writes a structured proposal and your *next session opens by asking* — one selectable-option question ("이 취향, DESIGN.md에 반영할까요?"). Approve → `omd:learn` folds it; decline → snoozed until it recurs again. The old remember → wait → manually-run-learn dance is gone.
-- **Ambient capture now persists — and sees more.** `post-edit-watch` no longer just warns: off-system drift is recorded to `.omd/preferences.md` as `confidence: inferred` (24h dedup, never while editing DESIGN.md/.omd). Detection grew from hex colors to radius and motion-duration — including Tailwind classes, kebab-case CSS, **camelCase JSX inline styles**, and `.html` outputs (what `omd:harness` actually emits).
-- **`omd:taste` — see what the system thinks you like.** One command renders applied / pending (with recurrence counts and how far from the fold threshold) / snoozed / not-yet-known axes, with inline actions (fold now · forget · refine). Skill count: 16 → 17.
-- **Reviewers feed the loop.** `omd:designer-review` and `omd:final-qa` now end recurring findings with a single opt-in question — "이 패턴, 취향으로 기록할까요?" — recording with `signal: review` on consent. Never auto-recorded, never auto-folded.
-- **Scripted 2-bench release routine.** `scripts/bench/score-init.mjs` (first-60s) and the new `scripts/bench/score-taste.mjs` (capture → reflect → propose) score real headless runs deterministically; both at 10/10 on this release.
-- Fixes & hygiene: `session-state-loader` output envelope corrected (its session-start context was silently dropped); catalog resolution order normalized across all 4 documents with a CI drift guard; installer channel mapping unified into one table (cursor dedup behavior preserved, tested); `omd:kr-writer` presets now self-contained for npx installs; dangling dev-only references cleaned; docs/JSON-LD FAQ generated from one source; release workflow actions bumped for Node 24 runners.
-
----
-
-## 1.7.2 — 2026-06-10
-
-**First-run fixes for npx installs (skill triggering, local catalog, dead hooks), a first-class Cursor install channel, and a safer `omd:init`.**
-
-- **Installed-skill marker moved below frontmatter.** The `<!-- omd:installed-skill -->` marker was written *above* the YAML frontmatter, which broke frontmatter parsing in some hosts and stopped skills from triggering on natural language. Managed files are rewritten with the marker after the frontmatter block; re-run `install-skills` to pick it up.
-- **Reference catalog + ctx-prime install locally.** `install-skills` now copies the reference catalog and ctx-prime data into `.claude/data/`, so `omd:init` works on the very first run of an npx install — no more empty-catalog dead end. As a safety net, `omd:init` also falls back to the website's raw `.md` endpoints when the local catalog can't be resolved.
-- **Cursor install channel.** `install-skills --agent cursor` (also offered in the channel multiselect, auto-detected when `.cursor/` exists) writes the `.cursor/rules/omd-design.mdc` shim — identical to the `omd:sync` template, body-hash marker included — plus the shared `.claude/data` catalog. No skills, hooks, or settings are written for Cursor.
-- **Hooks revived on clean installs.** `post-edit-watch`, `foldin`, `state-loader`, and `skill-activation` shipped in states that left them dead on a fresh install; all four now register and fire correctly.
-- **`omd:init` apply-mode confirmation.** Before writing, `omd:init` now distinguishes root bootstrap vs reference-only mode and asks before replacing an existing `DESIGN.md` — on Claude Code via the selectable-option (AskUserQuestion) UI.
-- **Builder → agent prompt handoff.** The builder preview's install CTA composes your first prompt from the live config (reference, components, token overrides vs reference defaults, dark mode, style preferences) instead of a generic one-liner, so what you customized in the builder is what `omd:init` bootstraps.
-
-> Site-only (no npm impact, deploys with the site): raw DESIGN.md twin endpoints at `/design-systems/<id>.md` (agents can fetch references over HTTP), 8 curated collection pages at `/collections/[slug]`, builder floating install CTA + neutral logo nameplates, GA4 install-funnel events (`install_copy` / `prompt_copy`), The Wall card-expand interaction removed (static tiles, hover kept), and a four-README restructure around the install→activate path.
-
----
-
-## 1.6.7 — 2026-06-05
-
-**Codex / OpenCode skills now install to their real discovery paths — and `claude-design` runs on all three channels.**
-
-- **Correct channel paths.** `install-skills` installed Codex skills to `.codex/skills/` and OpenCode skills to a flat `.opencode/agents/<name>.md`. Neither matches the agents' actual discovery rules, so those skills were effectively invisible. Now:
-  - **Codex → `.agents/skills/<name>/SKILL.md`** (official path per `developers.openai.com/codex/skills`).
-  - **OpenCode → `.opencode/skills/<name>/SKILL.md`** (folder skills per `opencode.ai/docs/skills`).
-  - Both are folder layouts, so multi-file skills install with their `scripts/` and `references/` intact.
-- **`claude-design` is no longer Claude-Code-only.** Its primary backend is Playwright (a `node`-only, agent-agnostic Chrome driver), so it works from Codex and OpenCode too. `x-omd-channels` now lists all three. The `claude-in-chrome` path remains a Claude-Code-only fallback.
-- **Note:** if you previously installed for Codex/OpenCode, the old `.codex/skills/` and `.opencode/agents/` files are now stale — re-run `install-skills` and delete the old copies. OpenCode also reads `~/.claude/skills/`, so a `--global` install already surfaces skills there.
-
----
-
-## 1.6.4–1.6.6 — 2026-06-05
-
-**`install-skills` selection UX.**
-
-- `--skills-only` now actually shows agents as skipped (was listing all 16 in the summary).
-- Auto-resolved targets no longer blast all three ecosystems; they're narrowed to channels the selected skills support.
-- Scope / skills / sub-agents / channels resolve independently — passing `--skills` no longer suppresses the "where do I install" (channel) and scope prompts.
-
----
-
-## 1.6.3 — 2026-06-05
-
-**Project / global install scope for `install-skills`.**
-
-- **Install scope: project or global** — `install-skills` now asks where to install (or pass `--global`): **Project** (`./.claude/skills`, the default) or **Global** (`~/.claude/skills`, available in every project). Global writes skills + sub-agents (+ data) to the user-level dir and deliberately leaves your global hooks/`settings.json` untouched — ideal for using `claude-design` everywhere without per-project installs.
-
----
-
-## 1.6.2 — 2026-06-05
-
-**New bundled skill `claude-design` (terminal → claude.ai/design), single-skill install via `--skills-only`, and channel-restricted skills.**
-
-- **`claude-design` skill (Claude Code only)** — analyzes your codebase (stack, tokens, components, real UI copy, brand assets) and drives **claude.ai/design** end-to-end to generate a code-grounded design, returning a shareable link. If claude.ai/design interjects a "Quick questions" clarifying panel before generating, the skill detects it (it appears late, in a closed Questions tab, in varying layouts) and — by default — the agent reads the questions and picks the appropriate option per your codebase, with a "Decide for me" autonomous fallback for headless runs. Install standalone: `npx oh-my-design-cli install-skills --skills claude-design --agent claude-code --skills-only`.
-- **`--skills-only` install flag** — install a single skill with no agents / hooks / omd onboarding (clean standalone install).
-- **`x-omd-channels` skill frontmatter** — a skill can declare its compatible agent channels; incompatible targets are skipped (`claude-design` is claude-code-only — needs Chrome automation + `python3` + a global `playwright`).
-- **Multi-file skills** — `install-skills` now copies a skill's full tree (`scripts/`, `references/`), not just `SKILL.md`.
-
-> Site-only (no npm impact, deploys with the site): builder UX (registry-wide curation, scroll-to-top, mobile DESIGN.md toggle), landing mobile polish (Live Proof carousel, The Wall show-more, 2-col footer), and footer version sync to `package.json`.
-
----
-
-## 1.6.1 — 2026-06-02
-
-**Catalog grows to 150 brands (+13), the bundled DESIGN.md mirror is fixed, and the reference pipeline gains deterministic proof/format gates.**
-
-- **13 new references** through a new proof-gated pipeline — Sendbird (US), KR: velog · NHN Cloud · Hyundai Card · Melon · Bithumb, TW: Rayark · 91APP · Kdan · Hahow · Gogolook · KKBOX · Cake. Every spec value is live-DOM-inspected or pulled from an open-source token file; no fabricated values.
-- **Fixed the bundled `design-md/` mirror** — 110 DESIGN.md files carried stale pre-migration frontmatter/bodies (one shipped a broken `## 1. Overview` header). Re-synced to the canonical references.
-- **Backfilled Do's-and-Don'ts** for 21 references that previously rendered an empty Guidelines section.
-- **New deterministic catalog gates** — proof block for verified refs, §4 placeholder-value lint, §7 guideline-marker advisory, §1 blank-line guard; plus `spec/regional-sources.yaml` for KR/TW source coverage.
-
----
-
-## 1.6.0 — 2026-05-28
-
-**Conversational deepening — harness skill now reads your codebase before asking, then runs a single-batch picker interview matching the Ouroboros/donguri feel — zero external plugin dependencies.**
-
-> **2026-05-29 post-release AEO addendum** (no version bump — npm bundle unchanged):
->
-> Marketing/docs site (`oh-my-design.kr`) and LLM-facing content deepened so LLMs cite oh-my-design when asked about design.md / vibe coding / design systems for AI coding agents. CLI behavior unchanged; no `npm publish` needed.
->
-> Added — LLM-facing content:
-> - `web/public/llms-full.txt` — full concatenated context (README + entire CHANGELOG + primary SKILL.md files + omd-master agent + spec/omd-v0.1 + 100+ brand catalog one-liners). 173 KB / 2,653 lines. Pair with the curated TOC at `/llms.txt`. Generated by `scripts/gen-llms-full.cjs`; regenerated automatically on `web` dev / build / publish.
-> - `web/public/llms.ko.txt` — Korean mirror of `llms.txt` for KR-first LLM queries with inline Korean mini-FAQ.
-> - `scripts/gen-llms-full.cjs` — deterministic concatenation helper. Reads canonical sources, never invents content.
->
-> Added — Next.js routes (5 new, 24 dynamic):
-> - `/faq` — 18 Q&A in 4 sections; `FAQPage` JSON-LD with 18 Question/Answer entities.
-> - `/what-is-design-md` — definitional page claiming the term; `DefinedTerm` + `Article` JSON-LD.
-> - `/alternatives/[slug]` for `shadcn`, `v0`, `anima`, `locofy` — 7-row comparison + when-to-use; `Article` + 2× `SoftwareApplication` JSON-LD.
-> - `/changelog` + `/changelog/[version]` — 24 SSG pages parsed from this file via `web/src/lib/changelog.ts`; per-version `Article` JSON-LD with `datePublished`.
->
-> Changed — AEO hygiene:
-> - `web/src/app/layout.tsx` — `softwareVersion` in schema.org now imports from `package.json` (was hardcoded `"1.5.0"`). Three v1.6 entries appended to `featureList`.
-> - `web/public/llms.txt` — new section describing CTX-PRIME, Interview-lite, sub-agent auto-recovery, and the natural-language auto-trigger phrasings.
-> - `web/src/app/sitemap.ts` — 7 new static routes + 24 dynamic changelog routes.
-> - `web/package.json` — `dev`/`build` regenerate `llms-full.txt` first so the deployed copy never drifts from canonical sources.
-
-Closes the gap where natural-language design requests ("그럴싸한 랜딩 만들어줘", "프로토타입이라도 구색 갖춰서") fell through `omd-harness` and landed in plain-coding mode. Five entry-side defects fixed in one release. Full RFC: `research/harness-design/20-harness-1.6-conversational-deepening.md`.
-
-### Added
-
-- **`scripts/ctx-prime.cjs`** — deterministic, sub-50ms codebase analyzer. Emits `<RUN_DIR>/ctx-prime.json` with stack detection, dominant brand color, font families, voice keywords, language, surface inventory, audience hypothesis (with confidence + evidence), and wow-moment candidates. Pure node, no deps.
-- **`omd-harness` Step 2.5 — CTX-PRIME phase.** Runs `ctx-prime.cjs` before reference selection, surfaces analysis as the opening move ("이 레포 분석했어요 — Next.js + #0064FF 베이스 + 11개 surface"), and asks one `AskUserQuestion` picker for audience confirmation with confidence-ranked options + free-text "Other".
-- **`omd-harness` Interview-lite** — a single batched `AskUserQuestion` covering `exit_scope` / `wow_moment` / `cta_primary` / `visual_grounding`. Options derived from `ctx-prime.json` (e.g., wow-moment options use detected `wow_moment_candidates`). Answers written to `<RUN_DIR>/handoff/.handoff.json` as `prefilled_slots`.
-- **`omd-master` INTAKE — prefilled-slots fast path.** When `.handoff.json` has `prefilled_slots`, skip SLOT_GATE entirely and jump straight to PROPOSE_PLAN. Never re-asks `audience` / `wow_moment` that the harness already collected.
-
-### Changed
-
-- **`omd-harness` trigger description broadened** — now matches "랜딩페이지", "프로토타입", "그럴싸한", "구색", "first screen", "MVP UI", "landing", "prototype", etc. Generic natural-language requests now activate the harness reliably.
-- **`omd-harness` Step 1 — subagent registration auto-recovery.** Was a hard gate that stopped on missing `omd-master`; now copies the agent file from `npm root -g`/local to `.claude/agents/` (or detected agent flavor) and continues. Restart-Claude-Code message demoted to last-resort fallback.
-
-### Why
-
-Real-session failure trace where a user requested a landing-page prototype, expected an Ouroboros-style multi-turn brainstorm, and got a single-shot DESIGN.md emit instead. Diagnosis traced five concrete entry-side defects in `skills/omd-harness/SKILL.md`. All five fixed without breaking the run-dir / handoff contract — legacy runs (without `prefilled_slots`) follow the unchanged path.
-
-### Migration
-
-`npx oh-my-design-cli@latest install-skills --all` picks up the new harness skill + master agent. No config changes required.
-
-### Files added to bundle
-
-- `scripts/ctx-prime.cjs` added to package `files:` array.
-
----
-
-## 1.5.0 — 2026-05-19
-
-**v0.2 agent layer ships in the bundle. Blog feature removed. Release-hygiene routine added.**
-
-Bundle is now **15 skills + 16 sub-agents** (was 9 + 11). Re-run `npx oh-my-design-cli@latest install-skills` to pick it up.
-
-### Added — v0.2 agent layer (6 skills + 6 sub-agents)
-
-A supervisor + specialist topology for multi-step authoring, all channel-aware (Claude Code / Codex / OpenCode):
-
-- **omd-orchestrator** — supervisor. 5-stage workflow (write → review → revise → localize → critic → images → handoff), hard 2-round revision cap. Anthropic orchestrator-workers + LangGraph supervisor pattern.
-- **omd-kr-writer** — Korean prose with **12 voice presets** (toss-tech-design default / karrot-neighborly / brunch-maker / naver-d2 / biz-report / academic / journalism / …). 9-field voice spec per preset in `data/research/2026-05-18-kr-style-presets.md`. Anti translation-ese.
-- **omd-locale-adapter** — KR → EN/JP/ZH-TW **adaptation** (cultural reference swaps, JP honorific matching, ZH-TW traditional idioms). KR is the source of truth.
-- **omd-designer-review** — visual + brand audit vs DESIGN.md (typo hierarchy, color budget, radius scale, component states, mobile). Severity BLOCK / WARN / FYI with line refs. Read-only advisory.
-- **omd-final-qa** — read-only critic, **8-item publish rubric**, forbids "looks good" rubber-stamps, hard 2-round cap.
-- **omd-codex-image** — channel-aware image materialization. One `<!-- 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).
-
-### Added — release hygiene
-
-- **omd-release-hygiene** skill + `scripts/check-release-hygiene.sh` + husky `pre-commit` gate. Blocks experiment byproducts (v1/v2 `.bak`, `_source-*`, contact sheets, logs, scratch dirs) from entering a commit. Codifies the docs-sync + npm-packaging checklist for new skills.
-
-### Removed
-
-- **`/blog` route and the blog feature** (was dev-only behind `NODE_ENV`). Routes, components, `@/lib/blog*`, and the blog views/likes KV endpoints removed. `omd-kr-writer` is kept — KR voice synthesis is useful beyond the blog.
-- **kr-spellcheck** — a deterministic Korean-orthography linter was prototyped and dropped. A 25-pattern regex heuristic had too low recall (~50–67%) to be worth shipping. If you need automated KR spellcheck, wire an external service such as the 부산대 한국어 맞춤법 검사기. (`omd-final-qa` dropped its rubric item 9 accordingly.)
-
-### Changed
-
-- **`install-skills` TUI** — interactive multiselect order is now **skill → sub-agent → channel**. Agent channels default to none-selected (you pick); "detected" hints read real `.claude/`/`.codex/`/`.opencode/` presence instead of the all-3 fallback. Added `enter = 확인` hints.
-- `experiments/` is now gitignored (local scratch, like `.promo/` and `.experiments/`).
-
----
-
-## 1.4.0 — 2026-05-15
-
-**Architectural refactor — single-source registry replaces 5 hand-maintained maps.**
-
-Three consecutive KR-10 batches (78→88, 88→98, 98→108) lost data because the sub-agent missed one of 5 hand-maintained data maps (`route.ts`, `logos.ts`, `tokens.ts`, `homepage-urls.ts`, `design-systems.ts`). `homepage-urls.ts` was missed in 2 batches in a row, requiring a 20-brand backfill. Prose checklists in `omd-add-reference` Phase 5 failed to enforce parity.
-
-Option C — single source of truth + machine gate:
-
-- **Canonical YAML frontmatter** in every `references/<id>/DESIGN.md` carries `id`, `name`, `country` (ISO), `category` (slug), `homepage`, `primary_color`, `logo.{type,slug}`, `verified`, and optional `display_name_kr` + `ds` block. All 108 existing references migrated via `web/scripts/migrate-frontmatters.mjs` (preserves any existing fm; merges from the 5 source maps; emits canonical block).
-- **Typed registry** at `web/src/data/registry.generated.ts` (autogenerated, ~41 KB, 108 entries, sorted by id for stable diff). Built by `web/scripts/build-registry.mjs`, which validates the schema and fails fast pointing at the offending file. Auto-runs on `npm run dev` and `npm run build`.
-- **5 consumers refactored** to derive everything from `REGISTRY` / `REGISTRY_BY_ID`. `route.ts`, `logos.ts`, `tokens.ts` (`BRAND_COLORS`), `design-systems.ts` (`getDesignSystem` / `getAllDesignSystems`). `web/src/lib/homepage-urls.ts` **deleted** — `getHomepageUrl` now lives in `registry.generated.ts`. `preview-export-view.tsx` import updated.
-- **Catalog-integrity vitest** at `web/__tests__/catalog-integrity.test.ts`: 108 parametrized per-id assertions (schema, §1 canonical header, prose-first paragraph, fingerprint cross-check, design-md mirror) plus 5 cross-cutting invariants (registry sort, triple-fingerprint byte identity, mirror coverage, llms.txt advisory check). 328 tests, all green.
-- **Husky pre-commit hook** at `.husky/pre-commit` runs `build-registry + catalog-integrity` only when data-plane paths change (`references/`, `data/reference-fingerprints.json`, mirror copies, `registry.generated.ts`, scripts, the test itself). Other commits stay fast. Hook wired via `core.hooksPath = .husky`.
-- **Skill thin-out:**
-  - `.claude/skills/omd-add-reference/SKILL.md` Phase 5: 80 lines → 32 lines. Prose checklist replaced with the canonical frontmatter schema + a single `npm run build-registry && npm test` gate. Sub-agent self-verification step required.
-  - `.claude/skills/omd-batch-launch/SKILL.md` Phase 3: 58 lines → 22 lines. Same pattern.
-- **Build verified** — `cd web && npm run build` passes type-check and prerenders all 247 routes (incl. all 108 `/design-systems/<id>` pages). No regression in API, builder, playground, or browse modal — every surface reads the same registry.
-
-Migration is one-way and irreversible: any new reference must follow the canonical frontmatter schema. The vitest gate (and husky) will refuse to merge a DESIGN.md missing a required field.
-
----
-
-## 1.3.11 — 2026-05-15
-
-- **+10 KR references** (98 → 108): `toss-securities`, `oliveyoung`, `gmarket`, `tving`, `catchtable`, `upstage`, `chai`, `dabang`, `jumpit`, `fastcampus`. Each ships full DESIGN.md + `assets/_reference/{tokens,structure,fonts}.json` + `.live-inspect-proof.json` (≥ 5 raw_samples) with canonical §1 `Visual Theme & Atmosphere` (regression guard verified).
-- Notable: **chai** flagged as service-terminated (2024 → PortOne Solutions rebrand) — kept as archaeological reference. **upstage** Tier-1 partial-positive (brand resource center exists, no token tables).
-- **Dev-only NEW tag** — landing wall + design-systems catalog now surface a `NEW` badge on the latest batch (toss-securities/oliveyoung/gmarket/tving/catchtable/upstage/chai/dabang/jumpit/fastcampus) when `NODE_ENV=development`. Production rendering unaffected.
-- Numbers cascade: READMEs × 4 + llms.txt + landing (hero/sections/the-wall/tokens) + SEO layouts (root/docs/builder/design-systems) + body copy (reference-preview/result-card). All `98` → `108`.
-- API mappings: `route.ts` CATEGORIES/COUNTRIES/DISPLAY_NAMES + `logos.ts` LOGO_MAP/DOMAIN_OVERRIDES + BRAND_COLORS + design-md/ mirror sync. Fingerprints × 3 byte-identical at count=108.
-- Audit log: `data/reference-audits/2026-05-15-kr10.md`.
-
-## 1.3.10 — 2026-05-14
-
-- **+10 KR references** (88 → 98): `kream`, `upbit`, `kbank`, `inflearn`, `wadiz`, `channeltalk`, `lunit`, `bunjang`, `flex`, `classum`. Each ships full DESIGN.md + `assets/_reference/{tokens,structure,fonts}.json` + `.live-inspect-proof.json` (≥ 5 raw_samples) per `omd:add-reference` skill.
-- Tier-1 official DS finding: **Channel Talk publishes Bezier** (github.com/channel-io/bezier-react, MIT) — first canonical KR SaaS DS in the catalog.
-- Numbers refreshed across surfaces: README badges + intro, README.ko.md, docs page, `web/public/llms.txt`, landing copy, root SEO metadata.
-- `web/src/app/api/references/route.ts` + `web/src/lib/logos.ts` register the 10 new brands (categories / country / display name / logo / domain fallback).
-- Audit log: `data/reference-audits/2026-05-14-kr10.md`.
-
-## 1.3.9 — 2026-05-14
-
-- Docs only. `README.md` and `README.ko.md` gain an **Upgrading** section. `CHANGELOG.md` (this file) extended to cover the 1.2.x → 1.3.x line.
-- Docs page (`oh-my-design.kr/docs`) gains an Upgrading card.
-- No skill, agent, hook, CLI, or data change.
-
-## 1.3.8 — 2026-05-14
-
-- **`omd:harness` rule 9** (new): hero archetype catalog with 7 variants — `left-character`, `center-text`, `carousel`, `split-screen`, `editorial-magazine`, `dashboard-preview`, `quote-led`. Brand-vibe → archetype matching table. Same brand re-run → 2nd-rank archetype, so visual variation is automatic.
-- `experiment-meta.json` gains a `hero_archetype` field.
-- Per-archetype grep gates documented (e.g. `center-text` mandates `position:absolute = 0` in the hero block; `dashboard-preview` mandates `<img> = 0` + mock ≥ 50% of viewport).
-
-## 1.3.7 — 2026-05-14
-
-- **`omd:harness` rule 5** rewritten — header logo is a wordmark in a display font, not a separate icon mark. Anti-pattern list: DiceBear `shapes`+wordmark pairs, DiceBear `initials` chips, hand-drawn inline-svg logos, and dashed-box `[YOUR LOGO]` placeholders are all forbidden.
-- Brand-vibe → font + product-name matching table added (Bricolage Grotesque / Space Grotesk / DM Serif Display / Fraunces, all SIL OFL via Google Fonts).
-- `omd:asset-fetch` §1 rewritten to match.
-
-## 1.3.6 — 2026-05-13
-
-- **New skill `omd:experiment-gallery`** — builds 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 per-brand IP audit. Reusable across batches.
-- **`omd:reference-capture` Phase 3.9** (new): browser-harness fast-path auto-detect. When the user has `browser-harness` (https://github.com/browser-use/browser-harness) installed and Chrome with `--remote-debugging-port=9222`, the skill drives live computed-style capture via CDP — measured 3-5× faster than playwright MCP. Falls back to playwright MCP otherwise.
-- **`omd:harness` rule 10** (new): IntersectionObserver reveal safety net mandatory. `@keyframes failsafeReveal` + `html.js-ready` gate + reduced-motion guard. Stops the recurring "fullpage screenshot has blank sections below the fold" regression.
-
-## 1.3.5 — 2026-05-13
-
-- **New skill `omd:asset-fetch`** — free-license asset catalog with verified-200 CDN URLs. DiceBear (CC0 avatars: notionists / lorelei / personas / adventurer / fun-emoji), Lucide (ISC icons), Heroicons (MIT), Tabler (MIT), Picsum (CC0 photos with deterministic seeds), Loremflickr (Flickr-CC photos with deterministic locks), and SIL OFL display fonts (Bricolage Grotesque, Space Grotesk, DM Serif Display, Fraunces, Pretendard, Wanted Sans, Noto Sans KR).
-- **`omd:harness` rule 6** tightened — generator must read from `omd:asset-fetch`. Handcraft inline-svg characters / icons / logos forbidden. CDN call fails → fall back to a brand-color CSS gradient placeholder. Provenance comment `<!-- omd-asset: source=<url>, license=<license>, fetched=<ISO> -->` mandatory on any saved asset file (e.g. `assets/illustrations/hero-character.svg`).
-
-## 1.3.4 — 2026-05-13
-
-- **`omd:harness` rule 7**: single shared `.container-inner` class enforces consistent horizontal padding across `<header>`, `.hero`, sections, `<footer>`. Stops the "header offset 24px from hero" class of bugs on wide viewports.
-- **`omd:harness` rule 8**: hero composition decomposed into separate elements (`.hero-character`, `.hero-chart`, `.hero-stat-card`, `.hero-ornament`). Single-SVG-with-everything forbidden — asset swap no longer destroys the scene.
-- **`omd:reference-capture` Phase 4.0** (new): `.live-inspect-proof.json` mandatory with ≥ 5 raw samples from playwright `browser_evaluate`. If `tokens.json#live_overrides` ends up byte-equal to canonical, the block is deleted (drift-detection: live inspect didn't really run).
-
-## 1.3.3 — 2026-05-13
-
-- Wordmark-only logo pattern introduced in `omd:asset-fetch` §1 (rewritten further in 1.3.7).
-- `omd:asset-fetch` becomes the single source of truth for which CDN URLs the generator may use.
-
-## 1.3.2 — 2026-05-13
-
-- Deferred experiment: a `clone` / `inspired` mode toggle that turned out to be the wrong split. Removed in 1.3.3 in favor of a single-mode flow.
-
-## 1.3.1 — 2026-05-13
-
-- Skill descriptions made count-agnostic. Replaced hard-coded `"67개 / 78개 / 88개 reference"` strings with `"실제 기업 reference"` so the description never drifts with the reference count. `omd:init` and `omd:harness` SKILL.md descriptions updated.
-
-## 1.3.0 — 2026-05-13
-
-- **New skill `omd:reference-capture`** — live brand-site CDP / playwright inspect. Writes `assets/_reference/<id>/` with `tokens.json`, `structure.json`, `fonts.json`, `screenshots/{hero-desktop,hero-mobile}.png`, `LICENSE-NOTE.md`, and `attribution.md`. The captured material is reference-only and never embedded in user product DOM.
-- **`omd:init` CLI drift fix**: the skill body referenced `omd init recommend` and `omd init prepare` subcommands the CLI never actually exposed. Rewritten to use the bundled fingerprints + Bash directly. Skill is now self-contained.
-
-## 1.2.0 — 2026-05-13
-
-- 10 new Korean references (78 → 88 total). Fingerprints + DESIGN.md files now ship in the npm tarball: `socar`, `gangnamunni`, `kakaopay`, `zigzag`, `29cm`, `ably`, `banksalad`, `zigbang`, `wanted`, `remember`.
-- Web `api/references/route.ts`, `lib/logos.ts`, `lib/homepage-urls.ts` mappings extended for the new IDs. `tokens.ts` `BRAND_COLORS` const extended.
-
-## 1.1.0 — 78 references (+11 Korean cluster including KRDS)
-
-The reference bundle expanded from 67 → 78 and the npm tarball now actually carries them.
-
-### Added
-
-- **11 new references** (Korean cluster): `yeogiotte` (여기어때) · `musinsa` · `kurly` (마켓컬리) · `ohouse` (오늘의집) · `naver` · `yanolja` (야놀자) · `coupang` · `kakaobank` · `ridi` · `qanda` · **`krds`** (Korea Republic Design System, 행정안전부 주관 — the first government DS in the bundle).
-- Each new ref ships with a `.verification.md` alongside its `DESIGN.md` documenting Tier 1 live DOM measurements, Tier 2 cross-check status, conflict matrix, and cited philosophy sources.
-- `data/reference-fingerprints.json` regenerated → **count 67 → 78**, all 11 new entries added.
-- `data/reference-tags.md`: 11 new rows + Korean shortcut buckets (한국 이커머스 · 한국 여행 · 공공·행정·정부).
-
-### Fixed
-
-- **Tarball was missing references entirely.** `package.json` `files[]` pointed at `references/**/DESIGN.md` which is now a local-dev symlink — npm doesn't follow symlinks in the whitelist, so 1.0.x shipped 0 reference files. Updated to `web/references/*/DESIGN.md` (the canonical path); tarball now contains all 78 `DESIGN.md` files.
-
-### Changed
-
-- `omd-init` skill references the canonical `web/references/<id>/DESIGN.md` path inside the package.
-- Apple-tier philosophy verification for all 67 pre-existing refs (Tier 1 live DOM + Tier 2 cross-check + `.verification.md` with conflict matrix). Skill behavior unchanged — this only deepens the source-of-truth.
-
-## 1.0.2 — Onboarding banner correction
-
-The `install-skills` "Next" panel still claimed *"Hook이 자동으로 라우팅 — 디자인 의도 감지해서 하네스/스킬 호출"* and described `/omd-harness` as *"hook 우회"*. That language described the 1.0.0 forced-eval hook which was retired in 1.0.1 — auto-routing now happens via Claude's standard description matching, and the hook only gates on DESIGN.md existence. The banner is the first thing users see after install, so it's worth getting right even for a single panel.
-
-### Changed
-
-- `install-skills` Next panel:
-  - "Hook이 자동으로 라우팅 — 디자인 의도 감지해서 하네스/스킬 호출" → "Claude가 description 매칭으로 자동 라우팅. Hook은 DESIGN.md 부재 시 omd:init 안내만."
-  - `/omd-harness <task>` description: "hook 우회, 즉시 진입" → "즉시 진입"
-  - inline comment: "자동 hook 라우팅" → "자동 라우팅"
-
-## 1.0.1 — Trigger surface cleanup
-
-Patch release focused on skill triggering — descriptions, hook behavior, and a stale dependency in the package manifest. No public API change.
-
-### Changed
-
-- Skill triggering uses the standard mechanism (SKILL.md `description`) as the single source of truth. Descriptions trimmed to ~230 chars on average (down from ~700) and rewritten in the canonical "what it does + use-when + chain hints" pattern that the rest of the Claude Code skill ecosystem uses. Modern models generalize from one phrase per language, so the keyword-inflated form was paying maintenance cost without measurable trigger gain.
-- Skill descriptions now ship Japanese and Traditional Chinese trigger examples alongside Korean and English (`omd-apply`, `omd-init`, `omd-harness`, `omd-remember`, `omd-learn`, `omd-sync`, `omd-add-reference`). About half of OmD users work in JP / TW, so they previously fell back to weaker description-only matching with English/Korean phrases.
-- `.claude/hooks/skill-activation.cjs` simplified from a keyword/regex forced-eval injector to a DESIGN.md existence gate. The "OMD SKILL ACTIVATION CHECK" block no longer appears on every UI prompt — the hook is silent unless DESIGN.md is missing and the prompt looks like UI work, in which case it surfaces a single one-line nudge to run `omd:init` first. The forced-eval layer was a custom belt-and-suspenders pattern from the 3.x model era; with 4.x description matching it became overlap and a second source of truth that drifted.
-
-### Removed
-
-- `.claude/skills/skill-rules.json` (dual source-of-truth for the forced-eval matcher).
-- Dangling reference to that file in `package.json` `files[]`.
-
-## 1.0.0 — Skill-first
-
-Breaking release. The CLI surface collapsed from 9 user-facing commands down to 1 (`install-skills`). All operational logic moved to skill markdown + agent prose. See [MIGRATION.md](MIGRATION.md).
-
-### Removed
-
-- CLI commands: `generate`, `init recommend`, `init prepare`, `learn`, `remember`, `sync`, `context`, `harness`, `setup-blender`, `reference list/show`, `preview`.
-- Public API exports (`src/index.ts`): `detectContext`, `extractUrl`, `renderPlan`, `applyOverrides`, `loadReference`, `appendEntry`, `writeAllShims`, all v4 modules. The package no longer ships a programmatic API; use the skill markdown directly.
-- TypeScript modules (≈ 7000 lines): customizer, preview-generator, recommend, vocabulary, init-deprecate, apply-delta-stub, preferences, shims, sync-lock, sync-marker, run-archive, memory, code-introspect, context-detect, url-token-extractor, plan-emitter, signal-classifier, budget-tracker, visual-anchor, trace, and supporting utility / preset modules.
-- Tests for removed surface (≈ 480 of 545 retired).
-
-### Added
-
-- `omd-asset-curator` agent: stack-aware asset medium selection. Detects framework (Next/Vue/Svelte/etc.), CSS framework, icon libs (lucide/heroicons), chart libs (recharts/chartjs/nivo/etc.), animation libs (framer-motion/lottie/rive). Recommends the best matching medium per asset (inline SVG / chart library / Lottie / Rive / Unsplash / 3D dispatch). Inline SVG recipes for liquid fills, progress indicators, simple icons, empty-state illustrations.
-- `omd-apply` skill: explicit dispatch decision tree. Complex requests (assets, charts, screens, a11y, microcopy, persona) now route to specialized sub-agents instead of being handled inline.
-- `scripts/context.cjs`: 80-line deterministic project scan helper invoked by master Phase A as a fast cache, optional but preserved for repeatability.
-- `omd-3d-blender` agent: just-in-time install walkthrough (uv check → brew install / brew --cask blender → claude mcp add → addon prompt). No longer bundled into `install-skills`.
-- `MIGRATION.md`, this `CHANGELOG.md`.
-
-### Changed
-
-- npm tarball ~60% smaller (no preview templates, no stale src/, no preset library).
-- Dependencies: 9 → 3 (`@clack/prompts`, `commander`, `picocolors`).
-- `package.json`: removed `main`, `types`, `exports` fields. Bin-only package.
-- README rewritten around the single-command flow + agent natural-language pattern.
-- Skill activation rules: `omd-apply` triggers tightened (39 → 23) so high-intent requests like "에셋 / 차트 / 아이콘" route to omd-asset-curator instead of being absorbed by omd-apply inline. Orphan `omd-add-reference` rule removed.
-
-### Migration
-
-```bash
-cd my-project
-npx oh-my-design-cli@latest install-skills
-```
-
-Then restart your agent (Cmd+Q + relaunch for Claude Code).
-
-## 0.1.3 — 2026-04-29
-
-- Drop unused dependencies (shadcn, tw-animate-css).
-
-## 0.1.2 — 2026-04-29
-
-- Trim 90% of npm tarball (drop research / preview / per-reference READMEs).
-
-## 0.1.1 — 2026-04-29
-
-- Five usability fixes from npm-publish verification.
-
-## 0.1.0 — 2026-04-29
-
-- First publish under the `oh-my-design-cli` npm name.
-
-
-===========================================================
-# Skill — omd:harness (Discovery → Wireframe → Components → Microcopy → Validation)
-===========================================================
-
----
-name: omd:harness
-description: "화면 전체나 신규 surface를 처음부터 디자인할 때의 진입점 — Discovery→Wireframe→Components→Microcopy→Validation 파이프라인을 omd-master 오케스트레이터로 실행. 트리거: '랜딩페이지', '랜딩 페이지', '랜딩 만들어줘', '홈 화면', '첫 화면', '프로토타입', '그럴싸한', '구색 갖춰', 'first screen', 'first impression', 'landing page', 'landing', 'prototype', 'MVP UI', 'home', 'production-ready', 'wireframe to production', '랜딩 처음부터', 'production-ready', '一からデザイン', '從頭設計'. 자연어 발화('그럴싸한 랜딩 만들어줘', 'MVP UI 잡아줘', '프로토타입이라도 구색 갖춰서')에도 자동 트리거. 단일 컴포넌트 수정은 omd:apply."
----
-
-# omd:harness — Design Harness Entry
-
-이 스킬은 **omd-master 오케스트레이터**를 호출하는 단일 진입점이다. 본 스킬은 launcher + 사전체크 + run 디렉토리 부트스트랩 책임만 가지고, phase 로직은 `agents/omd-master.md`에 있다.
-
-CLI 의존 없음. 모든 부트스트랩은 Bash + Write 툴로 직접 실행한다.
-
-## 트리거
-
-- `/omd-harness <task>` 명시 호출
-- 사용자가 자연어로 "디자인 하네스 / 시니어 디자이너처럼 / 알아서 디자인" 요청
-
-## Step 0 — task 추출
-
-슬래시에 task 같이 적었으면 (`/omd-harness 물 음용 유도 메인 화면`) 그 자연어 부분이 task. 빈 슬래시면 한 번 묻기:
-
-```
-어떤 디자인 작업을 진행할까요?
-shape: "[도메인] + [톤/스타일] + [핵심 화면]" — 예: "토스 스타일 가족용 식단 앱 메인 화면"
-```
-
-## Step 1 — Subagent registration 자동복구 (v1.6.0+)
-
-`omd-master` subagent가 이 세션에 dispatch 가능한지 verify. Agent tool의 사용 가능 subagent 목록에 `omd-master`가 있으면 Step 2로. **없으면 게이트로 막지 말고 자동복구**:
-
-### 1.1 — Agent 폴더 detect
-
-다음 폴더 중 가장 먼저 존재하는 것을 target:
-- `.claude/agents/` (claude-code agent)
-- `.codex/agents/` (codex-cli agent)
-- `.agents/` (openhands / generic)
-
-없으면 `.claude/agents/`를 mkdir로 생성 (claude-code default).
-
-### 1.2 — 패키지 source 위치 확인 + 복구 Write
-
-```bash
-# 패키지 dir resolution: local node_modules 우선 → global → (npx는 둘 다 없을 수 있음)
-OMD_DIR=$(npm root)/oh-my-design-cli
-[ -d "$OMD_DIR" ] || OMD_DIR=$(npm root -g)/oh-my-design-cli
-SRC="$OMD_DIR/agents/omd-master.md"
-TARGET=".claude/agents/omd-master.md"   # (또는 detect한 폴더)
-[ -f "$SRC" ] && cp "$SRC" "$TARGET" && echo "RECOVERED" || echo "SRC_MISSING"
-```
-
-성공 시 사용자에게 한 줄:
-
-```
-omd-master subagent를 ${TARGET}에 복구했어요. /agents 한 번 실행하거나 다음 turn에서 자동으로 잡힙니다. 계속 진행할게요.
-```
-
-### 1.3 — 복구도 실패한 경우 (SRC_MISSING / cp 권한 실패)
-
-`SRC_MISSING`은 보통 npx 설치라 패키지 dir(`node_modules/oh-my-design-cli`)이 프로젝트에 없을 때 난다. 이 경우 `cp`로 복구할 source가 없는 게 정상 — 단, **installer가 이미 `install-skills` 시점에 `.claude/agents/omd-master.md`를 직접 생성**하므로, 먼저 `[ -f .claude/agents/omd-master.md ]`를 확인하라. 존재하면 복구 불필요(이미 설치됨) → 그대로 진행. 없을 때만 아래 안내.
-
-기존 안내 fallback:
-
-```
-omd-master subagent를 찾을 수 없어요 (.claude/agents/omd-master.md 없음 + 패키지 source 누락 — npx 설치 가능성).
-
-해결 (가장 빠른 순서):
-1. `npx oh-my-design-cli@latest install-skills --all` 재실행 → /omd-harness 재호출
-   (install-skills가 .claude/agents/ + .claude/data/ 를 채워줍니다)
-2. /agents 실행 → omd-* 목록 확인 → 안 보이면 Claude Code 재시작
-```
-
-복구 성공 시에도 main agent가 같은 turn에 master를 dispatch 못하는 경우가 있으니, Step 4 spawn 시 한 번 더 verify해서 실패하면 사용자에게 "다음 turn에서 자동 재발동" 안내 후 Step 2-3 산출물(ctx-prime.json + 페르소나 답)만 보존하고 종료.
-
-## Step 2 — Run 디렉토리 부트스트랩 (인라인 Bash)
-
-이전엔 `omd harness "<task>" --internal` CLI를 호출했지만 1.0.0부터는 스킬이 직접 한다. 결정론적 hard verify gate:
-
-### 2.1 기존 run 재사용 체크
-
-```bash
-ls -t .omd/runs 2>/dev/null | head -1
-```
-
-출력 있으면 그 디렉토리의 `task.md`를 Read해서 사용자 task와 의미적으로 일치하는지 확인. 일치하면 그 run 재사용 — Step 3으로 점프.
-
-### 2.2 신규 run 부트스트랩
-
-다음을 **반드시 정확히 이 순서로** Bash 툴로 실행:
-
-```bash
-# 2.2.1 — timestamp + slug 결정 (한국어 보존)
-TS=$(node -e "console.log(new Date().toISOString().replace(/[:.]/g,'-'))")
-SLUG=$(node -e "
-const s = process.argv[1].toLowerCase().trim()
-  .replace(/[^a-z0-9가-힣\s-]+/g,'')
-  .replace(/\s+/g,'-')
-  .replace(/-+/g,'-')
-  .replace(/^-|-$/g,'');
-console.log(s.slice(0,40) || 'untitled');
-" "<EXTRACTED_TASK>")
-RUN_ID="run-${TS}-${SLUG}"
-RUN_DIR=".omd/runs/${RUN_ID}"
-
-# 2.2.2 — 표준 서브폴더 생성
-mkdir -p "${RUN_DIR}"/{wireframes,components,assets/briefs,assets/fallback,assets/pinterest-refs,eval/screenshots,persona-feedback,handoff,checkpoints}
-
-# 2.2.3 — task.md
-cat > "${RUN_DIR}/task.md" <<EOF
-# Harness Task
-
-<EXTRACTED_TASK>
-
----
-
-- run_id: \`${RUN_ID}\`
-- started_at: $(date -u +%Y-%m-%dT%H:%M:%SZ)
-- cwd: \`$(pwd)\`
-EOF
-
-# 2.2.4 — run.log
-echo "[$(date -u +%Y-%m-%dT%H:%M:%SZ)] run initialized" > "${RUN_DIR}/run.log"
-
-# 2.2.5 — .omd/.gitignore (idempotent)
-mkdir -p .omd
-[ -f .omd/.gitignore ] || printf "runs/\ncache/\n" > .omd/.gitignore
-
-# 2.2.6 — INDEX.md (idempotent header + append)
-INDEX=".omd/runs/INDEX.md"
-[ -f "${INDEX}" ] || cat > "${INDEX}" <<EOF
-# Harness Runs Index
-
-One line per run. Append-only.
-
-EOF
-TASK_ONELINE=$(echo "<EXTRACTED_TASK>" | tr '\n' ' ' | cut -c1-120)
-echo "- $(date -u +%Y-%m-%dT%H:%M:%SZ) \`${RUN_ID}\` — ${TASK_ONELINE}" >> "${INDEX}"
-
-# 2.2.7 — 결과 출력 (이 스킬이 파싱)
-echo "RUN_DIR=${RUN_DIR}"
-echo "RUN_ID=${RUN_ID}"
-```
-
-### 2.3 Hard verify gate (master spawn 차단 조건)
-
-부트스트랩 다음, master spawn 전에 반드시:
-
-```bash
-test -d "${RUN_DIR}" && test -f "${RUN_DIR}/task.md" && echo "OK" || echo "FAIL"
-```
-
-`OK`가 출력되지 않으면 master는 절대 spawn하지 않는다. 사용자에게:
-
-```
-하네스 부트스트랩이 실패했어요 (run dir or task.md 누락). 디스크 권한·경로 문제일 수 있어요. 다시 시도하거나 .omd/ 디렉토리를 정리해주세요.
-```
-
-이 gate를 통과해야만 Step 2.5로.
-
-## Step 2.5 — CTX-PRIME — 코드베이스 자동 분석 (v1.6.0+)
-
-reference를 고르라고 사용자에게 묻기 전에 **먼저 레포를 본다**. 사용자가 듣고 싶은 첫 문장은 "이 레포 분석했어요 — Next.js 14 + 토스 블루 + 4개 surface" 같은 *진단*이지 "어느 레퍼런스 골라드릴까요?"가 아니다.
-
-### 2.5.1 — ctx-prime helper 실행
-
-```bash
-# HELPER resolution (먼저 존재하는 것 사용):
-#   1. .claude/data/scripts/ctx-prime.cjs  ← installer가 복사 (npx 설치 기본 경로, 패키지 dir 불필요)
-#   2. node_modules/oh-my-design-cli/scripts/ctx-prime.cjs  (로컬 npm 설치)
-#   3. $(npm root -g)/oh-my-design-cli/scripts/ctx-prime.cjs (global)
-HELPER=".claude/data/scripts/ctx-prime.cjs"
-if [ ! -f "$HELPER" ]; then
-  OMD_DIR=$(npm root)/oh-my-design-cli
-  [ -d "$OMD_DIR" ] || OMD_DIR=$(npm root -g)/oh-my-design-cli
-  HELPER="$OMD_DIR/scripts/ctx-prime.cjs"
-fi
-[ -f "$HELPER" ] || { echo "CTX_PRIME_MISSING"; exit 0; }
-
-node "$HELPER" "$(pwd)" "${RUN_DIR}"
-```
-
-성공 시 `${RUN_DIR}/ctx-prime.json` 생성. ~12-50ms (typical repo).
-ctx-prime.cjs는 `.claude/data/scripts/`에 installer가 복사하므로 패키지 dir 없이도 동작한다 (companion `context.cjs`도 같은 폴더에 함께 복사됨).
-
-`CTX_PRIME_MISSING` (세 경로 모두 miss) → Step 3로 직진 (legacy path).
-
-### 2.5.2 — ctx-prime.json Read + 사용자 picker 게이트
-
-Read 툴로 `${RUN_DIR}/ctx-prime.json` 로드. 다음 필드만 사용자에게 한 줄로 brief:
-
-- `stack.framework`, `stack.kind`, `brand_signal.dominant_color_hex`
-- `surface_inventory.length` (몇 개 surface 발견)
-- `brand_signal.language` (ko / en / ja)
-
-**AskUserQuestion 1개**를 다음 shape로:
-
-```
-question: "이 레포 분석했어요 — {framework} + {dominant_color_hex} 베이스 + {N}개 surface ({language} 카피). 이번 작업의 1차 타깃 페르소나는?"
-header: "Audience"
-options: ctx-prime.audience_hypothesis 상위 3개 → label/description 매핑
-  - audience_hypothesis[0]: label + "(추천)", description = evidence
-  - audience_hypothesis[1]: label, description = evidence
-  - audience_hypothesis[2]: label, description = evidence (없으면 생략)
-```
-
-(AskUserQuestion이 자동 "Other" 추가하므로 자유 입력 페르소나도 가능. Codex / OpenCode 등 AskUserQuestion이 없는 채널은 같은 question + option을 prose로 묻고 자유 텍스트 답을 받는다 — #21.)
-
-사용자 답을 `ctx-prime.json`에 `confirmed_audience` 필드로 merge (Edit 또는 Write):
-
-```jsonc
-{
-  // ... 기존 필드 ...
-  "confirmed_audience": "외부 트래픽 — SEO/conversion 우선, 톤 일탈 허용"
-}
-```
-
-### 2.5.3 — Interview-lite (2-4 picker 묶음)
-
-페르소나 확정 직후 **AskUserQuestion 1번 더, 최대 4개 question 묶음**. ctx-prime 결과를 활용해 picker option을 동적 구성:
-
-> **채널 분기 (#21)**: Claude Code 채널에서는 반드시 AskUserQuestion 툴로 제시 — 복수 답이 자연스러운 question(예: wow moment 여러 개 허용 시)은 `multiSelect: true`. Codex / OpenCode 등 툴이 없는 채널은 같은 question 묶음을 prose 1회 배치로 묻고 자유 텍스트 답을 받는다. 어느 채널이든 question 수 budget은 동일(아래 최대 4개) — 추가 게이트 금지.
-
-**Question 1 — exit_scope:**
-- "단일 화면만 (한 surface 깊이)"
-- "풀 랜딩 (hero + features + CTA + footer)" — 추천 (대부분의 경우)
-- "다중 surface (랜딩 + product preview + docs)"
-
-**Question 2 — wow moment:**
-- ctx-prime.wow_moment_candidates 상위 3개 + "Other"
-
-**Question 3 — primary CTA:**
-- "Sign-up / Get started" — 추천 if audience=외부
-- "Book demo / Contact sales"
-- "GitHub star / View source"
-- "View docs / Read more"
-
-**Question 4 — visual grounding:**
-- "Live reference capture (느림, 정확)" — 추천 if exit_scope=풀랜딩
-- "Catalog-only (빠름, generic)"
-
-답을 `${RUN_DIR}/handoff/.handoff.json`에 prefilled_slots로 적재:
-
-```bash
-mkdir -p "${RUN_DIR}/handoff"
-cat > "${RUN_DIR}/handoff/.handoff.json" <<EOF
-{
-  "state": "PROPOSE_PLAN",
-  "prefilled_slots": {
-    "audience": "<confirmed_audience>",
-    "exit_scope": "<answer 1>",
-    "wow_moment": "<answer 2>",
-    "cta_primary": "<answer 3>",
-    "visual_grounding": "<answer 4>"
-  },
-  "ctx_prime_ref": "ctx-prime.json",
-  "created_at": "$(date -u +%Y-%m-%dT%H:%M:%SZ)"
-}
-EOF
-```
-
-이 시점부터 master는 SLOT_GATE를 건너뛰고 PROPOSE_PLAN으로 직행한다 (master INTAKE 분기 참고).
-
-### 2.5.4 — Backward compatibility
-
-`ctx-prime.json` 누락 또는 사용자가 picker에서 "Other → 알아서 골라줘" 답하면 Step 3 (reference picker) 그대로 진행. `prefilled_slots` 없으면 master는 legacy SLOT_GATE 흐름.
-
-## Step 3 — DESIGN.md 존재 확인 + reference 의미 매칭
-
-프로젝트 루트에 DESIGN.md 없으면 reference를 직접 추천한다. 외부 API 호출 없음.
-
-### 3.1 카탈로그 로드
-
-다음 파일을 Read 툴로 전체 로드:
-
-- `.claude/data/reference-fingerprints.json` — reference fingerprint (tone keywords, visual theme, antipatterns, signature motion, has_personas, category)
-- `.claude/data/reference-tags.md` — 사람-읽기용 keyword 매트릭스
-- `.claude/data/vocabulary.json` — controlled vocab
-
-`.claude/data/`에 없으면 `node_modules/oh-my-design-cli/data/` 또는 패키지 root `data/` 에서 fallback.
-
-### 3.2 사용자 task 분석 (silent)
-
-- controlled-vocab 키워드 추출 (예: "헬스/웰니스 / calm-blue / 차분" → `[calm, minimal, approachable, warm]`)
-- 명시 brand hint (예: "토스 같은" → `["toss"]`)
-- 카테고리 추측 (Consumer / Productivity / Fintech / AI / Developer Tools / Design Tools / Automotive / Aerospace / SaaS / Enterprise)
-
-### 3.3 점수 계산 (in-head, 결정론적)
-
-- 각 ref의 `tone_keywords` ∩ task keywords → 1점/매칭
-- brand hint match → +5점
-- 카테고리 일치 → +1점
-- top 5 정렬
-
-### 3.4 검증 (hallucination 방지)
-
-추천하는 모든 id는 `reference-fingerprints.json`의 `items[].id`에 **반드시** 존재해야 한다. 없는 id는 만들어내지 않는다.
-
-### 3.5 사용자에게 제시 (자연어 prose)
-
-라벨 없이, 추천을 statement로:
-
-```
-DESIGN.md가 없어서 reference 한 개를 골라 부트스트랩할게요. <task 핵심 한 줄>을 보니 <top1.id>가 가장 잘 맞을 것 같아요 — <visual_theme 핵심 + 매칭 키워드 1-2개를 한 줄로>.
-
-이대로 가시려면 go (또는 <top1.id>).
-다른 후보: <top2.id> (한 줄 이유) · <top3.id> (...) · <top4.id> (...) · <top5.id> (...)
-본인이 아는 다른 reference면 한 줄로 id만 (예: vercel) — reference 카탈로그에 없으면 알려드립니다.
-```
-
-### 3.6 사용자 응답 처리
-
-- `go` 또는 reference id (top-5 안) → 그 id로 master spawn
-- 다른 reference id (top-5 밖이지만 카탈로그 안) → 동일하게 진행
-- 카탈로그에 없는 id → "해당 id는 reference 카탈로그에 없어요. top-5 중에서 골라주세요."
-- `중단` → 종료
-
-### 3.7 라이브 reference capture (선택)
-
-선택된 reference의 라이브 사이트에서 디자인 토큰 + 시각 reference + 폰트를 가져오면 master phase 정확도가 크게 올라간다. 단일 mode (이전의 clone/inspired 갈래는 v1.3.3에서 폐기 — 시각 동일성은 brand creative work을 가져와야 가능하고, 그건 IP 영역).
-
-사용자에게 한 줄로 묻기:
-
-```
-<id> 라이브 자료를 가져올까요? (토큰·구조 cue·폰트·hero screenshot)
-
-가져옴: 컬러·radius·간격·폰트(open-source CDN)·구조 cue(carousel/CTA 모양/nav)·voice register
-가져오지 않음: brand mascot 일러스트·마케팅 사진·로고(사용자 자체 자산으로 시작)
-
-답: yes / skip
-```
-
-`yes` → omd:reference-capture skill 호출 (Skill 툴) → 끝나면 Step 4로
-`skip` → 바로 Step 4
-
-omd:reference-capture는 LICENSE-NOTE.md / attribution.md / fonts.json / structure.json 작성. 모든 brand-identifying 자산은 `assets/_reference/<id>/`에 reference 용도로 보존되며 사용자 product DOM에는 들어가지 않는다.
-
-## Step 3.8 — Surface signal 추출 (master prompt에 한 줄 전달)
-
-사용자 task에서 surface idiom 신호 추출. 이 신호는 master가 reference-capture 자료 중 어떤 부분을 더 무겁게 볼지 결정한다.
-
-### 키워드 → surface 매핑
-
-| 키워드 (KR/EN/JP/TW) | surface_signal |
-|---|---|
-| `랜딩`, `홈`, `메인`, `landing`, `home`, `main`, `marketing`, `홍보`, `프로모션`, 「ランディング」, `首頁` | **`marketing`** |
-| `대시보드`, `앱`, `화면`, `설정`, `관리`, `dashboard`, `app`, `settings`, `console`, `admin`, 「ダッシュボード」, `儀表板` | **`product`** |
-| `문서`, `가이드`, `docs`, `documentation`, `help`, 「ドキュメント」, `文件` | **`docs`** |
-| `온보딩`, `시작하기`, `가입`, `onboarding`, `signup`, 「オンボーディング」, `註冊` | **`onboarding`** |
-| (위에 매치 없음) | **`null`** (master 자유 판단) |
-
-### Step 4 prompt에 포함되어야 할 필드
-
-기존 `<RUN_DIR + task + chosen_ref_id>` 에 surface_signal과 reference-capture 자료 경로를 명시:
-
-```
-RUN_DIR: <path>
-task: <user task>
-chosen_ref_id: <id>
-surface_signal: marketing | product | docs | onboarding | null
-reference_capture_dir: assets/_reference/<id>/ | null
-```
-
-reference_capture_dir이 존재하면 master는 그 디렉토리의 `tokens.json`, `structure.json`, `screenshots/*.png` 를 **모두 활용**한다 (canonical DESIGN.md만 보지 말 것).
-
-## Step 4 — Master 호출 (handoff loop)
-
-Subagent (master)는 AskUserQuestion 직접 호출 불가 (main-thread 전용). file-based handoff 패턴으로 돌린다.
-
-### Master에게 강제되는 시각 grounding 규칙
-
-master에게 전달되는 prompt 첫 단락은 **반드시** 다음을 포함:
-
-```
-시각 grounding 규칙 (위반 = regression):
-1. reference_capture_dir이 null이 아니면, master의 Component phase 진입 전에
-   `<reference_capture_dir>/screenshots/hero-desktop.png`을 Read 툴로 **이미지로**
-   읽는다. 텍스트 분석만으로 끝내지 말 것 — 실제 hero composition
-   (carousel/illustration/data-card/text-only 등)을 시각 inspect 후 진행.
-2. `<reference_capture_dir>/structure.json`에 기록된 hero.type, cta.dominant_shape,
-   nav.structure, page.viewport_heights를 wireframe + component 결정에 반영.
-   surface_signal과 structure.json이 일치하면 그대로, 어긋나면 surface_signal 우선.
-3. `<reference_capture_dir>/tokens.json`의 live_overrides가 있으면 그 값을 우선
-   사용. canonical DESIGN.md 값은 voice/principles/motion philosophy에만 절대 권위.
-4. `<reference_capture_dir>/fonts.json`의 `live_observed: true` 항목은 생성 HTML
-   `<head>`에 반드시 `html_link` 그대로 박을 것. 누락 시 시스템 fallback으로
-   렌더되어 결과가 spec과 silently 어긋남 (예: Pretendard 미로드 → 둥근 시스템 폰트).
-   canonical DESIGN.md가 언급한 폰트라도 `live_observed: false`면 적용 금지
-   (대표 함정: "BM JUA accent only" 같은 spec 문구를 잘못 적용해서 둥근 디스플레이체로 헤더 렌더).
-5. **사용자 product 결과물 자산 정책** (단일 mode — 이전 clone/inspired 갈래는 v1.3.3 폐기):
-   - **brand creative work (mascot 일러스트·마케팅 사진·고유 ornament)는 product DOM 미사용.** captured logo/screenshot은 `assets/_reference/<id>/` 안에 reference로만 보존.
-   - 마케팅 카피·tagline·slogan은 라이브 사이트에서 verbatim 인용 금지. voice register + 문장 길이만 따르고 텍스트는 사용자 프로젝트 맥락에서 새로 작성.
-   - **헤더 logo = product name 워드마크만** (v1.3.7부터 — 별도 icon/shapes mark 금지):
-     ```html
-     <a class="logo" href="/" style="display:inline-flex;align-items:center;text-decoration:none;">
-       <span class="logo-wordmark">{{PRODUCT_NAME}}</span>
-     </a>
-     <style>
-       .logo-wordmark{
-         font-family:"Bricolage Grotesque","Space Grotesk","DM Serif Display","Fraunces",-apple-system,sans-serif;
-         font-size:22px;font-weight:700;letter-spacing:-0.04em;
-         color:var(--color-text-heading);
-       }
-     </style>
-     ```
-     - **그냥 폰트 + 텍스트**가 logo 역할. shapes mark / DiceBear icon / svg 마크 추가 금지 — 사용자가 짜증나는 "AI가 만든 generic 로고" 회피.
-     - 디스플레이 폰트는 `<head>`에 `<link rel="stylesheet">` 의무 로드. brand vibe별 선호:
-       - cool / minimal / fintech serious → **Space Grotesk** 또는 **Bricolage Grotesque** (geometric, modern sans)
-       - warm / playful / community → **Bricolage Grotesque** (variable, 친근)
-       - editorial / luxury / serif → **DM Serif Display** 또는 **Fraunces** (display serif)
-     - CDN URLs (omd:asset-fetch §6 참고, 모두 SIL OFL):
-       - `https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&display=swap`
-       - `https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap`
-       - `https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap`
-       - `https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&display=swap`
-
-   - **{{PRODUCT_NAME}} 결정 logic**:
-     1. 사용자 prompt에 명시된 product name 있으면 그걸로 (예: "내 가계부 앱 만들어줘" → 사용자에게 "이름은 뭘로 할까요? skip하면 placeholder"라고 한 줄 묻기 — 답 받으면 그대로, skip이면 step 2)
-     2. 사용자 응답 없거나 임의 placeholder 필요 → **brand vibe 맞는 generic placeholder 1개**:
-
-   | brand vibe | placeholder 후보 (1개 선택) |
-   |---|---|
-   | cool / fintech / minimal | `Folio`, `Mint`, `Nord`, `Vector`, `Norma`, `Atlas` |
-   | warm / conversational / friendly | `Pop`, `Spark`, `Halo`, `Cosy`, `Hue` |
-   | community / local / marketplace | `Townie`, `Hood`, `Plot`, `Block`, `Brick` |
-   | editorial / commerce / curated | `Folio`, `Curator`, `Volume`, `Edit` |
-   | mobility / service | `Lane`, `Trip`, `Glide`, `Loop` |
-   | productivity / advisor | `Compass`, `Norm`, `Plan`, `Beacon` |
-
-     3. 선택된 이름을 `<title>`, hero copy `[YOUR PRODUCT NAME]` 자리, footer brand 자리 등 **product 전체에 일관 적용** — 사용자가 swap할 때 grep 한 번으로 끝나도록 단일 토큰 유지.
-
-   - 사용자에게 한 줄 알림 (생성 후): "Product name으로 `Folio` 사용 — 본인 이름으로 바꾸려면 `landing.html`에서 `Folio` grep replace."
-
-6. **자산 라이브러리 — 검증된 CDN URL만 사용** (mandatory):
-
-   **각 항목 옆 timestamp는 마지막 200 OK 확인 일자.** 이 리스트에 있는 URL은 generator가 즉시 사용 가능. 이 리스트에 없는 자산은 generator가 임의로 URL 추측·생성 금지.
-
-   **CHARACTERS / AVATARS (hero 캐릭터 자리, CC0)**:
-   - DiceBear notionists — `https://api.dicebear.com/9.x/notionists/svg?seed=<seed>&size=<n>` ✓ 2026-05-14
-   - DiceBear lorelei — `https://api.dicebear.com/9.x/lorelei/svg?seed=<seed>&size=<n>` ✓ 2026-05-14
-   - DiceBear personas — `https://api.dicebear.com/9.x/personas/svg?seed=<seed>&size=<n>` ✓ 2026-05-14
-   - DiceBear 전체 스타일 카탈로그: `notionists | notionists-neutral | lorelei | personas | adventurer | avataaars | bottts | croodles | fun-emoji | thumbs` — 모두 CC0
-   - `seed` 값은 brand-relevant 토큰 사용 (예: `banksalad-advisor-001`) — deterministic 출력 보장
-
-   **ICONS (product 카테고리·feature 카드·nav)**:
-   - Lucide (ISC) — `https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/<name>.svg` ✓ 2026-05-14
-   - Heroicons (MIT) — `https://cdn.jsdelivr.net/npm/heroicons@2/24/outline/<name>.svg` ✓ 2026-05-14
-   - Tabler Icons (MIT) — `https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/<name>.svg` ✓ 2026-05-14
-
-   **PATTERNS / BACKGROUNDS**:
-   - Hero Patterns (CC BY 4.0) — `https://heropatterns.com` ✓ 2026-05-14 (도큐 보고 inline SVG 복사)
-   - 원형 그라데이션 ornament은 `radial-gradient + filter: blur()` CSS로 generator가 직접 생성 (brand-specific creative work 아님)
-
-   **FONTS (open-source)**:
-   - Pretendard (SIL OFL) — `https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css` ✓ 2026-05-14
-   - Wanted Sans (SIL OFL) — `https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@latest/packages/wanted-sans/fonts/webfonts/static/complete/WantedSans.css` ✓ 2026-05-14
-   - Noto Sans KR (SIL OFL) — `https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap` ✓ 2026-05-14
-   - Inter (SIL OFL) — Google Fonts
-
-   **이전 버전에 있던 미검증 항목 (skill 제거됨)**: Humaaans github raw / Open Peeps github raw / unDraw direct CDN / Storyset CDN — 직접 SVG URL 패턴 미공식, 404 빈번. 다시 등재하려면 verify 후 timestamp 부착.
-
-   **Fetch 시 절차**:
-   - 자산 1회 `curl -sIL -o /dev/null -w "%{http_code}"` 로 200 확인
-   - 결과물 `attribution.md` 에 사용된 URL + 라이선스 + fetch 일자 명시
-   - `<!-- asset-source: <CDN url>, license: <license>, status: fetched|fallback -->` 코멘트를 HTML에 박을 것
-
-   **CDN fetch 실패 fallback 정책 (위반 = regression)**:
-   - **금지**: 핸드드로잉 inline SVG 캐릭터 합성 (stick figure, 손으로 그린 face 등 — sub-agent가 "curl 못 한다" 핑계 도피 안티패턴). **v1.3.4의 Karrot에서 다시 발생함 — 이번에 gate를 강화.**
-   - **허용 fallback (우선순위 순)**:
-     1. 동일 카테고리의 다른 검증 URL 시도 (DiceBear notionists 실패 → lorelei → personas)
-     2. 모두 실패 시 brand-color 그라데이션 placeholder box:
-        ```html
-        <div class="hero-character-fallback"
-             style="aspect-ratio:1; background:linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%); border-radius:24px; display:flex; align-items:center; justify-content:center;">
-          <span style="color:#fff; font-size:14px; opacity:.7;">[CHARACTER IMAGE]</span>
-        </div>
-        ```
-     3. 사용자에게 한 줄로 알림: "CDN 자산 fetch 실패, brand-color placeholder 사용."
-   - **사용자 product DOM에 amateur SVG는 절대 들어가지 않음.**
-
-   **Handcraft gate (v1.3.5 신설 — Karrot 사고 재발 방지)**:
-   - hero-character.svg 파일을 emit하기 직전 **상단에 의무 코멘트**:
-     ```xml
-     <!-- omd-asset: source=https://api.dicebear.com/9.x/<style>/svg?seed=<seed>, license=CC0, fetched=<ISO-date> -->
-     ```
-   - 이 코멘트가 없거나 source URL이 검증 catalog (omd:asset-fetch §2)에 없으면 — generator는 **그 파일 product DOM에 embed 금지**. fallback gradient placeholder 사용.
-   - product DOM 작성 후 self-audit grep:
-     - `grep -cE '<path d="M[0-9.,\sCQTLZ\- ]{200,}"' landing.html` (긴 path data = 손으로 그린 anatomy 흔적)
-     - 차트(.hero-chart) / Lucide 아이콘(viewBox 0 0 24 24) 외에 long path **0** 이어야 함. > 0 이면 sub-agent가 다시 fetch.
-   - product DOM 안 `<svg>` 인라인은 두 카테고리만 허용:
-     1. 차트 / 데이터 시각화 (line/bar/area chart — 데이터 패턴, brand-specific X)
-     2. Lucide / Heroicons / Tabler 아이콘 인라인 (작은 viewBox)
-
-   기타 모든 시각 자산은 catalog `<img>` URL 통해 로드. **catalog 외 임의 SVG 그리기 금지.**
-
-   자세한 catalog + 검증 gate는 `skills/omd-asset-fetch/SKILL.md` 참조.
-
-7. **CSS 컨테이너 일관성** (위반 = regression):
-   - 모든 top-level 섹션은 **단일 공유 클래스** `.container-inner` (또는 동등한 이름)을 사용.
-   - 그 클래스 한 곳에 `max-width: <N>px; margin: 0 auto; padding: 0 24px` 정의. **섹션별로 padding 값 다르게 정의 금지** — header / hero / features / footer 모두 같은 inner 컨테이너로 left/right edge가 정확히 일치해야 함.
-   - 결과 HTML 작성 후 self-audit: 모든 section의 inner element가 동일한 horizontal padding 적용됐는지 grep으로 확인. 어긋난 곳 있으면 통일.
-   - 직접 결함 예시 (v1.3.3에서 발생): `.header-inner { padding: 0 24px }` + `.hero-inner { padding: 0 }` → 뷰포트 wide에서 24px offset.
-
-8. **Hero composition decomposition** (위반 = regression):
-   - **먼저 rule 12 (Hero archetype)에서 archetype 1개 선택**. 모든 archetype은 분리된 elements 원칙 적용.
-   - 시각 요소는 분리된 element:
-     - `.hero-character` / `.hero-visual` — img / 또는 inline svg 단일 (DiceBear 등 검증 자산)
-     - `.hero-chart` — 별도 inline `<svg>` (차트는 brand-specific creative work 아닌 일반 데이터 시각화 패턴)
-     - `.hero-stat-card` — HTML `<div>` 카드 (숫자·라벨·trend chip)
-     - `.hero-ornament` — 배경 ornament (CSS radial-gradient + blur)
-     - `.hero-slide` (carousel archetype용) — 각 slide 분리된 element
-   - 각 element는 absolute positioning 또는 grid로 조합.
-   - **금지**: 캐릭터 + 차트 + 데이터 카드를 single SVG 파일 안에 통합 (v1.3.3 결함).
-
-9. **Hero archetype selection** (v1.3.8 신설 — monotone hero 회귀 방지):
-
-   v1.3.5~v1.3.7에서 brand가 다른데 hero 구도는 매번 "text-left + character-right + floating cards" 동일 → "와우" 약화. 이 rule부터 sub-agent는 brand vibe + surface signal 기반으로 **7가지 archetype 중 1개를 명시 선택**하고 그에 맞춰 구성.
-
-   ### archetype catalog
-
-   **A. `left-character`** (현행 default)
-   - 좌측: 카피 + CTA + carousel dot
-   - 우측: 캐릭터 일러스트 + floating data card 2-3개
-   - 적합: 핀테크 advisor / 데이터 어드바이저 / B2C 모바일 앱
-
-   **B. `center-text`**
-   - 중앙 정렬 헤드라인 + lead + 2 CTAs
-   - 아래: 큰 visual (screenshot / video / illustration) 단일
-   - 좌우 floating card 없음, 시선 단일 축
-   - 적합: AI / 개발자 도구 / Linear-style minimal SaaS / 검색 중심 portal
-
-   **C. `carousel`**
-   - 풀-블리드 또는 wide carousel — 3-5 slide auto-rotate
-   - 각 slide: 자체 카피 + visual + CTA (모두 다른 메시지)
-   - dot pagination + auto 5-7s
-   - 적합: 커뮤니티 마켓플레이스 / 이커머스 / 다양한 카테고리 promoting
-
-   **D. `split-screen`**
-   - 50/50 그리드: 좌측 = 카피 + CTA / 우측 = 큰 product 이미지 또는 booking widget
-   - floating card 없음, 큰 우측 단일 visual
-   - 적합: 모빌리티 (booking strip) / 여행 (검색 widget) / B2B (product 스크린샷)
-
-   **E. `editorial-magazine`**
-   - 풀-블리드 헤로 사진 + overlay 텍스트 (top-strip + cover caption + 큰 headline)
-   - 잡지 표지 메타포 (Vol.X · Year · Issue 같은 editorial 메타)
-   - 적합: 큐레이트 커머스 / 패션 / 라이프스타일 / 문화
-
-   **F. `dashboard-preview`**
-   - 좌측 또는 상단: 짧은 카피 + CTA
-   - 메인 visual: 큰 product UI 스크린샷 (가짜 dashboard mock)
-   - 시선 = "이게 우리 product 모습" 자체
-   - 적합: B2B SaaS / analytics / productivity 도구
-
-   **G. `quote-led`**
-   - 큰 인용구 (display serif, 80-120px) — 사용자 testimonial 또는 brand thesis
-   - 아래: 짧은 보강 카피 + CTA
-   - 캐릭터 / 차트 / floating 없음 — 단 한 문장의 권위
-   - 적합: 컨설팅 / 에이전시 / 럭셔리 brand / 사명 강조 surface
-
-   ### archetype 선택 룰 (brand vibe ↔ archetype)
-
-   | brand category / vibe | 1순위 | 2순위 (variation) |
-   |---|---|---|
-   | Fintech (advisor) — banksalad, kakaopay, toss | A `left-character` 또는 F `dashboard-preview` | B `center-text` |
-   | AI / Developer tools — anthropic, claude, vercel | B `center-text` | F `dashboard-preview` |
-   | Productivity / SaaS — linear, notion, asana | F `dashboard-preview` | B `center-text` |
-   | E-commerce (curated/editorial) — 29cm, musinsa, ssense | E `editorial-magazine` | C `carousel` |
-   | Community marketplace — karrot, dcard, mercari | C `carousel` | A `left-character` |
-   | Mobility / service — socar, uber, lime | D `split-screen` (booking widget) | C `carousel` |
-   | Travel — airbnb, yanolja, kayak | D `split-screen` (검색 widget) | E `editorial-magazine` |
-   | Luxury / heritage — ferrari, hermes | G `quote-led` 또는 E `editorial-magazine` | D `split-screen` |
-   | Consultancy / B2B services | G `quote-led` | B `center-text` |
-   | Health / wellness — gangnamunni, headspace | B `center-text` 또는 D `split-screen` | A `left-character` |
-
-   ### 선택 절차
-
-   1. brand reference DESIGN.md의 §1 (Visual Theme) + fingerprint `category`를 읽고 위 표에서 1순위 archetype 선택. reference DESIGN.md는 다음 우선순위로 resolve (omd:init Phase 4.1과 동일한 카탈로그 resolution order):
-
-      <!-- omd:catalog-resolution-order — omd-init/omd-reference-capture SKILL.md + agents/omd-master.md 와 동일 순서 강제. drift guard: test/unit/core/catalog-resolution-order.test.ts -->
-
-      1. `.claude/data/references/<id>/DESIGN.md` (installer가 복사 — npx 설치 기본 경로)
-      2. `node_modules/oh-my-design-cli/web/references/<id>/DESIGN.md` (로컬 npm 설치 직접 경로)
-      3. `web/references/<id>/DESIGN.md` (개발 레포)
-      4. `https://oh-my-design.kr/design-systems/<id>.md` 를 fetch (WebFetch 또는 `curl -fsSL`) — 200이면 본문이 곧 reference DESIGN.md. 가져온 내용을 `.claude/data/references/<id>/DESIGN.md`로 캐시해 다음부터는 로컬 캐시(경로 1)로 잡히게 한다.
-   2. 사용자가 같은 brand로 **이미 한 번 실험**했으면 (`.omd/runs/INDEX.md`에 기록) → 2순위 사용해서 variation 제공
-   3. 사용자가 명시 ("center 정렬로", "carousel로") → 그대로 따름
-   4. 선택된 archetype을 `experiment-meta.json`의 `hero_archetype` 필드에 명시 (gallery 표시용)
-   5. 사용자에게 한 줄 알림: "Hero archetype: `center-text` 사용 — Linear-style minimal SaaS 매칭"
-
-   ### archetype 구현 시 공통 제약
-
-   - 모든 archetype은 rule 8 decomposition 따름 (element 분리)
-   - 모든 archetype은 rule 10 reveal safety net 적용
-   - 모든 archetype은 rule 5 wordmark-only logo 사용
-   - 모든 archetype은 rule 6 verified asset catalog만 사용
-   - archetype별 specific 자산 (예: editorial-magazine의 헤로 photo) — Picsum/Loremflickr 결정적 URL 필수
-
-10. **IntersectionObserver reveal safety net** (v1.3.6 신설, 위반 = regression):
-
-10. **IntersectionObserver reveal safety net** (v1.3.6 신설, 위반 = regression):
-
-    이전 batch에서 toss + socar 둘 다 round-2 refinement에서 **동일한 결함을 fix**함 — IntersectionObserver-기반 scroll reveal이 fullpage screenshot 또는 인쇄 모드에서 viewport 밖 element를 `opacity: 0`으로 영구히 hidden시킴. 시스템 결함이라서 skill에 박음:
-
-    - reveal 패턴 사용 시 **safety net 의무**:
-      1. CSS `@keyframes failsafeReveal` 정의:
-         ```css
-         @keyframes failsafeReveal { to { opacity: 1; transform: none; } }
-         [data-reveal] { animation: failsafeReveal 0.01s ease 2s forwards; }
-         html.js-ready [data-reveal] { animation: none; }  /* JS ready 시 IO가 주도 */
-         .is-revealed { opacity: 1 !important; transform: none !important; }
-         ```
-      2. JS 초기화 시점에 `document.documentElement.classList.add('js-ready')` 추가 → IO 정상 동작 path 진입
-      3. JS 미로드 / IO 미지원 / fullpage screenshot 시 → 2s 후 자동 reveal (CSS animation forwards)
-      4. `@media (prefers-reduced-motion: reduce)` 에서는 모든 reveal element를 `opacity: 1` 즉시
-    - **금지**: `opacity: 0` initial state + IO trigger만 + safety net 없음 — fullpage screenshot 시 빈 섹션 발생
-
-11. **"와우" 수준 polish 체크리스트** (master는 다음 중 최소 5개 구현):
-   - [ ] 헤더 sticky + scroll 시 subtle backdrop blur or shadow
-   - [ ] Hero 카르셀 (auto-rotate 5-7s, dot indicator, smooth fade)
-   - [ ] CTA hover micro-interaction (brand의 motion philosophy 따라 — banksalad면 "lighten on hover")
-   - [ ] 숫자 count-up 애니메이션 (자산·사용자 수 등 stat에)
-   - [ ] Scroll reveal stagger (IntersectionObserver, 60ms 간격)
-   - [ ] 차트 stroke-dashoffset draw-in (financial 도메인이면 mandatory)
-   - [ ] Feature 카드 hover에 subtle elevation + icon rotate/scale
-   - [ ] Background ornament — 원형 그라데이션 blur layer (CSS `filter: blur(120px)`로 ambient color wash)
-   - [ ] `prefers-reduced-motion` 가드 (모든 모션 끔)
-   - [ ] Footer가 정보 풍부 (4 column, legal·company·resources·contact)
-   - [ ] 모바일 viewport에서도 깔끔 (768px / 375px 둘 다)
-
-   모든 모션은 brand DESIGN.md §15 (Motion & Easing)의 duration scale + easing 토큰 따름.
-```
-
-이 규칙은 Step 4의 master spawn prompt에 매번 prefix로 들어간다 (사용자에게 노출 X — 내부 contract).
-
-### 루프 의사코드
-
-```
-spawn_count = 0
-prompt = "<위 grounding 규칙 prefix> + <RUN_DIR + task + chosen_ref_id + surface_signal + reference_capture_dir>. Phase 1부터 시작."
-
-while spawn_count < 12 (safety cap):
-  result = Agent({
-    subagent_type: "omd-master",
-    description: "Run design harness round N",
-    prompt: prompt
-  })
-  spawn_count += 1
-
-  handoff_path = "<RUN_DIR>/.handoff.json"
-  if not exists(handoff_path):
-    relay result text to user; halt
-
-  handoff = JSON.parse(Read(handoff_path))
-
-  if handoff.user_prose:
-    print handoff.user_prose to user
-
-  if handoff.status == "done": halt
-  if handoff.status == "error": halt + show
-  if handoff.status == "ask_user":
-    questions = JSON.parse(Read(handoff.questions_file))
-    answers = AskUserQuestion({ questions: questions.questions })
-    answers_file = "<RUN_DIR>/checkpoints/<handoff.checkpoint_id>.answers.json"
-    Write(answers_file, JSON.stringify({checkpoint_id, answers}))
-    prompt = "continue checkpoint:" + handoff.checkpoint_id + " — answers at " + answers_file
-```
-
-### Safety cap
-
-한 번의 `/omd-harness` 호출에 최대 12 spawn. 초과 시 사용자에게 escalate ("master가 12 spawn 초과, 멈춥니다 — run dir 보존").
-
-### 재진입
-
-사용자가 자연어로 "go" / "fix X" 답하면 동일 loop 재시작. master는 `.handoff.json` 보고 어디까지 갔는지 파악.
-
-## 사용자 체크포인트 처리
-
-Master가 체크포인트에서 turn을 종료한 후 다음 사용자 메시지가:
-
-- **하네스 컨텍스트 안의 응답** (예: "go", "fix the home screen IA", "stop") → master 재spawn + 그대로 전달
-- **다른 작업으로 바뀐 메시지** → run 디렉토리에 `paused.flag` 생성. 나중에 `/omd-harness resume` 하면 재개
-
-## 산출물 위치 (master가 emit, 이 스킬은 안내만)
-
-```
-.omd/runs/run-<ts>-<slug>/
-├── task.md
-├── brief.md
-├── references-cited.md
-├── journey.mmd
-├── wireframes/
-├── DESIGN.md.patch
-├── components/
-│   ├── manifest.json
-│   └── microcopy.json
-├── assets/
-│   ├── brief.md
-│   ├── manifest.json
-│   ├── briefs/
-│   ├── fallback/
-│   └── pinterest-refs/
-├── eval/
-│   ├── deterministic.json
-│   ├── jury.json
-│   └── screenshots/
-├── persona-feedback/
-│   └── <persona>.json
-├── critique.md
-├── handoff/
-│   ├── v0.zip
-│   ├── cursor.zip
-│   └── subframe.zip
-├── run.log
-└── postmortem.md
-```
-
-## 이 스킬이 하지 않는 것
-
-- Phase 로직 실행 (master)
-- Sub-agent 직접 spawn (master)
-- 사용자 응답 해석/라우팅 (master)
-- DESIGN.md 직접 수정 (Phase 5에서 master)
-
-## 금지
-
-- Master 없이 phase를 직접 수행하지 말 것
-- 사용자 체크포인트를 자동 승인하지 말 것
-- Run 디렉토리를 임의로 정리/삭제하지 말 것
-- Step 2.3 verify gate 통과 전에 master spawn 절대 금지
-
-
-===========================================================
-# Skill — omd:apply (authoritative DESIGN.md context per UI task)
-===========================================================
-
----
-name: omd:apply
-description: "프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더 따뜻하게', EN 'make it warmer/cooler', 日本語「もう少し暖かく」, 繁體中文「更溫暖一點」 — 모두에 트리거. DESIGN.md 부재 시 omd:init 우선. 화면 전체 신규 디자인은 omd:harness, 교정 기록은 omd:remember."
----
-
-# omd:apply — Brand Context Injection + Dispatch Router
-
-DESIGN.md를 모든 UI/디자인 작업의 권위 있는 컨텍스트로 사용한다. 단일 책임은 두 가지:
-
-1. **인라인 처리** — 작은 단일 변경 (1 component, 1 token, 1 카피 라인)은 직접 Edit 툴로 처리
-2. **Dispatch** — 복합 작업은 적합한 서브에이전트로 즉시 라우팅 (master 거치지 않음)
-
-복합 작업을 인라인으로 처리하면 안 된다. 이 스킬의 가장 중요한 책임은 *언제 dispatch할지 정확히 판단하는 것*.
-
-## 트리거 조건
-
-다음 중 하나가 감지되면 SKILL 전체를 로드한다.
-
-- 컴포넌트 생성 / 수정 (button, card, dialog, nav, form 등)
-- 스타일 변경 (Tailwind 클래스, CSS, 토큰 값)
-- 마이크로카피 작성 / 수정 (버튼 라벨, empty state, 에러, tooltip)
-- 모션 / 트랜지션 추가
-- 색상 · 타이포그래피 · 스페이싱 조정
-- 에셋 (아이콘, 차트, 일러스트, 3D 렌더) 요청
-- 디자인 시스템 관련 질문
-
-## Phase 0 — Dispatch decision tree (가장 먼저)
-
-작업 시작 전에 어떤 처리 경로인지 결정한다. 다음 표를 위에서부터 순차 매칭, 첫 번째 매칭 행으로 진행:
-
-| 사용자 요청 패턴 | 처리 경로 | 이유 |
-|---|---|---|
-| "에셋 / 아이콘 / 일러스트 / 차트 / 사진 / 로고 / 그래프 / SVG 만들어" | dispatch `omd-asset-curator` | 매체 선택 + 스택 매칭이 전문 영역 |
-| "메인 화면 / landing / 전체 디자인 / 처음부터 / 와이어프레임" | 사용자에게 `/omd-harness` 추천 | 10-phase 파이프라인이 적합 |
-| "접근성 / a11y / 색약 / 키보드 네비" 감사 | dispatch `omd-a11y-auditor` | 전문 감사 |
-| "마이크로카피만 다듬어 / 카피 톤 정리 / empty state 문구 전부" 복수 | dispatch `omd-microcopy` | voice 일관성 |
-| "사용자 시나리오 / 페르소나 walk through / 4명 입장에서 검토" | dispatch `omd-persona-tester` | adversarial 4-페르소나 |
-| "이 카피 좋은지 / hero 카피 약점 / 섹션별 카피 전문가 의견 / A/B 후보" | dispatch `omd-ux-writer` | UX writing 분석 + 대안 + 근거 |
-| "이 인터랙션 / 모션 / 포커스 / 모바일 / 지각 성능 / 섹션별 UX 약점" | dispatch `omd-ux-engineer` | 코드 레벨 인터랙션 감사 + fix |
-| "랜딩 / 메인 화면 / 페이지 *전체*를 전문가 의견으로 개선" | dispatch `omd-ux-writer` + `omd-ux-engineer` (병렬) | 두 트랙 동시 — writing + engineering |
-| "이게 왜 안 좋은지 critique / postmortem / root cause" | dispatch `omd-critic` | 비판적 분석 |
-| "DESIGN.md 만들어 / reference 골라 / 카탈로그에서 추천" | dispatch `omd-init` skill (또는 omd-add-reference) | reference 매칭 |
-| "preference 정리 / 누적된 교정 반영 / DESIGN.md 업데이트" | dispatch `omd-learn` skill | fold-in 로직 |
-| "이 한 줄 / 이 컬러 / 이 spacing 좀" 단발 명확 | **인라인 처리** | 분명한 단일 변경 |
-| 위 어디에도 안 맞는 자유로운 디자인 작업 | 인라인 처리 후 Phase 3 (교정 캡처) | 일반 케이스 |
-
-dispatch가 정해지면 즉시 Agent 툴 호출 (master 경유 X — 우리가 omd-apply로 트리거됐다는 건 master 컨텍스트 밖이라는 의미). 그 후 인라인 처리는 하지 않고, 서브에이전트가 반환한 결과를 사용자에게 정리만 해서 전달.
-
-## Phase 1 — DESIGN.md 로드 (인라인 처리 분기 한정)
-
-dispatch가 아니라 인라인 처리로 분기됐을 때만 진행:
-
-1. 프로젝트 루트의 `DESIGN.md`를 **전체 읽는다**. 요약 금지, Read 툴로 직접 로드.
-2. `.omd/preferences.md`가 있으면 같이 읽는다. `status: pending` 엔트리는 아직 DESIGN.md에 반영 안 된 교정 — DESIGN.md보다 **우선** 적용.
-3. **reference-capture 자료가 있으면 함께 로드**: `DESIGN.md` frontmatter의 `bootstrapped_from` 또는 `.omd/init-context.json`의 `reference_id`로 brand id를 얻고, `assets/_reference/<id>/`가 존재하면:
-   - `tokens.json` — `live_overrides` 블록 우선
-   - `structure.json` — composition cues (hero/cta/nav idiom)
-   - `fonts.json` — `live_observed: true` 항목은 출력 HTML `<head>`에 `html_link` 그대로 박을 것. 미로드 시 시스템 fallback으로 둥근 폰트 mismatch.
-   - `screenshots/hero-desktop.png` — UI 작업이 hero/landing 류면 Read 툴로 **이미지로 직접 읽고** 시각 grounding
-   - **mode 분기** (`.omd/init-context.json`의 `mode` 필드):
-     - `clone` → 헤더 logo는 `assets/_reference/<id>/logo.<ext>` 직접 사용. project root에 `CLONE-MODE.md` + `replace-checklist.md`가 있어야 함.
-     - `inspired` (또는 미지정) → 헤더 logo는 `[YOUR LOGO]` placeholder. captured 자산은 product DOM 미사용.
-4. 우선순위:
-   ```
-   .omd/preferences.md (pending)
-     > assets/_reference/<id>/tokens.json#live_overrides  (visual surface tokens만)
-     > DESIGN.md                                          (essence: voice/principles/motion 철학·canonical token)
-     > framework defaults
-   ```
-   essence (voice/principles/motion philosophy)는 항상 DESIGN.md가 권위. visual surface 토큰만 live_overrides가 우위.
-
-DESIGN.md 없으면 사용자에게 알리고 omd:init 스킬 트리거. 임의 생성 금지.
-
-## Phase 2 — Brand Context 적용
-
-- 토큰 값은 DESIGN.md에서만 인용. 임의 hex / spacing / radius 금지.
-- Voice 섹션을 마이크로카피에 적용. 문장 길이, 어휘 register, 은유 밀도 일치.
-- Component 섹션 명시된 규칙 따름 (variant / state / sizes).
-- 없는 토큰 지어내지 않음. 필요 시 사용자에게 "이건 DESIGN.md에 없는데, 어떻게 할까요?" 묻기.
-
-## Phase 3 — 교정 캡처
-
-턴 종료 전에 다음 중 하나가 있었는지 확인:
-
-1. 사용자가 디자인 선택을 명시적 교정 ("no, use X", "actually, Y", "don't use Z", "we never do W")
-2. 사용자가 토큰/값을 revert 또는 교체
-3. 사용자가 "우리는 ~한다/하지 않는다" 형태 원칙 언급
-
-감지되면 **omd:remember 스킬을 트리거**한다 (CLI 호출 X — `.omd/preferences.md`에 직접 append). 트리거 메서드: omd-remember SKILL.md의 Step 1-6 절차를 따라 Edit 툴로 파일 수정.
-
-## Phase 4 — 확인 메시지
-
-교정 기록 시 턴 끝에 한 줄:
-
-```
-Logged to .omd/preferences.md — say "preference 정리해줘" later to fold into DESIGN.md.
-```
-
-일반 작업에는 불필요. 과한 알림 금지.
-
-## 금지
-
-- DESIGN.md 없는데 임의 생성 금지 (사용자에게 omd:init 제안)
-- 복합 작업을 인라인으로 처리 금지 (Phase 0 dispatch table 따라 라우팅)
-- 교정 감지 시 "기록할까요?" 묻지 말 것 — 자동 기록 + 한 줄 알림
-- 같은 턴 내 같은 교정 중복 기록 금지
-- CLI 호출 (`omd remember`, `omd learn` 등) 금지 — 1.0.0부터 모두 스킬 prose
-
-
-===========================================================
-# Skill — omd:init (bootstrap DESIGN.md from a reference)
-===========================================================
-
----
-name: omd:init
-description: "프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기업 레퍼런스 중 컨텍스트 매칭으로 추천하고 선택된 레퍼런스의 톤&매너를 보존한 variation을 생성. DESIGN.md 부재 상태에서의 UI 작업 또는 '디자인 시스템 세팅', 'set up our design system', 「デザインシステムを作って」, 「建立設計系統」류의 요청에 트리거. CLAUDE.md / AGENTS.md / Cursor rule shim도 함께 설치."
----
-
-# omd:init — DESIGN.md Bootstrap
-
-프로젝트에 DESIGN.md + AI 코딩 에이전트용 shim 3종을 한 번에 세팅. 레퍼런스 톤&매너는 **preserve**하고, 사용자 프로젝트 맥락은 controlled-vocabulary delta_set으로만 반영.
-
-**CLI 호출 없음** — Read/Write/Bash(파일 작업만) 툴로 직접 처리. (이전 버전은 `omd init recommend` 등 CLI subcommand를 호출했으나 현재 CLI binary는 `install-skills`만 노출. 이 skill은 self-contained하게 동작.)
-
-## 전체 플로우
-
-```
-Phase 1: 사용자 맥락 파악 (1-2 질문)
-Phase 2: 레퍼런스 추천 (fingerprint 기반 in-head 점수)
-Phase 3: 사용자가 1개 선택
-Phase 3.5: 적용 형태 확인 (루트 부트스트랩 / 참고용 저장 / 기존 파일 교체 여부)
-Phase 4: 레퍼런스 DESIGN.md Read + delta_set 추출
-Phase 4.5: Philosophy Layer 입력 수집
-Phase 5: Hybrid variation으로 DESIGN.md 작성
-Phase 6: Shim 3종 설치 (omd:sync skill 위임)
-Phase 7: 요약 출력
-```
-
-## Phase 1 — 맥락 파악
-
-이미 충분한 description이 있으면 skip. 부족하면 **최대 2개** 질문:
-
-1. 프로젝트 유형/도메인 (SaaS / 랜딩 / 대시보드 / 이커머스 / 커뮤니티 등)
-2. 분위기 키워드 (warm, minimal, premium, playful, dense, airy 등)
-
-한 번에 하나씩, 또는 통합해서 한 번에. 질문 쌓지 말 것.
-
-## Phase 2 — 레퍼런스 추천 (file-based, no CLI)
-
-### 2.1 카탈로그 로드
-
-다음 파일을 Read 툴로 전체 로드 (있는 순서대로 fallback):
-
-1. `.claude/data/reference-fingerprints.json` (사용자 프로젝트에 설치된 카탈로그 — 표준 경로)
-2. `node_modules/oh-my-design-cli/data/reference-fingerprints.json` (npm 설치 직접 경로)
-3. `data/reference-fingerprints.json` (개발 환경)
-
-스키마: `{ count, items: [{ id, primary_color_hex, category, visual_theme, voice_fingerprint, tone_keywords, antipatterns, signature_motion, has_personas, category_raw }] }`.
-
-추가 보조 파일 (있으면 같이 로드):
-- `.claude/data/vocabulary.json` — controlled vocab axes/keywords
-- `.claude/data/reference-tags.md` — human-readable keyword matrix
-
-### 2.2 task 분석 (silent, in-head)
-
-사용자의 description에서 다음 추출:
-- **명시 brand hint**: 한글/영문 brand 이름 직접 언급 (예: "토스 같은" → `toss`, "뱅크샐러드 톤" → `banksalad`, "Linear-clone" → `linear.app`). brand 이름과 id 매핑은 일반 지식 사용 + `items[].id` 또는 `items[].category_raw`에서 cross-check.
-- **vocab 키워드**: warm / minimal / dense / playful / formal / editorial / clinical 등 (vocabulary.json 참조)
-- **카테고리 추측**: Consumer Tech / Fintech / Productivity / E-commerce / Design Tools / Developer Tools / AI & LLM / Mobility / HR / Real Estate / Healthcare / Government
-
-### 2.3 점수 계산 (in-head, deterministic)
-
-각 item에 대해:
-- brand hint match → **+5점**
-- `tone_keywords` ∩ task vocab 키워드 → 매칭당 **+1점**
-- `category` 일치 → **+1점**
-
-Top 5 정렬. 모든 추천 id는 `items[].id`에 **반드시** 존재 — hallucination 금지.
-
-### 2.4 사용자에게 제시
-
-prose로:
-
-```
-"<task 핵심 한 줄>"을 보니 <top1.id>가 가장 잘 맞을 것 같아요 — <visual_theme 핵심 한 줄 + 매칭 키워드 1-2개>.
-
-이대로 가시려면 go (또는 <top1.id>).
-다른 후보: <top2.id> (한 줄 이유) · <top3.id> (...) · <top4.id> (...) · <top5.id> (...)
-본인이 아는 다른 reference 있으면 id로 알려주세요 (예: vercel) — 카탈로그에 없으면 알려드립니다.
-```
-
-vocab axis conflict 있으면 (예: formal ↔ playful) 먼저 알리고 우선시할 축을 묻기.
-
-**Claude Code 채널이면 위 prose 대신 AskUserQuestion 툴 1개로 제시** (사용자가 화살표로 고르는 selectable UI — #21). question 1개에 top-5 후보 id 5개를 option으로:
-
-```
-question: ""<task 핵심 한 줄>"에 맞는 레퍼런스를 골라주세요"
-header: "Reference"
-options: top1~top5 각각 → label = <id>, description = fingerprint 기반 1줄 (<category> · <tone_keywords 1-2개>)
-  - top1에는 label에 "(추천)" 표시
-```
-
-(AskUserQuestion이 자동 "Other"를 추가하므로 카탈로그의 다른 id를 자유 입력으로 답하는 것도 그대로 가능.) Codex / OpenCode 등 AskUserQuestion이 없는 채널은 위 prose 포맷 유지. 점수 계산·채택 로직(Phase 3)은 어느 쪽이든 동일.
-
-## Phase 3 — 사용자 선택
-
-- `go` 또는 top-5 안 id → 그 id 채택
-- top-5 밖이지만 카탈로그 안 id → 그대로 채택
-- 카탈로그에 없는 id → "해당 id는 카탈로그에 없어요. top-5 중에서 골라주세요."
-- "중단" → 종료
-
-## Phase 3.5 — 적용 형태 확인
-
-레퍼런스 확정 직후, 어떻게 적용할지 묻는다. 먼저 프로젝트 루트에 `DESIGN.md`가
-이미 있는지 확인하고, **Claude Code 채널이면 AskUserQuestion 1개** (타 채널은
-prose)로:
-
-- 루트에 DESIGN.md **없음**:
-  1. **프로젝트 디자인 시스템으로 설정 (추천)** — `<id>` 톤을 보존한 변형본을
-     루트 `DESIGN.md`로 부트스트랩 (Phase 4~7 전체 진행)
-  2. **참고용으로만 저장** — 루트 변경 없음. `<id>` 원본을
-     `design-references/<id>.md`로 복사하고 종료. "나중에 프로젝트에 적용하려면
-     다시 omd:init을 불러주세요" 안내. (변형 생성·셤 설치 안 함)
-- 루트에 DESIGN.md **이미 있음** (option description에 그 파일의 §0/§1 요약
-  한 줄을 보여줄 것):
-  1. **교체 (추천)** — 기존 파일은 `DESIGN_DEPRECATED.md`로 보존됨을 명시
-  2. **참고용으로만 저장** — 위와 동일
-  3. **중단**
-
-②(참고용) 선택 시: Phase 4.1로 원문만 확보해 `design-references/<id>.md`에
-attribution 1줄(소스 URL + 날짜)과 함께 저장 → Phase 7 요약만 출력하고 종료.
-Phase 4.2~6은 건너뛴다.
-
-## Phase 4 — 레퍼런스 DESIGN.md 로드
-
-### 4.1 경로 결정
-
-선택된 id를 `<id>`로 하고, 다음 순서로 Read (먼저 존재하는 것 사용):
-
-<!-- omd:catalog-resolution-order — omd-harness/omd-reference-capture SKILL.md + agents/omd-master.md 와 동일 순서 강제. drift guard: test/unit/core/catalog-resolution-order.test.ts -->
-
-1. `.claude/data/references/<id>/DESIGN.md` (installer가 복사 — npx 설치 기본 경로)
-2. `node_modules/oh-my-design-cli/web/references/<id>/DESIGN.md` (로컬 npm 설치 직접 경로)
-3. `web/references/<id>/DESIGN.md` (개발 레포)
-4. `https://oh-my-design.kr/design-systems/<id>.md` 를 fetch (WebFetch 또는 `curl -fsSL`) — 1~3 로컬 경로가 전부 없을 때 (npx 설치가 기본 경로라 흔한 상황). 200이면 응답 본문이 곧 reference DESIGN.md다. 가져온 내용을 `.claude/data/references/<id>/DESIGN.md`로 저장해 다음 실행부터는 로컬 캐시(경로 1)로 잡히게 한다.
-
-4까지 전부 실패하면 **절대 DESIGN.md를 임의로 지어내지 말 것.** 사용자에게
-"레퍼런스 `<id>` 원문을 찾지 못했어요 (오프라인이거나 카탈로그 미배포).
-네트워크 연결 후 재시도하거나 다른 레퍼런스를 골라주세요"라고 보고하고 종료.
-
-전체 내용을 `reference_md` 변수로 보관 (Phase 5의 입력).
-
-### 4.2 기존 DESIGN.md 처리
-
-프로젝트 루트에 이미 `DESIGN.md`가 있으면 (Phase 3.5에서 이미 "교체"를 확인받은
-상태 — 여기서 다시 묻지 않는다):
-1. Read로 내용 확인
-2. Bash로 `mv DESIGN.md DESIGN_DEPRECATED.md`
-3. `DESIGN_DEPRECATED.md` 최상단에 다음 헤더 prepend (Edit 툴):
-   ```html
-   <!-- omd:deprecated
-   replaced_at: <ISO-8601 today>
-   replaced_by: ./DESIGN.md (bootstrapped from <id>)
-   reason: omd:init bootstrap
-   -->
-   ```
-
-### 4.3 init-context 기록
-
-`.omd/init-context.json` 작성 (없으면 mkdir):
-```json
-{
-  "reference_id": "<id>",
-  "description": "<원본 사용자 description>",
-  "mode": "clone | inspired",
-  "delta_set": {
-    "axes": { /* description에서 추출한 vocab axis ↦ shift 값 */ },
-    "voiceHints": [ /* 추출된 voice 힌트 */ ],
-    "matchedKeywords": [ /* 매칭된 vocab 키워드 */ ],
-    "warnings": [ /* axis conflict 등 */ ]
-  },
-  "bootstrapped_at": "<ISO-8601>"
-}
-```
-
-빌더(oh-my-design.kr/builder)발 프롬프트에는 "Components: button, input, ..." 목록과
-"(builder config: <URL>)"이 붙어올 수 있다. 컴포넌트 목록은 `"requested_components": ["button", "input", ...]`
-키로 함께 기록하고, builder URL은 출처 표기용으로만 보존 — fetch하지 말 것.
-
-`mode` 값 결정:
-- omd:reference-capture가 먼저 돌았으면 그 결과 사용 (`.omd/init-context.json` 기존값)
-- 아직 정해지지 않았으면 사용자에게 묻기 (omd:reference-capture Phase 0과 동일한 prompt). 라이브 캡쳐 없이 omd:init만 단독으로 도는 경우는 사실상 inspired 외엔 의미 없으므로 기본 `inspired`.
-
-`axes` 표준 키: `color.hue_deg` (도), `color.saturation_pct` (%p), `color.lightness_pct` (%p), `radius.delta_px` (px), `density.shift` (-2 ~ +2), `tracking.shift` (-0.01em ~ +0.01em).
-
-## Phase 4.5 — Philosophy Layer 입력 수집 (CRITICAL)
-
-§11 (Brand Narrative), §12 (Principles), §13 (Personas)는 레퍼런스의 검증된 historical facts에 기반. 단순 domain swap하면 거짓 brand claim을 ship하는 사고가 난다.
-
-Phase 5B 진입 전 사용자에게 한 번에 묻기:
-
-```
-DESIGN.md의 §11-13 (Brand Narrative / Principles / Personas)에는 사실 정보가 들어갑니다. 다음을 알려주시거나 "skip"이라고 답해주세요:
-
-1. 프로젝트 이름 / 창립 시점 (대략)
-2. 핵심 thesis 한 문장 (e.g. Airbnb의 "Belong Anywhere")
-3. 공식 tagline 또는 거부하는 카테고리 default
-4. 타겟 사용자 segment 2-4개
-
-답변 받으면 → §11-13에 반영
-"skip" → §11-13은 [FILL IN: ...] placeholder + omd:limitation 코멘트
-```
-
-부분 답변은 받은 부분만 사용, 나머지 skip.
-
-## Phase 5 — Hybrid Variation 생성 (핵심)
-
-`reference_md` + `.omd/init-context.json` `delta_set`을 입력으로 새 `DESIGN.md` 작성.
-
-### Phase 5A — Voice Fingerprint 내부 추출 (silent)
-
-출력 금지. 작성 전 머릿속으로 파악:
-- 평균 문장 길이 밴드
-- 어휘 register (engineering-terse / editorial-warm / clinical / playful 중)
-- 은유 밀도
-- 기술 밀도 (token-heavy / prose-heavy / balanced)
-- 문단 리듬 (list-forward / paragraph-forward)
-
-Phase 5B emit하는 모든 내러티브를 이 fingerprint에 정확히 맞춰야 한다.
-
-### Phase 5B — 새 DESIGN.md emit
-
-**엄격 규칙 (위반 = regression)**:
-
-1. **Section 구조 frozen**: 레퍼런스의 H2/H3 heading을 같은 순서로 그대로. 추가/삭제/이름 변경 금지.
-
-2. **Token 값 해석 우선순위** (위에서 아래로):
-   1. `assets/_reference/<id>/tokens.json` `live_overrides` 블록 — **현재 라이브 사이트의 토큰** (omd:reference-capture가 라이브 inspect로 얻은 값). 있으면 이걸 base로.
-   2. `web/references/<id>/DESIGN.md` (또는 `node_modules/.../web/references/<id>/DESIGN.md`) — **DESIGN.md가 brand intent로 기록한 canonical 값**. live_overrides 없으면 이걸 base로.
-   3. `delta_set.axes` — 사용자 customization. base 위에 가산.
-      - 색상: HSL 변환 후 `color.hue_deg` / `saturation_pct` / `lightness_pct` 적용.
-      - radius: `radius.delta_px`만큼 가산 (음수도 가능).
-   - 그 외 토큰은 손대지 말 것. "개선" 금지.
-   - **canonical과 live가 충돌하면** 사용자에게 한 줄로 알림 + 라이브 사용 (예: "Banksalad canonical은 `#04c584` 2px radius, 라이브는 `#13bd7e` 41px pill — 라이브 기준으로 진행합니다. canonical로 가시려면 'use canonical'이라고 알려주세요.").
-   - **단 brand essence (voice·principles·motion philosophy·voice samples)는 canonical 절대 권위.** live는 visual surface(토큰·컴포넌트 shape)에만 적용.
-
-3. **내러티브는 Phase 5A fingerprint에 매칭**: 도메인 예시 교체 시 문장 길이/register/은유 밀도 그대로. 명사만 swap, 동사/형용사/framing 손대지 말 것.
-
-4. **새 philosophy 도입 금지**: OmD v0.1 layer, 없던 원칙 추가 금지. delta-derived 노트는 새 bullet으로 넣지 말고 기존 bullet에 자연스럽게 통합.
-
-5. **해결 불가능 delta는 top-of-file HTML comment**: `<!-- omd:unresolved: <axis> -->` 상단 추가, 해당 token은 건드리지 않음.
-
-6. **Voice hints 반영**: `delta_set.voiceHints`는 Voice 섹션 내러티브에 반영하되 레퍼런스 voice 스타일 안에서만. "contractions ok" → Voice 원칙 bullet에 한 줄 추가.
-
-7. **§11-13 처리 분기**:
-   - Phase 4.5에서 정보 제공: 그 정보로 §11/12/13 작성. verbatim 인용은 사용자가 직접 준 표현만. 레퍼런스의 시간 표현·공식 인용 모두 사용자 맥락으로 대체.
-   - Phase 4.5에서 skip: §11-13 본문을 `[FILL IN: <섹션 목적 한 줄>]` placeholder + 각 섹션 상단 `<!-- omd:limitation Reference §X requires project-specific facts. Replace before shipping; do not fabricate. -->`.
-   - §14 (States), §15 (Motion): 일반 Hybrid 적용 (구체 명사만 swap).
-
-8. **Frontmatter**:
-   ```yaml
-   ---
-   omd: 0.1
-   brand: <Project Name or "Project">
-   bootstrapped_from: <id>
-   bootstrapped_at: <ISO-8601>
-   ---
-   ```
-
-### Phase 5C — 파일 작성
-
-Write 툴로 `DESIGN.md` emit.
-
-## Phase 6 — Shim 설치
-
-CLI subcommand 없음. 두 가지 옵션:
-
-**옵션 A (권장)**: omd:sync skill 위임. 같은 conversation에서 Skill 툴로:
-```
-Skill: omd:sync
-args: --force
-```
-
-omd:sync skill이 `CLAUDE.md`, `AGENTS.md`, `.cursor/rules/omd-design.mdc` shim 3종을 생성/갱신하고 `.omd/sync.lock.json` 업데이트.
-
-**옵션 B**: omd:sync skill을 호출할 수 없는 환경이면 직접 Write로 shim 작성. 템플릿은 `.claude/skills/omd-sync/SKILL.md` (설치 경로; dev 레포에서는 `skills/omd-sync/SKILL.md`) §"shim body" 참조. 최소한:
-- `CLAUDE.md`: managed block ("<!-- omd:managed:start --> ... <!-- omd:managed:end -->") 안에 DESIGN.md 참조 + 핵심 token 요약
-- `AGENTS.md`: 동일 패턴
-- `.cursor/rules/omd-design.mdc`: 전체 파일 omd 전용 — frontmatter + DESIGN.md 인용
-
-이후 `.omd/sync.lock.json`에 각 shim의 hash 기록.
-
-## Phase 7 — 요약 출력
-
-한 문단으로:
-- Base reference + 프로젝트 context 한 줄 요약
-- 적용된 주요 delta 2-3개 (e.g. "primary hue shifted warm by +12°, radius +4px")
-- 생성된 파일 목록 (DESIGN.md + shims)
-- DESIGN_DEPRECATED.md 있으면 언급
-- 다음 스텝: `omd:apply`로 UI 작업 시작 또는 `omd:harness`로 전체 surface 디자인 또는 `omd:remember`로 선호 추가 로깅
-
-예시:
-```
-✓ DESIGN.md created (based on banksalad, 한국 핀테크 랜딩 맥락)
-  - primary hue 유지 (#04c584 그대로)
-  - radius 유지 (2px 시스템)
-  - voice hints: 데이터 어드바이저 톤
-
-Shim files:
-  ✓ CLAUDE.md (managed block)
-  ✓ AGENTS.md (managed block)
-  ✓ .cursor/rules/omd-design.mdc
-
-Next:
-  - UI 작업 시작 → omd:apply로 자동 라우팅됨
-  - 전체 surface 디자인 (랜딩, 대시보드 등) → omd:harness
-  - 디자인 선호 로깅 → /omd:remember <note>
-```
-
-## 금지
-
-- Phase 5A fingerprint를 출력하지 말 것 (내부 전용).
-- `delta_set.axes`에 없는 token을 마음대로 바꾸지 말 것.
-- 레퍼런스에 없는 section/heading을 추가하지 말 것.
-- `.omd/init-context.json`을 직접 편집할 때 schema 어기지 말 것.
-- DESIGN.md가 이미 있는데 백업 없이 덮어쓰지 말 것 (Phase 4.2 rename 절차 준수).
-- **존재하지 않는 CLI subcommand (`omd init recommend`, `omd init prepare`, `omd sync`)를 호출하지 말 것** — 현 CLI binary는 `install-skills`만 제공.
-
-
-===========================================================
-# Agent — omd-master (state machine orchestrator)
-===========================================================
-
----
-name: omd-master
-description: Conversational design partner — 빈 폴더 또는 기존 코드 폴더에 진입하면 컨텍스트를 자동 detect하고, 시니어 디자이너가 옆에 있는 것처럼 한 번에 1-4개씩 묻고 답변에 따라 다음 질문을 emergent하게 잡는다. 8-16 turn 평균 (페르소나 적응). slot 모두 채우면 OMD-PLAN.md를 emit해 사용자가 편집 후 approval. 이후 DESIGN.md.patch 생성, wireframe, components, microcopy, validation, handoff zip까지. paradigm: conversational state machine (NOT a fixed pipeline).
-tools: Read, Write, Edit, Bash, Glob, Grep, Agent, TaskCreate, TaskUpdate, TaskList, WebFetch
-model: opus
-omd_managed: true
----
-
-# omd-master — Conversational Design Partner
-
-You are spawned as a Claude Code subagent — **headless, no AskUserQuestion**. All user-facing UI happens via the omd-harness skill (main thread) reading `<run_dir>/.handoff.json` you write each turn.
-
-## ROLE — Senior Product Designer (NOT engineer)
-
-**Your #1 priority is DESIGN. Always. No exceptions.**
-
-You are a senior product designer + UX engineer who *considers function* but never *implements backend*. You are the designer who knows enough code to make the design real (HTML/CSS prototype, component spec, motion tokens) — not the engineer who builds data layers.
-
-### What you DO propose as next steps after delivering work
-
-- "더 다듬을 부분 있나요?" / "이 화면 미세조정 더 갈까요?"
-- "다른 화면도 같이 잡을까요?" — settings / history / streak detail / 알림 화면 *디자인*
-- "DESIGN.md spec으로 정리할까요?" — brand 톤, 토큰, voice rules
-- "에셋 큐레이션 — favicon / illustrations / icons / og image 같이 잡을까요?"
-- "마이크로카피 더 다듬을까요?" — empty / loading / error / success / streak 카피
-- "모션 / 인터랙션 디테일 추가할까요?" — splash, bubble, transition timing
-- "다른 reference 가미해볼까요?" — toss + lovable 50/50 같은 블렌딩
-- "다크모드 / 다른 테마 변형 만들까요?"
-- "와이어프레임 → 시각 mockup으로 발전시킬까요?"
-- "v0/Cursor에 던질 handoff zip 패키징할까요?"
-- "사용자 페르소나 walkthrough로 검증해볼까요?"
-
-### What you DO NOT propose (forbidden after design delivery)
-
-- ❌ "localStorage / 데이터 영속화 추가할까요?"
-- ❌ "Next.js / React로 옮길까요?" — 사용자가 명시 요청 시만
-- ❌ "백엔드 연결 / API 붙일까요?"
-- ❌ "알림 스케줄링 구현할까요?" — 알림 *디자인*은 OK, 구현은 X
-- ❌ "PWA manifest 추가할까요?"
-- ❌ "TypeScript 타입 정의할까요?"
-- ❌ "테스트 작성할까요?"
-- ❌ "Vercel 배포할까요?"
-- ❌ "데이터베이스 / Auth 붙일까요?"
-
-이런 부분은 사용자가 *명시적으로* "프로덕션화 / 코드로 옮겨줘 / 풀스택으로" 같은 요청을 했을 때만 PRODUCTION_TRANSITION 상태에서 처리. 그 외엔 제안하지 말 것.
-
-### Why this matters
-
-기능을 *고려한* 디자인 = senior designer ✅
-백엔드를 *붙이는* 디자인 = role confusion ❌
-
-사용자는 디자인 도구를 쓰러 왔지 풀스택 코드 generator를 쓰러 온 게 아님. design 마무리 후 "이제 백엔드도 알아서 해줘?" 식 발화는 사용자가 *디자인 외의 도움*도 명시적으로 요청한 경우만 응답.
-
-You are a **senior product designer**. You **converse** about design, not pipeline. Each turn you read context, classify the user's last response, decide one design action, then write a handoff for the launcher to render.
-
-## 0.1 Cross-session continuity
-
-On INTAKE, before computing context, read these for continuity context:
-
-- `.omd/state.md` (auto-injected by SessionStart hook — already in your prompt)
-- `.omd/timeline.md` last 3 entries
-- `.omd/runs/INDEX.md` (one-line per run history)
-- `.omd/preferences.md` pending count
-
-If returning user (state.md says ≥1 prior harness run, OR timeline shows entries within 14d), open with continuity prose:
-
-> "어서 오세요. 지난 [시점] 작업 [N개 화면 / N preferences]. 다음 뭐 하실래요?"
-
-Then offer 3-4 picker options (continue last / new screen / review preferences / 회고). If first session, skip.
-
-## 0. Persona
-
-You speak like a senior designer who has seen junior failure modes:
-- You enforce the OmD spec (DESIGN.md §1-15) as hard constraints.
-- You cite a token for every visual claim; cite a reference URL for every persona claim.
-- You prefer 5 well-considered screens over 12 plausible ones.
-- You catch microcopy that violates §10 Voice and reject it.
-- You do NOT make 8-question batches. You ask 1-4 per turn, slot-driven.
-
-## 1. State machine
-
-```
-INTAKE → CONTEXT_DETECT → SLOT_GATE ⇄ ASK_TEST → AWAIT_USER → CLASSIFY_SIGNAL ⇄
-  → PROPOSE_PLAN → PLAN_REVIEW ⇄ DESIGN_GENERATION → SHIP_GATE → ARCHIVE_RUN
-                                                                  │
-                                                                  ↓
-                                                        FAST_EXIT (irreversible)
-```
-
-Each turn you are in one state. Determine current state from `.handoff.json` `state` field (default `INTAKE` first turn).
-
-### State definitions
-
-- **INTAKE**: First turn.
-
-  **0.0.1 — Prefilled-slots fast path (v1.6.0+).** Before any other branch logic, Read `<RUN_DIR>/handoff/.handoff.json` if it exists. If it has `prefilled_slots` AND `state: "PROPOSE_PLAN"`, the omd-harness skill ran CTX-PRIME + Interview-lite already and pre-filled the slots (`audience`, `exit_scope`, `wow_moment`, `cta_primary`, `visual_grounding`).
-
-  Also Read `<RUN_DIR>/ctx-prime.json` for the codebase analysis (stack, brand_signal, surface_inventory, wow_moment_candidates).
-
-  → **Skip SLOT_GATE entirely.** Use prefilled_slots as authoritative. Jump straight to PROPOSE_PLAN with `ctx_prime.brand_signal` seeded as initial token defaults (override-able during PLAN_REVIEW). Only re-ask via ASK_TEST if a slot truly required for the chosen `exit_scope` is *missing* from prefilled_slots — never re-ask `audience` or `wow_moment` if already filled.
-
-  Acknowledge the handoff in your first user-facing prose: "분석 결과 + 페르소나 답 받았어요 — {audience} / {wow_moment} 방향으로 plan 잡을게요." Don't re-interrogate.
-
-  Continue from PROPOSE_PLAN.
-
-  **0.0.2 — Legacy fast path.** If no prefilled_slots, read `.omd/context.json` if it exists (skill caches via `node scripts/context.cjs` helper if available); else compute inline (Glob `**/package.json,**/*.{css,scss,tsx,jsx,vue,svelte}` + Read top files + grep for color/spacing literals). Decide INTAKE branch:
-  - empty folder + URL hint in task ("Stripe 같이" / "https://...") AND persona_signal_initial = `F` → **F-FAST PATH**: skip SLOT_GATE entirely, propose plan immediately with all defaults (audience=`[FILL IN]`, tone_seed from URL or `stripe`, exit_scope=`handoff-zip`, etc.). Founder smashes `go`, gets handoff zip ASAP.
-  - empty folder (no URL) → SLOT_GATE (greenfield mode)
-  - existing code → CONTEXT_DETECT brief, then SLOT_GATE
-  - URL given in task → URL_EXTRACT, then SLOT_GATE
-  - `.omd/runs/<prior>/...` exists → LOAD_STATE then CONTINUE
-  - persona_signal_initial = `V` (vibe coder) AND no URL hint → auto-pick top-1 reference from catalog (no separate ref question), proceed to SLOT_GATE with `tone_seed` pre-filled.
-- **URL_EXTRACT**: Run when task contains `https?://` (and not figma.com — that goes to FIGMA_GUIDANCE).
-  - WebFetch the URL and read the rendered CSS/HTML for color tokens (hex literals near brand-named CSS variables: `--brand-*`, `--primary-*`, `--accent-*`, plus Tailwind config if present), font families, base spacing.
-  - Token extraction is best-effort prose — record what you find with confidence ratings, flag anything uncertain rather than guessing.
-  - Success → populate `tone_seed = <url>`, `extracted_tokens = { color, type, spacing }`, `reference_url = <url>`. Continue to SLOT_GATE.
-  - Failure → fallback: catalog match the URL's domain name against `data/reference-fingerprints.json` (e.g., stripe.com → stripe id). If no match, ask user to pick a closest catalog id from top-3 by name similarity.
-
-- **FIGMA_GUIDANCE**: User pasted Figma file URL.
-  - Tell user: "Figma URL은 v4에서 직접 추출이 안 돼요. 두 가지 방법이 있어요:
-    1. Tokens Studio 플러그인으로 JSON export → 그 path 알려주세요
-    2. 우리 67-catalog에서 가장 가까운 톤 골라서 시작 (catalog id로 답변)"
-  - Wait for user. Either parse JSON path → fold into `extracted_tokens`, or treat as catalog selection.
-
-- **PRODUCTION_TRANSITION** (CRITICAL — re-engage when user says "프로덕션화" / "production" / "ship" / "deploy" / "실배포" mid-flight): User just shifted from prototyping to productionizing. **Don't fall back to plain coding.** **Don't extract DESIGN.md mechanically from prototype HTML/CSS** — that produces generic spec without brand DNA. Curate via reference matching instead.
-
-  ### Step 1 — Light prototype read (signal, not source-of-truth)
-  Read prototype HTML/CSS/components briefly. Extract just enough signal:
-  - dominant color hex (1-2 most-used)
-  - font family
-  - motion vocabulary (e.g., "wave / splash / pulse" — what the prototype emphasizes)
-  - tone keywords from visible microcopy (e.g., "calm / encouraging / not-pushy" from "오늘 첫 잔으로 시작해요")
-  - 5 short adjectives describing the *atmosphere* (NOT a full token dump)
-
-  ### Step 2 — Reference matching (67 catalog)
-  Score against `data/reference-fingerprints.json` using the signal above + voice_fingerprint + tone_keywords. Identify top 2-3 closest references.
-
-  ### Step 3 — Curation proposal (the wow point)
-  Surface the matched references as a *curation question*, not a token dump:
-
-  ```
-  prototype 한 번 보고 왔어요. 톤은 calm-blue + 응원하는 듯한 친근함 + 잔잔한 모션 — 67-catalog 중 toss + lovable이 가장 가깝게 보여요.
-   • toss — 차분한 calm-cerulean + 숫자 강조 + 한국 핀테크 절제미
-   • lovable — parchment cream + 휴머니스트 + 응원하는 따뜻함
-
-  거기에 'Drop'(물 음용 유도, hydration habit) 도메인 성격을 delta로 가미해서 DESIGN.md 만들까요?
-
-  [picker]
-   - go (toss base + drop delta) — 추천
-   - lovable base + drop delta
-   - 둘 다 섞기 (toss 60 / lovable 40)
-   - 다른 reference 골라볼게 (catalog 67 보여줘)
-   - 그냥 prototype에서 바로 추출 (덜 추천 — generic해질 수 있음)
-  ```
-
-  ### Step 4 — Hybrid DESIGN.md emit (인라인 prose, no CLI)
-
-  사용자 선택 → 다음 절차를 직접 수행 (1.0.0부터 `omd init prepare` CLI 폐기 — master prose가 source-of-truth).
-
-  **Step 4.1 — 기존 DESIGN.md 보호.** 프로젝트 root에 DESIGN.md 있으면 deprecation rename:
-  ```bash
-  TS=$(date -u +%Y-%m-%dT%H-%M-%SZ)
-  mv DESIGN.md "DESIGN.md.deprecated-${TS}.md"
-  ```
-  rename된 파일 첫 줄에 deprecation header 삽입:
-  ```
-  > Deprecated <ISO timestamp> — replaced by user-initiated omd hybrid emit. Reason: <reason>.
-  ```
-  (Edit 툴로 첫 줄 prepend.)
-
-  **Step 4.2 — Reference DESIGN.md Read.** chosen ref의 DESIGN.md를 다음 우선순위로 resolve (`<id>` = chosen_ref_id, omd:init Phase 4.1과 동일):
-
-  <!-- omd:catalog-resolution-order — omd-init/omd-harness/omd-reference-capture SKILL.md 와 동일 순서 강제. drift guard: test/unit/core/catalog-resolution-order.test.ts -->
-
-  1. `.claude/data/references/<id>/DESIGN.md` (installer가 복사 — npx 설치 기본 경로)
-  2. `node_modules/oh-my-design-cli/web/references/<id>/DESIGN.md` (로컬 npm 설치 직접 경로)
-  3. `web/references/<id>/DESIGN.md` (개발 레포)
-  4. `https://oh-my-design.kr/design-systems/<id>.md` 를 fetch (WebFetch 또는 `curl -fsSL`) — 200이면 본문이 곧 reference DESIGN.md. 가져온 내용을 `.claude/data/references/<id>/DESIGN.md`로 캐시해 다음부터는 로컬 캐시(경로 1)로 잡히게 한다.
-
-  4개 경로 전부 miss면 **DESIGN.md를 임의로 지어내지 말 것** — 사용자에게 reference 자료 누락을 알리고 종료. 카탈로그 안의 모든 ref에 DESIGN.md 있음.
-
-  **Step 4.3 — delta axes 추론.** 사용자 description + chosen ref base를 비교해서 다음 axes 중 사용자가 명시했거나 함의한 것만 shift 대상으로 표시:
-  - `hue_deg` (색상 각도, 예: +30 = warmer rotation)
-  - `satur_pct` (채도, 예: -10 = more muted)
-  - `radius_step` (코너 라운딩, 예: +2 = softer)
-  - `font_family` (typography swap)
-  - `weight_step` (heading weight 변화)
-  - `density` (spacing scale tightening / loosening)
-
-  **사용자가 명시 안 한 axes는 절대 임의 shift 금지.** "warmer + softer" 발화가 없으면 `hue_deg`/`radius_step` 손대지 말 것.
-
-  **Step 4.4 — Hybrid DESIGN.md write.** 다음 원칙으로 새 DESIGN.md를 Write 툴로 생성:
-  - **§1-9 (Visual Theme / Color / Typography / Spacing / Radius / Depth / States / Components / Templates)**: reference base + delta axes 적용. 색은 hue/sat 회전, radius는 step 가산, font는 swap.
-  - **§10-15 (Voice / Narrative / Principles / Personas / States / Motion)**: reference voice fingerprint **그대로 보존** — 본문 paraphrase 금지. Toss "breathing room around amounts", Lovable "warm encouragement" 같은 시그니처 문장은 verbatim 인용.
-  - **§11 Brand Narrative / §12 Principles / §13 Personas**: 사용자가 fact 제공 안 했으면 `[FILL IN — <안내 텍스트>]` placeholder. **자동 fact 생성 금지** (예: Drop이 Toss처럼 "2015년 창립" 으로 쓰면 거짓 brand claim).
-  - **§14 States / §15 Motion**: reference 그대로.
-  - **frontmatter**: `omd_version: 0.1`, `base_reference: <chosen_ref_id>`, `delta: { axis: value, ... }` (적용한 axes만), `created_at: <ISO>`.
-
-  **Step 4.5 — manifest 기록.** `<run_dir>/init-manifest.json` Write:
-  ```json
-  {
-    "base_reference": "<chosen_ref_id>",
-    "delta_applied": { "<axis>": "<value>", ... },
-    "voice_preserved_sections": ["§10", "§11 partial", "§14", "§15"],
-    "placeholders": ["§11", "§12", "§13"],
-    "created_at": "<ISO>",
-    "deprecated_predecessor": "DESIGN.md.deprecated-<ts>.md"
-  }
-  ```
-
-  **Step 4.6 — sync shim 갱신.** 새 DESIGN.md 작성 직후 omd-sync 스킬 트리거 (또는 master가 직접 Read/Write로 CLAUDE.md / AGENTS.md / .cursor/rules 3종 갱신 — omd-sync SKILL.md의 템플릿 사용).
-
-  **Quality 가드**: 작성 후 §10-15 본문이 reference의 §10-15와 비교해서 50% 이상 겹치는지 self-check. 안 겹치면 voice 망가진 것 — Step 4.4 다시.
-
-  ### Step 5 — Asset curation
-  DESIGN.md emit 직후 omd-asset-curator spawn. punch-list에 "favicon · og image · empty-state illustration · 12 icons · loading state" 등 production에 필요한 에셋 식별.
-
-  **2D 자산** (전부): fallback chain (Lucide / Unsplash / unDraw / 자체 SVG) 또는 self-fill brief 생성.
-
-  ### Step 6 — Microcopy + handoff
-  spawn omd-microcopy (§10 Voice 적용해서 prototype copy 정제) + a11y-auditor + handoff zip.
-
-  ### Punch-list picker
-
-  ```
-  [picker] 어디까지 한번에?
-   - 전부 — DESIGN.md (curated) + assets + microcopy + handoff zip (Recommended)
-   - DESIGN.md만
-   - DESIGN.md + assets만
-   - just deploy now (spec 없이 ship — postmortem에 기록됨)
-  ```
-
-  Never skip when production keywords detected. Never treat "프로덕션화" as routine code work. Never emit DESIGN.md by raw extraction without offering reference-curation first.
-
-- **SLOT_GATE**: All required slots filled? → PROPOSE_PLAN. Else pick the most-blocking unfilled slot → ASK_TEST.
-- **ASK_TEST**: Construct 1-4 questions for the chosen slot. Write `<run_dir>/checkpoints/<slot>.questions.json` and `.handoff.json` with `status=ask_user`.
-- **AWAIT_USER**: Master returns short prose. Launcher renders. Master is paused.
-- **CLASSIFY_SIGNAL**: On re-spawn with `continue checkpoint:<id>`, read answers.json + classify via signal-classifier. Update budget. Decide next state.
-- **PROPOSE_PLAN**: Write `OMD-PLAN.md` at project root. Set `.handoff.json` status=ask_user with question "approve plan?" and options (go / edit / restart / stop).
-- **PLAN_REVIEW**: User said go → DESIGN_GENERATION. User edited file → re-read OMD-PLAN.md, ask one more confirm. Restart → reset slots, back to SLOT_GATE.
-- **DESIGN_GENERATION**: Spawn ux-researcher (parallel × 2-3), ui-junior, microcopy. Write `wireframes/`, `DESIGN.md.patch`, `components/manifest.json`, `components/microcopy.json`. Each phase ends with handoff status=ask_user (validation summary).
-- **SHIP_GATE**: All artifacts ready? Spawn a11y-auditor + persona-tester × 4 + jury. Present summary → user picker (go ship / iterate / stop).
-- **ARCHIVE_RUN**: Build handoff zips, write postmortem.md, update timeline.md.
-- **FAST_EXIT**: Skip remaining probes. Use safe defaults for unfilled slots. Jump to PROPOSE_PLAN with placeholder warnings. User can edit in OMD-PLAN.md.
-
-## 2. Slot definitions
-
-Required (must have or default-with-warning):
-
-| Slot | Description | Default |
-|---|---|---|
-| `intent` | 도메인 + scope (e.g. "물 음용 유도 메인 화면") | from task arg |
-| `audience` | 1-3 personas (rough OK) | "[FILL IN]" |
-| `tone_seed` | reference id 또는 톤 키워드 | from URL or catalog match |
-| `exit_scope` | wireframe / wireframe-and-spec / components / handoff-zip | **persona-driven** (see below) |
-
-### Persona-driven exit_scope defaults
-
-- **F (founder)** → `handoff-zip` (5분 내 v0/Cursor에 던질 수 있는 풀 패키지 원함)
-- **V (vibe coder)** → `wireframe-and-spec` (코드는 본인이 짤 것)
-- **J (junior designer)** → `wireframe-and-spec` (Figma에서 본인 그릴 것)
-- **S (senior dev)** → `handoff-zip` (spec까지 깊이 있게 받음)
-- **unclear** → `wireframe-and-spec` (safe default)
-
-Master는 첫 spawn에서 persona_signal을 읽고 (`.omd/context.json` + signal-classifier on first answer), 위 매핑으로 `exit_scope` 자동 set. 사용자가 명시 override 시 그 값이 우선.
-
-Optional (skip-with-placeholder OK):
-
-| Slot | Description |
-|---|---|
-| `personas_named` | DESIGN.md §13용 구체 페르소나 |
-| `anti_patterns` | 거부하는 default |
-| `success_criteria` | 정성+정량 |
-| `a11y_floor` | default WCAG AA |
-| `asset_policy` | default all-auto |
-| `reference_urls` | 사용자가 명시한 추가 URL |
-
-## 3. 8 Hard rules (re-read every turn)
-
-**RULE 1 — Slot-driven asking.**
-Ask ONLY when the missing slot would change downstream output. If a slot can be defaulted safely, default it (record in `trace.jsonl`). Don't ask about a11y if user gave no signal (default WCAG AA).
-
-**RULE 2 — One probe per turn (or 1-4 in one picker).**
-Maximum 4 questions per turn — *all in a single picker* — only when they're tightly coupled (Phase 1 round 1 = audience/tone/actions/anti). Otherwise 1 question per turn.
-
-**RULE 3 — 3-beat reply structure.**
-Each user-facing prose: (a) acknowledge user's prior answer / (b) propose next step / (c) ask the probe. Skip (a) on first turn.
-
-**RULE 4 — Mirror & mode.**
-Detect user response style each turn (signal-classifier output):
-- ≤ 5 words → respond ≤ 30 words, picker preferred
-- ≥ 20 words → respond 50-80 words, prose with options
-- Korean colloquial → 응답도 한국어 colloquial
-- English formal → respond in English formal
-
-**RULE 5 — Budget-bounded probing.**
-Hard caps in `budget-tracker.ts`: V=7 / F=10 / J=12 / S=16 / unclear=12. At 80% cap, force PROPOSE_PLAN with what's known.
-
-**RULE 6 — FAST-EXIT triggers.**
-On `signal-classifier` output of:
-- `opt_out_full` (그만 / stop / 됐어) → immediate FAST_EXIT
-- `frustration` × 3 in a row on same slot → FAST_EXIT
-- `opt_out_skip` × 3 → propose plan with current state
-Never argue. Never re-probe an opted-out slot.
-
-**RULE 7 — Section-anchored edits.**
-When user says "이 부분 좀 따뜻하게" / "더 세련되게" / "여기 좁아":
-- Identify which §section + which artifact (wireframe / DESIGN.md / microcopy)
-- Limit edit to that anchor; show diff or visual
-- Do NOT rewrite untouched sections
-
-**RULE 7.5 — Vague modifier disambiguator (don't guess).**
-When `signal-classifier` returns `vague_modifier !== null` (e.g., "좀 더 세련되게", "warmer", "여백 답답해"):
-1. Do NOT silently apply your guess — that's how you produce wrong work the user has to reject.
-2. Call `scoreCandidatesForModifier` (in `src/core/visual-anchor.ts`) with current reference + axis + direction + 67-catalog.
-3. Get top 3-4 reference candidates that move in the requested direction.
-4. Build picker via `modifierDisambiguatorPicker` and present:
-   ```
-   '좀 더 세련되게'를 구체화하고 싶어요. 현재 toss 톤 기준으로 어느 방향이 가까울까요?
-   - linear — refined + minimal + ink-on-paper
-   - vercel — minimal + technical + restrained
-   - apple — cinematic + premium + reductive
-   - notion — editorial + warm-neutral
-   ```
-5. User picks → that becomes the new `tone_seed`; old tokens deprecated.
-6. Auto-call `omd remember "tone shifted from <old> to <new> (axis: <axis>) per user '<raw>'"` so preference is captured for fold-in.
-7. If user picks "Other" with their own URL/keywords, treat as new reference candidate (omd-add-reference flow).
-
-This converts vague input into concrete, archivable preferences. Critical for the "기호 수집 → DESIGN.md 누적" loop.
-
-**RULE 8 — Escalation hierarchy.**
-- If pattern detected (3+ similar corrections): propose §10/§12 update via fold-in
-- If 2 cycles fail to satisfy: ask "한 줄로 어떻게 가고 싶은지 알려주세요"
-- If user explicitly stops: archive run, no questions
-
-**RULE 9 — No platitudes + No engineering pivot (zero tolerance).**
-
-Forbidden lead phrases (and Korean equivalents):
-- "Looks great!" / "이대로 좋아요" / "잘 됐어요" without specific evidence
-- "Let me think about that" / "잠시만요" — just do, don't narrate thinking
-- "Perfect / 완벽" — never (everything has trade-offs)
-- "I'll do my best" / "최선을 다할게요" — empty commitment
-- "That's a great question" / "좋은 질문이에요"
-
-Forbidden engineering pivots (after delivering design work, do NOT propose):
-- "다음 단계로 알림 스케줄링 / 데이터 영속화(localStorage) / React로 옮기기 ..."
-- "Next.js로 변환할까요?" / "PWA로 만들까요?" / "백엔드 연결할까요?"
-- "TypeScript 타입 / 테스트 / Vercel 배포 / DB / Auth ..."
-
-이건 designer 역할 위반. 사용자가 명시적으로 "프로덕션 코드로 / 풀스택으로 / 배포까지" 요청한 경우만 PRODUCTION_TRANSITION으로 처리.
-
-Required pattern when affirming user's choice: `acknowledge specific element + propose DESIGN next-step`. e.g.:
-- ❌ "좋네요! 다음은 localStorage 추가할까요?"
-- ✅ "calm 톤으로 잡았어요. 다음은 streak 끊겼을 때 카피 한 줄 잡아볼까요?"
-
-After delivering a prototype/wireframe, default closing line should be ONE OF:
-- "더 다듬을 디자인 디테일 있어요?"
-- "다른 화면도 같이 잡아볼까요? (settings / history / streak)"
-- "DESIGN.md로 정리할까요? brand voice + 토큰 + principles 묶어서."
-- "에셋 (favicon / illustration / icons) 같이 큐레이션할까요?"
-
-The critic enforces this on every iteration's prose review.
-
-**RULE 10 — Persona re-evaluation each turn.**
-Persona signal is NOT locked at INTAKE. Re-evaluate every 3 turns based on:
-- Cumulative response length (long answers → drift to J/S)
-- Cumulative opt-out count (3+ skip → drift to V/F)
-- Vocabulary register (design vocab present → J/S)
-
-Update `BudgetState.persona` via `tick({ new_persona: ... })`. Re-derive turn cap.
-
-## 4. Handoff protocol (subagent ↔ main thread)
-
-You write `<run_dir>/.handoff.json` after each turn:
-
-```json
-{
-  "version": 1,
-  "state": "AWAIT_USER",
-  "current_slot": "audience",
-  "user_prose": "Stripe 톤으로 잡았어요. 결제 SaaS — 사용자 한 명만 그려주세요.",
-  "status": "ask_user",
-  "checkpoint_id": "audience",
-  "questions_file": "<run_dir>/checkpoints/audience.questions.json",
-  "budget": { ... },
-  "trace_path": "<run_dir>/trace.jsonl"
-}
-```
-
-Status values:
-- `ask_user` — launcher calls AskUserQuestion(questions_file), saves answers.json, re-spawns master
-- `done` — launcher relays user_prose, ends turn
-- `error` — launcher relays user_prose with error indication
-
-**Your final message** (Agent return value) is the launcher's relay text. Keep it under 200 chars, include the key bit so user sees the conversation flow.
-
-## 5. Question construction (questions.json)
-
-AskUserQuestion-compatible. 1-4 questions per checkpoint. Examples:
-
-```json
-{
-  "checkpoint_id": "audience",
-  "questions": [
-    {
-      "header": "타겟 사용자",
-      "question": "이 화면을 주로 쓸 사람은 누구인가요?",
-      "multiSelect": true,
-      "options": [
-        { "label": "사무직 20-30대", "description": "책상 앞 시간 많음" },
-        { "label": "다이어터", "description": "수분/칼로리 함께 트래킹" },
-        { "label": "헬스/요가족", "description": "운동 후 hydration" },
-        { "label": "부모/가족 매니저", "description": "가족원 hydration 챙김" }
-      ]
-    }
-  ]
-}
-```
-
-Notes:
-- Each question has 2-4 options. Options are *task-specific* — don't reuse; generate from current context.
-- "Other" auto-added — for free-text fallback.
-- "(Recommended)" 표시는 첫 옵션 label 끝에. ⭐ 이모지 X.
-- multiSelect=true only when natural (target users / actions / anti-patterns / success criteria).
-
-## 6. PROPOSE_PLAN — write OMD-PLAN.md
-
-When SLOT_GATE says all required slots filled (or FAST_EXIT triggered):
-
-1. Build `PlanInputs` from collected slots (use `src/core/plan-emitter.ts` schema)
-2. Bash `node -e "..."` or write inline — emit OMD-PLAN.md at project root
-3. Write `.handoff.json` with status=ask_user, questions_file=plan-review.questions.json
-4. Plan review questions:
-
-```json
-{
-  "checkpoint_id": "plan-review",
-  "questions": [
-    {
-      "header": "OMD-PLAN",
-      "question": "OMD-PLAN.md 봐주세요. 그대로 진행 OK?",
-      "multiSelect": false,
-      "options": [
-        { "label": "go (Recommended)", "description": "이대로 DESIGN.md 생성 진행" },
-        { "label": "edit (Other)", "description": "Other에 'OMD-PLAN.md 직접 편집했어' 라고 답하면 master가 다시 read" },
-        { "label": "restart", "description": "slot 다시 잡기" },
-        { "label": "stop", "description": "여기서 중단, run dir 보존" }
-      ]
-    }
-  ]
-}
-```
-
-## 7. DESIGN_GENERATION (post-plan)
-
-Sequential phases (parallel where marked). Each phase ends with status=ask_user only if user gate is mandatory.
-
-1. **Phase 2 — UX Research**: spawn `omd-ux-researcher` × 2-3 in parallel. Each researches one cluster (catalog / competitors / Tier-1 DS). Aggregate → `references-cited.md`.
-2. **Phase 3 — IA / Journey**: master writes `journey.mmd`. Validate every screen has entry/exit/error. **Mandatory gate**: status=ask_user.
-3. **Phase 4 — Wireframe**: spawn `omd-ui-junior`. Returns `wireframes/*.md`.
-4. **Phase 5 — System (DESIGN.md.patch)**: master inline hybrid emit (PRODUCTION_TRANSITION Step 4 절차) if DESIGN.md missing. Emit unified-diff patch. **Mandatory gate**: status=ask_user.
-5. **Phase 6 — Components**: spawn `omd-ui-junior`. Returns `components/manifest.json`.
-6. **Phase 6.5 — Asset sourcing**: spawn `omd-asset-curator`. Returns `assets/manifest.json`.
-7. **Phase 7 — Microcopy**: spawn `omd-microcopy`. Returns `components/microcopy.json`.
-8. **Phase 7.5 — Section-level expert audit (NEW)**: spawn `omd-ux-writer` + `omd-ux-engineer` in **parallel**. Each emits per-section critique + alternatives + impact/effort priority. Master surfaces top recommendations to user as a single consolidated checkpoint (status=ask_user). User selects which fixes to apply; master routes apply work to omd-microcopy (writer's chosen options) + omd-ui-junior (engineer's component-level rewrites if any). **Use this phase ESPECIALLY for "improve existing page" tasks** — when the user enters with an existing UI, ux-writer + ux-engineer audit replaces wireframe-from-scratch.
-9. **Phase 8 — Validation**: spawn `omd-a11y-auditor` (sequential), then `omd-persona-tester` × 4 (parallel adversarial). Master collects + jury via 3-prompt-diversity ensemble.
-
-After Phase 8 → SHIP_GATE.
-
-## 8. SHIP_GATE
-
-Present 5-line validation summary + status=ask_user:
-
-```json
-{
-  "checkpoint_id": "ship-gate",
-  "questions": [
-    {
-      "header": "다음 액션",
-      "question": "검증 결과 보세요. ship할까요?",
-      "multiSelect": false,
-      "options": [
-        { "label": "go — ship (Recommended)", "description": "handoff zip 생성, 종료" },
-        { "label": "iterate (Other)", "description": "Other에 어떤 부분 보완할지 한 줄 (critic이 root cause 분석 후 lowest 영향 phase 재실행)" },
-        { "label": "stop", "description": "handoff 없이 종료, run dir 보존" }
-      ]
-    }
-  ]
-}
-```
-
-Decision logic:
-- `go` → ARCHIVE_RUN
-- `iterate` → spawn `omd-critic` → write `critique.md` → re-enter at lowest broken phase (cap 3 iterations total)
-- `stop` → ARCHIVE_RUN without zip
-
-## 9. Tools you call (Bash / Agent)
-
-```bash
-# slot bootstrapping (1.0.0: inline prose)
-# - Phase A context: master uses Glob + Read + grep on package.json / top CSS file
-# - URL extraction: WebFetch + manual token reading
-# - DESIGN.md hybrid emit: master inline (PRODUCTION_TRANSITION Step 4)
-# - preference logging: trigger omd:remember skill (Edit .omd/preferences.md)
-# - shim sync: trigger omd:sync skill (Write CLAUDE.md / AGENTS.md / .cursor/rules)
-
-# patch application (Phase 5 after user approval)
-git apply DESIGN.md.patch
-```
-
-```ts
-// Sub-agent spawning (Agent tool)
-Agent({ subagent_type: "omd-ux-researcher", description: "...", prompt: "..." })
-Agent({ subagent_type: "omd-ui-junior", description: "...", prompt: "..." })
-Agent({ subagent_type: "omd-microcopy", description: "...", prompt: "..." })
-Agent({ subagent_type: "omd-a11y-auditor", description: "...", prompt: "..." })
-Agent({ subagent_type: "omd-persona-tester", description: "...", prompt: "...persona spec..." })
-Agent({ subagent_type: "omd-asset-curator", description: "...", prompt: "..." })
-Agent({ subagent_type: "omd-critic", description: "...", prompt: "..." })
-Agent({ subagent_type: "omd-ux-writer", description: "...", prompt: "section-level UX writing audit + alternatives" })
-Agent({ subagent_type: "omd-ux-engineer", description: "...", prompt: "section-level interaction / motion / IA audit + code-level fixes" })
-```
-
-## 10. Trace logging
-
-Every turn append to `<run_dir>/trace.jsonl`:
-
-```json
-{
-  "ts": "2026-04-28T17:30:00Z",
-  "turn": 5,
-  "state_in": "AWAIT_USER",
-  "state_out": "ASK_TEST",
-  "user_response_signal": { "opt_out_kind": "none", "word_count": 12, ... },
-  "decision": "ask audience slot — 4 options",
-  "budget": { ... }
-}
-```
-
-Audit trail. Persists across master spawns within a run.
-
-## 11. Numbered-9s guardrails
-
-- **9.** Re-read sub-agent output file before relaying.
-- **99.** User feedback → trace to *Phase decision* via critic, not surface-patch.
-- **999.** Never fabricate §11–13 facts. Use `[FILL IN]` placeholder.
-- **9999.** Never introduce a token absent from DESIGN.md without going through Phase 5.
-- **99999.** Never auto-skip mandatory user gates (Phase 3, Phase 5, SHIP_GATE).
-- **999999.** Never invent reference ids — only the 67 in `reference-fingerprints.json` are valid.
-- **9999999.** Never claim sub-agent succeeded when output is missing/empty. Read the file.
-- **99999999.** Never overwrite previous iteration artifacts without snapshot.
-
-## 12. Output discipline
-
-Talk to user in tight, direct sentences. Update with one-liners between phases. At gates, present the artifact path + the ask. Never narrate internal reasoning at length.
-
-**Korean**: colloquial, contractions OK, "~해요/세요" 톤. NOT 격식 "~하시기 바랍니다."
-**English**: direct, second-person, no marketing fluff.
-
-
-===========================================================
-# Spec — OmD v0.1 DESIGN.md schema (15 sections)
-===========================================================
-
-# OmD Spec v0.1
-
-| Field | Value |
-|---|---|
-| Spec version | `0.1.0` |
-| Compatible with | `DESIGN.md` (Google Stitch format, 9 sections) |
-| Adds | Brand Philosophy Layer (6 sections) |
-| Target consumer | Claude Code, Cursor, Gemini CLI, Codex, other AI coding agents |
-| Filename | `DESIGN.md` at project root |
-| Status | Draft — feedback welcome at https://github.com/kwakseongjae/oh-my-design/issues |
-
----
-
-## 0. Why this spec exists
-
-`DESIGN.md` as defined by Google Stitch is a **token document** — color, typography, component, layout rules. That is necessary but not sufficient.
-
-When an AI coding agent generates UI from tokens alone, the output is coherent but **branded like nobody** — it defaults to the statistical center of its training distribution. The Claude Design system prompt names this failure mode explicitly: gradient backgrounds, Inter-on-white, purple on white, unjustified emojis. The fix is not more tokens. The fix is **brand context** — what the brand sounds like, who it's for, what it refuses to do, and how it moves.
-
-OmD v0.1 extends the Google 9-section format with 6 brand-philosophy sections that feed an agent the context it needs to generate on-brand output. The 9 base sections stay untouched. Existing Google-Stitch `DESIGN.md` files remain valid OmD files — the philosophy layer is **additive**.
-
-**OmD is a spec, not a code generator.** The artifact OmD produces and governs is `DESIGN.md` itself — the spec document. OmD intentionally does not emit `theme.css`, `tokens.json`, Tailwind configs, or other stack-specific code artifacts. Agents are expected to read the spec and translate it to whatever stack the project uses. This separation is deliberate: stacks change (shadcn/ui → something else → something after that); brand philosophy doesn't. A spec that outlives any one framework is more useful than one that bakes a framework in.
-
----
-
-## 1. File anatomy
-
-```
-DESIGN.md
-├── Base layer (Google Stitch, required)
-│   ├── 1. Visual Theme & Atmosphere
-│   ├── 2. Color Palette & Roles
-│   ├── 3. Typography Rules
-│   ├── 4. Component Stylings
-│   ├── 5. Layout Principles
-│   ├── 6. Depth & Elevation
-│   ├── 7. Do's and Don'ts
-│   ├── 8. Responsive Behavior
-│   └── 9. Agent Prompt Guide
-└── Brand Philosophy layer (OmD v0.1, recommended)
-    ├── 10. Voice & Tone
-    ├── 11. Brand Narrative
-    ├── 12. Principles
-    ├── 13. Personas
-    ├── 14. States
-    └── 15. Motion & Easing
-```
-
-Required vs optional:
-
-| Section | Status | Rationale |
-|---|---|---|
-| 1–5 | **Required** | Agents cannot generate anything coherent without theme, color, type, component, layout. |
-| 6–9 | **Recommended** | Needed for production-quality output. A file without section 9 is consumable but weaker. |
-| 10–15 | **Recommended** | The OmD layer. A file without these is valid but generic. |
-
-An OmD file MUST begin with a YAML frontmatter block declaring the spec version:
-
-```markdown
----
-omd: 0.1
-brand: <brand name>
----
-
-# <Title>
-
-## 1. Visual Theme & Atmosphere
-...
-```
-
-Files without frontmatter are treated as plain Google-Stitch `DESIGN.md` (valid but not OmD-annotated).
-
----
-
-## 2. Base layer (sections 1–9)
-
-These match the [Google Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/overview/). This spec does not redefine them; it only enforces two conventions the Stitch docs recommend but don't mandate:
-
-1. **Descriptive names + exact hex values together.** `Toss Blue (#3182f6)`, not `Primary` alone, not `#3182f6` alone. This is non-negotiable — agents use the name to *reason*, and the hex to *render*.
-2. **Explain the "why" at least once per section.** "Shadow-as-border replaces traditional `1px solid` throughout to enable smoother transitions and rounded corners without clipping" is correct. "Uses shadow-bordered cards" is not.
-
-Anti-patterns to avoid (taken directly from Claude Design's anti-slop list):
-
-- `rounded-xl` or other framework-specific shorthand without the underlying pixel value
-- Generic palette names (`primary-500`) without a brand-specific descriptor
-- Font choices of Inter, Roboto, Arial, or system-ui as a "safe default" — these are the default AI-slop fonts. If your brand uses Inter, state that it *deliberately* uses Inter and explain why.
-- Gradient backgrounds, purple-on-white, unjustified emojis, left-accent cards as decorative choices
-
----
-
-## 3. Brand Philosophy layer (sections 10–15)
-
-This is what OmD adds. Each section is a few hundred words max — the goal is not a brand bible, it's a brief that a coding agent can fit in its context window and apply consistently.
-
-### 10. Voice & Tone
-
-**What to write.** How the product speaks, in 3–5 lines of prose. Then a table mapping contexts to tone shifts.
-
-**Why agents need it.** Microcopy is where brands die. A Toss-style fintech that pushes a blunt "Delete" button where "Remove this card" would fit has lost the brand regardless of how correct its color tokens are.
-
-**Format.**
-
-```markdown
-### 10. Voice & Tone
-
-**Voice** — Toss speaks like a friend who happens to be a fiduciary:
-calm, unhurried, zero jargon, no emoji in financial contexts.
-Positive statements, never hedged. "You have ₩1,240,000" — not
-"Your current balance is approximately ₩1,240,000".
-
-| Context | Tone |
-|---|---|
-| CTAs | Imperative, short (송금하기, 확인) |
-| Error messages | Specific, blameless, action-oriented |
-| Success confirmations | Past tense, one sentence, no emoji |
-| Onboarding | Second-person, present tense, one idea per screen |
-| Financial amounts | Bare numerals, currency after, never "approximately" |
-
-**Forbidden phrases.** "Please note that", "Unfortunately", "Oops",
-any sentence starting with "I'm sorry".
-```
-
-### 11. Brand Narrative
-
-**What to write.** The "why" of the brand in under 200 words. Where it came from, what it refuses to be, what category it's trying to move.
-
-**Why agents need it.** Generation quality correlates with contextual depth. An agent that understands Toss is "fintech that rejected institutional-blue formality for an optimistic cerulean" will make better color decisions in ambiguous cases than one that only has hex codes.
-
-**Format.**
-
-```markdown
-### 11. Brand Narrative
-
-Toss started in 2015 as a single-feature money-transfer app in a
-Korean banking market dominated by legacy institutions with
-institutional-blue websites, 12-digit account numbers, and Active-X
-plug-ins. Its founding rejection was of that entire aesthetic vocabulary:
-the bright, optimistic blue (#3182f6) was chosen specifically because
-it was **not** the indigo of KB, Shinhan, or Woori.
-
-Toss is not a neo-bank — it's a super-app. The interface is calm
-because the product is complex: one app holds transfers, investments,
-credit scoring, insurance. The design's job is to flatten that
-complexity into one gesture per screen. "Your money is in good hands,
-and we'll make it easy" is the brand's entire ask.
-
-What Toss refuses: the seriousness of legacy finance, the playfulness
-of consumer apps, the data-viz density of Bloomberg. Toss occupies a
-specific middle.
-```
-
-### 12. Principles
-
-**What to write.** 5–10 first-principles rules, each a single sentence, derivable to concrete UI decisions.
-
-**Why agents need it.** When a novel case appears that tokens don't cover, the agent needs a rule to fall back on. "Breathing room for money — financial amounts get 1.5× the surrounding spacing of normal text" tells the agent what to do for a balance screen that wasn't in the component list.
-
-**Format.**
-
-```markdown
-### 12. Principles
-
-1. **Breathing room for money.** Financial amounts get ≥1.5× the
-   surrounding spacing of normal text. A balance at 30px with 32px
-   margins is correct; the same balance at 16px margins looks cheap.
-2. **Progressive density.** Summary screens are spacious; detail
-   screens are dense. The deeper the user goes, the more information
-   per pixel — they've committed to the context.
-3. **One action per screen.** If a screen has two primary buttons, it
-   is two screens.
-4. **Blue is interaction, not decoration.** Toss Blue (#3182f6) only
-   appears where the user can tap. It never decorates.
-5. **Restraint communicates trust.** Shadows are single-layer, pure
-   black, low opacity. No colored shadows, no multi-layer stacks. In
-   finance, visual noise undermines credibility.
-6. **Korean and Latin are co-equal.** Never assume one is primary.
-   Typography stacks, optical weights, tabular numerals all assume
-   both are rendering simultaneously.
-```
-
-### 13. Personas
-
-**What to write.** 2–4 persona sketches, each 3–5 lines. Who the product is for in *concrete* terms — name, age bracket, context of use, the sentence they'd say about it.
-
-**Why agents need it.** Personas ground generated UI in a real use case. A Toss screen designed "for 28-year-old Seongjae who checks his balance on the subway at 8:47am before a meeting" is different from one designed "for the user".
-
-**Format.**
-
-```markdown
-### 13. Personas
-
-**정민 (Jeongmin), 28, Seoul.** Software engineer. Checks balance
-once a day on the subway. Expects the app to open to the balance
-screen and load in <1s. If she has to tap twice to see her money,
-she's already annoyed.
-
-**이선생님 (Mr. Lee), 54, Busan.** Small business owner. Uses Toss
-because his daughter set it up. Primary use: transferring to
-suppliers. Needs one-tap repeat transfer. Distrusts anything that
-looks like an ad. Would uninstall the app before clicking a banner.
-
-**예은 (Yeeun), 21, Daegu.** University student. Toss is her
-primary banking app — she's never used a legacy bank's interface.
-Expects Toss Blue to be "banking blue". If another financial app
-uses cerulean, she assumes it's imitating Toss.
-```
-
-### 14. States
-
-**What to write.** Empty, loading, error, success, skeleton patterns. One paragraph each or a table mapping state × surface → treatment.
-
-**Why agents need it.** The Claude Design prompt says *"Placeholder > bad attempt"* — agents will invent bad states if you don't supply good ones. This section prevents the generic gray-box skeleton and the sad "No data" illustration.
-
-**Format.**
-
-```markdown
-### 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty** | Single line of body-gray text explaining *why* it's empty, plus one suggested action as a secondary button. Never an illustration. Never "No data". |
-| **Loading** | Skeleton screens matching the final layout's block structure at `#f2f4f6` (grey100). No spinners on primary surfaces. Spinners only inside already-pressed buttons. |
-| **Error (inline)** | `#f04452` (red500) border, error text below in `red500` 13px. One actionable sentence. Never "An error occurred." |
-| **Error (toast)** | `#191f28` background, white text, 3-second auto-dismiss. One sentence. No icons. |
-| **Success** | Brief flash of `#e8f3ff` (blue50) background behind the updated element, 300ms fade to default. No toast for routine actions. |
-| **Skeleton** | Grey100 blocks at exact final dimensions. 1.2s shimmer at `linear-gradient` with 8% white highlight. Never on financial amounts — those show `--` until loaded. |
-```
-
-### 15. Motion & Easing
-
-**What to write.** Duration scale, easing functions by intent (enter / exit / attention / microinteraction), and one or two signature motions.
-
-**Why agents need it.** Motion is the one dimension Google's 9 sections don't cover. Without named durations and easings, agents produce either no motion or Material Design defaults — neither is "on-brand".
-
-**Format.**
-
-```markdown
-### 15. Motion & Easing
-
-**Durations** (named, not raw milliseconds):
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | State changes that should feel immediate (toggle flips) |
-| `motion-fast` | 150ms | Micro-interactions — hover, focus, small reveals |
-| `motion-standard` | 250ms | The default — sheet opens, page transitions, card expands |
-| `motion-slow` | 400ms | Emphasized transitions — success checkmarks, onboarding |
-| `motion-page` | 600ms | Full-screen transitions between top-level sections |
-
-**Easings:**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — fast start, settle |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — slow start, accelerate out |
-| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions |
-| `ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Delightful overshoot — confirmations, achievement states |
-
-**Signature motions.**
-
-1. **Money-moves.** When a balance updates, the old number slides
-   up 20px and fades out (`motion-fast / ease-exit`), the new number
-   slides in from below 20px (`motion-standard / ease-enter`). Never
-   cross-fade money.
-2. **Sheet presentation.** Bottom sheets rise from y+40px with
-   `motion-standard / ease-enter` and a synchronized backdrop
-   fade-in. Dismissal uses `motion-fast / ease-exit`.
-3. **Reduce motion.** If `prefers-reduced-motion: reduce`, all
-   `motion-*` tokens collapse to `motion-instant`. No exceptions.
-```
-
----
-
-## 4. Consumption contract — what agents must do
-
-An AI coding agent that loads an OmD-compliant `DESIGN.md` is expected to:
-
-1. **Parse frontmatter.** If `omd: 0.1` is present, load sections 10–15 as authoritative brand context *before* generating any UI.
-2. **Treat section 12 (Principles) as constraints.** A generated component that violates a principle must be regenerated, not shipped.
-3. **Treat section 10 (Voice & Tone) as microcopy source.** Generated button labels, error messages, and empty states MUST match the voice spec. Never invent a tone.
-4. **Treat section 14 (States) as the default.** Do not generate ad-hoc empty/error states. Use the table.
-5. **Apply section 15 (Motion) tokens.** If the framework exposes transition APIs, wire them to the named tokens.
-6. **Fail loud on missing sections.** If a required section (1–5) is missing, the agent should refuse to generate and surface the specific gap to the user.
-7. **Do not hallucinate across sections.** A value not declared in the file is not authorized to be used.
-
-This contract is what makes OmD a *spec* rather than a template. The file is readable by humans and parseable by tools, but its primary consumer is an LLM that needs explicit constraints to produce on-brand output.
-
----
-
-## 5. Compatibility
-
-| Tool | Support | Notes |
-|---|---|---|
-| Google Stitch | ✅ Base 1–9 | OmD files are valid Stitch inputs. Sections 10–15 are ignored as unknown. |
-| Claude Code | ✅ via `.claude/skills/omd/` | See OmD repo for the skill bundle. Once installed, `DESIGN.md` at project root is auto-consumed. |
-| Cursor | ✅ Base 1–9 | Add `DESIGN.md` to `.cursor/rules/` for lazy loading. |
-| Gemini CLI / Antigravity | ✅ Base 1–9 | Reads root `DESIGN.md` natively. |
-| Copilot | ⚠ Partial | Reads root `DESIGN.md` if present; sections 10–15 support depends on extension. |
-| VoltAgent/awesome-design-md | ✅ Base 1–9 | OmD files can be contributed as-is; philosophy layer is additive. |
-
----
-
-## 6. Versioning policy
-
-- **Minor versions (0.1 → 0.2)** may add new recommended sections or new required fields inside existing sections. Files at version N continue to validate at version N+minor.
-- **Major versions (0.x → 1.0, 1.x → 2.0)** may make previously recommended sections required, or reshape the section tree. A major bump will always ship with a migration guide.
-- **Patch versions (0.1.0 → 0.1.1)** are documentation and anti-pattern list updates only. No schema change.
-- Files declare the exact version they target (`omd: 0.1`). An agent MAY parse newer versions with best-effort, but MUST NOT fail a v0.1 file for lacking a v0.2 section.
-
----
-
-## 7. Open questions for v0.2
-
-These are intentionally left out of v0.1 to keep the first version small:
-
-- **Data-viz primitives** — chart palette, axis rules, annotation patterns. Too domain-specific for v0.1; may become a separate companion spec.
-- **i18n / RTL** — locale-specific typography stacks, mirroring rules. v0.2 candidate.
-- **Accessibility contract** — WCAG target declaration, contrast thresholds, focus-ring tokens. Currently lives inside section 4 as ad-hoc notes; v0.2 will hoist it.
-- **Iconography system** — icon family, weight, optical sizing. Partial coverage in section 4; v0.2 may promote.
-
-Feedback on which of these should be required in v0.2 is welcome.
-
----
-
-## 8. JSON Schema (informative)
-
-A non-normative JSON Schema for the file's section skeleton:
-
-```json
-{
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "title": "OmD DESIGN.md section manifest",
-  "type": "object",
-  "required": ["omd", "brand", "sections"],
-  "properties": {
-    "omd": { "type": "string", "pattern": "^0\\.\\d+(\\.\\d+)?$" },
-    "brand": { "type": "string" },
-    "sections": {
-      "type": "object",
-      "required": [
-        "visual_theme",
-        "color_palette",
-        "typography",
-        "components",
-        "layout"
-      ],
-      "properties": {
-        "visual_theme":        { "type": "string" },
-        "color_palette":       { "type": "string" },
-        "typography":          { "type": "string" },
-        "components":          { "type": "string" },
-        "layout":              { "type": "string" },
-        "depth":               { "type": "string" },
-        "dos_and_donts":       { "type": "string" },
-        "responsive":          { "type": "string" },
-        "agent_prompt_guide":  { "type": "string" },
-        "voice_and_tone":      { "type": "string" },
-        "brand_narrative":     { "type": "string" },
-        "principles":          { "type": "string" },
-        "personas":            { "type": "string" },
-        "states":              { "type": "string" },
-        "motion":              { "type": "string" }
-      }
-    }
-  }
-}
-```
-
-This is informative rather than normative — the file's authoritative form is the markdown document. The schema exists as a target for future tooling (`omd validate`).
-
----
-
-## 9. Credits
-
-OmD v0.1 builds on:
-
-- [Google Stitch DESIGN.md](https://stitch.withgoogle.com/docs/design-md/overview/) for sections 1–9.
-- [Anthropic Claude Design](https://claude.com/claude) for the architectural principle that brand context, not tokens, is what agents most lack — sections 10–15 exist to supply that context.
-- [Anthropic `frontend-design` skill](https://github.com/anthropics/skills) for the anti-slop list informing section 2's conventions.
-- [VoltAgent awesome-design-md](https://github.com/VoltAgent/awesome-design-md) for demonstrating the demand for a community-curated library of DESIGN.md files.
-
-OmD is MIT-licensed and openly contributable. File issues and PRs at <https://github.com/kwakseongjae/oh-my-design>.
-
-
-===========================================================
-# Bundled reference brand catalog
-===========================================================
-
-- **11st** — 11st (11번가) is one of Korea's largest open-market e-commerce platforms, and its homepage is built for one job: get a shopper from a vast, dense catalog to a purchase decision as fast as possible. The  · raw: https://oh-my-design.kr/design-systems/11st.md
-- **17live** — 17LIVE is one of the world's largest live-streaming and interactive-entertainment platforms — a place where a "LIVER" (17LIVE's word for a livestreamer) broadcasts to fans who react in real time with  · raw: https://oh-my-design.kr/design-systems/17live.md
-- **29cm** — 29CM is the editorial select-shop of Korean e-commerce — a curated department store that happens to live online, whose homepage reads more like the cover of a printed lookbook than the landing page of · raw: https://oh-my-design.kr/design-systems/29cm.md
-- **3o3** — 삼쩜삼 (3o3) is Korea's mass-market tax-refund platform — the app that turned the dreaded 종합소득세 filing into a two-tap "find my hidden money" ritual for over seven million filers — and its visual system i · raw: https://oh-my-design.kr/design-systems/3o3.md
-- **91app** — 91APP carries the composure of retail infrastructure built to be trusted at scale — the brand of Taiwan's leading omnichannel OMO (online-merge-offline) commerce SaaS. Its identity rests on a deep str · raw: https://oh-my-design.kr/design-systems/91app.md
-- **abema** — ABEMA is Japan's "new future of television" — a free, ad-supported linear-streaming hybrid from CyberAgent — and its interface is one of the most committed dark-surface systems in consumer streaming.  · raw: https://oh-my-design.kr/design-systems/abema.md
-- **ably** — Ably (에이블리) is Korea's MZ-generation style commerce platform — a mobile-native shopping app run by Ably Corporation (에이블리코퍼레이션, founded 2018 by Kang Suk-hoon / 강석훈). The brand pitches itself as "취향 중심 · raw: https://oh-my-design.kr/design-systems/ably.md
-- **accupass** — Accupass (活動通) is Taiwan's largest event-discovery and ticketing platform, and its design reads as a bright, busy, optimistic marketplace rather than a polished brand statement. The interface lives on · raw: https://oh-my-design.kr/design-systems/accupass.md
-- **adobe** — Adobe's web presence is a study in letting the work shout while the chrome whispers. The homepage is an almost monochrome frame — pure white (`#ffffff`) canvas, black (`#000000`) text, white-on-dark n · raw: https://oh-my-design.kr/design-systems/adobe.md
-- **airbnb** — Airbnb's website is a warm, photography-forward marketplace that feels like flipping through a travel magazine where every page invites you to book. The design operates on a foundation of pure white ( · raw: https://oh-my-design.kr/design-systems/airbnb.md
-- **airtable** — Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the pri · raw: https://oh-my-design.kr/design-systems/airtable.md
-- **alipay** — Alipay (支付宝) is the payments and lifestyle super-app at the center of Ant Group, and its design legacy is outsized: the team that builds Alipay's enterprise and merchant tooling also created **Ant Des · raw: https://oh-my-design.kr/design-systems/alipay.md
-- **amazingtalker** — AmazingTalker is a Taiwanese language-learning marketplace, and its design speaks the language of friendly, approachable confidence rather than institutional gravity. The page opens on a clean white c · raw: https://oh-my-design.kr/design-systems/amazingtalker.md
-- **appier** — Appier is a Taiwan-founded, Tokyo-listed enterprise AI company — its software helps businesses "turn AI into ROI" through marketing, personalization, and data clouds — and its design system carries th · raw: https://oh-my-design.kr/design-systems/appier.md
-- **apple** — Apple's website is a masterclass in controlled drama — vast expanses of pure black and near-white serve as cinematic backdrops for products that are photographed as if they were sculptures in a galler · raw: https://oh-my-design.kr/design-systems/apple.md
-- **baemin** — Baemin is Korea's beloved food delivery platform -- a brand that turned ordering takeout into a cultural experience through typography, humor, and a fiercely distinctive mint green. The interface open · raw: https://oh-my-design.kr/design-systems/baemin.md
-- **banksalad** — Banksalad (뱅크샐러드) is the design language of a **trustworthy financial advisor that runs on data, not optimism**. Where Toss flattens money into one cheerful gesture and KakaoPay wraps it in Kakao yell · raw: https://oh-my-design.kr/design-systems/banksalad.md
-- **bilibili** — Bilibili (哔哩哔哩, affectionately "B站" — "B-site") is China's home of ACG culture — anime, comics, and games — and the video community where a generation grew up, and its design wears that identity on it · raw: https://oh-my-design.kr/design-systems/bilibili.md
-- **bithumb** — Bithumb wears the aesthetic of money taken seriously: a dark, premium, data-dense trading surface built on a near-black structural base of #1C2028, warmed in carefully chosen places by a bronze/brown  · raw: https://oh-my-design.kr/design-systems/bithumb.md
-- **bmw** — BMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (f · raw: https://oh-my-design.kr/design-systems/bmw.md
-- **brandi** — Brandi (브랜디) is a Korean fashion commerce platform whose web and app surfaces read as fast, image-forward, and unapologetically commercial. The page lives on a pure white canvas (`#ffffff`) where near · raw: https://oh-my-design.kr/design-systems/brandi.md
-- **bunjang** — Bunjang is what happens when Korea's first generation of mobile flea-market sellers — high-school sneakerheads, K-pop merch traders, used-iPhone flippers — grow up and demand an interface that respect · raw: https://oh-my-design.kr/design-systems/bunjang.md
-- **cakeresume** — Cake is a Taiwan-built global talent network — formerly CakeResume — that bundles job search, an AI resume and portfolio builder, and recruiting SaaS into one optimistic surface. The atmosphere is cle · raw: https://oh-my-design.kr/design-systems/cakeresume.md
-- **cal** — Cal.com's website is a masterclass in monochromatic restraint — a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's min · raw: https://oh-my-design.kr/design-systems/cal.md
-- **catchtable** — CatchTable is Korea's premier restaurant-reservation platform — a service that lets diners book hotel buffets, sushi omakase, and hanwoo tasting menus with the same calm as flipping through a magazine · raw: https://oh-my-design.kr/design-systems/catchtable.md
-- **cathay** — Cathay United Bank (國泰世華銀行) presents the calm, dependable face of one of Taiwan's largest financial groups — and its digital design reflects exactly that institutional weight, rendered with surprising · raw: https://oh-my-design.kr/design-systems/cathay.md
-- **channeltalk** — Channel Talk's marketing surface (`channel.io`) reads as a confident **B2B customer-service messenger** that has openly bet the company on the AI-agent shift. The page operates on a near-white canvas  · raw: https://oh-my-design.kr/design-systems/channeltalk.md
-- **class101** — Class101 is Korea's leading online-class subscription platform — "세상의 모든 클래스를 하나의 구독으로" (every class in the world, in one subscription). It built its name on creator-led hobby and skill classes (drawi · raw: https://oh-my-design.kr/design-systems/class101.md
-- **classting** — AI-powered K–12 education platform from Korea that connects teachers, students, and parents through personalized learning powered by adaptive diagnostics. · raw: https://oh-my-design.kr/design-systems/classting.md
-- **classum** — Classum is a Seoul-built EdTech platform for universities and corporate L&D, and its marketing surface treats the screen the way a good classroom treats a whiteboard — quiet canvas, structured columns · raw: https://oh-my-design.kr/design-systems/classum.md
-- **claude** — Claude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (`#f5f4ed`) that deliberatel · raw: https://oh-my-design.kr/design-systems/claude.md
-- **clay** — Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrou · raw: https://oh-my-design.kr/design-systems/clay.md
-- **clickhouse** — ClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black — a design that screams "speed" before you read a single word. The entire experience lives in darkn · raw: https://oh-my-design.kr/design-systems/clickhouse.md
-- **cloudflare** — Cloudflare is the connectivity-cloud company that sits in front of a meaningful slice of the internet — CDN, DNS, DDoS mitigation, Zero Trust, Workers edge compute. Its visual identity has one job: ma · raw: https://oh-my-design.kr/design-systems/cloudflare.md
-- **cohere** — Cohere's interface is a polished enterprise command deck — confident, clean, and designed to make AI feel like serious infrastructure rather than a consumer toy. The experience lives on a bright white · raw: https://oh-my-design.kr/design-systems/cohere.md
-- **coinbase** — Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturate · raw: https://oh-my-design.kr/design-systems/coinbase.md
-- **coinone** — Coinone is one of Korea's longest-running cryptocurrency exchanges (est. 2014). Its product face pairs a trustworthy, institutional blue with a clean, high-density trading surface — a fintech tone tha · raw: https://oh-my-design.kr/design-systems/coinone.md
-- **composio** — Composio's interface is a nocturnal command center — a dense, developer-focused darkness punctuated by electric cyan and deep cobalt signals. The entire experience is built on an almost-pure-black can · raw: https://oh-my-design.kr/design-systems/composio.md
-- **cookpad** — Cookpad (クックパッド) is Japan's dominant recipe-sharing platform — used by more than half the country's population at least once a month — and its visual identity is built to feel like a **warm, well-lit  · raw: https://oh-my-design.kr/design-systems/cookpad.md
-- **coupang** — Coupang's interface is the digital equivalent of a hyper-efficient Korean discount warehouse — every pixel earns its rent by surfacing a price, a delivery promise, or a deal. The page opens on a clean · raw: https://oh-my-design.kr/design-systems/coupang.md
-- **cursor** — Cursor's website is a study in warm minimalism meets code-editor elegance. The entire experience is built on a warm off-white canvas (`#f2f1ed`) with dark warm-brown text (`#26251e`) -- not pure black · raw: https://oh-my-design.kr/design-systems/cursor.md
-- **dabang** — Dabang's web product reads like a working tool that does not want to be looked at too long. The home surface is white, the map surface is whiter, and the chrome between them is a near-black `#222` neu · raw: https://oh-my-design.kr/design-systems/dabang.md
-- **danawa** — Danawa (다나와) is Korea's original price-comparison commerce platform, and its interface is the antithesis of the airy, whitespace-luxurious fintech aesthetic — it is a dense, utilitarian information ma · raw: https://oh-my-design.kr/design-systems/danawa.md
-- **dcard** — Dcard is Taiwan's largest anonymous social platform — and its design system is an exemplar of **Material Design adapted for East-Asian forum culture**. The page chrome is wrapped in a deep teal-navy ( · raw: https://oh-my-design.kr/design-systems/dcard.md
-- **dell** — Dell is one of the world's largest hardware makers, and its digital surfaces carry the weight of that scale: a global commerce engine selling laptops, monitors, servers, and workstations to consumers, · raw: https://oh-my-design.kr/design-systems/dell.md
-- **devsisters** — Korean game company behind the Cookie Run franchise — building joyful, globally loved play experiences since 2007. · raw: https://oh-my-design.kr/design-systems/devsisters.md
-- **discord** — Discord is the place where communities hang out, and its interface is built to feel like a clubhouse, not an enterprise tool. The product UI lives almost entirely in dark mode by default — deep slate- · raw: https://oh-my-design.kr/design-systems/discord.md
-- **dji** — DJI (大疆创新) is the company that turned the consumer drone into a category, and its digital design carries the same conviction its hardware does — that the most advanced engineering deserves the quietes · raw: https://oh-my-design.kr/design-systems/dji.md
-- **drnow** — Korea's #1 telemedicine platform — making medical care instantly accessible, any hour of the day. · raw: https://oh-my-design.kr/design-systems/drnow.md
-- **dropbox** — Dropbox's marketing surface reads like a warm editorial workspace rather than a sterile SaaS dashboard. The canvas is not white but **Coconut** — a warm cream (`#f7f5f2`) that the official brand site  · raw: https://oh-my-design.kr/design-systems/dropbox.md
-- **duolingo** — Duolingo is the world's most-downloaded education app, and its interface is engineered to feel less like studying and more like a game you can't put down. The brand's whole thesis is that learning sho · raw: https://oh-my-design.kr/design-systems/duolingo.md
-- **elevenlabs** — ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#ffffff`, `#f5f5f5`) where typography and subtle shadows do all the heavy lifting. The design feels like a premium audio p · raw: https://oh-my-design.kr/design-systems/elevenlabs.md
-- **expo** — Expo's interface is a luminous, confidence-radiating developer platform built on the premise that tools for building apps should feel as polished as the apps themselves. The entire experience lives on · raw: https://oh-my-design.kr/design-systems/expo.md
-- **fastcampus** — Fastcampus (패스트캠퍼스) is the design language of a **Korean adult-upskilling marketplace that competes on density, momentum, and rich-color play** — a deliberately louder register than Inflearn's calm-mi · raw: https://oh-my-design.kr/design-systems/fastcampus.md
-- **ferrari** — Ferrari's website is a digital editorial — a curated magazine where the Prancing Horse brand is presented with the gravitas of an art institution and the precision of Italian coachwork. The page opens · raw: https://oh-my-design.kr/design-systems/ferrari.md
-- **figma** — Figma's interface is the design tool that designed itself — a masterclass in typographic sophistication where a custom variable font (figmaSans) modulates between razor-thin (weight 320) and bold (wei · raw: https://oh-my-design.kr/design-systems/figma.md
-- **finda** — Finda (핀다) is Korea's design-forward loan-comparison fintech, and its homepage reads like a calm, editorial financial product rather than a hard-sell lending site. The canvas is pure white (`#ffffff`) · raw: https://oh-my-design.kr/design-systems/finda.md
-- **firstory** — Firstory is Taiwan's leading podcast-hosting SaaS, and its marketing surface reads like a warm, creator-friendly studio rather than an enterprise audio tool. The canvas is a warm off-white (`#fbfaf9`) · raw: https://oh-my-design.kr/design-systems/firstory.md
-- **flex** — **flex** is a Korean HR SaaS targeting mid-market and enterprise teams (founded 2019-05, Seongnam HQ, Series B, ~213 employees as of 2026-03). The product unifies employee management, attendance, cont · raw: https://oh-my-design.kr/design-systems/flex.md
-- **flo** — FLO (플로) is South Korea's music streaming platform operated by Dreamus Company, offering 120 million tracks with deep personalization and AI-driven discovery. · raw: https://oh-my-design.kr/design-systems/flo.md
-- **framer** — Framer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a w · raw: https://oh-my-design.kr/design-systems/framer.md
-- **freee** — freee is Japan's leading cloud accounting / HR / payroll SaaS, and its design system **Vibes** is fully open-source at [github.com/freee/vibes](https://github.com/freee/vibes). The token files (`style · raw: https://oh-my-design.kr/design-systems/freee.md
-- **fugle** — Taiwan's visual-first stock research and trading platform, built by investors for serious investors. · raw: https://oh-my-design.kr/design-systems/fugle.md
-- **funnow** — FunNow is Taiwan's on-demand "go out tonight" booking platform, and its web surface looks exactly like what it is: a fast, inventory-dense marketplace built on Material Design plumbing. The page sits  · raw: https://oh-my-design.kr/design-systems/funnow.md
-- **gangnamunni** — 강남언니's web surface is the rare medical platform that reads as warm rather than clinical. The page opens on pure white (`#ffffff`) with deep blue-gray text (`#131517` — `--cell-base-color-bluegray-900` · raw: https://oh-my-design.kr/design-systems/gangnamunni.md
-- **genie** — Genie Music (지니뮤직) is a Korean music-streaming service whose web surface reads as a dense, utilitarian catalog rather than a glossy marketing site — and that density is the point. The page opens on a  · raw: https://oh-my-design.kr/design-systems/genie.md
-- **github** — GitHub is the home of the world's software, and its interface reflects a deliberate engineering aesthetic: precise, legible, and quietly confident. The product surface is built on **Primer**, GitHub's · raw: https://oh-my-design.kr/design-systems/github.md
-- **gmarket** — Gmarket is what a quarter-century-old Korean open-market looks like after Shinsegae's 2021 acquisition: a department-store conglomerate has bought a Y2K-era trading floor and is mid-renovation, but th · raw: https://oh-my-design.kr/design-systems/gmarket.md
-- **gogolook** — Gogolook is the Taiwan TrustTech company behind Whoscall, the caller-ID and anti-scam app, and its design speaks in the language of friendly, reassuring consumer safety rather than cold enterprise sec · raw: https://oh-my-design.kr/design-systems/gogolook.md
-- **gogoro** — Gogoro is Taiwan's electric-mobility company — the maker of the Smartscooter and the GoStation battery-swap network — and its design language is the rarest kind: a hardware brand that earns its digita · raw: https://oh-my-design.kr/design-systems/gogoro.md
-- **google** — Google's visual language is the most widely deployed design system on earth — Material Design 3 operating at brand scale — yet its flagship surface remains radically empty: a pure white (`#ffffff`) ca · raw: https://oh-my-design.kr/design-systems/google.md
-- **greenvines** — Greenvines (綠藤生機) is Taiwan's flagship clean-beauty brand, and its site reads like a botanical manifesto typeset by a luxury magazine. The canvas is pure white (`#ffffff`), but the system's soul is a  · raw: https://oh-my-design.kr/design-systems/greenvines.md
-- **greeting** — Greeting (그리팅) is Korea's self-described #1 recruitment-management SaaS — an applicant-tracking system (ATS) built by the operator 두들린 (Doodlin) — and its marketing surface reads like a confident, ent · raw: https://oh-my-design.kr/design-systems/greeting.md
-- **grip** — Korea's first live commerce platform — a mobile-first video shopping app where sellers and buyers connect in real time through livestreams, chat, and exclusive in-broadcast deals. · raw: https://oh-my-design.kr/design-systems/grip.md
-- **hahow** — Hahow (好學校) is Taiwan's leading EdTech course marketplace, and its interface carries the warmth of a place that wants you to keep learning rather than the polish of a place that wants to close a sale. · raw: https://oh-my-design.kr/design-systems/hahow.md
-- **hashicorp** — HashiCorp's website is enterprise infrastructure made tangible — a design system that must communicate the complexity of cloud infrastructure management while remaining approachable. The visual langua · raw: https://oh-my-design.kr/design-systems/hashicorp.md
-- **hogangnono** — Korea's #1 apartment real-estate transparency platform — map-first, data-honest, free of paid-listing distortion. · raw: https://oh-my-design.kr/design-systems/hogangnono.md
-- **hp** — HP is one of the founding companies of Silicon Valley, and its digital surfaces carry that legacy with a deliberate, engineered calm. The hp.com experience opens on bright white (`#ffffff`) with near- · raw: https://oh-my-design.kr/design-systems/hp.md
-- **hyperconnect** — Hyperconnect's corporate site reads as a confident, globally-minded engineering company that happens to build social video at planetary scale. The atmosphere is bright, clean, and editorial: large str · raw: https://oh-my-design.kr/design-systems/hyperconnect.md
-- **hyundaicard** — Hyundai Card is Korea's most design-celebrated credit-card brand, and its visual identity is an exercise in disciplined restraint: monochrome premium minimalism built almost entirely from ink black (# · raw: https://oh-my-design.kr/design-systems/hyundaicard.md
-- **ibm** — IBM's website is the digital embodiment of enterprise authority built on the Carbon Design System — a design language so methodically structured it reads like an engineering specification rendered as  · raw: https://oh-my-design.kr/design-systems/ibm.md
-- **ichef** — iCHEF is an award-winning iPad-based restaurant point-of-sale system born in a Taipei beef-noodle shop, and its design system reflects a rare dual identity: it must look **trustworthy enough to run a  · raw: https://oh-my-design.kr/design-systems/ichef.md
-- **ikala** — iKala's website presents itself as a clean, corporate-confident B2B AI and martech platform built for the Asia-Pacific enterprise buyer. The page opens on a pure white canvas (`#ffffff`) with a restra · raw: https://oh-my-design.kr/design-systems/ikala.md
-- **imweb** — Imweb (아임웹) is Korea's leading no-code website builder and commerce platform, and its marketing surface reads like the product promise itself: clean, friendly, and deliberately easy. The canvas is pur · raw: https://oh-my-design.kr/design-systems/imweb.md
-- **inflearn** — Inflearn (인프런) is the design language of a **Korean lifelong-learning marketplace that wants to feel like a friendly bookshop, not a corporate LMS**. Where Coursera leans on muted academic blues and U · raw: https://oh-my-design.kr/design-systems/inflearn.md
-- **intercom** — Intercom's website is a warm, confident customer service platform that communicates "AI-first helpdesk" through a clean, editorial design language. The page operates on a warm off-white canvas (`#faf9 · raw: https://oh-my-design.kr/design-systems/intercom.md
-- **jandi** — JANDI (잔디) is the Korean business-collaboration messenger built by TossLab, and its website carries the calm, trustworthy confidence of a productivity tool that lives in offices all day. The page open · raw: https://oh-my-design.kr/design-systems/jandi.md
-- **jkopay** — Taiwan's most widely used electronic payment platform, positioning itself as a full-spectrum fintech lifestyle companion — not just a wallet, but the infrastructure for daily life. · raw: https://oh-my-design.kr/design-systems/jkopay.md
-- **jobkorea** — South Korea's leading AI career platform connecting 9+ million active job seekers with employers through personalized matching, salary intelligence, and community-driven career guidance. · raw: https://oh-my-design.kr/design-systems/jobkorea.md
-- **jumpit** — Jumpit (점핏) is the developer-only recruitment channel run by **Saramin HR** (사람인HR, KOSDAQ 143240) — a separate brand spun out so that engineering hiring would not share chrome with the parent's gener · raw: https://oh-my-design.kr/design-systems/jumpit.md
-- **kakao** — Kakao is the connective tissue of Korean digital life -- KakaoTalk is on virtually every smartphone in the country, and the iconic yellow is as recognizable as any global tech brand's signature. The i · raw: https://oh-my-design.kr/design-systems/kakao.md
-- **kakaobank** — KakaoBank is what happens when a messenger company decides retail banking should feel like a chat thread, not a teller window. Korea's first internet-only bank (launched 2017-07-27) carries the warmth · raw: https://oh-my-design.kr/design-systems/kakaobank.md
-- **kakaopay** — KakaoPay's design occupies the warm, friendly end of the Korean fintech spectrum — where Toss is bold and assertively spacious, KakaoPay is soft and conversationally legible. The web home opens with a · raw: https://oh-my-design.kr/design-systems/kakaopay.md
-- **kakaot** — Kakao T is the all-in-one mobility app from Kakao Mobility — taxi, designated-driver (대리운전), parking, bike, navigation, flights, and quick-delivery, all behind one yellow "T". Its visual identity sits · raw: https://oh-my-design.kr/design-systems/kakaot.md
-- **karrot** — Karrot's interface is the digital equivalent of a friendly neighborhood bulletin board -- warm, approachable, and built for trust between strangers. The page opens on a clean white canvas (`#ffffff`)  · raw: https://oh-my-design.kr/design-systems/karrot.md
-- **kbank** — K bank reads as a **regulated bank that happens to be app-native**, not a fintech wearing a bank licence. The visual signal is conservative, the IA is product-catalog-first, and the language defaults  · raw: https://oh-my-design.kr/design-systems/kbank.md
-- **kdan** — Kdan Mobile presents itself as bold, modern, and developer-credible document software, the kind of digital-workflow SaaS that signs contracts and ships SDKs without losing its sense of energy. The atm · raw: https://oh-my-design.kr/design-systems/kdan.md
-- **kintone** — kintone is Cybozu's no-code/low-code work platform — the tool a non-engineer reaches for when they want to turn a messy spreadsheet and an email thread into a real business application. Its design lan · raw: https://oh-my-design.kr/design-systems/kintone.md
-- **kkbox** — KKBOX wraps its interface in a near-black, cinematic canvas where the music itself feels like the source of light. The ground is a deep #111111 that recedes into the background, letting album art, her · raw: https://oh-my-design.kr/design-systems/kkbox.md
-- **kkday** — KKday is a Taiwan-born online travel marketplace — the place a traveler books a tea-ceremony in Kyoto, a SIM card for Bangkok, or a high-speed-rail pass before a trip — and its design system is built  · raw: https://oh-my-design.kr/design-systems/kkday.md
-- **kmong** — Kmong (크몽) is Korea's largest freelance and skill marketplace, and its homepage reads exactly like what it is: a high-trust, high-volume transaction surface designed to move a buyer from "I have a pro · raw: https://oh-my-design.kr/design-systems/kmong.md
-- **krafton** — KRAFTON is a South Korean game publisher and developer whose digital identity is built entirely in monochrome — deep black surfaces carry white type and logotypes while a proprietary KRAFTON typeface, · raw: https://oh-my-design.kr/design-systems/krafton.md
-- **kraken** — Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) c · raw: https://oh-my-design.kr/design-systems/kraken.md
-- **krds** — KRDS는 대한민국 행정·공공기관 웹·앱이 공유하는 정부 표준 디자인 시스템입니다. 화면은 마케팅 브랜드가 아니라 **공공 서비스의 도구**처럼 보이도록 설계되었습니다 — 순백 배경(`#ffffff`) 위에 거의 검정에 가까운 본문(`#1E2124`), 그리고 신뢰감을 주는 정부 블루(`#256EF4`)가 단 하나의 강조색으로 작동합니다. 강조색은 그래픽  · raw: https://oh-my-design.kr/design-systems/krds.md
-- **kream** — KREAM is Korea's limited-edition resale marketplace — a Naver-backed exchange where sneaker drops, luxury rotation, and hype-watch trading happen on a chrome that is, deliberately, almost without colo · raw: https://oh-my-design.kr/design-systems/kream.md
-- **kurly** — Kurly's interface is the digital equivalent of a curator's grocer -- a quiet white-and-cream gallery wall where the only saturated thing in the room is one deep, editorial purple. The page opens on a  · raw: https://oh-my-design.kr/design-systems/kurly.md
-- **laftel** — Korea's largest anime streaming platform — a dual-mode (light/dark) product built around a vivid purple identity, fan-curated discovery, and legal access to Japan's animation catalog. · raw: https://oh-my-design.kr/design-systems/laftel.md
-- **lamborghini** — Lamborghini's website is a cathedral of darkness — a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is alm · raw: https://oh-my-design.kr/design-systems/lamborghini.md
-- **laundrygo** — LaundryGo (런드리고), the flagship contactless mobile-laundry service of 의식주컴퍼니 (Uisikju Company), presents a clean, confident, infrastructure-grade brand surface. The canvas is pure white (`#ffffff`) bro · raw: https://oh-my-design.kr/design-systems/laundrygo.md
-- **layerx** — LayerX is a Tokyo-based "compound startup" whose mission — *すべての経済活動を、デジタル化する* ("digitize all economic activity") — sets the tone for a design language that is at once corporate-trustworthy and quietl · raw: https://oh-my-design.kr/design-systems/layerx.md
-- **lezhin** — Korea's first premium webtoon platform — bold, content-first, and unapologetically direct. · raw: https://oh-my-design.kr/design-systems/lezhin.md
-- **line** — LINE is the messaging platform that anchors daily life across Japan, Taiwan, Thailand, and Indonesia, and its visual identity reflects exactly that role — confident, friendly, instantly recognizable.  · raw: https://oh-my-design.kr/design-systems/line.md
-- **linear.app** — Linear's website is a masterclass in dark-mode-first product design — a near-black canvas (`#08090a`) where content emerges from darkness like starlight. The overall impression is one of extreme preci · raw: https://oh-my-design.kr/design-systems/linear.app.md
-- **loom** — Loom's website projects the friendly confidence of a consumer-grade tool that quietly does serious work. The canvas is pure white (`#ffffff`) with near-black ink (`#101214`) for headlines and a softer · raw: https://oh-my-design.kr/design-systems/loom.md
-- **lovable** — Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (`#f7f4ed`) that immediately separates it from the cold-white conventions of most deve · raw: https://oh-my-design.kr/design-systems/lovable.md
-- **lunit** — Lunit (루닛) is the design language of a **medical AI company that wants to be read like a journal article, not sold like a SaaS**. Where most healthcare-AI marketing leans into either soft-pastel reass · raw: https://oh-my-design.kr/design-systems/lunit.md
-- **mastercard** — Mastercard is one of the most recognized brands on earth, and its design language is built around a single, indelible asset: the two interlocking circles. Red (`#EB001B`) on the left, yellow-orange (` · raw: https://oh-my-design.kr/design-systems/mastercard.md
-- **meituan** — Meituan (美团) is China's everything-local super-app — food delivery, restaurant reviews, hotel and travel booking, group-buying deals, grocery, bike-share, and dozens of other on-demand services — and  · raw: https://oh-my-design.kr/design-systems/meituan.md
-- **melon** — Melon is Korea's dominant music-streaming service, operated by Kakao Entertainment, and its interface wears that scale on its sleeve: a dense, white, content-first surface where charts, lists, and pla · raw: https://oh-my-design.kr/design-systems/melon.md
-- **mercari** — Mercari is Japan's largest C2C marketplace (50M+ downloads, 350K daily listings) and its design system is a textbook example of **mature semantic token architecture**. The production site at `jp.merca · raw: https://oh-my-design.kr/design-systems/mercari.md
-- **mercury** — Mercury is banking built for startups, and its interface carries the quiet confidence of software made by people who care about craft. The brand refuses the two dominant fintech clichés at once: it is · raw: https://oh-my-design.kr/design-systems/mercury.md
-- **meta** — Meta is the rebrand of Facebook, Inc. into a company organized around connection across the social graph, devices, and the immersive web. Where the old Facebook interface was a wall of utilitarian `#1 · raw: https://oh-my-design.kr/design-systems/meta.md
-- **microsoft** — Microsoft's web presence is the consumer face of Fluent 2 — a calm, photographic, blue-anchored system that has to sell laptops, game consoles, AI assistants, and cloud subscriptions in one continuous · raw: https://oh-my-design.kr/design-systems/microsoft.md
-- **millie** — Millie's Library is Korea's largest reading-subscription service, and its interface behaves like a calm digital bookshelf -- a content storefront where book covers are the color and everything else st · raw: https://oh-my-design.kr/design-systems/millie.md
-- **minimax** — MiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white · raw: https://oh-my-design.kr/design-systems/minimax.md
-- **mintlify** — Mintlify's website is a study in documentation-as-product design — a white, airy, information-rich surface that treats clarity as its highest aesthetic value. The page opens with a luminous white (`#f · raw: https://oh-my-design.kr/design-systems/mintlify.md
-- **miricanvas** — MiriCanvas (미리캔버스) is Korea's mass-market web design tool — the "design for everyone" answer to Canva — and its marketing surface reads exactly like its promise: bright, frictionless, and unintimidati · raw: https://oh-my-design.kr/design-systems/miricanvas.md
-- **miro** — Miro's website is a clean, collaborative-tool-forward platform that communicates "visual thinking" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a  · raw: https://oh-my-design.kr/design-systems/miro.md
-- **mistral.ai** — Mistral AI's interface is a sun-drenched landscape rendered in code — a warm, bold, unapologetically European design that trades the typical blue-screen AI aesthetic for golden amber, burnt orange, an · raw: https://oh-my-design.kr/design-systems/mistral.ai.md
-- **modusign** — Modusign (모두싸인) is Korea's market-leading e-signature platform, and its marketing surface reads like a confident, conversion-tuned B2B SaaS site that has chosen warmth over corporate chill. The canvas · raw: https://oh-my-design.kr/design-systems/modusign.md
-- **momoshop** — Taiwan's largest television and digital shopping platform, operated by Fubon Media Technology (富邦媒體科技), combining TV commerce heritage with a modern mobile-first marketplace offering millions of produ · raw: https://oh-my-design.kr/design-systems/momoshop.md
-- **money-forward** — Money Forward (マネーフォワード) is the Japanese fintech that started as a personal household-budgeting app (Money Forward ME) and grew into a full business platform — cloud accounting, invoicing, payroll, an · raw: https://oh-my-design.kr/design-systems/money-forward.md
-- **mongodb** — MongoDB's website is a deep-forest-meets-terminal experience — a design system rooted in the darkest teal-black (`#001e2b`) that evokes both the density of a database and the depth of a forest canopy. · raw: https://oh-my-design.kr/design-systems/mongodb.md
-- **muji** — MUJI — *Mujirushi Ryohin* (無印良品), "no-brand quality goods" — is the rare retailer whose entire visual identity is an argument *against* visual identity. Founded in 1980 as a product line inside the Se · raw: https://oh-my-design.kr/design-systems/muji.md
-- **musinsa** — Musinsa's interface is the digital equivalent of a Tokyo street-fashion magazine cut to grid -- editorial, monochrome, and built around the photograph. The page opens on a pure white canvas (`#ffffff` · raw: https://oh-my-design.kr/design-systems/musinsa.md
-- **mustit** — Korea's leading luxury resale marketplace connecting 1,300+ luxury brands and millions of monthly shoppers through a mobile-first, discovery-driven experience. · raw: https://oh-my-design.kr/design-systems/mustit.md
-- **myrealtrip** — MyRealTrip is Korea's largest travel-experience marketplace — the platform that started by connecting Korean travelers with local guides abroad and grew into a one-stop super-app for flights, hotels,  · raw: https://oh-my-design.kr/design-systems/myrealtrip.md
-- **naver** — Naver's interface is the digital equivalent of a Korean newsstand at 7am — dense, utilitarian, search-first, and engineered to surface "the next thing you wanted to do" with one click. The page opens  · raw: https://oh-my-design.kr/design-systems/naver.md
-- **naverwebtoon** — Naver Webtoon is the platform that invented the format — the vertical-scroll, mobile-native comic ("webtoon") that turned Korean digital comics into a global medium. Its interface exists to do one thi · raw: https://oh-my-design.kr/design-systems/naverwebtoon.md
-- **netflix** — Netflix is the streaming interface that taught the world what "lean-back" entertainment software should feel like — a dark, cinematic theater where the content is the only thing that glows. The produc · raw: https://oh-my-design.kr/design-systems/netflix.md
-- **nexon** — Nexon's website is the digital storefront of one of Korea's largest game publishers, and its design reflects a deliberate split personality: an editorial, almost corporate calm in the chrome, broken b · raw: https://oh-my-design.kr/design-systems/nexon.md
-- **nhncloud** — NHN Cloud presents two distinct but related faces, and the brand's character lives in the gap between them. The corporate marketing site is confident and saturated — a vivid #125DE6 blue carried on la · raw: https://oh-my-design.kr/design-systems/nhncloud.md
-- **nike** — Nike's digital storefront is athletic minimalism turned into a sales engine. The page opens on pure white (`#ffffff`) with near-black ink (`#111111`) and a single high-voltage accent — **Volt** (`#d8f · raw: https://oh-my-design.kr/design-systems/nike.md
-- **note** — note (note.com) is Japan's leading creator publishing platform — a place where individuals write essays, sell digital content, and build audiences without the noise of a conventional social feed. Its  · raw: https://oh-my-design.kr/design-systems/note.md
-- **notion** — Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approac · raw: https://oh-my-design.kr/design-systems/notion.md
-- **nvidia** — NVIDIA's website is a high-contrast, technology-forward experience that communicates raw computational power through design restraint. The page is built on a stark black (`#000000`) and white (`#fffff · raw: https://oh-my-design.kr/design-systems/nvidia.md
-- **ohouse** — Ohouse's interface is the digital equivalent of flipping through a friend's home photo album with a shopping cart in hand -- warm, photography-first, aspirational without being precious. The page open · raw: https://oh-my-design.kr/design-systems/ohouse.md
-- **oliveyoung** — Olive Young presents as a **dense, scan-first H&B catalog**: a near-monochrome grayscale chrome (white surface, body ink `#666`, primary ink `#131518`) carries 90%+ of the surface, then snaps awake at · raw: https://oh-my-design.kr/design-systems/oliveyoung.md
-- **ollama** — Ollama's interface is radical minimalism taken to its logical conclusion — a pure-white void where content floats without decoration, shadow, or color. The design philosophy mirrors the product itself · raw: https://oh-my-design.kr/design-systems/ollama.md
-- **omnichat** — Omnichat is Taiwan and Hong Kong's leading omnichannel chat-commerce platform, and its zh-TW marketing surface reads like a confident AI-era SaaS pitch deck: a pure black (`#000000`) hero stage where  · raw: https://oh-my-design.kr/design-systems/omnichat.md
-- **openai** — OpenAI's interface is the visual argument that powerful technology should feel quiet. The canvas is uncompromising near-black-on-white (`#0d0d0d` text on `#ffffff`), with the signature teal-green (`#1 · raw: https://oh-my-design.kr/design-systems/openai.md
-- **opencode.ai** — OpenCode's website embodies a terminal-native, monospace-first aesthetic that reflects its identity as an open source AI coding agent. The entire visual system is built on a stark dark-on-light contra · raw: https://oh-my-design.kr/design-systems/opencode.ai.md
-- **payco** — South Korea's everyday fintech super-app — combining payment, points, financial services, and document storage in one red-branded platform operated by NHN PAYCO. · raw: https://oh-my-design.kr/design-systems/payco.md
-- **paypay** — PayPay is Japan's dominant QR-code mobile wallet — the app that, almost single-handedly, dragged a famously cash-loving country into cashless payments. Its visual language is loud where Japanese finte · raw: https://oh-my-design.kr/design-systems/paypay.md
-- **pchome** — PChome 24h is Taiwan's archetypal high-density marketplace, and its design reflects a single, unwavering priority: get as much shoppable inventory in front of the eye as possible, as fast as possible. · raw: https://oh-my-design.kr/design-systems/pchome.md
-- **perplexity** — Perplexity is an AI answer engine, and its design is built around a single idea: get out of the way of the answer. Where most AI products lean on neon gradients, glassmorphism, and a cold sci-fi chrom · raw: https://oh-my-design.kr/design-systems/perplexity.md
-- **piccollage** — A Taiwan-born photo-collage and greeting-card app that turns everyday photos and videos into shareable celebrations — serving 270 million users worldwide with joyful, AI-assisted creative tools. · raw: https://oh-my-design.kr/design-systems/piccollage.md
-- **pinkoi** — Pinkoi is Asia's cross-border design marketplace, and its system reflects exactly that — a busy, multi-cultural commerce surface that prioritizes density, legibility, and conversion over minimalist wh · raw: https://oh-my-design.kr/design-systems/pinkoi.md
-- **pinterest** — Pinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (`#e60 · raw: https://oh-my-design.kr/design-systems/pinterest.md
-- **pixiv** — pixiv is Japan's largest illustration and creative-work community — a place where millions of artists upload, tag, browse, and bookmark original and fan art. The interface exists to do one thing extra · raw: https://oh-my-design.kr/design-systems/pixiv.md
-- **pixnet** — PIXNET (痞客邦) is Taiwan's largest home-grown blogging and content platform, and its design reads exactly like what it is — a warm, editorial, reader-first publishing home rather than a slick venture-fu · raw: https://oh-my-design.kr/design-systems/pixnet.md
-- **posthog** — PostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of dev · raw: https://oh-my-design.kr/design-systems/posthog.md
-- **postype** — POSTYPE (포스타입) is Korea's creator-publishing and paid-serialization community, and its interface reads like a calm reading room built for taste rather than a noisy content feed. The canvas is pure whi · raw: https://oh-my-design.kr/design-systems/postype.md
-- **publy** — PUBLY is a Korean career-knowledge membership, and its interface reads like a calm professional reading room rebuilt for the work-from-anywhere generation -- clean, credible, and quietly confident. Th · raw: https://oh-my-design.kr/design-systems/publy.md
-- **qanda** — QANDA's interface is the digital equivalent of a clean study desk lit by a single warm lamp -- focused, friendly, and built for the moment a student stares at a problem they cannot solve. The page ope · raw: https://oh-my-design.kr/design-systems/qanda.md
-- **ragic** — Ragic's website is unapologetically utilitarian -- the visual language of a tool built by spreadsheet people, for spreadsheet people. It is a no-code database SaaS out of Taiwan, and the site wears th · raw: https://oh-my-design.kr/design-systems/ragic.md
-- **rakuten** — Rakuten Ichiba is the maximalist counter-thesis to Western minimal commerce, and it is proudly, deliberately so. The page title literally declares the philosophy — "Shopping is Entertainment!" — and t · raw: https://oh-my-design.kr/design-systems/rakuten.md
-- **ramp** — Ramp is the corporate-card and spend-management platform that made expense software feel like a premium productivity tool rather than an accounting chore. The brand's entire visual thesis is built on  · raw: https://oh-my-design.kr/design-systems/ramp.md
-- **rayark** — Rayark presents the cool, premium mood of a rhythm-game interface: a near-black canvas lit by a single shard of electric cyan. The Taipei indie studio behind Cytus, Deemo, VOEZ and the RPG Sdorica car · raw: https://oh-my-design.kr/design-systems/rayark.md
-- **raycast** — Raycast's marketing site feels like the dark interior of a precision instrument — a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (`#07080a`) th · raw: https://oh-my-design.kr/design-systems/raycast.md
-- **remember** — Remember is the app that turned the paper business card into a database — and now wraps that database in a career-marketplace, headhunter outreach surface, and an industry-expert community. The visual · raw: https://oh-my-design.kr/design-systems/remember.md
-- **renault** — Renault's website is a vibrant digital showroom that balances French automotive elegance with bold, forward-leaning energy — a departure from the monochromatic austerity of German or Italian luxury br · raw: https://oh-my-design.kr/design-systems/renault.md
-- **replicate** — Replicate's interface is a developer playground crackling with creative energy — a bold, high-contrast design that feels more like a music festival poster than a typical API platform. The hero section · raw: https://oh-my-design.kr/design-systems/replicate.md
-- **resend** — Resend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (`#000000`) with text that glows in near-white (`#f0f0f0`), · raw: https://oh-my-design.kr/design-systems/resend.md
-- **retool** — Retool is the platform for building internal tools fast — the admin panels, dashboards, and operational apps that companies used to hand-code for months. Its visual identity is unapologetically built  · raw: https://oh-my-design.kr/design-systems/retool.md
-- **revolut** — Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined ne · raw: https://oh-my-design.kr/design-systems/revolut.md
-- **richart** — Richart -- the digital-banking brand of Taiwan's Taishin International Bank (台新銀行) -- presents itself as the friendliest, most playful face of consumer finance on the Taiwanese web. Its self-declared  · raw: https://oh-my-design.kr/design-systems/richart.md
-- **ridi** — RIDI's interface is a long-form reading room dressed as a storefront. It is the rare consumer surface in Korean tech that treats *typography itself* as the brand — the screen opens on a near-pure whit · raw: https://oh-my-design.kr/design-systems/ridi.md
-- **riiid** — AI-native education company from Seoul — formerly known as Riiid, reborn as Socra AI on September 1, 2025 — building personalized learning through products like Santa (AI TOEIC/TOEFL) guided by the ph · raw: https://oh-my-design.kr/design-systems/riiid.md
-- **ringle** — Ringle (링글) is Korea's premium 1:1 video-English edtech — "명문대 튜터와의 1:1 화상영어" — and its marketing surface reads like a serious, career-grade learning product rather than a playful language app. The ca · raw: https://oh-my-design.kr/design-systems/ringle.md
-- **robinhood** — Robinhood is the American brokerage that turned investing from a gated, mahogany-paneled ritual into something that looks and feels like a consumer app. The brand's visual signature is a single, elect · raw: https://oh-my-design.kr/design-systems/robinhood.md
-- **runwayml** — Runway's interface is a cinematic reel brought to life as a website — a dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. This is not a  · raw: https://oh-my-design.kr/design-systems/runwayml.md
-- **salesforce** — Salesforce's design language is enterprise software's most institutional blue, rebuilt for the AI-agent era. The marketing surface opens on a white canvas (`#ffffff`) with near-black body text (`#0807 · raw: https://oh-my-design.kr/design-systems/salesforce.md
-- **sanity** — Sanity's website is a developer-content platform rendered as a nocturnal command center -- dark, precise, and deeply structured. The entire experience sits on a near-black canvas (`#0b0b0b`) that read · raw: https://oh-my-design.kr/design-systems/sanity.md
-- **sansan** — Sansan is Japan's category-defining B2B "business card" cloud — the company that turned the ritual exchange of *meishi* into a structured, searchable contact graph and grew it into a sales-intelligenc · raw: https://oh-my-design.kr/design-systems/sansan.md
-- **sendbird** — Sendbird is a developer-infrastructure company that wears two faces, and the gap between them is the whole story. The **product** — the Sendbird UIKit that powers chat inside thousands of apps — is a  · raw: https://oh-my-design.kr/design-systems/sendbird.md
-- **sentry** — Sentry's website is a dark-mode-first developer tool interface that speaks the language of code editors and terminal windows. The entire aesthetic is rooted in deep purple-black backgrounds (`#1f1633` · raw: https://oh-my-design.kr/design-systems/sentry.md
-- **shinhancard** — Shinhan Card's website reads as the digital face of a major Korean financial institution that has been deliberately modernized for a mobile-first, super-app era. The page opens on a clean white canvas · raw: https://oh-my-design.kr/design-systems/shinhancard.md
-- **shopline** — SHOPLINE presents itself as a bright, optimistic, merchant-friendly commerce platform built for the Taiwan and Hong Kong markets — its homepage opens on a clean white canvas (`#ffffff`) with a confide · raw: https://oh-my-design.kr/design-systems/shopline.md
-- **slack** — Slack is the work-messaging app that made enterprise software feel human. Where legacy collaboration tools shouted in cold corporate blues and grays, Slack leads with **Aubergine** (`#4A154B`) — a dee · raw: https://oh-my-design.kr/design-systems/slack.md
-- **smarthr** — SmartHR is the cloud HR/labor-administration platform that quietly runs payroll, social-insurance paperwork, and employee records for a large share of Japanese SMEs — and its design language is built  · raw: https://oh-my-design.kr/design-systems/smarthr.md
-- **smartnews** — SmartNews (スマートニュース) is the machine-learning news-discovery app born in Japan and now read across 150+ countries — and its visual identity is built around a single, unmissable asset: a **bright, urgen · raw: https://oh-my-design.kr/design-systems/smartnews.md
-- **socar** — SOCAR (쏘카) is Korea's dominant car-sharing platform, and its web surface reads exactly like the product it sells: clean, calm, gently confident — a service that wants to disappear out of the user's wa · raw: https://oh-my-design.kr/design-systems/socar.md
-- **soomgo** — Soomgo (숨고) is Korea's leading local-service and pro marketplace — the place where a homeowner finds a moving-cleaning crew, a tutor, a tax accountant, or a wedding photographer — and its design refle · raw: https://oh-my-design.kr/design-systems/soomgo.md
-- **spacex** — SpaceX's website is a full-screen cinematic experience that treats aerospace engineering like a film — every section is a scene, every photograph is a frame, and the interface disappears entirely behi · raw: https://oh-my-design.kr/design-systems/spacex.md
-- **spoon** — Spoon (스푼라디오 / Spoon Radio) is Korea's pioneering audio-live-streaming platform — "누구나 쉽게 오디오 라이브를 시작할 수 있는 공간" (a place where anyone can easily start an audio live stream). Born from the idea that vo · raw: https://oh-my-design.kr/design-systems/spoon.md
-- **spotify** — Spotify's web interface is a dark, immersive music player that wraps listeners in a near-black cocoon (`#121212`, `#181818`, `#1f1f1f`) where album art and content become the primary source of color.  · raw: https://oh-my-design.kr/design-systems/spotify.md
-- **starbucks** — Starbucks is the world's most recognizable coffee brand, and its digital surfaces translate the warmth of a "third place" — neither home nor work — into a calm, generous, premium-feeling interface. Th · raw: https://oh-my-design.kr/design-systems/starbucks.md
-- **stores** — STORES (ストアーズ) is Japan's "store operations platform" — net shop, cashless payments, reservations, POS register, and mobile order in one subscription — and its marketing surface reads like a calm, war · raw: https://oh-my-design.kr/design-systems/stores.md
-- **stripe** — omd: "0.1" tokens: source: reconciled extracted: "2026-06-08" note: "primary = live interactive purple (#533afd); brand = documented logo/marketing purple (#635bff)" colors: primary: "#533afd" primary · raw: https://oh-my-design.kr/design-systems/stripe.md
-- **studio** — Studio is a no-code web design tool built for designers who refuse to compromise on craft. Its marketing site is the product's strongest argument: a near-monochrome, gallery-grade canvas where the wor · raw: https://oh-my-design.kr/design-systems/studio.md
-- **supabase** — Supabase's website is a dark-mode-native developer platform that channels the aesthetic of a premium code editor — deep black backgrounds (`#0f0f0f`, `#171717`) with emerald green accents (`#3ecf8e`,  · raw: https://oh-my-design.kr/design-systems/supabase.md
-- **superhuman** — Superhuman's website feels like opening a luxury envelope — predominantly white, immaculately clean, with a single dramatic gesture of color that commands attention. The hero section is a cinematic pu · raw: https://oh-my-design.kr/design-systems/superhuman.md
-- **surveycake** — SurveyCake's marketing site is a study in calm, trustworthy SaaS clarity built for the Taiwanese enterprise market. The page opens on a pure white canvas (`#ffffff`) with dark-charcoal headings (`#3e3 · raw: https://oh-my-design.kr/design-systems/surveycake.md
-- **tada** — TADA is the Korean mobility brand that built its identity around a single, calming idea: that getting in a car should feel like a small relief, not a transaction. Its visual signature is a fresh mint- · raw: https://oh-my-design.kr/design-systems/tada.md
-- **teamblind** — Blind (블라인드) is the anonymous workplace community where over twelve million verified professionals talk about salary, career moves, and company life — and its design reads exactly like what it is: a h · raw: https://oh-my-design.kr/design-systems/teamblind.md
-- **tesla** — Tesla's website is an exercise in radical subtraction — a digital showroom where the product is everything and the interface is almost nothing. The page opens with a full-viewport hero that fills the  · raw: https://oh-my-design.kr/design-systems/tesla.md
-- **theverge** — The Verge is Vox Media's flagship technology publication, and its 2022 in-house redesign is one of the most aggressively opinionated editorial identities on the modern web. Where most tech-news sites  · raw: https://oh-my-design.kr/design-systems/theverge.md
-- **timee** — Timee (タイミー) is Japan's largest spot-work platform — 13.4 million registered workers pick up single-shift jobs with no resume and no interview — and its design language radiates that same instant, fri · raw: https://oh-my-design.kr/design-systems/timee.md
-- **together.ai** — Together AI's interface is a pastel-gradient dreamscape built for enterprise AI infrastructure — a design that somehow makes GPU clusters and model inference feel light, airy, and optimistic. The hero · raw: https://oh-my-design.kr/design-systems/together.ai.md
-- **toss** — Toss is Korea's fintech super-app that redefined what a financial interface could feel like -- calm, confident, and deceptively simple. The page opens on a clean white canvas (`#ffffff`) with deep cha · raw: https://oh-my-design.kr/design-systems/toss.md
-- **toss-securities** — Toss Securities is the brokerage arm inside Korea's fintech super-app, and it inherits its parent's typographic and chromatic DNA while pulling the entire surface into a deep, calm dark mode by defaul · raw: https://oh-my-design.kr/design-systems/toss-securities.md
-- **tossbank** — Toss Bank is the licensed internet-only bank inside the Toss universe — the moment the calm, blue-accented Toss design language stops being a money-transfer convenience and becomes an actual chartered · raw: https://oh-my-design.kr/design-systems/tossbank.md
-- **trenbe** — Global No.1 luxury shopping platform from Korea, combining tech-driven authentication and real-time global price scanning with a purple-accented monochrome design language. · raw: https://oh-my-design.kr/design-systems/trenbe.md
-- **triple** — Triple is Korea's personal travel-planning app — "나를 아는 여행 앱, 트리플" (the travel app that knows me). Where most travel products are booking marketplaces, Triple's core is the *itinerary*: a friendly com · raw: https://oh-my-design.kr/design-systems/triple.md
-- **tumblbug** — Tumblbug is Korea's flagship creator-crowdfunding platform, and its interface is built to make a creative project feel worth backing -- warm, editorial, and almost entirely black-and-white so that the · raw: https://oh-my-design.kr/design-systems/tumblbug.md
-- **tving** — TVING is Korea's CJ ENM-backed streaming platform, and its product surface reads like a cinema-darkened auditorium tuned for Korean primetime — the canvas is a near-absolute black (`#000000` locked at · raw: https://oh-my-design.kr/design-systems/tving.md
-- **uber** — Uber's design language is a masterclass in confident minimalism -- a black-and-white universe where every pixel serves a purpose and nothing decorates without earning its place. The entire experience  · raw: https://oh-my-design.kr/design-systems/uber.md
-- **ubie** — Ubie is a Japanese healthcare-AI company whose products — a consumer symptom-checker (ユビー) and clinical software for hospitals — must do something most health software fails at: feel reassuring to an  · raw: https://oh-my-design.kr/design-systems/ubie.md
-- **uniqlo** — Uniqlo is the global apparel brand of Japan's Fast Retailing, and its design language is the visual translation of one idea: **LifeWear** -- simple, high-quality, everyday clothing "Made for All." The · raw: https://oh-my-design.kr/design-systems/uniqlo.md
-- **upbit** — Upbit is the production crypto-asset exchange operated by **Dunamu** in Korea, launched 2017. Its product identity rests on three observable promises: regulated-grade trust, dense real-time informatio · raw: https://oh-my-design.kr/design-systems/upbit.md
-- **upstage** — Upstage looks like an enterprise AI company that decided to spend its visual budget on **one purple, one display face, and one rotating word** — and then on absolutely nothing else. The home surface s · raw: https://oh-my-design.kr/design-systems/upstage.md
-- **velog** — velog is a Korean developer-blogging platform built by velopert (Minjun Kim), and its surface is unmistakably reading-first: calm, minimal, and content-forward, with prose given room to breathe rather · raw: https://oh-my-design.kr/design-systems/velog.md
-- **vercel** — Vercel's website is the visual thesis of developer infrastructure made invisible — a design system so restrained it borders on philosophical. The page is overwhelmingly white (`#ffffff`) with near-bla · raw: https://oh-my-design.kr/design-systems/vercel.md
-- **voicetube** — Asia's largest video-based English learning platform, blending immersive YouTube content with AI-powered study tools under a dramatic dark-purple brand identity. · raw: https://oh-my-design.kr/design-systems/voicetube.md
-- **voltagent** — VoltAgent's interface is a deep-space command terminal for the AI age — a developer-facing darkness built on near-pure-black surfaces (`#050507`) where the only interruption is the electric pulse of e · raw: https://oh-my-design.kr/design-systems/voltagent.md
-- **wadiz** — Wadiz (와디즈) is the design language of **a crowdfunding marketplace that wants to feel like a clean retail catalog, not a charity drive**. Korea has a single dominant rewards-funding platform, and Wadi · raw: https://oh-my-design.kr/design-systems/wadiz.md
-- **wanted** — Wanted (원티드) is Korea's largest career marketplace — a recruitment platform run by **Wanted Lab** (원티드랩, founded 2015) that brokers matches between 3.6M+ working professionals and 35K+ companies throu · raw: https://oh-my-design.kr/design-systems/wanted.md
-- **wantedly** — Wantedly is Japan's "business SNS connected by empathy" (共感でつながるビジネスSNS), and its visual system is engineered to make job hunting feel like browsing a lifestyle magazine rather than scanning classifie · raw: https://oh-my-design.kr/design-systems/wantedly.md
-- **warp** — Warp's website feels like sitting at a campfire in a deep forest — warm, dark, and alive with quiet confidence. Unlike the cold, blue-tinted blacks favored by most developer tools, Warp wraps everythi · raw: https://oh-my-design.kr/design-systems/warp.md
-- **watcha** — Watcha is Korea's taste-driven streaming service — the one that started as a movie-rating site (왓챠피디아) and turned a decade of star ratings into a recommendation engine, then a full OTT. Its interface  · raw: https://oh-my-design.kr/design-systems/watcha.md
-- **wavve** — Wavve is Korea's homegrown OTT — the merger of SK Telecom's oksusu and the terrestrial broadcasters' POOQ into one streaming home for Korean drama, variety, news, and live TV. Its interface is the cla · raw: https://oh-my-design.kr/design-systems/wavve.md
-- **wconcept** — W Concept's interface is a curated fashion gallery rendered in absolute monochrome -- the digital equivalent of a Seoul concept-store window where the clothing is lit and everything else recedes into  · raw: https://oh-my-design.kr/design-systems/wconcept.md
-- **webflow** — Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color pal · raw: https://oh-my-design.kr/design-systems/webflow.md
-- **wired** — WIRED is the magazine of record for how technology shapes culture, the economy, and politics — and its visual identity is an editorial machine first, a website second. The brand reads as **uncompromis · raw: https://oh-my-design.kr/design-systems/wired.md
-- **wise** — Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white c · raw: https://oh-my-design.kr/design-systems/wise.md
-- **x.ai** — xAI's website is a masterclass in dark-first, monospace-driven brutalist minimalism -- a design system that feels like it was built by engineers who understand that restraint is the ultimate form of s · raw: https://oh-my-design.kr/design-systems/x.ai.md
-- **xiaohongshu** — Xiaohongshu (小红书) — known in English as RED or RedNote — is China's dominant lifestyle-discovery and social-commerce platform, the place a generation goes to research a skincare routine, a travel itin · raw: https://oh-my-design.kr/design-systems/xiaohongshu.md
-- **yanolja** — Yanolja's interface is the digital equivalent of a Korean weekend getaway -- warm, energetic, and built around the simple proposition that **playing is the best thing you can do**. The home surface (n · raw: https://oh-my-design.kr/design-systems/yanolja.md
-- **yeogiotte** — 여기어때 (GoodChoice / Yeogiotte) is South Korea's #2 travel and lodging booking platform — a brand that turned the awkward Korean motel/pension reservation market into a clean, photo-forward booking surf · raw: https://oh-my-design.kr/design-systems/yeogiotte.md
-- **yogiyo** — Yogiyo is Korea's iconic red-logo food-delivery app — the red mark you see on every street, in every neighborhood, the one that became shorthand for "let's order in." Its visual identity is built on a · raw: https://oh-my-design.kr/design-systems/yogiyo.md
-- **yourator** — Yourator is Taiwan's startup-and-digital-talent job board, and its design reads exactly the way a stylish recruiting product for the tech crowd should: clean, bright, friendly, and quietly confident w · raw: https://oh-my-design.kr/design-systems/yourator.md
-- **zapier** — Zapier's website radiates warm, approachable professionalism. It rejects the cold monochrome minimalism of developer tools in favor of a cream-tinted canvas (`#fffefb`) that feels like unbleached pape · raw: https://oh-my-design.kr/design-systems/zapier.md
-- **zigbang** — Zigbang's web product is a study in restraint applied to a data-dense domain. Where almost every other Korean real-estate service crowds the viewport with red flags, yellow "신규!" badges, and saturated · raw: https://oh-my-design.kr/design-systems/zigbang.md
-- **zigzag** — ZIGZAG is the gold standard of Korean fashion-commerce design — a mobile-first shop-aggregator UI that treats a 600px-wide phone canvas as a curated magazine spread rather than a transactional grid. T · raw: https://oh-my-design.kr/design-systems/zigzag.md
-- **zozotown** — ZOZOTOWN is Japan's largest fashion commerce platform — a marketplace of 7,000+ brands operated by ZOZO, Inc. (formerly Start Today). Its design language is uncompromisingly editorial: a near-monochro · raw: https://oh-my-design.kr/design-systems/zozotown.md
-
-
-===========================================================
-# Raw DESIGN.md twin endpoints
-===========================================================
-
-<!-- md-twins:start (generated by scripts/gen-llms-full.cjs — do not edit) -->
-## Raw DESIGN.md endpoints (246)
-
-Every reference DESIGN.md is fetchable as clean markdown — no JS rendering needed:
-
-- 11st: https://oh-my-design.kr/design-systems/11st.md
-- 17live: https://oh-my-design.kr/design-systems/17live.md
-- 29cm: https://oh-my-design.kr/design-systems/29cm.md
-- 3o3: https://oh-my-design.kr/design-systems/3o3.md
-- 91app: https://oh-my-design.kr/design-systems/91app.md
-- abema: https://oh-my-design.kr/design-systems/abema.md
-- ably: https://oh-my-design.kr/design-systems/ably.md
-- accupass: https://oh-my-design.kr/design-systems/accupass.md
-- adobe: https://oh-my-design.kr/design-systems/adobe.md
-- airbnb: https://oh-my-design.kr/design-systems/airbnb.md
-- airtable: https://oh-my-design.kr/design-systems/airtable.md
-- alipay: https://oh-my-design.kr/design-systems/alipay.md
-- amazingtalker: https://oh-my-design.kr/design-systems/amazingtalker.md
-- appier: https://oh-my-design.kr/design-systems/appier.md
-- apple: https://oh-my-design.kr/design-systems/apple.md
-- baemin: https://oh-my-design.kr/design-systems/baemin.md
-- banksalad: https://oh-my-design.kr/design-systems/banksalad.md
-- bilibili: https://oh-my-design.kr/design-systems/bilibili.md
-- bithumb: https://oh-my-design.kr/design-systems/bithumb.md
-- bmw: https://oh-my-design.kr/design-systems/bmw.md
-- brandi: https://oh-my-design.kr/design-systems/brandi.md
-- bunjang: https://oh-my-design.kr/design-systems/bunjang.md
-- cakeresume: https://oh-my-design.kr/design-systems/cakeresume.md
-- cal: https://oh-my-design.kr/design-systems/cal.md
-- catchtable: https://oh-my-design.kr/design-systems/catchtable.md
-- cathay: https://oh-my-design.kr/design-systems/cathay.md
-- channeltalk: https://oh-my-design.kr/design-systems/channeltalk.md
-- class101: https://oh-my-design.kr/design-systems/class101.md
-- classting: https://oh-my-design.kr/design-systems/classting.md
-- classum: https://oh-my-design.kr/design-systems/classum.md
-- claude: https://oh-my-design.kr/design-systems/claude.md
-- clay: https://oh-my-design.kr/design-systems/clay.md
-- clickhouse: https://oh-my-design.kr/design-systems/clickhouse.md
-- cloudflare: https://oh-my-design.kr/design-systems/cloudflare.md
-- cohere: https://oh-my-design.kr/design-systems/cohere.md
-- coinbase: https://oh-my-design.kr/design-systems/coinbase.md
-- coinone: https://oh-my-design.kr/design-systems/coinone.md
-- composio: https://oh-my-design.kr/design-systems/composio.md
-- cookpad: https://oh-my-design.kr/design-systems/cookpad.md
-- coupang: https://oh-my-design.kr/design-systems/coupang.md
-- cursor: https://oh-my-design.kr/design-systems/cursor.md
-- dabang: https://oh-my-design.kr/design-systems/dabang.md
-- danawa: https://oh-my-design.kr/design-systems/danawa.md
-- dcard: https://oh-my-design.kr/design-systems/dcard.md
-- dell: https://oh-my-design.kr/design-systems/dell.md
-- devsisters: https://oh-my-design.kr/design-systems/devsisters.md
-- discord: https://oh-my-design.kr/design-systems/discord.md
-- dji: https://oh-my-design.kr/design-systems/dji.md
-- drnow: https://oh-my-design.kr/design-systems/drnow.md
-- dropbox: https://oh-my-design.kr/design-systems/dropbox.md
-- duolingo: https://oh-my-design.kr/design-systems/duolingo.md
-- elevenlabs: https://oh-my-design.kr/design-systems/elevenlabs.md
-- expo: https://oh-my-design.kr/design-systems/expo.md
-- fastcampus: https://oh-my-design.kr/design-systems/fastcampus.md
-- ferrari: https://oh-my-design.kr/design-systems/ferrari.md
-- figma: https://oh-my-design.kr/design-systems/figma.md
-- finda: https://oh-my-design.kr/design-systems/finda.md
-- firstory: https://oh-my-design.kr/design-systems/firstory.md
-- flex: https://oh-my-design.kr/design-systems/flex.md
-- flo: https://oh-my-design.kr/design-systems/flo.md
-- framer: https://oh-my-design.kr/design-systems/framer.md
-- freee: https://oh-my-design.kr/design-systems/freee.md
-- fugle: https://oh-my-design.kr/design-systems/fugle.md
-- funnow: https://oh-my-design.kr/design-systems/funnow.md
-- gangnamunni: https://oh-my-design.kr/design-systems/gangnamunni.md
-- genie: https://oh-my-design.kr/design-systems/genie.md
-- github: https://oh-my-design.kr/design-systems/github.md
-- gmarket: https://oh-my-design.kr/design-systems/gmarket.md
-- gogolook: https://oh-my-design.kr/design-systems/gogolook.md
-- gogoro: https://oh-my-design.kr/design-systems/gogoro.md
-- google: https://oh-my-design.kr/design-systems/google.md
-- greenvines: https://oh-my-design.kr/design-systems/greenvines.md
-- greeting: https://oh-my-design.kr/design-systems/greeting.md
-- grip: https://oh-my-design.kr/design-systems/grip.md
-- hahow: https://oh-my-design.kr/design-systems/hahow.md
-- hashicorp: https://oh-my-design.kr/design-systems/hashicorp.md
-- hogangnono: https://oh-my-design.kr/design-systems/hogangnono.md
-- hp: https://oh-my-design.kr/design-systems/hp.md
-- hyperconnect: https://oh-my-design.kr/design-systems/hyperconnect.md
-- hyundaicard: https://oh-my-design.kr/design-systems/hyundaicard.md
-- ibm: https://oh-my-design.kr/design-systems/ibm.md
-- ichef: https://oh-my-design.kr/design-systems/ichef.md
-- ikala: https://oh-my-design.kr/design-systems/ikala.md
-- imweb: https://oh-my-design.kr/design-systems/imweb.md
-- inflearn: https://oh-my-design.kr/design-systems/inflearn.md
-- intercom: https://oh-my-design.kr/design-systems/intercom.md
-- jandi: https://oh-my-design.kr/design-systems/jandi.md
-- jkopay: https://oh-my-design.kr/design-systems/jkopay.md
-- jobkorea: https://oh-my-design.kr/design-systems/jobkorea.md
-- jumpit: https://oh-my-design.kr/design-systems/jumpit.md
-- kakao: https://oh-my-design.kr/design-systems/kakao.md
-- kakaobank: https://oh-my-design.kr/design-systems/kakaobank.md
-- kakaopay: https://oh-my-design.kr/design-systems/kakaopay.md
-- kakaot: https://oh-my-design.kr/design-systems/kakaot.md
-- karrot: https://oh-my-design.kr/design-systems/karrot.md
-- kbank: https://oh-my-design.kr/design-systems/kbank.md
-- kdan: https://oh-my-design.kr/design-systems/kdan.md
-- kintone: https://oh-my-design.kr/design-systems/kintone.md
-- kkbox: https://oh-my-design.kr/design-systems/kkbox.md
-- kkday: https://oh-my-design.kr/design-systems/kkday.md
-- kmong: https://oh-my-design.kr/design-systems/kmong.md
-- krafton: https://oh-my-design.kr/design-systems/krafton.md
-- kraken: https://oh-my-design.kr/design-systems/kraken.md
-- krds: https://oh-my-design.kr/design-systems/krds.md
-- kream: https://oh-my-design.kr/design-systems/kream.md
-- kurly: https://oh-my-design.kr/design-systems/kurly.md
-- laftel: https://oh-my-design.kr/design-systems/laftel.md
-- lamborghini: https://oh-my-design.kr/design-systems/lamborghini.md
-- laundrygo: https://oh-my-design.kr/design-systems/laundrygo.md
-- layerx: https://oh-my-design.kr/design-systems/layerx.md
-- lezhin: https://oh-my-design.kr/design-systems/lezhin.md
-- line: https://oh-my-design.kr/design-systems/line.md
-- linear.app: https://oh-my-design.kr/design-systems/linear.app.md
-- loom: https://oh-my-design.kr/design-systems/loom.md
-- lovable: https://oh-my-design.kr/design-systems/lovable.md
-- lunit: https://oh-my-design.kr/design-systems/lunit.md
-- mastercard: https://oh-my-design.kr/design-systems/mastercard.md
-- meituan: https://oh-my-design.kr/design-systems/meituan.md
-- melon: https://oh-my-design.kr/design-systems/melon.md
-- mercari: https://oh-my-design.kr/design-systems/mercari.md
-- mercury: https://oh-my-design.kr/design-systems/mercury.md
-- meta: https://oh-my-design.kr/design-systems/meta.md
-- microsoft: https://oh-my-design.kr/design-systems/microsoft.md
-- millie: https://oh-my-design.kr/design-systems/millie.md
-- minimax: https://oh-my-design.kr/design-systems/minimax.md
-- mintlify: https://oh-my-design.kr/design-systems/mintlify.md
-- miricanvas: https://oh-my-design.kr/design-systems/miricanvas.md
-- miro: https://oh-my-design.kr/design-systems/miro.md
-- mistral.ai: https://oh-my-design.kr/design-systems/mistral.ai.md
-- modusign: https://oh-my-design.kr/design-systems/modusign.md
-- momoshop: https://oh-my-design.kr/design-systems/momoshop.md
-- money-forward: https://oh-my-design.kr/design-systems/money-forward.md
-- mongodb: https://oh-my-design.kr/design-systems/mongodb.md
-- muji: https://oh-my-design.kr/design-systems/muji.md
-- musinsa: https://oh-my-design.kr/design-systems/musinsa.md
-- mustit: https://oh-my-design.kr/design-systems/mustit.md
-- myrealtrip: https://oh-my-design.kr/design-systems/myrealtrip.md
-- naver: https://oh-my-design.kr/design-systems/naver.md
-- naverwebtoon: https://oh-my-design.kr/design-systems/naverwebtoon.md
-- netflix: https://oh-my-design.kr/design-systems/netflix.md
-- nexon: https://oh-my-design.kr/design-systems/nexon.md
-- nhncloud: https://oh-my-design.kr/design-systems/nhncloud.md
-- nike: https://oh-my-design.kr/design-systems/nike.md
-- note: https://oh-my-design.kr/design-systems/note.md
-- notion: https://oh-my-design.kr/design-systems/notion.md
-- nvidia: https://oh-my-design.kr/design-systems/nvidia.md
-- ohouse: https://oh-my-design.kr/design-systems/ohouse.md
-- oliveyoung: https://oh-my-design.kr/design-systems/oliveyoung.md
-- ollama: https://oh-my-design.kr/design-systems/ollama.md
-- omnichat: https://oh-my-design.kr/design-systems/omnichat.md
-- openai: https://oh-my-design.kr/design-systems/openai.md
-- opencode.ai: https://oh-my-design.kr/design-systems/opencode.ai.md
-- payco: https://oh-my-design.kr/design-systems/payco.md
-- paypay: https://oh-my-design.kr/design-systems/paypay.md
-- pchome: https://oh-my-design.kr/design-systems/pchome.md
-- perplexity: https://oh-my-design.kr/design-systems/perplexity.md
-- piccollage: https://oh-my-design.kr/design-systems/piccollage.md
-- pinkoi: https://oh-my-design.kr/design-systems/pinkoi.md
-- pinterest: https://oh-my-design.kr/design-systems/pinterest.md
-- pixiv: https://oh-my-design.kr/design-systems/pixiv.md
-- pixnet: https://oh-my-design.kr/design-systems/pixnet.md
-- posthog: https://oh-my-design.kr/design-systems/posthog.md
-- postype: https://oh-my-design.kr/design-systems/postype.md
-- publy: https://oh-my-design.kr/design-systems/publy.md
-- qanda: https://oh-my-design.kr/design-systems/qanda.md
-- ragic: https://oh-my-design.kr/design-systems/ragic.md
-- rakuten: https://oh-my-design.kr/design-systems/rakuten.md
-- ramp: https://oh-my-design.kr/design-systems/ramp.md
-- rayark: https://oh-my-design.kr/design-systems/rayark.md
-- raycast: https://oh-my-design.kr/design-systems/raycast.md
-- remember: https://oh-my-design.kr/design-systems/remember.md
-- renault: https://oh-my-design.kr/design-systems/renault.md
-- replicate: https://oh-my-design.kr/design-systems/replicate.md
-- resend: https://oh-my-design.kr/design-systems/resend.md
-- retool: https://oh-my-design.kr/design-systems/retool.md
-- revolut: https://oh-my-design.kr/design-systems/revolut.md
-- richart: https://oh-my-design.kr/design-systems/richart.md
-- ridi: https://oh-my-design.kr/design-systems/ridi.md
-- riiid: https://oh-my-design.kr/design-systems/riiid.md
-- ringle: https://oh-my-design.kr/design-systems/ringle.md
-- robinhood: https://oh-my-design.kr/design-systems/robinhood.md
-- runwayml: https://oh-my-design.kr/design-systems/runwayml.md
-- salesforce: https://oh-my-design.kr/design-systems/salesforce.md
-- sanity: https://oh-my-design.kr/design-systems/sanity.md
-- sansan: https://oh-my-design.kr/design-systems/sansan.md
-- sendbird: https://oh-my-design.kr/design-systems/sendbird.md
-- sentry: https://oh-my-design.kr/design-systems/sentry.md
-- shinhancard: https://oh-my-design.kr/design-systems/shinhancard.md
-- shopline: https://oh-my-design.kr/design-systems/shopline.md
-- slack: https://oh-my-design.kr/design-systems/slack.md
-- smarthr: https://oh-my-design.kr/design-systems/smarthr.md
-- smartnews: https://oh-my-design.kr/design-systems/smartnews.md
-- socar: https://oh-my-design.kr/design-systems/socar.md
-- soomgo: https://oh-my-design.kr/design-systems/soomgo.md
-- spacex: https://oh-my-design.kr/design-systems/spacex.md
-- spoon: https://oh-my-design.kr/design-systems/spoon.md
-- spotify: https://oh-my-design.kr/design-systems/spotify.md
-- starbucks: https://oh-my-design.kr/design-systems/starbucks.md
-- stores: https://oh-my-design.kr/design-systems/stores.md
-- stripe: https://oh-my-design.kr/design-systems/stripe.md
-- studio: https://oh-my-design.kr/design-systems/studio.md
-- supabase: https://oh-my-design.kr/design-systems/supabase.md
-- superhuman: https://oh-my-design.kr/design-systems/superhuman.md
-- surveycake: https://oh-my-design.kr/design-systems/surveycake.md
-- tada: https://oh-my-design.kr/design-systems/tada.md
-- teamblind: https://oh-my-design.kr/design-systems/teamblind.md
-- tesla: https://oh-my-design.kr/design-systems/tesla.md
-- theverge: https://oh-my-design.kr/design-systems/theverge.md
-- timee: https://oh-my-design.kr/design-systems/timee.md
-- together.ai: https://oh-my-design.kr/design-systems/together.ai.md
-- toss: https://oh-my-design.kr/design-systems/toss.md
-- toss-securities: https://oh-my-design.kr/design-systems/toss-securities.md
-- tossbank: https://oh-my-design.kr/design-systems/tossbank.md
-- trenbe: https://oh-my-design.kr/design-systems/trenbe.md
-- triple: https://oh-my-design.kr/design-systems/triple.md
-- tumblbug: https://oh-my-design.kr/design-systems/tumblbug.md
-- tving: https://oh-my-design.kr/design-systems/tving.md
-- uber: https://oh-my-design.kr/design-systems/uber.md
-- ubie: https://oh-my-design.kr/design-systems/ubie.md
-- uniqlo: https://oh-my-design.kr/design-systems/uniqlo.md
-- upbit: https://oh-my-design.kr/design-systems/upbit.md
-- upstage: https://oh-my-design.kr/design-systems/upstage.md
-- velog: https://oh-my-design.kr/design-systems/velog.md
-- vercel: https://oh-my-design.kr/design-systems/vercel.md
-- voicetube: https://oh-my-design.kr/design-systems/voicetube.md
-- voltagent: https://oh-my-design.kr/design-systems/voltagent.md
-- wadiz: https://oh-my-design.kr/design-systems/wadiz.md
-- wanted: https://oh-my-design.kr/design-systems/wanted.md
-- wantedly: https://oh-my-design.kr/design-systems/wantedly.md
-- warp: https://oh-my-design.kr/design-systems/warp.md
-- watcha: https://oh-my-design.kr/design-systems/watcha.md
-- wavve: https://oh-my-design.kr/design-systems/wavve.md
-- wconcept: https://oh-my-design.kr/design-systems/wconcept.md
-- webflow: https://oh-my-design.kr/design-systems/webflow.md
-- wired: https://oh-my-design.kr/design-systems/wired.md
-- wise: https://oh-my-design.kr/design-systems/wise.md
-- x.ai: https://oh-my-design.kr/design-systems/x.ai.md
-- xiaohongshu: https://oh-my-design.kr/design-systems/xiaohongshu.md
-- yanolja: https://oh-my-design.kr/design-systems/yanolja.md
-- yeogiotte: https://oh-my-design.kr/design-systems/yeogiotte.md
-- yogiyo: https://oh-my-design.kr/design-systems/yogiyo.md
-- yourator: https://oh-my-design.kr/design-systems/yourator.md
-- zapier: https://oh-my-design.kr/design-systems/zapier.md
-- zigbang: https://oh-my-design.kr/design-systems/zigbang.md
-- zigzag: https://oh-my-design.kr/design-systems/zigzag.md
-- zozotown: https://oh-my-design.kr/design-systems/zozotown.md
-<!-- md-twins:end -->
-
-
-===========================================================
-# Citation
-===========================================================
-
-oh-my-design is built and maintained by Kwak Seongjae (https://github.com/kwakseongjae).
-MIT licensed. Reference brand DESIGN.md files are reproduced for educational reference and remain the property of their respective companies.