메뉴
사용자와 대화하며 디자인 선호도를 파악하고, oh-my-design 서베이를 통해 DESIGN.md를 생성합니다. '디자인 시스템 만들어줘', 'DESIGN.md 생성', '디자인 잡아줘', 'UI 스타일 정해줘' 등 디자인 시스템 구성이 필요할 때 트리거됩니다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | omd:design |
| description | 사용자와 대화하며 디자인 선호도를 파악하고, oh-my-design 서베이를 통해 DESIGN.md를 생성합니다. '디자인 시스템 만들어줘', 'DESIGN.md 생성', '디자인 잡아줘', 'UI 스타일 정해줘' 등 디자인 시스템 구성이 필요할 때 트리거됩니다. |
사용자의 프로젝트 맥락과 디자인 선호를 파악하여 oh-my-design.kr 서베이로 안내하고, 결과를 받아 DESIGN.md를 생성한다.
Phase 1: 대화 분석 → 레퍼런스 후보 추림
Phase 2: oh-my-design.kr/survey 로 안내 → 사용자가 서베이 완료
Phase 3: OMD 결과 코드 수신 → DESIGN.md 생성
사용자에게 다음을 자연스럽게 물어본다 (이미 대화에서 언급된 내용은 스킵):
중요: 질문은 1-2개로 줄이되, 핵심 정보를 얻어야 한다. 사용자가 이미 충분한 맥락을 줬다면 바로 추천으로 넘어간다.
REFERENCE_TAGS.md를 참고하여 3-6개의 레퍼런스를 추천한다.
출력 형식:
프로젝트 성격을 분석해보니, 이런 디자인 시스템들이 잘 맞을 것 같습니다:
1. **Vercel** — 미니멀하고 엔지니어링 감성, 깔끔한 다크/라이트
2. **Linear** — 정밀한 다크 모드, 개발 도구 느낌
3. **Stripe** — 프리미엄 핀테크, 정교한 그라데이션
서베이에서 이 중 하나를 고르고, 세부 취향을 조정하게 됩니다.
추천한 레퍼런스 ID 목록으로 서베이 URL을 생성한다:
https://oh-my-design.kr/survey?refs=vercel,linear.app,stripe
사용자에게 안내:
아래 링크에서 서베이를 진행해주세요:
https://oh-my-design.kr/survey?refs=vercel,linear.app,stripe
레퍼런스를 하나 고르고, 11가지 디자인 선호도를 선택하면 됩니다.
완료되면 결과 코드(OMD-...)가 나옵니다. 그걸 여기에 붙여넣어주세요.
사용자가 서베이를 완료하고 OMD-... 코드를 붙여넣을 때까지 대기한다.
OMD-로 시작하는 입력을 받으면 Phase 3로 진행OMD 코드는 base64url 인코딩된 JSON이다:
{
refId: string, // 선택한 레퍼런스 ID
overrides: {
primaryColor: string, // 선택한 primary color
fontFamily: string,
headingWeight: string,
borderRadius: string,
darkMode: boolean
},
preferences: {
typographyChar: string, // "geometric" | "humanist" | "monospace"
buttonStyle: string, // "sharp" | "rounded"
inputStyle: string, // "bordered" | "underline"
headerStyle: string, // "glass" | "solid"
cardStyle: string, // "bordered" | "elevated"
depthStyle: string, // "flat" | "layered"
density: string, // "compact" | "spacious"
saturation: string, // "muted" | "vivid"
mood: string // 현재 미사용
},
components: string[]
}
디코딩 방법:
echo "OMD-코드" | sed 's/^OMD-//' | base64 -d
디코딩한 결과에서 refId와 overrides를 추출하여 CLI를 실행한다:
cd /Users/kwakseongjae/Desktop/projects/oh-my-design
npx tsx bin/oh-my-design.ts generate --config=<config-hash>
config-hash는 기존 format: refId|primaryColor|fontFamily|headingWeight|borderRadius|darkMode|components를 base64url 인코딩한 것이다.
또는 프로그래밍적으로:
import { decodeConfig } from './src/lib/core/config-hash';
// OMD 코드를 디코딩하여 config-hash 형식으로 변환
생성된 DESIGN.md에 서베이 preferences를 반영한다. 레퍼런스 원문에서 preference와 다른 부분만 수정/추가한다.
| preference | 반영 대상 섹션 | 반영 방법 |
|---|---|---|
| typographyChar | §3 Typography Rules | Font Family의 성격 설명 조정 |
| buttonStyle | §4 Component Stylings > Buttons | radius 값 및 설명 조정 |
| inputStyle | §4 Component Stylings > Inputs | border 스타일 설명 조정 |
| headerStyle | §4 Component Stylings > Navigation | glass/solid 설명 추가 |
| cardStyle | §4 Component Stylings > Cards | border vs shadow 스타일 조정 |
| depthStyle | §6 Depth & Elevation | shadow 시스템 전체 조정 |
| density | §5 Layout Principles | spacing scale 조정 |
| saturation | §2 Color Palette | 채도 가이드라인 추가 |
예시 — depthStyle이 "flat"인데 레퍼런스가 shadow를 많이 쓰는 경우:
§6 Depth & Elevation 끝에 추가:
### Customization: Flat Design Preference
This project prefers **flat design**. Override the shadow system above:
- Use `box-shadow: none` as the default for all components
- Use borders (`1px solid var(--border)`) for element separation
- Reserve shadows only for modals and dropdowns (elevation level 3+)
§7 Do's and Don'ts에 추가:
- DO: Use borders and background color shifts for visual hierarchy
- DON'T: Apply decorative shadows to cards and buttons
생성된 DESIGN.md를 프로젝트 루트에 저장한다:
# 프로젝트 루트에 저장
write DESIGN.md
사용자에게 결과 요약:
DESIGN.md를 생성했습니다.
기반 레퍼런스: Vercel
커스터마이즈:
- Primary Color: #533afd → #2563eb
- Depth: layered → flat (border 기반으로 변경)
- Buttons: rounded (pill shape)
- Dark Mode: 포함
파일: ./DESIGN.md
oh-my-design.kr 사용OMD-로 시작하는 입력만 결과 코드로 인식URL 또는 brand id 입력 → 3-tier 검증 파이프라인(Tier 1 라이브 + Tier 2 getdesign/refero + Tier 3 reconcile)으로 references/<id>/DESIGN.md를 신규 생성(CREATE)하거나 기존 섹션을 검증·갱신(UPDATE). '레퍼런스 추가/수정', 'X DS 검증', 'X 컴포넌트 다시 뽑아줘' 류에 트리거.
URL 또는 brand id 입력 → 3-tier 검증 파이프라인(Tier 1 라이브 + Tier 2 getdesign/refero + Tier 3 reconcile)으로 references/<id>/DESIGN.md를 신규 생성(CREATE)하거나 기존 섹션을 검증·갱신(UPDATE). '레퍼런스 추가/수정', 'X DS 검증', 'X 컴포넌트 다시 뽑아줘' 류에 트리거.
단일 brand의 references/<id>/DESIGN.md를 Apple-tier 깊이로 풀 마이그레이션. 9 quality gate 전부 통과 — §4 canonical schema + ≥2 surface live inspect + Tier 2 cross-check + .verification.md conflict matrix + 검증된 §10-15 philosophy + footer + tests + visual smoke. 'X 마이그레이션', 'X apple 깊이로', 'X 풀 검증', 'omd:migrate stripe' 류에 트리거.
선택된 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 책임).
디자인·프론트 업계가 '감'으로 쓰던 인터페이스 디테일을 수치화한 규칙으로 적용(APPLY)하거나 감사(AUDIT)한다. Jakub Krehel의 make-interfaces-feel-better 철학을 계승 + HIG/Material/WCAG/DS 토큰/실무자 리서치로 확장한 17축·113규칙(provenance 등급별). 모션 타이밍·이징·동심원 radius·tabular-nums·44px 타깃·focus ring·prefers-reduced-motion 등. 'feel 좋게 다듬어줘', '인터페이스 디테일 적용', 'feel 점검', '마이크로 인터랙션 손봐줘', 'make this feel better', 'polish the interactions', 「インターフェースの細部を詰めて」, 「介面細節打磨」 류에 트리거. 브랜드 토큰은 DESIGN.md(omd:apply)가 우선.
화면 전체나 신규 surface를 처음부터 디자인할 때의 진입점 — Discovery→Wireframe→Components→Microcopy→Validation 파이프라인을 omd-master 오케스트레이터로 실행. 트리거: '랜딩페이지', '랜딩 페이지', '랜딩 만들어줘', '홈 화면', '첫 화면', '프로토타입', '그럴싸한', '구색 갖춰', 'first screen', 'first impression', 'landing page', 'landing', 'prototype', 'MVP UI', 'home', 'production-ready', 'wireframe to production', '랜딩 처음부터', 'production-ready', '一からデザイン', '從頭設計'. 자연어 발화('그럴싸한 랜딩 만들어줘', 'MVP UI 잡아줘', '프로토타입이라도 구색 갖춰서')에도 자동 트리거. 단일 컴포넌트 수정은 omd:apply.