claude-design
현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸…
Guided setup of the tools the design harness can use — image/video generation channels, browser, encoders. Detects what the user already has, explains pros/cons/costs, asks instead of instructing, and saves choices to .omd/config.json so every later design task reuses them.
$ npx -y skills add kwakseongjae/oh-my-design --skill omd-setup --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/omd-setupContext preview
The summary Claude sees to decide when to auto-load this skill.
Guided setup of the tools the design harness can use — image/video generation channels, browser, encoders. Detects what the user already has, explains pros/cons/costs, asks instead of instructing, and saves choices to .omd/config.json so every later design task reuses them.
name: omd-setup description: "Guided setup of the tools the design harness can use — image/video generation channels, browser, encoders. Detects what the user already has, explains pros/cons/costs, asks instead of instructing, and saves choices to .omd/config.json so every later design task reuses them. Trigger: 'omd setup', '도구 셋업', '이미지 생성 뭐 쓸 수 있어', 'configure media', '세팅해줘', 'what can you generate'." argument-hint: "[--redo] — 기존 설정을 무시하고 다시 문답" user-invocable: true
원칙 하나: **"이거 발급받아라"고 하지 않는다.** 이 머신과 계정에 이미 있는 채널을 찾아 보여 주고, 각 채널의 장단점·비용을 설명한 뒤, 사용자가 고른다. 고른 것은 `.omd/config.json`에 저장돼 이후의 디자인 작업(`omd:landing`, `omd:media`, `omd:showcase`, `omd:autopilot`)이 자동으로 쓴다. 키 값은 어디에도 기록하지 않는다 — env 이름의 존재 여부만.
omd setup detect --json # 설치본(기본) — 패키지 루트의 감지 스크립트를 실행한다 node scripts/omd-setup-detect.mjs --json # 이 레포 안에서 개발할 때만
설치본이 기본 경로다. 결과의 `channels[*].present`가 사실이다. `present: null`(claude-in-chrome 등)은 세션의 도구 목록에서 직접 확인한다. 이미 `.omd/config.json`이 있고 `--redo`가 아니면 현재 설정을 보여 주고 바꿀지만 묻는다.
감지된 채널만 표에 넣는다(없는 것은 "미보유" 한 줄로 접는다 — 발급 안내 금지). 열: 채널 · 무엇을 만드나 · 장점 · 단점 · 비용(외부 발표치임을 명시) · 이 프로젝트에서 쓰는 곳. 예:
| 채널 | 만드는 것 | 장점 | 단점 | 비용 | 쓰는 곳 | |---|---|---|---|---|---| | grok build | 이미지·6초 영상 | 로그인만으로 · 벤치 실사용 | SVG 없음 | 구독 | landing 히어로·섹션 에셋 | | Codex $imagegen | 이미지 | 키 없이 헤드리스, 참조 편집 | SVG 없음 | ≈$0.03–0.08/장 | media 래스터 | | Recraft | SVG·style_id | 유일한 벡터, 브랜드 스타일 재사용 | 유료 키 | SVG $0.088 | 아이콘·일러스트 세트 |
`AskUserQuestion` 한 번에 묻는다: 1. 래스터 이미지 1순위 채널(감지된 것 중) — 권장은 첫 선택지. 2. SVG·아이콘 세트: Recraft 보유 시 쓸지 / 없으면 인라인 SVG 생성으로 갈지. 3. 영상: grok `image_to_video` / Veo / 안 씀. 4. 브라우저: playwright(결정론) / claude-in-chrome(로그인 세션) / aside. 5. 비용 상한: 작업당 자산 세트 예산(기본 $1). 무인 모드면 각 문항의 첫 선택지를 고르고 `autoSelected`로 기록한다.
`.omd/config.json`:
{
"version": 1,
"updatedAt": "<ISO8601>",
"media": { "image": ["grok-build", "codex-imagegen"], "svg": "inline" , "video": "grok-build", "budgetUsdPerSet": 1 },
"browser": "playwright",
"detected": { "<channel>": { "present": true, "version": "…" } },
"notes": "사용자가 고른 이유 한 줄"
}`.omd/preferences.md`에 `pending` 한 줄을 남긴다: "도구 설정 — <요약> (omd:setup, <날짜>)". 키 값은 쓰지 않는다.
설정이 끝나면 지금 바로 해볼 수 있는 것 하나를 제안한다 — 예: "`omd:landing toss` 로 원페이지를 만들면 grok build로 에셋 5장을 생성하고 showcase 영상까지 냅니다."
Give your AI coding agent a design system. One command installs 500+ quality-graded company DESIGN.md references + skills into Claude Code, Codex, Cursor, and OpenCode. Free, MIT, zero AI calls.
Repo: kwakseongjae/oh-my-design
현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸…
Reference catalog authoring compatibility gate. Core v2 cutover가 끝나기 전에는 신규 legacy DESIGN.md…
Maximum-craft one-page landing — the wow bar. omd:landing 의 구조 위에 마감(서체 조달·그레인·깊이·색보정·스크롤…
프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더…
사용자 product UI 생성 시 placeholder 자리를 generic SVG가 아닌 **실제 free-license CDN 자산**으로 채운다.…
One-prompt autonomous product design and implementation. Use automatically for broad…