oh-my-design-cli 1.3.0 → 1.3.9

package/README.ko.md

@@ -89,24 +89,35 @@ omd remember "..."
 | `CLAUDE.md` | `omd sync` | Claude Code 포인터 (`@./DESIGN.md`) |
 | `AGENTS.md` | `omd sync` | Codex CLI **+** OpenCode 공용 포인터 (한 파일이 둘 커버) |
 | `.cursor/rules/omd-design.mdc` | `omd sync` | Cursor가 UI 파일 편집 시 DESIGN.md 자동 attach |
-| `.claude/skills/omd-*/SKILL.md` | `omd install-skills` | Claude Code 스킬 5종 |
-| `.codex/skills/omd-*/SKILL.md` | `omd install-skills` | Codex 스킬 5종 |
-| `.opencode/agents/omd-*.md` | `omd install-skills` | OpenCode 에이전트 5종 |
+| `.claude/skills/omd-*/SKILL.md` | `omd install-skills` | Claude Code 스킬 9종 |
+| `.codex/skills/omd-*/SKILL.md` | `omd install-skills` | Codex 스킬 9종 |
+| `.opencode/agents/omd-*.md` | `omd install-skills` | OpenCode 에이전트 9종 |
 | `.omd/preferences.md` | `omd remember` | append-only 디자인 교정 로그 |
 | `.omd/sync.lock.json` | `omd sync` | drift 감지 상태 |
 
 shim과 스킬 파일은 `<!-- omd:start -->` 마커 블록을 사용해서, 마커 외부의 사용자 편집은 `omd sync` 재실행에도 보존됩니다.
 
-### 5개 스킬
+### 9개 스킬
+
+**Core flow (6)**
 
 | 스킬 | 트리거 | 동작 |
 |---|---|---|
-| `omd:init` | "DESIGN.md 만들어줘" / "브랜드 세팅" | 레퍼런스 추천 → 프로젝트 description 수집 → 레퍼런스 톤·매너를 **preserve**하면서 deltas만 반영한 Hybrid variation 생성 → DESIGN.md + shim 작성 |
-| `omd:apply` | UI / 스타일링 / 마이크로카피 / 모션 작업 | DESIGN.md + pending preference를 authoritative context로 주입, 사용자가 교정하면 **자동으로** `omd remember` 호출 |
-| `omd:sync` | "shim drift" / "AGENTS.md 동기화" | 적절한 플래그로 `omd sync` 실행 |
+| `omd:init` | "DESIGN.md 만들어줘" / "브랜드 세팅" | 레퍼런스 추천 → 프로젝트 description 수집 → 레퍼런스 톤·매너 preserve하면서 deltas 반영한 Hybrid variation → DESIGN.md + shim 작성 |
+| `omd:apply` | UI / 스타일링 / 마이크로카피 / 모션 작업 | DESIGN.md + pending preference를 authoritative context로 주입, 사용자 교정 시 자동으로 `omd:remember` 호출 |
+| `omd:harness` | "랜딩 처음부터 / production-ready" | 10-phase 디자인 파이프라인. rule 9 hero archetype 7종 (center-text / carousel / split-screen / editorial / dashboard / quote-led / left-character) 중 brand vibe 매칭으로 선택. rule 5 워드마크-only 로고, rule 10 reveal safety net. |
+| `omd:sync` | "shim drift" / "AGENTS.md 동기화" | 적절한 플래그로 `omd:sync` 실행 |
 | `omd:remember` | "기억해 둬" / "우리는 ~안 해" | 구조화된 entry를 `.omd/preferences.md`에 append |
 | `omd:learn` | "preferences 정리해서 DESIGN.md에 반영" | scope별로 그룹핑 → coherent edit 제안 → status flip |
 
+**Live capture + assets (v1.3.x — 3개)**
+
+| 스킬 | 트리거 | 동작 |
+|---|---|---|
+| `omd:reference-capture` | "X 라이브 자료 가져와" / "에셋 캡쳐" | 라이브 brand 사이트 CDP/playwright inspect → `assets/_reference/<id>/`에 tokens.json + structure.json + fonts.json + `.live-inspect-proof.json` + screenshots + LICENSE-NOTE 작성. Phase 3.9 browser-harness fast-path (3-5x 빠름) auto-detect. |
+| `omd:asset-fetch` | "에셋 가져와줘" / "플레이스홀더 진짜 이미지로" | Free-license 카탈로그 — DiceBear (CC0 avatars), Lucide (ISC icons), Picsum/Loremflickr (CC photos), Bricolage Grotesque / Space Grotesk / DM Serif Display 등 SIL OFL display fonts. 핸드드로잉 캐릭터 SVG 금지. |
+| `omd:experiment-gallery` | "결과물 한 번에 보여줘" / "갤러리 만들어" | N개 experiment 디렉토리를 받아 단일 index.html에 iframe scaled로 비교 뷰 생성. wow rating + archetype badge + round-별 deltas + IP audit 한 카드에. |
+
 소스: [`skills/`](skills/) 디렉토리. `omd install-skills`가 프로젝트의 에이전트 디렉토리로 복사.
 
 ### CLI 명령어
@@ -141,6 +152,27 @@ omd learn --mark-rejected <id> --reason <text>
 
 이 생태계는 **v0.1.0** — 첫 agent-integration 릴리스입니다. CLI 표면 (sync / remember / learn / init prepare / install-skills)은 안정 + 단위 테스트 완료 (505 테스트). 에이전트 측 Hybrid variation 품질은 호스트 LLM이 `omd:init` 스킬 프롬프트를 얼마나 잘 따르는지에 좌우됩니다 — 검증 맵은 [`test/scenarios/WORKFLOWS.md`](test/scenarios/WORKFLOWS.md) 참고. 실 세션 결과 환영 — `.omd/init-context.json`과 결과 `DESIGN.md`를 첨부해서 이슈로 보고 부탁드립니다.
 
+### 업그레이드
+
+스킬·에이전트는 매 릴리스마다 진화합니다. 기존 프로젝트에서 최신 번들 받아오려면:
+
+```bash
+npx oh-my-design-cli@latest install-skills
+```
+
+Idempotent. 상단에 `<!-- omd:installed-skill -->` 마커가 있는 **관리 파일**은 in-place 갱신, 마커 없이 사용자가 수정한 파일은 `skipped-drift` 상태로 그대로 두기. 사용자 편집까지 정말 덮어쓰려면 `--force`.
+
+재실행 후 에이전트 재시작 (Cmd+Q in Claude Code → 재실행) — 새 스킬·에이전트 로드.
+
+**버전 확인:**
+
+```bash
+npx oh-my-design-cli --version       # 프로젝트에 깔린 버전
+npm view oh-my-design-cli version    # npm registry 최신
+```
+
+**각 릴리스 변경 내용:** [CHANGELOG.md](./CHANGELOG.md). 모든 릴리스 항목에 skill·agent·hook·CLI·data 변경 명시. re-install 외에 마이그레이션(예: `DESIGN.md` frontmatter 스키마 변경) 필요한 변경은 해당 entry 최상단에 표시.
+
 ## OmD v0.1 Philosophy Layer
 
 Google Stitch의 9개 섹션 위에 OmD가 더하는 6개:

package/README.md

@@ -37,6 +37,27 @@ Then restart your agent (Cmd+Q in Claude Code, then relaunch) so the new skills
 
 That is the only CLI command you will run. Everything else is natural language to your agent.
 
+## Upgrading
+
+Skills and agents evolve every release. To pick up the latest bundle in an existing project:
+
+```bash
+npx oh-my-design-cli@latest install-skills
+```
+
+Idempotent. Managed files (those carrying the `<!-- omd:installed-skill -->` marker at the top) are refreshed in place. Files you edited that don't have the marker are left untouched (status `skipped-drift`). Pass `--force` if you really want to overwrite your custom edits.
+
+Restart your agent after re-running so the refreshed skills + agents are loaded.
+
+**Check what's installed vs what's latest:**
+
+```bash
+npx oh-my-design-cli --version       # what your project currently uses
+npm view oh-my-design-cli version    # latest on the registry
+```
+
+**What's new each release:** [CHANGELOG.md](./CHANGELOG.md). Every release entry says what changed in the skills, agents, hooks, CLI, and data. If a change requires anything beyond a re-install — for example a migration of `DESIGN.md` frontmatter — it will be called out at the top of that entry.
+
 ## How to use omd with your AI
 
 Open Claude Code (or Codex / OpenCode) in your project. Just talk:
@@ -63,7 +84,7 @@ Open Claude Code (or Codex / OpenCode) in your project. Just talk:
 
 | Path | Owner | Purpose |
 |---|---|---|
-| `.claude/skills/omd-*/SKILL.md` | install-skills | Claude Code skill bundle (apply / harness / init / learn / remember / sync) |
+| `.claude/skills/omd-*/SKILL.md` | install-skills | Claude Code skill bundle (apply / harness / init / learn / remember / sync / reference-capture / asset-fetch / experiment-gallery) |
 | `.codex/skills/omd-*/SKILL.md` | install-skills | Codex skill bundle |
 | `.opencode/agents/omd-*.md` | install-skills | OpenCode agent bundle |
 | `.claude/agents/omd-*.md` | install-skills | 11 canonical sub-agents (master + 10 specialists) |
@@ -76,17 +97,23 @@ Open Claude Code (or Codex / OpenCode) in your project. Just talk:
 | `.omd/preferences.md` | omd-remember skill | Append-only design correction log |
 | `.omd/runs/<id>/` | omd-harness skill | Per-harness-run artifacts (briefs, wireframes, eval, handoff zips) |
 
-## The 6 skills + 11 agents
+## The 9 skills + 11 agents
 
 Skills (loaded into your agent's context based on prompt triggers):
 
+**Core flow**
 - **omd:apply** — DESIGN.md as authoritative context for every UI task. Routes complex requests (assets, charts, full screens, a11y audit) to specialized sub-agents.
 - **omd:init** — Bootstrap DESIGN.md from a reference + project description. 88 references, hybrid variation that preserves the reference voice while shifting only user-named axes.
-- **omd:harness** — `/omd-harness <task>` to run the 10-phase design pipeline with checkpoints. Spawns sub-agents in parallel.
+- **omd:harness** — `/omd-harness <task>` to run the 10-phase design pipeline. 7 hero archetypes (rule 9) match brand vibe to layout (center-text / carousel / split-screen / editorial / dashboard / quote-led / left-character). Reveal safety net (rule 10), wordmark-only logo (rule 5), container-inner consistency (rule 7), decomposed hero (rule 8).
 - **omd:remember** — Captures user corrections to `.omd/preferences.md` automatically when the agent detects them.
 - **omd:learn** — Folds pending corrections back into DESIGN.md by scope.
 - **omd:sync** — Maintains the shim files (CLAUDE.md / AGENTS.md / Cursor mdc) so every agent reads your DESIGN.md.
 
+**Live capture + assets** (v1.3.x)
+- **omd:reference-capture** — Live brand site CDP/playwright inspect → `assets/_reference/<id>/` with tokens.json + structure.json + fonts.json + `.live-inspect-proof.json` + screenshots + LICENSE-NOTE/attribution. Phase 3.9 browser-harness fast-path: 3-5× faster than playwright MCP when available.
+- **omd:asset-fetch** — Free-license asset catalog with verified URLs. DiceBear CC0 (notionists/lorelei avatars), Lucide ISC icons, Picsum CC0 / Loremflickr Flickr-CC photos, SIL OFL display fonts (Bricolage Grotesque / Space Grotesk / DM Serif Display / Fraunces). Strict anti-patterns: handcrafted character SVG forbidden, brand creative work never in product DOM.
+- **omd:experiment-gallery** — N-brand experiment results in a single comparison index.html. iframe scaled previews + wow ratings + multi-turn deltas + per-brand IP audit. Reusable across batches.
+
 Sub-agents — 1 orchestrator + 10 specialists (invoked by the master or directly by skills):
 
 - **omd-master** — Conversational state machine, runs the harness phases. opus.

package/data/issues/2026-05-13-multi-surface-schema-rfc.md

@@ -0,0 +1,67 @@
+# RFC: Multi-surface brand spec (deferred)
+
+**Status**: deferred / not blocking
+**Filed**: 2026-05-13
+**Trigger**: Banksalad mismatch — canonical DESIGN.md captured "advisor app" idiom, but `banksalad.com` is a "marketing landing" idiom. Generated landing.html was schema-faithful but didn't resemble the actual brand homepage.
+**Decision**: do NOT do this schema change now. Solve at the skill level first (see `data/issues/2026-05-13-multi-surface-schema-rfc.md` companion fix in commit history). Revisit only if skill-level fix proves insufficient after ~10 more brand additions or repeated user complaints about surface mismatch.
+
+---
+
+## Problem
+
+One brand can have visually distinct surfaces (marketing landing, in-app, docs, onboarding). The current `DESIGN.md`-per-brand schema implicitly picks ONE surface as canonical. Generators following the spec faithfully will mismatch when user requests a different surface.
+
+## Why we're deferring the schema change
+
+1. **Both prior-art systems we surveyed keep schema single**:
+   - Google Stitch treats variants/modes/devices as runtime workflows (sidebar items in their docs), not separate spec documents.
+   - getdesign.md allows N entries per brand with catalog-level tags, but actual catalog data shows 1 entry per brand in practice (e.g. Apple has 1 entry).
+   - W3C Design Tokens Community Group spec deliberately does NOT scope tokens by surface — leaves it to vendor `$extensions`.
+2. **Authoring cost scales poorly**: 88 brands × N surfaces is real maintenance overhead for marginal cases. Only ~10-15% of brands appear to have visually distinct landing/app idioms.
+3. **The Banksalad case is a generator priority bug, not a schema gap**. We already had `tokens.json#live_overrides` and screenshots — the generator just didn't weight them.
+4. **Backward compatibility**: 88 published references would all need migration. High blast radius for unclear payoff.
+
+## What might warrant revisiting
+
+- ≥3 distinct user reports of "this brand's generated output doesn't look like the real brand"
+- A new batch where ≥30% of brands exhibit landing-vs-app idiom split
+- AI coding agents adopting a multi-surface convention (W3C tokens spec, Stitch, etc. adding `surface` as a first-class field)
+
+## Sketch (if/when we do this)
+
+Probable shape based on the survey:
+
+- `web/references/<id>/DESIGN.md` stays — essence-leaning (voice, principles, motion philosophy, raw palette)
+- Optional `surfaces/<surface>.md` overlay files — delta only, frontmatter `surface: marketing|product|docs|onboarding`, `extends: ../DESIGN.md`
+- Generator reads essence + (one) overlay → composes
+- Closed enum chosen for AI determinism (Spectrum/Carbon precedent — productive vs expressive moment)
+- Only ~10-15% of brands need overlays — most stay single-doc
+
+## What we're doing instead (now)
+
+Skill-level fix shipping in v1.4.0 or similar:
+
+1. `omd:reference-capture` writes `structure.json` recording observable composition cues (hero type, CTA shape, nav structure, ornament style) — facts, not copyrighted content.
+2. `omd:apply` / `omd:harness` instructed to Read hero screenshots as images for visual grounding before composing.
+3. Token-resolution priority order documented: `tokens.json#live_overrides` > canonical DESIGN.md > `delta_set`. Brand essence (voice, principles, motion philosophy) stays canonical-only.
+4. `omd:harness` Step 4 master prompt includes a `surface_signal` field derived from task keywords (`랜딩`→marketing, `대시보드`→product, etc.). Master uses it to weight reference-capture artifacts vs canonical spec.
+
+The skill-level fix achieves the same Banksalad-landing outcome without any schema or migration work.
+
+## References (survey notes)
+
+- Stitch docs at `stitch.withgoogle.com/docs/design-md/overview` — sidebar nav includes `Device Types`, `Design Modes`, `Generate design variations` as separate workflows
+- getdesign.md catalog (`getdesign.md/apple`) — N-entries-per-brand with category tags at catalog level, but actual data has single entries
+- W3C Design Tokens spec `tr.designtokens.org` — `$extensions` escape hatch, no surface primitive
+- Material 3 (`m3.material.io`) — three-tier `ref/sys/comp` is vertical, not surface-horizontal
+- Carbon (`carbondesignsystem.com`) — theme axis (`white/g10/g90/g100`) is the closest to surface, but it's a single coarse dimension
+- Adobe Spectrum (`spectrum.adobe.com`) — `productive/expressive` moment is a 2-bucket idiom split; precedent for closed enum
+- shadcn/ui (`ui.shadcn.com`) — explicitly refuses the surface problem by shipping unstyled primitives
+
+---
+
+## Linked actions
+
+- [ ] Implement skill-level fix (4 items above) — target v1.4.0
+- [ ] After 3 more batches, re-evaluate whether skill fix is sufficient
+- [ ] If not, draft formal `omd: 0.2` schema following the surfaces/<name>.md sketch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oh-my-design-cli",
-  "version": "1.3.0",
+  "version": "1.3.9",
   "description": "Bootstrap oh-my-design skills + agents into your project. After install, talk to your AI coding agent in natural language — no other CLI commands.",
   "type": "module",
   "bin": {
@@ -16,6 +16,8 @@
     "skills/omd-remember",
     "skills/omd-sync",
     "skills/omd-reference-capture",
+    "skills/omd-asset-fetch",
+    "skills/omd-experiment-gallery",
     "agents",
     "data",
     "web/references/*/DESIGN.md",

package/skills/omd-apply/SKILL.md

@@ -53,10 +53,22 @@ dispatch가 아니라 인라인 처리로 분기됐을 때만 진행:
 
 1. 프로젝트 루트의 `DESIGN.md`를 **전체 읽는다**. 요약 금지, Read 툴로 직접 로드.
 2. `.omd/preferences.md`가 있으면 같이 읽는다. `status: pending` 엔트리는 아직 DESIGN.md에 반영 안 된 교정 — DESIGN.md보다 **우선** 적용.
-3. 우선순위:
+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) > DESIGN.md > framework defaults
+   .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 스킬 트리거. 임의 생성 금지.
 

package/skills/omd-asset-fetch/SKILL.md

@@ -0,0 +1,213 @@
+---
+name: omd:asset-fetch
+description: "사용자 product UI 생성 시 placeholder 자리를 generic SVG가 아닌 **실제 free-license CDN 자산**으로 채운다. 로고·일러스트·아이콘·사진·폰트·패턴 카탈로그를 verified URL만으로 운영. '에셋 가져와줘', '플레이스홀더 진짜 이미지로', '로고 자리 채워줘', 'unsplash에서 사진 가져와' 류 요청에 트리거. omd:apply / omd:harness 안에서 자동 호출됨."
+---
+
+# omd:asset-fetch — Free-license Asset Catalog
+
+## 왜 이 스킬
+
+"초안 같음" 결과물의 90%는 **placeholder가 너무 generic**이라서 — `[YOUR LOGO]` 점선 박스, organic blob SVG, "image placeholder" 회색 사각형. 사용자가 "와우" 못 느낌.
+
+이 스킬은 **모든 placeholder 자리에 verified free-license CDN 자산**을 박는 catalog. URL은 전부 200 OK 검증됨 (2026-05-14 기준).
+
+## 핵심 원칙
+
+1. **검증된 URL만**. 이 catalog에 없으면 generator가 임의로 만들지 말 것.
+2. **모든 자산은 commercial-use 허용** — 사용자 product에 ship 가능.
+3. **출처는 `assets/attribution.md`에 의무 기록** — URL + license + 사용 위치 + fetch 일자.
+4. **deterministic seeding 권장** — `seed` 또는 `lock` 파라미터로 결과 재현 가능. 매번 다른 이미지 나오는 random URL은 피할 것.
+5. **금지**: handcraft inline SVG로 placeholder를 "그려서" 채우기. catalog 자산 fetch 실패 시 → brand-color CSS gradient placeholder (이전 v1.3.4 fallback 정책과 동일).
+
+## Catalog (verified 2026-05-14)
+
+### 1. LOGO — product name **워드마크만** (v1.3.7부터)
+
+별도 icon / shapes mark / DiceBear logo 합성 **금지**. 헤더 logo = product name 텍스트 + 디스플레이 폰트, 그게 전부.
+
+**왜**: AI가 합성한 icon mark는 "generic"하게 보임 (사용자 frustration source). product 이름을 **꽤 괜찮은 폰트로** 그대로 박는 게 진짜 brand wordmark처럼 보이고 사용자가 1초만에 자기 product name으로 swap 가능.
+
+**패턴**:
+```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>
+```
+
+`<head>`에 디스플레이 폰트 `<link>` 의무 (§6 참고).
+
+**brand vibe별 폰트 매칭**:
+- cool / minimal / fintech serious → **Space Grotesk** 700 (geometric)
+- warm / playful / community → **Bricolage Grotesque** 700 (friendly variable)
+- editorial / luxury → **DM Serif Display** 또는 **Fraunces** (display serif)
+- bold / display → **Bricolage Grotesque** 800
+
+**`{{PRODUCT_NAME}}` 결정**:
+1. 사용자 prompt에 명시 product name 있으면 그대로 사용
+2. 없으면 brand vibe 맞는 generic placeholder 1개 선택 (omd-harness rule 5 §placeholder 표 참고: `Folio`, `Mint`, `Pop`, `Spark`, `Townie`, `Lane`, `Compass`, ...)
+3. 선택된 이름은 `<title>`, hero copy, footer brand 자리 전부 **일관 적용** (사용자 grep replace 1번이면 swap 끝)
+
+**금지 패턴 (v1.3.6 회귀 방지)**:
+- ❌ DiceBear `shapes` mark + wordmark 페어 — generic "AI 로고" 느낌
+- ❌ DiceBear `initials` 이니셜 chip — 이메일 아바타 같이 보임
+- ❌ 직접 그린 inline `<svg>` logo icon — 손그림 anatomy 회귀
+- ❌ `[YOUR LOGO]` / `[YOUR PRODUCT NAME]` 텍스트가 점선 박스 안에 그대로 — placeholder 티 폭발
+
+### 2. HERO 일러스트레이션 / 캐릭터
+
+**DiceBear avatars** (CC0) — v1.3.4부터 이미 사용 중. 5 스타일:
+
+| style | use case | URL pattern |
+|---|---|---|
+| `notionists` | financial advisor, business persona | `https://api.dicebear.com/9.x/notionists/svg?seed=<seed>&size=520` |
+| `lorelei` | warm, approachable | `https://api.dicebear.com/9.x/lorelei/svg?seed=<seed>&size=520` |
+| `personas` | diverse persona | `https://api.dicebear.com/9.x/personas/svg?seed=<seed>&size=520` |
+| `adventurer` | active, mobility | `https://api.dicebear.com/9.x/adventurer/svg?seed=<seed>&size=520` |
+| `fun-emoji` | warm, casual commerce | `https://api.dicebear.com/9.x/fun-emoji/svg?seed=<seed>&size=520` |
+
+생성기는 brand의 voice register 또는 surface signal에 맞춰 style 선택 — 예: 핀테크 advisor → `notionists`, 커뮤니티 커머스 → `lorelei` 또는 `fun-emoji`.
+
+**금지** (v1.3.4부터 누적, 자주 어겨지므로 재명시):
+- handcraft inline SVG 캐릭터 — 손그림 stick figure 합성 절대 금지
+- 캐릭터 일러스트를 우리 generator가 직접 inline `<path>`로 그리지 말 것
+- CDN fetch 후 다운로드한 파일 첫 부분에 `<!-- dicebear-fetched: <full URL> | <ISO> -->` 코멘트 박을 것 — 후속 audit gate가 검증
+
+### 3. ICONS — feature 카드, nav, product 카테고리
+
+**Lucide** (ISC) — 한 줄 1500+ 아이콘
+- URL: `https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/<name>.svg`
+- 예시: `credit-card`, `home`, `landmark`, `shield-check`, `trending-up`, `book-open`, `map-pin`, `bell`, `heart`, `search`, `user`, `chevron-right`, `arrow-right`, `external-link`, `play`, `bar-chart-3`
+
+**Heroicons** (MIT)
+- URL: `https://cdn.jsdelivr.net/npm/heroicons@2/24/outline/<name>.svg`
+- outline + solid family
+
+**Tabler Icons** (MIT)
+- URL: `https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/<name>.svg`
+
+색상 적용: SVG inline 후 `currentColor` / `stroke="..."` 변경, 또는 CSS filter
+
+### 4. PHOTOS — product 카드, hero 배경, testimonial 아바타
+
+**Lorem Picsum** (CC0 — Unsplash-derived rehosting)
+- random photo: `https://picsum.photos/<w>/<h>` (매 호출 다름)
+- **deterministic** (권장): `https://picsum.photos/seed/<seed>/<w>/<h>`
+  - seed는 `<brand>-product-01`, `<brand>-hero-01` 식으로 의미 부여
+- grayscale: `?grayscale`
+- blur: `?blur=2`
+- 예: `https://picsum.photos/seed/musinsa-card-1/400/500` → musinsa product 카드 자리에 들어갈 결정적 이미지
+
+**Loremflickr** (Flickr CC) — 키워드 매칭 + deterministic
+- URL: `https://loremflickr.com/<w>/<h>/<keyword>/all?lock=<n>`
+- 한국 컨텍스트 키워드: `seoul`, `korean,food`, `cafe,interior`, `apartment,korea`
+- `?lock=N`로 결정적 출력
+- 예: `https://loremflickr.com/600/400/seoul,city/all?lock=42` → 서울 도시 사진 결정적
+
+**사용 가이드**:
+- product 카드: Picsum seed로 시리즈 일관성 (`<brand>-product-1`, `-2`, `-3` ...)
+- hero 배경 photo (필요 시): Loremflickr 키워드 매칭
+- testimonial 아바타: DiceBear `lorelei` 또는 `notionists` (people 사진 placeholder 보다 일관)
+- 사진이 brand idiom과 안 맞으면 (예: musinsa editorial은 photo 자리에 색면 placeholder가 더 맞음) → 사용 안 함
+
+**금지**:
+- 실제 brand가 운영하는 CDN URL (`cdn.banksalad.com/...` 등)은 product DOM에 hot-link 금지 — TOS·IP 영역
+- 특정 인물 사진을 brand mascot처럼 박지 말 것
+
+### 5. PATTERNS / BACKGROUNDS
+
+**Hero Patterns** (CC BY 4.0) — `https://heropatterns.com` — SVG 도큐 보고 inline 복사
+- 라이센스에 따라 `assets/attribution.md`에 CC BY 표기 의무
+
+**CSS 자체 생성** — abstract gradient ornament는 generator가 직접:
+```css
+.hero-ornament {
+  position: absolute; inset: -100px -200px auto auto;
+  width: 480px; height: 280px;
+  background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
+  filter: blur(120px); opacity: 0.4;
+  pointer-events: none; z-index: 0;
+}
+```
+이건 brand-specific creative work 아님 — 우리가 직접 그려도 무방.
+
+### 6. FONTS
+
+기존 `omd:reference-capture` Phase 3.5의 fonts.json catalog와 동일. SIL OFL / open-source만:
+- Pretendard, Wanted Sans, Noto Sans KR, Inter — jsdelivr / Google Fonts CDN
+
+**디스플레이/액센트 폰트** (logo / hero 헤드라인용, SIL OFL):
+- **DM Serif Display** (Google Fonts) — 우아한 serif display
+  - `https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap`
+- **Space Grotesk** (SIL OFL) — modern geometric sans
+  - `https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap`
+- **Fraunces** (SIL OFL) — display serif
+  - `https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&display=swap`
+- **Bricolage Grotesque** (SIL OFL) — modern display
+  - `https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700&display=swap`
+
+`[YOUR PRODUCT NAME]` 자리를 폼나게 만들 때 위 display 폰트 + `letter-spacing: -0.03em` + `font-weight: 600` 정도가 polish 시작점.
+
+## Attribution 의무
+
+모든 자산 사용 시 `assets/attribution.md`에 다음 형식으로 기록:
+
+```markdown
+# Asset Attribution
+
+Generated by `omd:asset-fetch` on <ISO-date>.
+
+## Used Assets
+
+| Asset | Source URL | License | Used at |
+|---|---|---|---|
+| Hero character | `https://api.dicebear.com/9.x/notionists/svg?seed=X&size=520` | CC0 | landing.html#L148 |
+| Logo wordmark | `Folio` rendered in Bricolage Grotesque 700 (SIL OFL via Google Fonts) | SIL OFL | landing.html header `.logo-wordmark` |
+| Product card 1 photo | `https://picsum.photos/seed/musinsa-card-1/400/500` | CC0 (Picsum) | landing.html#L412 |
+| ... | ... | ... | ... |
+
+## License Summary
+
+- CC0 자산: 무제한 commercial 사용
+- CC BY 4.0 자산 (Hero Patterns 등): 사용 시 attribution 의무 — 이 파일이 attribution 역할
+- SIL OFL 폰트: 폰트 자체 redistribution은 라이센스에 따름; 웹페이지 임베드는 자유
+```
+
+## 호출 패턴
+
+이 스킬은 **omd:apply / omd:harness가 내부적으로 호출**하는 룩업 catalog. 사용자가 명시적으로 부를 일은 드묾.
+
+| 호출 컨텍스트 | 액션 |
+|---|---|
+| omd:harness가 hero 일러스트 자리 채울 때 | §2 DiceBear avatar URL fetch |
+| omd:apply가 product 카드 N개 그릴 때 | §4 Picsum seeded URL 사용 |
+| omd:harness가 헤더 logo 자리 만들 때 | §1 워드마크-only 패턴 (디스플레이 폰트 + product name, icon mark X) |
+| omd:harness가 feature 카드 아이콘 정할 때 | §3 Lucide URL |
+| 사용자가 직접 "사진 자료 가져와줘" 요청 | 사용자 의도 확인 후 §4 Picsum / Loremflickr |
+
+## 검증 gate
+
+생성된 HTML 작성 직후 self-audit:
+
+1. `grep -E '<svg[^>]*>(\s*<path d="M[0-9.,\sCQ-]+"\s*/?>)' landing.html` — handcrafted inline svg path 개수 확인. 차트(.hero-chart) 외에 0이어야 함.
+2. `grep -E '\[YOUR LOGO\]|\[YOUR PRODUCT NAME\]' landing.html` — placeholder 텍스트 남아있나? 있으면 §1 패턴으로 교체.
+3. `grep -E 'assets/attribution\.md' landing.html` 또는 attribution.md 파일 존재 확인.
+4. `grep -E 'placeholder|TBD|TODO|FIXME' landing.html` — sub-agent가 lazy fallback 남겼나? 0이어야 함.
+
+## 안티패턴 (절대 금지)
+
+- ❌ generator가 inline SVG로 캐릭터·로고·아이콘·일러스트 "그리기"
+- ❌ catalog에 없는 임의 CDN URL 추측 (e.g. "https://example.com/cool-illustration.svg" 같은 거짓 URL)
+- ❌ brand가 운영하는 CDN URL hot-link (cdn.banksalad.com 등)
+- ❌ 사용자 product에 [YOUR LOGO] 점선 박스 그대로 ship — §1 패턴으로 교체 의무
+- ❌ attribution.md 생략
+
+## 한 줄 요약
+
+**모든 placeholder = catalog fetch + attribution. handcraft inline graphics 0.**

package/skills/omd-experiment-gallery/SKILL.md

@@ -0,0 +1,164 @@
+---
+name: omd:experiment-gallery
+description: "N개 brand experiment를 한 화면에서 비교하는 gallery index.html을 생성. 각 카드는 brand name, wow rating, multi-turn refinement deltas, iframe scaled preview, standalone link 포함. '결과물 한 번에 보여줘', '갤러리 만들어', '5개 비교 뷰', 'experiment 결과 정리' 류 트리거. omd:harness가 N개 brand batch 작업 끝낸 직후 자동 호출되거나 사용자가 명시적으로 호출."
+---
+
+# omd:experiment-gallery — N-brand comparison index
+
+## 왜 이 스킬
+
+여러 brand experiment를 돌리고 나면 결과물 검수가 산만 — 각 폴더 따로 열고 비교하기 번거로움. 이 skill은 **단일 `index.html`** 에 N개 결과를 iframe으로 박아서 한 화면에서 wow ratings + deltas + 실제 렌더를 동시 확인.
+
+## 트리거
+
+- 명시: "결과물 한 번에 보여줘", "갤러리 만들어", "N개 비교 뷰"
+- 묵시: 사용자가 omd:harness로 ≥2개 brand experiment를 한 batch에서 끝낸 직후 ("이제 비교해보자" 라는 흐름)
+- 다른 skill 안에서 호출: omd:batch-launch가 5개 brand 끝낸 후 Phase 5로 호출
+
+## 입력
+
+다음 둘 중 하나:
+
+1. **명시 디렉토리 list**: 사용자가 `/tmp/omd-gallery/{brand1,brand2,brand3}` 같은 list 제공
+2. **부모 디렉토리 + glob**: `/tmp/omd-gallery/*` 또는 `web/experiments/2026-05/*` 등 — skill이 자동 enumerate
+
+각 brand 디렉토리는 다음 파일들 있어야 함 (있으면 사용, 없으면 fallback):
+- `landing.html` (필수) — iframe src
+- `DESIGN.md` (선택) — brand display name 추출
+- `assets/_reference/<id>/structure.json` (선택) — composition 메타
+- `assets/_reference/<id>/.live-inspect-proof.json` (선택) — live tag 표시
+- `screenshots/after.png` (선택) — fallback preview
+- `experiment-meta.json` (선택, 권장) — wow rating + round-2 deltas + 카테고리 — sub-agent가 작성
+
+## experiment-meta.json 스키마 (sub-agent가 작성)
+
+각 experiment sub-agent는 work 종료 직전 다음 파일을 작성:
+
+```json
+{
+  "brand_id": "toss",
+  "brand_korean": "토스",
+  "brand_category": "Fintech",
+  "brand_color_hex": "#3182f6",
+  "wow_rating": 7.5,
+  "lines": 603,
+  "live_inspect": { "ran": true, "raw_samples": 7, "method": "playwright|harness" },
+  "round2_deltas": [
+    "Reveal failsafe — 2s forwards animation",
+    "Stat-card narrative upgrade",
+    "CTA copy 구체화 (시간 약속)",
+    "Hero shimmer (accent text gradient)",
+    "Dark marquee band rhythm break",
+    "Chart stroke-dashoffset draw-in"
+  ],
+  "ip_compliance": {
+    "your_logo_placeholders": 2,
+    "your_product_name_placeholders": 4,
+    "brand_logo_embed_count": 0,
+    "verbatim_brand_copy": 0
+  },
+  "honest_gaps": [
+    "Hero composition은 single character + flat card (3D ornament 부재)",
+    "Carousel은 dot만 회전 (slide content 미스왑)"
+  ]
+}
+```
+
+skill이 이 파일을 읽어 gallery 카드의 wow / lines / deltas 영역 채움. 없으면 brand_id만으로 minimal 카드.
+
+## 출력
+
+### 1. `<output-dir>/index.html` (메인 산출물)
+
+다음 구조:
+
+- 헤더: title (사용자가 batch 명령에서 받은 raw — "한국 brand 5선" 등), kicker (date · brand 수), meta (version · skill chain · mode)
+- main grid: brand 1개당 card 1개
+  - card head: brand mark (CSS-generated initial chip 또는 DiceBear shapes if brand has known color) + 한글명 + id + wow rating
+  - frame-wrap: aspect-ratio 16:10 iframe (scale 50%로 200%×200% iframe rendering — 모바일은 100%)
+  - card foot: voice note 1줄 + tags chips + round-2 deltas ol
+- footer summary: 모든 brand wow/lines/proof/round-2 핵심 1줄 테이블
+- system-note: 적용된 skill 버전의 시스템 fix들 한 단락
+
+### 2. CSS 스타일 가이드
+
+- typography: Pretendard from jsdelivr (SIL OFL). 디스플레이는 본문 헤더에만 (`clamp(36px,4.4vw,56px) / weight 800 / letter-spacing -0.04em`)
+- 다크 surface (`#0b0d10`) — gallery는 dark mode가 정석 (검토 환경 자체가 광원이 되도록)
+- accent: gradient `linear-gradient(135deg, #7c5cfc 0%, #fa2e5f 50%, #04c584 100%)` — Stripe-like
+- card: `bg #13161b`, border `#252b35`, hover `border #7c5cfc` + `translateY -2px`
+- 반응형: ≥1100px 2-col grid, <1100px 1-col
+
+### 3. iframe scaling
+
+```css
+.frame-wrap { aspect-ratio: 16/10; background: #fff; overflow: hidden; position: relative; }
+.frame-wrap iframe {
+  position: absolute; top: 0; left: 0;
+  width: 200%; height: 200%;
+  transform: scale(.5); transform-origin: top left;
+  border: 0;
+}
+.open-link {
+  position: absolute; top: 12px; right: 12px;
+  background: rgba(11,13,16,.7); color: #fff;
+  padding: 6px 12px; border-radius: 999px;
+  font-size: 11px; backdrop-filter: blur(8px);
+}
+```
+
+200% × scale(.5)는 모바일 viewport에서도 데스크탑 layout 그대로 렌더하기 위함 (iframe 본인은 1280-1920px 가정).
+
+### 4. 정적 vs 서버 모드
+
+- iframe src는 **상대 경로** (`./toss/landing.html`) — 정적 file:// open 안 됨 (CORS), `python3 -m http.server <port>` 추천
+- skill 끝에 사용자에게 "서버 띄우는 명령" 출력:
+  ```
+  cd <output-dir> && python3 -m http.server 8770
+  open http://localhost:8770/index.html
+  ```
+
+## 실행 절차
+
+1. **입력 검증**: 디렉토리 list parsed, 각 디렉토리에 `landing.html` 존재 확인. 없으면 그 brand는 skip + 사용자에게 알림.
+
+2. **meta 수집**: 각 brand 디렉토리에서:
+   - `experiment-meta.json` 있으면 그대로 사용
+   - 없으면 `DESIGN.md` frontmatter에서 `brand` 추출, `landing.html`에서 `<title>` 추출 → minimal card
+   - `structure.json`이 있으면 hero.type / cta.dominant_shape 정도를 tag로 추가
+   - `.live-inspect-proof.json` 존재 → "live ✓" tag, raw_samples 수 표시
+
+3. **brand mark 생성**: brand_color_hex가 있으면 색칩 div에 첫 글자. 없으면 회색 fallback.
+
+4. **gallery HTML 작성**: 위 CSS + 카드 구조로 출력. `<output-dir>/index.html`에 write.
+
+5. **사용자 요약**:
+   ```
+   ✓ Gallery 생성: <output-dir>/index.html
+     - 카드 N개 · wow 평균 X.X · live-inspect 통과 Y/N
+     - 서버 띄우는 법: cd <output-dir> && python3 -m http.server 8770
+     - 열기: http://localhost:8770/index.html
+   ```
+
+## 멀티턴 self-feedback 옵션 (v1.3.6 신설)
+
+`browser-harness` 또는 `mcp__playwright__*` 가용 시, gallery 생성 후 **gallery 자체에 self-critique 라운드**:
+
+1. gallery index.html을 browser-harness로 열어 screenshot
+2. 각 brand 카드의 iframe rendering이 정상인지 (빈 화면 / 깨진 layout / 누락 자산) 시각 grading
+3. 발견된 문제 brand에 대해 **issue.md** 작성 (`<output-dir>/issues.md`):
+   ```markdown
+   # Gallery issues — auto-detected via browser-harness
+   - toss: hero section reveals empty (IntersectionObserver fired but skill rule 10 safety net missing) — re-run with v1.3.6
+   - karrot: product card photo 3 fails to load (Loremflickr 503) — fallback to Picsum needed
+   ```
+4. 사용자에게 issues.md 안내 + 자동 fix 진행 여부 묻기
+
+## 안티패턴 (절대 금지)
+
+- ❌ Brand 디렉토리 안의 자산을 gallery에 직접 복사 (iframe으로만 reference)
+- ❌ Brand creative work 재구성 (각 brand의 own landing.html이 self-contained — gallery는 그 wrapper일 뿐)
+- ❌ wow rating 임의 부여 (sub-agent의 honest assessment가 출처)
+
+## 한 줄 요약
+
+**N개 brand experiment → 1개 index.html. iframe scaled, wow rating, round-2 deltas, system-fix summary. 재사용 무한.**