먼저 질문 폼
어떤 surface · 누구를 향해 · 톤 · 브랜드 · 규모. 라디오 30초가 30분의 수정 작업을 대체합니다.
오픈소스 · 로컬 우선 · BYOK
오픈소스 대안 Claude Design.
이미 깔려 있는 coding-agent CLI가 굴립니다 — Claude Code, Codex, Cursor, Gemini, OpenCode, 추가 11종. 110개 Skill · 141종 디자인 시스템 · 시각적 방향 5종 · Apache-2.0.
Apache-2.0 · 가입 불필요 · 내 CLI, 내 Key
왜 만들었나
Anthropic의 Claude Design(Opus 4.7, 2026년 4월)은 LLM이 장문을 멈추고 디자인 산출물을 곧장 내놓기 시작하면 어떤 일이 일어나는지 처음으로 보여줬습니다. 순식간에 화제가 됐고 — 그 상태로 클로즈드 소스, 유료, 클라우드 전용, Anthropic의 모델과 Anthropic 내부 Skill에 묶인 채 남아 있습니다. Open Design은 그 오픈소스 대안입니다. 같은 루프, 같은 artifact-first 사고방식. 락인만 빼고.
클로즈드 → 오픈
모든 Skill은 한 개의 파일. 모든 디자인 시스템은 한 개의 Markdown. 모든 prompt는 읽고 고칠 수 있는 TypeScript 모듈입니다.
내장 Agent → 내 Agent
16종의 coding-agent CLI를 PATH에서 자동 감지. 하나도 없으면 OpenAI 호환 baseUrl + apiKey만 붙이면 끝.
클라우드 → 로컬
로컬은 pnpm tools-dev. SQLite는 .od/. Vercel 배포는 선택사항. 데이터, 파일시스템, 의사 결정 — 전부 당신 손에.
prompt가 artifact가 되기까지
OD는 모델이 픽셀 한 점도 마음대로 칠하지 못하게 합니다. 붓을 들기 전에 브리프를 잠급니다.
어떤 surface · 누구를 향해 · 톤 · 브랜드 · 규모. 라디오 30초가 30분의 수정 작업을 대체합니다.
브랜드 규정이 없으면? 엄선된 5개 방향에서 하나 — 각각이 결정론적인 OKLch 팔레트와 폰트 스택을 갖췄습니다.
Agent의 계획이 라이브 카드로 UI에 흘러 들어옵니다. in_progress → completed가 실시간으로 갱신. 도중에 방향을 틀어도 비용은 거의 0.
샌드박스 iframe 미리보기. 그 자리에서 편집 가능. HTML, PDF, PPTX, ZIP으로 다운로드.
상자에 들어 있는 것
Skill 하나는 폴더 하나. 디자인 시스템 하나는 9섹션짜리 Markdown 한 장. 폴더를 넣고 daemon을 재시작하면 피커에 나타납니다. 시스템을 바꾸면 다음 렌더링이 새 토큰을 씁니다.
Skill 스포트라이트 · html-ppt
번들된 html-ppt Skill엔 덱 Agent에 필요한 부품이 다 들어 있습니다 — 프레젠터 모드, 레이아웃 라이브러리, 키네틱 애니메이션 세트, 그리고 바로 fork할 수 있는 14개 템플릿. 폴더를 넣고 daemon을 재시작하면, 브라우저 안의 PPT 엔진이 완성됩니다.
테이스트가 잠긴 변형
html-ppt-taste-brutalist와 html-ppt-taste-editorial은 「테이스트가 잠긴」 독립 래퍼로 출시됩니다 — 같은 Skill, 테이스트는 하드코드, 이후 바꿀 수 없습니다. 웹 프로토타입 쪽엔 셋 더: web-prototype-taste-{brutalist,editorial,soft}.
당신의 Agent를 가져오세요
당신이 깔아둔 것이 곧 후보 디자인 엔진이 됩니다. 모델 피커에서 한 번의 클릭으로 전환.
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
CLI가 하나도 없다? POST /api/proxy/stream은 OpenAI 호환, Azure 호환, Google 호환의 baseUrl + apiKey + model을 받습니다. Anthropic-via-OpenAI 어댑터, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, 자가 호스팅 vLLM — 전부 같은 루프. daemon 경계에서 loopback / link-local / RFC1918을 차단해 SSRF를 막습니다.
기둥이 되는 여섯 가지
01
daemon이 PATH를 16종의 알려진 coding-agent CLI로 스캔합니다. 깔린 것이 후보 디자인 엔진이 되고, stdio로 굴러갑니다 — CLI마다 어댑터 하나.
02
각 Skill은 SKILL.md + assets/ + references/. skills/ 아래에 폴더를 넣고 daemon을 재시작하면 피커에 나타납니다. 번들된 magazine-web-ppt는 원본 그대로 commit되며 라이선스가 보존됩니다.
03
9섹션 DESIGN.md 스키마 — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. 모든 artifact가 활성 시스템에서 읽습니다. 시스템 변경 → 다음 렌더링이 새 토큰을 사용.
04
1턴은 <question-form>만 — 사고도, 도구도, 잡담도 없습니다. surface · 대상 · 톤 · 브랜드 · 규모. 잘못된 방향의 비용은 한 번의 채팅 라운드, 완성된 덱 한 부가 아닙니다.
05
daemon은 당신 프로젝트의 artifact 폴더를 cwd로 두고 CLI를 spawn합니다. Agent가 잡는 건 진짜 Read, Write, Bash, WebFetch — 진짜 도구가 진짜 파일시스템에 닿습니다. SQLite가 project, conversation, message, tab을 영속화.
06
discovery directives + identity charter + 활성 DESIGN.md + 활성 SKILL.md + project metadata + skill side files. 모든 레이어가 조합 가능. 모든 레이어가 당신이 고칠 수 있는 파일.
07
`od mcp`를 돌리면 프로젝트가 stdio MCP server로 노출됩니다. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — MCP를 말하는 도구라면 무엇이든 당신 프로젝트의 artifact, 파일, 메타데이터를 곧장 읽어 갑니다. 경계는 읽기 전용: 파일 읽기, 검색, 메타데이터. 쓰기 없음, 외부 호출 없음.
프롬프트 스택
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
모든 레이어가 조합 가능. 모든 레이어가 당신이 고칠 수 있는 파일.
비교
클로즈드 클라우드 제품, 오픈 데스크톱 동류, 오픈 웹앱. 우리는 open-codesign에서 많은 걸 빌렸고 /about에 credit을 남깁니다 — 폼 팩터도 다르고, prompt 스택도 다르지만, 같은 북극성을 봅니다.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| 라이선스와 비용 | |||
| 라이선스 | 클로즈드 | MIT | Apache-2.0 |
| 최저 결제 | Pro / Max / Team | BYOK | BYOK — OpenAI 호환 URL만 붙이면 됨 |
| 폼 팩터 | |||
| 폼 팩터 | Web(claude.ai) | 데스크톱(Electron) | 웹앱 + 로컬 daemon |
| Vercel 배포 가능 | — | — | 가능 |
| AI 런타임과 흐름 | |||
| Agent 런타임 | 내장(Opus 4.7) | 내장(pi-ai) | 당신의 기존 CLI |
| 프로바이더 유연성 | Anthropic 전용 | pi-ai 통해 7+ | 16 CLI + BYOK 프록시 |
| 질문 폼(1턴) | — | — | 강제 규칙 |
| 시각적 방향 5종 | — | — | 있음 |
| 5차원 자기 검토 | — | — | 출력 전 게이트 |
| Skill, 시스템, 마이그레이션 | |||
| Skill | 프로프라이어터리 | 12개 TS 모듈 | 110개의 드롭 가능 SKILL.md |
| 디자인 시스템 | 프로프라이어터리 | DESIGN.md(v0.2) | 141종 출시 |
| Claude Design ZIP 임포트 | n/a | — | 가능 — Anthropic이 멈춘 자리에서 이어가기 |
Claude Design은 Anthropic의 상표입니다. Open Design은 Anthropic과 무관하며 추천 받은 적도 없습니다.
채팅, 그 너머
<artifact> HTML을 만드는 그 채팅이 이미지 · 비디오 · 오디오 생성도 굴립니다. 모든 렌더링이 프로젝트 워크스페이스에 진짜 .png나 .mp4로 떨어집니다. prompt-templates/ 아래 즉시 복제 가능한 prompt 95개.
포스터 · 아바타 · 일러스트 도시 지도 · 인포그래픽 · 매거진 풍 SNS 카드 · 게임 UI · 내러티브 게임 스틸
확대 gpt-image-2
3D 돌계단 진화
확대 gpt-image-2
도시 음식 일러스트 지도
확대 gpt-image-2
시네마틱 엘리베이터 장면
확대 gpt-image-2
사이버펑크 애니메 인물화
확대 gpt-image-2
글래머러스 스튜디오 인물화
확대 gpt-image-2
애니메 격투 게임 — 류우가 캡틴 vs 카제 렌신
확대 gpt-image-2
삼국 — 관우, 안량을 베다
확대 gpt-image-2
삼국 — 여포, 원문에서 화살을 쏘다
확대 gpt-image-2
삼국 — 조운, 아두를 안고 단기로 돌파
확대 gpt-image-2
고대 중국 오픈월드 MMO HUD
확대 gpt-image-2
크레용 아이 그림 → 포토리얼 리워크
확대 gpt-image-2
오타쿠 댄스 안무 분해 — 16컷
확대 gpt-image-2
센세이셔널 걸 댄스 스토리보드 — 8컷
15초 시네마틱 t2v + i2v, 오디오 포함 · 내러티브 쇼트 · 제품 영상
Seedance 2.0
음악 팟캐스트와 기타
Seedance 2.0
감정 가득한 얼굴 클로즈업
Seedance 2.0
럭셔리 슈퍼카 시네마틱
Seedance 2.0
자금성 고양이 풍자
Seedance 2.0
일본 로맨스 쇼트
Seedance 2.0
시네마틱 용 비행
Seedance 2.0
황무지 공장 추격
Seedance 2.0
사이버펑크 게임 트레일러
Seedance 2.0
크림슨 호라이즌 SF
Seedance 2.0
마법학교 스토리보드
Seedance 2.0
뱀파이어 골목 격투
Seedance 2.0
레트로 홍콩 무협 미학
Seedance 2.0
삼국 — 관우, 안량을 베다
Seedance 2.0
삼국 — 여포, 원문에서 화살을 쏘다
Seedance 2.0
삼국 — 조운, 아두를 안고 단기로 돌파
Seedance 2.0
3D 애니메이션 레고 조립 소년
Seedance 2.0
고대 수호자, 용을 구하다
Seedance 2.0
고대 인도 왕국 — FPV
Seedance 2.0
캐릭터 인트로 모션 그래픽
Seedance 2.0
동아시아 여성의 손 댄스
Seedance 2.0
해양 생물학자의 탐험
Seedance 2.0
스트리트 레이싱 시네마틱
Seedance 2.0
토스터 로켓 점프스케어
Seedance 2.0
빈티지 디즈니 해적 악어
Seedance 2.0
할리우드 오트쿠튀르 판타지
HTML→MP4 모션 그래픽 · 제품 리빌 · 키네틱 타이포그래피 · 데이터 차트
확대 HyperFrames
로고 아웃트로 시네마틱
확대 HyperFrames
3폰 앱 쇼케이스
확대 HyperFrames
TikTok 가라오케
확대 HyperFrames
막대 차트 레이스
확대 HyperFrames
비행 경로 지도
확대 HyperFrames
금액 카운터의 환호
확대 HyperFrames
SNS 오버레이 스택
확대 HyperFrames
UI 3D 리빌
Quickstart
Node ~24, pnpm 10.33.x. macOS, Windows, Linux 모두에서 동작(Linux는 `pnpm tools-pack linux build --to appimage`로 AppImage 빌드). daemon이 SQLite와 프로젝트별 artifact를 위한 로컬 .od/ 폴더를 자동 생성합니다. init 단계 없음.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run web 새 소식 · v0.5.0
v0.5.0은 artifact 루프를 「한 번 그리면 끝」에서 「계속 다듬을 수 있다」로 끌어올립니다 — Inspect 모드로 요소 단위 스타일 조정, live dashboard가 일급 artifact 카테고리로 승격, Design Jury 채점 루브릭도 더 날카로워졌습니다. v0.4.0의 `od mcp`는 그대로, 이 모든 것을 노트북의 다른 coding agent로 이어줍니다.
요소 단위 조정
호버, 클릭으로 요소의 computed style을 직접 조정 — 색, 간격, 글꼴 크기 — Agent로 돌아갈 필요 없음. Artifact는 그 자리에서 갱신. 마음에 들면 변경 사항이 원본 파일로 자동 반영됩니다.
v0.5.0 · PR #362
일급 카테고리
새 dashboard skill 세 개(`live-dashboard`, `live-artifact` 아래 `clinic-console` 템플릿, `flowai-live-dashboard-template`)에 Notion 스타일 팀 대시보드 prompt template까지 더해, artifact를 진짜 Composio 커넥터에 연결합니다. 미리보기에서 도는 것은 라이브 데이터, 얼어붙은 mock이 아닙니다.
v0.5.0 · PR #778 + #795 + #801 + #799
품질 게이트 · 5단계
각 패널의 채점 루브릭이 panel 레벨 prompt template에 자리잡고, 공통 system composer를 통해 주입됩니다. 여러 번 돌려도 채점 잣대가 흔들리지 않음. Phase 4의 영속화, 트랜스크립트, 오케스트레이터는 그대로 이어집니다.
v0.5.0 · PR #524
프로토콜
`od mcp`를 돌리면 MCP를 말하는 어떤 coding agent든(Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) 당신 프로젝트의 파일, 검색 인덱스, 메타데이터를 곧장 읽습니다. 경계는 읽기 전용. OD 앱이 지금 열어둔 프로젝트가 곧 다른 Agent가 보는 프로젝트입니다.
v0.4.0 · PR #399
Open Design의 계보
alchaincyf
디자인 철학의 나침반
Junior-Designer 워크플로, 5단계 브랜드 에셋 프로토콜, anti-AI-slop 체크리스트, 5차원 자기 검토, 그리고 Open Design의 방향 피커 뒤에 있는 「5학파 × 20가지 디자인 철학」 라이브러리.
op7418
Deck 모드
skills/guizang-ppt/ 아래에 원본 그대로 번들, 라이선스 보존. 매거진 레이아웃, WebGL hero, P0/P1/P2 체크리스트 문화가 Open Design의 다른 모든 Skill로도 이어졌습니다.
OpenCoworkAI
가장 가까운 동류 · UX의 북극성
스트리밍 artifact 루프, 샌드박스 iframe 미리보기, 라이브 Agent 패널(todo + tool calls + 중단 가능), 5종 익스포트 형식, 코멘트 모드 미리보기 주석. 폼 팩터에서는 의도적으로 갈라짐 — open-codesign은 Electron + pi-ai, Open Design은 Web + 로컬 daemon + 당신의 CLI.
multica-ai
Daemon 아키텍처
PATH 스캔 방식의 Agent 감지, 단일 특권 프로세스로서의 로컬 daemon, agent-as-teammate 세계관. Open Design은 이 아키텍처 모델을 채택했지만, multica의 코드 자체는 가져오지 않았습니다.
Star를
Star가 월세를 내주진 않지만, 다음 디자이너에게 · 다음 Agent에게 · 다음 컨트리뷰터에게 「이건 볼 가치가 있다」고 알려줍니다.
Apache-2.0
오픈소스
110
Skill
141
디자인 시스템
16 + BYOK
CLI
FAQ
Open Design은 Anthropic Claude Design의 오픈소스 대안입니다. 로컬에서는 pnpm tools-dev로 동작하고, Vercel에 배포 가능하며, 디자인 엔진은 이미 깔려 있는 coding-agent CLI(Claude Code, Codex, Cursor, Gemini, OpenCode, 추가 11종)를 사용합니다. Apache-2.0.
Claude Design은 클로즈드 소스, 유료(Pro/Max/Team), 클라우드 전용, Anthropic 모델과 Skill에 묶여 있습니다. Open Design은 오픈소스, BYOK, 로컬 우선이며, 16종의 CLI 어댑터 또는 OpenAI / Azure / Google 호환 엔드포인트 사이에서 모델을 자유롭게 갈아탈 수 있습니다.
자가 호스팅, 모델 유연성, 커스텀 Skill이 필요하다면 가능합니다. 클로즈드 루프(Agent 감지 → Skill + 디자인 시스템 선택 → 채팅 → <artifact> 파싱 → 미리보기 → 저장)가 엔드투엔드로 동작합니다. v0.4.x에서 Critique Theater(출력 전 5인 Design Jury 채점), Tweaks 모드(미리보기에서 요소 picker + 채팅 첨부), Manual edit 모드, 그리고 Composio 커넥터에서 라이브 데이터를 끌어오는 live artifact가 추가됐습니다.
필요 없습니다. Open Design은 PATH에 이미 있는 coding-agent CLI를 쓰거나, BYOK 프록시를 통해 OpenAI 호환 API Key를 씁니다. 원하는 프로바이더의 Key를 가져오면 됩니다.
기본 16종: Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Devin for Terminal, Hermes, Kimi CLI, Kiro CLI, Kilo, Mistral Vibe, DeepSeek TUI, Pi. daemon 부팅 시 PATH에서 자동 감지됩니다.
Claude Design에서 익스포트한 ZIP을 환영 다이얼로그에 드롭하세요. POST /api/import/claude-design이 그것을 진짜 .od/projects/<id>/ 폴더로 풀어주고, 진입 파일을 tab으로 열고, 로컬 Agent용으로 「Anthropic이 멈춘 자리에서 이어가기」 prompt를 준비합니다.
할 수 있습니다. 웹 레이어는 Next.js 16 + React 18 + TypeScript로, Vercel에 그대로 배포됩니다. 로컬 daemon은 노트북에 남습니다. 완전 원격 구성(Vercel + 터널, Topology B)은 로드맵 위에 있습니다.
design-systems/<your-brand>/에 DESIGN.md 한 장을 두세요 — 9섹션 스키마(color, typography, spacing, layout, components, motion, voice, brand, anti-patterns)에 따라. daemon을 재시작하면 피커에 나타납니다.
Apache-2.0입니다. 번들된 skills/guizang-ppt/와 skills/html-ppt/는 각자 원래의 MIT 라이선스와 크레딧을 보존합니다. 유료 티어 없음, 사용량 제한 없음. 비용은 당신이 고른 LLM 프로바이더에게 따로 내는 만큼만.
1턴의 질문 폼이 모델이 붓을 들기 전에 브리프를 잠급니다. 브랜드 규정이 없을 때는 5종의 방향 피커가 결정론적인 팔레트를 줍니다. 출력 전에 5차원 자기 검토로 점수를 매깁니다. 모든 Skill에 P0/P1/P2 체크리스트가 따라오고, pre-flight 사이드 파일 주입으로 강제 적용됩니다. 과한 보라색 그라디언트, 진부한 이모지 아이콘, 디스플레이용 Inter 폰트 — 이것들은 prompt 스택에서 명시적으로 금지되어 있습니다.
쓸 수 있습니다. POST /api/proxy/stream이 SSE 청크를 OpenAI / Azure / Google 호환 엔드포인트로 전달합니다. baseUrl, apiKey, model만 붙이면 됩니다 — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, 자가 호스팅 vLLM, Anthropic-via-OpenAI 어댑터, 전부 동작. loopback과 사설 네트워크에 대한 SSRF 방어 포함.
Settings → Execution에 Connection test 버튼이 추가됐습니다(v0.5.0, PR #507). baseUrl, apiKey, model을 붙여넣고 Test를 누르면, Open Design이 프로바이더에 최소 핸드셰이크를 보내고 응답이나 정확한 에러 프레임을 보여줍니다. Anthropic, OpenAI 호환, Azure, Google 엔드포인트 지원. Key가 잘못됐거나, 모델명이 틀렸거나, gateway가 막고 있을 때 채팅을 켜고 장애를 추적하는 왕복이 줄어듭니다.
Anthropic 모델을 골랐을 때만 그렇습니다(Claude Code, 또는 BYOK 프록시에 Anthropic Key를 사용한 경우). Open Design 자체는 모든 것을 로컬 SQLite(.od/app.sqlite)와 프로젝트별 .od/projects/ 파일에 저장합니다. Open Design 서버로 올라가는 건 아무것도 없습니다 — 애초에 Open Design 서버는 없습니다.
있습니다. `od mcp`를 돌리면 Open Design이 stdio MCP server로 자신을 노출합니다. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — MCP를 말하는 도구라면 무엇이든 당신 프로젝트의 파일을 읽고, 검색을 돌리고, 메타데이터를 들여다볼 수 있습니다. 경계는 읽기 전용: 파일 읽기, 검색, 메타데이터. 쓰기 없음, 외부 호출 없음. v0.4.0부터.
출력 전에 5인의 Design Jury가 모든 artifact를 채점합니다 — 접근성, 브랜드 적합, 크래프트, 콘텐츠, 구조. v0.4.0 Phase 4부터 영속화 + 트랜스크립트 + 오케스트레이터가 엔드투엔드로 돌아갑니다. 임계 미만이면 Agent가 스스로 다시 쓰고 다시 채점하고, 임계를 넘으면 그제야 출력합니다.
Live artifact는 미리보기 안의 artifact가 Composio 커넥터 카탈로그를 통해 라이브 데이터를 끌어오게 합니다 — GitHub, Linear, Notion, Gmail 등등. 번들된 orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion 같은 Skill과 social-media-dashboard에서 배선이 끝나 있습니다. v0.4.0부터(PR #381).
출시
리포지토리를 클론. 명령어 3줄을 실행. prompt를 입력. 질문 폼이 뜨는 걸 보고, 채워 넣고, todo 카드가 흘러가는 걸 보고, artifact가 렌더링되는 걸 봅니다.