Open Design: Claude Design의 로컬 퍼스트 오픈소스 대체제

Claude Design은 “프롬프트 → 시각 산출물 → 핸드오프” 흐름을 보여준 제품입니다. 다만 닫힌 클라우드 제품이라 Anthropic 생태계 안에서만 씁니다.

GeekNews에 올라온 Open Design 소개 ↗는 이 제약을 다룹니다. Open Design ↗은 Claude Design의 로컬 퍼스트·오픈소스 대체제를 표방합니다. 사용자의 PATH에 설치된 코딩 에이전트 CLI를 디자인 엔진처럼 연결합니다.

기준 작성 시점 2026-05-12 · Open Design v0.6.0, GitHub README, GeekNews 29376 스냅숏 기준입니다.

Open Design은 무엇인가

Open Design은 로컬 코딩 에이전트를 디자인 작업용 런타임으로 묶어 주는 도구입니다. 자체 모델을 내장하지 않습니다. 대신 Claude Code·Codex CLI·Gemini CLI·Cursor Agent·OpenCode처럼 이미 설치된 CLI를 감지해 작업 엔진으로 씁니다.

공식 README는 Open Design을 “Claude Design의 오픈소스 대체제”라고 설명합니다. Claude Design은 Anthropic이 제공하는 닫힌 제품입니다. Open Design은 로컬 데몬·웹 앱·데스크톱 앱·Skills·디자인 시스템을 묶은 오픈소스 프로젝트입니다.

흐름은 대략 이렇습니다.

flowchart TB
    A["사용자 요청"] --> B["질문 폼<br/>요구사항 고정"]

    subgraph Context["작업 문맥"]
        C["Skill<br/>무엇을 만들지"]
        D["Design System<br/>어떤 톤과 규칙인지"]
    end

    B --> C
    B --> D
    C --> E["로컬 CLI<br/>또는 BYOK API"]
    D --> E

    subgraph Output["결과 확인과 내보내기"]
        F["HTML artifact"] --> G["샌드박스 iframe<br/>미리보기"]
        G --> H["HTML · PDF · PPTX<br/>ZIP · Markdown"]
    end

    E --> F

Open Design은 요구사항을 먼저 고정하고, Skill과 디자인 시스템을 문맥으로 넣습니다. 그다음 에이전트가 파일시스템에서 실제 산출물을 만듭니다.

Claude Design과 닮은 점, 다른 점

Claude Design과 Open Design은 둘 다 텍스트 설명에서 시각 산출물로 바로 가려는 제품입니다. 프로토타입, 랜딩 페이지, 슬라이드, 포스터, 모바일 화면 같은 결과물을 대화로 만들고 수정한다는 점도 비슷합니다.

하지만 운영 모델은 다릅니다.

구분	Claude Design	Open Design
소스	Anthropic 클라우드 제품	Apache-2.0 오픈소스
실행 위치	Claude 서비스 내부	로컬 데몬 + 웹/데스크톱 앱
모델 선택	Anthropic 중심	로컬 CLI 또는 BYOK API
작업 단위	Claude Design의 내장 워크플로우	Skills + Design Systems 조합
산출물	디자인 artifact와 export	HTML artifact, PDF/PPTX/ZIP/Markdown 등

Claude Design 글에서는 “아이디어를 빨리 시각화하고 구현으로 넘기는 흐름”을 다뤘습니다. Open Design은 그 흐름을 내 로컬 에이전트와 내 파일시스템 위에 다시 짭니다.

Tip Claude Design을 “제품”으로 본다면, Open Design은 “워크플로우를 재현할 수 있는 로컬 런타임”에 가깝습니다. 그래서 팀 내부 도구나 자체 프롬프트 스택 실험에는 Open Design 쪽이 더 유연합니다.

1) 로컬 CLI를 디자인 엔진으로 씁니다

Open Design README는 16종 코딩 에이전트 CLI를 자동 감지한다고 설명합니다. Claude Code, Codex CLI, Gemini CLI, Cursor Agent, OpenCode, Qwen Code, GitHub Copilot CLI 등이 여기에 포함됩니다.

이 방식은 모델보다 작업 환경을 바꿉니다. 에이전트는 채팅 답변에서 멈추지 않습니다. 로컬 프로젝트 폴더에서 파일을 읽고 쓰고, 필요한 명령을 실행하고, 결과물을 실제 파일로 남깁니다.

flowchart TB
    A["1. 디자인 요청 입력"] --> B["2. Web UI가<br/>로컬 데몬에 전달"]
    B --> C["3. 데몬이 선택된<br/>Agent CLI 실행"]
    C --> D["4. Agent가 프로젝트에서<br/>Read · Write · Bash · WebFetch 수행"]
    D --> E["5. artifact 출력"]
    E --> F["6. SSE로 스트리밍"]
    F --> G["7. iframe에서<br/>결과 미리보기"]

공식 Quickstart에 따르면 로컬 개발 모드는 다음처럼 실행합니다.

corepack enable
pnpm install
pnpm tools-dev run web

Docker로는 deploy 디렉터리에서 Compose를 띄우고, 기본적으로 http://localhost:7456에서 접근하는 방식도 제공합니다.

cd deploy
docker compose up -d

http://localhost:7456

2) Skills와 디자인 시스템을 조합합니다

Open Design의 기본 작업 단위는 Skill입니다. README 기준으로 web-prototype, saas-landing, dashboard, mobile-app, social-carousel, magazine-poster, pm-spec, invoice, team-okrs 같은 Skill이 포함됩니다.

Skill은 “무엇을 만들지”를 정합니다. 디자인 시스템은 “어떤 톤과 규칙으로 만들지”를 정합니다. 둘을 조합하면 같은 요청에서도 다른 결과물이 나옵니다.

예를 들어 “신규 AI 도구 랜딩 페이지를 만들어줘”라는 요청도 이렇게 갈라질 수 있습니다.

선택	결과 방향
`saas-landing` + Modern Minimal	B2B SaaS 느낌의 깔끔한 랜딩
`social-carousel` + Editorial Monocle	인스타그램 카드뉴스형 소개 자료
`simple-deck` + Tech Utility	발표용 슬라이드 덱
`mobile-app` + Warm Soft	모바일 앱 콘셉트 화면

이 구조는 Figma AI Agent Design에서 다뤘던 “디자인 시스템이 AI 출력 품질을 결정한다”는 흐름과도 이어집니다. 프롬프트를 다듬는 것보다 재사용 가능한 규칙과 컴포넌트 문맥을 줄 때 결과가 더 일정합니다.

3) Anti-AI-slop 장치를 명시합니다

Open Design은 “AI가 대충 예쁜 화면을 뽑는다”는 문제에 Anti-AI-slop이라는 이름을 붙이고 직접 다룹니다. README와 GeekNews 요약 모두 Anti-AI-slop 장치를 강조합니다.

대표적으로 다음 장치가 언급됩니다.

첫 턴에서 인터랙티브 질문 폼으로 표면, 대상, 톤, 브랜드, 스케일을 먼저 확정
5가지 비주얼 디렉션 중 하나를 고르고 deterministic OKLch 팔레트와 폰트 스택 적용
TodoWrite 계획을 UI에 스트리밍
5차원 자기 비평과 체크리스트 게이트 사용
브랜드 색상, 지표, 디자인 의도를 추측하지 않도록 제한

AI 디자인 도구의 실패는 보통 “못생겼다”보다 “그럴듯하지만 우리 맥락과 안 맞다”에서 옵니다. Open Design은 그 문제를 질문 폼, Skill, 디자인 시스템, 체크리스트로 줄이려는 쪽입니다.

주의 Open Design은 빠르게 변하는 초기 오픈소스 프로젝트입니다. README에서도 디자인 시스템 수가 72와 129로 혼재되어 보이는 등 카탈로그 수치는 정리 과정에 있을 수 있습니다. 도입하기 전에 현재 릴리즈와 문서의 수치를 다시 확인합니다.

4) 결과물을 미리보고 내보내는 데 집중합니다

Open Design은 생성 결과를 <artifact> 형태로 받아 샌드박스 iframe에서 렌더링합니다. 결과물을 채팅창 텍스트로 끝내지 않고, 실제 화면으로 확인하는 구조입니다.

내보내기 형식도 여럿입니다. README는 HTML, PDF, PPTX, ZIP, Markdown export를 언급합니다. 여기에 이미지·영상·HyperFrames 같은 미디어 생성 흐름도 함께 다룹니다.

이 지점은 Claude Code HTML Artifacts에서 봤던 문제의식과 닮았습니다. Markdown은 설명에 맞습니다. 그러나 디자인 비교·스펙 검토·프로토타입 확인처럼 시각 판단이 필요한 작업에는 부족합니다. Open Design은 처음부터 HTML artifact를 중심에 둡니다.

Google Stitch, Claude Design과 무게중심 비교

요즘 AI 디자인 도구는 비슷한 방향으로 수렴하고 있습니다. 자연어로 UI를 만들고, 디자인 시스템을 참조하고, 코드나 export로 넘기는 흐름입니다.

다만 각 도구의 무게중심은 다릅니다.

도구	무게중심
Claude Design	Anthropic 제품 안에서 빠른 시각화와 Claude Code 핸드오프
Google Stitch	Google Labs 기반 AI 네이티브 UI 캔버스와 코드 export
Figma MCP/use_figma	기존 Figma 캔버스와 디자인 시스템 위에서 AI 에이전트가 작업
Open Design	로컬 CLI, Skills, 디자인 시스템을 묶은 오픈소스 런타임

Open Design은 Google Stitch나 Claude Design과 같은 기능을 겨루기보다 다른 사용자를 겨냥합니다. “이런 워크플로우를 내 환경에서 직접 조립하고 싶다”는 개발자에게 맞습니다.

바로 써볼 때 확인할 것

Open Design을 바로 실험한다면 저는 아래 순서로 확인하겠습니다.

내 CLI가 감지되는지 확인합니다. Claude Code, Codex CLI, Gemini CLI 등 실제로 쓰는 에이전트가 Settings에서 잡히는지가 첫 관문입니다.
기본 Skill로 작은 artifact를 만듭니다. 처음에는 랜딩 한 장, 대시보드 한 장처럼 작은 결과물로 시작합니다.
디자인 시스템을 바꿔 봅니다. 같은 프롬프트에서 디자인 시스템만 바꿨을 때 결과가 얼마나 일관되게 달라지는지 봐야 합니다.
export 품질을 확인합니다. HTML 미리보기는 좋아도 PDF, PPTX, ZIP으로 넘겼을 때 실제 업무에 쓸 수 있는지는 별도 문제입니다.
보안 경계를 봅니다. 로컬 데몬이 파일시스템과 CLI를 다루기 때문에, 팀 환경에서는 프로젝트 범위와 API 키 취급 방식을 반드시 확인해야 합니다.

참고 Open Design은 BYOK 프록시도 제공합니다. CLI가 없으면 Anthropic, OpenAI, Azure OpenAI, Google Gemini 계열 API 모드로 같은 artifact 흐름을 씁니다.

마무리

Open Design은 Claude Design류 작업 방식을 로컬 에이전트, Skill, 디자인 시스템, artifact preview라는 조립 가능한 구조로 풀었습니다.

아직 완성된 디자인 툴이라기보다 초기 프로젝트입니다. 개발자는 이미 쓰는 CLI를 그대로 활용하고, 결과물을 파일로 남기고, Skill과 디자인 시스템을 바꿔 가며 워크플로우를 실험할 수 있습니다.

참고 자료

Open Design GitHub README ↗ — 프로젝트 개요, Skills, 디자인 시스템, 실행 구조
Open Design Quickstart ↗ — 로컬 실행, Docker, CLI 감지 방식
Open Design v0.6.0 Release ↗ — 작성 시점 최신 릴리즈
GeekNews: Open Design - Claude Design의 로컬 퍼스트 오픈소스 대체제 ↗ — 한국어 요약