メニュー
OmD Lab #01 — DESIGN.md 유무·생성방식이 UI 결과물에 미치는 영향을 4가지 조건으로 비교. 토스 스타일 모바일 UI를 (V1) DESIGN.md 없이, (V2) 수동 작성, (V3) 자동 생성, (V4) 자동 생성 + 5회 피드백 루프로 만들어 동시 비교 뷰로 시각화. 사용자가 본인의 Claude Code 안에서 재현 가능한 실험.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.
| name | omd-lab-01-designmd-impact |
| description | OmD Lab #01 — DESIGN.md 유무·생성방식이 UI 결과물에 미치는 영향을 4가지 조건으로 비교. 토스 스타일 모바일 UI를 (V1) DESIGN.md 없이, (V2) 수동 작성, (V3) 자동 생성, (V4) 자동 생성 + 5회 피드백 루프로 만들어 동시 비교 뷰로 시각화. 사용자가 본인의 Claude Code 안에서 재현 가능한 실험. |
| trigger | /omd-lab-01-designmd-impact <setup|v1|v2|v3|v4|compare|all> |
본 스킬은 .experiments/01-designmd-impact/ 디렉토리를 작업 대상으로 한다.
별도 API 호출 없이, 사용자의 Claude Code 세션 안에서 서브에이전트와 직접 작성을 통해 모든 단계를 수행한다.
| 명령 | 작업 | 산출물 |
|---|---|---|
setup | shared/ 자산 검증, Pinterest 핀 안내 | shared/ 검증 리포트 |
v1 | base-prompt만으로 UI 생성 | v1-no-design/output/, chatlog/v1-session.md |
v2 | analysis.md → 표준 9섹션 DESIGN.md 수동 작성 → UI 생성 | v2-with-design/{DESIGN.md, output/}, chatlog/v2-session.md |
v3 | analysis.md → step1-description.md → step2-DESIGN.md(자동 생성) → UI 생성 | v3-describe-to-design/*, chatlog/v3-session.md |
v4 | v3 산출물에서 시작 → feedback-script.md[1..5] 순차 적용 → 5 iteration | v4-iterative-feedback/iterations/iter-01..05/, chatlog/v4-iter-*.md |
compare | 4-column 동시 스크롤 비교 페이지 빌드 | compare/index.html |
all | setup → v1 → v2 → v3 → v4 → compare 일괄 실행 | 전체 |
chatlog/에 박제. User 프롬프트, Assistant 응답(요약 + 핵심 출력), 서브에이전트 호출을 markdown으로 기록.shared/ 변경 금지 — fonts, reset.css, base-prompt.md, assets는 4버전이 동일하게 사용.compare 산출물을 브라우저로 열면 4개 결과를 동시에 스크롤하며 비교 가능.| 역할 | subagent_type | 사용 단계 |
|---|---|---|
| ui-builder | sc:sc-frontend-architect | V1, V2, V3, V4 매 iter |
| toss-describer | Explore | V3·V4 step1 (analysis.md 읽고 description 산출) |
| design-md-author | sc:sc-technical-writer | V3 step2, V4 iter-N의 DESIGN.md 갱신 |
| preference-merger | general-purpose | V4 매 iter (피드백 → DESIGN.md preference 누적) |
각 서브에이전트 호출 시 프롬프트는 playbooks/v*.md에 명시된 템플릿을 따른다.
playbooks/playbooks/v1.mdplaybooks/v2.mdplaybooks/v3.mdplaybooks/v4.mdplaybooks/compare.md