claude-design

Name: claude-design
Author: kwakseongjae

365stars35forks

How to install claude-design?

kwakseongjae/oh-my-design/claude-design

$npx -y skills add kwakseongjae/oh-my-design --skill claude-design

Installs into the current project.

Summary

현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬. 터미널 한 번의 호출로 코드베이스 → Claude Design 컨텍스트 이관을 수행한다. claude.ai/design 은 사용자의 로그인된 Chrome(claude-in-chrome)

Files · 1

View on GitHub

SKILL.md

1	<!-- omd:installed-skill — managed by `omd install-skills`. Do not edit; rerun the command to refresh. -->
2
3
4	# Claude Design 컨텍스트 이관 스킬 (v2)
5
6	현재 코드베이스를 분석해 디자인 컨텍스트 브리프를 합성하고, 그것을 claude.ai/design
7	에 전달해 디자인을 생성한 뒤, 결과 링크를 터미널에 클릭 가능한 OSC-8 하이퍼링크로
8	돌려준다. 이 문서는 설명서가 아니라 런타임 Claude가 그대로 따르는 실행 플레이북이다.
9
10	v2의 핵심: ① 코드베이스 → 디자인 컨텍스트 이관(스택/토큰/컴포넌트/라우트/실제 카피/에셋/
11	레포 링크), ② 컨텍스트 깊이를 매 실행 선택(lean ↔ comprehensive), ③ **렌더 스크린샷
12	캡처 안 함(기존 이미지 에셋 업로드는 가능), ④ 풀오토 + 핸드오프 폴백**(claude.ai/design
13	상호작용이 막히면 알려진 확장 충돌 버그로 보고 즉시 수동 전환).
14
15	> 스크립트 경로 규칙: 런타임 cwd 는 보통 사용자의 프로젝트 폴더다(스킬 폴더가
16	> 아님). STEP -1에서 현재 채널·scope의 스킬 위치를 `CLAUDE_DESIGN_SKILL_DIR` 절대경로로
17	> 한 번 해석한 뒤 모든 스크립트를 그 변수 아래에서 호출한다. `--root` 스캔 대상은 cwd
18	> (`$PWD`), 즉 분석할 프로젝트 폴더다.
19
20	## 무엇을 하는가
21	- 코드베이스를 분석해 디자인 컨텍스트 브리프(스택, 디자인 토큰, 컴포넌트, 라우트,
22	실제 UI 카피, 큐레이션된 브랜드 에셋, git 레포 URL + 핵심 파일 경로)를 합성한다.
23	- 코드가 있으면 레포를 링크하고(브리프에 git URL + 핵심 파일 경로), 실제 **브랜드
24	비주얼 에셋**(로고/심볼/OG/히어로 등 — 문서 템플릿이 아님)을 큐레이션해 업로드한다.
25	- 대화 맥락 + 브리프 + 에셋 + URL 레퍼런스를 묶어 **claude.ai/design 에 holistic 하게
26	전달**하고, 결과 캔버스 URL 을 받아 터미널에 클릭 링크로 출력한다.
27
28	## 언제 쓰나 / 언제 안 쓰나
29	- 쓴다: "이 코드베이스를 클로드 디자인으로 옮겨줘", "코드 분석해서 claude design에
30	보내줘", "랜딩 디자인 뽑아줘" 처럼 코드/폴더 컨텍스트를 Claude Design 으로 넘길 때.
31	- 안 쓴다: 텍스트 디자인 조언/카피만 원할 때(브라우저 불필요), 코드로 UI 를 직접 구현할
32	때(일반 코딩 작업), 로그인/CAPTCHA 자동 돌파가 필요할 때(사용자에게 위임).
33
34	---
35
36	## 워크플로 (STEP -1 → 7)
37
38	> 각 단계의 MCP 도구는 ToolSearch 로 먼저 로드한 뒤 호출한다(`select:<tool_name>`).
39	> 셀렉터/라벨은 확정이 아니라 검증할 힌트다. 같은 단계에서 2~3회 실패하면 멈추고
40	> 핸드오프하거나 사용자에게 묻는다(루프/삽질 금지).
41
42	### STEP -1 — SKILL_DIR resolve (채널·project/global 공통)
43
44	하드코딩된 `~/.claude/skills`를 쓰지 않는다. 아래를 한 번 실행하고 `SKILL_DIR_OK`를 확인한다:
45
46	```bash
47	PROJECT_ROOT=$(git rev-parse --show-toplevel 2>/dev/null \|\| pwd)
48	CLAUDE_DESIGN_SKILL_DIR=""
49	for candidate in \
50	"$PROJECT_ROOT/.claude/skills/claude-design" \
51	"$PROJECT_ROOT/.agents/skills/claude-design" \
52	"$PROJECT_ROOT/.opencode/skills/claude-design" \
53	"$HOME/.claude/skills/claude-design" \
54	"$HOME/.agents/skills/claude-design" \
55	"$HOME/.config/opencode/skills/claude-design" \
56	"$(npm root 2>/dev/null)/oh-my-design-cli/skills/claude-design" \
57	"$(npm root -g 2>/dev/null)/oh-my-design-cli/skills/claude-design"
58	do
59	if [ -f "$candidate/SKILL.md" ] && [ -d "$candidate/scripts" ]; then
60	CLAUDE_DESIGN_SKILL_DIR="$candidate"
61	break
62	fi
63	done
64	[ -n "$CLAUDE_DESIGN_SKILL_DIR" ] && echo "SKILL_DIR_OK=$CLAUDE_DESIGN_SKILL_DIR" \|\| echo "SKILL_DIR_MISSING"
65	```
66
67	`SKILL_DIR_MISSING`이면 임의 경로로 폴백하지 말고 `npx oh-my-design-cli@latest doctor` 후 현재 채널을 재설치한다.
68
69	### STEP 0 — CONTEXT DETECT (코드 프로젝트인가?)
70	cwd 가 코드 프로젝트인지 판별한다. 신호(하나라도 있으면 코드베이스 경로):
71	`package.json` / `src/` / `.git/` / 알려진 매니페스트(`pyproject.toml`, `Cargo.toml`,
72	`go.mod`, `pom.xml`, `composer.json`, `Gemfile` 등).
73	- 있으면 → 코드베이스 경로(`analyze_codebase.py`).
74	- 없으면 → 플레인 폴더 경로(`gather_references.py` + 대화 맥락만으로 브리프 구성).
75
76	빠른 판별:
77	```
78	ls -a "$PWD" \| grep -E '^(package\.json\|src\|\.git\|pyproject\.toml\|Cargo\.toml\|go\.mod\|pom\.xml\|composer\.json\|Gemfile)$'
79	```
80
81	### STEP 1 — DEPTH (매 실행 선택: lean ↔ comprehensive)
82	요청에서 깊이를 추론한 뒤 한 줄로 확인/질의한다(사용자가 선택). 휴리스틱:
83	- 빠른 1장/단일 화면/"대충/빠르게/시안만" → lean 추론.
84	- 전체 제품/디자인 시스템/여러 화면/"제대로/충실히/디자인 시스템" → comprehensive 추론.
85
86	확인 문구(한 줄, 예):
87	> 컨텍스트 깊이를 comprehensive(스택·토큰·컴포넌트·라우트·카피·에셋 전부)로 잡을게요.
88	> 가볍게 가려면 lean 이라고 알려주세요.
89
90	선택된 값이 곧 `analyze_codebase.py --level <lvl>` 의 입력이다.
91
92	### STEP 2 — ANALYZE (코드 분석 / 스크린샷 없음)
93	렌더링 스크린샷은 절대 캡처하지 않는다(dev-server·captureVisibleTab 사용 안 함 —
94	알려진 스크린샷 버그 회피). 기존 이미지 에셋 파일은 STEP 6 에서 업로드할 수 있다.
95
96	코드베이스 경로:
97	```
98	python3 "$CLAUDE_DESIGN_SKILL_DIR/scripts/analyze_codebase.py" \
99	--root "$PWD" --level <lean\|comprehensive> --json
100	```
101	- `--json` 1회면 충분: 출력 JSON 안에 `brief_markdown`(붙여넣기용 브리프)와
102	`asset_paths`(업로드용 절대경로)가 이미 포함된다(단일 출력 채널). 사람이 읽을 마크다운
103	파일을 따로 남기려면 `--out`(--json 없이)을 한 번 더 호출:
104	```
105	python3 "$CLAUDE_DESIGN_SKILL_DIR/scripts/analyze_codebase.py" \
106	--root "$PWD" --level <lvl> --out /tmp/design-brief.md
107	```
108	- `--json` 출력에서 다음을 파싱한다: **brief_markdown / 스택 / 디자인 토큰(색·폰트·간격·radius) /
109	라우트 / 컴포넌트 / 실제 UI 카피 / 에셋(asset_paths, ABSOLUTE 경로) / 레포(git URL + 핵심 파일)**.
110	- 캡 조정 플래그: `--max-components N`(기본 40) `--max-assets N`(기본 10)
111	`--max-copy N`(기본 60). 문서/템플릿류는 기본 제외, 필요 시 `--include-docs`.
112	- 이 스크립트는 절대 크래시하지 않는다(정규식 파싱, 프

People who liked this also viewed

6 picks

Type

claude-design

365stars35forks

View on GitHub

How to install claude-design?

kwakseongjae/oh-my-design/claude-design

$npx -y skills add kwakseongjae/oh-my-design --skill claude-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- omd:installed-skill — managed by `omd install-skills`. Do not edit; rerun the command to refresh. -->
2
3
4	# Claude Design 컨텍스트 이관 스킬 (v2)
5
6	현재 코드베이스를 분석해 디자인 컨텍스트 브리프를 합성하고, 그것을 claude.ai/design
7	에 전달해 디자인을 생성한 뒤, 결과 링크를 터미널에 클릭 가능한 OSC-8 하이퍼링크로
8	돌려준다. 이 문서는 설명서가 아니라 런타임 Claude가 그대로 따르는 실행 플레이북이다.
9
10	v2의 핵심: ① 코드베이스 → 디자인 컨텍스트 이관(스택/토큰/컴포넌트/라우트/실제 카피/에셋/
11	레포 링크), ② 컨텍스트 깊이를 매 실행 선택(lean ↔ comprehensive), ③ **렌더 스크린샷
12	캡처 안 함(기존 이미지 에셋 업로드는 가능), ④ 풀오토 + 핸드오프 폴백**(claude.ai/design
13	상호작용이 막히면 알려진 확장 충돌 버그로 보고 즉시 수동 전환).
14
15	> 스크립트 경로 규칙: 런타임 cwd 는 보통 사용자의 프로젝트 폴더다(스킬 폴더가
16	> 아님). STEP -1에서 현재 채널·scope의 스킬 위치를 `CLAUDE_DESIGN_SKILL_DIR` 절대경로로
17	> 한 번 해석한 뒤 모든 스크립트를 그 변수 아래에서 호출한다. `--root` 스캔 대상은 cwd
18	> (`$PWD`), 즉 분석할 프로젝트 폴더다.
19
20	## 무엇을 하는가
21	- 코드베이스를 분석해 디자인 컨텍스트 브리프(스택, 디자인 토큰, 컴포넌트, 라우트,
22	실제 UI 카피, 큐레이션된 브랜드 에셋, git 레포 URL + 핵심 파일 경로)를 합성한다.
23	- 코드가 있으면 레포를 링크하고(브리프에 git URL + 핵심 파일 경로), 실제 **브랜드
24	비주얼 에셋**(로고/심볼/OG/히어로 등 — 문서 템플릿이 아님)을 큐레이션해 업로드한다.
25	- 대화 맥락 + 브리프 + 에셋 + URL 레퍼런스를 묶어 **claude.ai/design 에 holistic 하게
26	전달**하고, 결과 캔버스 URL 을 받아 터미널에 클릭 링크로 출력한다.
27
28	## 언제 쓰나 / 언제 안 쓰나
29	- 쓴다: "이 코드베이스를 클로드 디자인으로 옮겨줘", "코드 분석해서 claude design에
30	보내줘", "랜딩 디자인 뽑아줘" 처럼 코드/폴더 컨텍스트를 Claude Design 으로 넘길 때.
31	- 안 쓴다: 텍스트 디자인 조언/카피만 원할 때(브라우저 불필요), 코드로 UI 를 직접 구현할
32	때(일반 코딩 작업), 로그인/CAPTCHA 자동 돌파가 필요할 때(사용자에게 위임).
33
34	---
35
36	## 워크플로 (STEP -1 → 7)
37
38	> 각 단계의 MCP 도구는 ToolSearch 로 먼저 로드한 뒤 호출한다(`select:<tool_name>`).
39	> 셀렉터/라벨은 확정이 아니라 검증할 힌트다. 같은 단계에서 2~3회 실패하면 멈추고
40	> 핸드오프하거나 사용자에게 묻는다(루프/삽질 금지).
41
42	### STEP -1 — SKILL_DIR resolve (채널·project/global 공통)
43
44	하드코딩된 `~/.claude/skills`를 쓰지 않는다. 아래를 한 번 실행하고 `SKILL_DIR_OK`를 확인한다:
45
46	```bash
47	PROJECT_ROOT=$(git rev-parse --show-toplevel 2>/dev/null \|\| pwd)
48	CLAUDE_DESIGN_SKILL_DIR=""
49	for candidate in \
50	"$PROJECT_ROOT/.claude/skills/claude-design" \
51	"$PROJECT_ROOT/.agents/skills/claude-design" \
52	"$PROJECT_ROOT/.opencode/skills/claude-design" \
53	"$HOME/.claude/skills/claude-design" \
54	"$HOME/.agents/skills/claude-design" \
55	"$HOME/.config/opencode/skills/claude-design" \
56	"$(npm root 2>/dev/null)/oh-my-design-cli/skills/claude-design" \
57	"$(npm root -g 2>/dev/null)/oh-my-design-cli/skills/claude-design"
58	do
59	if [ -f "$candidate/SKILL.md" ] && [ -d "$candidate/scripts" ]; then
60	CLAUDE_DESIGN_SKILL_DIR="$candidate"
61	break
62	fi
63	done
64	[ -n "$CLAUDE_DESIGN_SKILL_DIR" ] && echo "SKILL_DIR_OK=$CLAUDE_DESIGN_SKILL_DIR" \|\| echo "SKILL_DIR_MISSING"
65	```
66
67	`SKILL_DIR_MISSING`이면 임의 경로로 폴백하지 말고 `npx oh-my-design-cli@latest doctor` 후 현재 채널을 재설치한다.
68
69	### STEP 0 — CONTEXT DETECT (코드 프로젝트인가?)
70	cwd 가 코드 프로젝트인지 판별한다. 신호(하나라도 있으면 코드베이스 경로):
71	`package.json` / `src/` / `.git/` / 알려진 매니페스트(`pyproject.toml`, `Cargo.toml`,
72	`go.mod`, `pom.xml`, `composer.json`, `Gemfile` 등).
73	- 있으면 → 코드베이스 경로(`analyze_codebase.py`).
74	- 없으면 → 플레인 폴더 경로(`gather_references.py` + 대화 맥락만으로 브리프 구성).
75
76	빠른 판별:
77	```
78	ls -a "$PWD" \| grep -E '^(package\.json\|src\|\.git\|pyproject\.toml\|Cargo\.toml\|go\.mod\|pom\.xml\|composer\.json\|Gemfile)$'
79	```
80
81	### STEP 1 — DEPTH (매 실행 선택: lean ↔ comprehensive)
82	요청에서 깊이를 추론한 뒤 한 줄로 확인/질의한다(사용자가 선택). 휴리스틱:
83	- 빠른 1장/단일 화면/"대충/빠르게/시안만" → lean 추론.
84	- 전체 제품/디자인 시스템/여러 화면/"제대로/충실히/디자인 시스템" → comprehensive 추론.
85
86	확인 문구(한 줄, 예):
87	> 컨텍스트 깊이를 comprehensive(스택·토큰·컴포넌트·라우트·카피·에셋 전부)로 잡을게요.
88	> 가볍게 가려면 lean 이라고 알려주세요.
89
90	선택된 값이 곧 `analyze_codebase.py --level <lvl>` 의 입력이다.
91
92	### STEP 2 — ANALYZE (코드 분석 / 스크린샷 없음)
93	렌더링 스크린샷은 절대 캡처하지 않는다(dev-server·captureVisibleTab 사용 안 함 —
94	알려진 스크린샷 버그 회피). 기존 이미지 에셋 파일은 STEP 6 에서 업로드할 수 있다.
95
96	코드베이스 경로:
97	```
98	python3 "$CLAUDE_DESIGN_SKILL_DIR/scripts/analyze_codebase.py" \
99	--root "$PWD" --level <lean\|comprehensive> --json
100	```
101	- `--json` 1회면 충분: 출력 JSON 안에 `brief_markdown`(붙여넣기용 브리프)와
102	`asset_paths`(업로드용 절대경로)가 이미 포함된다(단일 출력 채널). 사람이 읽을 마크다운
103	파일을 따로 남기려면 `--out`(--json 없이)을 한 번 더 호출:
104	```
105	python3 "$CLAUDE_DESIGN_SKILL_DIR/scripts/analyze_codebase.py" \
106	--root "$PWD" --level <lvl> --out /tmp/design-brief.md
107	```
108	- `--json` 출력에서 다음을 파싱한다: **brief_markdown / 스택 / 디자인 토큰(색·폰트·간격·radius) /
109	라우트 / 컴포넌트 / 실제 UI 카피 / 에셋(asset_paths, ABSOLUTE 경로) / 레포(git URL + 핵심 파일)**.
110	- 캡 조정 플래그: `--max-components N`(기본 40) `--max-assets N`(기본 10)
111	`--max-copy N`(기본 60). 문서/템플릿류는 기본 제외, 필요 시 `--include-docs`.
112	- 이 스크립트는 절대 크래시하지 않는다(정규식 파싱, 프

People who liked this also viewed

6 picks

Type