open-design

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #golang #android #machine-learning #docker #macos #vue #awesome-list #security #mcp #openai #open-source

(★ 90,071)

🎨 오픈소스 Claude Design 대안. 🖥️ 로컬 우선 데스크톱 앱. 🖼️ 코딩 에이전트가 디자인 엔진이 됩니다: 프로토타입, 랜딩 페이지, 대시보드, 슬라이드, 이미지 및 비디오 — 실제 파일, HTML/PDF/PPTX/MP4 내보내기 지원. 🤖 BYOK를 통해 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen 및 20개 이상의 CLI 사용 가능.

파일 탐색기

최종 버전 다운로드 (.zip)

파일 수가 많아 일부만 표시됩니다. 전체 파일은 위 다운로드 버튼으로 확인해 주세요.

- - od-contribute.md
- marketplace.json
- - hash.json
  - runners.json
  - scopes.json
- - bug-report.yml
  - config.yml
  - feature-request.yml
  - preview-v0.8.0-feedback.yml
  - tutorial-submission.yml
- - copy-button-copied.png
  - copy-button-hover.png
  - copy-prompt-button.png
  - issue-6-fix.png
  - time-aware-home-greeting.png
- - agent-pr-explore-local.sh
  - agent-pr-explore-sandbox.sh
  - handoff.py
  - hash.py
  - landing-page-daily-feishu.ts
  - landing-page-deploy-feishu.ts
  - landing-page-purge-edge-cache.ts
  - provision-agent-pr-explore-runner.sh
  - r2.ts
  - release_notice.ts
  - release_notification.ts
  - rerun_infra_cancel.py
  - runners.py
  - scopes.py
- - agent-pr-explore-sandbox.yml
  - agent-pr-explore.lock.yml
  - autofix.atom.yml
  - backport-automerge.yml
  - backport-label-guard.yml
  - backport.yml
  - bake-plugin-previews-automerge.yml
  - bake-plugin-previews-gc.yml
  - bake-plugin-previews-pr.yml
  - bake-plugin-previews-release.yml
  - bake-plugin-previews.yml
  - blog-indexing-on-deploy.yml
  - cache-maintenance.yml
  - ci.yml
  - comment.atom.yml
  - contributor-card-bot.yml
  - contributor-maintainer-check.yml
  - critique-conformance.yml
  - cut-patch-release.yml
  - cut-release.yml
  - discord-resolved.yml
  - docker-image.yml
  - e2e-coverage-reminder.yml
  - finalize-release.yml
  - fork-pr-workflow-approval.yml
  - labeler.yml
  - landing-edge-cache-purge.yml
  - landing-page-ci.yml
  - landing-page-daily-feishu.yml
  - landing-page-production.yml
  - landing-page-staging.yml
  - main-prerelease-win-smoke.yml
  - metrics.yml
  - nix.yml
  - notify-daily-feishu.yml
  - notify-release-feishu.yml
  - pr-author-inactivity.yml
  - refresh-contributors-wall.yml
  - refresh-plugin-popularity.yml
  - release-beta.yml
  - release-branch-direct-pr-guard.yml
  - release-gate.yml
  - release-prerelease.yml
  - release-stable.yml
  - report.atom.yml
  - rerun.atom.yml
  - stale-issues.yml
  - tutorials-youtube-sync.yml
  - ui-extended-main.yml
  - visual-baseline.yml
- actionlint.yaml
- AGENTS.md
- CODEOWNERS
- labeler.yml
- pull_request_template.md
- kbpage_late.png
- - beacon.png
  - node.png
  - nova.png
  - signal.png
  - spark.png
- config.yaml
- - AGENTS.md
  - package.json
  - tsconfig.json
  - tsconfig.tests.json
  - vitest.config.ts
  - vitest.parallel.config.ts
- - package.json
  - tsconfig.json
  - tsconfig.tests.json
  - vitest.config.ts
- - .env.example
  - AGENTS.md
  - astro.config.ts
  - package.json
- AGENTS.md
.dockerignore
.gitattributes
.gitignore
.ignore
.node-version
AGENTS.md
CHANGELOG.md
CLAUDE.md
CONTEXT.md
CONTRIBUTING.md
LICENSE
MAINTAINERS.md
PRIVACY.md
QUICKSTART.md
README.md
RELEASE-NOTES-0.10.0.md
TRANSLATIONS.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/nexu-io/open-design

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd open-design

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

corepack enable && pnpm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

pnpm tools-dev run web

이 명령어를 터미널에 그대로 입력해 실행하세요.

pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

이 명령어를 터미널에 그대로 입력해 실행하세요.

cd open-design && corepack enable && pnpm install

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

pnpm guard && pnpm typecheck

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 5 (1 ratings)

Recent Feedback

★★★★★ • 2026-08-10 00:40

cool!!

<h1 align="center">Open Design: 오픈소스 Claude Design 대안</h1>

> ⚡ **Open Design Cloud — 공식 모델 서비스:** Open Design 안에서 GPT, Claude, Gemini, DeepSeek를 한 번의 충전으로 사용하세요: 20개 이상의 플래그십 모델, 제로 설정, 실제 토큰 사용량 기반 과금. [Open Design Cloud 체험하기](https://open-design.ai/cloud/?utm_source=github&utm_medium=referral&utm_content=readme_try_cloud)
>
> 🏅 **Open Design Fellow 프로그램이 시작되었습니다.** 디자인도 개방되어야 한다고 믿으신다면 Open Design Fellow가 되어 코어 팀과 함께 제품을 구체화하고, 더 많은 사람들이 디자인의 미래를 정의하는 데 참여할 수 있도록 도와주세요. 상세 정보 → [`MAINTAINERS.md`](MAINTAINERS.md) 및 [Discord](https://discord.gg/mHAjSMV6gz).

<a href="https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_website">웹사이트</a> ·
 <a href="https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download">다운로드</a> ·
 <a href="https://open-design.ai/cloud/?utm_source=github&utm_medium=referral&utm_content=readme_cloud">Open Design Cloud</a> ·
 <a href="https://discord.gg/mHAjSMV6gz">Discord</a> ·
 <a href="https://x.com/OpenDesignHQ">@OpenDesignHQ 팔로우</a>

<a href="README.md">English</a> · <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.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> · <a href="docs/i18n/README.th.md">ภาษาไทย</a>

---

## Open Design란 무엇인가요?

🎨 **오픈소스 Claude Design 대안.** &nbsp;🖥️ **macOS 및 Windows를 위한 로컬 우선 네이티브 데스크톱 앱.** &nbsp;⚡ **조합 가능한 스킬(Skills), 브랜드 등급의 `DESIGN.md` 디자인 시스템, 그리고 즉시 사용 가능한 플러그인.** &nbsp;🖼️ **웹 · 데스크톱 · 모바일 프로토타입**, **라이브 대시보드 / 아티팩트**, **프레젠테이션 덱**, **이미지**, **비디오**, 그리고 **HyperFrames** 모션 그래픽을 생성합니다. 🔒 샌드박스 처리된 iframe 미리보기 · HTML / PDF / PPTX / MP4 내보내기. &nbsp;🤖 **Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity 및 25개의 개별 로컬 CLI 실행 파일**, 또는 BYOK를 통한 모든 OpenAI 호환 엔드포인트에서 실행됩니다.

Open Design은 Anthropic이 Claude Design과 함께 선보인 **에이전트 네이티브** 루프(브리프 발견, 방향성 확정, 아티팩트 스트리밍, 피드백, 전달)가 더 이상 폐쇄형으로 남아있지 않고, 노트북에 이미 설치된 코딩 에이전트가 읽고, 쓰고, 리믹스할 수 있는 **기능적 스킬, 렌더링 디자인 템플릿, 디자인 시스템, 플러그인의 파일 시스템**으로 진화한 결과물입니다. 여러분의 CLI가 디자인 엔진이 되고, 노트북이 스튜디오가 되며, 팀의 `DESIGN.md`가 브랜드 계약서가 됩니다.

또한 이것은 **에이전트 시대를 위한 Figma의 대안**입니다. 캔버스 위에서 픽셀을 옮기는 대신 실제 CSS, 실제 폰트, 실제 컴포넌트로 구성된 싱글 페이지 아티팩트를 만들어 HTML / PDF / PPTX / MP4로 바로 내보냅니다. 이미 디자인 시스템에 맞춰 정돈되어 있고, 매일 사용하는 에이전트 내부에서 바로 실행할 수 있습니다.

---

## 제품 투어

Open Design의 기능과 특징을 빠르게 살펴보세요. **홈(Home)**에서 시작하고, **자동화(Automation)**로 반복 워크플로우를 오케스트레이션하며, **디자인 시스템(Design System)**에서 브랜드 계약서를 다듬고, **플러그인(Plugins)**과 **통합(Integrations)**으로 확장하세요. 모든 프로젝트의 **스튜디오(Studio)** 내부에서는 동일한 디자인 시스템을 통해 프로토타입, 라이브 아티팩트, HyperFrames, 덱, 이미지가 스트리밍됩니다.

### 핵심 페이지

<table>
<tr>
<td valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/home.png" alt="Home page" /> 
홈(Home) — 전체 개요 진입점. 스킬과 디자인 시스템을 선택하고 브리프를 입력하여 한곳에서 모든 것을 시작하세요.
</td>
</tr>
</table>

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/automation.png" alt="Automation page" /> 
자동화(Automation) — 반복되는 디자인 워크플로우를 재사용 가능하고 예약 가능한 자동화로 오케스트레이션합니다.
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/design-system.png" alt="Design System page" /> 
디자인 시스템(Design System) — 팀의 <code>DESIGN.md</code>를 모든 출력 결과물을 좌우하는 브랜드 계약서로 정제합니다.
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/plugin.png" alt="Plugin page" /> 
플러그인(Plugin) — 워크플로우 플러그인을 탐색, 설치 및 배포하여 필요에 따라 생성을 확장합니다.
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/integrations.png" alt="Integrations page" /> 
통합(Integrations) — 외부 시스템 및 MCP 도구를 연결하고, 모든 IDE, 스크립트 또는 자동화에서 Open Design을 사용하세요.
</td>
</tr>
</table>

### 스튜디오(Studio) — 하나의 프로젝트에서 다양한 아티팩트 유형 지원

프로젝트의 스튜디오 내에서 동일한 디자인 시스템을 통해 여러 아티팩트 유형이 스트리밍됩니다:

<table>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-prototype.png" alt="Prototype" /> 
프로토타입(Prototype) — 디자인 시스템을 읽고 샌드박스 처리된 iframe에서 렌더링되는 싱글 페이지 HTML 아티팩트. 즉시 미리보기가 가능하며 소스로 다운로드할 수 있습니다.
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-hyperframe.png" alt="HyperFrame" /> 
HyperFrame — 프로그래밍 방식의 모션 및 애니메이션 그래픽으로, 실제 MP4(예: 1920×1080 · 30fps)로 렌더링됩니다.
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-ppt.png" alt="Deck" /> 
덱(Deck) — 페이지를 넘겨보고, 키보드로 탐색하며, PPTX / PDF로 내보낼 수 있는 피치 덱.
</td>
<td width="50%" valign="top">
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-image.png" alt="Image" /> 
이미지(Image) — 고해상도 생성 및 다운로드를 지원하는 브랜드 등급의 이미지 및 시각 자료.
</td>
</tr>
</table>

---

## 플랫폼 호환성

> Open Design은 주류 코딩 에이전트가 네이티브로 소비하는 **스킬, CLI, MCP 서버**로 제공됩니다. OD가 설치되면 단 하나의 명령어(`od mcp install <agent>`)로 MCP 서버가 해당 에이전트의 설정에 연결되어, 어떤 에이전트 내부에서든 동일한 도구를 호출할 수 있습니다.

| 코딩 에이전트 / 플랫폼 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | 상태 &nbsp;&nbsp; | 한 줄 MCP 서버 설치 명령어 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |
|---|:---:|---|
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ 지원됨 | `od mcp install claude` |
| [Codex CLI](https://github.com/openai/codex) | ✅ 지원됨 | `od mcp install codex` |
| [DeepSeek Reasonix](https://github.com/esengine/DeepSeek-Reasonix) | ✅ 지원됨 | `od mcp install reasonix` |
| [Raven](https://github.com/EverMind-AI/Raven) | ✅ 지원됨 | `od mcp install raven` |
| [Cursor](https://www.cursor.com/cli) | ✅ 지원됨 | `od mcp install cursor` |
| [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ 지원됨 | `od mcp install copilot` |
| [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ 지원됨 | `od mcp install copilot` |
| [OpenCode](https://opencode.ai/) | ✅ 지원됨 | `od mcp install opencode` |
| [OpenClaw](https://github.com/openclaw/openclaw) | ✅ 지원됨 | `od mcp install openclaw` |
| [Antigravity](https://antigravity.google) | ✅ 지원됨 | `od mcp install antigravity` |
| [Cline](https://github.com/cline/cline) | ✅ 지원됨 | `od mcp install cline` |
| [Trae](https://www.trae.ai/) | ✅ 지원됨 | `od mcp install trae` |
| [Kimi CLI](https://github.com/MoonshotAI/kimi-cli) | ✅ 지원됨 | `od mcp install kimi` |
| [Kiro](https://kiro.dev) | ✅ 지원됨 | `od mcp install kiro` |
| [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ 지원됨 | `od mcp install pi` |
| [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ 지원됨 | `od mcp install vibe` |
| [Hermes Agent](https://github.com/nousresearch/hermes-agent) | ✅ 지원됨 | `od mcp install hermes` |

드라이런 미리보기는 `od mcp install <agent> --print` · 제거하려면 `--uninstall` · 전체 목록은 `od mcp install --help`.

**CLI가 설치되어 있지 않나요?** `POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`의 BYOK 프록시를 통해 프로세스 생성 없이 동일한 루프를 사용할 수 있습니다. OpenAI, Atlas Cloud, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM 또는 기타 OpenAI 호환 엔드포인트용 프리셋과 함께 `baseUrl` + `apiKey` + `model`을 붙여넣으세요. Atlas Cloud는 `https://api.atlascloud.ai/v1`과 사용자 고유의 키, 그리고 `qwen/qwen3.5-flash` 같은 OpenAI 호환 모델 ID를 사용합니다. 대상별 SSRF 보호 기능이 데몬 에지에서 내부 IP / 링크 로컬 / CGNAT를 차단합니다.

런타임 정의는 [`apps/daemon/src/runtimes/defs/`](apps/daemon/src/runtimes/defs/)에 있으며, 등록 및 공통 스트림 처리는 [`apps/daemon/src/runtimes/`](apps/daemon/src/runtimes/)에 있습니다. 어댑터 계약에 대해서는 [`docs/agent-adapters.md`](docs/agent-adapters.md)를 참조하세요.

---

## 데모

노트북에서 실행되는 코딩 에이전트가 렌더링하는 4가지 핵심 제품 카테고리입니다. 썸네일을 클릭하여 실제 예시를 확인하세요.

### 1 · 프로토타입 — 웹 · 데스크톱 · 모바일

기본 출력 표면. `DESIGN.md`를 읽고 샌드박스 처리된 iframe에서 렌더링되는 싱글 페이지 HTML 아티팩트.

<table>
<tr>
<td width="50%" valign="top">
<img src="docs/screenshots/01-entry-view.png" alt="Entry view" /> 
진입 뷰(Entry view) — 스킬 선택, 디자인 시스템 선택, 브리프 입력. 프로토타입, 대시보드, 덱, 모바일 앱, 매거진 페이지를 위한 단일 표면.
</td>
<td width="50%" valign="top">
<img src="docs/screenshots/skills/mobile-onboarding.png" alt="Mobile onboarding" /> 
모바일 프로토타입 — 픽셀 단위로 정확한 아이폰 15 프로 크롬, 멀티 스크린 플로우. 에이전트는 전화 프레임을 다시 그리지 않으며, 공유 장치 프레임은 <code>assets/frames/</code>에 있습니다.
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="docs/screenshots/skills/dating-web.png" alt="Web prototype dating-web" /> 
웹 프로토타입 — 스크롤바, KPI, 차트가 포함된 에디토리얼 대시보드. <code>design-templates/dating-web/</code>에서 직접 렌더링됩니다.
</td>
<td width="50%" valign="top">
<img src="docs/screenshots/skills/gamified-app.png" alt="Gamified app" /> 
모바일 앱 프로토타입 — XP 리본과 퀘스트 상세 정보가 포함된 3스크린 게이미피케이션 플로우. Cursor / Codex / Claude Code로 바로 핸드오프하여 React/Next/Vue로 전환하세요.
</td>
</tr>
</table>

### 2 · 라이브 아티팩트 및 대시보드

라이브 대시보드, 의사결정실, KPI 월 — 트윅 패널을 통해 데이터를 가져오고 제자리에서 편집 가능한 상태를 유지하는 싱글 페이지 아티팩트.

<table>
<tr>
<td width="50%" valign="top">
<img src="docs/screenshots/skills/live-dashboard.png" alt="Live dashboard" /> 
라이브 대시보드 — 트윅 패널을 통해 조정할 가치가 있는 매개변수를 표시하는 편집 가능한 KPI 월. 에이전트가 매니페스트를 내보내면 iframe이 새로고침 없이 다시 렌더링됩니다.
</td>
<td width="50%" valign="top">
<img src="docs/screenshots/skills/research-decision-room.png" alt="Decision room" /> 
의사결정실(Decision room) — 제품 / 리서치 / 운영 회의를 위한 다중 소스 브리핑 아티팩트.
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="docs/screenshots/skills/github-dashboard.png" alt="GitHub dashboard" /> 
GitHub 스타일 대시보드 — 라이브 아티팩트로 표현된 리포지토리 메트릭.
</td>
<td width="50%" valign="top">
<img src="docs/screenshots/skills/flowai-live-dashboard-template.png" alt="Flow live dashboard" /> 
Flow 라이브 대시보드 템플릿 — 활성 <code>DESIGN.md</code>를 통해 브랜딩된 도메인별 KPI 템플릿.
</td>
</tr>
</table>

### 3 · 프레젠테이션 덱 — 매거진 덱, 주간 업데이트, 피치

<table>
<tr>
<td width="50%" valign="top">
<img src="docs/screenshots/07-magazine-deck.png" alt="Magazine deck (guizang-ppt)" /> 
덱 모드 (guizang-ppt) — 매거진 레이아웃, WebGL 히어로, P0/P1/P2 체크리스트. 원본 라이선스가 유지된 채 <a href="https://github.com/op7418/guizang-ppt-skill"><code>op7418/guizang-ppt-skill</code></a>에서 그대로 번들링되었습니다.
</td>
<td width="50%" valign="top">
<img src="docs/screenshots/skills/deck-swiss-international.png" alt="Swiss deck" /> 
스위스 인터내셔널 스타일 덱 — 그리드 기반, 모노크롬 악센트. <code>design-templates/html-ppt-*/</code> 하위의 15개 덱 템플릿 및 36개 테마 중 하나.
</td>
</tr>
</table>

모든 덱은 **HTML**(단일 파일, 인라인 에셋), **PDF**(브라우저 인쇄, 덱 인식), **PPTX**(에이전트 구동 스킬), **ZIP**(아카이브) 또는 **Markdown**으로 내보낼 수 있습니다.

### 4 · 이미지 — `gpt-image-2`, ImageRouter, 커스텀 API

<table>
<tr>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776662673014_nf0taw_HGRMNDybsAAGG88.jpg" alt="Illustrated city food map" /> 일러스트 도시 푸드 맵 손으로 그린 에디토리얼 여행 포스터</td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453149026_gd2k50_HHCSvymboAAVscc.jpg" alt="Cinematic elevator scene" /> 시네마틱 엘리베이터 신 싱글 프레임 에디토리얼 스틸</td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453164993_mt5b69_HHDoWfeaUAEA6Vt.jpg" alt="Cyberpunk anime portrait" /> 사이버펑크 초상화 프로필 아바타 — 네온 페이스 텍스트</td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776661968404_8a5flm_HGQc_KOaMAA2vt0.jpg" alt="3D stone staircase evolution" /> 3D 스톤 계단 다듬은 돌 인포그래픽</td>
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453184257_vb9hvl_HG9tAkOa4AAuRrn.jpg" alt="Glamorous portrait" /> 글래머러스 초상화 에디토리얼 스튜디오 샷</td>
</tr>
</table>

[`prompt-templates/`](prompt-templates/)에 **바로 복제해서 사용할 수 있는 93개의 프롬프트**가 포함되어 있습니다 — 미리보기 썸네일, 전체 프롬프트 본문, 타겟 모델, 종횡비, 소스 출처를 제공합니다. 클릭 한 번으로 컴포저에 브리프를 드롭할 수 있습니다.

### 5 · 비디오 및 HyperFrames — 에이전트 네이티브 모션 그래픽

**[HyperFrames][hyperframes]**는 HeyGen의 오픈소스 에이전트 네이티브 비디오 프레임워크로, Open Design에 일등 시민으로 통합되어 있습니다. 에이전트가 HTML + CSS + GSAP를 작성하면, HyperFrames가 헤드리스 크롬(Headless Chrome) + FFmpeg를 통해 결정론적 MP4로 렌더링합니다. 시네마틱 t2v / i2v를 위한 **Seedance 2.0**, 라우팅된 모델 변형을 위한 **Veo 3 / Sora 2 / Kling 2**, 오디오 레이어를 위한 **Suno v5 / Lyria 2**와 함께 사용하세요.

<table>
<tr>
<td width="25%" valign="top"><a href="prompt-templates/video/hyperframes-saas-product-promo-30s.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" alt="SaaS promo" /></a> 30초 SaaS 제품 프로모션 · 16:9 · UI 3D 리빌</td>
<td width="25%" valign="top"><a href="prompt-templates/video/hyperframes-tiktok-karaoke-talking-head.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" alt="TikTok karaoke" /></a> 틱톡 가라오케 토킹 헤드 · 9:16 · TTS + 단어 동기화 자막</td>
<td width="25%" valign="top"><a href="prompt-templates/video/hyperframes-brand-sizzle-reel.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Brand sizzle reel" /></a> 30초 브랜드 시즐 릴 · 16:9 · 오디오 반응형 키네틱 타입</td>
<td width="25%" valign="top"><a href="prompt-templates/video/hyperframes-data-bar-chart-race.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" alt="Bar chart race" /></a> 바 차트 레이스 · 16:9 · NYT 스타일 데이터 인포그래픽</td>
</tr>
<tr>
<td width="25%" valign="top"><a href="prompt-templates/video/hyperframes-flight-map-route.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" alt="Flight map" /></a> 비행 경로 맵 · 16:9 · 애플 스타일 경로 리빌</td>
<td width="25%" valign="top"><a href="prompt-templates/video/hyperframes-logo-outro-cinematic.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Logo outro" /></a> 4초 시네마틱 로고 아웃트로 · 16:9 · 조립식 파츠 + 블룸</td>
<td width="25%" valign="top"><a href="prompt-templates/video/hyperframes-money-counter-hype.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" alt="Money counter" /></a> $0 → $10K 돈 세는 애니메이션 · 9:16 · 애플 스타일 하이프</td>
<td width="25%" valign="top"><a href="prompt-templates/video/hyperframes-website-to-video-promo.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" alt="Website to video" /></a> 웹사이트 투 비디오 · 16:9 · 3개 뷰포트에서 사이트 캡처</td>
</tr>
</table>

11개의 HyperFrames 템플릿과 39개의 Seedance 프롬프트가 리포지토리에 포함되어 제공됩니다. 카탈로그 썸네일 © HeyGen; 프레임워크는 Apache-2.0입니다. OD 전용 렌더 워크플로우(컴포지션 캐시, 샌드박스 실행 우회, 칩 형태의 MP4)는 [`design-templates/hyperframes/`](design-templates/hyperframes/)에 자세히 설명되어 있습니다.

[hyperframes]: https://github.com/heygen-com/hyperframes

---

## 왜 Open Design인가요?

> **2026년 4월, Anthropic은 LLM이 단순히 텍스트를 작성하는 것을 넘어 디자인 아티팩트를 직접 전달하는 최초의 제품인 Claude Design을 출시했습니다.** 이는 큰 화제를 모았습니다. 하지만 소스 코드가 공개되지 않고(closed-source), 유료 전용이며, 클라우드 전용이고, Anthropic의 모델, Anthropic의 스킬, Anthropic의 표면에만 락인(lock-in)되어 있었습니다. 결제 방식 변경, 셀프 호스팅, Vercel 배포, 자체 에이전트로의 교체가 불가능했습니다.

Open Design(OD)은 오픈소스 대안입니다. 동일한 루프, 동일한 아티팩트 우선 멘탈 모델을 제공하면서 락인은 전혀 없습니다:

- 🤖 **에이전트 네이티브, 모델 중립적.** 저희는 에이전트를 별도로 배포하지 않습니다. 여러분의 `PATH`에 이미 존재하는 `claude` / `codex` / `cursor-agent` / `copilot` / `hermes` / `kimi`가 디자인 엔진입니다. 클릭 한 번으로 전환하세요.
- 🧠 **기본적으로 브랜드 등급 준수.** 모든 렌더링은 활성 패키지의 `DESIGN.md`를 핵심 브랜드 계약서로 읽어들입니다. 151개의 디자인 시스템 패키지가 리포지토리에 포함되어 제공됩니다. 레거시 패키지는 `DESIGN.md`만 포함할 수 있는 반면, 최신 패키지는 `manifest.json`, `tokens.css`, 컴포넌트, 에셋, 출처 정보를 추가할 수 있습니다. 폴더를 드롭하기만 하면 피커가 찾아냅니다.
- 🖥️ **로컬 우선, 모든 레이어에서 BYOK 지원.** macOS(애플 실리콘 + 인텔) 및 Windows(x64)용 네이티브 데스크톱 앱. 옵션 릴리스 레인으로 Linux AppImage 제공. 제품 분석 및 세션 리플레이는 동의 기반이며, 민감 정보가 마스킹된 안전성 및 신뢰성 텔레메트리는 항상 켜져 있습니다. 데몬 데이터 경로를 설명하기 전에 기여자 및 운영자는 반드시 `AGENTS.md` → **Daemon data directory contract**를 읽어야 합니다. 이 README는 이를 재서술하지 않습니다.
- 🌍 **4가지 평면에서의 조합 가능성.** **플러그인**은 실행 가능한 워크플로우를 담고 · 기능적 **스킬**은 에이전트 동작을 담고 · **디자인 템플릿**은 렌더링 청사진을 담고 · **디자인 시스템**은 브랜드를 담습니다. 이 네 가지 모두 누구나 작성하고 배포할 수 있는 이식성 있고 버저닝 가능한 디렉토리를 사용합니다.
- 🔁 **기존 코드베이스 새로고침.** `git` 리포지토리 + `DESIGN.md`를 에이전트에 전달하면 실제 컴포넌트가 브랜드 사양에 맞게 리팩토링됩니다. 전용 플러그인을 통해 Figma / Pencil 워크플로우를 React / Next.js / Vue 코드로 마이그레이션할 수 있습니다.
- 🔒 **신념에 기반한 프라이버시.** 모든 작업은 여러분의 데이터가 있는 곳(노트북, 팀의 서버, Vercel 프로젝트)에서 실행됩니다. 네트워크가 필요한 경우 BYOK 프록시가 SSRF로부터 보호됩니다.

### 비교

| | Claude Design | Figma | Lovable / v0 / Bolt | **Open Design** |
|---|---|---|---|---|
| 오픈소스 | ❌ | ❌ | ❌ | **✅ Apache-2.0** |
| 셀프 호스팅 / 데스크톱 | ❌ | ❌ | ❌ | **✅ macOS + Windows + Docker + Vercel 웹** |
| 에이전트 네이티브 (CLI에서 실행) | Anthropic 전용 | ❌ | 클라우드 에이전트 전용 | **✅ 25개 CLI + BYOK** |
| 브랜드 등급 `DESIGN.md` | 독점 | 테마 JSON | 제한된 토큰 | **✅ 151개 시스템 탑재** |
| 스킬 / 플러그인 / 템플릿 | 폐쇄형 | 플러그인 스토어 | 폐쇄형 | **✅ 100개 이상의 기능적 스킬 · 렌더링 템플릿 · 277개 플러그인** |
| HyperFrames (HTML→MP4) | ❌ | ❌ | ❌ | **✅ 일등 시민 지원** |
| 기존 레포를 브랜드에 맞게 새로고침 | ❌ | ❌ | ❌ | **✅ 에이전트 + `DESIGN.md` 활용** |
| 최소 과금 기준 | Pro / Max / Team | Pro / Org | Pro / Team | **BYOK · 호환되는 모든 엔드포인트** |

---

## 빠른 시작

### 🖥️ 데스크톱 앱 다운로드 (권장 — 제로 설정)

Open Design을 사용하는 가장 빠른 방법. Node, pnpm, git clone이 필요 없습니다.

- **macOS** (애플 실리콘 · 인텔 x64) → [**open-design.ai**](https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download_macos) 또는 [GitHub Releases](https://github.com/nexu-io/open-design/releases)
- **Windows** (x64) → [**open-design.ai**](https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download_windows) 또는 [GitHub Releases](https://github.com/nexu-io/open-design/releases)
- **Linux** (AppImage, 옵션 레인) → [GitHub Releases](https://github.com/nexu-io/open-design/releases)

설치 후: 앱이 `PATH` 상의 모든 코딩 에이전트 CLI를 자동으로 감지하고, 100개 이상의 기능적 스킬, 별도의 렌더링 템플릿 카탈로그, 151개의 디자인 시스템을 로드하며, 진입 뷰에서 브리프를 입력할 수 있게 해줍니다.

### 🤖 코딩 에이전트에 설치 (UI 없음)

GUI를 전혀 열지 않고도 Open Design을 사용할 수 있습니다. Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi 등에서 스킬, 플러그인, MCP 서버로 호출하세요.

DMG나 Homebrew cask를 통해 macOS 데스크톱 앱을 설치한 경우, 셸이
여전히 `od`를 Apple의 기본 내장 `/usr/bin/od` 8진수 덤프 유틸리티로 해석할 수 있습니다.
이 경우 데스크톱 앱에서 **설정(Settings) → MCP 서버**를 열고
클라이언트 전용 스니펫을 복사하세요. 절대 경로를 사용하므로 기본 `od` 명령어에
의존하지 않습니다.

# curl 기반 설정을 위한 호스팅된 동등 명령어:
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
```

`install.sh`는 `od mcp install`을 감싸는 얇은 셸 래퍼입니다. 호스팅된 URL이 랜딩 페이지 HTML 폴백 대신 셸을 반환하도록 하고, 셸이 Open Design이 아닌 `od` 바이너리를 해결할 경우 빠르게 실패하도록 하기 위해 존재합니다.

> **macOS / WSL2 사용자:** `/usr/bin/od`는 시스템 8진수 덤프 명령어이므로 Open Design의 `od` 명령어를 덮어쓸(shadow) 수 있습니다. 데스크톱 앱 사용자는 **설정(Settings) → MCP 서버** 스니펫을 사용하는 것을 선호해야 하며, WSL2 사용자는 먼저 [`WSL2 설정 가이드`](docs/wsl-setup.md)를 따라야 합니다.

그 후, 에이전트 내부에서 다음과 같이 입력하세요:

```
> Use open-design to generate a landing page with the Linear design system
```

파일 시스템 기반의 로컬 CLI 실행에서 에이전트는 선택한 기능적 스킬 또는 디자인 시스템 템플릿을 `DESIGN.md`와 결합하고, 정식 프로젝트 파일을 작성하며, Open Design이 해당 파일을 미리보기로 보여줍니다. 파일 시스템 도구가 없는 BYOK/일반 API 실행은 대신 하나의 완전한 `<artifact>` 블록을 반환합니다.

### 🐳 Docker로 실행

```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# http://localhost:7456 열기
```

> **macOS 사용자:** 웹 UI에 `Authorization: Bearer <OD_API_TOKEN> required`가 표시되는 경우 Docker Desktop 브리지 네트워크가 원인입니다. 해결 방법은 [macOS의 Docker Desktop](deploy/README.md#docker-desktop-on-macos)을 참조하세요.

### 🚀 Sealos에 배포

[![Sealos에 배포](https://sealos.io/Deploy-on-Sealos.svg)](https://sealos.io/products/app-store/open-design/)

Sealos 앱 스토어 템플릿은 퍼블릭 프록시에서 영구 워크스토리지 및 기본 인증(Basic Auth)이 포함된 게시된 Open Design Docker 이미지를 실행합니다. 커스텀 퍼블릭 또는 공유 Docker 배포의 경우 [`deploy/README.md`](deploy/README.md#local-compose)의 리버스 프록시 및 `OPEN_DESIGN_ALLOWED_ORIGINS` 안내를 따르세요.

### 🧑‍💻 소스코드로부터 실행

```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web
```

`tools-dev`가 출력한 URL을 엽니다. 명시적 포트 플래그를 전달하지 않는 한 개발 포트는 동적으로 할당됩니다.

Node `~24`, pnpm `10.33.x`. WSL2 사용자는 [`docs/wsl-setup.md`](docs/wsl-setup.md)를 참조하고, 네이티브 Windows 사용자는 [`docs/windows-troubleshooting.md`](docs/windows-troubleshooting.md)를 참조하세요. 전체 빠른 시작, 환경 변수, Nix 플레이크, 패키지 빌드 플로우 → [`QUICKSTART.md`](QUICKSTART.md).

### 전체 워크플로우 — 브리프부터 아티팩트까지

`brief → plugin → direction → design system → artifact → handoff → memory`

1. **PM이 브리프를 제출합니다.** 플러그인 피커가 랜딩 페이지 · 피치 덱 · 대시보드 · 소셜 포스트 · PM 스펙 · OKR 스코어카드를 제안합니다.
2. **디자이너(또는 에이전트)가 방향성을 확정합니다.** 브랜드가 없나요? 5가지 엄선된 방향성 중에서 선택하세요. 브랜드가 있나요? 스크린샷 / URL을 드롭하세요. 에이전트가 GitHub에 연결하고, Figma를 가져와서 재사용 가능한 `DESIGN.md`를 코드시킵니다.
3. **에이전트가 첫 번째 산출물을 생성합니다.** 플러그인 + 기능적 스킬 또는 디자인 템플릿 + `DESIGN.md`가 바인딩됩니다. 파일 시스템 기반 CLI 실행은 정식 프로젝트 파일을 작성하고 미리보기가 이를 따르며, 파일 도구가 없는 BYOK/일반 API 실행은 하나의 완전한 `<artifact>` 블록을 반환합니다.
4. **엔지니어링으로 핸드오프합니다.** 아티팩트는 실제 HTML/CSS입니다 — Cursor, Codex 또는 Claude Code에 드롭하여 코드로 계속 빌드하세요. 혹은 PPTX / PDF / MP4를 마케팅 팀에 바로 내보내세요.
5. **Open Design은 사용할수록 더 똑똑해집니다.** 여러분의 스크린샷, 폰트, 팔레트, 확정된 아티팩트가 다음 세션의 기본값으로 축적됩니다. 재작업은 줄어들고 방향 이탈은 방지됩니다.

---

## 코딩 에이전트에서 Open Design 사용하기

Open Design은 **stdio MCP 서버**와 에이전트별 **설치 스크립트**를 제공합니다. 다른 리포지토리에 있는 MCP 호환 에이전트는 로컬 Open Design 프로젝트의 파일(토큰 CSS, JSX 컴포넌트, 진입 HTML)을 이름으로 쿼리 가능한 구조화된 API로 직접 읽을 수 있습니다. 에이전트는 오래된 내보내기 파일이 아닌 라이브 파일을 항상 보게 됩니다.

```bash
# 한 줄 설치 (16개 이상의 CLI 지원):
od mcp install <agent>

# 이후 에이전트가 다음을 수행할 수 있습니다:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json
```

**왜 MCP인가요?** 매 반복마다 zip 파일을 내보내고 다시 첨부하는 방식은 흐름을 끊습니다. MCP는 디자인 소스를 직접 노출하므로 에이전트는 항상 라이브 파일을 볼 수 있습니다.

**처음부터 시작하는 에이전트의 경우,** 설치 프로그램이 `~/.config/<agent>/open-design.json`(또는 플랫폼에 상응하는 경로)과 복사-붙여넣기용 MCP 스니펫을 배치합니다. Cursor는 원클릭 딥링크를 지원하며, Claude Code는 `claude mcp add-json` 한 줄 명령어를 제공하고, 다른 모든 에이전트는 설정에 필요한 스키마의 JSON을 받습니다. macOS 데스크톱 설치 시 터미널에서 순수 `od mcp install <agent>`를 입력하는 것보다 해당 설정 스니펫을 선호해야 합니다. PATH상에서 `/usr/bin/od`가 우선순위를 가질 수 있기 때문입니다. 에이전트별 전체 플로우 → 데스크톱 앱의 **설정(Settings) → MCP 서버** 또는 [`docs/agent-adapters.md`](docs/agent-adapters.md).

**보안 모델.** 기본적으로 읽기 전용이며, 데몬은 `127.0.0.1`에 바인딩되고, 프록시 에지에서 SSRF가 차단됩니다. LAN 노출에는 명시적인 `OD_BIND_HOST`와 `OD_ALLOWED_ORIGINS`가 필요합니다. 커넥터 자격 증명과 라이브 아티팩트 미리보기 라우트는 설정과 관계없이 루프백 전용으로 유지됩니다.

**내부 호스팅 모델 엔드포인트.** SSRF를 방지하기 위해 데몬은 기본적으로 비공개/내부 주소 범위(RFC1918, 링크 로컬, CGNAT 및 클라우드 메타데이터 IP)로 확인되는 공급자 기본 URL을 차단하며 `Internal IPs blocked`를 반환합니다. VPN 전용 `10.x`/`192.168.x` 주소에서 내부 호스팅 게이트웨이(예: LiteLLM 또는 Ollama)를 실행하는 경우, `OD_ALLOWED_INTERNAL_HOSTS=<host1>,<host2>,...`를 사용하여 해당 호스트를 예외 처리할 수 있습니다. 이는 쉼표 또는 공백으로 구분된 순수 호스트 이름 또는 IP 목록입니다(`10.0.0.5`, `litellm.internal.corp`; `host:port` 또는 전체 URL도 허용되며 호스트 이름으로 축소됩니다. IPv6는 괄호로묶어야 합니다. 예: `[fd00::1]`). 이 허용 목록은 엄격한 옵트인(기본값은 비어 있음)이며, 정확한 호스트 일치(서브도메인/부분 문자열 일치 없음) 방식으로 작동하고, 사용자가 구성한 공급자 엔드포인트(연결 테스트, 모델 검색, BYOK 채팅)에만 **적용**됩니다. 업스트림 응답 내부에 반환되어 차단된 상태로 유지되는 다운로드 URL에 대한 가드는 의도적으로 완화하지 **않습니다**. 형식이 잘못된 항목이나 지원되지 않는 CIDR 표기법은 조용히 신뢰하는 대신 경고와 함께 드롭되므로, 오타로 인해 가드가 의도치 않게 넓어지거나(또는 넓어지지 않거나) 하는 일이 없습니다. 호스트 이름을 허용 목록에 등록하면 (`OD_ALLOWED_ORIGINS`처럼) 해당 호스트가 확인하는 모든 주소를 신뢰하게 됩니다. DNS로 해결된 주소를 다시 확인하려면 대신 해결된 IP를 허용 목록에 등록하세요.

---

## 스킬 및 디자인 템플릿

**100개 이상의 기능적 스킬이 [`skills/`](skills/)에 포함되어 제공됩니다**. 각 스킬은 Agent Skills [`SKILL.md`][skill] 컨벤션을 따르며 재사용 가능한 에이전트 동작, 참조 또는 유틸리티를 제공합니다. 렌더링 가능한 스타터는 [`design-templates/`](design-templates/)에 별도로 위치합니다. 이들도 `SKILL.md`를 사용할 수 있지만, 기능적 스킬 레지스트리가 아닌 디자인 템플릿 카탈로그를 채웁니다.

두 가지 **모드**가 디자인 템플릿 카탈로그를 지탱합니다: `prototype`(웹/모바일/데스크톱 싱글 페이지 아티팩트) 및 `deck`(수평 스와이프 프레젠테이션). 다른 템플릿들은 `image`, `video`, `audio` 및 유틸리티 표면을 다룹니다. **`scenario`** 필드는 대상별로 템플릿을 그룹화합니다: `design` · `marketing` · `operation` · `engineering` · `product` · `finance` · `hr` · `sale` · `personal`.

| 디자인 템플릿 | 모드 | 시나리오 | 생성 내용 |
|---|---|---|---|
| [`web-prototype`](design-templates/web-prototype/) | prototype | design | 기본 랜딩 페이지 / 히어로 |
| [`saas-landing`](design-templates/saas-landing/) | prototype | marketing | 히어로 / 기능 / 가격 / CTA |
| [`dashboard`](design-templates/dashboard/) | prototype | operation | 관리자 / 분석 (사이드바 포함) |
| [`mobile-app`](design-templates/mobile-app/) | prototype | design | 아이폰 15 프로 / 픽셀 프레임 앱 |
| [`mobile-onboarding`](design-templates/mobile-onboarding/) | prototype | design | 스플래시 · 가치 제안 · 로그인 플로우 |
| [`social-carousel`](design-templates/social-carousel/) | prototype | marketing | 3카드 1080×1080 캐러셀 |
| [`email-marketing`](design-templates/email-marketing/) | prototype | marketing | 테이블 폴백 안전 브랜드 이메일 |
| [`magazine-poster`](design-templates/magazine-poster/) | prototype | marketing | 싱글 페이지 매거진 레이아웃 |
| [`motion-frames`](design-templates/motion-frames/) | prototype | marketing | 반복되는 CSS 모션 히어로 |
| [`sprite-animation`](design-templates/sprite-animation/) | prototype | marketing | 8비트 픽셀 애니메이션 설명 자료 |
| [`pm-spec`](design-templates/pm-spec/) | prototype | product | PM 사양 문서 (TOC + 결정 로그 포함) |
| [`team-okrs`](design-templates/team-okrs/) | prototype | product | OKR 스코어카드 |
| [`eng-runbook`](design-templates/eng-runbook/) | prototype | engineering | 인시던트 런북 |
| [`finance-report`](design-templates/finance-report/) | prototype | finance | 임원 재무 요약 |
| [`hr-onboarding`](design-templates/hr-onboarding/) | prototype | hr | 직무 온보딩 계획 |
| [`guizang-ppt`](design-templates/guizang-ppt/) | deck | marketing | 매거진 스타일 웹 PPT (덱 기본값) |
| [`html-ppt-*`](design-templates/) | deck | marketing | 15개 덱 템플릿 × 36개 테마 ([`design-templates/html-ppt/`](design-templates/html-ppt/)의 마스터 템플릿) |
| [`hyperframes`](design-templates/hyperframes/) | video | marketing | HTML → MP4 모션 그래픽 (HeyGen OSS 프레임워크) |
| [`critique`](design-templates/critique/) | utility | design | 5차원 자체 비평 스코어시트 |
| [`tweaks`](design-templates/tweaks/) | utility | design | AI가 생성하는 트윅 패널 매니페스트 |

전체 프로토콜 및 디렉토리 분할 → [`docs/skills-protocol.md`](docs/skills-protocol.md). 레지스트리 엔드포인트: 기능적 스킬의 경우 `GET /api/skills`, 렌더링 템플릿의 경우 `GET /api/design-templates`.

---

## 디자인 시스템

**`DESIGN.md`를 중심으로 하는 151개의 브랜드 등급 디자인 시스템 패키지**가 리포지토리에 포함되어 제공됩니다. 레거시 패키지는 해당 마크다운 계약만 포함할 수 있으며, 최신 패키지는 `manifest.json`, 컴파일된 `tokens.css`, 컴포넌트 픽스처, 에셋, 출처 증적 자료를 함께 담을 수 있습니다. 카탈로그는 업스트림 파생 시스템과 프로젝트 자체 추가 시스템이 혼합되어 있습니다. [`design-systems/README.md`](design-systems/README.md)에 패키지 형태와 출처가 기록되어 있습니다. 시스템을 전환하면 다음 렌더링부터 새로운 토큰이 사용됩니다.

**AI & LLM** — `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai`

**Developer Tools** — `cursor` · `vercel` · `linear-app` · `framer` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `webflow` · `sanity` · `mintlify` · `lovable` · `composio` · `opencode-ai` · `voltagent`

**Productivity** — `notion` · `figma` · `miro` · `airtable` · `superhuman` · `intercom` · `zapier` · `cal` · `clay` · `raycast`

**Fintech** — `stripe` · `coinbase` · `binance` · `kraken` · `mastercard` · `revolut` · `wise`

**E-commerce** — `shopify` · `airbnb` · `uber` · `nike` · `starbucks` · `pinterest`

**Media** — `spotify` · `playstation` · `wired` · `theverge` · `meta`

**Automotive** — `tesla` · `bmw` · `ferrari` · `lamborghini` · `bugatti` · `renault`

**Other** — `apple` · `ibm` · `nvidia` · `vodafone` · `resend` · `spacex`

**Starters** — `default` (Neutral Modern) · `warm-editorial`

</details>

[`scripts/sync-design-systems.ts`](scripts/sync-design-systems.ts)를 통해 라이브러리를 다시 가져올 수 있습니다. 자체 브랜드 추가 → `design-systems/<brand>/`에 `DESIGN.md`를 드롭하세요. 전체 가이드 → [`design-systems/README.md`](design-systems/README.md).

[acd2]: https://github.com/VoltAgent/awesome-design-md

---

## 플러그인

**277개의 공식 플러그인과 183개의 리믹스 가능한 레퍼런스 예시**가 [`plugins/_official/`](plugins/_official/)에 있습니다. 각 항목은 `open-design.json`과 유형에 필요한 페이로드로 구성된 이식 가능한 플러그인 디렉토리입니다. 예를 들어 에이전트 워크플로우용 `SKILL.md`, 미디어 템플릿용 `template.json`, 또는 디자인 시스템 항목용 `DESIGN.md` 등이 있습니다. 카테고리별로 바로 이동하기:

| 카테고리 | 개수 | 내용물 |
|---|---|---|
| [`scenarios/`](plugins/_official/scenarios/) | 13 | 전체 디자인 시나리오 — [`od-default`](plugins/_official/scenarios/od-default/), [`od-design-refine`](plugins/_official/scenarios/od-design-refine/), [`od-figma-migration`](plugins/_official/scenarios/od-figma-migration/), [`od-code-migration`](plugins/_official/scenarios/od-code-migration/), [`od-react-export`](plugins/_official/scenarios/od-react-export/), [`od-nextjs-export`](plugins/_official/scenarios/od-nextjs-export/), [`od-vue-export`](plugins/_official/scenarios/od-vue-export/), [`od-media-generation`](plugins/_official/scenarios/od-media-generation/), [`od-new-generation`](plugins/_official/scenarios/od-new-generation/), [`od-tune-collab`](plugins/_official/scenarios/od-tune-collab/), [`od-plugin-authoring`](plugins/_official/scenarios/od-plugin-authoring/), [`od-share-to-community`](plugins/_official/scenarios/od-share-to-community/), [`od-web-effect-extractor`](plugins/_official/scenarios/od-web-effect-extractor/) |
| [`image-templates/`](plugins/_official/image-templates/) | 45 | 원샷 이미지 프롬프트 — 에디토리얼, 시네마틱, 제품, 초상화 |
| [`video-templates/`](plugins/_official/video-templates/) | 63 | HyperFrames / Seedance / Veo 모션 템플릿 |
| [`design-systems/`](plugins/_official/design-systems/) | 143 | 플러그인으로 포장된 브랜드 `DESIGN.md` |
| [`atoms/`](plugins/_official/atoms/) | 13 | 재사용 가능한 UI 조각 (버튼, 히어로, KPI 카드) |
| [`examples/`](plugins/_official/examples/) | 183 | 리믹스 가능한 레퍼런스 출력 결과물 |

또한 커뮤니티 플러그인을 위한 [`plugins/community/`](plugins/community/)와 배포 플로우를 위한 [`plugins/registry/`](plugins/registry/)가 있습니다.

### 플러그인의 기능

- 🤖 **모든 코딩 에이전트에서 실행** — 에이전트가 이미 알고 있는 동일한 스킬 프로토콜을 통해 [Claude Code](docs/agent-adapters.md), Codex, Cursor, Copilot, [OpenClaw](https://github.com/openclaw/openclaw), [Antigravity](https://antigravity.google), Hermes, Kimi 등에서 작동합니다.
- 🔁 **Figma / Pencil 워크플로우 마이그레이션** → React, Next.js 또는 Vue 소스 코드로 변환. [`od-figma-migration`](plugins/_official/scenarios/od-figma-migration/)을 참조하세요.
- 🛠️ **기존 코드베이스를 브랜드 사양으로 새로고침** — 플러그인을 `git` 리포지토리 + `DESIGN.md`에 지정하면 PR이 생성됩니다. [`od-code-migration`](plugins/_official/scenarios/od-code-migration/)을 참조하세요.
- 💾 **커스텀 워크플로우 영구 보존** — 팀의 재사용 가능한 템플릿이 기본 제공 템플릿과 함께 유지됩니다.

### 플러그인 사용하기

플러그인은 **웹 UI**와 **`od` CLI** 간에 완전한 동등성을 가집니다 — 동일한 `/api/plugins` 엔드포인트를 사용하므로 편한 쪽을 선택하세요.

**데스크톱 / 웹 앱에서:** **플러그인(Plugin)** 페이지를 열어 마켓플레이스를 탐색하고 **설치(Install)**를 클릭합니다. 프로젝트의 스튜디오 내에서는 플러그인이 적용하기 위해 클릭하는 컴포저 칩으로 표시됩니다(선언된 입력값과 함께).

**명령줄에서** (UI 없이 실행 — 외부 에이전트가 사용하는 경로입니다):

```bash
od plugin list                       # 설치된 플러그인 목록 표시 (--task-kind / --mode / --tag 필터)
od plugin search "landing page"      # 키워드로 검색
od plugin info od-default            # 플러그인의 메타데이터, 입력값, 기능 검사
od plugin install od-figma-migration # 레지스트리에서 설치; ./local-folder 또는 https://… 링크도 허용됨
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default         # 업그레이드
od plugin uninstall od-default       # 제거
```

모든 명령어는 `--json`을 지원하므로 `jq` / `xargs`를 통해 자동화 파이프라인으로 파이프할 수 있습니다.

### 플러그인 만들기

Open Design 플러그인은 `open-design.json`과 유형에 필요한 페이로드를 필요로 합니다. 워크플로우 스킬이나 시나리오는 `SKILL.md`도 포함하며, 매니페스트 전용 템플릿 및 디자인 시스템 항목은 대신 자체 페이로드를 사용합니다:

```
my-plugin/
├── open-design.json    ← 필수: 마켓플레이스 메타데이터 + 입력값 + 파이프라인 + 기능
├── SKILL.md            ← 에이전트 스킬/시나리오 항목에 필수; 다른 플러그인 유형에서는 생략
├── README.md           ← 선택 사항: 사용법, 설치, 레지스트리 링크
├── preview/            ← 선택 사항: index.html / poster.png (시각적 플러그인에 강력히 권장)
└── examples/           ← 선택 사항: 구체적인 사용 사례
```

핵심 `open-design.json` 필드: `specVersion`(현재 `1.0.0`), `name`(안정적인 ID), `version`(시멘틱 버저닝), 선택 사항인 `compat.agentSkills[].path`(항목이 에이전트 스킬을 노출할 때 `./SKILL.md`를 가리킴), `od.kind`(`skill` / `scenario` / `atom` / `bundle`), `od.taskKind`(`new-generation` / `figma-migration` / `code-migration` / `tune-collab`), `od.mode`(출력 표면, 예: `prototype` / `deck` / `live-artifact` / `image` / `video` / `hyperframes` / `audio` / `design-system` / `scenario`), `od.capabilities[]`(**최소한만 선언**하세요 — 제한된 설치는 기본적으로 `prompt:inject`만 부여합니다), `od.inputs[]` (적용 시점 매개변수).

로컬에서 스캐폴드 및 검증:

```bash
od plugin scaffold --id my-plugin --title "My Plugin"   # 스켈레톤 생성
od plugin validate ./my-plugin                          # 매니페스트 / 파일 레이아웃 검사
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck
```

전체 필드 세트 및 런타임 계약 → [`plugins/spec/SPEC.md`](plugins/spec/SPEC.md); 코딩 에이전트로 플러그인 개발하기 → [`plugins/spec/AGENT-DEVELOPMENT.md`](plugins/spec/AGENT-DEVELOPMENT.md); 복사-붙여넣기용 최소 템플릿 → [`plugins/spec/examples/`](plugins/spec/examples/).

### 플러그인 기여하기

1. 플러그인 폴더를 [`plugins/community/`](plugins/community/)(서드파티 플러그인)에 넣거나, Open Design에 번들로 포함시키려면 [`plugins/_official/`](plugins/_official/)의 일치하는 계층에 넣습니다.
2. 검증 통과: `od plugin validate`, `pnpm guard`, `pnpm --filter @open-design/plugin-runtime typecheck`.
3. [`plugins/spec/CONTRIBUTING.md`](plugins/spec/CONTRIBUTING.md)의 템플릿을 사용하여 PR 작성 (ID, 버전, 레인, 모드, 기능, 트리거 예시; 시각적 플러그인의 경우 스크린샷 / 미리보기 첨부).
4. 외부 레지스트리(skills.sh / ClawHub / 독립형 GitHub)에 배포하려면 → [`plugins/spec/PUBLISHING-REGISTRIES.md`](plugins/spec/PUBLISHING-REGISTRIES.md).

플러그인 레지스트리 엔드포인트: `GET /api/plugins`. 디렉토리 개요 → [`plugins/README.md`](plugins/README.md) ([简体中文](plugins/README.zh-CN.md)).

---

## 아키텍처

```
┌────────────────── 브라우저 (Next.js 16) / 일렉트론 셸 ──────────────┐
│  채팅 · 파일 워크스페이스 · iframe 미리보기 · 설정 · 가져오기 · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  로컬 데몬 (Express+SQLite)      │   ─→ OpenAI 호환 모든 BYOK,
   │                                  │       에지에서 SSRF 보호
   │  /api/skills    /api/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio 서버                 │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: 관리되는 프로젝트 cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  로컬 런타임 정의는 runtimes/registry.ts에서 가져옵니다;             │
   │  기본 레지스트리에는 (byok-opencode 포함) 26개의 정의가 있으며,     │
   │  byok-opencode가 OpenCode 실행 파일을 공유하므로 25개의 개별      │
   │  로컬 CLI 실행 파일로 뒷받침됩니다. docs/agent-adapters.md 참조.   │
   │  기능적 스킬 또는 디자인 템플릿 + DESIGN.md를 조합하여 파일 작성 │
   └──────────────────────────────────────────────────────────────────┘
```

| 레이어 | 스택 |
|---|---|
| 프론트엔드 | Next.js 16 App Router + React 18 + TypeScript |
| 데몬 | Node 24 · Express · SSE 스트리밍 · `better-sqlite3` |
| 스토리지 | 데몬 스토리지 경로를 변경하거나 문서화하기 전에 반드시 `AGENTS.md` → **Daemon data directory contract**를 읽어야 합니다. 이 README는 이를 재서술하지 않습니다. |
| 미리보기 | 파일 시스템 실행은 정식 프로젝트 파일을 렌더링하고, BYOK/일반 API 실행은 하나의 완전한 `<artifact>` 블록을 샌드박스 처리된 `srcdoc` iframe으로 파싱합니다. |
| 내보내기 | HTML (인라인) · PDF (브라우저 인쇄) · PPTX (에이전트 구동) · ZIP · Markdown · MP4 (HyperFrames) |
| 데스크톱 | 일렉트론 셸 + 샌드박스 처리된 렌더러 + 사이드카 IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN) |
| 라이프사이클 | 단일 진입점: `pnpm tools-dev` (시작 / 중지 / 실행 / 상태 / 로그 / 검사 / 확인) |

전체 아키텍처 → [`docs/architecture.md`](docs/architecture.md). 스킬 프로토콜 → [`docs/skills-protocol.md`](docs/skills-protocol.md). 에이전트 어댑터 계약 → [`docs/agent-adapters.md`](docs/agent-adapters.md).

---

## 로드맵

- [x] 데몬 + 25개의 개별 코딩 에이전트 CLI 실행 파일 전반의 26개 런타임 정의 + 스킬/디자인 템플릿 레지스트리 + 디자인 시스템 카탈로그
- [x] 웹 앱 + 채팅 + 질문 양식 + 5방향 피커 + 할 일 진행 상태 + 샌드박스 미리보기
- [x] 100개 이상의 기능적 스킬 · 별도의 렌더링 템플릿 카탈로그 · 151개 디자인 시스템 패키지 · 5가지 시각적 방향성 · 5가지 기기 프레임
- [x] SQLite 기반 프로젝트 · 대화 · 메시지 · 탭 · 템플릿
- [x] Atlas Cloud를 포함한 OpenAI 호환 프리셋과 SSRF 가드가 포함된 다중 공급자 BYOK 프록시 (`/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`)
- [x] Claude Design ZIP 가져오기 (`/api/import/claude-design`)
- [x] 사이드카 프로토콜 + 일렉트론 데스크톱 + IPC 자동화
- [x] 아티팩트 린트 API + 방출 전 5차원 자체 비평 게이트
- [x] **0.8.0** — 플러그인 마켓플레이스 인프라 (261개 공식 플러그인, 매니페스트 사양, 에이전트별 설치 스크립트)
- [x] **0.9.0** — Open Design Cloud (앱 내에 내장된 공식 모델 서비스: 제로 설정, 원클릭 로그인)
- [x] **0.10.0** — 올인원 디자인 워크스페이스: 하나의 창에서 이루어지는 전체 제작 루프 (참조 → 소재 → 인터랙티브 편집 → 모션 → 핸드오프)
- [x] **0.11.0** — _The Bazaar_: 오픈 상태로 빌드됨 — 누구나 선택하고 기여할 수 있는 플러그인 및 디자인 시스템 커뮤니티 마켓플레이스
- [x] **0.12.0** — _Brand-backed Design System_: 이미 보유한 브랜드를 재사용 가능하고 이식 가능한 `DESIGN.md` 시스템으로 전환
- [x] **0.13.0** — _Stay in Flow_: 네이티브 세션 재개, 더 빠른 모델 선택, 스크린샷 기반 PPTX / PDF로 바로 내보내기
- [x] 패키지화된 일렉트론 빌드 — macOS(애플 실리콘 + 인텔) + Windows(x64) + Linux AppImage(옵션 레인)
- [ ] 댓글 모드 외과적 편집 — 부분적으로 구현됨; 신뢰할 수 있는 타겟팅 패치 작업 진행 중
- [ ] AI 생성 트윅 패널 UX — 아직 구현되지 않음
- [ ] `DESIGN.md`로 프로젝트를 스캐폴딩하는 `npx od init`
- [ ] 플러그인 SDK + `od plugin {add,list,remove,test,publish}` CLI
- [ ] Figma / Pencil → React / Next / Vue 마이그레이션 플러그인 (알파)
- [ ] 기존 코드베이스 새로고침 플러그인 (git 리포지토리 + `DESIGN.md` 지정)

단계별 전달 → [`docs/roadmap.md`](docs/roadmap.md).

---

## 커뮤니티

모든 채널을 이끌어가는 실제 사람들입니다.

- 💬 **Discord** — 일상적인 대화, 플러그인 공유, 질문 → [**discord.gg/mHAjSMV6gz**](https://discord.gg/mHAjSMV6gz)
- 🐦 **X / Twitter** — 릴리스 노트, 마일스톤, 비하인드 스토리 → [**@OpenDesignHQ**](https://x.com/OpenDesignHQ)
- 🗣️ **GitHub Discussions** — 심층 Q&A, RFC, "작업물 공유" → [**Discussions**](https://github.com/nexu-io/open-design/discussions)
- 🐛 **GitHub Issues** — 버그 신고, 기능 요청 → [**Issues**](https://github.com/nexu-io/open-design/issues)

[`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) 및 [`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) 라벨이 가장 쉽게 참여할 수 있는 방법입니다.

---

## 기여하기

Open Design이 계속 발전하는 이유는 디자이너, 엔지니어, 프롬프트 작성자 등의 기여자분들이 계속 참여해주시기 때문입니다. 가장 많이 사용되는 스킬, 디자인 시스템, 플러그인 중 다수는 코어 팀 외의 분들이 작성해주신 것입니다.

### 🎯 어디서부터 시작할까요? (최대 레버리지, 최소 변경)

| 무엇을 만들고 싶으신가요? | 방법 | 위치 |
|---|---|---|
| 새로운 기능적 **스킬** | `SKILL.md` + 선택 사항인 `assets/` + `references/`가 포함된 폴더 추가 | [`skills/`](skills/) · 사양은 [`docs/skills-protocol.md`](docs/skills-protocol.md) 참조 |
| 새로운 렌더링 **디자인 템플릿** | 렌더링 가능한 `SKILL.md` 번들 추가 | [`design-templates/`](design-templates/) |
| 새로운 **디자인 시스템** | `DESIGN.md`를 중심으로 하는 패키지 추가; 필요에 따라 `manifest.json`, `tokens.css`, 컴포넌트, 에셋 또는 출처 추가 | [`design-systems/<brand>/`](design-systems/) |
| 새로운 **플러그인** | 카테고리 폴더 아래에 `open-design.json` + 유형별 페이로드 추가 | [`plugins/community/`](plugins/community/) · 사양은 [`plugins/spec/SPEC.md`](plugins/spec/SPEC.md) · 에이전트 개발 가이드는 [`plugins/spec/AGENT-DEVELOPMENT.md`](plugins/spec/AGENT-DEVELOPMENT.md) 참조 |
| 새로운 **코딩 에이전트 CLI** 지원 | 1단일 런타임 정의 + 레지스트리 항목 추가; 새로운 와이어 포맷의 경우에만 파서 추가 | [`apps/daemon/src/runtimes/defs/`](apps/daemon/src/runtimes/defs/) |
| 버그 수정 또는 UI 다듬기 | [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) 라벨 탐색 | [Issues →](https://github.com/nexu-io/open-design/issues) |
| 문서 번역 | `README.<lang>.md` 파일 업데이트 | [`TRANSLATIONS.md`](TRANSLATIONS.md) |

### 🤖 에이전트로서 기여하기

*이 글을 읽고 있는 에이전트가 바로 당신이라면*, 가장 빠른 경로는 다음과 같습니다:

```bash
# 1. 로컬에서 부트스트랩
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web

# 2. good-first-issue를 찾아 자신에게 할당
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number> # 브랜치 및 워크트리 생성

# 3. 변경 사항 적용, 검사 실행
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. PR 열기
gh pr create --fill
```

에이전트 친화적인 전체 기여 플로우, 코드 스타일 및 PR 기준 → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](docs/i18n/CONTRIBUTING.de.md) · [Français](docs/i18n/CONTRIBUTING.fr.md) · [简体中文](docs/i18n/CONTRIBUTING.zh-CN.md) · [日本語](docs/i18n/CONTRIBUTING.ja-JP.md) · [한국어](docs/i18n/CONTRIBUTING.ko.md) · [Português](docs/i18n/CONTRIBUTING.pt-BR.md) · [ภาษาไทย](docs/i18n/CONTRIBUTING.th.md)).

### 🏅 Open Design Fellow 프로그램

전 세계에서 **Open Design Fellow**를 모집합니다. 펠로우는 코어 팀과 함께 제품을 구체화하고, 해당 지역에서 Open Design을 공식적으로 대표하며, 자금 지원($1,000 / MR), 무료 LLM 크레딧, 다이렉트 리뷰 트랙의 지원을 받아 로컬 커뮤니티를 성장시킵니다. 상세 정보 → [`MAINTAINERS.md`](MAINTAINERS.md) 및 [Discord](https://discord.gg/mHAjSMV6gz) 공지사항.

---

## 메인테이너

일일 유지 관리, 코드 리뷰, 커뮤니티 지원 등 막중한 역할을 담당하고 있습니다.

<table>
 <tr>
 <td align="center" valign="top" width="200">
 <a href="https://github.com/Nagendhra-web">
 <img src="https://github.com/Nagendhra-web.png" width="96" alt="@Nagendhra-web" /> 
 @Nagendhra-web
 </a> 
 Maintainer
 </td>
 <td align="center" valign="top" width="200">
 <a href="https://github.com/Sid-Qin">
 <img src="https://github.com/Sid-Qin.png" width="96" alt="@Sid-Qin" /> 
 @Sid-Qin
 </a> 
 Maintainer
 </td>
 <td align="center" valign="top" width="200">
 <a href="https://github.com/YOMXXX">
 <img src="https://github.com/YOMXXX.png" width="96" alt="@YOMXXX" /> 
 @YOMXXX
 </a> 
 Maintainer
 </td>
 </tr>
</table>

메인테이너 규칙, 승진 기준 및 퇴임 프로토콜 → [`MAINTAINERS.md`](MAINTAINERS.md) ([Deutsch](docs/i18n/MAINTAINERS.de.md) · [Français](docs/i18n/MAINTAINERS.fr.md) · [简体中文](docs/i18n/MAINTAINERS.zh-CN.md) · [日本語](docs/i18n/MAINTAINERS.ja-JP.md) · [한국어](docs/i18n/MAINTAINERS.ko.md) · [Português](docs/i18n/MAINTAINERS.pt-BR.md) · [ภาษาไทย](docs/i18n/MAINTAINERS.th.md)).

## 기여자

코드, 문서, 피드백, 날카로운 이슈, 새로운 스킬, 새로운 디자인 시스템 등 참여해주신 모든 분들께 감사드립니다.

---

## 리포지토리 활동

위의 SVG는 [`lowlighter/metrics`](https://github.com/lowlighter/metrics)를 사용하여 [`.github/workflows/metrics.yml`](.github/workflows/metrics.yml)에 의해 매일 재생성됩니다.

---

## 스타(Star) 누르기

이 도구가 여러분의 30분을 아껴주었다면 ★을 눌러주세요. 스타가 월세를 내주지는 않지만 — 다음 디자이너, 에이전트, 기여자에게 이 실험이 주목할 가치가 있다는 신호를 보냅니다. 클릭 한 번, 3초의 투자로 확실한 신호를 전달하세요.

---

## 참조 및 계보

| 프로젝트 | 역할 |
|---|---|
| Claude Design | 이 리포지토리가 오픈소스 대안으로 삼은 폐쇄형 소스 제품. |
| [`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design) | 디자인 철학 나침반 — 주니어 디자이너 워크플로우, 브랜드 에셋 프로토콜, AI 슬롭 방지 체크리스트, 5차원 비평. |
| [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill) | 매거진 스타일 웹 PPT 스킬, [`design-templates/guizang-ppt/`](design-templates/guizang-ppt/)에 원문 그대로 번들링됨. 덱 모드의 기본값. |
| [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill) | HTML PPT 스튜디오 패밀리 — 15개 덱 템플릿, 36개 테마, 31개 페이지 레이아웃, 애니메이션 런타임, 마그네틱 카드 프레젠터 모드. |
| [`OpenCoworkAI/open-codesign`](https://github.com/OpenCoworkAI/open-codesign) | 최초의 오픈소스 Claude Design 대안; 차용한 UX 패턴(스트리밍 아티팩트 루프, 샌드박스 처리된 iframe, 라이브 에이전트 패널). |
| [`multica-ai/multica`](https://github.com/multica-ai/multica) | 데몬 + 어댑터 아키텍처 — PATH 스캔 에이전트 감지, 유일한 권한 프로세스로서의 로컬 데몬. |
| [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md) | 원본 9개 섹션의 `DESIGN.md` 스키마 및 70개 업스트림 파생 시스템의 역사적 소스; 현재 패키지는 해당 기준을 확장할 수 있음. |
| [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills) | `design-systems/` 아래에 추가된 57개 디자인 스킬의 소스. |
| [`heygen-com/hyperframes`](https://github.com/heygen-com/hyperframes) | Open Design에서 일등 시민 `hyperframes-html`로 통합된 HTML→MP4 모션 그래픽 프레임워크. |
| [Claude Code skills][skill] | 그대로 채택한 `SKILL.md` 컨벤션. |

상세 출처 → [`docs/references.md`](docs/references.md).

[skill]: https://docs.anthropic.com/en/docs/claude-code/skills

## 라이선스

Apache-2.0. 자체 `LICENSE` 파일이 포함된 번들 스킬 및 템플릿은 해당 라이선스를 유지합니다(`design-templates/guizang-ppt/` (MIT, [@op7418](https://github.com/op7418)), `design-templates/html-ppt/` (MIT, [@lewislulu](https://github.com/lewislulu)), `skills/web-clone/` (MIT, [@Jane-xiaoer](https://github.com/Jane-xiaoer)) 포함).

open-design

파일 탐색기

# 설치 가이드

2. Node.js

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README