46 KiB
Open Design
Claude Design의 오픈소스 대안. 로컬 우선, Vercel 배포 가능, 모든 레이어에서 BYOK — 이미 설치된 코딩 에이전트(Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI)가 19개의 조합 가능한 Skill과 71개의 브랜드급 디자인 시스템으로 구동되는 디자인 엔진이 됩니다.
왜 만들었는가
Anthropic의 Claude Design(2026-04-17 출시, Opus 4.7 기반)은 LLM이 장문의 글쓰기를 멈추고 디자인 산출물을 직접 내놓기 시작했을 때 어떤 일이 일어나는지 보여주었습니다. 순식간에 화제가 되었지만, 여전히 클로즈드 소스, 유료, 클라우드 전용, Anthropic 모델과 Anthropic 내부 skill에 종속된 상태입니다. 체크아웃도, 자가 호스팅도, Vercel 배포도, 에이전트 교체도 불가능합니다.
Open Design(OD)은 그 오픈소스 대안입니다. 동일한 루프, 동일한 '아티팩트 우선' 사고방식, 락인 없음. 에이전트를 직접 만들지 않습니다 — 가장 강력한 코딩 에이전트는 이미 여러분의 노트북에 있습니다. 우리는 그것을 skill 기반 디자인 워크플로에 연결할 뿐입니다. 로컬에서는 pnpm tools-dev로 실행하고, 웹 레이어는 Vercel에 배포할 수 있으며, 모든 레이어에서 BYOK(자체 키 사용)가 가능합니다.
시드 라운드를 위한 매거진 스타일 피치덱 만들어줘라고 입력하세요. 모델이 픽셀 하나 그리기 전에 초기화 질문 폼이 먼저 등장합니다. 에이전트는 5개의 엄선된 시각적 방향 중 하나를 선택합니다. 실시간 TodoWrite 계획 카드가 UI에 스트리밍됩니다. Daemon이 디스크에 실제 프로젝트 폴더를 생성하며, seed 템플릿, 레이아웃 라이브러리, 자가 점검 체크리스트가 포함됩니다. 에이전트는 pre-flight를 강제로 읽고, 자신의 출력물에 대해 5차원 검토를 실행하며, 몇 초 후 샌드박스 iframe에 렌더링되는 단일 <artifact>를 내보냅니다.
이건 "AI가 디자인을 시도한다"가 아닙니다. 프롬프트 스택에 의해 훈련된 AI가 사용 가능한 파일시스템, 결정론적 팔레트 라이브러리, 체크리스트 문화를 갖춘 수석 디자이너처럼 동작하는 것입니다 — Claude Design이 세운 기준 그대로, 하지만 오픈소스로, 여러분의 것으로.
OD는 네 개의 오픈소스 프로젝트 어깨 위에 서 있습니다:
alchaincyf/huashu-design— 디자인 철학의 나침반. Junior-Designer 워크플로, 5단계 브랜드 에셋 프로토콜, anti-AI-slop 체크리스트, 5차원 자기 검토, 그리고 방향 선택기 뒤에 있는 "5개 학파 × 20가지 디자인 철학" 아이디어 — 모두apps/web/src/prompts/discovery.ts에 녹아들었습니다.op7418/guizang-ppt-skill— 덱 모드.skills/guizang-ppt/아래에 원본 그대로 번들됨, 원 LICENSE 보존; 매거진 레이아웃, WebGL hero, P0/P1/P2 체크리스트.OpenCoworkAI/open-codesign— UX의 북극성이자 가장 가까운 동류. 최초의 오픈소스 Claude-Design 대안. 스트리밍 아티팩트 루프, 샌드박스 iframe 미리보기 패턴(React 18 + Babel 내장), 실시간 에이전트 패널(todos + tool calls + 중단 가능한 생성), 5가지 내보내기 형식(HTML / PDF / PPTX / ZIP / Markdown)을 차용했습니다. 폼 팩터에서는 의도적으로 차별화했습니다 — 그쪽은pi-ai를 번들링한 Electron 데스크탑 앱이고, 우리는 에이전트 런타임을 이미 설치된 CLI에 위임하는 웹앱 + 로컬 daemon입니다.multica-ai/multica— Daemon 및 런타임 아키텍처. PATH 스캔 방식의 에이전트 감지, 단일 특권 프로세스로서의 로컬 daemon, 에이전트-동료 세계관.
한눈에 보기
| 제공 내용 | |
|---|---|
| 지원 코딩 에이전트 | Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · GitHub Copilot CLI · Anthropic API(BYOK 대체) |
| 내장 디자인 시스템 | 71개 — 2개의 수작업 스타터 + awesome-design-md에서 가져온 69개의 제품 시스템(Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, …) |
| 내장 Skill | 19개 — 프로토타입, 덱, 모바일, 대시보드, 가격 책정, 문서, 블로그, SaaS 랜딩, 그리고 10개의 문서/업무 산출물 템플릿(PM 스펙, 주간 업데이트, OKR, 런북, 칸반, …) |
| 시각적 방향 | 5개의 엄선된 학파(Editorial Monocle · Modern Minimal · Tech Utility · Brutalist · Soft Warm) — 각각 결정론적 OKLch 팔레트 + 폰트 스택 제공 |
| 기기 프레임 | iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome — 픽셀 정확도, 스킬 간 공유 |
| 에이전트 런타임 | 로컬 daemon이 프로젝트 폴더에서 CLI를 실행 — 에이전트가 실제 디스크 환경에 대한 실제 Read, Write, Bash, WebFetch 도구를 사용 |
| 배포 대상 | 로컬(pnpm tools-dev) · Vercel 웹 레이어 · daemon 정적 서빙 프로덕션 |
| 라이선스 | Apache-2.0 |
데모
 진입 화면 — skill 선택, 디자인 시스템 선택, 브리프 입력. 프로토타입, 덱, 모바일 앱, 대시보드, 에디토리얼 페이지를 위한 동일한 인터페이스. |
 Turn-1 초기화 폼 — 모델이 픽셀 하나 그리기 전에 OD가 브리프를 확정합니다: 화면, 대상, 톤, 브랜드 컨텍스트, 규모. 30초의 라디오 버튼 클릭이 30분의 수정 작업을 대체합니다. |
 방향 선택기 — 사용자에게 브랜드가 없을 때, 에이전트가 두 번째 폼을 띄워 5개의 엄선된 방향(Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm)을 제시합니다. 라디오 하나 클릭 → 결정론적 팔레트 + 폰트 스택, 모델 자유 재량 없음. |
 실시간 할 일 진행 상황 — 에이전트의 계획이 실시간 카드로 스트리밍됩니다. in_progress → completed 업데이트가 실시간으로 반영됩니다. 작업 중에도 저렴한 비용으로 방향을 조정할 수 있습니다.
|
 샌드박스 미리보기 — 모든 <artifact>가 깨끗한 srcdoc iframe에서 렌더링됩니다. 파일 워크스페이스에서 바로 편집 가능; HTML, PDF, ZIP으로 다운로드 가능.
|
 71개 시스템 라이브러리 — 모든 제품 시스템이 4색 시그니처를 표시합니다. 클릭하면 전체 DESIGN.md, 색상 견본 그리드, 라이브 쇼케이스를 볼 수 있습니다.
|
 덱 모드(guizang-ppt) — 번들된 guizang-ppt-skill이 그대로 들어갑니다. 매거진 레이아웃, WebGL 히어로 배경, 단일 파일 HTML 출력, PDF 내보내기.
|
 모바일 프로토타입 — 픽셀 정확도의 iPhone 15 Pro 크롬(Dynamic Island, 상태바 SVG, 홈 인디케이터). 다화면 프로토타입은 공유 /frames/ 에셋을 사용하므로 에이전트가 폰을 다시 그릴 필요가 없습니다.
|
내장 Skills
19개의 skill이 기본 제공됩니다. 각각은 Claude Code의 SKILL.md 규약을 따르는 skills/ 아래의 폴더이며, 확장된 od: 프론트매터(mode, platform, scenario, preview, design_system)를 포함합니다.
쇼케이스 예시
시각적으로 가장 눈에 띄어 먼저 실행해 볼 skill들입니다. 각각은 저장소에서 바로 열 수 있는 실제 example.html을 제공합니다 — 인증 없이, 설정 없이, 에이전트가 무엇을 생산하는지 미리 확인할 수 있습니다.
 dating-web · prototype소비자용 데이팅/매칭 대시보드 — 좌측 레일 내비게이션, 티커 바, KPI, 30일 상호 매칭 차트, 에디토리얼 타이포그래피. |
 digital-eguide · template2페이지 디지털 e-가이드 — 표지(제목, 저자, TOC 티저) + 풀 쿼트 및 단계 목록이 있는 레슨 스프레드. 크리에이터/라이프스타일 톤. |
 email-marketing · prototype브랜드 제품 출시 HTML 이메일 — 마스트헤드, 히어로 이미지, 헤드라인 락업, CTA, 스펙 그리드. 중앙 단일 컬럼, 테이블 폴백 지원. |
 gamified-app · prototype다크 쇼케이스 스테이지의 3화면 게임화 모바일 앱 프로토타입 — 표지, 오늘의 퀘스트(XP 리본 + 레벨 바), 퀘스트 상세. |
 mobile-onboarding · prototype3화면 모바일 온보딩 플로우 — 스플래시, 가치 제안, 로그인. 상태바, 스와이프 점, 기본 CTA. |
 motion-frames · prototype루핑 CSS 애니메이션의 단일 프레임 모션 디자인 히어로 — 회전 타입 링, 애니메이션 글로브, 째깍거리는 타이머. HyperFrames 핸드오프 준비 완료. |
 social-carousel · prototype3장의 1080×1080 소셜 미디어 캐러셀 — 시리즈를 가로지르는 표시 헤드라인이 있는 영화적 패널, 브랜드 마크, 루프 어포던스. |
 sprite-animation · prototype픽셀/8비트 애니메이션 설명 슬라이드 — 전면 크림 스테이지, 애니메이션 픽셀 마스코트, 역동적인 일본어 표시 타이포그래피, 루핑 CSS 키프레임. |
디자인 산출물 유형
| Skill | Mode | 기본 용도 | 생산물 |
|---|---|---|---|
web-prototype |
prototype | 데스크탑 | 단일 페이지 HTML — 랜딩, 마케팅, 히어로 페이지 |
saas-landing |
prototype | 데스크탑 | Hero / features / pricing / CTA 마케팅 레이아웃 |
dashboard |
prototype | 데스크탑 | 사이드바 + 데이터 밀집 레이아웃의 어드민/분석 |
pricing-page |
prototype | 데스크탑 | 독립형 가격 + 비교 테이블 |
docs-page |
prototype | 데스크탑 | 3컬럼 문서 레이아웃 |
blog-post |
prototype | 데스크탑 | 에디토리얼 장문 |
mobile-app |
prototype | 모바일 | iPhone 15 Pro / Pixel 프레임 앱 화면 |
simple-deck |
deck | 데스크탑 | 미니멀 수평 스와이프 덱 |
guizang-ppt |
deck | 덱 기본 | 매거진 스타일 웹 PPT — op7418/guizang-ppt-skill에서 번들됨 |
문서/업무 산출물 유형
| Skill | Mode | 생산물 |
|---|---|---|
pm-spec |
template | TOC + 의사결정 로그가 있는 PM 스펙 문서 |
weekly-update |
template | 진행 사항 / 블로커 / 다음 단계가 있는 팀 주간 업데이트 |
meeting-notes |
template | 회의 의사결정 로그 |
eng-runbook |
template | 장애 런북 |
finance-report |
template | 임원 재무 요약 |
hr-onboarding |
template | 역할 온보딩 계획 |
invoice |
template | 단일 페이지 인보이스 |
kanban-board |
template | 보드 스냅샷 |
team-okrs |
template | OKR 스코어시트 |
skill 추가는 폴더 하나면 됩니다. docs/skills-protocol.md에서 확장 프론트매터를 읽고, 기존 skill을 포크하고, daemon을 재시작하면 선택기에 나타납니다.
6가지 핵심 아이디어
1 · 에이전트를 제공하지 않습니다. 여러분의 것으로 충분합니다.
Daemon은 시작 시 PATH에서 claude, codex, cursor-agent, gemini, opencode, qwen, copilot을 스캔합니다. 찾은 것이 디자인 엔진이 됩니다 — stdio를 통해 구동되며, CLI당 하나의 어댑터. multica와 cc-switch에서 영감을 받았습니다. CLI가 없다면? Anthropic API · BYOK가 spawn만 없는 동일한 파이프라인입니다.
2 · Skill은 파일이지 플러그인이 아닙니다.
Claude Code의 SKILL.md 규약을 따라 각 skill은 SKILL.md + assets/ + references/입니다. skills/에 폴더를 드롭하고 daemon을 재시작하면 선택기에 나타납니다. 번들된 magazine-web-ppt는 op7418/guizang-ppt-skill을 그대로 커밋한 것입니다 — 원본 라이선스와 저작권 표시 보존.
3 · 디자인 시스템은 테마 JSON이 아닌 이식 가능한 Markdown입니다.
VoltAgent/awesome-design-md의 9섹션 DESIGN.md 스키마 — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. 모든 아티팩트가 활성 시스템에서 읽습니다. 시스템 전환 → 다음 렌더에 새 토큰 사용. 드롭다운에는 Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Cohere, Mistral, ElevenLabs, X.AI, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, ClickHouse, Cal, Replicate, Clay, Composio… 총 71개가 있습니다.
4 · 초기화 질문 폼이 수정 작업의 80%를 막아줍니다.
OD의 프롬프트 스택에는 RULE 1이 하드코딩되어 있습니다: 모든 새 디자인 브리프는 코드 대신 <question-form id="discovery">로 시작합니다. 화면 · 대상 · 톤 · 브랜드 컨텍스트 · 규모 · 제약 조건. 긴 브리프라도 시각적 톤, 색상 입장, 규모 같은 디자인 결정 사항은 여전히 열려 있습니다 — 폼이 정확히 이것들을 30초 안에 고정합니다. 잘못된 방향의 비용은 한 번의 채팅 라운드이지, 완성된 덱 하나가 아닙니다.
이것이 huashu-design에서 추출한 Junior-Designer 모드입니다: 미리 일괄 질문하고, 일찍 가시적인 것을 보여주며(와이어프레임에 회색 블록이라도), 사용자가 저렴한 비용으로 방향을 바꿀 수 있도록 합니다. 브랜드 에셋 프로토콜(위치 파악 · 다운로드 · grep hex · brand-spec.md 작성 · 발성)과 결합하면, 출력이 "AI 자유 창작"에서 "그리기 전에 주의를 기울인 디자이너"처럼 느껴지게 되는 가장 큰 이유입니다.
5 · Daemon은 에이전트가 여러분의 노트북에 있는 것처럼 느끼게 합니다. 실제로 그러니까요.
Daemon은 프로젝트의 아티팩트 폴더 .od/projects/<id>/로 cwd를 설정해 CLI를 spawn합니다. 에이전트는 실제 파일시스템에 대한 실제 도구인 Read, Write, Bash, WebFetch를 사용합니다. skill의 assets/template.html을 Read하고, CSS에서 hex 값을 grep하고, brand-spec.md를 작성하고, 생성된 이미지를 저장하고, .pptx / .zip / .pdf 파일을 생성할 수 있습니다. 이 파일들은 턴이 끝날 때 파일 워크스페이스에 다운로드 칩으로 나타납니다. 세션, 대화, 메시지, 탭은 로컬 SQLite DB에 영구 저장됩니다 — 내일 프로젝트를 열면 에이전트의 할 일 카드가 어제 멈춘 곳에 그대로 있습니다.
6 · 프롬프트 스택 자체가 제품입니다.
전송 시 구성되는 것은 "system + user"가 아닙니다. 다음과 같습니다:
DISCOVERY 지시문 (turn-1 폼, turn-2 브랜드 분기, TodoWrite, 5차원 검토)
+ 신원 헌장 (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ 활성 DESIGN.md (71개 시스템 사용 가능)
+ 활성 SKILL.md (19개 skill 사용 가능)
+ 프로젝트 메타데이터 (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill 사이드 파일 (pre-flight 자동 주입: assets/template.html + references/*.md 읽기)
+ (덱 kind, skill seed 없음) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
모든 레이어는 조합 가능합니다. 모든 레이어는 편집 가능한 파일입니다. 실제 계약을 보려면 apps/web/src/prompts/system.ts와 apps/web/src/prompts/discovery.ts를 읽으세요.
아키텍처
┌────────────────────────── 브라우저 ─────────────────────────────┐
│ │
│ Next.js 16 App Router (채팅 · 파일 워크스페이스 · iframe 미리보기) │
│ │
└──────────────┬───────────────────────────────────┬─────────────┘
│ /api/* (개발 시 rewritten) │ direct (BYOK)
▼ ▼
┌──────────────────────┐ ┌──────────────────────┐
│ 로컬 daemon │ │ 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 · copilot│
│ SKILL.md + DESIGN.md 읽기, 디스크에 아티팩트 쓰기 │
└────────────────────────────────────────────────────────────────────┘
| 레이어 | 스택 |
|---|---|
| 프론트엔드 | Next.js 16 App Router + React 18 + TypeScript |
| Daemon | Node 24 · Express · SSE 스트리밍 · 프로젝트/대화/메시지/탭을 위한 better-sqlite3 |
| 에이전트 전송 | Claude Code(claude-stream-json)와 Copilot CLI(copilot-stream-json)를 위한 타입 이벤트 파서가 있는 child_process.spawn; 나머지는 라인 버퍼링 plain stdout |
| 저장소 | .od/projects/<id>/의 평문 파일 + .od/app.sqlite의 SQLite (gitignore됨) |
| 미리보기 | srcdoc를 통한 샌드박스 iframe + 스킬별 <artifact> 파서 |
| 내보내기 | HTML(인라인 에셋) · PDF(브라우저 인쇄) · PPTX(skill 정의) · ZIP(archiver) |
빠른 시작
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 # daemon + web foreground
# tools-dev가 출력한 web URL을 여세요
환경 요구사항: Node ~24와 pnpm 10.33.x. nvm/fnm은 선택적 보조 도구일 뿐입니다; 사용한다면 pnpm install 전에 nvm install 24 && nvm use 24 또는 fnm install 24 && fnm use 24를 실행하세요.
첫 번째 로드 시:
PATH에 어떤 에이전트 CLI가 있는지 감지하고 자동으로 하나를 선택합니다.- 19개의 skill + 71개의 디자인 시스템을 로드합니다.
- Anthropic 키를 붙여넣을 수 있는 환영 다이얼로그를 표시합니다(BYOK 폴백 경로에만 필요).
./.od/를 자동 생성합니다 — SQLite 프로젝트 DB, 프로젝트별 아티팩트, 저장된 렌더를 위한 로컬 런타임 폴더.od init단계는 없습니다; daemon이 부팅 시 필요한 모든 것을mkdir합니다.
프롬프트를 입력하고 전송을 누르면 질문 폼이 도착하고, 채우면 할 일 카드가 스트리밍되고, 아티팩트가 렌더링됩니다. 디스크에 저장 클릭 또는 프로젝트 ZIP으로 다운로드하세요.
첫 실행 상태(./.od/)
Daemon은 저장소 루트에 하나의 숨겨진 폴더를 소유합니다. 그 안의 모든 것은 gitignore되고 로컬 머신 전용입니다 — 커밋하지 마세요.
.od/
├── app.sqlite ← 프로젝트 · 대화 · 메시지 · 열린 탭
├── artifacts/ ← 일회성 "디스크에 저장" 렌더(타임스탬프)
└── projects/<id>/ ← 프로젝트별 작업 디렉터리, 에이전트의 cwd
| 원하는 작업 | 방법 |
|---|---|
| 내용 확인 | ls -la .od && sqlite3 .od/app.sqlite '.tables' |
| 초기 상태로 재설정 | pnpm tools-dev stop, rm -rf .od, pnpm tools-dev run web 재실행 |
| 다른 위치로 이동 | 아직 지원되지 않음 — 경로가 저장소 상대 경로로 하드코딩됨 |
전체 파일 맵, 스크립트, 트러블슈팅 → QUICKSTART.md.
저장소 구조
open-design/
├── README.md ← 영어
├── README.zh-CN.md ← 简体中文
├── README.ko.md ← 한국어 (이 파일)
├── QUICKSTART.md ← 실행 / 빌드 / 배포 가이드
├── package.json ← pnpm 워크스페이스, 단일 bin: od
│
├── apps/
│ ├── daemon/ ← Node + Express, 유일한 서버
│ │ ├── src/ ← TypeScript daemon 소스
│ │ │ ├── cli.ts ← `od` bin 소스, dist/cli.js로 컴파일
│ │ │ ├── server.ts ← /api/* 라우트(projects, chat, files, exports)
│ │ │ ├── agents.ts ← PATH 스캐너 + CLI별 argv 빌더
│ │ │ ├── claude-stream.ts ← Claude Code stdout 스트리밍 JSON 파서
│ │ │ ├── skills.ts ← SKILL.md 프론트매터 로더
│ │ │ └── db.ts ← SQLite 스키마(projects/messages/templates/tabs)
│ │ ├── sidecar/ ← tools-dev daemon sidecar 래퍼
│ │ └── tests/ ← daemon 패키지 테스트
│ │
│ └── web/ ← Next.js 16 App Router + React 클라이언트
│ ├── app/ ← App Router 진입점
│ ├── next.config.ts ← 개발 rewrite + 프로덕션 정적 내보내기 to out/
│ └── src/ ← React + TypeScript 클라이언트 모듈
│ ├── App.tsx ← 라우팅, 부트스트랩, 설정
│ ├── components/ ← 채팅, 작성기, 선택기, 미리보기, 스케치, …
│ ├── prompts/
│ │ ├── system.ts ← composeSystemPrompt(base, skill, DS, metadata)
│ │ ├── discovery.ts ← turn-1 폼 + turn-2 분기 + 5차원 검토
│ │ └── directions.ts ← 5가지 시각적 방향 × OKLch 팔레트 + 폰트 스택
│ ├── artifacts/ ← 스트리밍 <artifact> 파서 + 매니페스트
│ ├── runtime/ ← iframe srcdoc, 마크다운, 내보내기 헬퍼
│ ├── providers/ ← daemon SSE + BYOK API 전송
│ └── state/ ← config + 프로젝트(localStorage + daemon 백업)
│
├── e2e/ ← Playwright UI + 외부 통합/Vitest 하네스
│
├── packages/
│ ├── contracts/ ← 공유 web/daemon app contracts
│ ├── sidecar-proto/ ← Open Design sidecar protocol contract
│ ├── sidecar/ ← generic sidecar runtime primitives
│ └── platform/ ← generic process/platform primitives
│
├── skills/ ← 19개 SKILL.md skill 번들
│ ├── web-prototype/ ← prototype 모드 기본
│ ├── saas-landing/ ← 마케팅 페이지(hero / features / pricing / CTA)
│ ├── dashboard/ ← 어드민 / 분석
│ ├── pricing-page/ ← 독립형 가격 + 비교
│ ├── docs-page/ ← 3컬럼 문서
│ ├── blog-post/ ← 에디토리얼 장문
│ ├── mobile-app/ ← 폰 프레임 화면
│ ├── simple-deck/ ← 수평 스와이프 미니멀
│ ├── guizang-ppt/ ← 번들된 magazine-web-ppt(덱 기본)
│ │ ├── SKILL.md
│ │ ├── assets/template.html ← seed
│ │ └── references/{themes,layouts,components,checklist}.md
│ ├── pm-spec/ ← PM 스펙 문서
│ ├── weekly-update/ ← 팀 주간 업데이트
│ ├── meeting-notes/ ← 의사결정 로그
│ ├── eng-runbook/ ← 장애 / 런북
│ ├── finance-report/ ← 임원 요약
│ ├── hr-onboarding/ ← 역할 온보딩
│ ├── invoice/ ← 단일 페이지 인보이스
│ ├── kanban-board/ ← 보드 스냅샷
│ ├── mobile-onboarding/ ← 다화면 모바일 플로우
│ └── team-okrs/ ← OKR 스코어시트
│
├── design-systems/ ← 71개 DESIGN.md 시스템
│ ├── default/ ← Neutral Modern(스타터)
│ ├── warm-editorial/ ← Warm Editorial(스타터)
│ ├── linear-app/ vercel/ stripe/ airbnb/ notion/ cursor/ apple/ …
│ └── README.md ← 카탈로그 개요
│
├── assets/
│ └── frames/ ← 공유 기기 프레임(스킬 간 사용)
│ ├── iphone-15-pro.html
│ ├── android-pixel.html
│ ├── ipad-pro.html
│ ├── macbook.html
│ └── browser-chrome.html
│
├── templates/
│ └── deck-framework.html ← 덱 기준선(nav / counter / print)
│
├── scripts/
│ └── sync-design-systems.ts ← 상위 awesome-design-md tarball 재가져오기
│
├── docs/
│ ├── spec.md ← 제품 스펙, 시나리오, 차별화
│ ├── architecture.md ← 토폴로지, 데이터 흐름, 컴포넌트
│ ├── skills-protocol.md ← 확장된 SKILL.md od: 프론트매터
│ ├── agent-adapters.md ← CLI별 감지 + 디스패치
│ ├── modes.md ← prototype / deck / template / design-system
│ ├── references.md ← 장문 출처
│ ├── roadmap.md ← 단계별 배포
│ ├── schemas/ ← JSON 스키마
│ └── examples/ ← 표준 아티팩트 예시
│
└── .od/ ← 런타임 데이터, gitignore됨, 자동 생성
├── app.sqlite ← 프로젝트 / 대화 / 메시지 / 탭
├── projects/<id>/ ← 프로젝트별 작업 폴더(에이전트의 cwd)
└── artifacts/ ← 저장된 일회성 렌더
디자인 시스템
기본 제공 71개 시스템, 각각 단일 DESIGN.md로:
전체 카탈로그 (클릭하여 펼치기)
AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai
개발자 도구 — cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent
생산성 — notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast
핀테크 — stripe · coinbase · binance · kraken · mastercard · revolut · wise
이커머스 — shopify · airbnb · uber · nike · starbucks · pinterest
미디어 — spotify · playstation · wired · theverge · meta
자동차 — tesla · bmw · ferrari · lamborghini · bugatti · renault
기타 — apple · ibm · nvidia · vodafone · sentry · resend · spacex
스타터 — default(Neutral Modern) · warm-editorial
라이브러리는 scripts/sync-design-systems.ts를 통해 VoltAgent/awesome-design-md에서 가져옵니다. 재실행하면 새로 고침됩니다.
시각적 방향
사용자에게 브랜드 스펙이 없을 때, 에이전트가 5개의 엄선된 방향이 있는 두 번째 폼을 내보냅니다 — huashu-design의 "5개 학파 × 20가지 디자인 철학" 폴백의 OD 적용. 각 방향은 결정론적 스펙입니다 — OKLch의 팔레트, 폰트 스택, 레이아웃 포스처 단서, 참고 자료 — 에이전트가 이를 seed 템플릿의 :root에 그대로 바인딩합니다. 라디오 하나 클릭 → 완전히 지정된 시각 시스템. 즉흥 없음, AI-slop 없음.
| 방향 | 무드 | 참고 |
|---|---|---|
| Editorial — Monocle / FT | 인쇄 매거진, 잉크 + 크림 + 따뜻한 러스트 | Monocle · FT Weekend · NYT Magazine |
| Modern minimal — Linear / Vercel | 쿨, 구조적, 미니멀 액센트 | Linear · Vercel · Stripe |
| Tech utility | 정보 밀도, 모노스페이스, 터미널 | Bloomberg · Bauhaus 도구 |
| Brutalist | 날것, 거대한 타입, 그림자 없음, 강한 액센트 | Bloomberg Businessweek · Achtung |
| Soft warm | 여유롭고, 낮은 대비, 복숭아 계열 뉴트럴 | Notion 마케팅 · Apple Health |
전체 스펙 → apps/web/src/prompts/directions.ts.
Anti-AI-slop 메커니즘
아래의 모든 메커니즘은 huashu-design 플레이북을 OD의 프롬프트 스택에 이식하고, 사이드 파일 pre-flight를 통해 skill별로 적용 가능하게 만든 것입니다. 실제 문구는 apps/web/src/prompts/discovery.ts를 읽으세요:
- 질문 폼 우선. Turn 1은 오직
<question-form>— 생각하기 없음, 도구 없음, 내레이션 없음. 사용자는 라디오 속도로 기본값을 선택합니다. - 브랜드 스펙 추출. 사용자가 스크린샷이나 URL을 첨부하면, 에이전트는 5단계 프로토콜(위치 파악 · 다운로드 · hex grep ·
brand-spec.md코드화 · 발성)을 실행한 후 CSS를 작성합니다. 절대 기억에서 브랜드 색상을 추측하지 않습니다. - 5차원 검토.
<artifact>를 내보내기 전, 에이전트가 자신의 출력을 철학 / 계층 / 실행 / 구체성 / 절제 5가지 차원에서 1–5점으로 조용히 채점합니다. 3/5 미만은 퇴보 — 수정 후 재채점. 두 번의 패스는 정상입니다. - P0/P1/P2 체크리스트. 모든 skill은 하드 P0 게이트가 있는
references/checklist.md를 제공합니다. 에이전트는 내보내기 전에 P0를 통과해야 합니다. - Slop 블랙리스트. 공격적인 보라색 그라디언트, 일반 이모지 아이콘, 왼쪽 테두리 액센트가 있는 둥근 카드, 손으로 그린 SVG 인물, 디스플레이 폰트로서의 Inter, 허구 지표 — 프롬프트에서 명시적으로 금지됩니다.
- 정직한 플레이스홀더 > 가짜 통계. 실제 숫자가 없을 때 에이전트는
—또는 레이블이 있는 회색 블록을 씁니다. "10배 빠릅니다"가 아닙니다.
비교
| 축 | Claude Design (Anthropic) | Open CoDesign | Open Design |
|---|---|---|---|
| 라이선스 | 클로즈드 | MIT | Apache-2.0 |
| 폼 팩터 | 웹(claude.ai) | 데스크탑(Electron) | 웹앱 + 로컬 daemon |
| Vercel 배포 가능 | ❌ | ❌ | ✅ |
| 에이전트 런타임 | 번들됨(Opus 4.7) | 번들됨(pi-ai) |
사용자 기존 CLI에 위임 |
| Skill | 독점 | 12개 커스텀 TS 모듈 + SKILL.md |
19개 파일 기반 SKILL.md 번들, 드롭 가능 |
| 디자인 시스템 | 독점 | DESIGN.md(v0.2 로드맵) |
DESIGN.md × 71개 시스템 기본 제공 |
| 프로바이더 유연성 | Anthropic 전용 | pi-ai를 통해 7+ |
에이전트가 지원하는 모든 것 |
| 초기화 질문 폼 | ❌ | ❌ | ✅ 하드 규칙, turn 1 |
| 방향 선택기 | ❌ | ❌ | ✅ 5가지 결정론적 방향 |
| 실시간 할 일 진행 + 도구 스트림 | ❌ | ✅ | ✅ (open-codesign의 UX 패턴) |
| 샌드박스 iframe 미리보기 | ❌ | ✅ | ✅ (open-codesign의 패턴) |
| 코멘트 모드 수술적 편집 | ❌ | ✅ | 🚧 로드맵(open-codesign에서 이식) |
| AI 제안 트윅 패널 | ❌ | ✅ | 🚧 로드맵(open-codesign에서 이식) |
| 파일시스템급 워크스페이스 | ❌ | 부분(Electron 샌드박스) | ✅ 실제 cwd, 실제 도구, SQLite 영구 저장 |
| 5차원 자기 검토 | ❌ | ❌ | ✅ 내보내기 전 게이트 |
| 내보내기 형식 | 제한됨 | HTML / PDF / PPTX / ZIP / Markdown | HTML / PDF / PPTX / ZIP / Markdown |
| PPT skill 재사용 | N/A | 내장 | guizang-ppt-skill 드롭인 |
| 최소 청구 | Pro / Max / Team | BYOK | BYOK |
지원하는 코딩 에이전트
daemon 부팅 시 PATH에서 자동 감지됩니다. 설정 필요 없음.
| 에이전트 | 바이너리 | 스트리밍 | 비고 |
|---|---|---|---|
| Claude Code | claude |
--output-format stream-json (타입 이벤트) |
1등 지원 — 최고의 충실도 |
| Codex CLI | codex |
라인 버퍼링 | codex exec <prompt> |
| Cursor Agent | cursor-agent |
라인 버퍼링 | cursor-agent -p |
| Gemini CLI | gemini |
라인 버퍼링 | gemini -p |
| OpenCode | opencode |
라인 버퍼링 | opencode run |
| Qwen Code | qwen |
라인 버퍼링 | qwen -p |
| GitHub Copilot CLI | copilot |
--output-format json (타입 이벤트) |
copilot -p <prompt> --allow-all-tools --output-format json |
| Anthropic API · BYOK | n/a | SSE 직접 | PATH에 CLI가 없을 때 브라우저 폴백 |
새 CLI 추가는 apps/daemon/src/agents.ts에 항목 하나 추가하는 것입니다. 스트리밍 형식은 claude-stream-json(타입 이벤트) 또는 plain(원시 텍스트) 중 하나입니다.
참조 및 계보
이 저장소가 차용한 모든 외부 프로젝트. 각 링크는 출처로 이동하여 계보를 확인할 수 있습니다.
| 프로젝트 | 역할 |
|---|---|
Claude Design |
이 저장소가 오픈소스 대안을 제공하는 클로즈드 소스 제품. |
alchaincyf/huashu-design |
디자인 철학 핵심. Junior-Designer 워크플로, 5단계 브랜드 에셋 프로토콜, anti-AI-slop 체크리스트, 5차원 자기 검토, 그리고 방향 선택기 뒤의 "5개 학파 × 20가지 디자인 철학" 라이브러리 — 모두 apps/web/src/prompts/discovery.ts와 apps/web/src/prompts/directions.ts에 녹아들었습니다. |
op7418/guizang-ppt-skill |
skills/guizang-ppt/ 아래에 원본 그대로 번들된 Magazine-web-PPT skill, 원 LICENSE 보존. 덱 모드 기본. P0/P1/P2 체크리스트 문화는 다른 모든 skill에도 차용됩니다. |
multica-ai/multica |
Daemon + 어댑터 아키텍처. PATH 스캔 에이전트 감지, 단일 특권 프로세스로서의 로컬 daemon, 에이전트-동료 세계관. 모델을 채용했지만 코드는 vendor하지 않습니다. |
OpenCoworkAI/open-codesign |
최초의 오픈소스 Claude-Design 대안이자 가장 가까운 동류. 채택된 UX 패턴: 스트리밍 아티팩트 루프, 샌드박스 iframe 미리보기(React 18 + Babel 내장), 실시간 에이전트 패널(todos + tool calls + 중단 가능), 5가지 내보내기 형식(HTML/PDF/PPTX/ZIP/Markdown), 로컬 우선 스토리지 허브, SKILL.md 취향 주입. 로드맵의 UX 패턴: 코멘트 모드 수술적 편집, AI 제안 트윅 패널. pi-ai는 의도적으로 vendor하지 않습니다 — open-codesign은 이를 에이전트 런타임으로 번들링하지만; 우리는 사용자가 이미 가진 CLI에 위임합니다. |
VoltAgent/awesome-claude-design / awesome-design-md |
9섹션 DESIGN.md 스키마의 출처이자 scripts/sync-design-systems.ts를 통해 가져온 69개 제품 시스템. |
farion1231/cc-switch |
여러 에이전트 CLI에 걸친 심링크 기반 skill 배포의 영감. |
| Claude Code skills | 원본 그대로 채택된 SKILL.md 규약 — 모든 Claude Code skill이 skills/에 드롭되면 daemon이 감지합니다. |
각각에서 무엇을 채용하고 의도적으로 채용하지 않았는지에 대한 장문의 계보 작성 → docs/references.md.
로드맵
- Daemon + 에이전트 감지 + skill 레지스트리 + 디자인 시스템 카탈로그
- 웹앱 + 채팅 + 질문 폼 + 할 일 진행 + 샌드박스 미리보기
- 19개 skill + 71개 디자인 시스템 + 5가지 시각적 방향 + 5개 기기 프레임
- SQLite 기반 프로젝트 · 대화 · 메시지 · 탭 · 템플릿
- 코멘트 모드 수술적 편집(요소 클릭 → 지시 → 패치) —
open-codesign의 패턴 - AI 제안 트윅 패널(모델이 조정할 가치 있는 파라미터 제시) —
open-codesign의 패턴 - Vercel + 터널 배포 레시피(Topology B)
DESIGN.md로 프로젝트를 스캐폴딩하는 원클릭npx od init- Skill 마켓플레이스(
od skills install <github-repo>)
단계별 배포 → docs/roadmap.md.
상태
이것은 초기 구현입니다 — 닫힌 루프(감지 → skill + 디자인 시스템 선택 → 채팅 → <artifact> 파싱 → 미리보기 → 저장)가 end-to-end로 실행됩니다. 프롬프트 스택과 skill 라이브러리가 대부분의 가치가 있으며 안정적입니다. 컴포넌트 수준 UI는 매일 배포되고 있습니다.
스타 주세요
이것이 30분을 절약해줬다면 — ★를 주세요. 스타가 임대료를 내지는 않지만, 다음 디자이너, 에이전트, 기여자에게 이 실험이 그들의 관심을 받을 가치가 있다는 것을 알려줍니다. 한 번의 클릭, 3초, 진짜 신호: github.com/nexu-io/open-design.
기여
이슈, PR, 새로운 skill, 새로운 디자인 시스템 모두 환영합니다. 가장 레버리지가 높은 기여는 보통 폴더 하나, Markdown 파일 하나, 또는 PR 크기의 어댑터입니다:
- skill 추가 —
SKILL.md규약을 따르는 폴더를skills/에 드롭하세요. - 디자인 시스템 추가 — 9섹션 스키마를 사용하여
design-systems/<brand>/에DESIGN.md를 드롭하세요. - 새 코딩 에이전트 CLI 연결 —
apps/daemon/src/agents.ts에 항목 하나 추가.
전체 설명, 병합 기준, 코드 스타일, 받지 않는 것 → CONTRIBUTING.md (简体中文).
라이선스
Apache-2.0. 번들된 skills/guizang-ppt/는 원래 LICENSE(MIT)와 op7418에 대한 저작권 표시를 유지합니다.