OpenDesign: 최초의 협업형 AI 디자인 에이전트 워크스페이스

웹사이트 · 다운로드 · OpenDesign Cloud · Discord · @OpenDesignHQ 팔로우

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย

Home — 작업 설명이나 예시로 시작하세요.	All projects — 디자인 시스템, 미디어, 프로토타입을 다시 찾아보세요.
Design Systems — 브랜드 자산을 살펴보고 에이전트와 함께 다듬으세요.	Plugins — 스킬을 찾고 Try it으로 실행하세요.

Prototype — 에이전트와 인터랙티브 웹 경험을 만들고 다듬으며 실시간으로 미리 보세요.	Slides — 슬라이드와 발표자 노트를 검토하면서 자료를 만들고 완료되면 내보내세요.
Image — 대화에서 시각 자료를 생성하고 결과를 확인한 뒤 다운로드하거나 여세요.	HyperFrames — 에이전트와 모션 그래픽을 만들고 MP4로 내보내세요. 동영상 보기.

` 한 번이면 MCP 서버가 해당 에이전트의 설정에 연결되고, 어떤 에이전트 안에서든 동일한 도구를 호출할 수 있습니다. | 코딩 에이전트 / 플랫폼          | 상태    | 한 줄 MCP 서버 설치                    | |---|:---:|---| | [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 --print`로 드라이런 미리보기 · `--uninstall`로 제거 · 전체 목록은 `od mcp install --help`로 확인.

**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 / 링크 로컬 / CGNAT를 차단합니다. Runtime 정의는 [`apps/daemon/src/runtimes/defs/`](../../apps/daemon/src/runtimes/defs/)에 두고 `runtimes/registry.ts`에 등록합니다. 새 wire format일 때만 parser가 추가로 필요합니다 — [`docs/agent-adapters.md`](../../docs/agent-adapters.md)를 참고하세요. --- ## 데모 네 가지 핵심 제품 카테고리 모두, 당신의 노트북에서 실행되는 코딩 에이전트가 렌더링한 것입니다. 썸네일을 클릭하면 실제 예시를 볼 수 있습니다. ### 1 · 프로토타입 — 웹 · 데스크톱 · 모바일 기본 출력 표면입니다. 당신의 `DESIGN.md`를 읽어 샌드박스 iframe에 렌더링되는 단일 페이지 HTML 아티팩트입니다.

웹 프로토타입 — 스크롤바, KPI, 차트가 있는 에디토리얼 대시보드. design-templates/dating-web/에서 곧바로 렌더링됩니다.

모바일 앱 프로토타입 — XP 리본과 퀘스트 상세가 있는 3화면 게임화 흐름. Cursor / Codex / Claude Code로 곧바로 넘겨 React/Next/Vue로 전환하세요.

### 2 · 라이브 아티팩트 & 대시보드 라이브 대시보드, 디시전 룸, KPI 월 — tweaks 패널을 통해 데이터를 가져오고 그 자리에서 편집 가능한 상태를 유지하는 단일 페이지 아티팩트입니다.

라이브 대시보드 — tweaks 패널이 조정할 만한 가치가 있는 파라미터를 드러내는 편집 가능한 KPI 월. 에이전트가 매니페스트를 내보내면 iframe이 새로고침 없이 다시 렌더링됩니다.	디시전 룸 — 제품 / 리서치 / 운영 회의를 위한 다중 소스 브리핑 아티팩트.
GitHub 스타일 대시보드 — 라이브 아티팩트로 표현된 저장소 지표.	Flow 라이브 대시보드 템플릿 — 활성 DESIGN.md를 통해 브랜딩된 도메인 특화 KPI 템플릿.

### 3 · 덱 — 매거진 덱, 주간 업데이트, 피치

Deck 모드 (guizang-ppt) — 매거진 레이아웃, WebGL 히어로, P0/P1/P2 체크리스트. op7418/guizang-ppt-skill에서 원본 라이선스를 그대로 보존한 채 똑같이 번들로 제공됩니다.

Swiss International 스타일 덱 — 그리드에 고정되고 모노크롬 강조색을 쓴 디자인. design-templates/html-ppt-*/ 아래의 15개 덱 템플릿과 36개 테마 중 하나입니다.

모든 덱은 **HTML**(단일 파일, 에셋 인라인), **PDF**(브라우저 인쇄, 덱 인식), **PPTX**(에이전트 기반 스킬), **ZIP**(아카이브), 또는 **Markdown**으로 내보낼 수 있습니다. ### 4 · 이미지 — `gpt-image-2`, ImageRouter, 커스텀 API

일러스트 도시 푸드 맵 손으로 그린 에디토리얼 여행 포스터

시네마틱 엘리베이터 장면 단일 프레임 에디토리얼 스틸

사이버펑크 인물 프로필 아바타 — 네온 얼굴 텍스트

3D 돌계단 깎은 돌 인포그래픽

화려한 인물 에디토리얼 스튜디오 촬영

**바로 복제할 수 있는 93개의 프롬프트**가 [`prompt-templates/`](../../prompt-templates/)에 있습니다 — 미리보기 썸네일, 전체 프롬프트 본문, 대상 모델, 화면 비율, 출처 표기 포함. 한 번의 클릭으로 브리프가 컴포저에 들어갑니다. ### 5 · 비디오 & HyperFrames — 에이전트 네이티브 모션 그래픽 **[HyperFrames][hyperframes]**는 HeyGen의 오픈소스, 에이전트 네이티브 비디오 프레임워크로, OpenDesign에 일급 시민으로 통합되어 있습니다. 에이전트가 HTML + CSS + GSAP를 작성하면 HyperFrames가 헤드리스 Chrome + FFmpeg를 통해 결정론적 MP4로 렌더링합니다. 시네마틱 t2v / i2v를 위한 **Seedance 2.0**, 라우팅된 모델 변형을 위한 **Veo 3 / Sora 2 / Kling 2**, 오디오 레이어를 위한 **Suno v5 / Lyria 2**와 함께 사용하세요.

30초 SaaS 제품 프로모 · 16:9 · UI 3D 리빌	TikTok 노래방 토킹헤드 · 9:16 · TTS + 단어 동기화 자막	30초 브랜드 시즐 릴 · 16:9 · 오디오 반응형 키네틱 타입	막대 차트 레이스 · 16:9 · NYT 스타일 데이터 인포그래픽
비행 경로 맵 · 16:9 · Apple 스타일 경로 리빌	4초 시네마틱 로고 아웃트로 · 16:9 · 조각별 조립 + 블룸	$0 → $10K 머니 카운터 · 9:16 · Apple 스타일 하이프	웹사이트 투 비디오 · 16:9 · 3개 뷰포트에서 사이트를 캡처

11개의 HyperFrames 템플릿 + 39개의 Seedance 프롬프트가 저장소와 함께 제공됩니다. 카탈로그 썸네일 © HeyGen; 프레임워크는 Apache-2.0입니다. OD 특화 렌더 워크플로(컴포지션 캐시, sandbox-exec 우회, MP4-as-chip)는 [`design-templates/hyperframes/`](../../design-templates/hyperframes/)에 자세히 설명되어 있습니다. [hyperframes]: https://github.com/heygen-com/hyperframes --- ## 왜 OpenDesign인가 - 🤖 **에이전트 네이티브, 모델에 구애받지 않음.** 우리는 에이전트를 제공하지 않습니다. 이미 당신의 `PATH`에 있는 `claude` / `codex` / `cursor-agent` / `copilot` / `hermes` / `kimi`가 디자인 엔진입니다. 한 번의 클릭으로 교체하세요. - 🧠 **기본부터 브랜드급.** 모든 렌더는 활성 패키지의 `DESIGN.md`를 핵심 브랜드 계약으로 읽습니다. 151개 디자인 시스템 패키지가 제공되며, 레거시 패키지는 `DESIGN.md`만 포함할 수 있고 새 패키지는 `manifest.json`, `tokens.css`, 컴포넌트, 에셋, 출처 정보를 더할 수 있습니다. 폴더 하나만 넣으면 피커가 찾아냅니다. - 🖥️ **로컬 우선, 모든 계층에서 BYOK.** 네이티브 데스크톱 앱은 로컬 우선을 유지합니다. 제품 분석과 세션 리플레이에는 동의가 필요하며, 민감 정보를 정리한 안전성 및 신뢰성 텔레메트리는 항상 활성화됩니다. daemon 데이터 경로를 설명하기 전에 반드시 루트 `AGENTS.md`의 **Daemon data directory contract**를 읽어야 합니다. - 🌍 **네 가지 평면에서 조합 가능.** **플러그인**은 워크플로, **기능 스킬**은 에이전트 동작, **디자인 템플릿**은 렌더링 청사진, **디자인 시스템**은 브랜드를 담습니다. - 🔁 **기존 코드베이스를 새롭게.** `git` 저장소 + `DESIGN.md`를 에이전트에 넘기면 당신의 실제 컴포넌트를 브랜드 사양에 맞게 리팩터링합니다. - 🔒 **신념에 기반한 프라이버시.** 프로젝트는 로컬 또는 직접 관리하는 배포 환경에서 실행할 수 있습니다. 클라우드 모델과 OpenDesign Cloud 요청은 해당 서비스로 전송됩니다. BYOK 프록시에는 SSRF 보호 기능이 포함됩니다. --- ## 빠른 시작 ### 🖥️ 데스크톱 앱 다운로드 (권장 — 설정 불필요) OpenDesign를 사용하는 가장 빠른 방법입니다. Node도, pnpm도, 클론도 필요 없습니다. - **macOS** (Apple Silicon · Intel x64) → [**open-design.ai**](https://open-design.ai/) 또는 [GitHub Releases](https://github.com/nexu-io/open-design/releases) - **Windows** (x64) → [**open-design.ai**](https://open-design.ai/) 또는 [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개의 디자인 시스템 패키지를 불러오며, entry view에서 브리프를 입력할 수 있게 합니다. ### 🤖 코딩 에이전트에 설치 (UI 없이) GUI를 한 번도 열지 않고도 OpenDesign를 사용할 수 있습니다 — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi 등의 내부에서 스킬, 플러그인, 또는 MCP 서버로 호출하세요. ```bash # One-line install into the agent you're using: od mcp install # = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity # | pi | vibe | hermes | cline | kimi | kiro | trae | opencode ``` 그런 다음 에이전트 안에서: ``` > Use open-design to generate a landing page with the Linear design system ``` 파일시스템 기반 로컬 CLI 실행에서 에이전트는 선택한 기능 스킬 또는 디자인 템플릿과 `DESIGN.md`를 합성해 정규 프로젝트 파일을 쓰고 OpenDesign이 이를 미리 봅니다. 파일 도구가 없는 BYOK/API 실행은 완전한 `` 블록 하나를 반환합니다. ### 🐳 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 # open http://localhost:7456 ``` ### 🚀 Sealos에 배포 [](https://sealos.io/products/app-store/open-design/) Sealos App Store 템플릿은 게시된 OpenDesign Docker 이미지를 영구 워크스페이스 스토리지 및 공개 프록시의 Basic Auth와 함께 실행합니다. 사용자 지정 공개 또는 공유 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`. Windows 사용자는 [`docs/windows-troubleshooting.md`](../../docs/windows-troubleshooting.md)를 참고하세요. 전체 빠른 시작, 환경 변수, 패키징 빌드 흐름 → [`QUICKSTART.ko.md`](QUICKSTART.ko.md). ### 전체 워크플로 — 브리프에서 아티팩트까지 `brief → plugin → direction → design system → artifact → handoff → memory` 1. **PM이 브리프를 제출합니다.** 플러그인 피커가 랜딩 페이지 · 피치 덱 · 대시보드 · 소셜 포스트 · PM 스펙 · OKR 스코어카드… 를 제안합니다. 2. **디자이너(또는 에이전트)가 방향을 확정합니다.** 브랜드가 없나요? 엄선된 5가지 방향 중에서 고르세요. 브랜드가 있나요? 스크린샷 / URL을 넣으면 → 에이전트가 GitHub에 연결하고, 재사용 가능한 `DESIGN.md`로 코드화합니다. 3. **에이전트가 첫 결과물을 만듭니다.** 파일시스템 기반 CLI 실행은 정규 파일을 쓰고, 파일 도구가 없는 BYOK/API 실행은 완전한 `` 블록을 반환합니다. 4. **엔지니어링으로 넘깁니다.** 아티팩트는 실제 HTML/CSS입니다 — Cursor, Codex, 또는 Claude Code에 넣어 코드로 계속 빌드하세요. 또는 PPTX / PDF / MP4를 마케팅으로 곧바로 내보내세요. 5. **OpenDesign는 사용할수록 더 똑똑해집니다.** 당신의 스크린샷, 폰트, 팔레트, 확정된 아티팩트가 다음 세션의 기본값으로 쌓입니다. 재작업도 줄고, 표류도 줄어듭니다. --- ## 코딩 에이전트에서 OpenDesign 사용하기 OpenDesign는 **stdio MCP 서버**와 에이전트별 **설치 스크립트**를 제공합니다. 다른 저장소에 있는 MCP 호환 에이전트라면 무엇이든 당신의 로컬 OpenDesign 프로젝트에서 파일을 직접 읽을 수 있습니다 — 토큰 CSS, JSX 컴포넌트, entry HTML — 이름으로 질의 가능한 구조화된 API로요. 에이전트는 언제나 오래된 내보내기가 아니라 살아 있는 파일을 봅니다. ```bash # One-line install (16+ CLIs supported): od mcp install # Then the agent can: od project list --json od files list --json od files read od plugin list --json od skills list --json ``` **왜 MCP인가?** 반복할 때마다 zip을 내보내고 다시 첨부하는 일은 흐름을 끊습니다. MCP는 디자인 소스를 직접 노출합니다 — 에이전트는 언제나 살아 있는 파일을 봅니다. **처음부터 시작하는 에이전트라면,** 설치 프로그램이 `~/.config//open-design.json`(또는 플랫폼에 해당하는 경로)과 복사해 붙여넣을 수 있는 MCP 스니펫을 배치합니다. Cursor는 원클릭 딥링크를, Claude Code는 `claude mcp add-json` 한 줄을, 그 외 모든 에이전트는 각자의 설정이 기대하는 스키마의 JSON을 받습니다. 전체 에이전트별 흐름 → 데스크톱 앱의 **Settings → MCP server**, 또는 [`docs/agent-adapters.md`](../../docs/agent-adapters.md). **보안 모델.** 기본은 읽기 전용이며, 데몬은 `127.0.0.1`에 바인딩되고, SSRF는 프록시 경계에서 차단됩니다. LAN 노출에는 명시적인 `OD_BIND_HOST`와 `OD_ALLOWED_ORIGINS`가 필요합니다. 커넥터 자격 증명과 라이브 아티팩트 미리보기 경로는 어떤 경우에도 루프백 전용으로 유지됩니다. --- ## 스킬과 디자인 템플릿 **100개 이상의 기능 스킬은 [`skills/`](../../skills/)에 있으며** 재사용 가능한 에이전트 동작, 참조 또는 도구를 제공합니다. 렌더링 가능한 스타터는 [`design-templates/`](../../design-templates/)에 분리되어 기능 스킬 레지스트리가 아닌 템플릿 카탈로그에 표시됩니다. 두 가지 **모드**가 템플릿 카탈로그를 떠받칩니다: `prototype`과 `deck`. 다른 템플릿은 `image`, `video`, `audio`, utility 표면을 다룹니다. | 디자인 템플릿 | 모드 | 시나리오 | 생성하는 것 | |---|---|---|---| | [`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 | iPhone 15 Pro / Pixel 프레임 앱 | | [`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가 내보낸 tweaks 패널 매니페스트 | 프로토콜과 디렉터리 분리 → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). 기능 스킬은 `GET /api/skills`, 템플릿은 `GET /api/design-templates`를 사용합니다. --- ## 디자인 시스템 **`DESIGN.md` 중심의 151개 디자인 시스템 패키지**가 제공됩니다. 레거시 패키지는 Markdown 계약만 포함할 수 있고, 새 패키지는 `manifest.json`, 컴파일된 `tokens.css`, 컴포넌트 fixture, 자산, 출처 증거도 포함할 수 있습니다. 업스트림 파생 시스템과 프로젝트 고유 추가분이 섞이며 [`design-systems/README.md`](../../design-systems/README.md)가 패키지 형태와 출처를 기록합니다.

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

**AI & LLM** — `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai` **개발자 도구** — `cursor` · `vercel` · `linear-app` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `sanity` · `mintlify` · `composio` · `opencode-ai` · `voltagent` **생산성** — `notion` · `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` · `resend` · `spacex` **스타터** — `default` (Neutral Modern) · `warm-editorial`

라이브러리를 다시 가져오려면 [`scripts/sync-design-systems.ts`](../../scripts/sync-design-systems.ts)를 사용하세요. 자신의 브랜드를 추가하려면 → `design-systems//`에 `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`과 타입별 payload를 갖는 이식 가능한 디렉터리입니다. 워크플로는 `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**을 클릭하세요. 프로젝트의 Studio 안에서 플러그인은 클릭하여 적용하는 컴포저 칩으로 나타납니다(선언된 입력과 함께). **커맨드 라인에서**(UI 없이 실행됩니다 — 외부 에이전트가 사용하는 경로입니다): ```bash od plugin list # list installed plugins (--task-kind / --mode / --tag filters) od plugin search "landing page" # search by keyword od plugin info od-default # inspect a plugin's metadata, inputs, capabilities od plugin install od-default # install from a registry; also accepts ./local-folder or an https://… link od plugin apply od-default --input brief="a one-page pitch for our seed round" od plugin upgrade od-default # upgrade od plugin uninstall od-default # uninstall ``` 모든 명령은 `--json`을 지원하므로 `jq` / `xargs`를 거쳐 자동화로 파이프할 수 있습니다. ### 플러그인 만들기 OpenDesign 플러그인에는 `open-design.json`과 타입별 payload가 필요합니다. 스킬과 시나리오는 `SKILL.md`도 포함하고 다른 타입은 자체 payload를 사용합니다: ``` my-plugin/ ├── open-design.json ← required: marketplace metadata + inputs + pipeline + capabilities ├── SKILL.md ← required for agent-skill/scenario entries; omit for other plugin types ├── README.md ← optional: usage, install, registry links ├── preview/ ← optional: index.html / poster.png (strongly recommended for visual plugins) └── examples/ ← optional: concrete use cases ``` 핵심 필드는 `specVersion`, `name`, `version`, Agent Skill을 공개할 때만 선택적인 `compat.agentSkills[].path`, 그리고 `od.kind`, `od.taskKind` (`new-generation` / `figma-migration` / `code-migration` / `tune-collab`), `od.mode`, `od.capabilities[]`, `od.inputs[]`입니다. 로컬에서 스캐폴드 + 검증: ```bash od plugin scaffold --id my-plugin --title "My Plugin" # generate the skeleton od plugin validate ./my-plugin # check manifest / file layout 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/)(서드파티 플러그인)에 넣거나 — OpenDesign와 함께 번들로 제공하려면 — [`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)). --- ## 아키텍처 ``` ┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐ │ chat · file workspace · iframe preview · settings · import · MCP │ └──────────────┬─────────────────────────────────────┬─────────────────┘ │ /api/* │ ▼ ▼ ┌─────────────────────────────────┐ /api/proxy/{provider}/stream (SSE) │ local daemon (Express+SQLite) │ ─→ any OpenAI-compatible BYOK, │ │ SSRF-guarded at the edge │ /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 server │ └─────────┬───────────────────────┘ │ spawn(cli, [...], { cwd: managed project cwd }) ▼ ┌──────────────────────────────────────────────────────────────────┐ │ Base registry: 26 runtime definitions (including byok-opencode), │ │ backed by 25 distinct local CLI executables because byok-opencode │ │ shares the OpenCode executable. │ │ Composes a functional skill or design template + DESIGN.md; writes files │ └──────────────────────────────────────────────────────────────────┘ ``` | 계층 | 스택 | |---|---| | 프론트엔드 | Next.js 16 App Router + React 18 + TypeScript | | 데몬 | Node 24 · Express · SSE 스트리밍 · `better-sqlite3` | | 스토리지 | daemon 저장 경로를 변경하거나 문서화하기 전에 반드시 루트 `AGENTS.md`의 **Daemon data directory contract**를 읽어야 합니다. 이 README는 그 내용을 다시 서술해서는 안 됩니다. | | 미리보기 | filesystem 실행은 정규 파일을 렌더링하고 BYOK/API는 완전한 `` 블록을 샌드박스 `srcdoc` iframe으로 파싱합니다 | | 내보내기 | HTML(인라인) · PDF(브라우저 인쇄) · PPTX(에이전트 기반) · ZIP · Markdown · MP4(HyperFrames) | | 데스크톱 | Electron 셸 + 샌드박스 렌더러 + 사이드카 IPC(STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN) | | 라이프사이클 | 단일 진입점: `pnpm tools-dev` (start / stop / run / status / logs / inspect / check) | 전체 아키텍처 → [`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개 runtime 정의 + 스킬/템플릿 레지스트리 + 디자인 시스템 카탈로그 - [x] 웹 앱 + 챗 + 질문 폼 + 5방향 피커 + 할 일 진행 상황 + 샌드박스 미리보기 - [x] 100개 이상의 기능 스킬 · 별도 렌더링 템플릿 카탈로그 · 151개 디자인 시스템 패키지 · 5개의 비주얼 방향 · 5개의 디바이스 프레임 - [x] SQLite 기반 프로젝트 · 대화 · 메시지 · 탭 · 템플릿 - [x] 다중 프로바이더 BYOK 프록시(`/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`) + SSRF 가드 - [x] Claude Design ZIP 가져오기(`/api/import/claude-design`) - [x] 사이드카 프로토콜 + Electron 데스크톱 + IPC 자동화 - [x] 아티팩트 린트 API + 5차원 자가 비평 내보내기 전 게이트 - [x] **0.8.0** — 플러그인 마켓플레이스 인프라(261개 공식 플러그인, 매니페스트 사양, 에이전트별 설치 스크립트) - [x] **0.9.0** — OpenDesign Cloud(앱에 내장된 공식 Model Router: 설정 불필요, 원클릭 로그인) - [x] 패키징된 Electron 빌드 — macOS(Apple Silicon + Intel) + Windows(x64) + Linux AppImage(선택적 레인) - [ ] 코멘트 모드 정밀 편집 — 부분 출시됨; 안정적인 타깃 패칭 진행 중 - [ ] AI가 내보내는 tweaks 패널 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) 라벨이 가장 쉬운 진입로입니다. --- ## 기여하기 OpenDesign가 계속 나아가는 것은 기여자들 — 디자이너, 엔지니어, 프롬프트 작성자 — 이 계속 모습을 드러내기 때문입니다. 가장 많이 쓰이는 스킬, 디자인 시스템, 플러그인의 상당수는 핵심 팀 바깥의 사람들이 작성했습니다. ### 🎯 어디서 시작할까 (최대 레버리지, 최소 변경) | 만들고 싶은 것… | 방법 | 위치 | |---|---|---| | 새 **스킬** | `SKILL.md` + `assets/` + `references/`가 있는 폴더를 넣기 | [`skills/`](../../skills/) · 사양은 [`docs/skills-protocol.md`](../../docs/skills-protocol.md)에 | | 새 **디자인 시스템** | `DESIGN.md` 중심의 패키지를 넣고 필요하면 `manifest.json`, `tokens.css`, 컴포넌트, 에셋, 출처 정보를 추가 | [`design-systems//`](../../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** 지원 | Runtime 정의 + registry entry; 새 wire format에만 parser 추가 | [`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..md` 파일 업데이트 | [`TRANSLATIONS.md`](../../TRANSLATIONS.md) | ### 🤖 에이전트로서 기여하기 *당신이 이 글을 읽는 에이전트라면*, 가장 빠른 경로는: ```bash # 1. Boot locally git clone https://github.com/nexu-io/open-design.git cd open-design && corepack enable && pnpm install pnpm tools-dev run web # 2. Find a good-first-issue and assign yourself gh issue list --label "good first issue" --state open --limit 20 gh issue develop # create a branch and worktree # 3. Make the change, run the checks pnpm guard && pnpm typecheck pnpm --filter @open-design/ test # 4. Open the PR gh pr create --fill ``` 전체 에이전트 친화적 기여 흐름, 코드 스타일, PR 기준 → [`CONTRIBUTING.ko.md`](CONTRIBUTING.ko.md) ([Deutsch](CONTRIBUTING.de.md) · [Français](CONTRIBUTING.fr.md) · [简体中文](CONTRIBUTING.zh-CN.md) · [日本語](CONTRIBUTING.ja-JP.md) · [Português](CONTRIBUTING.pt-BR.md)). ### 🏅 OpenDesign Fellow 프로그램 우리는 전 세계에서 **OpenDesign Fellow**를 모집하고 있습니다 — Fellow는 핵심 팀과 함께 제품을 빚어내고, 자신의 지역에서 OpenDesign를 공식적으로 대표하며, 지역 커뮤니티를 키웁니다. 여기에는 자금 지원($1,000 / MR), 무료 LLM 크레딧, 직통 리뷰 트랙이 뒷받침됩니다. 자세히 → [`MAINTAINERS.md`](../../MAINTAINERS.md) 및 [Discord](https://discord.gg/mHAjSMV6gz)의 공지. --- ## 메인테이너 이들은 많은 짐을 짊어집니다 — 매일의 유지보수, 리뷰, 그리고 커뮤니티 지원.

@Nagendhra-web Maintainer

@Sid-Qin Maintainer

메인테이너 규칙, 승급 기준, 그리고 이탈 프로토콜 → [`MAINTAINERS.md`](../../MAINTAINERS.md) (또한 [Deutsch](MAINTAINERS.de.md) · [Français](MAINTAINERS.fr.md) · [简体中文](MAINTAINERS.zh-CN.md) · [日本語](MAINTAINERS.ja-JP.md) · [Português](MAINTAINERS.pt-BR.md)). ## 기여자 참여해 주신 모든 분께 감사드립니다 — 코드, 문서, 피드백, 날카로운 이슈, 새 스킬, 새 디자인 시스템. --- ## 저장소 활동 위의 SVG는 [`lowlighter/metrics`](https://github.com/lowlighter/metrics)를 사용해 [`.github/workflows/metrics.yml`](../../.github/workflows/metrics.yml)에 의해 매일 다시 생성됩니다. --- ## 스타를 눌러주세요

이것이 당신의 30분을 아껴줬다면 ★를 눌러주세요. 스타가 집세를 내주지는 않지만 — 다음 디자이너, 에이전트, 기여자에게 이 실험이 관심을 쏟을 가치가 있다고 알려줍니다. 한 번의 클릭, 3초, 진짜 신호입니다. --- ## 참고 자료 & 계보 | 프로젝트 | 역할 | |---|---| | [`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 Studio 제품군 — 15개 덱 템플릿, 36개 테마, 31개 페이지 레이아웃, 애니메이션 런타임, 마그네틱 카드 프레젠터 모드. | | [`OpenCoworkAI/open-codesign`](https://github.com/OpenCoworkAI/open-codesign) | 우리가 빌려온 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) | HTML→MP4 모션 그래픽 프레임워크로, OpenDesign에 일급 `hyperframes-html`로 통합됨. | | [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. 번들로 제공되는 `design-templates/guizang-ppt/`는 원본 [LICENSE](../../design-templates/guizang-ppt/LICENSE)(MIT, [@op7418](https://github.com/op7418))를 유지합니다. 번들로 제공되는 `design-templates/html-ppt/`는 원본 [LICENSE](../../design-templates/html-ppt/LICENSE)(MIT, [@lewislulu](https://github.com/lewislulu))를 유지합니다.