Open Design (OD)는 Anthropic의 폐쇄형 Claude Design에 대한 오픈 소스 대안으로 개발된 프로젝트입니다. 이는 'artifact-first mental model'을 유지하면서도 공급업체 종속(lock-in) 없이 로컬 실행, Vercel 배포, 그리고 모든 계층에서의 BYOK(Bring Your Own Key)를 가능하게 합니다. OD는 자체 에이전트를 제공하지 않고, 사용자의 시스템에 설치된 Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI와 같은 15가지 코딩 에이전트 CLI를 자동으로 감지하여 디자인 엔진으로 활용합니다. CLI가 없는 경우, OpenAI 호환 BYOK 프록시를 통해 동일한 기능을 수행합니다.

핵심 방법론 및 기술적 특징:

OD의 핵심은 고도로 구성 가능한 프롬프트 스택(prompt stack)을 통해 AI가 파일 시스템, 결정론적 팔레트 라이브러리, 그리고 체크리스트 문화를 갖춘 시니어 디자이너처럼 동작하도록 훈련시키는 것입니다. 이 아키텍처는 네 가지 오픈 소스 프로젝트의 아이디어를 계승합니다:

1. alchaincyf/huashu-design: 주니어 디자이너 워크플로우, 5단계 브랜드 자산 프로토콜, anti-AI-slop 체크리스트, 5차원 자체 비평(5-dimensional self-critique), 그리고 시각적 방향 선택기의 기반이 되는 "5 schools × 20 design philosophies" 아이디어를 통합합니다.
2. op7418/guizang-ppt-skill: 'deck mode'의 기반이 되며, 매거진 스타일 레이아웃, WebGL hero 섹션, P0/P1/P2 체크리스트 등을 제공합니다.
3. OpenCoworkAI/open-codesign: UX의 북극성으로, 스트리밍 아티팩트 루프, 샌드박스드 iframe 프리뷰, 라이브 에이전트 패널(작업 목록, 툴 호출, 인터럽트 가능한 생성), 그리고 5가지 형식(HTML, PDF, PPTX, ZIP, Markdown)의 내보내기 기능을 차용합니다. OD는 이와 달리 웹 애플리케이션과 로컬 데몬 아키텍처를 채택하여 기존 CLI 에이전트에 위임합니다.
4. multica-ai/multica: 데몬 및 런타임 아키텍처, PATH 스캔 에이전트 감지, 로컬 데몬의 privileged process 역할, 에이전트를 팀원으로 보는 관점을 제공합니다.

핵심 아이디어 (Six Load-Bearing Ideas):

5. 에이전트를 제공하지 않음: 데몬은 시작 시 PATH를 스캔하여 설치된 코딩 에이전트 CLI를 감지하고, 이들을 스왑 가능한 디자인 엔진으로 사용합니다. 설치된 CLI가 없는 경우, /api/proxy/{provider}/stream 엔드포인트를 통해 Anthropic, OpenAI 호환, Azure OpenAI, Google Gemini와 같은 BYOK API를 활용하여 동일한 파이프라인을 구현합니다. 이 프록시는 내부 IP 또는 SSRF 공격을 차단합니다.
6. Skill은 파일 기반: 각 Skill은 Claude Code의 SKILL.md 컨벤션을 따르며, skills/ 폴더에 SKILL.md 파일과 관련 asset, reference를 포함하는 폴더 구조로 관리됩니다. 데몬을 재시작하면 새로운 Skill이 감지됩니다.
7. 디자인 시스템은 휴대 가능한 Markdown: VoltAgent/awesome-design-md의 9개 섹션 DESIGN.md 스키마(색상, 타이포그래피, 간격, 레이아웃 등)를 따릅니다. 72개의 내장 시스템과 awesome-design-skills에서 가져온 57개의 디자인 스킬이 제공됩니다. 에이전트는 활성화된 디자인 시스템을 기반으로 아티팩트를 렌더링합니다.
8. 대화형 질문 양식(interactive question form): 초기 디자인 브리핑 시 discovery 양식을 통해 '표면(surface), 대상(audience), 톤(tone), 브랜드 컨텍스트(brand context), 스케일(scale), 제약(constraints)' 등을 명확히 합니다. 이는 잘못된 방향으로의 진행을 초기에 차단하며, 'Junior-Designer' 모드로 저렴한 비용으로 방향을 재설정할 수 있게 합니다.
9. 데몬 아키텍처: 데몬은 에이전트 CLI를 프로젝트의 아티팩트 폴더($~/.od/projects/<id>/$)에서 실행하며, 에이전트는 Read, Write, Bash, WebFetch와 같은 실제 파일 시스템 접근 권한을 가집니다. 이를 통해 에이전트가 template.html 읽기, CSS에서 16진수 값 추출, brand-spec.md 작성, 이미지 생성 및 .pptx, .zip, .pdf 파일 생성을 수행할 수 있습니다. 세션, 대화, 메시지, 탭은 로컬 SQLite DB(~/.od/app.sqlite)에 지속적으로 저장됩니다.
10. 프롬프트 스택이 핵심 제품: 전송 시 구성되는 프롬프트는 단순한 'system + user'가 아닙니다. 이는 DISCOVERY 지시어(turn-1 form, turn-2 brand branch, TodoWrite, 5차원 비평), identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass), 활성 DESIGN.md, 활성 SKILL.md, 프로젝트 메타데이터, Skill side file(자동 주입되는 assets/template.html, references/*.md 등) 및 DECK_FRAMEWORK_DIRECTIVE의 조합입니다. 각 계층은 구성 가능하며 편집 가능한 파일로 존재합니다.

아키텍처 스택:

• Frontend: Next.js 16 App Router + React 18 + TypeScript로 구축되어 Vercel에 배포 가능합니다.
• Daemon: Node 24, Express, SSE 스트리밍, better-sqlite3를 사용하며, SQLite는 프로젝트, 대화, 메시지, 탭, 템플릿 정보를 저장합니다.
• Agent Transport: child_process.spawn을 통해 CLI를 실행하며, 각 에이전트의 출력 형식(예: claude-stream-json, copilot-stream-json, json-event-stream, acp-json-rpc, pi-rpc, plain)에 맞는 파서가 사용됩니다.
• BYOK Proxy: POST /api/proxy/{anthropic,openai,azure,google}/stream 엔드포인트를 통해 provider별 상위 API에 요청을 전달하고, delta/end/error SSE를 정규화합니다.
• Storage: $.od/projects/<id>/$ 내의 일반 파일 시스템과 .od/app.sqlite SQLite DB를 사용하며, API 키 등은 .od/media-config.json에 저장됩니다.
• Preview: srcdoc을 이용한 샌드박스드 iframe 및 Skill별 $<artifact>$ 파서를 통해 렌더링됩니다.
• Export: HTML (인라인 asset), PDF (브라우저 프린트), PPTX (에이전트 구동), ZIP, Markdown 형식으로 내보내기 가능합니다.
• Lifecycle: pnpm tools-dev 명령어를 통해 시작(start), 중지(stop), 실행(run), 상태 확인(status), 로그 확인(logs), 검사(inspect), 점검(check) 등 데몬 및 웹 서비스의 라이프사이클을 관리합니다.
• Desktop (Optional): Electron 셸을 제공하여 웹 URL을 사이드카 IPC를 통해 자동 감지하며, E2E 테스트를 위한 기능(STATUS, EVAL, SCREENSHOT, CONSOLE, CLICK, SHUTDOWN)을 지원합니다.

Open Design은 로컬 데몬과 웹 아키텍처를 공유하는 웹 앱 또는 Electron 데스크톱 애플리케이션으로 실행될 수 있습니다. pnpm tools-dev run web 명령어로 웹 인터페이스를 시작하거나, pnpm tools-dev만으로 데스크톱 앱을 실행할 수 있습니다. 또한, Open Design은 stdio MCP(Multi-Client Protocol) 서버를 제공하여 Claude Code, Codex, Cursor 등 다른 코딩 에이전트와 직접 연동하여 파일 읽기 및 프로젝트 동기화를 가능하게 합니다. MCP 서버는 읽기 전용으로, 파일 읽기, 메타데이터, 검색 기능을 노출하여 디자인 작업 흐름을 효율적으로 만듭니다.