omd-reference-capture

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의 라이브 사이트에서 디자인 evidence를 가져온다. 산출물은 assets/_reference/<id>/ 디렉토리에 모이며 그 자체로 프로젝트 디자인 권한이 되지 않는다.

핵심 원칙 (위반 = regression)

이 스킬은 dev/디자인 reference 캡쳐용이다. brand IP를 사용자 product에 그대로 ship하는 도구가 아니다.

0. Evidence-only authority boundary

   • 이 스킬은 root DESIGN.md, .omd/system/graph.json, manifest 또는 project token을 쓰거나 수정하지 않는다.
   • evidence.json, tokens.json, live_overrides, fonts.json, screenshots, logo는 관찰 evidence다. omd:apply/omd:harness가 자동 적용·동기화하거나 fallback으로 사용할 수 없다.
   • graph-authoring checkpoint가 source/provenance와 사용자 권한을 검토해 결정을 Core v2 graph.json에 명시적으로 admit하고, profile: portable-core manifest가 graph와 DESIGN.md의 exact SHA-256을 검증할 때만 그 graph path가 프로젝트 authority가 된다. capture 파일 자체는 admission 뒤에도 evidence로 남는다.
   • exact Core stable anchor가 있는 reference는 experience, foundations, typography-assets, components-states, layout-platforms, content-locales, governance로 읽는다. anchor가 전혀 없는 reference만 legacy meaning-based fallback으로 읽고 숫자 section을 새 citation에 복사하지 않는다.

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는 capture의 brand voice/tone도 evidence로만 본다. 프로젝트에 적용하려면 먼저 Core graph admission이 필요하며 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 0 — (v1.3.3 폐기) Mode 선택

이전 버전(v1.3.2)은 clone vs inspired 두 mode를 제공했으나 v1.3.3에서 폐기. 시각적 동일성은 brand creative work을 사용자 product에 reproduce해야 가능하고 그건 IP 영역. 단일 mode 흐름으로 통일 — brand 토큰·구조·voice는 가져오되, brand 자체 자산(mascot·로고·마케팅 사진)은 reference로만 보존하고 사용자 product에는 자체 자산 자리([YOUR LOGO] placeholder 등)를 둠. 결과물의 시각 polish는 무료 라이선스 자산 라이브러리(Open Peeps / Lucide / Heroicons 등 CC0/MIT/SIL OFL)로 채움 — 자세한 카탈로그는 skills/omd-harness/SKILL.md Step 4 master prompt rule 6 참조.

다음 모든 Phase는 단일 흐름. (구버전 Phase 0 - clone/inspired ask 제거됨.)

Legacy mode metadata

과거 clone|inspired 값이 .omd/init-context.json에 남아 있어도 이 스킬은 동작을 분기하지 않는다. 두 값 모두 동일한 evidence-only capture를 수행하며 logo/font/screenshot/token을 product에 자동 삽입하지 않는다. legacy mode를 Core graph admission 또는 사용자 권한으로 해석하지 않는다.

전체 플로우

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 이름 (한글/영문) → 아래 순서에서 찾은 첫 reference-fingerprints.json의 items[].id 매칭:
  1. .codex/data/reference-fingerprints.json
  2. .claude/data/reference-fingerprints.json
  3. .opencode/data/reference-fingerprints.json
  4. node_modules/oh-my-design-cli/data/reference-fingerprints.json
  5. data/reference-fingerprints.json (개발 레포)
• 없으면 사용자에게 묻기: "어느 reference brand 자료를 가져올까요? (예: banksalad, toss, socar)"

id가 카탈로그에 없으면 종료 + "X는 reference 카탈로그에 없어요. omd:init으로 추가 가능합니다."

Phase 2 — 라이브 URL 수집

reference 자료 경로 <refdir> 는 reference DESIGN.md 위치 기준으로 resolve (먼저 존재하는 것 사용 — omd:init Phase 4.1과 동일한 카탈로그 resolution order):

1. .codex/data/references/<id>/DESIGN.md (Codex installer copy; 디렉토리에는 DESIGN.md만 보장)
2. .claude/data/references/<id>/DESIGN.md (Claude Code / Cursor installer copy; 디렉토리에는 DESIGN.md만 보장)
3. .opencode/data/references/<id>/DESIGN.md (OpenCode installer copy; 디렉토리에는 DESIGN.md만 보장)
4. node_modules/oh-my-design-cli/web/references/<id>/DESIGN.md (로컬 npm 설치 직접 경로 — 디렉토리에 _promo.json/_research.md 포함)
5. web/references/<id>/DESIGN.md (개발 레포)
6. https://oh-my-design.kr/<id>/design.md 를 fetch (WebFetch 또는 curl -fsSL) — 1~5 로컬 경로가 전부 없을 때. 200이면 본문이 곧 reference DESIGN.md. 가져온 내용은 활성 채널의 첫 writable data dir (.codex/data, .claude/data, .opencode/data) 아래 references/<id>/DESIGN.md에 저장한다. 채널을 판별할 수 없으면 1→3 중 먼저 존재하고 쓸 수 있는 dir을 사용하고, 모두 없으면 활성 host 채널 dir을 생성한다.

<refdir> = resolve된 DESIGN.md가 있는 디렉토리 (tier 6 fetch면 위 규칙으로 정한 활성 채널 cache dir). _promo.json/_research.md는 installer copy나 network cache에 없을 수 있으니, 없으면 (4)/(5)로 폴백하고 그래도 없으면 fingerprints 기반 추론으로 진행.

다음을 순서대로 시도:

1. homepage URL:

   • <refdir>/_promo.json의 logo_url이 brand site면 거기서 도메인 추출
   • 없으면 <refdir>/_research.md에서 Tier 1 source URL grep
   • 둘 다 없으면 Phase 1에서 channel-aware하게 resolve한 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 (있으면):

   • Core reference면 <refdir>/DESIGN.md의 governance anchor와 인접한 hash-listed provenance artifact에서 찾는다. Core anchor가 전혀 없는 legacy reference만 footer 또는 의미 heading Verified Sources에서 찾는다. 찾지 못하면 URL을 추론하지 않는다.

수집한 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)

다운로드 시작 전에 다음을 먼저 작성:

mkdir -p "assets/_reference/<id>/screenshots"

assets/_reference/<id>/LICENSE-NOTE.md:

# 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

- **Observed design values** (colors, fonts, spacing) — `tokens.json`.
  These are evidence about the captured surface, not project tokens.
- **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 or adapt `tokens.json` values into your product before an explicit
  Core graph-authoring checkpoint admits the decision with provenance.
- 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

- Review the **design language** (token relationships, component
  patterns, voice register) as evidence during a Core graph-authoring
  checkpoint; only admitted graph decisions become project authority.
- Reference the screenshots during design reviews to align with the
  visual target.
- Replace all brand-identifying assets with your own before any
  external sharing.



See  in this directory for source URLs and capture
timestamps.

---

This note is generated by . Do not edit by hand
— rerun the skill to refresh.

Phase 3.5 — Font 캡쳐 (fonts.json, 라이브 폰트가 실제 로드되도록)

캡쳐된 brand가 web font(Pretendard / BM JUA / Inter / Noto Sans KR 등 시스템 기본이 아닌 폰트)를 쓰면, 토큰만 잡아도 생성기가 폰트를 로드 안 하면 결과가 시스템 fallback으로 바뀐다 (가장 흔한 증상: macOS 시스템 폰트가 둥글둥글하게 렌더되는 mismatch).

assets/_reference/<id>/fonts.json:

{
  "captured_at": "<ISO-8601>",
  "fonts": [
    {
      "family": "Pretendard",
      "license": "SIL OFL 1.1 (open-source, free for commercial use)",
      "cdn_url": "https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css",
      "html_link": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css\" />",
      "live_observed": true,
      "role": "body + heading"
    },
    {
      "family": "Apple SD Gothic Neo",
      "license": "system (macOS/iOS)",
      "cdn_url": null,
      "html_link": null,
       
       
    
  

3.5.1 추출 절차

1. live homepage의 computed style에서 body / h1-h3 / 주요 buttons의 font-family 첫 항목 추출 (fallback chain 무시, 첫 토큰만)
2. 추출된 family를 known-font registry에 매칭:

추출된 family	license	CDN URL
Pretendard	SIL OFL 1.1	https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css
Pretendard Variable	SIL OFL 1.1	https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css
Noto Sans KR	SIL OFL 1.1	https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap
Inter	SIL OFL 1.1	https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap
Wanted Sans	SIL OFL 1.1	https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@latest/packages/wanted-sans/fonts/webfonts/static/complete/WantedSans.css
BM JUA (배민 주아체)	배달의민족 폰트 라이선스 (개인·기업 무료, 재배포·판매 금지)	(CDN 미공식 — html_link: null 처리, 사용자에게 "BM JUA는 라이브에서 관측 안 됨; 로컬 fallback" 알림)
Apple SD Gothic Neo, Malgun Gothic, system-ui, -apple-system	system	html_link: null

registry에 없는 family는 html_link: null + notes에 "CDN 미확인, 수동 로드 필요" 기록.

3.5.2 BM JUA 같은 misapplication 가드

reference DESIGN.md가 "BM JUA를 landing/promo accent로"라고 적어뒀더라도, 라이브 inspect에서 실제 BM JUA 사용이 관측 안 되면 live_observed: false로 기록한다. 이는 admission 검토용 반증 evidence일 뿐 reference나 project authority를 자동 교체하지 않는다. 후속 graph-authoring checkpoint가 채택/기각을 결정한다.

3.5.3 Retired clone-mode load

폐기된 clone metadata가 남아 있어도 capture만으로 HTML <head>에 font URL을 자동 삽입하지 않는다. source/license를 검토해 Core graph의 typography_assets에 명시적으로 admitted된 font만 후속 writer가 로드한다.

Phase 3.9 — MCP-free evidence collector (v2)

라이브 캡쳐의 정본은 버전된 ReferenceEvidenceBundle이다. 에이전트가 매번 다른 evaluate 스니펫을 만들지 않는다.

기본 경로: packaged/local collector

개발 저장소 안에서는:

npm --prefix web run capture:reference -- <id-or-url> \
  --max-routes 3 \
  --out "$PWD/assets/_reference/<id>/evidence.json"

npm으로 설치된 스킬에서는:

# 현재 읽고 있는 SKILL.md와 같은 디렉토리의 bundled collector를 사용한다.
# 예: .agents/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs
SKILL_DIR="<directory-containing-this-SKILL.md>"
COLLECTOR="$SKILL_DIR/scripts/capture-reference-evidence.mjs"
node "$COLLECTOR" "<homepage-url>" --id "<id>" \
  --max-routes 3 \
  --out "$PWD/assets/_reference/<id>/evidence.json"

설치된 collector는 Node 18에서 실행되는 단일 ESM 파일이며 playwright-core까지 내부에 포함한다. 따라서 프로젝트 node_modules, npm cache, TypeScript runtime에 의존하지 않고 system Chrome을 직접 사용한다. Chrome 경로가 표준 위치가 아니면 OMD_CHROME_PATH만 지정한다. MCP server, MCP SDK, 별도 API key는 필요 없다. 설치형 collector에는 항상 Phase 2에서 확정한 homepage URL과 --id를 함께 전달한다. 이 방식은 npm package가 일회성 npx cache에서 사라진 뒤에도 동작한다.

현재 SKILL.md의 위치를 직접 알 수 없는 shell 환경에서는 아래 순서에서 첫 실행 파일을 찾는다:

for candidate in \
  "$PWD/.claude/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs" \
  "$PWD/.agents/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs" \
  "$PWD/.opencode/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs" \
  "$HOME/.claude/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs" \
  "$HOME/.agents/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs" \
  "$HOME/.config/opencode/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs"
do
  if [ -f "$candidate" ]; then COLLECTOR="$candidate"; break; fi
done
test -n "${COLLECTOR:-}" || { echo "capture_blocked: bundled collector not found"; exit 1; }

필수 산출물은 evidence.json 하나이며 schema version, surface URL, selector, computed style, FontFaceSet, @font-face source, interaction state, component fingerprint와 coverage를 포함한다. hover/focus/pressed는 state-specific computed snapshot으로 남고, 안전하게 열 수 있는 menu/dialog/form-error/tab/toast는 interactions[]의 trigger/target/state로 남는다. tokens.json, .live-inspect-proof.json, structure.json은 이 bundle의 하위 projection으로만 만든다.

Fast-path: browser-harness (있으면 우선)

shutil.which("browser-harness") 또는 command -v browser-harness로 detect. 있고 browser-harness --doctor 가 [ok ] chrome running 띄우면 fast-path:

• 용도: 이미 로그인된 surface나 collector가 열지 못한 메뉴/모달을 보충한다. sub-agent의 "did live inspect" 보고 대신 실제 raw evidence를 남긴다.
• prerequisite: Python 3.11+, uv 또는 pip, Chrome with --remote-debugging-port=9222 또는 chrome://inspect#remote-debugging 활성.
• 호출 패턴:

  BU_CDP_URL="http://localhost:9222" browser-harness <<'PY'
  new_tab("https://<brand-domain>")
  wait_for_load()
  import time; time.sleep(1.5)  # SPA hydration
  result = js("""
  (() => {
    const body = getComputedStyle(document.body);
    const ctas = [...document.querySelectorAll('button, a[role="button"], [class*="button"]')]
      .filter(el => {
        const r = el.getBoundingClientRect();
        return r.height >= 32 && r.height <= 80 && r.top < 1200;
      })
      .slice(0, 8).map(el => {
        const cs = getComputedStyle(el);
        return { bg: cs.backgroundColor, color: cs.color, radius: cs.borderRadius,
                 padding: cs.padding, fontWeight: cs.fontWeight, h: Math.round(el.getBoundingClientRect().height) };
      });
    return JSON.stringify({
      bodyFont: body.fontFamily.split(',')[0].replace(/['"]/g,'').trim(),
      ctas, scrollH: document.documentElement.scrollHeight
    });
  })()
  """)
  print(result)
  capture_screenshot(path="<assets_dir>/screenshots/hero-desktop.png", full=False)
  PY
  

• 결과를 임의 JSON으로 끝내지 말고 evidence.json의 surface/state evidence와 동일한 필드로 reconcile한다. screenshot은 보조 자료이며 토큰 근거를 대신하지 않는다.

Fallback: browser-harness only

packaged collector가 없고 browser-harness만 있으면 위 fast-path를 사용한다. 둘 다 없으면 live 검증을 했다고 주장하지 말고 capture_blocked를 기록한다. Playwright MCP로 fallback하지 않는다.

자동 선택 logic

if [ -f "web/scripts/capture-reference-evidence.ts" ]; then
  echo "MODE=local-collector"
elif [ -n "${COLLECTOR:-}" ] && [ -f "$COLLECTOR" ]; then
  echo "MODE=packaged-collector"
elif command -v browser-harness >/dev/null && browser-harness --doctor 2>&1 | grep -q "ok.*chrome running"; then
  echo "MODE=harness-supplement"
else
  echo "MODE=capture-blocked"
fi

사용자 안내 (선택)

skill 진입 시 사용자에게 한 줄로 알림:

"MCP 없이 evidence collector로 N개 surface를 캡쳐합니다." 또는 "collector가 없어 live capture가 막혔습니다."

이 안내는 informational only, 사용자 action 요구 X.

Phase 4 — 토큰 캡쳐 (facts)

Proof gate (위반 = regression): 이 Phase는 실제 navigation + computed style 추출이 일어났음을 evidence.json으로 증명해야 한다. 사람이 쓴 "라이브 inspect 했다" 문장은 증거가 아니다.

4.0 — .live-inspect-proof.json 작성 (REQUIRED, 없으면 candidate evidence 폐기)

collector의 evidence.json에서 raw computed style 5개 이상을 projection해 assets/_reference/<id>/.live-inspect-proof.json에 저장한다:

{
  "navigated_at": "<ISO-8601 with seconds>",
  "source_url": "https://www.banksalad.com",
  "viewport": "1280x800",
  "tool_used": "reference_evidence_collector_v1",
  "raw_samples": [
    { "element_selector": "body", "font-family": "Pretendard, ...", "color": "rgb(0, 0, 0)", "background": "rgba(0, 0, 0, 0)" },
    { "element_selector": "header nav a:first-child", "font-size": "14px", "font-weight": "500" },
    { "element_selector": "button:contains('앱 다운로드')"     
         
         
  
   
   

후속 graph-authoring 단계는 evidence.json의 schemaVersion === 1, surfaces.length >= 1, raw element ≥5를 먼저 확인한다. 이 검사는 evidence admissibility만 판단한다. 통과 자체가 project token admission은 아니다. legacy proof 파일만 있고 bundle이 없으면 capture 값을 승격하지 않는다.

4.1 — drift detection (proof와 observed candidate 일관성)

tokens.json#live_overrides라는 legacy key가 남아 있어도 각 값은 bundle의 surfaceId + selector + style property로 역추적 가능해야 한다. 이 key 이름은 우선순위나 override 권한을 부여하지 않는다. provenance가 없으면 candidate를 삭제하고, provenance가 있어도 graph checkpoint 전에는 evidence-only다.

4.2 — token 캡쳐 본문

evidence.json의 aggregate와 representative raw element를 reconcile한다. 결과는 assets/_reference/<id>/tokens.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
    },
     
       
       
       
    
     
       
    
  
   
           
           
  

최소 샘플은 body / heading / hero CTA / card 또는 form / footer이며, 각 샘플은 bundle selector를 보존한다. 캡쳐하려는 brand가 카탈로그에 없으면 URL을 직접 collector에 전달한다. 카탈로그에 신규 brand를 추가하는 워크플로우(omd-add-reference)는 dev 레포에만 존재한다.

Phase 4.5 — 구조 cue 캡쳐 (structure.json)

Tokens는 색·radius·font 같은 원자 값이고, structure는 페이지가 어떻게 짜였는지의 관측 가능한 facts다. 토큰만 보면 같은 brand도 surface마다 다른 결과물이 나오는 mismatch가 생긴다 (예: app surface의 2px-radius advisor 톤 vs marketing landing의 41px-pill 일러스트 톤). structure.json은 후속 생성기가 실제 라이브 사이트의 composition idiom을 따라가도록 한다.

4.5.1 추출 항목 (facts only — 저작권 영역 0)

assets/_reference/<id>/structure.json:

{
  "captured_at": "<ISO-8601>",
  "source_url": "https://www.banksalad.com",
  "viewport": "1280x800",
  "hero": {
    "type": "illustration | photo | video | data-card | text-only | mixed",
    "has_carousel": false,
    "carousel_dot_count": 0,
    "primary_visual_position": "right | left | center | full-width | background",
    "background_ornament": "none | gradient-blob | geometric | radial-tint | photo-bleed",
    "approx_height_vh": 75
  },
  "cta": {
    "dominant_shape": "pill | rectangular | ghost-only | text-link",
    "primary_radius_px_observed": 41,
    "secondary_style" 
     
  
   
     
     
     
     
  
   
     
     
     
     
  
   
    
    
    
    
    
  
   
    
    
  

4.5.2 추출 방법

playwright로 homepage navigate 후 다음 JS 실행 (facts derivation only):

() => {
  // hero 탐색 — 보통 첫 800px 이내 viewport에서 가장 큰 visual element
  const heroCandidates = [...document.querySelectorAll('section, header + div, [class*="hero" i], [class*="Hero"]')]
    .filter(el => {
      const r = el.getBoundingClientRect();
      return r.top < 200 && r.height > 300 && r.width > 800;
    });
  const heroEl = heroCandidates[0];

  // type 판정
  const heroImgCount = heroEl ? heroEl.querySelectorAll('img, svg, picture').length : 0;
  const heroVideoCount = heroEl ? heroEl.querySelectorAll('video').length : 0;
  const heroHasCarouselDots = heroEl ? !!heroEl.querySelector('[class*="dot" i], [class*="pagination" i], [class*="indicator" i]') : false;

  // CTA 탐색 — viewport 위 절반의 button/cta
  const ctas = [...document.querySelectorAll('button, a[role="button"], [class*="button" i] a')]
    .filter(el => el.getBoundingClientRect().top < 800)
    .map( {
       cs = (el);
       { : cs., : cs. };
    });
   dominantRadii = ctas.( (c.)).( !(n));
   maxRadius = .(...dominantRadii, );

  
   navEl = .();
   navItemCount = navEl ? navEl.(). : ;

   {
    : heroImgCount,
    : heroVideoCount,
    : heroHasCarouselDots,
    : maxRadius,
    : ctas.,
    : navItemCount,
    : ..,
    : .,
  };
}

위 raw 측정값을 structure.json schema의 enum 값으로 매핑 (예: hero_img_count >= 1 && hero_video_count === 0 → hero.type: "illustration", cta_max_radius_observed >= 40 → cta.dominant_shape: "pill").

4.5.3 IP 가드레일 재확인

structure.json에는 텍스트·이미지·copy·brand statement 일체 X. 오로지 structural facts (개수, radius, viewport-relative position). 저작권 영역 아님.

notes 필드의 자유 텍스트는 본인 관찰만 — 사이트의 마케팅 카피 인용 금지.

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

evidence collector와 같은 로컬 Playwright context 또는 browser-harness로 homepage 위 fold만 캡쳐(MCP 불필요):

• 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:

# 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 |
| `structure.json` | `<homepage_url>` | <date> | Observable composition facts (hero type, CTA shape, nav structure, page rhythm) |
| `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  for usage boundaries.



Rerun  to recapture (overwrites this
directory). Captured tokens reflect the live site at capture time and
may drift as the brand evolves.

Phase 6.5 — retired clone outputs

CLONE-MODE.md, replace-checklist.md, product scaffold, font <link>, reference logo 사용 같은 과거 clone 산출은 생성하지 않는다. 이 스킬의 write scope는 assets/_reference/<id>/ evidence와 attribution/license 기록뿐이다. 프로젝트 적용은 별도 Core graph-authoring checkpoint 이후의 writer가 소유한다.

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 참고.

다음 단계:
  - Core graph-authoring checkpoint에서 채택할 evidence를 검토
  - admitted graph가 valid하게 hash-bound된 뒤 omd:apply로 컴포넌트 작업
  - omd:harness에서 이 자료를 evidence/reference로 검토
  - 토큰 시각 확인: open assets/_reference/<id>/screenshots/hero-desktop.png

omd:harness / omd:apply 와의 인터페이스

이 스킬이 만든 assets/_reference/<id>/는 후속 skill의 evidence input이다:

• omd:apply는 capture 파일을 직접 적용하지 않는다. valid hash-bound Core graph에 admitted된 decision만 해당 graph path에서 적용한다.
• omd:harness는 screenshots/tokens를 graph-authoring checkpoint의 evidence로 검토할 수 있지만, admission 전 product token·font·asset로 승격하지 않는다.

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 복사 (Core graph admission·provenance·hash binding을 우회)
• ❌ tokens.json#live_overrides, fonts.json, screenshot을 graph admission 없이 omd:apply/omd:harness의 prescriptive authority나 fallback으로 사용
• ❌ 브랜드 마케팅 카피를 사용자 product에 그대로 인용
• ❌ 사용자 product의 로고 자리에 reference brand 로고 임시로라도 박기 (사용자가 잊고 ship 가능성)
• ❌ robots.txt 차단 경로 강행
• ❌ 인증 뒤 페이지 자동 탐색
• ❌ 비디오 / 대용량 자산 default 다운로드

산출 위치 (요약)

assets/_reference/<id>/
├── LICENSE-NOTE.md       (사전 작성)
├── attribution.md        (마지막 작성)
├── tokens.json           (facts — atomic values)
├── structure.json        (facts — composition cues for surface idiom)
├── 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를 자동 수정하지 않음 — 사용자에게 알림만.