왜 이 프로젝트가 필요한가
2026년 4월, Anthropic이 Claude Design을 공개했다. LLM이 글을 쓰는 대신 실제 디자인 산출물을 배송하는 첫 번째 순간이었다. 반응은 폭발적이었다. 그리고 그대로 폐쇄형, 유료, 클라우드 전용, Anthropic 모델 락인이었다.
직접 호스팅할 수 없다. Vercel에 배포할 수 없다. 다른 에이전트를 끼워 넣을 수 없다. 스킬을 수정하거나 새로 만들 수 없다.
Open Design은 같은 루프, 같은 산출물 중심의 접근 방식을 취하면서, 모든 락인을 제거한다. 에이전트도, 모델도, 스킬 카탈로그도 직접 소유하지 않는다. 세 가지 모두 외부에서 꽂는 구조다.
이것은 "또 하나의 AI 디자인 도구"가 아니다. 당신이 이미 가지고 있는 코딩 에이전트를 디자인 워크플로우로 연결하는 통합 셸이다.
한눈에 보는 핵심
어떻게 동작하는가
Open Design의 아키텍처는 세 개의 레이어로 구성된다. 사용자의 브라우저, 로컬 데몬, 그리고 이미 설치된 에이전트 CLI.
시스템 구조
프론트엔드는 React 18 + TypeScript로 구성되어 있고, 상태관리는 순수 React hooks만 사용한다. Redux, Zustand 같은 외부 라이브러리는 없다. 라우팅도 커스텀 훅으로 처리한다.
백엔드 데몬은 Express + better-sqlite3로, TypeScript 없이 순수 JavaScript로 작성되었다. 프로젝트, 대화, 메시지, 탭 상태를 SQLite에 저장하고, 에이전트 CLI를 child_process로 실행한다.
스킬 시스템 — 폴더 하나로 확장
Open Design의 확장성은 파일 기반 스킬 시스템에서 나온다. skills/ 폴더 아래에 디렉토리를 하나 만들고 SKILL.md 파일을 넣으면, 그것이 곧 새로운 디자인 스킬이다.
1--- 2name: SaaS Landing Page 3description: 컨버전 최적화 SaaS 랜딩 페이지 생성 4od.mode: prototype 5od.platform: web 6od.scenario: landing 7--- 8 9# 워크플로우 10 111. 히어로 섹션: 가치 제안 → CTA → 사회적 증명 122. 기능 섹션: 3-6개 핵심 기능 카드 133. 가격 섹션: 3티어 가격표 144. 푸터: 링크 + 뉴스레터
포크할 수 있고, 버전 관리할 수 있고, 공유할 수 있고, 심볼릭 링크로 설치할 수 있다. 서드파티가 skills/에 폴더를 하나 떨어뜨리는 것만으로 확장이 완료된다.
디자인 시스템 — DESIGN.md로 표현
71개의 디자인 시스템이 각각 하나의 DESIGN.md 파일로 존재한다. 이 파일은 awesome-claude-design의 9섹션 스키마를 따른다.
| 섹션 | 내용 |
|---|---|
| Colors | 팔레트 토큰 (primary, secondary, accent, neutral) |
| Typography | 폰트 패밀리, 크기, 웨이트 체계 |
| Spacing | 간격 토큰 (4px 베이스 그리드) |
| Components | 버튼, 카드, 입력 필드 등 UI 컴포넌트 규칙 |
| Effects | 그림자, 블러, 트랜지션 효과 |
에이전트는 시스템 프롬프트에서 이 토큰을 읽고, 결정론적으로 색상과 폰트를 적용한다. 모델이 자의적으로 색상을 고르지 않는다. 토큰이 지시하는 대로 만든다.
실제 사용 시나리오
- 프로토타입 스킬 자동 선택, 사용자 DESIGN.md 로드
- 디스커버리 질문 폼으로 타겟, 톤, 브랜드 컨텍스트 확정
- 에이전트가 TodoWrite로 작업 계획을 스트리밍
- HTML artifact가 샌드박스 iframe에서 실시간 렌더링
- 특정 요소 클릭 → 코멘트 → 에이전트가 해당 영역만 수정
- guizang-ppt 스킬로 라우팅 (매거진 레이아웃, WebGL 히어로)
- 5개 비주얼 디렉션 중 하나를 선택하는 두 번째 폼 표시
- 결정론적 OKLch 팔레트 + 폰트 스택 자동 적용
- 단일 파일 HTML 덱 생성, 화살표 키 내비게이션
- PDF / PPTX / ZIP / Markdown으로 내보내기
- 스크린샷, 브랜드 가이드 PDF, 또는 Figma 링크 업로드
- design-system-skill이 9섹션 포맷으로 DESIGN.md 생성
- 이후 모든 생성 작업에서 자동으로 해당 토큰 참조
- 프로토타입, 덱, 템플릿 모두 일관된 브랜드 적용
3초만에 시작하기
설치와 실행은 터미널 명령 세 줄이면 충분하다.
1# 저장소 클론 2git clone https://github.com/your-org/open-design.git 3cd open-design 4 5# 의존성 설치 6pnpm install 7 8# 데몬 + 프론트엔드 동시 실행 9pnpm dev:all
dev:all 스크립트는 데몬(포트 7456)과 Vite 개발 서버(포트 5173)를 동시에 실행합니다. 기본 포트가 사용 중이면 자동으로 다른 포트를 찾습니다.
브라우저가 열리면 첫 화면에서 스킬을 고르고, 디자인 시스템을 선택하고, 브리프를 입력하면 바로 시작된다.
"AI가 디자인한다"가 아니다
Open Design의 프롬프트 스택은 에이전트에게 시니어 디자이너의 작업 방식을 강제한다.
- 모델이 한 픽셀도 그리기 전에, 디스커버리 폼으로 브리프를 확정한다
- 브랜드가 없으면 5개 큐레이션 디렉션 중 하나를 선택한다 — 모델이 자의적으로 정하지 않는다
- 에이전트가 TodoWrite로 작업 계획을 세우고, 실시간으로 진행 상황을 스트리밍한다
- 데몬이 실제 파일 시스템에 시드 템플릿, 레이아웃 라이브러리, 셀프체크 체크리스트를 구성한다
- 에이전트는 5차원 자기 비판을 수행한 후에야
<artifact>를 출력한다
그것은 "AI가 뭔가 디자인해본다"가 아니다. 프롬프트 스택에 의해 훈련된, 실제 파일 시스템과 결정론적 팔레트 라이브러리와 체크리스트 문화를 가진 시니어 디자이너의 행동이다.
기술 스택 요약
| 레이어 | 기술 | 비고 |
|---|---|---|
| 프론트엔드 | React 18 + TypeScript | Vite 5 빌드, 순수 hooks 상태관리 |
| 백엔드 | Express + better-sqlite3 | 순수 JavaScript, TypeScript 없음 |
| 에이전트 통신 | child_process + SSE | CLI stdout/stderr 스트리밍 |
| 데이터 저장 | SQLite (WAL 모드) | 프로젝트, 대화, 메시지, 탭 상태 |
| 산출물 렌더링 | srcdoc iframe | 샌드백스 환경, localStorage shim |
| 라이선스 | Apache 2.0 | 완전한 오픈소스 |
누구를 위한 도구인가
오픈소스의 어깨 위에서
Open Design은 네 개의 오픈소스 프로젝트 위에 서 있다.
- huashu-design — 디자인 철학 나침반. 주니어 디자이너 워크플로우, 5단계 브랜드 에셋 프로토콜, 안티 AI-slop 체크리스트가 모두 이 프로젝트에서 왔다
- guizang-ppt-skill — 덱 모드. 매거진 레이아웃, WebGL 히어로 배경, 단일 파일 HTML 출력을 제공한다
- open-codesign — UX 북스타. 스트리밍 artifact 루프, 샌드박스 iframe 프리뷰, 5가지 포맷 익스포트를 참고했다
- multica — 데몬 및 런타임 아키텍처. PATH 스캔 에이전트 감지, 로컬 데몬 패턴, 에이전트를 팀원으로 보는 세계관
다음 단계
Open Design은 현재 Phase 0 (스펙 확정) 단계에서 Phase 1 (MVP)로 진입하고 있다. 로드맵에 따르면 6-8주 내에 핵심 기능이 안정화될 예정이다.
기여는 언제나 환영한다. 스킬을 만들어도 좋고, 디자인 시스템을 추가해도 좋고, 에이전트 어댑터를 개선해도 좋다. 중요한 것은 하나 — 에이전트도, 모델도, 스킬 카탈로그도 우리가 소유하지 않는다는 철학을 유지하는 것.
Apache 2.0 라이선스로 배포됩니다. 포크, 수정, 상업적 사용 모두 자유입니다.