Skip to content
Design
Skill

/omd-reference-capture

선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference/<id>/ 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드 에셋 가져와줘', 'X 사이트 패칭', 'X reference 캡쳐', 'X 라이브 스타일 추출', '브랜드 자료 받아와' 류 요청에 트리거.

BOOST
From plugin
oh-my-design
53641 skills21 agents1 MCP
Install
$ npx -y skills add kwakseongjae/oh-my-design --skill omd-reference-capture --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/omd-reference-capture

Context preview

The summary Claude sees to decide when to auto-load this skill.

선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference/<id>/ 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드 에셋 가져와줘', 'X 사이트 패칭', 'X reference 캡쳐', 'X 라이브 스타일 추출', '브랜드 자료 받아와' 류 요청에 트리거.

SKILL.md

omd-reference-capture.SKILL.md
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):

<!-- omd:catalog-resolution-order — omd-init/omd-harness SKILL.md + agents/omd-master.md 와 동일 순서 강제. drift guard: test/unit/core/catalog-resolution-order.test.ts -->

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` →
Read more
Ships withoh-my-design

Give your AI coding agent a design system. One command installs 500+ quality-graded company DESIGN.md references + skills into Claude Code, Codex, Cursor, and OpenCode. Free, MIT, zero AI calls.

Get the whole plugin

Other skills on oh-my-design.