oh-my-design: Skill for Claude Code

omd:experiment-gallery — N-brand comparison index

왜 이 스킬

여러 brand experiment를 돌리고 나면 결과물 검수가 산만 — 각 폴더 따로 열고 비교하기 번거로움. 이 skill은 단일 index.html 에 N개 결과를 iframe으로 박아서 한 화면에서 wow ratings + deltas + 실제 렌더를 동시 확인.

트리거

• 명시: "결과물 한 번에 보여줘", "갤러리 만들어", "N개 비교 뷰"
• 묵시: 사용자가 omd:harness로 ≥2개 brand experiment를 한 batch에서 끝낸 직후 ("이제 비교해보자" 라는 흐름)
• 다른 skill 안에서 호출: omd:batch-launch가 5개 brand 끝낸 후 Phase 5로 호출

입력

다음 둘 중 하나:

1. 명시 디렉토리 list: 사용자가 /tmp/omd-gallery/{brand1,brand2,brand3} 같은 list 제공
2. 부모 디렉토리 + glob: /tmp/omd-gallery/* 또는 web/experiments/2026-05/* 등 — skill이 자동 enumerate

각 brand 디렉토리는 다음 파일들 있어야 함 (있으면 사용, 없으면 fallback):

• landing.html (필수) — iframe src
• DESIGN.md (선택) — brand display name 추출
• assets/_reference/<id>/structure.json (선택) — composition 메타
• assets/_reference/<id>/.live-inspect-proof.json (선택) — live tag 표시
• screenshots/after.png (선택) — fallback preview
• experiment-meta.json (선택, 권장) — wow rating + round-2 deltas + 카테고리 — sub-agent가 작성

experiment-meta.json 스키마 (sub-agent가 작성)

각 experiment sub-agent는 work 종료 직전 다음 파일을 작성:

{
  "brand_id": "toss",
  "brand_korean": "토스",
  "brand_category": "Fintech",
  "brand_color_hex": "#3182f6",
  "wow_rating": 7.5,
  "lines": 603,
  "live_inspect": { "ran": true, "raw_samples": 7, "method": "playwright|harness" },
  "round2_deltas": [
    "Reveal failsafe — 2s forwards animation",
    "Stat-card narrative upgrade",
    "CTA copy 구체화 (시간 약속)",
    "Hero shimmer (accent text gradient)",
    "Dark marquee band rhythm break",
    "Chart stroke-dashoffset draw-in"
  ],
  "ip_compliance": {
    "your_logo_placeholders": 2,
    "your_product_name_placeholders": 4,
    "brand_logo_embed_count": 0,
    "verbatim_brand_copy": 0
  },
  "honest_gaps": [
    "Hero composition은 single character + flat card (3D ornament 부재)",
    "Carousel은 dot만 회전 (slide content 미스왑)"
  ]
}