메뉴
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