Open Design: Anthropic의 Claude Design을 대체하는 오픈소스 AI 디자인 도구

9bow · 4월 30, 2026, 12:30오전

Open Design 소개

2026년 4월 Anthropic이 공개한 Claude Design은 LLM이 산문이 아닌 디자인 아티팩트(Design Artifact) 를 직접 생성할 수 있다는 가능성을 보여주며 큰 주목을 받았습니다. 하지만 Claude Design은 클라우드 전용, 유료, 비공개 소스라는 제약이 있어 셀프 호스팅이나 자체 모델 연동이 불가능합니다. Open Design(OD) 은 이러한 제약을 해소하기 위해 탄생한 오픈소스 대안입니다. 로컬 우선(Local-first) 설계를 채택하여 사용자의 컴퓨터에서 직접 실행되며, Vercel 등 클라우드 배포도 지원합니다. 모든 계층에서 BYOK(Bring Your Own Key) 방식을 적용하여 특정 제공업체에 대한 종속 없이 자유롭게 사용할 수 있습니다.

Open Design의 핵심 철학은 별도의 AI 에이전트를 번들링하지 않는다는 것입니다. 대신 사용자가 이미 설치한 코딩 에이전트(Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen) 를 디자인 엔진으로 활용합니다. 데몬이 시작될 때 사용자의 PATH에서 지원되는 CLI를 자동으로 감지하고, 해당 에이전트를 스킬 기반 디자인 워크플로우에 연결합니다. CLI가 없는 환경에서는 Anthropic API를 BYOK 폴백으로 사용할 수 있어 어떤 환경에서든 동작합니다. 이 접근법 덕분에 사용자는 이미 익숙한 도구의 생태계를 그대로 유지하면서 디자인 역량을 추가할 수 있습니다.

Open Design는 네 가지 오픈소스 프로젝트를 기반으로 구축되었습니다. huashu-design에서 주니어 디자이너 워크플로우와 5차원 자기 비평 체계를 차용했고, guizang-ppt-skill에서 매거진 스타일 프레젠테이션 스킬을 번들링했습니다. open-codesign에서 스트리밍 아티팩트 루프와 샌드박스 미리보기 패턴을 도입했으며, multica에서 데몬 기반 에이전트 아키텍처를 채택했습니다. 19개의 조합 가능한 스킬(Skill) 과 71개의 브랜드 수준 디자인 시스템(Design System) 을 내장하고 있어, 프로토타입부터 프레젠테이션 덱, 모바일 앱, 대시보드까지 다양한 디자인 결과물을 생성할 수 있습니다.

Open Design과 Claude Design, Open CoDesign 비교

Open Design이 해결하려는 문제를 이해하기 위해, Anthropic의 Claude Design 및 또 다른 오픈소스 대안인 Open CoDesign과 비교해 보겠습니다.

특징	Claude Design (Anthropic)	Open CoDesign	Open Design
라이선스	비공개	MIT	Apache-2.0
형태	웹 (claude.ai)	데스크톱 (Electron)	웹 앱 + 로컬 데몬
Vercel 배포	불가	불가	가능
에이전트 런타임	내장 (Opus 4.7)	내장 (pi-ai)	사용자의 기존 CLI에 위임
스킬	비공개	12개 커스텀 모듈	19개 파일 기반 스킬
디자인 시스템	비공개	DESIGN.md (로드맵)	71개 시스템 내장
제공업체 유연성	Anthropic 전용	7개 이상	에이전트가 지원하는 모든 제공업체
초기 질문 폼	미지원	미지원	지원 (Turn-1 규칙)
시각 방향 선택기	미지원	미지원	5개 방향 제공
5차원 자기 비평	미지원	미지원	출력 전 검증
내보내기 형식	제한적	HTML/PDF/PPTX/ZIP/MD	HTML/PDF/PPTX/ZIP/MD

Open Design은 Claude Design의 아티팩트 기반 디자인 루프를 재현하면서도, 에이전트 선택의 자유도와 스킬·디자인 시스템의 확장성에서 차별화됩니다. Open CoDesign과는 UX 패턴을 공유하지만, Electron 앱 대신 웹 앱 + 로컬 데몬 형태를 채택하여 배포 유연성을 높였습니다.

Open Design의 스킬 기반 디자인 워크플로우

Open Design의 디자인 워크플로우는 사용자가 프롬프트를 입력하는 순간부터 체계적으로 구성되어 있습니다. 첫 번째 턴에서 에이전트는 코드나 디자인을 생성하는 대신 인터랙티브 질문 폼(Question Form) 을 먼저 표시합니다. 이 폼에서 디자인 대상, 타겟 청중, 톤, 브랜드 컨텍스트, 규모 등을 30초 내에 라디오 버튼으로 확정합니다. 이 단계가 디자인 방향 변경으로 인한 재작업의 80%를 방지합니다.

사용자에게 별도의 브랜드 가이드가 없는 경우, 에이전트는 5가지 큐레이팅된 시각 방향(Visual Direction) 을 제시하는 두 번째 폼을 표시합니다. Editorial Monocle(인쇄 매거진 스타일), Modern Minimal(Linear/Vercel 스타일), Tech Utility(터미널/정보 밀도), Brutalist(거친 타이포그래피), Soft Warm(노션/애플 헬스 스타일) 중 하나를 선택하면, 각 방향에 미리 정의된 OKLch 팔레트와 폰트 스택이 결정론적으로 적용됩니다. 모델이 즉흥적으로 색상을 선택하는 것이 아니라 검증된 디자인 체계를 따르는 것입니다.

방향이 결정되면 에이전트는 TodoWrite 계획을 실시간으로 스트리밍하며, 진행 상황이 라이브 카드 형태로 UI에 표시됩니다. 사용자는 작업 도중에도 방향을 변경할 수 있어, 완성된 결과물을 확인한 후 처음부터 다시 시작하는 비용을 피할 수 있습니다. 최종 결과물은 샌드박스 iframe에서 즉시 렌더링되며, HTML, PDF, PPTX, ZIP 형식으로 내보낼 수 있습니다.

Open Design의 19가지 내장 스킬

Open Design에는 19개의 스킬이 내장되어 있으며, 각 스킬은 Claude Code의 SKILL.md 규약을 따르는 폴더 하나로 구성됩니다. 스킬은 크게 디자인 표면(Design Surface) 과 문서/업무 산출물(Document/Work-product) 두 가지 범주로 나뉩니다.

디자인 표면 스킬에는 웹 프로토타입(Web Prototype), SaaS 랜딩 페이지, 대시보드(Dashboard), 가격 페이지, 문서 페이지, 블로그 포스트, 모바일 앱 등이 포함됩니다. 특히 guizang-ppt 스킬은 매거진 스타일의 웹 프레젠테이션을 생성하며, WebGL 히어로 배경과 P0/P1/P2 체크리스트 문화를 제공합니다. 문서 스킬로는 PM 스펙, 주간 업데이트, 회의록, 엔지니어링 런북, 재무 보고서, HR 온보딩, 인보이스, 칸반 보드, OKR 스코어시트 등 10가지 템플릿이 있습니다.

새로운 스킬을 추가하는 것도 간단합니다. skills/ 디렉토리에 SKILL.md 파일과 에셋을 포함한 폴더를 추가하고 데몬을 재시작하면 선택기에 자동으로 나타납니다. 기존 스킬을 포크하여 수정하는 것도 가능하며, 확장된 od: 프론트매터를 통해 모드, 플랫폼, 시나리오, 미리보기, 디자인 시스템 등을 세밀하게 제어할 수 있습니다.

Open Design의 71개 디자인 시스템 라이브러리

Open Design는 71개의 브랜드 수준 디자인 시스템을 내장하고 있으며, 각 시스템은 단일 DESIGN.md 파일로 정의됩니다. 이 파일은 색상, 타이포그래피, 간격, 레이아웃, 컴포넌트, 모션, 보이스, 브랜드, 안티패턴의 9개 섹션으로 구성된 표준 스키마를 따릅니다. 디자인 시스템을 전환하면 다음 렌더링부터 새로운 토큰이 즉시 적용됩니다.

내장된 디자인 시스템은 AI/LLM 분야(Claude, Cohere, Mistral AI, Replicate, ElevenLabs, X.AI 등), 개발자 도구(Cursor, Vercel, Linear, Supabase, PostHog, Sentry 등), 생산성 도구(Notion, Figma, Miro, Raycast 등), 핀테크(Stripe, Coinbase, Revolut 등), 이커머스(Shopify, Airbnb, Nike 등), 미디어(Spotify, PlayStation 등), 자동차(Tesla, BMW, Ferrari 등) 등 다양한 산업 분야를 포괄합니다. 이 라이브러리는 VoltAgent/awesome-design-md 프로젝트에서 가져온 것으로, 동기화 스크립트를 통해 업데이트할 수 있습니다.

Open Design의 Anti-AI-Slop 품질 관리 체계

AI가 생성한 디자인에서 흔히 나타나는 저품질 패턴, 이른바 AI 슬롭(AI Slop) 을 방지하기 위해 Open Design은 체계적인 품질 관리 메커니즘을 갖추고 있습니다. 이 체계는 huashu-design 프로젝트의 플레이북을 기반으로 구현되었습니다.

첫째, 에이전트가 아티팩트를 출력하기 전에 철학(Philosophy), 위계(Hierarchy), 실행(Execution), 구체성(Specificity), 절제(Restraint) 의 5개 차원에서 1~5점으로 자체 평가합니다. 3점 미만인 차원이 있으면 회귀로 판단하여 수정 후 재평가합니다. 둘째, 각 스킬에는 references/checklist.md 파일에 P0(필수)/P1/P2 게이트가 정의되어 있어, P0 조건을 통과해야만 결과물이 출력됩니다. 셋째, 공격적인 보라색 그라데이션, 일반적인 이모지 아이콘, 좌측 테두리 강조 카드, 손그림 SVG 인물, Inter 폰트의 디스플레이용 사용, 가짜 수치 등이 프롬프트 수준에서 명시적으로 금지됩니다. 실제 데이터가 없을 때는 "10배 더 빠릅니다" 같은 가짜 통계 대신 — 기호나 레이블이 붙은 회색 블록을 사용합니다.

Open Design의 아키텍처

Open Design는 브라우저 프론트엔드, 로컬 데몬, 코딩 에이전트의 3계층 아키텍처로 구성됩니다.

┌────────────────────────── 브라우저 ─────────────────────────────┐
│                                                                │
│   Vite + React SPA  (채팅 · 파일 워크스페이스 · iframe 미리보기)   │
│                                                                │
└──────────────┬───────────────────────────────────┬─────────────┘
               │ /api/* (개발 시 프록시)             │ 직접 연결 (BYOK)
               ▼                                   ▼
   ┌──────────────────────┐              ┌──────────────────────┐
   │   로컬 데몬            │              │   Anthropic SDK      │
   │   (Express + SQLite) │              │   (브라우저 폴백)      │
   │                      │              └──────────────────────┘
   │   /api/agents        │
   │   /api/skills        │
   │   /api/design-systems│
   │   /api/projects/...  │
   │   /api/chat (SSE)    │
   │                      │
   └─────────┬────────────┘
             │ spawn(cli, [...], { cwd: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · gemini · opencode · qwen│
   │  SKILL.md + DESIGN.md를 읽고 아티팩트를 디스크에 기록      │
   └──────────────────────────────────────────────────────────┘

프론트엔드는 Vite 5 + React 18 + TypeScript로 구축되어 채팅, 파일 워크스페이스, 샌드박스 iframe 미리보기를 제공합니다. 로컬 데몬은 Node 18 이상에서 Express로 동작하며, better-sqlite3를 사용하여 프로젝트, 대화, 메시지, 탭 정보를 저장합니다. 에이전트는 child_process.spawn으로 실행되며, Claude Code의 경우 claude-stream-json 파서를 통한 타입 이벤트 스트리밍을, 나머지 CLI는 라인 버퍼 방식의 일반 stdout을 사용합니다. 데몬이 에이전트를 프로젝트의 아티팩트 폴더(.od/projects/<id>/) 에서 실행하기 때문에, 에이전트는 실제 파일 시스템에서 Read, Write, Bash, WebFetch 도구를 사용할 수 있습니다.

Open Design 설치 및 사용법

Open Design을 시작하려면 Node.js 18 이상과 pnpm(또는 npm)이 필요합니다. 다음 3개의 명령어로 설치와 실행이 완료됩니다.

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/ 디렉토리를 자동으로 생성합니다.

프롬프트를 입력하고 Send 를 누르면 질문 폼이 도착하고, 폼을 작성하면 할 일 카드가 실시간으로 스트리밍되며, 아티팩트가 렌더링됩니다. 완성된 결과물은 Save to disk 버튼으로 저장하거나 프로젝트 ZIP으로 다운로드할 수 있습니다.

라이선스

이 프로젝트는 Apache-2.0 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. 번들된 skills/guizang-ppt/ 스킬은 원본 MIT 라이선스와 저작자 표시를 유지하고 있습니다.

Open Design 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~

wsh096 · 5월 1, 2026, 7:55오전

정말 요즘 제가 자주 하는 말이 AGI 몇 년 안 남았다가 아니라, 며칠 안 남았다인데, 상용서비스가 있으면, Free Service가 또 나오고 하는 이 현상이 저는 너무 좋고 즐겁네요 아티클 잘 봤습니다

늘 감사합니다