oh-my-design-cli 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oh-my-design-cli",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "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": {
@@ -15,6 +15,7 @@
     "skills/omd-learn",
     "skills/omd-remember",
     "skills/omd-sync",
+    "skills/omd-reference-capture",
     "agents",
     "data",
     "web/references/*/DESIGN.md",

package/skills/omd-harness/SKILL.md

@@ -170,6 +170,20 @@ DESIGN.md가 없어서 reference 한 개를 골라 부트스트랩할게요. <ta
 - 카탈로그에 없는 id → "해당 id는 reference 카탈로그에 없어요. top-5 중에서 골라주세요."
 - `중단` → 종료
 
+### 3.7 (선택) 라이브 reference capture 권유
+
+선택된 reference의 라이브 사이트에서 디자인 토큰 + 시각 reference를 가져오면 master phase 정확도가 올라간다 (특히 Components / Microcopy 단계). 사용자에게 한 줄로 묻기:
+
+```
+선택하신 <id>의 라이브 사이트(예: <homepage>)에서 디자인 토큰 + 로고 + hero screenshot을 가져올까요? assets/_reference/<id>/ 에 저장됩니다 (reference 용도, 사용자 product에 직접 ship 금지).
+yes/no/skip-this-time
+```
+
+`yes` → omd:reference-capture skill 호출 (Skill 툴) → 끝나면 Step 4로
+`no/skip` → 바로 Step 4
+
+omd:reference-capture는 자체적으로 LICENSE-NOTE.md / attribution.md를 작성하며 brand IP 가드레일을 가지고 있다. 자세한 동작은 `skills/omd-reference-capture/SKILL.md` 참조.
+
 ## Step 4 — Master 호출 (handoff loop)
 
 Subagent (master)는 AskUserQuestion 직접 호출 불가 (main-thread 전용). file-based handoff 패턴으로 돌린다.

package/skills/omd-init/SKILL.md

@@ -5,157 +5,247 @@ description: "프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기
 
 # omd:init — DESIGN.md Bootstrap
 
-프로젝트에 DESIGN.md + 4개 AI 코딩 에이전트용 shim을 한 번에 세팅한다. 레퍼런스 톤&매너는 **preserve**하고, 사용자 프로젝트 맥락은 controlled-vocabulary delta_set으로만 반영.
+프로젝트에 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: 레퍼런스 추천 (omd init recommend)
+Phase 2: 레퍼런스 추천 (fingerprint 기반 in-head 점수)
 Phase 3: 사용자가 1개 선택
-Phase 4: omd init prepare — context + delta_set 준비
-Phase 5: Hybrid variation으로 DESIGN.md 생성 (이 스킬의 핵심)
-Phase 6: omd sync --force로 shim 3종 설치
+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개** 질문:
+이미 충분한 description이 있으면 skip. 부족하면 **최대 2개** 질문:
 
 1. 프로젝트 유형/도메인 (SaaS / 랜딩 / 대시보드 / 이커머스 / 커뮤니티 등)
-2. 분위기 키워드 (warm, minimal, premium, playful, dense, airy 등) — controlled vocab 참조 유도
+2. 분위기 키워드 (warm, minimal, premium, playful, dense, airy 등)
 
-여러 질문을 한꺼번에 쌓지 말 것. 한 번에 하나씩, 또는 통합해서 한 번에.
+한 번에 하나씩, 또는 통합해서 한 번에. 질문 쌓지 말 것.
 
-## Phase 2 — 레퍼런스 추천
+## Phase 2 — 레퍼런스 추천 (file-based, no CLI)
 
-Bash:
-```bash
-omd init recommend "<사용자 description 전체>" --json
-```
+### 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)
 
-JSON 출력에서:
-- `recommendations` — top 5 references (id, category, score, matchedKeywords)
-- `delta_set` — description에서 추출된 controlled vocab 기반 축 이동
-- `delta_set.warnings` — conflict (e.g. "formal ↔ playful")
-- `delta_set.matchedKeywords` — 실제 매칭된 vocabulary 키워드
+사용자의 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
 
-사용자에게 제시할 때:
-- 5개 레퍼런스를 번호 + 한 줄 설명으로 나열 (description에 매칭된 keyword 1-2개 강조)
-- warnings 있으면 먼저 알린다: "formal과 playful이 충돌해요. 'primarily playful'처럼 한쪽을 우선시하면 변형에 더 잘 반영됩니다."
+### 2.3 점수 계산 (in-head, deterministic)
 
-## Phase 3 — 레퍼런스 선택
+각 item에 대해:
+- brand hint match → **+5점**
+- `tone_keywords` ∩ task vocab 키워드 → 매칭당 **+1점**
+- `category` 일치 → **+1점**
 
-사용자가 레퍼런스를 고르면 Phase 4로. `omd init recommend`의 출력에 없는 레퍼런스를 요청하면 그대로 사용 (e.g. "stripe로 해줘").
+Top 5 정렬. 모든 추천 id는 `items[].id`에 **반드시** 존재 — hallucination 금지.
 
-## Phase 4 — Prepare
+### 2.4 사용자에게 제시
 
-```bash
-omd init prepare --ref <id> --description "<원본 description>" --json
+prose로:
+
+```
+"<task 핵심 한 줄>"을 보니 <top1.id>가 가장 잘 맞을 것 같아요 — <visual_theme 핵심 한 줄 + 매칭 키워드 1-2개>.
+
+이대로 가시려면 go (또는 <top1.id>).
+다른 후보: <top2.id> (한 줄 이유) · <top3.id> (...) · <top4.id> (...) · <top5.id> (...)
+본인이 아는 다른 reference 있으면 id로 알려주세요 (예: vercel) — 카탈로그에 없으면 알려드립니다.
 ```
 
-이게 하는 일:
-- `web/references/<id>/DESIGN.md` 경로 확정 (JSON에 `reference_md` 필드로 전체 내용 포함)
-- 기존 `DESIGN.md`가 있으면 → `DESIGN_DEPRECATED.md`로 rename (메타 헤더 자동 삽입)
-- `.omd/init-context.json` 작성 (`delta_set`, `description` 담김)
+vocab axis conflict 있으면 (예: formal ↔ playful) 먼저 알리고 우선시할 축을 묻기.
+
+## Phase 3 — 사용자 선택
+
+- `go` 또는 top-5 안 id → 그 id 채택
+- top-5 밖이지만 카탈로그 안 id → 그대로 채택
+- 카탈로그에 없는 id → "해당 id는 카탈로그에 없어요. top-5 중에서 골라주세요."
+- "중단" → 종료
+
+## Phase 4 — 레퍼런스 DESIGN.md 로드
 
-JSON 출력의 `reference_md`는 variation의 input이다. Read.
+### 4.1 경로 결정
+
+선택된 id를 `<id>`로 하고, 다음 순서로 Read:
+
+1. `.claude/data/references/<id>/DESIGN.md`
+2. `node_modules/oh-my-design-cli/web/references/<id>/DESIGN.md`
+3. `web/references/<id>/DESIGN.md` (개발 환경)
+
+전체 내용을 `reference_md` 변수로 보관 (Phase 5의 입력).
+
+### 4.2 기존 DESIGN.md 처리
+
+프로젝트 루트에 이미 `DESIGN.md`가 있으면:
+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>",
+  "delta_set": {
+    "axes": { /* description에서 추출한 vocab axis ↦ shift 값 */ },
+    "voiceHints": [ /* 추출된 voice 힌트 */ ],
+    "matchedKeywords": [ /* 매칭된 vocab 키워드 */ ],
+    "warnings": [ /* axis conflict 등 */ ]
+  },
+  "bootstrapped_at": "<ISO-8601>"
+}
+```
+
+`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에 기반**한다 — 창립년도, founder 이름, verbatim 인용, 공식 tagline 등. 이걸 단순 domain swap하면 **사용자 프로젝트에 거짓 brand claim을 ship**하는 사고가 난다.
+§11 (Brand Narrative), §12 (Principles), §13 (Personas)는 레퍼런스의 검증된 historical facts에 기반. 단순 domain swap하면 거짓 brand claim을 ship하는 사고가 난다.
 
-따라서 Phase 5B 진입 전에 사용자에게 다음 정보를 묻는다 (한 번에):
+Phase 5B 진입 전 사용자에게 한 번에 묻기:
 
 ```
 DESIGN.md의 §11-13 (Brand Narrative / Principles / Personas)에는 사실 정보가 들어갑니다. 다음을 알려주시거나 "skip"이라고 답해주세요:
 
 1. 프로젝트 이름 / 창립 시점 (대략)
 2. 핵심 thesis 한 문장 (e.g. Airbnb의 "Belong Anywhere")
-3. 공식 tagline 또는 거부하는 카테고리 default (e.g. "혼밥 시대의 가족 식사")
-4. 타겟 사용자 segment 2-4개 (e.g. "맞벌이 부부", "Chef Partner", "재구매 가족")
+3. 공식 tagline 또는 거부하는 카테고리 default
+4. 타겟 사용자 segment 2-4개
 
-답변 받으면 → Phase 5B에서 §11-13에 반영
-"skip" → §11-13은 [FILL IN: ...] placeholder + omd:limitation 코멘트로 처리
+답변 받으면 → §11-13에 반영
+"skip" → §11-13은 [FILL IN: ...] placeholder + omd:limitation 코멘트
 ```
 
-사용자가 부분 답변(예: 1만, 4만)을 주면 받은 부분만 사용하고 나머지는 skip 처리.
+부분 답변은 받은 부분만 사용, 나머지 skip.
 
 ## Phase 5 — Hybrid Variation 생성 (핵심)
 
-`.omd/init-context.json`의 `delta_set`과 Phase 4 JSON의 `reference_md`를 입력으로, **새 DESIGN.md를 작성**한다.
+`reference_md` + `.omd/init-context.json` `delta_set`을 입력으로 새 `DESIGN.md` 작성.
 
 ### Phase 5A — Voice Fingerprint 내부 추출 (silent)
 
-출력하지 말 것. 작성 전, 레퍼런스 DESIGN.md에서 다음을 머릿속으로 파악:
-- 평균 문장 길이 밴드 (짧음/중간/긺)
+출력 금지. 작성 전 머릿속으로 파악:
+- 평균 문장 길이 밴드
 - 어휘 register (engineering-terse / editorial-warm / clinical / playful 중)
-- 은유 밀도 (없음/희소/빈번)
+- 은유 밀도
 - 기술 밀도 (token-heavy / prose-heavy / balanced)
 - 문단 리듬 (list-forward / paragraph-forward)
 
-Phase 5B에서 emit하는 모든 내러티브 문단은 이 fingerprint에 **정확히** 맞춰야 한다.
+Phase 5B emit하는 모든 내러티브를 이 fingerprint에 정확히 맞춰야 한다.
 
 ### Phase 5B — 새 DESIGN.md emit
 
 **엄격 규칙 (위반 = regression)**:
 
-1. **Section 구조 frozen.** 레퍼런스의 H2/H3 heading을 같은 순서로 그대로. 새 섹션 추가 금지. 삭제 금지. 이름 변경 금지.
+1. **Section 구조 frozen**: 레퍼런스의 H2/H3 heading을 같은 순서로 그대로. 추가/삭제/이름 변경 금지.
 
-2. **Token 값은 `delta_set`가 허가한 것만 변경.** `delta_set.axes`에 없는 토큰은 레퍼런스와 **byte-for-byte 동일**하게. "개선"하지 말 것. 색상 hex는 `delta_set.axes["color.hue_deg"]` / `["color.saturation_pct"]` / `["color.lightness_pct"]` 에 따라 **HSL** 변환으로 shift (도 단위 hue rotation, % 단위 saturation/lightness 가산). 정확한 hex 계산이 필요하면 `omd init prepare --json` 의 출력에 이미 적용된 stub-shifted DESIGN.md를 활용 가능 (단 stub은 narrative를 손대지 않으므로 token-only baseline일 뿐임 — voice 작업은 직접 수행).
+2. **Token 값은 `delta_set`가 허가한 것만 변경**:
+   - 색상: HSL 변환 후 `color.hue_deg` / `saturation_pct` / `lightness_pct` 적용. 미허가 hex는 byte-for-byte 동일.
+   - radius: `radius.delta_px`만큼 가산 (음수도 가능).
+   - 그 외 토큰은 손대지 말 것. "개선" 금지.
 
-3. **내러티브 프로즈는 Phase 5A fingerprint에 매칭.** 도메인 예시를 프로젝트 맥락으로 교체할 때, 레퍼런스의 문장 길이/register/은유 밀도 그대로 유지. Vercel의 "Ship a deploy preview in seconds"를 "Ship a meal plan in seconds"로 바꾸는 건 OK. "Help families discover joyful dinners fast"로 바꾸는 건 voice violation.
+3. **내러티브는 Phase 5A fingerprint에 매칭**: 도메인 예시 교체 시 문장 길이/register/은유 밀도 그대로. 명사만 swap, 동사/형용사/framing 손대지 말 것.
 
-4. **Domain swap은 구체 명사만.** 동사 / 형용사 / framing 건드리지 말 것.
+4. **새 philosophy 도입 금지**: OmD v0.1 layer, 없던 원칙 추가 금지. delta-derived 노트는 새 bullet으로 넣지 말고 기존 bullet에 자연스럽게 통합.
 
-5. **새 philosophy 도입 금지.** OmD v0.1 레이어, 없던 원칙을 추가하지 말 것. **Delta-derived 노트(예: "+0.005em casual tracking")도 새 bullet으로 넣지 말 것.** 기존 bullet에 자연스럽게 통합 (e.g. "Negative tracking on headings; light positive tracking on body for casual register").
+5. **해결 불가능 delta는 top-of-file HTML comment**: `<!-- omd:unresolved: <axis> -->` 상단 추가, 해당 token은 건드리지 않음.
 
-6. **해결 불가능한 delta는 top-of-file HTML comment로 표시.** `delta_set.axes`가 참조하는 token이 레퍼런스 DESIGN.md에 없으면 `<!-- omd:unresolved: <axis> -->` 상단 추가하고 해당 token은 건드리지 않는다.
+6. **Voice hints 반영**: `delta_set.voiceHints`는 Voice 섹션 내러티브에 반영하되 레퍼런스 voice 스타일 안에서만. "contractions ok" → Voice 원칙 bullet에 한 줄 추가.
 
-7. **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. **§11-13 (Brand Narrative / Principles / Personas) 처리 분기.**
-   - **Phase 4.5에서 사용자가 정보를 제공한 경우**: 그 정보로 §11/12/13 작성. 단 verbatim 인용은 사용자가 직접 준 표현만 인용 부호로 감싸고, 그 외는 일반 prose. 레퍼런스의 시간 표현("In July 2014..."), 공식 인용 등은 모두 사용자 프로젝트 맥락으로 대체.
-   - **Phase 4.5에서 skip한 경우**: §11-13 본문을 `[FILL IN: <섹션 목적 한 줄>]` placeholder로 emit + 각 섹션 상단에 `<!-- 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.
+Write 툴로 `DESIGN.md` emit.
 
 ## Phase 6 — Shim 설치
 
-```bash
-omd sync --force
+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 작성. 템플릿은 `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 인용
 
-이게 `CLAUDE.md`, `AGENTS.md`, `.cursor/rules/omd-design.mdc`를 생성/갱신하고 `.omd/sync.lock.json`을 업데이트한다.
+이후 `.omd/sync.lock.json`에 각 shim의 hash 기록.
 
 ## Phase 7 — 요약 출력
 
 한 문단으로:
 - Base reference + 프로젝트 context 한 줄 요약
-- 적용된 주요 delta 2-3개 (e.g. "primary hex shifted warm by +12°, radius +4px")
+- 적용된 주요 delta 2-3개 (e.g. "primary hue shifted warm by +12°, radius +4px")
 - 생성된 파일 목록 (DESIGN.md + shims)
 - DESIGN_DEPRECATED.md 있으면 언급
-- 다음 스텝: `omd:apply`로 UI 작업 시작하거나, `/omd:remember`로 선호 추가 로깅
+- 다음 스텝: `omd:apply`로 UI 작업 시작 또는 `omd:harness`로 전체 surface 디자인 또는 `omd:remember`로 선호 추가 로깅
 
 예시:
 ```
-✓ DESIGN.md created (based on Airbnb, warm B2C marketplace context)
-  - primary hue shifted +12° (warmer coral)
-  - radius +6px (softer approach)
-  - voice hints: contractions ok, second person
+✓ DESIGN.md created (based on banksalad, 한국 핀테크 랜딩 맥락)
+  - primary hue 유지 (#04c584 그대로)
+  - radius 유지 (2px 시스템)
+  - voice hints: 데이터 어드바이저 톤
 
 Shim files:
-  ✓ CLAUDE.md
-  ✓ AGENTS.md
+  ✓ CLAUDE.md (managed block)
+  ✓ AGENTS.md (managed block)
   ✓ .cursor/rules/omd-design.mdc
 
 Next:
-  - Start UI work — the omd:apply skill will inject DESIGN.md automatically
-  - Use `/omd:remember <note>` anytime you want to log a design preference
+  - UI 작업 시작 → omd:apply로 자동 라우팅됨
+  - 전체 surface 디자인 (랜딩, 대시보드 등) → omd:harness
+  - 디자인 선호 로깅 → /omd:remember <note>
 ```
 
 ## 금지
@@ -163,5 +253,6 @@ Next:
 - Phase 5A fingerprint를 출력하지 말 것 (내부 전용).
 - `delta_set.axes`에 없는 token을 마음대로 바꾸지 말 것.
 - 레퍼런스에 없는 section/heading을 추가하지 말 것.
-- `.omd/init-context.json`을 직접 편집하지 말 것 (CLI가 관리).
-- DESIGN.md가 이미 있는데 백업 없이 덮어쓰지 말 것 — `omd init prepare`가 자동 rename하니 스킬이 별도 처리 불필요.
+- `.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`만 제공.

package/skills/omd-reference-capture/SKILL.md

@@ -0,0 +1,314 @@
+---
+name: omd:reference-capture
+description: "선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference/<id>/ 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드 에셋 가져와줘', 'X 사이트 패칭', 'X reference 캡쳐', 'X 라이브 스타일 추출', '브랜드 자료 받아와' 류 요청에 트리거. omd:init 직후 또는 omd:harness 중간에 호출 가능. DESIGN.md는 이 스킬이 만들지 않음 (omd:init 책임)."
+---
+
+# omd:reference-capture — Live Reference Capture
+
+선택된 reference brand의 **라이브 사이트에서 디자인 컨텍스트를 가져온다**. 산출물은 `assets/_reference/<id>/` 디렉토리에 모이고, 사용자의 디자인 작업(omd:apply / omd:harness)에서 컨텍스트로 활용된다.
+
+## 핵심 원칙 (위반 = regression)
+
+이 스킬은 **dev/디자인 reference 캡쳐**용이다. brand IP를 사용자 product에 그대로 ship하는 도구가 **아니다**.
+
+1. **Facts vs. Content 구분**
+   - **Facts (캡쳐 OK)**: 컴퓨티드 색상 hex, 폰트 family/weight, spacing, radius, 컴포넌트 구조 — 디자인 시스템 분석은 fair use.
+   - **Brand content (저장만, 사용자 product에 verbatim ship 금지)**: 로고, 히어로 사진, 마케팅 카피, 슬로건. 다운로드는 reference 확인용으로만.
+
+2. **저작권 표시 의무**
+   - 캡쳐 시작 전 `assets/_reference/<id>/LICENSE-NOTE.md`를 **가장 먼저** 작성.
+   - 모든 다운로드 파일은 `attribution.md`에 source URL + 캡쳐 일자 + 추정 권리자 기록.
+
+3. **사용자 product 생성 시 분리**
+   - omd:apply/omd:harness가 UI를 만들 때, brand의 **voice/tone(facts)**은 참고하되 **literal copy**는 새로 작성.
+   - brand 히어로 사진 / 마케팅 영상은 사용자 product에 직접 embed하지 말고 placeholder + "사용자 자체 자산으로 교체 필요" 주석.
+
+4. **robots.txt / TOS 우선**
+   - 다운로드 전 `curl -sI <site>/robots.txt`로 기본 정책 확인.
+   - 사이트가 명시적으로 차단하는 경로면 skip하고 사용자에게 알림.
+
+5. **scope 한정**
+   - 기본 캡쳐 대상: homepage 1개 + favicon/logo + 컴퓨티드 토큰.
+   - PDP / checkout / 인증 뒤 페이지는 **기본 skip** — 사용자가 명시적 요청해야만.
+   - 비디오 / 대용량 미디어는 기본 skip (URL만 attribution.md에 기록).
+
+## 트리거
+
+- 명시: "X 에셋 가져와줘", "X 사이트 패칭해줘", "X 라이브 스타일 추출", "X reference 캡쳐"
+- 묵시: omd:harness 안에서 reference 선정 후, 또는 사용자가 "X처럼 만들어줘" 요청 시 omd:init 후속 작업으로 자동 제안
+
+## 전체 플로우
+
+```
+Phase 1: 입력 검증 — brand id 확정
+Phase 2: 라이브 URL 수집 (homepage, logo, docs)
+Phase 3: 디렉토리 + LICENSE-NOTE 사전 작성 (CRITICAL — 다운로드보다 먼저)
+Phase 4: 토큰 캡쳐 (facts) — playwright computed styles
+Phase 5: 시각 reference 캡쳐 (screenshot + 로고)
+Phase 6: attribution.md 작성
+Phase 7: 사용자 요약 + 다음 단계 안내
+```
+
+## Phase 1 — 입력 검증
+
+사용자 요청에서 brand id 추출:
+- 명시 brand 이름 (한글/영문) → `.claude/data/reference-fingerprints.json` `items[].id` 매칭
+- 없으면 사용자에게 묻기: "어느 reference brand 자료를 가져올까요? (예: banksalad, toss, socar)"
+
+id가 카탈로그에 없으면 종료 + "X는 reference 카탈로그에 없어요. omd:init으로 추가 가능합니다."
+
+## Phase 2 — 라이브 URL 수집
+
+다음을 순서대로 시도:
+
+1. **homepage URL**:
+   - `node_modules/oh-my-design-cli/web/references/<id>/_promo.json`의 `logo_url`이 brand site면 거기서 도메인 추출
+   - 없으면 `node_modules/oh-my-design-cli/web/references/<id>/_research.md`에서 Tier 1 source URL grep
+   - 둘 다 없으면 `.claude/data/reference-fingerprints.json`의 `items[].category_raw` 기반으로 추론 — 마지막 수단
+
+2. **logo URL** (`_promo.json` 우선):
+   - `_promo.json.logo_url` → 그대로 사용
+   - 없으면 homepage HTML에서 `apple-touch-icon` / `og:image` / favicon-256 추출
+
+3. **공식 DS docs URL** (있으면):
+   - `node_modules/oh-my-design-cli/web/references/<id>/DESIGN.md`의 footer 또는 §4 verified 섹션에서 grep
+
+수집한 URL 후보를 사용자에게 보여주고 확인:
+
+```
+다음 자료를 가져오려고 합니다:
+  - homepage: https://www.banksalad.com
+  - logo: https://blog.banksalad.com/static/img/logo-banksalad.svg
+  - 공식 DS: (없음)
+
+저작권 안내: 이 자료는 디자인 reference 용도로만 사용됩니다. 사용자 product에 그대로 ship하지 마세요.
+
+진행하시겠어요? (yes/no/edit-urls)
+```
+
+## Phase 3 — 디렉토리 + LICENSE-NOTE 사전 작성 (CRITICAL)
+
+다운로드 시작 **전에** 다음을 먼저 작성:
+
+```bash
+mkdir -p "assets/_reference/<id>/screenshots"
+```
+
+`assets/_reference/<id>/LICENSE-NOTE.md`:
+
+```markdown
+# License Note — <id> Reference Capture
+
+This directory contains design-reference materials captured from
+**<id>**'s public website on **<ISO-date>** for the purpose of
+informing UI design work in this project.
+
+## What's here is for REFERENCE, not REDISTRIBUTION
+
+- **Design tokens** (colors, fonts, spacing) — `tokens.json`. These
+  are facts about the brand's design system and may be used to inform
+  your own design.
+- **Logo file** — captured for visual recognition during development.
+  This is <brand>'s trademark. Do not use in your own product, your
+  own marketing, or any redistribution. Replace with your own brand
+  mark before shipping.
+- **Screenshots** — captured for visual reference during development.
+  Do not embed in your product, your blog, or social posts beyond
+  fair-use commentary.
+
+## What you should NOT do
+
+- Embed `logo.*` or `screenshots/*.png` in your own product UI as if
+  they belong to you.
+- Copy `tokens.json`'s exact hex values into your own brand without
+  shifting them via `delta_set` (see omd:init).
+- Copy any marketing text from screenshots into your own product
+  verbatim — voice/tone is fact, but specific phrasing is creative work.
+
+## What you SHOULD do
+
+- Use the **design language** (token relationships, component
+  patterns, voice register) to inform your project's DESIGN.md.
+- Reference the screenshots during design reviews to align with the
+  visual target.
+- Replace all brand-identifying assets with your own before any
+  external sharing.
+
+## Attribution
+
+See `attribution.md` in this directory for source URLs and capture
+timestamps.
+
+---
+
+This note is generated by `omd:reference-capture`. Do not edit by hand
+— rerun the skill to refresh.
+```
+
+## Phase 4 — 토큰 캡쳐 (facts)
+
+playwright MCP를 사용해 homepage에 navigate한 뒤 computed styles를 추출. 결과는 `assets/_reference/<id>/tokens.json`:
+
+```json
+{
+  "captured_at": "<ISO-8601>",
+  "source_url": "https://www.banksalad.com",
+  "tokens": {
+    "colors": {
+      "background": "#ffffff",
+      "text_primary": "#2b2b2b",
+      "text_body": "#434444",
+      "interaction_primary": "#04c584",
+      "interaction_hover": "#10df99"
+    },
+    "typography": {
+      "body_font_family": "Pretendard, ...",
+      "body_font_weight": "400",
+      "heading_font_weight": "700",
+      "base_size_px": 16
+    },
+    "shape": {
+      "default_radius_px": 2,
+      "card_radius_px": 2,
+      "pill_radius_px": 16
+    },
+    "shadow": {
+      "default": "0 2px 5px rgba(0,0,0,0.12)"
+    }
+  },
+  "samples": [
+    { "element": "primary button (hero CTA)", "raw_computed_style": { /* getComputedStyle slice */ } },
+    { "element": "card", "raw_computed_style": { /* ... */ } }
+  ]
+}
+```
+
+inspect 패턴은 `.claude/skills/omd-add-reference/SKILL.md`의 "apple.com 류 라이브 inspect 패턴"과 동일. 5-10 elements 샘플링.
+
+## Phase 5 — 시각 reference 캡쳐
+
+### 5.1 로고 다운로드
+
+`curl -sSL -o "assets/_reference/<id>/logo.<ext>" "<logo_url>"`
+
+- 실패 시 sourceURL 명시하고 사용자에게 수동 다운로드 안내
+- 확장자는 Content-Type 기준 (svg/png/ico) — 잘못된 확장자로 저장하지 말 것
+
+### 5.2 Hero screenshot
+
+playwright `mcp__playwright__browser_take_screenshot`로 homepage 위 fold만 캡쳐:
+
+- viewport: 1280×800 (데스크탑 기본)
+- fullPage: **false** — 위 fold만
+- 저장 경로: `assets/_reference/<id>/screenshots/hero-desktop.png`
+
+모바일 viewport (375×812)도 1장: `screenshots/hero-mobile.png`.
+
+대용량 페이지 전체 screenshot은 default skip. 사용자가 명시적으로 요청 시만.
+
+### 5.3 다운로드 금지 대상
+
+- 비디오 (`.mp4`, `.webm`)
+- 마케팅 PDF
+- 인증 뒤 페이지의 자산
+- robots.txt가 차단하는 경로
+
+이런 자원은 attribution.md에 URL만 기록.
+
+## Phase 6 — attribution.md
+
+`assets/_reference/<id>/attribution.md`:
+
+```markdown
+# Attribution — <id> Reference Capture
+
+Captured: **<ISO-8601>** via `omd:reference-capture`
+
+## Sources
+
+| File | Source URL | Captured | Notes |
+|---|---|---|---|
+| `tokens.json` | `<homepage_url>` | <date> | Computed styles via playwright, factual analysis |
+| `logo.<ext>` | `<logo_url>` | <date> | Brand trademark — do not redistribute |
+| `screenshots/hero-desktop.png` | `<homepage_url>` (1280×800) | <date> | Reference for design alignment |
+| `screenshots/hero-mobile.png` | `<homepage_url>` (375×812) | <date> | Reference for design alignment |
+
+## Skipped (URL recorded for manual review)
+
+- (none) OR <list of URLs skipped due to robots.txt / size / type>
+
+## Rights
+
+These materials are owned by <id> and its respective rights holders.
+Captured under fair-use principles for the purpose of design analysis
+and development reference. See `LICENSE-NOTE.md` for usage boundaries.
+
+## Refresh
+
+Rerun `omd:reference-capture <id>` to recapture (overwrites this
+directory). Captured tokens reflect the live site at capture time and
+may drift as the brand evolves.
+```
+
+## Phase 7 — 사용자 요약
+
+prose로:
+
+```
+✓ <id> reference captured into assets/_reference/<id>/
+  - tokens.json — <N> design tokens extracted
+  - logo.<ext> — <size>
+  - screenshots/ — <N> images
+
+⚠ 저작권 안내: 이 자료는 디자인 reference 용도. 사용자 product에 brand 로고/스크린샷을 직접 embed하지 마세요. 자세한 사용 경계는 LICENSE-NOTE.md 참고.
+
+다음 단계:
+  - omd:apply로 컴포넌트 작업 시작 (tokens.json 자동 활용)
+  - omd:harness로 전체 surface 디자인 (이 자료를 reference로)
+  - 토큰 시각 확인: open assets/_reference/<id>/screenshots/hero-desktop.png
+```
+
+## omd:harness / omd:apply 와의 인터페이스
+
+이 스킬이 만든 `assets/_reference/<id>/tokens.json`은 후속 skill이 자동 활용:
+
+- **omd:apply**가 컴포넌트 작업 시 `tokens.json`이 있으면 hex 값 동기화 우선
+- **omd:harness**의 Component phase에서 시각 reference로 screenshots 활용
+
+UI 생성 시 logo 사용 규칙 (omd:apply / omd:harness 둘 다 적용):
+- 사용자 product의 **헤더/footer logo는 reference logo를 placeholder로 쓰지 말 것** — `[YOUR LOGO]` 자리만 잡고 사용자에게 자체 로고 요청
+- favicon / og:image 등도 동일 — placeholder 위치만 표시
+
+## 안티패턴 (절대 금지)
+
+- ❌ 다운로드 시작 전에 LICENSE-NOTE.md 작성 skip
+- ❌ Phase 4의 token 캡쳐 결과를 그대로 사용자 DESIGN.md에 hex값 verbatim 복사 (omd:init의 delta_set 시스템을 우회)
+- ❌ 브랜드 마케팅 카피를 사용자 product에 그대로 인용
+- ❌ 사용자 product의 로고 자리에 reference brand 로고 임시로라도 박기 (사용자가 잊고 ship 가능성)
+- ❌ robots.txt 차단 경로 강행
+- ❌ 인증 뒤 페이지 자동 탐색
+- ❌ 비디오 / 대용량 자산 default 다운로드
+
+## 산출 위치 (요약)
+
+```
+assets/_reference/<id>/
+├── LICENSE-NOTE.md       (사전 작성)
+├── attribution.md        (마지막 작성)
+├── tokens.json           (facts)
+├── logo.<svg|png|ico>    (brand mark — reference only)
+└── screenshots/
+    ├── hero-desktop.png  (1280×800, above fold)
+    └── hero-mobile.png   (375×812, above fold)
+```
+
+## .gitignore 권장
+
+`assets/_reference/` 디렉토리는 사용자 자체 자산이 아닌 reference 자료이므로, 사용자 git repo의 정책에 따라 .gitignore 권장:
+
+```
+# Reference capture (regeneratable via omd:reference-capture)
+assets/_reference/
+```
+
+이 스킬은 .gitignore를 자동 수정하지 않음 — 사용자에게 알림만.