omd-reference-capture

Name: omd-reference-capture
Author: kwakseongjae

365stars35forks

How to install omd-reference-capture?

kwakseongjae/oh-my-design/omd-reference-capture

$npx -y skills add kwakseongjae/oh-my-design --skill omd-reference-capture

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	<!-- omd:installed-skill — managed by `omd install-skills`. Do not edit; rerun the command to refresh. -->
2
3
4	# omd:reference-capture — Live Reference Capture
5
6	선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트를 가져온다. 산출물은 `assets/_reference/<id>/` 디렉토리에 모이고, 사용자의 디자인 작업(omd:apply / omd:harness)에서 컨텍스트로 활용된다.
7
8	## 핵심 원칙 (위반 = regression)
9
10	이 스킬은 dev/디자인 reference 캡쳐용이다. brand IP를 사용자 product에 그대로 ship하는 도구가 아니다.
11
12	1. Facts vs. Content 구분
13	- Facts (캡쳐 OK): 컴퓨티드 색상 hex, 폰트 family/weight, spacing, radius, 컴포넌트 구조 — 디자인 시스템 분석은 fair use.
14	- Brand content (저장만, 사용자 product에 verbatim ship 금지): 로고, 히어로 사진, 마케팅 카피, 슬로건. 다운로드는 reference 확인용으로만.
15
16	2. 저작권 표시 의무
17	- 캡쳐 시작 전 `assets/_reference/<id>/LICENSE-NOTE.md`를 가장 먼저 작성.
18	- 모든 다운로드 파일은 `attribution.md`에 source URL + 캡쳐 일자 + 추정 권리자 기록.
19
20	3. 사용자 product 생성 시 분리
21	- omd:apply/omd:harness가 UI를 만들 때, brand의 voice/tone(facts)은 참고하되 literal copy는 새로 작성.
22	- brand 히어로 사진 / 마케팅 영상은 사용자 product에 직접 embed하지 말고 placeholder + "사용자 자체 자산으로 교체 필요" 주석.
23
24	4. robots.txt / TOS 우선
25	- 다운로드 전 `curl -sI <site>/robots.txt`로 기본 정책 확인.
26	- 사이트가 명시적으로 차단하는 경로면 skip하고 사용자에게 알림.
27
28	5. scope 한정
29	- 기본 캡쳐 대상: homepage 1개 + favicon/logo + 컴퓨티드 토큰.
30	- PDP / checkout / 인증 뒤 페이지는 기본 skip — 사용자가 명시적 요청해야만.
31	- 비디오 / 대용량 미디어는 기본 skip (URL만 attribution.md에 기록).
32
33	## 트리거
34
35	- 명시: "X 에셋 가져와줘", "X 사이트 패칭해줘", "X 라이브 스타일 추출", "X reference 캡쳐"
36	- 묵시: omd:harness 안에서 reference 선정 후, 또는 사용자가 "X처럼 만들어줘" 요청 시 omd:init 후속 작업으로 자동 제안
37
38	## Phase 0 — (v1.3.3 폐기) Mode 선택
39
40	이전 버전(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 참조.
41
42	다음 모든 Phase는 단일 흐름. (구버전 Phase 0 - clone/inspired ask 제거됨.)
43
44	## (legacy reference) — 이전 mode 선택 텍스트 (참고용, 동작 안 함)
45
46	reference-capture가 어디까지 가져올지는 사용자 의도에 따라 두 갈래. 호출 진입 시점에 mode가 결정되지 않았다면 사용자에게 한 번에 묻기:
47
48	```
49	<id>를 어떻게 활용할까요?
50
51	1. clone — 거의 똑같이 시작. 실제 로고·일러스트·폰트 받아와서 dev scaffold 구성.
52	landing이 라이브 사이트와 시각적으로 매우 비슷하게 시작됩니다.
53	⚠ 자동으로 CLONE-MODE.md 배너 + replace-checklist.md가 생성되고,
54	"사용자 product에 ship 전에 brand 자산을 자체 자산으로 교체 필요"라고 표시됩니다.
55
56	2. inspired — 톤·체계만 가져옴. [YOUR LOGO] placeholder, 일러스트는 generic placeholder.
57	브랜드의 voice·원칙·팔레트 철학만 적용. 바로 ship 가능한 상태로 산출.
58
59	답: clone / inspired (기본값: inspired)
60	```
61
62	이 선택은 `.omd/init-context.json`의 `mode` 필드에 저장되어 후속 omd:init / omd:harness / omd:apply가 일관되게 사용한다.
63
64	이미 omd:harness Step 3.7에서 mode를 묻고 진입했으면 Phase 0 skip.
65
66	### Mode별 동작 요약
67
68	\| 단계 \| clone \| inspired \|
69	\|---\|---\|---\|
70	\| LICENSE-NOTE.md \| 작성 ✓ \| 작성 ✓ \|
71	\| tokens.json (atomic facts) \| 캡쳐 ✓ \| 캡쳐 ✓ \|
72	\| structure.json (composition facts) \| 캡쳐 ✓ \| 캡쳐 ✓ \|
73	\| logo.<ext> \| 캡쳐 + product `<img>`로 사용 가능 (banner 의무) \| 캡쳐만 (product에 미사용, placeholder 강제) \|
74	\| screenshots/ \| 캡쳐 ✓ \| 캡쳐 ✓ \|
75	\| fonts.json (CDN URLs) \| 캡쳐 + 자동 `<link>` 로드 강제 \| 캡쳐만 (수동 로드) \|
76	\| hero illustration assets \| (있고 publicly accessible면) URL 기록 + 사용 가능 \| URL만 기록 \|
77	\| attribution.md \| 작성 + 사용 표시 \| 작성 \|
78	\| CLONE-MODE.md (project root) \| mandatory 작성 \| 미작성 \|
79	\| replace-checklist.md (project root) \| mandatory 작성 \| 미작성 \|
80
81	## 전체 플로우
82
83	```
84	Phase 1: 입력 검증 — brand id 확정
85	Phase 2: 라이브 URL 수집 (homepage, logo, docs)
86	Phase 3: 디렉토리 + LICENSE-NOTE 사전 작성 (CRITICAL — 다운로드보다 먼저)
87	Phase 4: 토큰 캡쳐 (facts) — playwright computed styles
88	Phase 5: 시각 reference 캡쳐 (screenshot + 로고)
89	Phase 6: attribution.md 작성
90	Phase 7: 사용자 요약 + 다음 단계 안내
91	```
92
93	## Phase 1 — 입력 검증
94
95	사용자 요청에서 brand id 추출:
96	- 명시 brand 이름 (한글/영문) → 아래 순서에서 찾은 첫 `reference-fingerprints.json`의 `items[].id` 매칭:
97	1. `.codex/data/reference-fingerprints.json`
98	2. `.claude/data/reference-fingerprints.json`
99	3. `.opencode/data/reference-fingerprints.json`
100	4. `node_modules/oh-my-design-cli/data/reference-fingerprints.json`
101	5. `data/reference-fingerprints.json` (개발 레포)
102	- 없으면 사용자에게 묻기: "어느 reference brand 자료를 가져올까요? (예: banksalad, toss, socar)"
103
104	id가 카탈로그에 없으면 종료 + "X는 reference 카탈로그에 없어요. omd:init으로 추가 가능합니다."
105
106	## Phase 2 — 라이브 URL 수집
107
108	reference 자료 경로 `<refdir>` 는 reference DESIGN.md 위치 기준으로 resolve (먼저 존재하는 것 사용 — omd:init Phase 4.1과 동일한 카탈로그 resolution order):
109
110	<!-- omd:catalog-resolution-order — omd-init/omd-harness SKILL.md + agents/omd-master.md 와 동일 순서 강제. drift guard: test/unit/core/catalog-resolution-order.test.ts -->
111
112	1. `.codex/data/references/<id>/DESIGN.md` (Codex installer copy

People who liked this also viewed

6 picks

Type

omd-reference-capture

365stars35forks

View on GitHub

How to install omd-reference-capture?

kwakseongjae/oh-my-design/omd-reference-capture

$npx -y skills add kwakseongjae/oh-my-design --skill omd-reference-capture

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- omd:installed-skill — managed by `omd install-skills`. Do not edit; rerun the command to refresh. -->
2
3
4	# omd:reference-capture — Live Reference Capture
5
6	선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트를 가져온다. 산출물은 `assets/_reference/<id>/` 디렉토리에 모이고, 사용자의 디자인 작업(omd:apply / omd:harness)에서 컨텍스트로 활용된다.
7
8	## 핵심 원칙 (위반 = regression)
9
10	이 스킬은 dev/디자인 reference 캡쳐용이다. brand IP를 사용자 product에 그대로 ship하는 도구가 아니다.
11
12	1. Facts vs. Content 구분
13	- Facts (캡쳐 OK): 컴퓨티드 색상 hex, 폰트 family/weight, spacing, radius, 컴포넌트 구조 — 디자인 시스템 분석은 fair use.
14	- Brand content (저장만, 사용자 product에 verbatim ship 금지): 로고, 히어로 사진, 마케팅 카피, 슬로건. 다운로드는 reference 확인용으로만.
15
16	2. 저작권 표시 의무
17	- 캡쳐 시작 전 `assets/_reference/<id>/LICENSE-NOTE.md`를 가장 먼저 작성.
18	- 모든 다운로드 파일은 `attribution.md`에 source URL + 캡쳐 일자 + 추정 권리자 기록.
19
20	3. 사용자 product 생성 시 분리
21	- omd:apply/omd:harness가 UI를 만들 때, brand의 voice/tone(facts)은 참고하되 literal copy는 새로 작성.
22	- brand 히어로 사진 / 마케팅 영상은 사용자 product에 직접 embed하지 말고 placeholder + "사용자 자체 자산으로 교체 필요" 주석.
23
24	4. robots.txt / TOS 우선
25	- 다운로드 전 `curl -sI <site>/robots.txt`로 기본 정책 확인.
26	- 사이트가 명시적으로 차단하는 경로면 skip하고 사용자에게 알림.
27
28	5. scope 한정
29	- 기본 캡쳐 대상: homepage 1개 + favicon/logo + 컴퓨티드 토큰.
30	- PDP / checkout / 인증 뒤 페이지는 기본 skip — 사용자가 명시적 요청해야만.
31	- 비디오 / 대용량 미디어는 기본 skip (URL만 attribution.md에 기록).
32
33	## 트리거
34
35	- 명시: "X 에셋 가져와줘", "X 사이트 패칭해줘", "X 라이브 스타일 추출", "X reference 캡쳐"
36	- 묵시: omd:harness 안에서 reference 선정 후, 또는 사용자가 "X처럼 만들어줘" 요청 시 omd:init 후속 작업으로 자동 제안
37
38	## Phase 0 — (v1.3.3 폐기) Mode 선택
39
40	이전 버전(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 참조.
41
42	다음 모든 Phase는 단일 흐름. (구버전 Phase 0 - clone/inspired ask 제거됨.)
43
44	## (legacy reference) — 이전 mode 선택 텍스트 (참고용, 동작 안 함)
45
46	reference-capture가 어디까지 가져올지는 사용자 의도에 따라 두 갈래. 호출 진입 시점에 mode가 결정되지 않았다면 사용자에게 한 번에 묻기:
47
48	```
49	<id>를 어떻게 활용할까요?
50
51	1. clone — 거의 똑같이 시작. 실제 로고·일러스트·폰트 받아와서 dev scaffold 구성.
52	landing이 라이브 사이트와 시각적으로 매우 비슷하게 시작됩니다.
53	⚠ 자동으로 CLONE-MODE.md 배너 + replace-checklist.md가 생성되고,
54	"사용자 product에 ship 전에 brand 자산을 자체 자산으로 교체 필요"라고 표시됩니다.
55
56	2. inspired — 톤·체계만 가져옴. [YOUR LOGO] placeholder, 일러스트는 generic placeholder.
57	브랜드의 voice·원칙·팔레트 철학만 적용. 바로 ship 가능한 상태로 산출.
58
59	답: clone / inspired (기본값: inspired)
60	```
61
62	이 선택은 `.omd/init-context.json`의 `mode` 필드에 저장되어 후속 omd:init / omd:harness / omd:apply가 일관되게 사용한다.
63
64	이미 omd:harness Step 3.7에서 mode를 묻고 진입했으면 Phase 0 skip.
65
66	### Mode별 동작 요약
67
68	\| 단계 \| clone \| inspired \|
69	\|---\|---\|---\|
70	\| LICENSE-NOTE.md \| 작성 ✓ \| 작성 ✓ \|
71	\| tokens.json (atomic facts) \| 캡쳐 ✓ \| 캡쳐 ✓ \|
72	\| structure.json (composition facts) \| 캡쳐 ✓ \| 캡쳐 ✓ \|
73	\| logo.<ext> \| 캡쳐 + product `<img>`로 사용 가능 (banner 의무) \| 캡쳐만 (product에 미사용, placeholder 강제) \|
74	\| screenshots/ \| 캡쳐 ✓ \| 캡쳐 ✓ \|
75	\| fonts.json (CDN URLs) \| 캡쳐 + 자동 `<link>` 로드 강제 \| 캡쳐만 (수동 로드) \|
76	\| hero illustration assets \| (있고 publicly accessible면) URL 기록 + 사용 가능 \| URL만 기록 \|
77	\| attribution.md \| 작성 + 사용 표시 \| 작성 \|
78	\| CLONE-MODE.md (project root) \| mandatory 작성 \| 미작성 \|
79	\| replace-checklist.md (project root) \| mandatory 작성 \| 미작성 \|
80
81	## 전체 플로우
82
83	```
84	Phase 1: 입력 검증 — brand id 확정
85	Phase 2: 라이브 URL 수집 (homepage, logo, docs)
86	Phase 3: 디렉토리 + LICENSE-NOTE 사전 작성 (CRITICAL — 다운로드보다 먼저)
87	Phase 4: 토큰 캡쳐 (facts) — playwright computed styles
88	Phase 5: 시각 reference 캡쳐 (screenshot + 로고)
89	Phase 6: attribution.md 작성
90	Phase 7: 사용자 요약 + 다음 단계 안내
91	```
92
93	## Phase 1 — 입력 검증
94
95	사용자 요청에서 brand id 추출:
96	- 명시 brand 이름 (한글/영문) → 아래 순서에서 찾은 첫 `reference-fingerprints.json`의 `items[].id` 매칭:
97	1. `.codex/data/reference-fingerprints.json`
98	2. `.claude/data/reference-fingerprints.json`
99	3. `.opencode/data/reference-fingerprints.json`
100	4. `node_modules/oh-my-design-cli/data/reference-fingerprints.json`
101	5. `data/reference-fingerprints.json` (개발 레포)
102	- 없으면 사용자에게 묻기: "어느 reference brand 자료를 가져올까요? (예: banksalad, toss, socar)"
103
104	id가 카탈로그에 없으면 종료 + "X는 reference 카탈로그에 없어요. omd:init으로 추가 가능합니다."
105
106	## Phase 2 — 라이브 URL 수집
107
108	reference 자료 경로 `<refdir>` 는 reference DESIGN.md 위치 기준으로 resolve (먼저 존재하는 것 사용 — omd:init Phase 4.1과 동일한 카탈로그 resolution order):
109
110	<!-- omd:catalog-resolution-order — omd-init/omd-harness SKILL.md + agents/omd-master.md 와 동일 순서 강제. drift guard: test/unit/core/catalog-resolution-order.test.ts -->
111
112	1. `.codex/data/references/<id>/DESIGN.md` (Codex installer copy

People who liked this also viewed

6 picks

Type