omd-design

Name: omd-design
Author: kwakseongjae

365stars35forks

How to install omd-design?

kwakseongjae/oh-my-design/omd-design

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

Installs into the current project.

Summary

사용자와 대화하며 디자인 선호도를 파악하고, oh-my-design 서베이를 통해 DESIGN.md를 생성합니다. '디자인 시스템 만들어줘', 'DESIGN.md 생성', '디자인 잡아줘', 'UI 스타일 정해줘' 등 디자인 시스템 구성이 필요할 때 트리거됩니다.

Files · 1

View on GitHub

SKILL.md

1	# omd:design — Design System Builder via Survey
2
3	사용자의 프로젝트 맥락과 디자인 선호를 파악하여 oh-my-design.kr 서베이로 안내하고, 결과를 받아 DESIGN.md를 생성한다.
4
5	## 전체 플로우
6
7	```
8	Phase 1: 대화 분석 → 레퍼런스 후보 추림
9	Phase 2: oh-my-design.kr/survey 로 안내 → 사용자가 서베이 완료
10	Phase 3: OMD 결과 코드 수신 → DESIGN.md 생성
11	```
12
13	## Phase 1: 대화 분석 및 레퍼런스 추천
14
15	### Step 1: 프로젝트 맥락 파악
16
17	사용자에게 다음을 자연스럽게 물어본다 (이미 대화에서 언급된 내용은 스킵):
18
19	1. 프로젝트 유형: "어떤 프로젝트인가요?" (SaaS, 랜딩, 대시보드, 이커머스 등)
20	2. 분위기 키워드: "어떤 느낌을 원하세요?" (깔끔한, 따뜻한, 대담한, 미니멀 등)
21	3. 참고하는 서비스: "좋아하는 서비스나 웹사이트 있으세요?" (선택적)
22	4. 타겟 사용자: 개발자, 일반 사용자, B2B 등 (선택적)
23
24	중요: 질문은 1-2개로 줄이되, 핵심 정보를 얻어야 한다. 사용자가 이미 충분한 맥락을 줬다면 바로 추천으로 넘어간다.
25
26	### Step 2: 레퍼런스 후보 추천
27
28	REFERENCE_TAGS.md를 참고하여 3-6개의 레퍼런스를 추천한다.
29
30	출력 형식:
31
32	```
33	프로젝트 성격을 분석해보니, 이런 디자인 시스템들이 잘 맞을 것 같습니다:
34
35	1. Vercel — 미니멀하고 엔지니어링 감성, 깔끔한 다크/라이트
36	2. Linear — 정밀한 다크 모드, 개발 도구 느낌
37	3. Stripe — 프리미엄 핀테크, 정교한 그라데이션
38
39	서베이에서 이 중 하나를 고르고, 세부 취향을 조정하게 됩니다.
40	```
41
42	### Step 3: 서베이 URL 생성 및 안내
43
44	추천한 레퍼런스 ID 목록으로 서베이 URL을 생성한다:
45
46	```
47	https://oh-my-design.kr/survey?refs=vercel,linear.app,stripe
48	```
49
50	사용자에게 안내:
51
52	```
53	아래 링크에서 서베이를 진행해주세요:
54	https://oh-my-design.kr/survey?refs=vercel,linear.app,stripe
55
56	레퍼런스를 하나 고르고, 11가지 디자인 선호도를 선택하면 됩니다.
57	완료되면 결과 코드(OMD-...)가 나옵니다. 그걸 여기에 붙여넣어주세요.
58	```
59
60	## Phase 2: 서베이 대기
61
62	사용자가 서베이를 완료하고 `OMD-...` 코드를 붙여넣을 때까지 대기한다.
63
64	- `OMD-`로 시작하는 입력을 받으면 Phase 3로 진행
65	- 서베이 도중 질문이 오면 도움말 제공
66
67	## Phase 3: DESIGN.md 생성
68
69	### Step 1: 결과 디코딩
70
71	OMD 코드는 base64url 인코딩된 JSON이다:
72
73	```typescript
74	{
75	refId: string, // 선택한 레퍼런스 ID
76	overrides: {
77	primaryColor: string, // 선택한 primary color
78	fontFamily: string,
79	headingWeight: string,
80	borderRadius: string,
81	darkMode: boolean
82	},
83	preferences: {
84	typographyChar: string, // "geometric" \| "humanist" \| "monospace"
85	buttonStyle: string, // "sharp" \| "rounded"
86	inputStyle: string, // "bordered" \| "underline"
87	headerStyle: string, // "glass" \| "solid"
88	cardStyle: string, // "bordered" \| "elevated"
89	depthStyle: string, // "flat" \| "layered"
90	density: string, // "compact" \| "spacious"
91	saturation: string, // "muted" \| "vivid"
92	mood: string // 현재 미사용
93	},
94	components: string[]
95	}
96	```
97
98	디코딩 방법:
99	```bash
100	echo "OMD-코드" \| sed 's/^OMD-//' \| base64 -d
101	```
102
103	### Step 2: oh-my-design CLI로 DESIGN.md 생성
104
105	디코딩한 결과에서 refId와 overrides를 추출하여 CLI를 실행한다:
106
107	```bash
108	cd /Users/kwakseongjae/Desktop/projects/oh-my-design
109	npx tsx bin/oh-my-design.ts generate --config=<config-hash>
110	```
111
112	config-hash는 기존 format: `refId\|primaryColor\|fontFamily\|headingWeight\|borderRadius\|darkMode\|components`를 base64url 인코딩한 것이다.
113
114	또는 프로그래밍적으로:
115
116	```typescript
117	import { decodeConfig } from './src/lib/core/config-hash';
118	// OMD 코드를 디코딩하여 config-hash 형식으로 변환
119	```
120
121	### Step 3: Preferences 유기적 반영
122
123	생성된 DESIGN.md에 서베이 preferences를 반영한다. 레퍼런스 원문에서 preference와 다른 부분만 수정/추가한다.
124
125	#### preference → DESIGN.md 섹션 매핑
126
127	\| preference \| 반영 대상 섹션 \| 반영 방법 \|
128	\|---\|---\|---\|
129	\| typographyChar \| §3 Typography Rules \| Font Family의 성격 설명 조정 \|
130	\| buttonStyle \| §4 Component Stylings > Buttons \| radius 값 및 설명 조정 \|
131	\| inputStyle \| §4 Component Stylings > Inputs \| border 스타일 설명 조정 \|
132	\| headerStyle \| §4 Component Stylings > Navigation \| glass/solid 설명 추가 \|
133	\| cardStyle \| §4 Component Stylings > Cards \| border vs shadow 스타일 조정 \|
134	\| depthStyle \| §6 Depth & Elevation \| shadow 시스템 전체 조정 \|
135	\| density \| §5 Layout Principles \| spacing scale 조정 \|
136	\| saturation \| §2 Color Palette \| 채도 가이드라인 추가 \|
137
138	#### 반영 규칙
139
140	1. 레퍼런스와 일치하는 preference는 건드리지 않는다 — 이미 맞으니까
141	2. 다른 preference만 해당 섹션에 커스터마이즈 노트를 추가한다
142	3. Do's and Don'ts (§7)에 preference 기반 가이드라인을 추가한다
143
144	예시 — depthStyle이 "flat"인데 레퍼런스가 shadow를 많이 쓰는 경우:
145
146	§6 Depth & Elevation 끝에 추가:
147	```markdown
148	### Customization: Flat Design Preference
149	This project prefers flat design. Override the shadow system above:
150	- Use `box-shadow: none` as the default for all components
151	- Use borders (`1px solid var(--border)`) for element separation
152	- Reserve shadows only for modals and dropdowns (elevation level 3+)
153	```
154
155	§7 Do's and Don'ts에 추가:
156	```markdown
157	- DO: Use borders and background color shifts for visual hierarchy
158	- DON'T: Apply decorative shadows to cards and buttons
159	```
160
161	### Step 4: 파일 저장 및 안내
162
163	생성된 DESIGN.md를 프로젝트 루트에 저장한다:
164
165	```bash
166	# 프로젝트 루트에 저장
167	write DESIGN.md
168	```
169
170	사용자에게 결과 요약:
171
172	```
173	DESIGN.md를 생성했습니다.
174
175	기반 레퍼런스: Vercel
176	커스터마이즈:
177	- Primary Color: #533afd → #2563eb
178	- Depth: layered → flat (border 기반으로 변경)
179	- Buttons: rounded (pill shape)
180	- Dark Mode: 포함
181
182	파일: ./DESIGN.md
183	```
184
185	## 주의사항
186
187	- Zero AI call: DESIGN.md 생성은 모두 로컬에서 deterministic하게 처리
188	- 기존 /builder 와 독립: /survey 라우트는 별도 파이프라인
189	- 서베이 URL 도메인: 항상 `oh-my-design.kr` 사용
190	- OMD 코드 접두사: `OMD-`로 시작하는 입력만 결과 코드로 인식
191	- 레퍼런스 ID에 점(.) 포함 가능: linear.app, mistral.ai, x.ai 등 — URL 인코딩 주의

People who liked this also viewed

6 picks

Type

omd-design

365stars35forks

View on GitHub

How to install omd-design?

kwakseongjae/oh-my-design/omd-design

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# omd:design — Design System Builder via Survey
2
3	사용자의 프로젝트 맥락과 디자인 선호를 파악하여 oh-my-design.kr 서베이로 안내하고, 결과를 받아 DESIGN.md를 생성한다.
4
5	## 전체 플로우
6
7	```
8	Phase 1: 대화 분석 → 레퍼런스 후보 추림
9	Phase 2: oh-my-design.kr/survey 로 안내 → 사용자가 서베이 완료
10	Phase 3: OMD 결과 코드 수신 → DESIGN.md 생성
11	```
12
13	## Phase 1: 대화 분석 및 레퍼런스 추천
14
15	### Step 1: 프로젝트 맥락 파악
16
17	사용자에게 다음을 자연스럽게 물어본다 (이미 대화에서 언급된 내용은 스킵):
18
19	1. 프로젝트 유형: "어떤 프로젝트인가요?" (SaaS, 랜딩, 대시보드, 이커머스 등)
20	2. 분위기 키워드: "어떤 느낌을 원하세요?" (깔끔한, 따뜻한, 대담한, 미니멀 등)
21	3. 참고하는 서비스: "좋아하는 서비스나 웹사이트 있으세요?" (선택적)
22	4. 타겟 사용자: 개발자, 일반 사용자, B2B 등 (선택적)
23
24	중요: 질문은 1-2개로 줄이되, 핵심 정보를 얻어야 한다. 사용자가 이미 충분한 맥락을 줬다면 바로 추천으로 넘어간다.
25
26	### Step 2: 레퍼런스 후보 추천
27
28	REFERENCE_TAGS.md를 참고하여 3-6개의 레퍼런스를 추천한다.
29
30	출력 형식:
31
32	```
33	프로젝트 성격을 분석해보니, 이런 디자인 시스템들이 잘 맞을 것 같습니다:
34
35	1. Vercel — 미니멀하고 엔지니어링 감성, 깔끔한 다크/라이트
36	2. Linear — 정밀한 다크 모드, 개발 도구 느낌
37	3. Stripe — 프리미엄 핀테크, 정교한 그라데이션
38
39	서베이에서 이 중 하나를 고르고, 세부 취향을 조정하게 됩니다.
40	```
41
42	### Step 3: 서베이 URL 생성 및 안내
43
44	추천한 레퍼런스 ID 목록으로 서베이 URL을 생성한다:
45
46	```
47	https://oh-my-design.kr/survey?refs=vercel,linear.app,stripe
48	```
49
50	사용자에게 안내:
51
52	```
53	아래 링크에서 서베이를 진행해주세요:
54	https://oh-my-design.kr/survey?refs=vercel,linear.app,stripe
55
56	레퍼런스를 하나 고르고, 11가지 디자인 선호도를 선택하면 됩니다.
57	완료되면 결과 코드(OMD-...)가 나옵니다. 그걸 여기에 붙여넣어주세요.
58	```
59
60	## Phase 2: 서베이 대기
61
62	사용자가 서베이를 완료하고 `OMD-...` 코드를 붙여넣을 때까지 대기한다.
63
64	- `OMD-`로 시작하는 입력을 받으면 Phase 3로 진행
65	- 서베이 도중 질문이 오면 도움말 제공
66
67	## Phase 3: DESIGN.md 생성
68
69	### Step 1: 결과 디코딩
70
71	OMD 코드는 base64url 인코딩된 JSON이다:
72
73	```typescript
74	{
75	refId: string, // 선택한 레퍼런스 ID
76	overrides: {
77	primaryColor: string, // 선택한 primary color
78	fontFamily: string,
79	headingWeight: string,
80	borderRadius: string,
81	darkMode: boolean
82	},
83	preferences: {
84	typographyChar: string, // "geometric" \| "humanist" \| "monospace"
85	buttonStyle: string, // "sharp" \| "rounded"
86	inputStyle: string, // "bordered" \| "underline"
87	headerStyle: string, // "glass" \| "solid"
88	cardStyle: string, // "bordered" \| "elevated"
89	depthStyle: string, // "flat" \| "layered"
90	density: string, // "compact" \| "spacious"
91	saturation: string, // "muted" \| "vivid"
92	mood: string // 현재 미사용
93	},
94	components: string[]
95	}
96	```
97
98	디코딩 방법:
99	```bash
100	echo "OMD-코드" \| sed 's/^OMD-//' \| base64 -d
101	```
102
103	### Step 2: oh-my-design CLI로 DESIGN.md 생성
104
105	디코딩한 결과에서 refId와 overrides를 추출하여 CLI를 실행한다:
106
107	```bash
108	cd /Users/kwakseongjae/Desktop/projects/oh-my-design
109	npx tsx bin/oh-my-design.ts generate --config=<config-hash>
110	```
111
112	config-hash는 기존 format: `refId\|primaryColor\|fontFamily\|headingWeight\|borderRadius\|darkMode\|components`를 base64url 인코딩한 것이다.
113
114	또는 프로그래밍적으로:
115
116	```typescript
117	import { decodeConfig } from './src/lib/core/config-hash';
118	// OMD 코드를 디코딩하여 config-hash 형식으로 변환
119	```
120
121	### Step 3: Preferences 유기적 반영
122
123	생성된 DESIGN.md에 서베이 preferences를 반영한다. 레퍼런스 원문에서 preference와 다른 부분만 수정/추가한다.
124
125	#### preference → DESIGN.md 섹션 매핑
126
127	\| preference \| 반영 대상 섹션 \| 반영 방법 \|
128	\|---\|---\|---\|
129	\| typographyChar \| §3 Typography Rules \| Font Family의 성격 설명 조정 \|
130	\| buttonStyle \| §4 Component Stylings > Buttons \| radius 값 및 설명 조정 \|
131	\| inputStyle \| §4 Component Stylings > Inputs \| border 스타일 설명 조정 \|
132	\| headerStyle \| §4 Component Stylings > Navigation \| glass/solid 설명 추가 \|
133	\| cardStyle \| §4 Component Stylings > Cards \| border vs shadow 스타일 조정 \|
134	\| depthStyle \| §6 Depth & Elevation \| shadow 시스템 전체 조정 \|
135	\| density \| §5 Layout Principles \| spacing scale 조정 \|
136	\| saturation \| §2 Color Palette \| 채도 가이드라인 추가 \|
137
138	#### 반영 규칙
139
140	1. 레퍼런스와 일치하는 preference는 건드리지 않는다 — 이미 맞으니까
141	2. 다른 preference만 해당 섹션에 커스터마이즈 노트를 추가한다
142	3. Do's and Don'ts (§7)에 preference 기반 가이드라인을 추가한다
143
144	예시 — depthStyle이 "flat"인데 레퍼런스가 shadow를 많이 쓰는 경우:
145
146	§6 Depth & Elevation 끝에 추가:
147	```markdown
148	### Customization: Flat Design Preference
149	This project prefers flat design. Override the shadow system above:
150	- Use `box-shadow: none` as the default for all components
151	- Use borders (`1px solid var(--border)`) for element separation
152	- Reserve shadows only for modals and dropdowns (elevation level 3+)
153	```
154
155	§7 Do's and Don'ts에 추가:
156	```markdown
157	- DO: Use borders and background color shifts for visual hierarchy
158	- DON'T: Apply decorative shadows to cards and buttons
159	```
160
161	### Step 4: 파일 저장 및 안내
162
163	생성된 DESIGN.md를 프로젝트 루트에 저장한다:
164
165	```bash
166	# 프로젝트 루트에 저장
167	write DESIGN.md
168	```
169
170	사용자에게 결과 요약:
171
172	```
173	DESIGN.md를 생성했습니다.
174
175	기반 레퍼런스: Vercel
176	커스터마이즈:
177	- Primary Color: #533afd → #2563eb
178	- Depth: layered → flat (border 기반으로 변경)
179	- Buttons: rounded (pill shape)
180	- Dark Mode: 포함
181
182	파일: ./DESIGN.md
183	```
184
185	## 주의사항
186
187	- Zero AI call: DESIGN.md 생성은 모두 로컬에서 deterministic하게 처리
188	- 기존 /builder 와 독립: /survey 라우트는 별도 파이프라인
189	- 서베이 URL 도메인: 항상 `oh-my-design.kr` 사용
190	- OMD 코드 접두사: `OMD-`로 시작하는 입력만 결과 코드로 인식
191	- 레퍼런스 ID에 점(.) 포함 가능: linear.app, mistral.ai, x.ai 등 — URL 인코딩 주의

People who liked this also viewed

6 picks

Type