oh-my-design: Skill for Claude Code

omd:codex-image

채널-aware 이미지 materialization 스킬. 하나의 spec format + 세 가지 downstream 처리.

문제: oh-my-design이 emit하는 HTML/MD에는 늘 illustration 자리가 비어있다. 채널별 capability가 다르다 — Codex CLI는 내장 image generation을 갖고, Claude Code는 안 가졌고, OpenCode는 user에게 위임한다. 이 차이를 skill 1개로 통합한다.

0. 단일 spec format

artifact (HTML, Markdown, JSX, MDX) 안에 다음 주석 블록을 둔다.

<!-- omd:gen-image
  filename: assets/karrot-hero.png
  prompt: "Karrot mobile home feed screenshot — white canvas, warm near-black headings, single Karrot Orange #FF6600 floating CTA. Mobile portrait, no chrome."
  aspect: "16:9"
  style: "product screenshot, minimal, mobile"
  references:
    - https://www.daangn.com/
    - https://seed-design.io/
  notes: "Single saturated element per viewport. Use brand orange only on the CTA."
-->
<img src="assets/karrot-hero.png" alt="당근 홈 피드의 단일 오렌지 CTA" />

규칙:

• filename — 결과물 저장 경로. 같은 디렉토리 기준 상대경로 권장.
• prompt — 한 문단, 구체적, 시각 디테일 + 톤 + 컬러 hex 포함.
• aspect — 16:9 4:3 1:1 9:16 중 하나.
• style — 1~3 단어 (product screenshot / inline svg / editorial photo / dieline diagram).
• references — 실제 브랜드 URL (선택, IP-safe 컨텍스트용).
• notes — generator나 검수자가 알아야 할 제약.

이 spec은 channel과 무관하다. 채널별 처리는 §1.

1. 채널 분기

호출 envelope의 channel (또는 환경 detect — process.env.OMD_CHANNEL이나 host agent 식별)에 따라:

1.1 channel = codex

Codex CLI는 native image generation을 갖고 있다. 다음 순서:

1. artifact를 Read로 전체 로드
2. <!-- omd:gen-image ... --> 블록을 정규식으로 추출 (multiline)
3. 각 블록마다 Codex의 image generation primitive 호출 — 도구명은 host에 따라 다르다 (generate_image, image.create, dall_e_image_generation, gpt_image_1 등). Codex agent가 자기 환경에서 사용 가능한 것을 선택한다.
4. 출력 파일을 filename 경로에 저장 (mkdir -p)
5. 주석 블록은 그대로 두고 <img src>나 ![]() 경로가 매칭되는지 확인. 안 맞으면 alt 텍스트 보존하면서 src만 교체.
6. 각 처리 항목에 <!-- omd:gen-image:done at=<ISO timestamp> by=codex --> 주석을 spec 블록 아래에 1줄 추가.