🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.
이 번역은 AI가 원문 README를 옮긴 것입니다. 원문이 항상 우선합니다.
<h1 align="center">Open Design: 오픈소스 Claude Design 대안</h1>
🔥 Open Design 0.10.0 출시: 올인원 에이전틱 디자인 워크스페이스. 이제 모든 작업이 하나의 창에서 이루어집니다 — 막연한 아이디어에서 레퍼런스 탐색, 자료 수집, 대화형 편집, 댓글 큐잉, 모션 다듬기, 편집자나 코드 에이전트에게 전달까지 앱을 떠나지 않고 가능합니다. 병렬 세션을 통해 하나의 어시스턴트가 아닌 로컬 디자인 팀이 작업하는 느낌을 줍니다. 0.10.0 다운로드 · 토론 참여
>
⚡ Open Design AMR (Agentic Model Router) — 공식 모델 서비스. 한 번 충전으로 Open Design 내에서 GPT, Claude, Gemini, DeepSeek 사용 가능: 20개 이상의 플래그십 모델, 설정 불필요, 실제 토큰 사용량 기준 과금. AMR 사용해보기
>
🏅 Open Design Fellow 프로그램이 시작되었습니다. 디자인이 열려 있어야 한다고 믿는다면 Open Design Fellow가 되어 핵심 팀과 함께 제품을 만들고 더 많은 사람들이 디자인의 미래를 정의하는 데 참여하도록 도와주세요. 자세한 내용 →
MAINTAINERS.md및 Discord
<p align="center"> <img src="https://repo-assets.open-design.ai/resources/images/hero.png" alt="Open Design — 오픈소스 Claude Design 대안 · 150개 디자인 시스템 · 261개 플러그인 · 21개 코딩 에이전트 · 14개 미디어 제공자" width="100%" /> </p>
<p align="center"> <a href="https://open-design.ai/?utmsource=github&utmmedium=referral&utmcontent=readmewebsite">웹사이트</a> · <a href="https://open-design.ai/?utmsource=github&utmmedium=referral&utmcontent=readmedownload">다운로드</a> · <a href="https://open-design.ai/amr/?utmsource=github&utmmedium=referral&utmcontent=readmemodel_router">모델 라우터</a> · <a href="https://discord.gg/9ptkbbqRu">Discord</a> · <a href="https://x.com/OpenDesignHQ">@OpenDesignHQ 팔로우</a> </p>
<p align="center"> <a href="https://github.com/nexu-io/open-design/releases"><img alt="release" src="https://img.shields.io/github/v/release/nexu-io/open-design?style=flat&color=blueviolet&label=release&includeprereleases&displayname=tag" /></a> <a href="LICENSE"><img alt="license" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" /></a> <a href="https://discord.gg/9ptkbbqRu"><img alt="discord" src="https://img.shields.io/discord/1479002485040480266?style=flat&logo=discord&logoColor=white&label=discord&color=5865F2&cacheSeconds=3600" /></a> <a href="QUICKSTART.md"><img alt="quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat" /></a> </p>
<p align="center"><b>English</b> · <a href="docs/i18n/README.es.md">Español</a> · <a href="docs/i18n/README.pt-BR.md">Português</a> · <a href="docs/i18n/README.de.md">Deutsch</a> · <a href="docs/i18n/README.fr.md">Français</a> · <a href="docs/i18n/README.zh-CN.md">简体中文</a> · <a href="docs/i18n/README.zh-TW.md">繁體中文</a> · <a href="docs/i18n/README.ko.md">한국어</a> · <a href="docs/i18n/README.ja-JP.md">日本語</a> · <a href="docs/i18n/README.ar.md">العربية</a> · <a href="docs/i18n/README.ru.md">Русский</a> · <a href="docs/i18n/README.uk.md">Українська</a> · <a href="docs/i18n/README.tr.md">Türkçe</a></p>
🎨 로컬 우선, 오픈소스 [Claude Design][cd] 대안. 🖥️ macOS 및 Windows용 네이티브 데스크톱 앱. ⚡ 100개 이상의 스킬 · ✨ 150개의 브랜드급 DESIGN.md 시스템 · 📦 261개의 즉시 사용 가능한 플러그인. 🖼️ 웹 · 데스크톱 · 모바일 프로토타입, 라이브 대시보드/아티팩트, 데크, 이미지, 비디오 및 HyperFrames 모션 그래픽 생성. 🔒 샌드박스 iframe 미리보기 · HTML / PDF / PPTX / MP4 내보내기. 🤖 Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity 및 22개의 로컬 CLI에서 실행되며, BYOK를 통해 OpenAI 호환 엔드포인트도 사용 가능.
Open Design은 Anthropic이 Claude Design과 함께 제공한 에이전트 네이티브 루프 — 브리프 발견, 방향 확정, 아티팩트 스트리밍, 비평, 전달 — 가 폐쇄되지 않고, 이미 노트북에 있는 코딩 에이전트가 읽고, 쓰고, 리믹스할 수 있는 스킬, 디자인 시스템, 플러그인의 파일 시스템이 된 결과물입니다. CLI가 디자인 엔진이 되고, 노트북이 스튜디오가 되며, 팀의 DESIGN.md가 브랜드 계약이 됩니다.
또한 에이전트 시대의 Figma 대안입니다 — 캔버스에서 픽셀을 밀어내는 대신, 실제 CSS, 실제 폰트, 실제 컴포넌트로 단일 페이지 아티팩트를 제공하며, HTML / PDF / PPTX / MP4로 바로 내보내집니다 — 이미 디자인 시스템에 의해 형성되었고, 매일 사용하는 에이전트 내에서 바로 실행 가능합니다.
[cd]: https://x.com/claudeai/status/2045156267690213649
Open Design이 무엇이고 무엇을 하는지 간략히 살펴봅니다. 홈에서 시작하여, 자동화로 반복 워크플로우를 오케스트레이션하고, 디자인 시스템에서 브랜드 계약을 정제하며, 플러그인 및 통합으로 확장합니다. 모든 프로젝트의 스튜디오 내에서 동일한 디자인 시스템이 프로토타입, 라이브 아티팩트, HyperFrames, 데크, 이미지를 스트리밍합니다.
<table> <tr> <td valign="top"> <img src="https://repo-assets.open-design.ai/resources/images/product/home.png" alt="홈 페이지" /><br/> <sub><b>홈</b> — 개요 진입점. 스킬과 디자인 시스템을 선택하고, 브리프를 입력한 후 한 곳에서 모든 것을 시작합니다.</sub> </td> </tr> </table>
<table> <tr> <td width="50%" valign="top"> <img src="https://repo-assets.open-design.ai/resources/images/product/automation.png" alt="자동화 페이지" /><br/> <sub><b>자동화</b> — 반복적인 디자인 워크플로우를 재사용 가능하고 예약 가능한 자동화로 오케스트레이션합니다.</sub> </td> <td width="50%" valign="top"> <img src="https://repo-assets.open-design.ai/resources/images/product/design-system.png" alt="디자인 시스템 페이지" /><br/> <sub><b>디자인 시스템</b> — 팀의 <code>DESIGN.md</code>를 모든 출력을 형성하는 브랜드 계약으로 정제합니다.</sub> </td> </tr> <tr> <td width="50%" valign="top"> <img src="https://repo-assets.open-design.ai/resources/images/product/plugin.png" alt="플러그인 페이지" /><br/> <sub><b>플러그인</b> — 워크플로우 플러그인을 탐색, 설치, 배포하여 필요에 따라 생성을 확장합니다.</sub> </td> <td width="50%" valign="top"> <img src="https://repo-assets.open-design.ai/resources/images/product/integrations.png" alt="통합 페이지" /><br/> <sub><b>통합</b> — 외부 시스템 및 MCP 도구를 연결하고, 모든 IDE, 스크립트 또는 자동화에서 Open Design을 사용합니다.</sub> </td> </tr> </table>
프로젝트의 스튜디오 내에서 동일한 디자인 시스템이 여러 아티팩트 유형을 스트리밍합니다:
<table> <tr> <td width="50%" valign="top"> <img src="https://repo-assets.open-design.ai/resources/images/product/studio-prototype.png" alt="프로토타입" /><br/> <sub><b>프로토타입</b> — 디자인 시스템을 읽고 샌드박스 iframe에서 렌더링하는 단일 페이지 HTML 아티팩트로, 즉시 미리보기 가능하고 소스로 다운로드 가능합니다.</sub> </td> <td width="50%" valign="top"> <img src="https://repo-assets.open-design.ai/resources/images/product/studio-hyperframe.png" alt="HyperFrame" /><br/> <sub><b>HyperFrame</b> — 프로그래매틱 모션 및 애니메이션 그래픽으로, 실제 MP4로 렌더링됩니다 (예: 1920×1080 · 30fps).</sub> </td> </tr> <tr> <td width="50%" valign="top"> <img src="https://repo-assets.open-design.ai/resources/images/product/studio-ppt.png" alt="데크" /><br/> <sub><b>데크</b> — 페이지를 넘기고 키보드로 탐색하며 PPTX / PDF로 내보낼 수 있는 피치 데크.</sub> </td> <td width="50%" valign="top"> <img src="https://repo-assets.open-design.ai/resources/images/product/studio-image.png" alt="이미지" /><br/> <sub><b>이미지</b> — 브랜드급 이미지 및 시각적 자산, 고해상도 생성 및 다운로드 지원.</sub> </td> </tr> </table>
Open Design은 스킬, CLI, MCP 서버로 제공되어 주류 코딩 에이전트가 기본적으로 소비합니다. OD가 설치되면
od mcp install <agent>한 줄로 MCP 서버를 해당 에이전트의 설정에 연결하고, 모든 에이전트 내에서 동일한 도구를 호출할 수 있습니다.
| 코딩 에이전트 / 플랫폼 | 상태 | 한 줄 MCP 서버 설치 | ||
|---|---|---|---|---|
| Claude Code | ✅ 지원 | od mcp install claude |
||
| Codex CLI | ✅ 지원 | od mcp install codex |
||
| Cursor | ✅ 지원 | od mcp install cursor |
||
| VS Code + GitHub Copilot | ✅ 지원 | od mcp install copilot |
||
| GitHub Copilot CLI | ✅ 지원 | od mcp install copilot |
||
| Gemini CLI | ✅ 지원 | od mcp install gemini |
||
| OpenCode | ✅ 지원 | od mcp install opencode |
||
| OpenClaw | ✅ 지원 | od mcp install openclaw |
||
| Antigravity | ✅ 지원 | od mcp install antigravity |
||
| Cline | ✅ 지원 | od mcp install cline |
||
| Trae | ✅ 지원 | od mcp install trae |
||
| Kimi CLI | ✅ 지원 | od mcp install kimi |
||
| Pi Agent | ✅ 지원 | od mcp install pi |
||
| Mistral Vibe CLI | ✅ 지원 | od mcp install vibe |
||
| Hermes Agent | ✅ 지원 | od mcp install hermes |
od mcp install <agent> --print로 드라이런 미리보기 · --uninstall로 제거 · 전체 목록은 od mcp install --help.
<p align="center"> <img src="https://repo-assets.open-design.ai/resources/images/coding-agents.png" alt="Open Design이 지원하는 21개 코딩 에이전트 CLI — Claude Code · Codex · OpenCode · Hermes · Antigravity · Gemini · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Devin · Trae" width="100%" /> </p>
CLI가 설치되지 않았나요? POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream의 BYOK 프록시는 동일한 루프를 제공합니다 (프로세스 생성 없음) — baseUrl + apiKey + model을 붙여넣고, OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM 또는 모든 OpenAI 호환 엔드포인트를 지원합니다. 대상별 SSRF 보호는 데몬 경계에서 내부 IP / link-local / CGNAT을 차단합니다.
어댑터 계약 및 스트림 파서는 apps/daemon/src/agents.ts에 있습니다. 새 CLI 추가는 한 항목으로 가능합니다 — docs/agent-adapters.md 참조.
네 가지 핵심 제품 카테고리, 모두 노트북에서 실행되는 코딩 에이전트에 의해 렌더링됩니다. 썸네일을 클릭하여 실제 예제를 확인하세요.
기본 출력 표면. DESIGN.md를 읽고 샌드박스 iframe에서 렌더링하는 단일 페이지 HTML 아티팩트.
<table> <tr> <td width="50%" valign="top"> <img src="docs/screenshots/01-entry-view.png" alt="진입 뷰" /><br/> <sub><b>진입 뷰</b> — 스킬 선택, 디자인 시스템 선택, 브리프 입력. 프로토타입, 대시보드, 데크, 모바일 앱, 매거진 페이지를 위한 하나의 표면.</sub> </td> <td width="50%" valign="top"> <img src="docs/screenshots/skills/mobile-onboarding.png" alt="모바일 온보딩" /><br/> <sub><b>모바일 프로토타입</b> — 픽셀 정확한 iPhone 15 Pro 크롬, 다중 화면 흐름. 에이전트는 전화 프레임을 다시 그리지 않습니다. 공유 장치 프레임은 <code>assets/frames/</code>에 있습니다.</sub> </td> </tr> <tr> <td width="50%" valign="top"> <img sr
[...truncated...]