Open Design – Claude Design의 로컬 퍼스트 오픈소스 대안 (16개 CLI, 31개 스킬)

Claude Design와의 차이점
지금 달라진 점
작동 방식
31개 내장 스킬
디자인 시스템과 로컬 저장소
빠른 시작
관련 문서
참고 자료

Open Design(OD)은 Anthropic의 Claude Design에 대한 로컬 퍼스트 오픈소스 대안이다. 새로운 에이전트를 제공하는 것이 아니라, 이미 로컬에 있는 AI 코딩 에이전트(Claude Code, Codex CLI, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, GitHub Copilot CLI 등)를 디자인 엔진으로 연결한다. 현재 README 기준으로 16개 CLI 어댑터, 31개 컴포저블 스킬, BYOK 프록시, 샌드박스 미리보기, 로컬 프로젝트 저장소를 제공한다.

nexu-io/open-design — Apache-2.0 라이선스. pnpm tools-dev로 로컬 실행, Vercel 배포와 패키지형 데스크톱 앱을 지원한다.

Claude Design와의 차이점

항목	Claude Design	Open Design
모델 잠금	Anthropic 전용	BYOK, 모든 에이전트 지원
호스팅	클라우드 전용	로컬 + Vercel 배포
오픈소스	❌	✅ Apache-2.0
비용	유료	무료 (BYOK)
커스터마이징	제한적	스킬·디자인 시스템 완전 수정 가능

지금 달라진 점

Open Design은 0.8.0-preview 단계로 넘어가면서 단순한 Claude Design 클론보다 넓은 로컬 디자인 런타임에 가까워졌다.

영역	내용
에이전트 런타임	16개 코딩 에이전트 CLI 자동 탐지. Claude Code, Codex CLI, Gemini CLI, Cursor Agent, Devin, OpenCode, Qwen, Copilot CLI, Kimi, Pi, Kiro, Mistral Vibe, DeepSeek TUI 등을 지원
BYOK 프록시	Anthropic, OpenAI 호환, Azure OpenAI, Gemini, Ollama, SenseAudio 스트리밍을 `/api/proxy/{provider}/stream`으로 정규화
스킬	31개 내장 스킬. 웹 프로토타입, SaaS 랜딩, 대시보드, 모바일 앱, 소셜 캐러셀, 매거진 포스터, PM 사양서, 인보이스, 덱 등을 포함
디자인 시스템	Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu 등 제품 디자인 시스템을 번들로 제공
미디어 생성	이미지·비디오·오디오 생성 표면을 같은 채팅 루프에 통합. 결과는 `.png`, `.mp4` 같은 실제 파일로 프로젝트 폴더에 저장
가져오기	Claude Design ZIP 내보내기를 가져와 `.od/projects/<id>/` 프로젝트로 이어서 편집 가능

작동 방식

사용자가 스킬, 디자인 시스템, 브리프를 선택
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한다.

31개 내장 스킬

프로토타입 & UI:

web-prototype — 인터랙티브 웹 프로토타입
mobile-onboarding — 3프레임 모바일 온보딩 플로우
gamified-app — 게임화 모바일 앱 다크 테마
dashboard — KPI 대시보드
pricing-page — SaaS 가격 페이지
mobile-app — iPhone·Pixel 프레임 기반 모바일 앱 화면
wireframe-sketch — 초기 아이디어를 빠르게 시각화하는 스케치

콘텐츠 & 마케팅:

social-carousel — 1080×1080 소셜 미디어 캐러셀
email-marketing — HTML 이메일 (테이블 폴백 안전)
blog-post — 에디토리얼 블로그 레이아웃
saas-landing — SaaS 랜딩 페이지
magazine-poster — 매거진 스타일 포스터
motion-frames — CSS 애니메이션 기반 모션 히어로

문서 & 작업물:

guizang-ppt — 매거진 스타일 덱 (WebGL 히어로, PDF 내보내기)
pm-spec — PM 사양서
eng-runbook — 엔지니어링 런북
team-okrs — OKR 문서
finance-report — 재무 요약
hr-onboarding — 온보딩 문서
invoice — 인보이스

디자인 시스템과 로컬 저장소

Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma 등 주요 제품의 DESIGN.md를 포함한다. awesome-design-md와 디자인 스킬 큐레이션을 가져와, 에이전트가 색상·간격·타이포그래피·컴포넌트 톤을 추측하지 않고 파일 기반 규칙으로 읽게 하는 구조다.

프로젝트 데이터는 .od/app.sqlite와 .od/projects/<id>/에 저장된다. 다시 열면 이전 대화, 열린 탭, 저장한 템플릿, 생성한 파일을 이어서 볼 수 있다. 팀에서 테스트 격리가 필요하면 OD_DATA_DIR로 저장 위치를 바꿀 수 있다.

빠른 시작

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

# tools-dev가 출력한 web URL 열기

이미 데스크톱 앱을 설치했다면 별도 빌드 없이 앱에서 시작할 수 있다. 저장소에서 직접 실행할 때는 pnpm tools-dev status, pnpm tools-dev logs, pnpm tools-dev stop, pnpm tools-dev check로 사이드카 프로세스를 관리한다.

지원 에이전트: Claude Code, Codex CLI, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI, OpenAI 호환 BYOK 프록시.

참고 자료

nexu-io/open-design — GitHub 공식 저장소

Like?

AI Sparkup