Open Design — Claude Design의 오픈소스 대안
로컬 우선(local-first) 환경에서 동작하며, 사용자가 이미 쓰고 있는 코딩 에이전트 CLI에 위임해 작동하는 오픈소스 디자인 플랫폼입니다. 벤더 락인을 피하기 위해 모든 계층을 BYOK(Bring-Your-Own-Key) 구조로 설계했습니다.
"We don't ship an agent — yours is good enough."
자체 모델을 번들링하지 않고, 사용자가 이미 사용 중인 16개의 코딩 에이전트 CLI(Claude Code, Codex, Cursor, Gemini 등)에 작업을 위임합니다. 진짜 제품은 모델이 아니라 "프롬프트 스택" 그 자체라는 철학입니다.
1. 왜 Open Design인가
Claude Design이 매력적이지만 SaaS에 종속됩니다. Open Design은 동일한 결과물 품질을 추구하면서, 데이터·모델·런타임을 모두 사용자 쪽에 두는 것을 원칙으로 합니다.
로컬 우선(Local-first) — 노트북에서 직접 실행되며 모든 프로젝트는 .od/ 폴더 SQLite에 저장
에이전트 위임 — Claude Code, Codex, Cursor 등 이미 설치된 16개 CLI를 자동 감지해 작업 위임
모델 자유 — Anthropic, OpenAI, Azure, Google Gemini, 로컬 LLM(Ollama, vLLM) BYOK 지원
데스크톱 + 웹 + Docker — Electron 데스크톱 앱, Docker Compose, 또는 소스 빌드 모두 지원
Apache-2.0 라이선스 — 상업적 사용·수정·재배포 자유
Q. 왜 자체 에이전트를 만들지 않았나요?
사용자가 이미 더 좋은 에이전트를 갖고 있기 때문입니다. Claude Code, Cursor Agent, Codex 같은 CLI는 이미 충분히 강력하고, 매주 개선됩니다. Open Design은 그 위에 디자인 특화 프롬프트 스택과 산출물 미리보기 레이어를 얹어 "디자이너의 입" 역할만 합니다.
2. 핵심 아키텍처 — 프롬프트 스택이 곧 제품이다
Open Design의 진짜 가치는 코드가 아니라 프롬프트 합성 방식에 있습니다. 매 산출물 요청마다 다음 레이어가 결정론적으로 합쳐져 에이전트에게 전달됩니다.
시스템 프롬프트 합성 순서
Discovery 디렉티브
Turn-1 폼 + Turn-2 분기 + TodoWrite + 5차원 자기 비평 규칙
Official Designer Prompt
디자이너 정체성 헌장과 AI-slop 방지 안티패턴
활성 DESIGN.md
72개 브랜드 디자인 시스템 중 선택된 1개 (Linear/Stripe/Vercel/Apple 등)
활성 SKILL.md
31개 디자인 스킬 중 선택된 1개 (saas-landing/dashboard/deck 등)
프로젝트 메타데이터
kind, fidelity, speaker notes, animations 옵션
스킬 사이드 파일
assets/template.html + references/*.md 자동 주입
16개 CLI 어댑터와 BYOK 프록시는 언제든 갈아끼울 수 있는 부품입니다. 그러나 디스커버리·디자인 시스템·스킬·자기 비평이 합쳐진 "프롬프트 계약"은 변하지 않습니다. 모델이 바뀌어도 산출물 품질이 유지되는 이유입니다.
3. Junior-Designer 워크플로우 — AI-slop을 막는 5차원 비평
Open Design은 자유로운 생성 대신 의사결정을 앞단에 잠가두는 방식을 택합니다. 디자이너가 주니어를 가르칠 때 쓰는 구조화된 질문법을 프롬프트 스택으로 옮긴 결과입니다.
Turn-1 Discovery Form
자유 입력 대신 인터랙티브 질문지를 먼저 띄워 표면 유형, 타깃, 톤, 브랜드 컨텍스트, 스케일 제약을 확정. 후속 수정 비용을 앞단에서 차단합니다.
Turn-2 Visual Direction
브랜드 스펙이 없을 때 5가지 방향(Editorial · Modern Minimal · Tech Utility · Brutalist · Soft Warm) 중 선택. 각 방향마다 결정론적 OKLch 팔레트와 폰트 스택이 고정됩니다.
5차원 자기 비평
생성 후 Philosophy(브랜드 정합성) · Hierarchy(정보 구조) · Detail(완성도) · Function(사용성) · Innovation(개념적 신선함) 5축으로 자체 평가. 주관적 인상 대신 구조화된 근거로 피드백을 남깁니다.
Q. 자유로운 생성을 막는 게 오히려 답답하지 않나요?
AI 디자인의 가장 큰 적은 "그럴듯하지만 어디에도 못 쓰는 결과물(AI-slop)"입니다. 앞단에서 결정을 잠가두면 모델이 개선될수록 산출물 품질도 같이 올라갑니다. 자유도는 디자인 시스템 교체와 스킬 선택으로 확보합니다.
4. 31개 스킬 × 72개 디자인 시스템
스킬은 산출물의 형식, 디자인 시스템은 산출물의 톤을 결정합니다. 둘은 런타임에 자유롭게 조합할 수 있어, 같은 콘텐츠를 Linear 톤의 SaaS 랜딩으로도, Stripe 톤의 가격 페이지로도 즉시 변환합니다.
Prototype Mode (27)
saas-landing(기본) · dashboard · pricing-page · docs-page · blog-post · mobile-app · mobile-onboarding · gamified-app · email-marketing · social-carousel · sprite-animation · wireframe-sketch · pm-spec · team-okrs · meeting-notes · kanban-board · eng-runbook · finance-report · invoice · hr-onboarding 등
Deck Mode (4)
guizang-ppt(기본, 매거진 레이아웃) · simple-deck · replit-deck · weekly-update — 가로 스와이프 기반 프레젠테이션 형식
| 카테고리 | 포함된 디자인 시스템 (총 72개) |
|---|---|
| AI / LLM | Claude · Cohere · Mistral · Together AI · Ollama · X.AI |
| 개발자 도구 | Cursor · Vercel · Linear · Figma · Supabase · MongoDB · PostHog · Sanity |
| 생산성 | Notion · Miro · Airtable · Raycast · Cal |
| 핀테크 | Stripe · Coinbase · Kraken · Wise |
| 이커머스 / 라이프스타일 | Shopify · Airbnb · Uber · Nike · Starbucks · Pinterest |
| 미디어 | Spotify · PlayStation · The Verge · Meta |
| 오토모티브 | Tesla · BMW · Ferrari · Lamborghini |
| 스타터 | Default (Neutral Modern) · Warm Editorial |
각 디자인 시스템은 하나의 DESIGN.md 파일이며, color · typography · spacing · layout · components · motion · voice · brand · anti-patterns 9섹션 스키마를 따릅니다. 활성 시스템을 바꾸면 산출물이 새 토큰으로 즉시 재렌더됩니다.
5. 16개 코딩 에이전트 자동 감지 + BYOK 폴백
데몬은 시작 시 PATH를 스캔해 설치된 CLI를 자동 감지합니다. CLI가 하나도 없으면 BYOK 모드로 전환되어 직접 API 키로 작동합니다.
지원되는 CLI (16종)
Spawn 모드 vs API 모드
Spawn 모드 (CLI 감지됨)
데몬이 cwd=.od/projects/<id>/로 CLI를 spawn. 에이전트가 실제 파일시스템에서 Read · Write · Bash · WebFetch를 수행하며 결과물을 디스크에 남깁니다.
API 모드 (BYOK 폴백)
CLI가 없으면 POST /api/proxy/{anthropic|openai|azure|google}/stream을 통해 SSE로 정규화된 응답을 스트리밍. 파일시스템 권한은 없지만 채팅 루프는 동일합니다.
보안 게이트
루프백(127.0.0.1, ::1)으로 향하는 로컬 LLM 호출은 허용하되, 비루프백 사설망 · 링크-로컬 · CGNAT · 멀티캐스트 · 예약 대역 · 리다이렉트 타깃은 데몬 엣지에서 차단해 SSRF를 방지합니다. 업스트림 리다이렉트 추적도 비활성화됩니다.
6. 설치와 실행
데스크톱 앱이 가장 빠르고, Docker가 가장 재현 가능하며, 소스 빌드는 가장 자유롭습니다. 첫 실행 시 ./.od/ 런타임 폴더가 자동 생성되며, 별도의 od init 단계는 없습니다.
1) 데스크톱 앱
open-design.ai 또는 GitHub Releases에서 빌드된 앱을 내려받습니다. Node·pnpm·빌드 단계가 필요 없습니다.
2) Docker
git clone https://github.com/nexu-io/open-design.git cd open-design/deploy docker compose up -d # http://localhost:7456 열기
3) 소스에서 빌드
요구사항: Node ~24, pnpm 10.33.x
git clone https://github.com/nexu-io/open-design.git cd open-design corepack enable corepack pnpm --version # 10.33.2 확인 pnpm install pnpm tools-dev run web
4) 백그라운드 운영
pnpm tools-dev start web --daemon-port 17456 --web-port 17573 pnpm tools-dev status pnpm tools-dev logs pnpm tools-dev stop
7. 정리 — 모델보다 프롬프트 계약이 오래 간다
Open Design이 보여주는 핵심 통찰은 명확합니다. 좋은 AI 디자인 도구는 더 좋은 모델을 갖는 것이 아니라, 더 좋은 질문 ·디자인 시스템 · 자기 비평 규칙을 갖는 것입니다.
에이전트는 갈아끼울 수 있다 — Claude Code든 Cursor든 BYOK든 동일한 디자인 계약을 따른다
디자인 시스템은 토큰이다 — 72개 DESIGN.md를 즉시 교체하면 같은 결과물이 새 톤으로 재렌더된다
스킬은 형식이다 — 31개 SKILL.md가 같은 콘텐츠를 SaaS 랜딩, 대시보드, 덱으로 변환한다
AI-slop을 막는 건 자유가 아니라 구조다 — 디스커버리·5차원 비평이 결정론적 품질을 만든다
로컬 우선은 데이터 주권이다 — .od/ SQLite와 BYOK가 벤더 락인 없이 산출물을 사용자 손에 둔다