/claude-design

name: claude-design
description: |
  현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/
  라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design
  (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한
  형태로 돌려주는 스킬. 터미널 한 번의 호출로 코드베이스 → Claude Design 컨텍스트 이관을
  수행한다. claude.ai/design 은 사용자의 로그인된 Chrome(claude-in-chrome)으로 구동하되,
  상호작용 레이어가 막히면(알려진 chrome-extension 충돌 버그) 깔끔하게 수동 핸드오프로
  전환한다. 렌더링 스크린샷 캡처는 하지 않는다.
  트리거: "/claude-design", "이 코드베이스를 클로드 디자인으로 옮겨줘",
  "코드베이스 분석해서 claude design에 전달", "랜딩 디자인 뽑아줘", "claude.ai/design에 보내줘",
  "클로드 디자인에 디자인 요청해줘", "이 레퍼런스로 디자인 만들어줘", "Claude Design에 시안 요청".
x-omd-channels: claude-code codex opencode
metadata:
  author: 곽성재
  version: "2.1.0"

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"

`SKILL_DIR_MISSING`이면 임의 경로로 폴백하지 말고 `npx oh-my-design-cli@latest doctor` 후 현재 채널을 재설치한다.

STEP 0 — CONTEXT DETECT (코드 프로젝트인가?)

cwd 가 코드 프로젝트인지 판별한다. 신호(하나라도 있으면 **코드베이스 경로**): `package.json` / `src/` / `.git/` / 알려진 매니페스트(`pyproject.toml`, `Cargo.toml`, `go.mod`, `pom.xml`, `composer.json`, `Gemfile` 등).

• 있으면 → **코드베이스 경로**(`analyze_codebase.py`).
• 없으면 → **플레인 폴더 경로**(`gather_references.py` + 대화 맥락만으로 브리프 구성).

빠른 판별:

ls -a "$PWD" | grep -E '^(package\.json|src|\.git|pyproject\.toml|Cargo\.toml|go\.mod|pom\.xml|composer\.json|Gemfile)$'

STEP 1 — DEPTH (매 실행 선택: lean ↔ comprehensive)

요청에서 깊이를 **추론**한 뒤 **한 줄로 확인/질의**한다(사용자가 선택). 휴리스틱:

• 빠른 1장/단일 화면/"대충/빠르게/시안만" → **lean** 추론.
• 전체 제품/디자인 시스템/여러 화면/"제대로/충실히/디자인 시스템" → **comprehensive** 추론.

확인 문구(한 줄, 예): > 컨텍스트 깊이를 **comprehensive**(스택·토큰·컴포넌트·라우트·카피·에셋 전부)로 잡을게요. > 가볍게 가려면 **lean** 이라고 알려주세요.

선택된 값이 곧 `analyze_codebase.py --level <lvl>` 의 입력이다.

STEP 2 — ANALYZE (코드 분석 / 스크린샷 없음)

**렌더링 스크린샷은 절대 캡처하지 않는다**(dev-server·captureVisibleTab 사용 안 함 — 알려진 스크린샷 버그 회피). 기존 이미지 **에셋 파일**은 STEP 6 에서 업로드할 수 있다.

코드베이스 경로:

python3 "$CLAUDE_DESIGN_SKILL_DIR/scripts/analyze_codebase.py" \
    --root "$PWD" --level <lean|comprehensive> --json

• **`--json` 1회면 충분**: 출력 JSON 안에 `brief_markdown`(붙여넣기용 브리프)와

`asset_paths`(업로드용 절대경로)가 **이미 포함**된다(단일 출력 채널). 사람이 읽을 마크다운 파일을 따로 남기려면 `--out`(--json 없이)을 한 번 더 호출:

  python3 "$CLAUDE_DESIGN_SKILL_DIR/scripts/analyze_codebase.py" \
      --root "$PWD" --level <lvl> --out /tmp/design-brief.md

• `--json` 출력에서 다음을 파싱한다: **brief_markdown / 스택 / 디자인 토큰(색·폰트·간격·radius) /

라우트 / 컴포넌트 / 실제 UI 카피 / 에셋(asset_paths, ABSOLUTE 경로) / 레포(git URL + 핵심 파일)**.

• 캡 조정 플래그: `--max-components N`(기본 40) `--max-assets N`(기본 10)

`--max-copy N`(기본 60). 문서/템플릿류는 기본 제외, 필요 시 `--include-docs`.

• 이 스크립트는 **절대 크래시하지 않는다**(정규식 파싱, 프로젝트 코드 eval/import 안 함,

`node_modules/.git/dist/build/.next/out/.venv` 스킵). 그래도 비정상 출력이면 lean 으로 재시도하거나 플레인 폴더 경로로 폴백.

플레인 폴더 경로(코드 아님):

python3 "$CLAUDE_DESIGN_SKILL_DIR/scripts/gather_references.py" --root "$PWD" --json

• 기본이 **비주얼 전용**(.png/.jpg/.jpeg/.webp/.svg/.avif/.gif)이고 문서류(.pdf/.hwp/.doc/

.ppt/.xls)는 **제외**된다. 문서까지 필요하면 `--include-docs`. URL 은 `--url` 반복으로 넘긴다(예: `--url https://example.com/ref`). JSON 의 `files[].path` 는 절대경로다.

심화 추출 항목/필드 정의는 **references/codebase-analysis.md**, 페이지 흐름/셀렉터/ 트러블슈팅은 **references/claude-design-flow.md** 참고.

STEP 3 — ASSEMBLE (붙여넣기용 브리프 조립)

분석 결과 + 대화 맥락으로 **붙여넣기 가능한 디자인 브리프**를 만든다. 권장 구성: 1. **목표/의도** — 사용자의 한 줄 요청 + 추론한 톤/타깃(landing/app/component 등)/오디언스. 2. **스택** — 프레임워크/스타일링/UI 라이브러리. 3. **디자인 토큰** — 색 팔레트, 폰트, 간격, radius(분석값 그대로). 4. **컴포넌트/라우트** — 핵심 컴포넌트 목록과 주요 화면/라우트. 5. **실제 UI 카피** — 코드에서 추출한 실제 문구(브랜드 톤 유지에 중요). 6. **코드 레퍼런스 — ⚠️ private repo + Attach-codebase 한계(검증됨).**

• GitHub URL 은 **private 면 Claude Design 이 접근 못 한다.** URL 에 의존하지 말 것.
• Claude Design 의 전용 기능 **"Attach codebase"**(composer 옆, frontend/design