# Open Design > **[Claude Design][cd]의 오픈소스 대안.** 로컬 우선, 웹 배포 가능, 모든 레이어에서 BYOK — `PATH`에서 자동 감지되는 **10개의 코딩 에이전트 CLI**(Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi)가 **31개의 조합 가능한 Skill**과 **72개의 브랜드급 디자인 시스템**으로 구동되는 디자인 엔진이 됩니다. CLI가 하나도 없다? OpenAI 호환 BYOK 프록시가 spawn만 빠진 동일한 루프를 돌립니다.

English · Deutsch · 简体中文 · 繁體中文 · 한국어 · 日本語

--- ## 왜 만들었는가 Anthropic의 [Claude Design][cd](2026-04-17 출시, Opus 4.7 기반)은 LLM이 장문의 글쓰기를 멈추고 디자인 산출물을 직접 내놓기 시작했을 때 어떤 일이 일어나는지 보여주었습니다. 순식간에 화제가 되었지만, 여전히 **클로즈드 소스**, 유료, 클라우드 전용, Anthropic 모델과 Anthropic 내부 skill에 종속된 상태입니다. 체크아웃도, 자가 호스팅도, Vercel 배포도, 에이전트 교체도 불가능합니다. **Open Design(OD)은 그 오픈소스 대안입니다.** 동일한 루프, 동일한 '아티팩트 우선' 사고방식, 락인 없음. 우리는 에이전트를 만들지 않습니다 — 가장 강력한 코딩 에이전트는 이미 여러분의 노트북에 있습니다. 우리는 그것을 skill 기반 디자인 워크플로에 연결할 뿐입니다. 로컬에서는 `pnpm tools-dev`로 실행하고, 웹 레이어는 Vercel에 배포할 수 있으며, 모든 레이어에서 BYOK(자체 키 사용)가 가능합니다. `시드 라운드를 위한 매거진 스타일 피치덱 만들어줘`라고 입력하세요. 모델이 픽셀 하나 그리기 전에 **초기화 질문 폼**이 먼저 등장합니다. 에이전트는 5개의 엄선된 시각적 방향 중 하나를 선택합니다. 실시간 `TodoWrite` 계획 카드가 UI에 스트리밍됩니다. Daemon이 디스크에 실제 프로젝트 폴더를 생성하며, seed 템플릿, 레이아웃 라이브러리, 자가 점검 체크리스트가 포함됩니다. 에이전트는 **pre-flight를 강제**로 읽고, 자신의 출력물에 대해 **5차원 검토**를 실행하며, 몇 초 후 샌드박스 iframe에 렌더링되는 단일 ``를 내보냅니다. 이건 "AI가 디자인을 시도한다"가 아닙니다. 프롬프트 스택에 의해 훈련된 AI가 사용 가능한 파일시스템, 결정론적 팔레트 라이브러리, 체크리스트 문화를 갖춘 수석 디자이너처럼 동작하는 것입니다 — Claude Design이 세운 기준 그대로, 하지만 오픈소스로, 여러분의 것으로. OD는 네 개의 오픈소스 프로젝트의 어깨 위에 서 있습니다: - [**`alchaincyf/huashu-design`**](https://github.com/alchaincyf/huashu-design) — 디자인 철학의 나침반. Junior-Designer 워크플로, 5단계 브랜드 에셋 프로토콜, anti-AI-slop 체크리스트, 5차원 자기 검토, 그리고 방향 선택기 뒤의 "5개 학파 × 20가지 디자인 철학" 아이디어 — 모두 [`apps/web/src/prompts/discovery.ts`](apps/web/src/prompts/discovery.ts)에 녹아들었습니다. - [**`op7418/guizang-ppt-skill`**](https://github.com/op7418/guizang-ppt-skill) — 덱 모드. [`skills/guizang-ppt/`](skills/guizang-ppt/) 아래에 원본 그대로 번들됨, 원 LICENSE 보존; 매거진 레이아웃, WebGL hero, P0/P1/P2 체크리스트. - [**`OpenCoworkAI/open-codesign`**](https://github.com/OpenCoworkAI/open-codesign) — UX의 북극성이자 가장 가까운 동류. 최초의 오픈소스 Claude-Design 대안. 스트리밍 아티팩트 루프, 샌드박스 iframe 미리보기 패턴(React 18 + Babel 내장), 실시간 에이전트 패널(todos + tool calls + 중단 가능한 생성), 5가지 내보내기 형식(HTML / PDF / PPTX / ZIP / Markdown)을 차용했습니다. 폼 팩터에서는 의도적으로 차별화했습니다 — 그쪽은 [`pi-ai`][piai]를 번들링한 Electron 데스크탑 앱이고, 우리는 에이전트 런타임을 이미 설치된 CLI에 **위임**하는 웹앱 + 로컬 daemon입니다. - [**`multica-ai/multica`**](https://github.com/multica-ai/multica) — Daemon 및 런타임 아키텍처. PATH 스캔 방식의 에이전트 감지, 단일 특권 프로세스로서의 로컬 daemon, 에이전트-동료 세계관. ## 한눈에 보기 | | 제공 내용 | |---|---| | **코딩 에이전트 CLI(10개)** | Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · GitHub Copilot CLI · Hermes(ACP) · Kimi CLI(ACP) · Pi(RPC) — `PATH`에서 자동 감지, 한 번의 클릭으로 전환 | | **BYOK 폴백** | OpenAI 호환 프록시 `/api/proxy/stream` — `baseUrl` + `apiKey` + `model`만 붙여 넣으면 어떤 벤더(Anthropic-via-OpenAI 어댑터, DeepSeek, Groq, MiMo, OpenRouter, 자체 호스팅 vLLM, 또는 OpenAI 호환 프로바이더 무엇이든)든 엔진이 됩니다. daemon 경계에서 내부 IP / SSRF를 차단합니다. | | **내장 디자인 시스템** | **72개** — 2개의 수작업 스타터 + [`awesome-design-md`][acd2]에서 가져온 70개의 제품 시스템(Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu …) | | **내장 Skill** | **31개** — `prototype` 모드 27개(web-prototype, saas-landing, dashboard, mobile-app, gamified-app, social-carousel, magazine-poster, dating-web, sprite-animation, motion-frames, critique, tweaks, wireframe-sketch, pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, kanban-board, team-okrs …) + `deck` 모드 4개(`guizang-ppt` · `simple-deck` · `replit-deck` · `weekly-update`). picker에서 `scenario`로 그룹화: design / marketing / operation / engineering / product / finance / hr / sale / personal. | | **미디어 생성** | 이미지 · 비디오 · 오디오 surface가 디자인 루프와 함께 작동합니다. **gpt-image-2**(Azure / OpenAI)로 포스터, 아바타, 인포그래픽, 일러스트 도시 지도 · **Seedance 2.0**(ByteDance)로 15초 시네마틱 text-to-video / image-to-video · **HyperFrames**([heygen-com/hyperframes](https://github.com/heygen-com/hyperframes))로 HTML→MP4 모션 그래픽(제품 리빌, 키네틱 타이포그래피, 데이터 차트, 소셜 오버레이, 로고 아웃트로). **93개**의 즉시 복제 가능한 prompt 갤러리 — 43 gpt-image-2 + 39 Seedance + 11 HyperFrames — 모두 [`prompt-templates/`](prompt-templates/) 아래에 미리보기 썸네일과 출처 표기와 함께 배치. 채팅 입구는 코드와 동일; 실제 `.mp4` / `.png`이 프로젝트 워크스페이스에 chip으로 떨어집니다. | | **시각적 방향** | 5개의 엄선된 학파(Editorial Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist Experimental) — 각각 결정론적 OKLch 팔레트 + 폰트 스택 제공([`apps/web/src/prompts/directions.ts`](apps/web/src/prompts/directions.ts)) | | **기기 프레임** | iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome — 픽셀 정확도, skill 간 공유, [`assets/frames/`](assets/frames/)에 통합 | | **에이전트 런타임** | 로컬 daemon이 프로젝트 폴더에서 CLI를 실행 — 에이전트가 실제 디스크 환경에 대한 실제 `Read`, `Write`, `Bash`, `WebFetch` 도구 사용; 모든 어댑터에 Windows `ENAMETOOLONG` 폴백(stdin / 임시 prompt 파일) | | **임포트** | [Claude Design][cd] 익스포트 ZIP을 환영 다이얼로그에 드롭하면 `POST /api/import/claude-design`이 진짜 프로젝트로 풀어주고, 로컬 에이전트는 Anthropic이 멈춘 지점에서 그대로 편집을 이어받습니다. | | **영속성** | `.od/app.sqlite`의 SQLite: projects · conversations · messages · tabs · 사용자 templates. 내일 다시 열면 todo 카드와 열린 파일 모두 어제 그 자리. | | **라이프사이클** | 단일 입구 `pnpm tools-dev`(start / stop / run / status / logs / inspect / check) — 타입화된 sidecar 스탬프로 daemon + web(+ desktop) 구동 | | **데스크탑** | 선택적 Electron 셸: 샌드박스 렌더러 + sidecar IPC(STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN) — 같은 채널이 `tools-dev inspect desktop screenshot`을 구동해 E2E를 돌립니다 | | **배포 대상** | 로컬(`pnpm tools-dev`) · Vercel 웹 레이어 · 패키지된 Electron(자리만 잡힘, 진행 중) | | **라이선스** | Apache-2.0 | [acd2]: https://github.com/VoltAgent/awesome-design-md ## 데모

_{진입 화면 — skill 선택, 디자인 시스템 선택, 브리프 입력. 프로토타입, 덱, 모바일 앱, 대시보드, 에디토리얼 페이지를 위한 동일한 인터페이스.}	_{Turn-1 초기화 폼 — 모델이 픽셀 하나 그리기 전에 OD가 브리프를 확정합니다: 화면, 대상, 톤, 브랜드 컨텍스트, 규모. 30초의 라디오 버튼 클릭이 30분의 수정 작업을 대체합니다.}
_{방향 선택기 — 사용자에게 브랜드가 없을 때, 에이전트가 두 번째 폼을 띄워 5개의 엄선된 방향(Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm)을 제시합니다. 라디오 하나 클릭 → 결정론적 팔레트 + 폰트 스택, 모델 자유 재량 없음.}	_{실시간 할 일 진행 — 에이전트의 계획이 실시간 카드로 스트리밍됩니다. in_progress → completed 업데이트가 실시간으로 반영됩니다. 작업 중에도 저렴한 비용으로 방향을 조정할 수 있습니다.}
_{샌드박스 미리보기 — 모든 <artifact>가 깨끗한 srcdoc iframe에서 렌더링됩니다. 파일 워크스페이스에서 바로 편집 가능; HTML, PDF, ZIP으로 다운로드 가능.}	_{72개 시스템 라이브러리 — 모든 제품 시스템이 4색 시그니처를 표시합니다. 클릭하면 전체 DESIGN.md, 색상 견본 그리드, 라이브 쇼케이스를 볼 수 있습니다.}
_{덱 모드(guizang-ppt) — 번들된 guizang-ppt-skill이 그대로 들어갑니다. 매거진 레이아웃, WebGL 히어로 배경, 단일 파일 HTML 출력, PDF 내보내기.}	_{모바일 프로토타입 — 픽셀 정확도의 iPhone 15 Pro 크롬(Dynamic Island, 상태바 SVG, 홈 인디케이터). 다화면 프로토타입은 공유 /frames/ 에셋을 사용하므로 에이전트가 폰을 다시 그릴 필요가 없습니다.}

## 내장 Skills **31개의 skill이 기본 제공됩니다.** 각각은 Claude Code의 [`SKILL.md`][skill] 규약을 따르는 [`skills/`](skills/) 아래의 폴더이며, daemon이 그대로 파싱하는 확장된 `od:` 프론트매터를 포함합니다 — `mode`, `platform`, `scenario`, `preview.type`, `design_system.requires`, `default_for`, `featured`, `fidelity`, `speaker_notes`, `animations`, `example_prompt`([`apps/daemon/src/skills.ts`](apps/daemon/src/skills.ts)). 두 가지 최상위 **mode**가 카탈로그를 떠받칩니다: **`prototype`**(27개 — 매거진 랜딩부터 폰 화면, PM 스펙 문서까지 단일 페이지 아티팩트로 렌더링되는 모든 것) 그리고 **`deck`**(4개 — 덱 프레임워크 크롬을 입은 수평 스와이프 프레젠테이션). picker가 그룹화에 사용하는 필드는 **`scenario`**: `design` · `marketing` · `operation` · `engineering` · `product` · `finance` · `hr` · `sale` · `personal`. ### 쇼케이스 예시 시각적으로 가장 눈에 띄어 먼저 실행해 볼 skill들입니다. 각각은 저장소에서 바로 열 수 있는 실제 `example.html`을 제공합니다 — 인증 없이, 설정 없이, 에이전트가 무엇을 생산하는지 미리 확인할 수 있습니다.

_{dating-web · prototype 소비자용 데이팅 / 매칭 대시보드 — 좌측 레일 내비게이션, 티커 바, KPI, 30일 상호 매칭 차트, 에디토리얼 타이포그래피.}	_{digital-eguide · template 2페이지 디지털 e-가이드 — 표지(제목, 저자, TOC 티저) + 풀 쿼트 및 단계 목록이 있는 레슨 스프레드. 크리에이터 / 라이프스타일 톤.}
_{email-marketing · prototype 브랜드 제품 출시 HTML 이메일 — 마스트헤드, 히어로 이미지, 헤드라인 락업, CTA, 스펙 그리드. 중앙 단일 컬럼, 테이블 폴백 안전.}	_{gamified-app · prototype 다크 쇼케이스 스테이지의 3화면 게임화 모바일 앱 프로토타입 — 표지, 오늘의 퀘스트(XP 리본 + 레벨 바), 퀘스트 상세.}
_{mobile-onboarding · prototype 3화면 모바일 온보딩 플로우 — 스플래시, 가치 제안, 로그인. 상태바, 스와이프 점, 기본 CTA.}	_{motion-frames · prototype 루핑 CSS 애니메이션의 단일 프레임 모션 디자인 히어로 — 회전 타입 링, 애니메이션 글로브, 째깍거리는 타이머. HyperFrames 핸드오프 준비 완료.}
_{social-carousel · prototype 3장의 1080×1080 소셜 미디어 캐러셀 — 시리즈를 가로지르는 표시 헤드라인이 있는 영화적 패널, 브랜드 마크, 루프 어포던스.}	_{sprite-animation · prototype 픽셀 / 8비트 애니메이션 설명 슬라이드 — 전면 크림 스테이지, 애니메이션 픽셀 마스코트, 역동적인 일본어 표시 타이포그래피, 루핑 CSS 키프레임.}

### 디자인 & 마케팅 표면(prototype 모드) | Skill | 플랫폼 | Scenario | 생산물 | |---|---|---|---| | [`web-prototype`](skills/web-prototype/) | 데스크탑 | design | 단일 페이지 HTML — 랜딩, 마케팅, 히어로 페이지(prototype 기본) | | [`saas-landing`](skills/saas-landing/) | 데스크탑 | marketing | Hero / features / pricing / CTA 마케팅 레이아웃 | | [`dashboard`](skills/dashboard/) | 데스크탑 | operation | 사이드바 + 데이터 밀집 레이아웃의 어드민 / 분석 | | [`pricing-page`](skills/pricing-page/) | 데스크탑 | sale | 독립형 가격 + 비교 테이블 | | [`docs-page`](skills/docs-page/) | 데스크탑 | engineering | 3컬럼 문서 레이아웃 | | [`blog-post`](skills/blog-post/) | 데스크탑 | marketing | 에디토리얼 장문 | | [`mobile-app`](skills/mobile-app/) | 모바일 | design | iPhone 15 Pro / Pixel 프레임 앱 화면 | | [`mobile-onboarding`](skills/mobile-onboarding/) | 모바일 | design | 다중 화면 모바일 온보딩 플로우(스플래시 · 가치 제안 · 로그인) | | [`gamified-app`](skills/gamified-app/) | 모바일 | personal | 3화면 게임화 모바일 앱 프로토타입 | | [`email-marketing`](skills/email-marketing/) | 데스크탑 | marketing | 브랜드 제품 출시 HTML 이메일(테이블 폴백 안전) | | [`social-carousel`](skills/social-carousel/) | 데스크탑 | marketing | 1080×1080 3장 소셜 캐러셀 | | [`magazine-poster`](skills/magazine-poster/) | 데스크탑 | marketing | 단일 페이지 매거진 스타일 포스터 | | [`motion-frames`](skills/motion-frames/) | 데스크탑 | marketing | 루핑 CSS 애니메이션의 모션 디자인 히어로 | | [`sprite-animation`](skills/sprite-animation/) | 데스크탑 | marketing | 픽셀 / 8비트 애니메이션 설명 슬라이드 | | [`dating-web`](skills/dating-web/) | 데스크탑 | personal | 소비자용 데이팅 대시보드 목업 | | [`digital-eguide`](skills/digital-eguide/) | 데스크탑 | marketing | 2페이지 디지털 e-가이드(표지 + 레슨) | | [`wireframe-sketch`](skills/wireframe-sketch/) | 데스크탑 | design | 손그림 아이데이션 스케치 — "회색 블록이라도 일찍 보여주기" 패스를 위한 | | [`critique`](skills/critique/) | 데스크탑 | design | 5차원 자기 검토 점수표(Philosophy · Hierarchy · Detail · Function · Innovation) | | [`tweaks`](skills/tweaks/) | 데스크탑 | design | AI 송출 tweaks 패널 — 모델이 직접 조정할 만한 파라미터를 떠올림 | ### 덱 표면(deck 모드) | Skill | 기본 | 생산물 | |---|---|---| | [`guizang-ppt`](skills/guizang-ppt/) | 덱 **기본** | 매거진 스타일 웹 PPT — [op7418/guizang-ppt-skill][guizang]에서 그대로 번들됨, 원 LICENSE 보존 | | [`simple-deck`](skills/simple-deck/) | — | 미니멀 수평 스와이프 덱 | | [`replit-deck`](skills/replit-deck/) | — | 제품 워크스루 덱(Replit 스타일) | | [`weekly-update`](skills/weekly-update/) | — | 팀 주간 업데이트(진행 · 블로커 · 다음 단계)를 스와이프 덱으로 | ### 사무 & 운영 표면(prototype 모드, 문서 지향 시나리오) | Skill | Scenario | 생산물 | |---|---|---| | [`pm-spec`](skills/pm-spec/) | product | TOC + 의사결정 로그가 있는 PM 스펙 문서 | | [`team-okrs`](skills/team-okrs/) | product | OKR 스코어시트 | | [`meeting-notes`](skills/meeting-notes/) | operation | 회의 의사결정 로그 | | [`kanban-board`](skills/kanban-board/) | operation | 보드 스냅샷 | | [`eng-runbook`](skills/eng-runbook/) | engineering | 장애 런북 | | [`finance-report`](skills/finance-report/) | finance | 임원 재무 요약 | | [`invoice`](skills/invoice/) | finance | 단일 페이지 인보이스 | | [`hr-onboarding`](skills/hr-onboarding/) | hr | 역할 온보딩 계획 | skill 추가는 폴더 하나면 됩니다. [`docs/skills-protocol.md`](docs/skills-protocol.md)에서 확장 프론트매터를 읽고, 기존 skill을 포크하고, daemon을 재시작하면 picker에 나타납니다. 카탈로그 엔드포인트는 `GET /api/skills`이며, 스킬별 시드 조립(template + 사이드 파일 references)은 `GET /api/skills/:id/example`에 있습니다. ## 6가지 핵심 아이디어 ### 1 · 에이전트를 제공하지 않습니다. 여러분의 것으로 충분합니다. Daemon은 시작 시 `PATH`에서 [`claude`](https://docs.anthropic.com/en/docs/claude-code), [`codex`](https://github.com/openai/codex), [`cursor-agent`](https://www.cursor.com/cli), [`gemini`](https://github.com/google-gemini/gemini-cli), [`opencode`](https://opencode.ai/), [`qwen`](https://github.com/QwenLM/qwen-code), [`copilot`](https://github.com/features/copilot/cli), `hermes`, `kimi`, [`pi`](https://github.com/mariozechner/pi-ai)를 스캔합니다. 찾은 것들 모두가 후보 디자인 엔진이 됩니다 — stdio를 통해 구동되며 CLI당 하나의 어댑터, 모델 picker에서 즉시 전환 가능. [`multica`](https://github.com/multica-ai/multica)와 [`cc-switch`](https://github.com/farion1231/cc-switch)에서 영감을 받았습니다. CLI가 하나도 설치되어 있지 않다면? `POST /api/proxy/stream`이 spawn만 없는 동일한 파이프라인입니다 — 임의의 OpenAI 호환 `baseUrl` + `apiKey`만 붙여 넣으면 daemon이 SSE 청크를 브라우저로 그대로 전달하며, loopback / link-local / RFC1918 목적지는 경계에서 거부됩니다. ### 2 · Skill은 파일이지 플러그인이 아닙니다. Claude Code의 [`SKILL.md` 규약](https://docs.anthropic.com/en/docs/claude-code/skills)을 따라 각 skill은 `SKILL.md` + `assets/` + `references/`입니다. [`skills/`](skills/)에 폴더를 드롭하고 daemon을 재시작하면 picker에 나타납니다. 번들된 `magazine-web-ppt`는 [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill)을 그대로 커밋한 것입니다 — 원본 라이선스와 저작권 표시 보존. ### 3 · 디자인 시스템은 테마 JSON이 아닌 이식 가능한 Markdown입니다. [`VoltAgent/awesome-design-md`][acd2]의 9섹션 `DESIGN.md` 스키마 — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. 모든 아티팩트가 활성 시스템에서 읽습니다. 시스템 전환 → 다음 렌더에 새 토큰 사용. 드롭다운에는 **Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Cohere, Mistral, ElevenLabs, X.AI, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, ClickHouse, Cal, Replicate, Clay, Composio, Xiaohongshu …** 총 72개가 있습니다. ### 4 · 초기화 질문 폼이 수정 작업의 80%를 막아줍니다. OD의 프롬프트 스택에는 `RULE 1`이 하드코딩되어 있습니다: 모든 새 디자인 브리프는 코드 대신 ``로 시작합니다. 화면 · 대상 · 톤 · 브랜드 컨텍스트 · 규모 · 제약 조건. 긴 브리프라도 시각적 톤, 색상 입장, 규모 같은 디자인 결정 사항은 여전히 열려 있습니다 — 폼이 정확히 이것들을 30초 안에 고정합니다. 잘못된 방향의 비용은 한 번의 채팅 라운드이지, 완성된 덱 하나가 아닙니다. 이것이 [`huashu-design`](https://github.com/alchaincyf/huashu-design)에서 추출한 **Junior-Designer 모드**입니다: 미리 일괄 질문하고, 일찍 가시적인 것을 보여주며(와이어프레임에 회색 블록이라도), 사용자가 저렴한 비용으로 방향을 바꿀 수 있도록 합니다. 브랜드 에셋 프로토콜(위치 파악 · 다운로드 · `grep` hex · `brand-spec.md` 작성 · 발성)과 결합하면, 출력이 "AI 자유 창작"에서 "그리기 전에 주의를 기울인 디자이너"처럼 느껴지게 되는 가장 큰 이유입니다. ### 5 · Daemon은 에이전트가 여러분의 노트북에 있는 것처럼 느끼게 합니다. 실제로 그러니까요. Daemon은 프로젝트의 아티팩트 폴더 `.od/projects//`로 `cwd`를 설정해 CLI를 spawn합니다. 에이전트는 실제 파일시스템에 대한 실제 도구인 `Read`, `Write`, `Bash`, `WebFetch`를 사용합니다. skill의 `assets/template.html`을 `Read`하고, CSS에서 hex 값을 `grep`하고, `brand-spec.md`를 작성하고, 생성된 이미지를 저장하고, `.pptx` / `.zip` / `.pdf` 파일을 생성할 수 있습니다 — 이 파일들은 턴이 끝날 때 파일 워크스페이스에 다운로드 칩으로 나타납니다. 세션, 대화, 메시지, 탭은 로컬 SQLite DB에 영구 저장됩니다 — 내일 프로젝트를 열면 에이전트의 할 일 카드가 어제 멈춘 곳에 그대로 있습니다. ### 6 · 프롬프트 스택 자체가 제품입니다. 전송 시 구성되는 것은 "system + user"가 아닙니다. 다음과 같습니다: ``` DISCOVERY 지시문 (turn-1 폼, turn-2 브랜드 분기, TodoWrite, 5차원 검토) + 신원 헌장 (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass) + 활성 DESIGN.md (72개 시스템 사용 가능) + 활성 SKILL.md (31개 skill 사용 가능) + 프로젝트 메타데이터 (kind, fidelity, speakerNotes, animations, inspiration ids) + skill 사이드 파일 (pre-flight 자동 주입: assets/template.html + references/*.md 읽기) + (덱 kind, skill seed 없음) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print) ``` 모든 레이어는 조합 가능합니다. 모든 레이어는 편집 가능한 파일입니다. 실제 계약을 보려면 [`apps/web/src/prompts/system.ts`](apps/web/src/prompts/system.ts)와 [`apps/web/src/prompts/discovery.ts`](apps/web/src/prompts/discovery.ts)를 읽으세요. ## 아키텍처 ``` ┌────────────── 브라우저(Next.js 16) ─────────────────────────────┐ │ 채팅 · 파일 워크스페이스 · iframe 미리보기 · 설정 · 임포트 │ └──────────────┬───────────────────────────────┬────────────────┘ │ /api/*(dev에서 rewrite) │ ▼ ▼ ┌─────────────────────────────────┐ /api/proxy/stream (SSE) │ 로컬 daemon(Express + SQLite) │ ─→ 임의의 OpenAI 호환 │ │ 엔드포인트(BYOK) │ /api/agents /api/skills│ SSRF 차단 포함 │ /api/design-systems /api/projects/… │ /api/chat (SSE) /api/proxy/stream (SSE) │ /api/templates /api/import/claude-design │ /api/artifacts/save /api/artifacts/lint │ /api/upload /api/projects/:id/files… │ /artifacts (정적) /frames (정적) │ │ 선택적 sidecar IPC: /tmp/open-design/ipc//.sock │ (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN) └─────────┬───────────────────────┘ │ spawn(cli, [...], { cwd: .od/projects/ }) ▼ ┌──────────────────────────────────────────────────────────────────┐ │ claude · codex · gemini · opencode · cursor-agent · qwen │ │ copilot · hermes (ACP) · kimi (ACP) · pi (RPC) │ │ SKILL.md + DESIGN.md 읽기, 디스크에 아티팩트 쓰기 │ └──────────────────────────────────────────────────────────────────┘ ``` | 레이어 | 스택 | |---|---| | 프론트엔드 | Next.js 16 App Router + React 18 + TypeScript, Vercel 배포 가능 | | Daemon | Node 24 · Express · SSE 스트리밍 · `better-sqlite3`; 테이블: `projects` · `conversations` · `messages` · `tabs` · `templates` | | 에이전트 전송 | `child_process.spawn`; 타입 이벤트 파서: `claude-stream-json`(Claude Code), `copilot-stream-json`(Copilot), `json-event-stream` + 각 CLI 파서(Codex / Gemini / OpenCode / Cursor Agent), `acp-json-rpc`(Hermes / Kimi via Agent Client Protocol), `pi-rpc`(Pi via stdio JSON-RPC), `plain`(Qwen Code) | | BYOK 프록시 | `POST /api/proxy/stream` → OpenAI 호환 `/v1/chat/completions`, SSE 통과; daemon 경계에서 loopback / link-local / RFC1918 호스트 거부 | | 저장소 | `.od/projects//`의 평문 파일 + `.od/app.sqlite`의 SQLite(gitignore됨, 자동 생성). 테스트 격리를 위해 `OD_DATA_DIR`로 루트 변경 가능 | | 미리보기 | `srcdoc`를 통한 샌드박스 iframe + 스킬별 `` 파서([`apps/web/src/artifacts/parser.ts`](apps/web/src/artifacts/parser.ts)) | | 내보내기 | HTML(인라인 에셋) · PDF(브라우저 인쇄, deck-aware) · PPTX(에이전트 주도 + skill) · ZIP(archiver) · Markdown | | 라이프사이클 | `pnpm tools-dev start \| stop \| run \| status \| logs \| inspect \| check`; 포트는 `--daemon-port` / `--web-port`, 네임스페이스는 `--namespace` | | 데스크탑(선택) | Electron 셸 — sidecar IPC를 통해 web URL 발견, 포트 추측 없음; 같은 채널(`STATUS`/`EVAL`/`SCREENSHOT`/`CONSOLE`/`CLICK`/`SHUTDOWN`)이 `tools-dev inspect desktop …`로 E2E 구동 | ## 빠른 시작 ```bash git clone https://github.com/nexu-io/open-design.git cd open-design corepack enable corepack pnpm --version # 10.33.2가 출력되어야 합니다 pnpm install pnpm tools-dev run web # tools-dev가 출력한 web URL을 여세요 ``` 환경 요구사항: Node `~24`와 pnpm `10.33.x`. `nvm` / `fnm`은 선택적 보조 도구일 뿐입니다; 사용한다면 `pnpm install` 전에 `nvm install 24 && nvm use 24` 또는 `fnm install 24 && fnm use 24`를 실행하세요. 첫 번째 로드 시: 1. `PATH`에 어떤 에이전트 CLI가 있는지 감지하고 자동으로 하나를 선택합니다. 2. 31개의 skill + 72개의 디자인 시스템을 로드합니다. 3. Anthropic 키를 붙여넣을 수 있는 환영 다이얼로그를 표시합니다(BYOK 폴백 경로에만 필요). 4. **`./.od/`를 자동 생성합니다** — SQLite 프로젝트 DB, 프로젝트별 아티팩트, 저장된 렌더를 위한 로컬 런타임 폴더. `od init` 단계는 없습니다; daemon이 부팅 시 필요한 모든 것을 `mkdir`합니다. 프롬프트를 입력하고 **전송**을 누르면 질문 폼이 도착하고, 채우면 할 일 카드가 스트리밍되고, 아티팩트가 렌더링됩니다. **디스크에 저장** 클릭 또는 프로젝트 ZIP으로 다운로드하세요. ### 첫 실행 상태(`./.od/`) Daemon은 저장소 루트에 하나의 숨겨진 폴더를 소유합니다. 그 안의 모든 것은 gitignore되고 로컬 머신 전용입니다 — 커밋하지 마세요. ``` .od/ ├── app.sqlite ← 프로젝트 · 대화 · 메시지 · 열린 탭 ├── artifacts/ ← 일회성 "디스크에 저장" 렌더(타임스탬프) └── projects// ← 프로젝트별 작업 디렉터리, 에이전트의 cwd ``` | 원하는 작업 | 방법 | |---|---| | 내용 확인 | `ls -la .od && sqlite3 .od/app.sqlite '.tables'` | | 초기 상태로 재설정 | `pnpm tools-dev stop`, `rm -rf .od`, `pnpm tools-dev run web` 재실행 | | 다른 위치로 이동 | 아직 지원되지 않음 — 경로가 저장소 상대 경로로 하드코딩됨 | 전체 파일 맵, 스크립트, 트러블슈팅 → [`QUICKSTART.md`](QUICKSTART.md). ## 저장소 구조 ``` open-design/ ├── README.md ← 영어 ├── README.de.md ← Deutsch ├── README.zh-CN.md ← 简体中文 ├── README.ko.md ← 한국어 (이 파일) ├── QUICKSTART.md ← 실행 / 빌드 / 배포 가이드 ├── package.json ← pnpm 워크스페이스, 단일 bin: od │ ├── apps/ │ ├── daemon/ ← Node + Express, 유일한 서버 │ │ ├── src/ ← TypeScript daemon 소스 │ │ │ ├── cli.ts ← `od` bin 소스, dist/cli.js로 컴파일 │ │ │ ├── server.ts ← /api/* 라우트(projects, chat, files, exports) │ │ │ ├── agents.ts ← PATH 스캐너 + CLI별 argv 빌더 │ │ │ ├── claude-stream.ts ← Claude Code stdout 스트리밍 JSON 파서 │ │ │ ├── skills.ts ← SKILL.md 프론트매터 로더 │ │ │ └── db.ts ← SQLite 스키마(projects/messages/templates/tabs) │ │ ├── sidecar/ ← tools-dev daemon sidecar 래퍼 │ │ └── tests/ ← daemon 패키지 테스트 │ │ │ └── web/ ← Next.js 16 App Router + React 클라이언트 │ ├── app/ ← App Router 진입점 │ ├── next.config.ts ← 개발 rewrite + 프로덕션 정적 내보내기 to out/ │ └── src/ ← React + TypeScript 클라이언트 모듈 │ ├── App.tsx ← 라우팅, 부트스트랩, 설정 │ ├── components/ ← 채팅, 작성기, 선택기, 미리보기, 스케치, … │ ├── prompts/ │ │ ├── system.ts ← composeSystemPrompt(base, skill, DS, metadata) │ │ ├── discovery.ts ← turn-1 폼 + turn-2 분기 + 5차원 검토 │ │ └── directions.ts ← 5가지 시각적 방향 × OKLch 팔레트 + 폰트 스택 │ ├── artifacts/ ← 스트리밍 파서 + 매니페스트 │ ├── runtime/ ← iframe srcdoc, 마크다운, 내보내기 헬퍼 │ ├── providers/ ← daemon SSE + BYOK API 전송 │ └── state/ ← config + 프로젝트(localStorage + daemon 백업) │ ├── e2e/ ← Playwright UI + 외부 통합/Vitest 하네스 │ ├── packages/ │ ├── contracts/ ← 공유 web/daemon app contracts │ ├── sidecar-proto/ ← Open Design sidecar protocol contract │ ├── sidecar/ ← generic sidecar runtime primitives │ └── platform/ ← generic process/platform primitives │ ├── skills/ ← 31개 SKILL.md skill 번들(27 prototype + 4 deck) │ ├── web-prototype/ ← prototype 기본 │ ├── saas-landing/ dashboard/ pricing-page/ docs-page/ blog-post/ │ ├── mobile-app/ mobile-onboarding/ gamified-app/ │ ├── email-marketing/ social-carousel/ magazine-poster/ │ ├── motion-frames/ sprite-animation/ digital-eguide/ dating-web/ │ ├── critique/ tweaks/ wireframe-sketch/ │ ├── pm-spec/ team-okrs/ meeting-notes/ kanban-board/ │ ├── eng-runbook/ finance-report/ invoice/ hr-onboarding/ │ ├── simple-deck/ replit-deck/ weekly-update/ ← deck 모드 │ └── guizang-ppt/ ← 번들된 magazine-web-ppt(덱 기본) │ ├── SKILL.md │ ├── assets/template.html ← seed │ └── references/{themes,layouts,components,checklist}.md │ ├── design-systems/ ← 72개 DESIGN.md 시스템 │ ├── default/ ← Neutral Modern(스타터) │ ├── warm-editorial/ ← Warm Editorial(스타터) │ ├── linear-app/ vercel/ stripe/ airbnb/ notion/ cursor/ apple/ … │ └── README.md ← 카탈로그 개요 │ ├── assets/ │ └── frames/ ← 공유 기기 프레임(스킬 간 사용) │ ├── iphone-15-pro.html │ ├── android-pixel.html │ ├── ipad-pro.html │ ├── macbook.html │ └── browser-chrome.html │ ├── templates/ │ └── deck-framework.html ← 덱 기준선(nav / counter / print) │ ├── scripts/ │ └── sync-design-systems.ts ← 상위 awesome-design-md tarball 재가져오기 │ ├── docs/ │ ├── spec.md ← 제품 스펙, 시나리오, 차별화 │ ├── architecture.md ← 토폴로지, 데이터 흐름, 컴포넌트 │ ├── skills-protocol.md ← 확장된 SKILL.md od: 프론트매터 │ ├── agent-adapters.md ← CLI별 감지 + 디스패치 │ ├── modes.md ← prototype / deck / template / design-system │ ├── references.md ← 장문 출처 │ ├── roadmap.md ← 단계별 배포 │ ├── schemas/ ← JSON 스키마 │ └── examples/ ← 표준 아티팩트 예시 │ └── .od/ ← 런타임 데이터, gitignore됨, 자동 생성 ├── app.sqlite ← 프로젝트 / 대화 / 메시지 / 탭 ├── projects// ← 프로젝트별 작업 폴더(에이전트의 cwd) └── artifacts/ ← 저장된 일회성 렌더 ``` ## 디자인 시스템

72개 디자인 시스템 라이브러리 — 에디토리얼 스프레드

기본 제공 72개 시스템, 각각 단일 [`DESIGN.md`](design-systems/README.md)로:

전체 카탈로그 (클릭하여 펼치기)

**AI & LLM** — `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai` **개발자 도구** — `cursor` · `vercel` · `linear-app` · `framer` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `webflow` · `sanity` · `mintlify` · `lovable` · `composio` · `opencode-ai` · `voltagent` **생산성** — `notion` · `figma` · `miro` · `airtable` · `superhuman` · `intercom` · `zapier` · `cal` · `clay` · `raycast` **핀테크** — `stripe` · `coinbase` · `binance` · `kraken` · `mastercard` · `revolut` · `wise` **이커머스** — `shopify` · `airbnb` · `uber` · `nike` · `starbucks` · `pinterest` **미디어** — `spotify` · `playstation` · `wired` · `theverge` · `meta` **자동차** — `tesla` · `bmw` · `ferrari` · `lamborghini` · `bugatti` · `renault` **기타** — `apple` · `ibm` · `nvidia` · `vodafone` · `sentry` · `resend` · `spacex` **스타터** — `default`(Neutral Modern) · `warm-editorial`

라이브러리는 [`scripts/sync-design-systems.ts`](scripts/sync-design-systems.ts)를 통해 [`VoltAgent/awesome-design-md`][acd2]에서 가져옵니다. 재실행하면 새로 고침됩니다. ## 시각적 방향 사용자에게 브랜드 스펙이 없을 때, 에이전트가 5개의 엄선된 방향이 있는 두 번째 폼을 내보냅니다 — [`huashu-design`의 "5개 학파 × 20가지 디자인 철학" 폴백](https://github.com/alchaincyf/huashu-design#%E8%AE%BE%E8%AE%A1%E6%96%B9%E5%90%91%E9%A1%BE%E9%97%AE-fallback)의 OD 적용. 각 방향은 결정론적 스펙입니다 — OKLch의 팔레트, 폰트 스택, 레이아웃 포스처 단서, 참고 자료 — 에이전트가 이를 seed 템플릿의 `:root`에 그대로 바인딩합니다. 라디오 하나 클릭 → 완전히 지정된 시각 시스템. 즉흥 없음, AI-slop 없음. | 방향 | 무드 | 참고 | |---|---|---| | Editorial — Monocle / FT | 인쇄 매거진, 잉크 + 크림 + 따뜻한 러스트 | Monocle · FT Weekend · NYT Magazine | | Modern minimal — Linear / Vercel | 쿨, 구조적, 미니멀 액센트 | Linear · Vercel · Stripe | | Tech utility | 정보 밀도, 모노스페이스, 터미널 | Bloomberg · Bauhaus 도구 | | Brutalist | 날것, 거대한 타입, 그림자 없음, 강한 액센트 | Bloomberg Businessweek · Achtung | | Soft warm | 여유롭고, 낮은 대비, 복숭아 계열 뉴트럴 | Notion 마케팅 · Apple Health | 전체 스펙 → [`apps/web/src/prompts/directions.ts`](apps/web/src/prompts/directions.ts). ## 미디어 생성 OD는 코드에서 끝나지 않습니다. `` HTML을 만드는 동일한 채팅 입구가 **이미지**, **비디오**, **오디오** 생성도 구동합니다 — 모델 어댑터는 daemon의 미디어 파이프라인([`apps/daemon/src/media-models.ts`](apps/daemon/src/media-models.ts), [`apps/web/src/media/models.ts`](apps/web/src/media/models.ts))에 연결되어 있습니다. 모든 렌더링은 프로젝트 워크스페이스에 실제 파일로 떨어지며 — 이미지는 `.png`, 비디오는 `.mp4` — 턴이 끝날 때 다운로드 chip으로 표시됩니다. 오늘날 부하를 짊어진 세 모델 패밀리: | Surface | 모델 | 제공자 | 용도 | |---|---|---|---| | **이미지** | `gpt-image-2` | Azure / OpenAI | 포스터, 프로필 아바타, 일러스트 도시 지도, 인포그래픽, 매거진 풍 소셜 카드, 사진 복원, 분해도 제품 일러스트 | | **비디오** | `seedance-2.0` | ByteDance Volcengine | 15초 시네마틱 t2v + i2v + 오디오 — 내러티브 쇼트, 인물 클로즈업, 제품 영상, MV 안무 | | **비디오** | `hyperframes-html` | [HeyGen / OSS](https://github.com/heygen-com/hyperframes) | HTML→MP4 모션 그래픽 — 제품 리빌, 키네틱 타이포그래피, 데이터 차트, 소셜 오버레이, 로고 아웃트로, 카라오케 자막을 단 세로형 TikTok | 성장하는 **prompt 갤러리**는 [`prompt-templates/`](prompt-templates/)에서 — **즉시 복제 가능한 93개 prompt** 동봉: 43개 이미지(`prompt-templates/image/*.json`), 39개 Seedance(`prompt-templates/video/*.json` 중 `hyperframes-*` 제외), 11개 HyperFrames(`prompt-templates/video/hyperframes-*.json`). 각 항목은 미리보기 썸네일, 원본 prompt 본문, 대상 모델, 화면비, 라이선스 + 저작자 표기를 담은 `source` 블록을 포함합니다. daemon은 `GET /api/prompt-templates`로 서빙하고, 웹 앱은 진입 화면의 **Image templates** / **Video templates** 탭에서 카드 그리드로 보여줍니다; 한 번 클릭하면 적합한 모델이 미리 선택된 prompt가 composer에 떨어집니다. ### gpt-image-2 — 이미지 갤러리(43개 중 5개)

_{3D Stone Staircase Evolution Infographic
3단계 석재 풍 인포그래픽}

_{Illustrated City Food Map
편집급 손그림 여행 포스터}

_{Cinematic Elevator Scene
편집급 패션 단일 프레임}

_{Cyberpunk Anime Portrait
프로필 아바타 — 네온 페이스 텍스트}

_{Glamorous Woman in Black Portrait
편집급 스튜디오 초상}

전체 목록 → [`prompt-templates/image/`](prompt-templates/image/). 출처: 대부분 [`YouMind-OpenLab/awesome-gpt-image-prompts`](https://github.com/YouMind-OpenLab/awesome-gpt-image-prompts)(CC-BY-4.0)에서, 템플릿마다 작성자 표기를 보존. ### Seedance 2.0 — 비디오 갤러리(39개 중 5개)

_{Music Podcast & Guitar Technique
4K 시네마틱 스튜디오 영상}

_{Emotional Face Close-up
시네마틱 미세 표정 연구}

_{Luxury Supercar Cinematic
내러티브 제품 영상}

_{Forbidden City Cat Satire
스타일라이즈드 풍자 쇼트}

_{Japanese Romance Short Film
15초 Seedance 2.0 내러티브}

썸네일을 클릭하면 실제 렌더된 MP4가 재생됩니다. 전체 목록 → [`prompt-templates/video/`](prompt-templates/video/)(`*-seedance-*` 및 Cinematic 태그가 붙은 항목). 출처: [`YouMind-OpenLab/awesome-seedance-2-prompts`](https://github.com/YouMind-OpenLab/awesome-seedance-2-prompts)(CC-BY-4.0), 원 트윗 링크와 작성자 핸들 보존. ### HyperFrames — HTML→MP4 모션 그래픽(11개의 즉시 복제 가능한 템플릿) [**`heygen-com/hyperframes`**](https://github.com/heygen-com/hyperframes)는 HeyGen이 오픈소스화한 에이전트 네이티브 비디오 프레임워크입니다 — 당신(또는 에이전트)이 HTML + CSS + GSAP을 작성하면 HyperFrames가 headless Chrome + FFmpeg로 결정론적으로 MP4를 렌더링합니다. Open Design은 HyperFrames를 일급 비디오 모델(`hyperframes-html`)로 daemon dispatch에 연결하고, 추가로 `skills/hyperframes/` skill을 동봉해 timeline 계약, 씬 트랜지션 규칙, audio-reactive 패턴, 자막/TTS, 카탈로그 블록(`npx hyperframes add `)을 에이전트에게 가르칩니다. 11개의 HyperFrames prompt가 [`prompt-templates/video/hyperframes-*.json`](prompt-templates/video/)에 들어 있고, 각각이 특정 아키타입을 만들어내는 구체적인 brief입니다:

_{5초 미니멀 제품 리빌 · 16:9 · 푸시인 타이틀 카드 + 셰이더 트랜지션}	_{30초 SaaS 제품 프로모 · 16:9 · Linear/ClickUp 풍 + UI 3D 리빌}	_{TikTok 카라오케 토킹헤드 · 9:16 · TTS + 단어 동기화 자막}	_{30초 브랜드 sizzle 릴 · 16:9 · 비트 동기화 키네틱 타이포, audio-reactive}
_{애니메이션 bar-chart race · 16:9 · NYT 풍 데이터 인포그래픽}	_{비행 경로 지도(출발 → 도착) · 16:9 · Apple 풍 시네마틱 경로 리빌}	_{4초 시네마틱 로고 아웃트로 · 16:9 · 조각별 어셈블 + bloom}	_{$0 → $10K 머니 카운터 · 9:16 · Apple 풍 hype + 그린 플래시 + 버스트}
_{폰 3대 앱 쇼케이스 · 16:9 · 떠 있는 폰 + 기능 콜아웃}	_{소셜 오버레이 스택 · 9:16 · X · Reddit · Spotify · Instagram 순차}	_{웹사이트→비디오 파이프라인 · 16:9 · 3가지 뷰포트 캡처 + 트랜지션}

패턴은 다른 것과 동일합니다: 템플릿을 고르고, brief를 편집하고, 보냅니다. 에이전트는 동봉된 `skills/hyperframes/SKILL.md`(OD 전용 렌더링 워크플로 — composition 소스 파일을 `.hyperframes-cache/`에 격리해 파일 워크스페이스를 어지럽히지 않고, daemon이 `npx hyperframes render`를 대신 실행해 macOS sandbox-exec / Puppeteer 행 현상을 우회하고, 최종 `.mp4`만 프로젝트 chip으로 표시되도록)를 읽고, composition을 작성하고, MP4를 출력합니다. 카탈로그 블록 썸네일은 © HeyGen, 그들의 CDN에서 제공; OSS 프레임워크 자체는 Apache-2.0입니다. > **연결되었지만 아직 템플릿으로 노출되지 않은 모델:** Kling 2.0 / 1.6 / 1.5, Veo 3 / Veo 2, Sora 2 / Sora 2-Pro(via Fal), MiniMax video-01 — 모두 `VIDEO_MODELS`([`apps/web/src/media/models.ts`](apps/web/src/media/models.ts))에 있습니다. Suno v5 / v4.5, Udio v2, Lyria 2(음악)와 gpt-4o-mini-tts, MiniMax TTS(음성)가 오디오 surface를 커버합니다. 이들 prompt 템플릿은 오픈 컨트리뷰션입니다 — JSON을 `prompt-templates/video/` 또는 `prompt-templates/audio/`에 떨구면 picker에 나타납니다. ## 채팅 그 이상 — 더 들어 있는 것들 채팅 / 아티팩트 루프가 가장 눈에 잘 띄지만, 이 저장소에는 다른 제품과 비교하기 전에 한번쯤 스캔해 볼 가치가 있는 잘 안 보이는 능력들이 더 있습니다: - **Claude Design ZIP 임포트.** claude.ai에서 익스포트한 ZIP을 환영 다이얼로그에 드롭하세요. `POST /api/import/claude-design`이 그것을 진짜 `.od/projects//`로 풀어주고, 엔트리 파일을 탭으로 열고, 로컬 에이전트에게 "Anthropic이 멈춘 곳에서 그대로 이어서 편집해" 프롬프트를 미리 박아둡니다. 다시 묻지 않아도 됩니다, "방금 만든 것을 다시 만들어줘"도 안 합니다. ([`apps/daemon/src/server.ts`](apps/daemon/src/server.ts) — `/api/import/claude-design`) - **OpenAI 호환 BYOK 프록시.** `POST /api/proxy/stream`은 `{ baseUrl, apiKey, model, messages }`를 받아 경로를 정규화(`…/v1/chat/completions`)하고, SSE 청크를 브라우저로 전달하며, SSRF를 막기 위해 loopback / link-local / RFC1918 목적지를 거부합니다. OpenAI chat 스키마를 말하는 모든 것이 작동합니다 — Anthropic-via-OpenAI 어댑터, DeepSeek, Groq, MiMo, OpenRouter, 자체 호스팅 vLLM. MiMo는 자유 생성에서 tool 스키마가 잘 동작하지 않아 자동으로 `tool_choice: 'none'`이 적용됩니다. - **사용자 저장 templates.** 마음에 든 렌더가 있으면 `POST /api/templates`가 HTML + 메타데이터를 SQLite `templates` 테이블에 스냅샷으로 저장합니다. 다음 프로젝트의 picker에는 "내 템플릿" 행이 추가됩니다 — 기본 31개와 동일한 표면, 그러나 당신의 것. - **탭 영속성.** 모든 프로젝트는 `tabs` 테이블에 자기가 연 파일들과 활성 탭을 기억합니다. 내일 다시 열어도 워크스페이스는 어제 떠난 그 모습 그대로. - **Artifact lint API.** `POST /api/artifacts/lint`는 생성된 아티팩트에 대해 구조 검사(파괴된 `` 프레임, 누락된 필수 사이드 파일, 오래된 팔레트 토큰)를 실행하고, 에이전트가 다음 턴에 다시 읽어들일 수 있는 findings를 반환합니다. 5차원 자기 검토는 이걸로 점수를 vibe가 아닌 실제 증거에 묶어둡니다. - **Sidecar 프로토콜 + 데스크탑 자동화.** Daemon, web, desktop 프로세스 모두 타입화된 5필드 스탬프(`app · mode · namespace · ipc · source`)를 들고 다니며, JSON-RPC IPC 채널을 `/tmp/open-design/ipc//.sock`에 노출합니다. `tools-dev inspect desktop status \| eval \| screenshot`이 그 채널 위에서 동작하므로, 헤드리스 E2E가 진짜 Electron 셸을 상대로 자체 하네스 없이 동작합니다([`packages/sidecar-proto/`](packages/sidecar-proto/), [`apps/desktop/src/main/`](apps/desktop/src/main/)). - **Windows 친화적 spawn.** 긴 합성 prompt에서 `CreateProcess`의 약 32 KB argv 한계를 넘을 만한 모든 어댑터(Codex, Gemini, OpenCode, Cursor Agent, Qwen, Pi)는 prompt를 stdin으로 보냅니다. Claude Code와 Copilot은 `-p`를 유지하고, 그것마저 넘치면 daemon은 임시 prompt 파일로 폴백합니다. - **네임스페이스별 런타임 데이터.** `OD_DATA_DIR`과 `--namespace`로 완전히 격리된 `.od/`-스타일 트리를 받습니다. Playwright, 베타 채널, 실제 작업 프로젝트가 SQLite 파일을 공유하는 일은 절대 없습니다. ## Anti-AI-slop 메커니즘 아래의 모든 메커니즘은 [`huashu-design`](https://github.com/alchaincyf/huashu-design) 플레이북을 OD의 프롬프트 스택에 이식하고, 사이드 파일 pre-flight를 통해 skill별로 적용 가능하게 만든 것입니다. 실제 문구는 [`apps/web/src/prompts/discovery.ts`](apps/web/src/prompts/discovery.ts)를 읽으세요: - **질문 폼 우선.** Turn 1은 오직 `` — 생각하기 없음, 도구 없음, 내레이션 없음. 사용자는 라디오 속도로 기본값을 선택합니다. - **브랜드 스펙 추출.** 사용자가 스크린샷이나 URL을 첨부하면, 에이전트는 5단계 프로토콜(위치 파악 · 다운로드 · hex grep · `brand-spec.md` 코드화 · 발성)을 실행한 후 CSS를 작성합니다. **절대 기억에서 브랜드 색상을 추측하지 않습니다.** - **5차원 검토.** ``를 내보내기 전, 에이전트가 자신의 출력을 철학 / 계층 / 실행 / 구체성 / 절제 5가지 차원에서 1–5점으로 조용히 채점합니다. 3/5 미만은 퇴보 — 수정 후 재채점. 두 번의 패스는 정상입니다. - **P0/P1/P2 체크리스트.** 모든 skill은 하드 P0 게이트가 있는 `references/checklist.md`를 제공합니다. 에이전트는 내보내기 전에 P0를 통과해야 합니다. - **Slop 블랙리스트.** 공격적인 보라색 그라디언트, 일반 이모지 아이콘, 왼쪽 테두리 액센트가 있는 둥근 카드, 손으로 그린 SVG 인물, *디스플레이* 폰트로서의 Inter, 허구 지표 — 프롬프트에서 명시적으로 금지됩니다. - **정직한 플레이스홀더 > 가짜 통계.** 실제 숫자가 없을 때 에이전트는 `—` 또는 레이블이 있는 회색 블록을 씁니다. "10배 빠릅니다"가 아닙니다. ## 비교 | 축 | [Claude Design][cd] (Anthropic) | [Open CoDesign][ocod] | **Open Design** | |---|---|---|---| | 라이선스 | 클로즈드 | MIT | **Apache-2.0** | | 폼 팩터 | 웹(claude.ai) | 데스크탑(Electron) | **웹앱 + 로컬 daemon** | | Vercel 배포 가능 | ❌ | ❌ | **✅** | | 에이전트 런타임 | 번들됨(Opus 4.7) | 번들됨([`pi-ai`][piai]) | **사용자 기존 CLI에 위임** | | Skill | 독점 | 12개 커스텀 TS 모듈 + `SKILL.md` | **31개 파일 기반 [`SKILL.md`][skill] 번들, 드롭 가능** | | 디자인 시스템 | 독점 | `DESIGN.md`(v0.2 로드맵) | **`DESIGN.md` × 72개 시스템 기본 제공** | | 프로바이더 유연성 | Anthropic 전용 | [`pi-ai`][piai]를 통해 7+ | **10개 CLI 어댑터 + OpenAI 호환 BYOK 프록시** | | 초기화 질문 폼 | ❌ | ❌ | **✅ 하드 규칙, turn 1** | | 방향 선택기 | ❌ | ❌ | **✅ 5가지 결정론적 방향** | | 실시간 할 일 진행 + 도구 스트림 | ❌ | ✅ | **✅** (open-codesign의 UX 패턴) | | 샌드박스 iframe 미리보기 | ❌ | ✅ | **✅** (open-codesign의 패턴) | | Claude Design ZIP 임포트 | n/a | ❌ | **✅ `POST /api/import/claude-design` — Anthropic이 멈춘 곳에서 그대로 이어서** | | 코멘트 모드 수술적 편집 | ❌ | ✅ | 🚧 로드맵(open-codesign에서 이식) | | AI 제안 트윅 패널 | ❌ | ✅ | 🟡 부분 — [`tweaks` skill](skills/tweaks/) 출시, 채팅 통합 패널 UX는 로드맵 | | 파일시스템급 워크스페이스 | ❌ | 부분(Electron 샌드박스) | **✅ 실제 cwd, 실제 도구, SQLite 영구 저장(projects · conversations · messages · tabs · templates)** | | 5차원 자기 검토 | ❌ | ❌ | **✅ 내보내기 전 게이트** | | Artifact lint | ❌ | ❌ | **✅ `POST /api/artifacts/lint` — findings를 에이전트로 다시 피드** | | Sidecar IPC + 헤드리스 데스크탑 | ❌ | ❌ | **✅ 스탬프된 프로세스 + `tools-dev inspect desktop status \| eval \| screenshot`** | | 내보내기 형식 | 제한됨 | HTML / PDF / PPTX / ZIP / Markdown | **HTML / PDF / PPTX(에이전트 주도) / ZIP / Markdown** | | PPT skill 재사용 | N/A | 내장 | **[`guizang-ppt-skill`][guizang] 드롭인(덱 모드 기본)** | | 최소 청구 | Pro / Max / Team | BYOK | **BYOK — 임의의 OpenAI 호환 `baseUrl` 붙여넣기** | [cd]: https://x.com/claudeai/status/2045156267690213649 [ocod]: https://github.com/OpenCoworkAI/open-codesign [piai]: https://github.com/mariozechner/pi-ai [acd]: https://github.com/VoltAgent/awesome-claude-design [guizang]: https://github.com/op7418/guizang-ppt-skill [skill]: https://docs.anthropic.com/en/docs/claude-code/skills ## 지원하는 코딩 에이전트 daemon 부팅 시 `PATH`에서 자동 감지됩니다. 설정 필요 없음. 스트리밍 디스패치 로직은 [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts)의 `AGENT_DEFS`에 있고, CLI별 파서도 같은 디렉터리에 있습니다. 모델 목록은 ` --list-models` / ` models` / ACP 핸드셰이크로 탐지하거나, CLI가 목록을 노출하지 않을 때 큐레이션된 폴백을 사용합니다. | 에이전트 | 바이너리 | 스트리밍 형식 | argv 형태(합성된 prompt 경로) | |---|---|---|---| | [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | `claude` | `claude-stream-json`(타입 이벤트) | `claude -p --output-format stream-json --verbose [--include-partial-messages] [--add-dir …] --permission-mode bypassPermissions` | | [Codex CLI](https://github.com/openai/codex) | `codex` | `json-event-stream` + `codex` 파서 | `codex exec --json --skip-git-repo-check --full-auto [-C cwd] [--model …] [-c model_reasoning_effort=…] -`(prompt는 stdin) | | [Gemini CLI](https://github.com/google-gemini/gemini-cli) | `gemini` | `json-event-stream` + `gemini` 파서 | `gemini --output-format stream-json --skip-trust --yolo [--model …] -`(prompt는 stdin) | | [OpenCode](https://opencode.ai/) | `opencode` | `json-event-stream` + `opencode` 파서 | `opencode run --format json --dangerously-skip-permissions [--model …] -`(prompt는 stdin) | | [Cursor Agent](https://www.cursor.com/cli) | `cursor-agent` | `json-event-stream` + `cursor-agent` 파서 | `cursor-agent --print --output-format stream-json --stream-partial-output --force --trust [--workspace cwd] [--model …] -`(prompt는 stdin) | | [Qwen Code](https://github.com/QwenLM/qwen-code) | `qwen` | `plain`(원시 stdout 청크) | `qwen --yolo [--model …] -`(prompt는 stdin) | | [GitHub Copilot CLI](https://github.com/features/copilot/cli) | `copilot` | `copilot-stream-json`(타입 이벤트) | `copilot -p --allow-all-tools --output-format json [--model …] [--add-dir …]` | | [Hermes](https://github.com/eqlabs/hermes) | `hermes` | `acp-json-rpc`(Agent Client Protocol) | `hermes acp --accept-hooks` | | Kimi CLI | `kimi` | `acp-json-rpc` | `kimi acp` | | [Pi](https://github.com/mariozechner/pi-ai) | `pi` | `pi-rpc`(stdio JSON-RPC) | `pi --mode rpc --no-session [--model …] [--thinking …]`(prompt는 RPC `prompt` 명령으로 전송) | | **OpenAI 호환 BYOK** | n/a | SSE 통과 | `POST /api/proxy/stream` → `/v1/chat/completions`; loopback / link-local / RFC1918에 대한 SSRF 차단 | 새 CLI 추가는 [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts)에 항목 하나 추가하는 것입니다. 스트리밍 형식은 `claude-stream-json`, `copilot-stream-json`, `json-event-stream`(CLI별 `eventParser`와 함께), `acp-json-rpc`, `pi-rpc`, `plain` 중 하나입니다. ## 참조 및 계보 이 저장소가 차용한 모든 외부 프로젝트. 각 링크는 출처로 이동하여 계보를 확인할 수 있습니다. | 프로젝트 | 역할 | |---|---| | [`Claude Design`][cd] | 이 저장소가 오픈소스 대안을 제공하는 클로즈드 소스 제품. | | [**`alchaincyf/huashu-design`**](https://github.com/alchaincyf/huashu-design) | 디자인 철학 핵심. Junior-Designer 워크플로, 5단계 브랜드 에셋 프로토콜, anti-AI-slop 체크리스트, 5차원 자기 검토, 그리고 방향 선택기 뒤의 "5개 학파 × 20가지 디자인 철학" 라이브러리 — 모두 [`apps/web/src/prompts/discovery.ts`](apps/web/src/prompts/discovery.ts)와 [`apps/web/src/prompts/directions.ts`](apps/web/src/prompts/directions.ts)에 녹아들었습니다. | | [**`op7418/guizang-ppt-skill`**][guizang] | [`skills/guizang-ppt/`](skills/guizang-ppt/) 아래에 원본 그대로 번들된 Magazine-web-PPT skill, 원 LICENSE 보존. 덱 모드 기본. P0/P1/P2 체크리스트 문화는 다른 모든 skill에도 차용됩니다. | | [**`multica-ai/multica`**](https://github.com/multica-ai/multica) | Daemon + 어댑터 아키텍처. PATH 스캔 에이전트 감지, 단일 특권 프로세스로서의 로컬 daemon, 에이전트-동료 세계관. 모델을 채용했지만 코드는 vendor하지 않습니다. | | [**`OpenCoworkAI/open-codesign`**][ocod] | 최초의 오픈소스 Claude-Design 대안이자 가장 가까운 동류. 채택된 UX 패턴: 스트리밍 아티팩트 루프, 샌드박스 iframe 미리보기(React 18 + Babel 내장), 실시간 에이전트 패널(todos + tool calls + 중단 가능), 5가지 내보내기 형식(HTML/PDF/PPTX/ZIP/Markdown), 로컬 우선 designs 허브, `SKILL.md` 취향 주입. 로드맵의 UX 패턴: 코멘트 모드 수술적 편집, AI 제안 트윅 패널. **[`pi-ai`][piai]는 의도적으로 vendor하지 않습니다** — open-codesign은 이를 에이전트 런타임으로 번들링하지만 우리는 사용자가 이미 가진 CLI에 위임합니다. | | [`VoltAgent/awesome-claude-design`][acd] / [`awesome-design-md`][acd2] | 9섹션 `DESIGN.md` 스키마의 출처이자 [`scripts/sync-design-systems.ts`](scripts/sync-design-systems.ts)를 통해 가져온 69개 제품 시스템. | | [`farion1231/cc-switch`](https://github.com/farion1231/cc-switch) | 여러 에이전트 CLI에 걸친 심링크 기반 skill 배포의 영감. | | [Claude Code skills][skill] | 원본 그대로 채택된 `SKILL.md` 규약 — 모든 Claude Code skill이 `skills/`에 드롭되면 daemon이 감지합니다. | 각각에서 무엇을 채용하고 의도적으로 채용하지 않았는지에 대한 장문의 계보 작성 → [`docs/references.md`](docs/references.md). ## 로드맵 - [x] Daemon + 에이전트 감지(10개 CLI 어댑터) + skill 레지스트리 + 디자인 시스템 카탈로그 - [x] 웹앱 + 채팅 + 질문 폼 + 5가지 방향 선택기 + 할 일 진행 + 샌드박스 미리보기 - [x] 31개 skill + 72개 디자인 시스템 + 5가지 시각적 방향 + 5개 기기 프레임 - [x] SQLite 기반 projects · conversations · messages · tabs · templates - [x] OpenAI 호환 BYOK 프록시(`/api/proxy/stream`) + SSRF 차단 - [x] Claude Design ZIP 임포트(`/api/import/claude-design`) - [x] Sidecar 프로토콜 + Electron 데스크탑 + IPC 자동화(STATUS / EVAL / SCREENSHOT / CONSOLE / CLICK / SHUTDOWN) - [x] Artifact lint API + 5차원 자기 검토 내보내기 전 게이트 - [ ] 코멘트 모드 수술적 편집(요소 클릭 → 지시 → 패치) — [`open-codesign`][ocod]에서 가져온 패턴 - [ ] AI 제안 트윅 패널 UX — 빌딩 블록([`tweaks` skill](skills/tweaks/))은 출시, 채팅 통합 패널은 미완 - [ ] Vercel + 터널 배포 레시피(Topology B) - [ ] `DESIGN.md`로 프로젝트를 스캐폴딩하는 원클릭 `npx od init` - [ ] Skill 마켓플레이스(`od skills install `)와 `od skill add | list | remove | test` CLI 표면([`docs/skills-protocol.md`](docs/skills-protocol.md)에 초안 작성됨, 구현 미완) - [ ] `apps/packaged/`에서 패키지된 Electron 빌드 단계별 배포 → [`docs/roadmap.md`](docs/roadmap.md). ## 상태 이것은 초기 구현입니다 — 닫힌 루프(감지 → skill + 디자인 시스템 선택 → 채팅 → `` 파싱 → 미리보기 → 저장)가 end-to-end로 실행됩니다. 프롬프트 스택과 skill 라이브러리가 대부분의 가치가 있으며, 안정적입니다. 컴포넌트 수준 UI는 매일 배포되고 있습니다. ## 스타 주세요

이것이 30분을 절약해줬다면 — ★를 주세요. 스타가 임대료를 내지는 않지만, 다음 디자이너, 에이전트, 기여자에게 이 실험이 그들의 관심을 받을 가치가 있다는 것을 알려줍니다. 한 번의 클릭, 3초, 진짜 신호: [github.com/nexu-io/open-design](https://github.com/nexu-io/open-design). ## 기여 이슈, PR, 새로운 skill, 새로운 디자인 시스템 모두 환영합니다. 가장 레버리지가 높은 기여는 보통 폴더 하나, Markdown 파일 하나, 또는 PR 크기의 어댑터입니다: - **skill 추가** — [`SKILL.md`][skill] 규약을 따르는 폴더를 [`skills/`](skills/)에 드롭하세요. - **디자인 시스템 추가** — 9섹션 스키마를 사용하여 [`design-systems//`](design-systems/)에 `DESIGN.md`를 드롭하세요. - **새 코딩 에이전트 CLI 연결** — [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts)에 항목 하나 추가. 전체 설명, 병합 기준, 코드 스타일, 받지 않는 것 → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [简体中文](CONTRIBUTING.zh-CN.md)). ## 컨트리뷰터 Open Design을 앞으로 나아가게 도와준 모든 분께 감사드립니다 — 코드, 문서, 피드백, 새 skill, 새 디자인 시스템, 또는 날카로운 이슈 하나라도. 모든 진짜 기여가 의미 있고, 아래의 벽이 가장 직접적인 "감사합니다"입니다.

첫 PR을 보냈다면 — 환영합니다. [`good-first-issue`](https://github.com/nexu-io/open-design/labels/good-first-issue) 레이블이 시작점입니다. ## 저장소 활동

위의 SVG는 [`.github/workflows/metrics.yml`](.github/workflows/metrics.yml)이 [`lowlighter/metrics`](https://github.com/lowlighter/metrics)를 사용해 매일 자동으로 다시 생성합니다. 즉시 새로 고치려면 **Actions** 탭에서 수동 트리거하세요; 더 풍부한 플러그인(traffic, follow-up time 등)을 켜려면 저장소 secrets에 fine-grained PAT를 `METRICS_TOKEN`이라는 이름으로 추가하세요. ## Star History

곡선이 위로 휘면 — 그것이 우리가 찾는 신호입니다. ★를 눌러 위로 밀어주세요. ## 크레딧 / Credits 마스터 [`skills/html-ppt/`](skills/html-ppt/) skill과 [`skills/html-ppt-*/`](skills/) 아래의 15개 per-template wrapper(15개 full-deck 템플릿, 36개 테마, 31개 single-page 레이아웃, 27개 CSS 애니메이션 + 20개 canvas FX, 키보드 runtime, 자석식 카드 presenter mode 포함)는 오픈소스 프로젝트 [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill)(MIT)에서 통합되었습니다. 원본 LICENSE는 [`skills/html-ppt/LICENSE`](skills/html-ppt/LICENSE)에 보존되어 있고 저작권 표시는 [@lewislulu](https://github.com/lewislulu)에게 있습니다. 각 per-template Examples 카드(`html-ppt-pitch-deck`, `html-ppt-tech-sharing`, `html-ppt-presenter-mode`, `html-ppt-xhs-post` …)는 authoring 가이드를 마스터 skill에 위임하므로, **Use this prompt** 클릭 시 업스트림과 동일한 prompt → 출력 동작이 그대로 보존됩니다. [`skills/guizang-ppt/`](skills/guizang-ppt/) 매거진/가로 스와이프 deck flow는 [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill)(MIT)에서 통합되었으며, 저작권 표시는 [@op7418](https://github.com/op7418)에게 있습니다. ## 라이선스 Apache-2.0. 번들된 `skills/guizang-ppt/`는 원래 [LICENSE](skills/guizang-ppt/LICENSE)(MIT)와 [op7418](https://github.com/op7418)에 대한 저작권 표시를 유지합니다. 번들된 `skills/html-ppt/`는 원래 [LICENSE](skills/html-ppt/LICENSE)(MIT)와 [lewislulu](https://github.com/lewislulu)에 대한 저작권 표시를 유지합니다.