Open Design

Open Design

Anthropic의 Claude Design을 대체하는 오픈소스 AI 디자인 도구입니다. Claude Design이 클라우드 전용·유료·비공개 소스인 반면, Open Design은 로컬 우선으로 사용자의 컴퓨터에서 직접 실행됩니다. Apache-2.0 라이선스로 개인 및 상업적 사용이 자유롭습니다.

핵심 철학

별도의 AI 에이전트를 번들링하지 않고, 사용자가 이미 설치한 코딩 에이전트를 디자인 엔진으로 활용합니다. 지원하는 CLI: Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen.

설치 방법

요구사항

• Node.js 18 이상
• pnpm (또는 npm)

설치 및 실행

# 저장소 클론
git clone https://github.com/nexu-io/open-design.git
cd open-design

# 의존성 설치
pnpm install          # 또는 npm install

# 데몬 + 프론트엔드 동시 실행
pnpm dev:all          # 데몬(포트 7456) + Vite(포트 5173)

브라우저에서 http://localhost:5173을 열면 첫 로드 시 PATH에서 에이전트 CLI를 자동 감지하고, 19개 스킬과 71개 디자인 시스템을 로드합니다. CLI가 없는 경우 Anthropic API 키 입력 대화상자가 제공됩니다. 별도의 초기화 명령어 없이 .od/ 디렉토리가 자동 생성됩니다.

Vercel 배포

# 클라우드 배포도 지원
vercel deploy

지원하는 에이전트

에이전트	상태
Claude Code	기본 지원
OpenAI Codex	지원
Cursor Agent	지원
Gemini CLI	지원
OpenCode	지원
Qwen	지원
Anthropic API (BYOK)	폴백

디자인 워크플로우

1. 프롬프트 입력 → 바로 생성하지 않고 인터랙티브 질문 폼 표시
2. 질문 폼 작성 (30초) → 디자인 대상, 타겟 청중, 톤, 브랜드 컨텍스트, 규모
3. 시각 방향 선택 → 5가지 중 선택 (Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, Soft Warm)
4. 실시간 스트리밍 → TodoWrite 계획이 라이브 카드로 표시
5. 샌드박스 미리보기 → iframe에서 즉시 렌더링
6. 내보내기 → HTML, PDF, PPTX, ZIP

내장 스킬 (19개)

• 디자인 표면: 웹 프로토타입, SaaS 랜딩 페이지, 대시보드, 가격 페이지, 문서 페이지, 블로그 포스트, 모바일 앱
• 문서: PM 스펙, 주간 업데이트, 회의록, 엔지니어링 런북, 재무 보고서, HR 온보딩, 인보이스, 칸반 보드, OKR 스코어시트

내장 디자인 시스템 (71개)

AI/LLM(Claude, Cohere, Mistral, ElevenLabs), 개발자 도구(Cursor, Vercel, Linear, Supabase), 핀테크(Stripe, Coinbase, Revolut), 이커머스(Shopify, Airbnb, Nike), 미디어(Spotify, PlayStation) 등.

안티 AI-Slop 품질 관리

• 5차원 자체 평가: 철학·위계·실행·구체성·절제 (1~5점, 3점 미만 시 수정 후 재평가)
• P0 필수 게이트: P0 조건 통과해야 결과물 출력
• 금지 패턴: 보라색 그라데이션, 이모지 아이콘, 좌측 테두리 강조 카드, 손그림 SVG 인물, 가짜 통계

아키텍처

브라우저(Vite+React) → 로컬 데몬(Express+SQLite) → 코딩 에이전트(spawn)

• 프론트엔드: Vite 5 + React 18 + TypeScript
• 데몬: Node 18+, Express, better-sqlite3
• 에이전트: child_process.spawn → 프로젝트 아티팩트 폴더에서 실행

라이선스

Apache-2.0 (번들된 guizang-ppt 스킬은 MIT)

관련 페이지

• Claude Design — Anthropic의 원본 디자인 도구
• AI Design Tools Comparison — AI 디자인 도구 비교