Open Design(OD)은 Anthropic의 Claude Design에 대한 오픈소스 대안이다. 새로운 에이전트를 제공하는 것이 아니라, 이미 로컬에 있는 AI 코딩 에이전트(Claude Code, Codex CLI, Cursor, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI)를 19개 컴포저블 스킬과 71개 브랜드급 디자인 시스템으로 구동되는 디자인 워크플로에 연결한다.
nexu-io/open-design — Apache-2.0 라이선스. pnpm dev:all로 로컬 실행, Vercel 배포 지원.
Claude Design와의 차이점
| 항목 | Claude Design | Open Design |
|---|---|---|
| 모델 잠금 | Anthropic 전용 | BYOK, 모든 에이전트 지원 |
| 호스팅 | 클라우드 전용 | 로컬 + Vercel 배포 |
| 오픈소스 | ❌ | ✅ Apache-2.0 |
| 비용 | 유료 | 무료 (BYOK) |
| 커스터마이징 | 제한적 | 스킬·디자인 시스템 완전 수정 가능 |
작동 방식
- 사용자가 스킬, 디자인 시스템, 브리프를 선택
- Discovery Form: 모델이 픽셀 하나 쓰기 전에 화면 유형, 타겟, 톤, 브랜드 컨텍스트를 잠금
- Direction Picker: 브랜드 없을 때 5개 방향 제시 (Monocle·Modern Minimal·Tech Utility·Brutalist·Soft Warm) → 결정론적 팔레트 + 폰트 스택
- Live Todo Progress: 에이전트 계획이 실시간 스트림 (in_progress → completed)
- 샌드박스 미리보기: 모든 아티팩트가 srcdoc iframe에서 렌더링, HTML/PDF/ZIP 다운로드
에이전트가 실제 온디스크 프로젝트 폴더를 생성하고, 레이아웃 라이브러리를 읽고, 5차원 자기비평을 실행한 후 <artifact>를 emit한다.
19개 내장 스킬
프로토타입 & UI:
prototype— 인터랙티브 웹 프로토타입mobile-onboarding— 3프레임 모바일 온보딩 플로우gamified-app— 게임화 모바일 앱 다크 테마dashboard— KPI 대시보드pricing— SaaS 가격 페이지
콘텐츠 & 마케팅:
social-carousel— 1080×1080 소셜 미디어 캐러셀email-marketing— HTML 이메일 (테이블 폴백 안전)blog— 에디토리얼 블로그 레이아웃saas-landing— SaaS 랜딩 페이지
문서 & 작업물:
guizang-ppt— 매거진 스타일 덱 (WebGL 히어로, PDF 내보내기)pm-spec— PM 사양서okrs— OKR 문서
71개 디자인 시스템
Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma 등 주요 제품의 DESIGN.md를 모두 포함. awesome-design-md 큐레이션 기반.
빠른 시작
git clone https://github.com/nexu-io/open-design
cd open-design
pnpm install
pnpm dev:all
# 브라우저에서 http://localhost:3000 열기지원 에이전트: Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, GitHub Copilot CLI, Anthropic API(BYOK 폴백).
관련 문서
- claude-design — Anthropic 공식 Claude Design 도구
- design-md — AI 에이전트가 디자인 시스템을 이해하는 Google Stitch 표준
- awesome-design-md — 69개 브랜드 디자인 시스템 DESIGN.md 큐레이션
- impeccable — AI 하네스를 위한 프론트엔드 디자인 스킬 시스템
참고 자료
- nexu-io/open-design — GitHub 공식 저장소