oh-my-design: Skill for Claude Code

Claude Design 컨텍스트 이관 스킬 (v2)

현재 코드베이스를 분석해 디자인 컨텍스트 브리프를 합성하고, 그것을 claude.ai/design 에 전달해 디자인을 생성한 뒤, 결과 링크를 터미널에 클릭 가능한 OSC-8 하이퍼링크로 돌려준다. 이 문서는 설명서가 아니라 런타임 Claude가 그대로 따르는 실행 플레이북이다.

v2의 핵심: ① 코드베이스 → 디자인 컨텍스트 이관(스택/토큰/컴포넌트/라우트/실제 카피/에셋/ 레포 링크), ② 컨텍스트 깊이를 매 실행 선택(lean ↔ comprehensive), ③ 렌더 스크린샷 캡처 안 함(기존 이미지 에셋 업로드는 가능), ④ 풀오토 + 핸드오프 폴백(claude.ai/design 상호작용이 막히면 알려진 확장 충돌 버그로 보고 즉시 수동 전환).

스크립트 경로 규칙: 런타임 cwd 는 보통 사용자의 프로젝트 폴더다(스킬 폴더가 아님). STEP -1에서 현재 채널·scope의 스킬 위치를 CLAUDE_DESIGN_SKILL_DIR 절대경로로 한 번 해석한 뒤 모든 스크립트를 그 변수 아래에서 호출한다. --root 스캔 대상은 cwd ($PWD), 즉 분석할 프로젝트 폴더다.

무엇을 하는가

• 코드베이스를 분석해 디자인 컨텍스트 브리프(스택, 디자인 토큰, 컴포넌트, 라우트, 실제 UI 카피, 큐레이션된 브랜드 에셋, git 레포 URL + 핵심 파일 경로)를 합성한다.
• 코드가 있으면 레포를 링크하고(브리프에 git URL + 핵심 파일 경로), 실제 브랜드 비주얼 에셋(로고/심볼/OG/히어로 등 — 문서 템플릿이 아님)을 큐레이션해 업로드한다.
• 대화 맥락 + 브리프 + 에셋 + URL 레퍼런스를 묶어 claude.ai/design 에 holistic 하게 전달하고, 결과 캔버스 URL 을 받아 터미널에 클릭 링크로 출력한다.

언제 쓰나 / 언제 안 쓰나

• 쓴다: "이 코드베이스를 클로드 디자인으로 옮겨줘", "코드 분석해서 claude design에 보내줘", "랜딩 디자인 뽑아줘" 처럼 코드/폴더 컨텍스트를 Claude Design 으로 넘길 때.
• 안 쓴다: 텍스트 디자인 조언/카피만 원할 때(브라우저 불필요), 코드로 UI 를 직접 구현할 때(일반 코딩 작업), 로그인/CAPTCHA 자동 돌파가 필요할 때(사용자에게 위임).

워크플로 (STEP -1 → 7)

각 단계의 MCP 도구는 ToolSearch 로 먼저 로드한 뒤 호출한다(select:<tool_name>). 셀렉터/라벨은 확정이 아니라 검증할 힌트다. 같은 단계에서 2~3회 실패하면 멈추고 핸드오프하거나 사용자에게 묻는다(루프/삽질 금지).

STEP -1 — SKILL_DIR resolve (채널·project/global 공통)

하드코딩된 ~/.claude/skills를 쓰지 않는다. 아래를 한 번 실행하고 SKILL_DIR_OK를 확인한다:

PROJECT_ROOT=$(git rev-parse --show-toplevel 2>/dev/null || pwd)
CLAUDE_DESIGN_SKILL_DIR=""
for candidate in \
  "$PROJECT_ROOT/.claude/skills/claude-design" \
  "$PROJECT_ROOT/.agents/skills/claude-design" \
  "$PROJECT_ROOT/.opencode/skills/claude-design" \
  "$HOME/.claude/skills/claude-design" \
  "$HOME/.agents/skills/claude-design" \
  "$HOME/.config/opencode/skills/claude-design" \
  "$(npm root 2>/dev/null)/oh-my-design-cli/skills/claude-design" \
  "$(npm root -g 2>/dev/null)/oh-my-design-cli/skills/claude-design"
do
  if [ -f "$candidate/SKILL.md" ] && [ -d "$candidate/scripts" ]; then
    CLAUDE_DESIGN_SKILL_DIR="$candidate"
    break
  fi
done
[ -n "$CLAUDE_DESIGN_SKILL_DIR" ] && echo "SKILL_DIR_OK=$CLAUDE_DESIGN_SKILL_DIR" || echo "SKILL_DIR_MISSING"