오픈소스 Claude Design — 완전 무료 AI 디자인 시스템

이 가이드는 Open Design에 대한 WorldofAI의 개요 영상에 딸린 글 버전으로, 설치 따라하기라기보다는 “이게 실제로 무엇이고 왜 중요한가”를 풀어내는 데 가깝다. WorldofAI의 영상이 잡은 틀을 따르되, 현재 릴리스에 맞춰 다시 쓰고 업데이트했다. 실제 둘러보기는 위 영상에서 보고, 개념 중심의 정리가 필요하면 계속 읽어 보자: Open Design이 무엇인지, 왜 인기를 끌었는지, 무엇을 만들 수 있는지, 그리고 어떻게 시작하는지.

Open Design 작업 공간: 프로토타입, 슬라이드 덱, 이미지, 영상이 모두 한곳에서 시작된다.

Open Design이란?

Open Design은 오픈소스이자 로컬 우선(local-first) 디자인 플랫폼으로, Claude Design과 Figma를 대체하는 에이전트 네이티브 대안이다. 핵심 아이디어는 단순하지만 독특하다: 하나의 모델 제공자에 묶인 폐쇄형 앱이 되는 대신, Open Design은 이미 사용 중인 코딩 에이전트 위에서 동작한다.

프로젝트 폴더를 지정하면 머신에 설치된 코딩 에이전트 CLI들 — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode를 비롯한 다수 — 을 스캔한 뒤, 생성을 구동할 하나를 고르게 해 준다. 그 CLI가 곧 당신의 디자인 에이전트가 된다. 당신은 자신의 키를 가져와 그 위에 붙는 마진을 내는 것이 아니라, 자신의 에이전트를 가져와 이미 비용을 내고 있는 구독이나 요금제로 디자인을 돌리는 것이다.

그리고 정말로 로컬이다. 아래에는 실제 파일 시스템 접근 권한을 가진 데몬이 있다: 파일을 읽고 쓰고, 명령을 실행하고, 상태를 로컬 SQLite 데이터베이스에 보존한다. 디자인은 당신 자신의 폴더에 머물고, 프로젝트는 당신의 것이며, 무엇도 남의 클라우드를 거쳐 왕복할 필요가 없다. 이 로컬 런타임 위에는 내보내기 파이프라인(HTML, PDF, 슬라이드 덱, ZIP), Claude Design ZIP 가져오기, 그리고 디자인 파일에 에이전트 간 접근을 가능하게 하는 MCP 서버가 얹힌다 — 그래서 이것은 기존 도구를 대체하기보다 그 안에 자연스럽게 들어맞는다.

왜 인기를 끌었나

Open Design은 GitHub에서 가장 빠르게 성장한 오픈소스 프로젝트 중 하나가 되었고, WorldofAI는 그 이유를 분명히 짚는다. 세 가지로 요약된다.

오픈소스이자 무료다. Apache-2.0 라이선스 — 클론하고, 직접 호스팅하고, 모든 코드 한 줄까지 읽어 볼 수 있다. 접근을 막는 구독도 없고, 따로 사야 할 좌석도 없다. 비용은 오직 당신이 연결한 에이전트와 제공자의 모델 및 미디어 사용량에 대해서만 든다. 반면 Claude Design은 유료 장벽 뒤에 있고 사용 한도를 빠르게 소진한다. 진지한 생성 몇 번이면 벌써 추가 사용 요금을 따져보게 된다.

단순한 BYO 키가 아니라 BYO 에이전트다. 바로 이 지점이 계산을 뒤집는다. 대부분의 “오픈 대안”은 여전히 당신을 하나의 모델에 묶어 둔다 — API 키만 바꿀 뿐 여전히 누군가의 생태계 안에 있다. Open Design은 시스템에 이미 깔린 코딩 에이전트 CLI를 감지하고, 당신이 고른 것으로 생성을 라우팅한다. 높은 추론 강도로 Codex에서 돌리고 싶은가? 아니면 Claude Code, OpenCode, Gemini CLI, 혹은 웹 작업에 적합한 MiniMax 같은 효율적인 오픈 모델을 선호하는가? 프로젝트마다 당신이 정한다. 다중 모델 종속이 없다. 그리고 설정된 CLI가 없더라도, OpenAI 호환 BYO 키 프록시가 로컬 구성 없이 동일한 워크플로를 돌려 준다.

어떤 프로젝트에도 바로 끼워 넣을 수 있는 실전 디자인 시스템 — 그래서 빈 캔버스에서 시작하지 않는다.

디자인이 단순한 이미지 모델이 아니라 코딩 위에 세워졌다. 이것이 조용한 차별점이다. Open Design은 조합 가능한 스킬과 완전한 디자인 시스템 라이브러리를 제공하므로, 당신은 일회성 그림을 생성하는 것이 아니라 실제로 구조화된, 프로덕션 수준의 디자인을 생성한다. 출력물이 코드가 만들어지는 방식으로 만들어지기 때문에, 디자인에서 곧장 프로덕션으로 간다: 생성된 파일을 다른 코딩 에이전트에 넘겨 계속 빌드하면 된다. WorldofAI의 결론은, 출력 품질이 Claude Design에 견줄 만하면서 더 많은 일을 해내고 — 그것도 하나의 벤더에 가두지 않은 채 해낸다는 것이다.

무엇을 만들 수 있나

Open Design은 단일 기능 UI 생성기가 아니다. 하나의 작업 공간에서 다음을 만들어 낼 수 있다:

• 고품질 프로토타입과 랜딩 페이지 — 와이어프레임에 그치지 않고, 실제 디자인 시스템에 맞춰 만든 완전히 스타일링된 페이지.
• 슬라이드 덱과 피치 덱 — 제대로 된 섹션을 갖춘 구조적이고 애니메이션이 들어간 프레젠테이션.
• 매거진 및 에디토리얼 레이아웃 — 긴 스크롤 형식의 에디토리얼, 연차 보고서 스타일 문서, 그 밖의 풍부한 레이아웃.
• 모바일 앱 인터페이스 — 자동 생성된 티가 아니라 디자인된 것으로 읽히는 세련된 앱 UI.
• 이미지 — 당신이 연결한 미디어 제공자(예: OpenAI의 이미지 모델)를 통해 생성한 에셋.
• 영상과 오디오 — 역시 당신 자신의 제공자 키를 통해, 같은 곳에서 만드는 모션과 사운드.

앱에 내장된 예시 갤러리 — 랜딩 페이지, 슬라이드 덱, 디자인 시스템 — 만 봐도 그 범위가 한눈에 드러난다. 모든 것이 당신이 고른 에이전트로 구동되어 하나의 도구에서 나오며, 하나의 제공자에 묶이지 않고 모델을 자유롭게 섞을 수 있다.

시작하기

Open Design을 실행하는 방법은 세 가지다. 자신에게 맞는 것을 고르자:

경로	적합한 대상	필요한 것
데스크톱 앱	대부분의 사람 — 설정 불필요	없음. 다운로드해서 열면 된다.
소스에서 실행	코드를 읽거나 수정하고 싶은 개발자	Node ~24, pnpm(Corepack 경유)
에이전트에 설치	터미널에서 사는 사람	기존 코딩 에이전트 CLI

데스크톱 앱(권장). open-design.ai에 가서 자신의 플랫폼용 데스크톱 빌드를 내려받아 열면 된다. Node도, pnpm도, 클론도 필요 없다 — 앱이 PATH에 있는 코딩 에이전트 CLI를 자동 감지하고 내장 스킬과 디자인 시스템을 알아서 불러온다.

소스에서 실행 — WorldofAI가 영상에서 택한 경로 — 은 명령 네 줄이다:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

그런 다음 출력되는 로컬 URL을 열면 된다(포트는 동적으로 할당된다 — 고정된 번호를 가정하지 말고 터미널에 찍힌 것을 복사하자). Node ~24가 필요하며, Corepack이 고정된 pnpm 버전을 알아서 선택해 준다.

코딩 에이전트에 설치 — GUI를 한 번도 열지 않고 에이전트 안에서 Open Design을 스킬로 호출하려면:

od mcp install <agent>
# od에는 Open Design이 함께 들어 있다; <agent> = claude | codex | cursor | copilot | gemini | opencode | …

첫 실행 시 환영 데몬이 열리고, 거기서 기본 설정을 한다: 기본 에이전트와 모델 선택(앱이 로컬 CLI를 자동 감지하거나, OpenAI 호환 키를 연결), 선택적으로 이미지/영상/오디오용 미디어 제공자 키 추가, 그리고 필요한 MCP 서비스 연결. 저장하고, 시작한 뒤 프로토타입을 만들자 — 이름을 정하고, 와이어프레임 대신 High fidelity를 고른 다음, 요구 사항을 적는다. 에이전트가 몇 가지 확인 질문(플랫폼, 기사 관점, 디자인 방향)을 던지고, 작업을 계획하고, 디자인 시스템을 읽은 뒤 산출물을 빌드한다. WorldofAI의 실행에서는 Codex가 약 5분 만에 깔끔한 뉴스레터 랜딩 페이지를 만들어 냈다 — 그의 자체 Codex 요금제로 청구되고, 전부 Open Design의 스킬을 통해 라우팅되었다.

팁

• 작업에 맞는 에이전트를 고르자. Open Design은 당신이 선택한 CLI를 통해 라우팅한다 — 빠른 웹 작업에는 MiniMax 같은 효율적인 모델을 써 보고, 가장 다듬어진 출력을 원하면 Codex를 높은 추론 강도로 설정하자.
• 실제 결과물을 보고 싶다면 high fidelity로 시작하자; 구조를 빠르게 잡고 싶을 때만 와이어프레임으로 낮추면 된다.
• 미디어 키는 실제로 쓰는 제공자에 대해서만 가져오자 — 디자인을 시작하는 데 전부가 필요한 것은 아니다.
• 디자인 시스템이 먼저 있어야 하는 것은 아니다. 내장된 것에서 시작하거나, Claude Design ZIP을 가져오거나, Open Design이 합리적인 기본값을 추론하게 두면 된다.
• 디자인은 프로젝트 폴더와 함께 남는다. 올바른 디렉터리에 대고 Open Design을 실행해 작업을 정리하자.

FAQ

Open Design은 정말 무료인가? 그렇다 — Apache-2.0 하의 오픈소스이며, 구독이 없다. 비용은 오직 당신이 연결한 에이전트와 제공자의 모델 및 미디어 사용량에 대해서만 든다.

“BYO 에이전트”는 “BYO 키”와 어떻게 다른가? BYO 키는 여전히 당신을 하나의 제공자에 묶는다 — 단지 키를 제공할 뿐이다. Open Design은 머신에 이미 있는 코딩 에이전트 CLI를 감지하고, 프로젝트마다 어느 것이 생성을 구동할지 고르게 한다. 단일 모델 종속이 없다.

꼭 Claude를 써야 하나? 아니다. Claude Code는 여러 선택지 중 하나일 뿐이다 — Codex, Cursor, Gemini, Copilot, OpenCode 등이 모두 지원되며, 작업 공간에서 원할 때 언제든 에이전트를 바꿀 수 있다.

UI 목업 전용인가? 아니다. 같은 작업 공간에서 랜딩 페이지, 슬라이드 덱과 피치 덱, 매거진 레이아웃, 모바일 앱 인터페이스, 이미지, 영상을 만들어 낸다 — 그리고 디자인이 코드 위에 세워졌기에 디자인에서 곧장 프로덕션으로 간다.

---

이 글 가이드는 Open Design에 대한 WorldofAI의 개요를 바탕으로 한다. 위에서 전체 영상을 보고, 최신 AI 도구와 워크플로를 더 보려면 WorldofAI를 구독하자.