Open Design
핵심 요약
Open Design은 Claude Design의 로컬 퍼스트 오픈소스 대체제를 표방하는 디자인 도구다. 자체 에이전트를 내장하는 대신, 사용자의 PATH에 설치된 코딩 에이전트 CLI를 자동 감지해 디자인 엔진으로 활용한다.
지원 대상으로 언급되는 에이전트에는 Claude Code, Codex 등이 포함된다. 즉, Open Design 자체는 디자인 워크벤치와 오케스트레이션 레이어에 가깝고, 실제 생성·수정 작업은 외부 코딩 에이전트 CLI가 수행한다.
핵심 특징은 다음과 같다.
- 로컬 프로젝트 폴더에서 실제 파일을 생성·수정한다.
- 31개 디자인/문서 스킬을 제공한다.
- 129개 브랜드급
DESIGN.md디자인 시스템을 포함한다. - 첫 턴에서 질문 폼을 강제해 AI slop을 줄인다.
- 5가지 비주얼 디렉션과 결정론적 팔레트/폰트 스택을 제공한다.
- BYOK 프록시로 여러 모델 제공자를 연결한다.
- Claude Design ZIP 임포트를 지원한다.
- MCP 서버로 다른 코딩 에이전트가 디자인 파일을 읽을 수 있다.
구조
Open Design은 에이전트를 직접 구현하기보다, 이미 설치된 에이전트 CLI를 디자인 실행 엔진으로 사용한다.
로컬 데몬은 프로젝트 폴더 안에서 CLI를 spawn하고, 파일시스템 작업을 수행하게 한다.
가능한 작업은 다음과 같다.
- Read.
- Write.
- Bash.
- WebFetch.
- 프로젝트 상태 저장.
- 대화와 탭 상태 기억.
- iframe 프리뷰.
- HTML, PDF, PPTX, ZIP, Markdown 내보내기.
프로젝트·대화·탭 상태는 SQLite에 저장된다.
이 구조는 MCP 도구 설계와 어포던스와 비슷한 문제를 다룬다. 모델을 직접 신뢰하기보다, 도구와 권한, 스킬, 프로젝트 상태를 둘러싼 하네스를 설계하는 방식이다.
내장 스킬
Open Design은 31개 스킬을 제공하고, 9개 시나리오로 분류한다.
예시는 다음과 같다.
- 웹 프로토타입.
- SaaS 랜딩 페이지.
- 대시보드.
- 모바일 앱.
- 소셜 캐러셀.
- 매거진 포스터.
- PM 스펙.
- OKR.
- 인보이스.
이는 디자인 작업을 “빈 프롬프트에서 알아서 예쁘게 만들기”가 아니라, 특정 산출물 유형에 맞는 절차와 제약으로 다루려는 접근이다.
DESIGN.md와 디자인 시스템
Open Design은 129개 브랜드급 디자인 시스템을 Markdown 기반 DESIGN.md로 제공한다.
언급된 예시는 다음과 같다.
- Linear.
- Stripe.
- Vercel.
- Airbnb.
- Tesla.
- Notion.
- Apple.
- Cursor.
- Supabase.
- Figma.
DESIGN.md는 색상, 타이포그래피, 간격, 컴포넌트 톤, 브랜드 감각을 에이전트가 읽을 수 있는 텍스트 규칙으로 바꾸는 방식이다.
이는 Google Stitch & DESIGN.md에서 다룬 흐름과 직접 연결된다. 디자인 시스템을 문서화하고, AI가 이를 기준으로 산출물을 만들게 하는 방식이다.
첫 턴 질문 폼
Open Design은 첫 턴에서 인터랙티브 질문 폼을 강제한다. 목적은 AI가 임의로 디자인 방향을 추측하는 것을 막는 것이다.
30초 안에 다음을 확정하도록 설계된다.
- 표면: 웹, 모바일, 슬라이드, 포스터 등.
- 대상: 사용자와 사용 맥락.
- 톤: 브랜드 감성.
- 브랜드: 참고 시스템과 제약.
- 스케일: 산출물 범위.
이는 프롬프트를 길게 쓰는 것보다 더 구조적인 요구사항 수집 방식이다. 디자인 AI의 가장 큰 문제인 “그럴듯하지만 어디서나 본 듯한 결과물”을 줄이려는 장치다.
비주얼 디렉션
Open Design은 5가지 비주얼 디렉션을 제공한다.
- Editorial Monocle.
- Modern Minimal.
- Tech Utility.
- Brutalist.
- Soft Warm.
방향을 선택하면 결정론적 OKLch 팔레트와 폰트 스택이 자동 적용된다. 핵심은 모델이 색상과 폰트를 즉흥적으로 추측하지 않게 만드는 것이다.
디자인 품질은 모델보다 제약과 선택지 설계에서 나오는 경우가 많다. 이 점은 GPT-5.4 프론트엔드 디자인 가이드의 “AI slop을 피하려면 명확한 시각 방향이 필요하다”는 원칙과도 맞닿아 있다.
미디어 생성
Open Design은 정적 디자인 외에도 미디어 생성 기능을 통합한다.
- gpt-image-2: 이미지 생성.
- Seedance 2.0: 15초 시네마틱 영상.
- HyperFrames: HTML을 MP4 모션 그래픽으로 변환.
- 93개 프롬프트 템플릿 갤러리.
이 기능은 디자인 산출물을 웹 페이지에 한정하지 않고, 이미지·영상·모션 그래픽까지 확장하려는 방향이다.
BYOK와 보안
Open Design은 BYOK(Bring Your Own Key) 프록시를 제공한다.
연결 가능한 제공자는 다음과 같다.
- Anthropic.
- OpenAI.
- Azure OpenAI.
- Google Gemini.
- Ollama.
- LM Studio.
로컬 모델과 클라우드 모델을 모두 연결할 수 있으며, SSRF 차단을 내장한다고 설명된다.
BYOK 구조의 장점은 특정 모델 제공자에 완전히 묶이지 않는다는 점이다. 이는 Agentic Coding은 함정이다에서 다룬 벤더 종속 문제를 줄이는 방향이기도 하다.
Anti-AI-slop 장치
Open Design은 AI slop을 줄이기 위한 여러 메커니즘을 제공한다.
- 5차원 자기 비평.
- 3/5 미만 점수 시 재작업.
- P0/P1/P2 체크리스트 게이트.
- 브랜드 색상 기억 추측 금지.
- 가짜 지표 금지.
- 첫 턴 질문 폼 강제.
- 결정론적 팔레트와 폰트 적용.
중요한 점은 “모델에게 더 예쁘게 해달라”고 말하는 대신, 산출물 품질을 하네스와 체크리스트로 강제한다는 것이다.
이는 하네스 엔지니어링 백과사전 요약의 흐름과 연결된다. 좋은 AI 결과물은 모델 지능만이 아니라, 모델이 일하는 환경과 검증 루프에서 나온다.
Claude Design ZIP 임포트
Open Design은 Claude Design에서 내보낸 ZIP 파일을 드롭하면 로컬 프로젝트로 변환해 이어서 편집할 수 있다.
이 기능은 Claude Design의 클라우드 중심 워크플로에서 로컬 파일 기반 워크플로로 이전하는 브리지 역할을 한다.
MCP 지원
Open Design은 stdio MCP 서버를 제공한다. 이를 통해 다른 코딩 에이전트가 디자인 파일을 직접 읽을 수 있다.
예를 들어 Codex나 Claude Code가 Open Design 프로젝트의 디자인 산출물, DESIGN.md, 컴포넌트 파일을 MCP를 통해 참조할 수 있다.
이는 디자인 도구가 독립된 앱이 아니라, 에이전트 워크플로의 컨텍스트 제공자 역할을 할 수 있음을 뜻한다.
실행 방식
Open Design은 세 가지 실행 방식을 제공한다.
- 데스크톱 앱 다운로드.
- Docker 실행:
docker compose up -d. - 소스 실행:
pnpm tools-dev run web.
라이선스는 Apache-2.0이다.
시사점
Open Design의 핵심은 “AI가 디자인을 한다”가 아니라, AI가 디자인 시스템과 스킬, 질문 폼, 체크리스트 안에서 작업하게 만든다는 점이다.
좋은 디자인 에이전트는 모델 하나가 아니라 다음 요소의 조합이다.
- 요구사항 수집 폼.
- 디자인 시스템 문서.
- 시각 방향 선택지.
- 결정론적 토큰.
- 미디어 생성 도구.
- 로컬 파일시스템.
- MCP 컨텍스트 공유.
- 품질 체크리스트.
- BYOK/로컬 모델 선택권.
따라서 Open Design은 디자인 생성 앱이라기보다, 로컬 퍼스트 AI 디자인 하네스에 가깝다.