open-design

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

✨ OpenDesign Go와 함께 GitHub 스타 10만 개를 기념합니다 — Go 크레딧이 두 배로 제공됩니다: 첫 달 $8, 적격 Design Plan 모델의 경우 월 최대 $120 크레딧. GPT-6 Luna, DeepSeek V4.1 Flash, GLM-5.3 Flash-X, MiMo V2.6 Flash를 포함한 10개 이상의 모델에서 사용할 수 있습니다. 모든 개인 플랜에는 Codex, Claude Code, DSH, OpenCode 등을 위한 API 액세스가 포함됩니다.

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

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

OpenDesign이란 무엇인가
OpenDesign은 최초의 협업형 AI 디자인 에이전트 워크스페이스입니다. 브리프로 시작한 다음, 코딩 에이전트나 OpenDesign Cloud를 사용해 디자인 시스템을 따르는 프로토타입을 만드세요. 팀과 공유해 피드백을 받고, 에이전트가 같은 프로젝트에서 이를 다듬도록 하세요.

이 워크플로는 개방적이고 확장 가능합니다. OpenDesign은 Apache 2.0 라이선스로 제공되며, 팀이 자신들의 프로세스에 맞게 검토하고 적용할 수 있는 스킬, 디자인 템플릿, 디자인 시스템, 플러그인을 제공합니다.

제품 둘러보기
핵심 페이지

홈 — 브리프나 예시로 시작하세요.

모든 프로젝트 — 디자인 시스템, 미디어, 프로토타입을 다시 살펴보세요.

디자인 시스템 — 브랜드 자산을 검토하고 에이전트로 다듬으세요.

플러그인 — 스킬을 찾아 Try it 으로 실행하세요.

스튜디오 — 하나의 프로젝트에서 만들고 다듬기

프로토타입 — 에이전트와 라이브 미리보기로 인터랙티브 웹 경험을 만들고 다듬으세요.

슬라이드 — 덱을 만들고, 슬라이드와 발표자 노트를 검토하고, 준비되면 내보내세요.

이미지 — 대화에서 시각 자산을 생성하고, 결과를 검토한 뒤 다운로드하거나 여세요.

HyperFrames — 에이전트로 모션 그래픽을 만들고 MP4로 내보내세요. 영상 보기 .

플랫폼 호환성

OpenDesign은 주류 코딩 에이전트에 두 가지 방식으로 연결됩니다: OD를 소비하는 에이전트를 위한 스킬, CLI, MCP, 그리고 OD가 직접 실행하는 에이전트를 위한 네이티브 런타임 어댑터입니다. DeepSeek Harness는 공식 dsh CLI를 통한 일급 네이티브 런타임으로, 구조화된 스트리밍, 모델 검색, 취소, 세션 재개를 지원합니다.

코딩 에이전트 / 플랫폼
상태
빠른 설정

Claude Code
✅ 지원됨
od mcp install claude

Claude Desktop
✅ 지원됨¹
od mcp install claude-desktop

Codex CLI
✅ 지원됨
od mcp install codex

DeepSeek Reasonix
✅ 지원됨
od mcp install reasonix

DeepSeek Harness
✅ 네이티브 런타임
od agent setup deepseek-harness

Raven
✅ 지원됨
od mcp install raven

Cursor
✅ 지원됨
od mcp install cursor

VS Code + GitHub Copilot
✅ 지원됨
od mcp install copilot

GitHub Copilot CLI
✅ 지원됨
od mcp install copilot

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

Kiro
✅ 지원됨
od mcp install kiro

Pi Agent
✅ 지원됨
od mcp install pi

Mistral Vibe CLI
✅ 지원됨
od mcp install vibe

Hermes Agent
✅ 지원됨
od mcp install hermes

DeepSeek Harness의 경우, 먼저 공식 dsh CLI를 설치한 다음 OpenDesign에서 선택하거나 od agent setup deepseek-harness 를 실행해 OD의 연결 컴포넌트를 설치/복구하세요. MCP 통합의 경우: od mcp install <agent> --print 로 드라이런 미리보기 · --uninstall 로 제거 · 전체 목록은 od mcp install --help .

¹ Claude Desktop의 자동 MCP 구성은 현재 macOS와 Windows에서만 지원됩니다.

CLI가 설치되어 있지 않나요? POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream 의 BYOK 프록시가 동일한 루프(프로세스 스폰 없음)를 제공합니다 — baseUrl + apiKey + model 을 붙여넣으세요. OpenAI, Atlas Cloud, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM 또는 모든 OpenAI 호환 엔드포인트용 프리셋이 있습니다. 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/ 아래에 있습니다. 어댑터 계약은 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 월 — 트윅 패널을 통해 데이터를 가져오고 그 자리에서 편집 가능한 단일 페이지 아티팩트입니다.

라이브 대시보드 — 편집 가능한 KPI 월로, 트윅 패널이 조정할 만한 파라미터를 보여줍니다. 에이전트가 매니페스트를 내보내면 iframe이 새로고침 없이 다시 렌더링됩니다.

의사결정 룸 — 제품 / 리서치 / 운영 회의를 위한 다중 소스 브리핑 아티팩트입니다.

GitHub 스타일 대시보드 — 저장소 지표를 라이브 아티팩트로 제시합니다.

Flow 라이브 대시보드 템플릿 — 활성 DESIGN.md 를 통해 브랜딩된 도메인 특화 KPI 템플릿입니다.

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

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

스위스 인터내셔널 스타일 덱 — 그리드 기반, 모노크롬 액센트. design-templates/html-ppt-*/ 아래의 15개 덱 템플릿과 36개 테마 중 하나입니다.

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

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

일러스트 도시 음식 지도
손그림 에디토리얼 여행 포스터

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

사이버펑크 초상화
프로필 아바타 — 네온 얼굴 텍스트

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

화려한 초상화
에디토리얼 스튜디오 샷

93개의 바로 복제 가능한 프롬프트가 prompt-templates/ 에 있습니다 — 미리보기 썸네일, 전체 프롬프트 본문, 대상 모델, 종횡비, 출처 표기. 클릭 한 번으로 브리프가 컴포저에 들어갑니다.

5 · 비디오 & 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 리빌

틱톡 가라오케 토킹헤드 · 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/ 에 자세히 설명되어 있습니다.

OpenDesign을 선택하는 이유

🤖 에이전트 네이티브, 모델 불가지론적. 우리는 에이전트를 제공하지 않습니다. 여러분의 PATH에 이미 있는 claude / codex / cursor-agent / copilot / hermes / kimi 가 디자인 엔진입니다. 클릭 한 번으로 교체하세요.
🧠 기본적으로 브랜드급. 모든 렌더는 활성 패키지의 DESIGN.md 를 핵심 브랜드 계약으로 읽습니다. 151개의 디자인 시스템 패키지가 저장소와 함께 제공됩니다; 레거시 패키지는 DESIGN.md 만 있을 수 있고, 최신 패키지는 manifest.json , tokens.css , 컴포넌트, 자산, 출처를 추가할 수 있습니다. 폴더를 넣으면 피커가 찾아냅니다.
🖥️ 로컬 우선, 모든 계층에서 BYOK. macOS(Apple Silicon + Intel)와 Windows(x64)용 네이티브 데스크톱 앱. Linux 데스크톱 사용자는 현재 소스에서 OpenDesign을 실행 할 수 있습니다; 최신 공식 릴리스에는 사전 빌드된 Linux 아티팩트가 포함되어 있지 않습니다. 제품 분석과 세션 리플레이는 동의 기반입니다; 정제된 안전성 및 신뢰성 텔레메트리는 항상 켜져 있습니다. 데몬 데이터 경로를 설명하기 전에, 기여자와 운영자는 반드시 AGENTS.md → Daemon data directory contract 를 읽어야 합니다. 이 README는 이를 다시 서술해서는 안 됩니다.
🌍 네 개의 평면에서 조합 가능. 플러그인은 실행 가능한 워크플로를 담고 · 기능적 스킬은 에이전트 동작을 담고 · 디자인 템플릿은 렌더링 청사진을 담고 · 디자인 시스템은 브랜드를 담습니다. 네 가지 모두 누구나 작성하고 게시할 수 있는 이식 가능하고 버전 관리 가능한 디렉터리를 사용합니다.
🔁 기존 코드베이스 새로고침. git 저장소 + DESIGN.md 를 에이전트에 넘기면 실제 컴포넌트를 브랜드 사양에 맞게 리팩터링합니다.
🔒 신념에 따른 프라이버시. 프로젝트는 로컬 또는 자체 배포에서 실행할 수 있습니다. 클라우드 모델 및 OpenDesign Cloud 요청은 해당 서비스로 전송됩니다. BYOK 프록시에는 SSRF 보호 장치가 포함되어 있습니다.

빠른 시작
🖥️ 데스크톱 앱 다운로드 (권장 — 제로 구성)
OpenDesign을 사용하는 가장 빠른 방법. Node도, pnpm도, 클론도 필요 없습니다.

macOS (Apple Silicon · Intel x64) → open-design.ai 또는 GitHub Releases
Windows (x64) → open-design.ai 또는 GitHub Releases
Linux → 현재 공식 릴리스에는 사전 빌드된 Linux 아티팩트가 게시되어 있지 않습니다. 지금은 소스에서 OpenDesign을 실행 하세요; Linux 릴리스 작업은 #4368 에서 추적됩니다.

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

🤖 코딩 에이전트에 설치 (UI 없음)
GUI를 전혀 열지 않고도 OpenDesign을 사용할 수 있습니다 — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi 등에서 스킬, 플러그인, 또는 MCP 서버로 호출하세요.

DMG 또는 Homebrew cask로 macOS 데스크톱 앱을 설치한 경우, 셸이
여전히 od 를 Apple의 내장 /usr/bin/od 8진수 덤프 유틸리티로
해석할 수 있습니다. 이 경우 데스크톱 앱에서 Settings → MCP server 를 열고
클라이언트별 스니펫을 복사하세요; 절대 경로를 사용하며 맨
od 명령에 의존하지 않습니다.

# 사용 중인 에이전트에 한 줄 설치:
od mcp install < agent >
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw
# | antigravity | pi | vibe | hermes | cline | kimi | kiro
# | trae | opencode

# 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진수 덤프 명령으로
OpenDesign의 od 명령을 가릴 수 있습니다. 데스크톱 앱 사용자는
Settings → MCP server 스니펫을 선호해야 하며; WSL2 사용자는 먼저
WSL2 설정 가이드 를 따라야 합니다.

그런 다음 에이전트 안에서:

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

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

🐳 Docker로 실행
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://127.0.0.1:7456
브라우저가 자격 증명을 요청하면 사용자 이름으로 open-design 을, 비밀번호로
OD_API_TOKEN 값을 사용하세요…