Open Design vs Figma 그리고 Claude Design — 전체 둘러보기

이 가이드는 하나의 질문을 중심으로 풀어낸 Open Design 완전 둘러보기입니다. 에이전트 네이티브 디자인 워크스페이스는 Figma와 Claude Design 옆에서 어떤 자리를 차지할까요? 앱을 설치하고, 에이전트를 설정하고, 내장된 디자인 시스템을 다루고, 실제 랜딩 페이지를 처음부터 끝까지 만들고, 캔버스 위 도구로 다듬고, 결과를 내보냅니다. Anton Larichev (PurpleSchool)가 자신의 실습 둘러보기에서 밟은 경로를 따라가되, 현재 릴리스에 맞춰 다시 쓰고 최신화했습니다. 실시간 진행은 위 영상을 보고, 글로 된 버전은 계속 읽어보세요.

Open Design 워크스페이스 — 프로토타입, 슬라이드 덱, 이미지, 영상을 하나의 차분하고 익숙한 캔버스에 담았습니다.

Open Design이란?

Open Design은 이미 쓰고 있는 코딩 에이전트 위에서 돌아가는 오픈소스 로컬 우선 디자인 플랫폼입니다. 하나의 모델에 묶이는 대신, 기기에 이미 깔려 있는 CLI들 — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode를 비롯해 수십 가지 — 을 감지해 그 에이전트가 생성을 주도하게 합니다. Anton의 표현이 정확합니다. 겉보기에는 Claude Design과 무척 닮았지만, 속을 들여다보면 “이미 설치해 둔 바로 그 에이전트를 구동하는 추가 UI일 뿐”이라는 것이죠. 코딩 요금제 위에 두 번째 구독료를 내는 게 아닙니다.

진지하게 살펴볼 만한 이유:

• 오픈소스, Apache-2.0 — 클론하고, 셀프 호스팅하고, 클라이언트 작업에 써도 됩니다.
• 로컬에서 실행 — 아무것도 업로드되지 않고, 프로젝트는 내 기기의 폴더에 그대로 남습니다.
• 에이전트 플러그형 — 지원되는 아무 CLI나 연결하거나, 다른 하니스용으로 자신의 API 키를 가져오세요.
• 풍부한 디자인 시스템과 스킬 라이브러리가 내장되어 있어 빈 캔버스에서 시작하지 않아도 됩니다.
• 정적 디자인 그 이상 — 프로토타입, 슬라이드 덱, 이미지 생성, 영상까지 모두 하나의 워크스페이스에서.

Figma와 어떻게 다른가

대부분이 실제로 궁금해하는 비교이니 솔직하게 짚어보겠습니다.

Figma는 수작업 기반의 협업형 벡터 편집기입니다. 모든 프레임을 직접 옮기고 모든 컴포넌트를 직접 그리며, 그 강점은 정밀함과 실시간 팀워크에 있습니다. 여기서는 무엇도 디자인을 대신 생성해 주지 않으며 — 작업을 하는 디자이너는 바로 당신입니다.

Open Design은 그 구도를 뒤집습니다. 원하는 바를 설명하고 디자인 시스템을 고르면, 에이전트가 실제로 동작하는 인터랙티브 HTML 산출물을 생성하고 당신은 그것을 다듬습니다. 결과물은 벡터 파일이 아니라 코드입니다 — 즉, 무엇을 만들든 곧바로 실제 프로젝트에 더 가까워진다는 뜻입니다.

Anton이 솔직하게 인정하는 지점: Open Design은 현재 Figma 파일에서 디자인 시스템을 뽑아내는 데 약합니다. 오늘 Figma 익스포트를 넣으면 추출된 시스템이 지저분하게 돌아오는 경향이 있습니다. 그러니 진실의 원천이 Figma에 있다면, 더 깔끔한 경로는 에이전트로 그 Figma 디자인을 먼저 코드로 바꾼 뒤 그 코드를 Open Design으로 가져오는 것입니다(자세한 내용은 아래에서). Open Design은 Figma 임포터가 아니라 생성과 반복의 작업면으로 다루세요.

Claude Design과 어떻게 다른가

Claude Design을 써봤다면 인터페이스가 곧바로 익숙하게 느껴질 것입니다 — 같은 차분한 미감, 같은 산출물 우선 루프. 정작 중요한 차이는 이렇습니다:

• 하나가 아니라 어떤 모델이든. Claude Design은 Opus 4.7에 묶입니다. Open Design은 당신이 고른 어떤 에이전트든 구동하며 — 프로젝트 중간에 바꿀 수도 있습니다.
• 미디어 생성 내장. 프로바이더 키(OpenAI GPT Image, MiniMax, ElevenLabs 등)를 추가하면 Open Design이 이미지, 오디오, 영상을 화면 안에서 바로 생성합니다. Anton이 짚는 가장 두드러진 차이로 — 단일 프로바이더 디자인 도구는 이걸 주지 못합니다.
• 로컬이면서 상업적으로 안전. Apache-2.0에 로컬 우선이 더해져, 클라이언트 작업이 결코 내 기기를 떠나지 않고 누구의 허락도 필요 없습니다.

1단계 — Open Design 설치

들어오는 길은 세 가지입니다. 자신에게 맞는 걸 고르세요:

경로	적합한 대상	요구 사항
데스크톱 앱	대부분의 사람 — 설정 불필요	없음. 그냥 내려받아 열면 됩니다.
소스에서 실행	코드를 읽거나 수정하고 싶은 개발자	Node ~24, pnpm 10.33.x
에이전트에 설치	터미널에서 사는 사람	이미 있는 코딩 에이전트 CLI

옵션 A — 데스크톱 앱 (권장, 설정 불필요)

open-design.ai/download에서 자신의 OS용 빌드를 받으세요. 설치 후 앱은 PATH에 이미 있는 모든 코딩 에이전트 CLI를 자동 감지하고, 내장된 스킬과 디자인 시스템을 알아서 불러옵니다. 작동하는 워크스페이스까지 가는 가장 빠른 길입니다.

옵션 B — 소스에서 실행

저장소에서 직접 실행하고 싶다면 — Anton이 영상에서 하듯 — 명령 몇 줄이면 됩니다:

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와 pnpm 10.33.x가 필요하며, Corepack이 고정된 pnpm 버전을 알아서 선택해 줍니다.

옵션 C — 코딩 에이전트에 설치

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

od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …

그런 다음 에이전트 안에서: Use open-design to generate a landing page with the Stripe design system.

2단계 — 에이전트 설정

처음 실행하면 Open Design이 기기를 스캔해 찾은 모든 CLI를 보여주고, 짧은 설정 과정을 안내합니다:

• 에이전트와 모델을 고릅니다. Anton은 Opus 4.7에서 Claude Code를 쓰지만(“디자인에 가장 뛰어난 것 중 하나”), Codex, Gemini CLI, 또는 감지된 다른 어떤 에이전트든 연결할 수 있습니다. 연결을 확인하는 Test 버튼이 있습니다.
• 또는 API 키를 씁니다. 로컬 CLI를 쓰고 싶지 않다면, 대신 베이스 URL과 키, 모델을 설정하세요.
• 미디어 프로바이더를 추가합니다. 이것이 차별점입니다 — OpenAI GPT Image, MiniMax, ElevenLabs 등의 키를 추가하면 이미지, 오디오, 영상을 즉석에서 생성할 수 있습니다.
• 스킬을 켜고 끕니다. 필요한 디자인 스킬(시스템 디자인, 프로토타입, 브랜드 가이드라인 등)을 활성화하고, 나머지는 꺼두세요.

이 모든 건 나중에 바꿀 수 있으니, 첫 설정은 단순하게 가세요.

3단계 — 디자인 시스템 다루기

디자인 시스템 라이브러리는 이 도구의 심장입니다. 각 항목은 실제 브랜드를 가져와 그 팔레트, 타이포그래피, 컴포넌트, 전체적인 분위기를 재사용 가능한 시스템으로 정리합니다.

디자인 시스템 라이브러리: 각 항목은 실제 브랜드를 재사용할 수 있는 팔레트, 타이포그래피, 컴포넌트, 시각적 분위기로 분해합니다.

자신의 브랜드를 가져오는 방법은 두 가지이고, Anton은 둘 다 시험해 봅니다:

1. Claude Design ZIP 임포트(현재 가장 깔끔). Claude Design에서 시스템을 만들었나요? 거기서 열어 Share → Download project as .zip을 선택하고, 그 ZIP을 Open Design으로 드래그하세요. 모든 토큰과 컴포넌트가 그대로 넘어옵니다.
2. 기존 코드에서 시스템 추출. 디자인 시스템이 붙지 않은 고충실도 파일을 만들고, 그 임포트를 실제 코드가 있는 폴더로 지정한 뒤, 에이전트에게 거기서 디자인 시스템을 도출하라고 요청하세요 — 색상, 타이포그래피, 간격, 그리고 JSX 컴포넌트 키트까지. 완벽하지는 않겠지만, 조정해 나갈 수 있는 탄탄한 출발점이 됩니다.

무엇이든 설치하기 전에 open-design.ai/plugins에서 전체 플러그인 라이브러리를 웹으로 둘러볼 수 있습니다.

4단계 — 실제 페이지를 만들고 반복하기

진짜 작업 흐름은 프로토타입과 슬라이드 덱을 만드는 것입니다. 영상에서 Anton은 임포트한 디자인 시스템을 바탕으로 PurpleSchool용 가격/랜딩 페이지를 만듭니다:

1. 프로젝트를 만들고, 웹/데스크톱/모바일을 고르고, 와이어프레임 또는 고충실도를 선택합니다.
2. 디자인 시스템을 연결하고 브리프를 붙여 넣습니다(Anton은 짧은 명세를 씁니다: 히어로, 가격, 기능, FAQ, 푸터).
3. 프로젝트에서 모델을 고르고(여기서는 Opus의 Claude Code) 전송합니다.
4. Open Design이 한 줄을 쓰기 전에 던지는 명확화 질문에 답하고 — 화면, 대상, 톤 — 그것이 할 일 목록을 따라 작업하는 모습을 지켜보세요.

템플릿 라이브러리: 유형별로 필터링하고 포크해서 시작할 수 있는 프로토타입, 슬라이드, 이미지, 영상 출발점.

Open Design이 진가를 발휘하는 곳은 캔버스 위 반복입니다: 아무 블록이나 선택해 코멘트를 달고, 미리보기 위에 직접 그려서 바꾸고 싶은 곳을 가리키고, 폰트와 크기를 화면 안에서 편집하고, 데스크톱/태블릿/모바일 너비에서 레이아웃을 확인하세요. 터미널의 맨 에이전트로는 재현하기 까다로운 빠른 피드백 루프입니다.

마음에 들면 결과를 독립 실행형 HTML이나 ZIP으로 내보내 팀에 넘기거나 — 코드를 곧장 프로젝트로 끌어오세요.

팁

• 날 Figma 파일을 그대로 넣지 마세요. Figma 추출은 현재 가장 약한 경로이니, Figma를 먼저 코드로 바꾼 뒤 그 코드를 임포트하세요.
• Claude Design ZIP을 임포트하세요 — 자신의 브랜드가 필요할 때 가장 매끄러운 진입 경로입니다.
• 로컬 CLI를 쓰세요 — 호출당 API 요금 대신, 이미 내고 있는 구독에 생성을 태우게 됩니다.
• 캔버스 위 코멘트와 그리기 도구에 기대세요 — 블록을 선택해 그 위에 그리는 편이 변경을 글로 설명하는 것보다 훨씬 빠릅니다.
• 탄탄한 초안을 기대하고 그다음에 다듬으세요. 일찍 내보내서 자잘한 간격과 서식 어긋남을 잡으세요.

FAQ

Figma를 Open Design으로 대체해야 하나요? 아니요 — 둘은 하는 일이 다릅니다. Figma는 정밀한 협업형 수작업 편집기이고, Open Design은 코드를 산출하는 에이전트 네이티브 생성·반복 작업면입니다. 브리프에서 실제로 브랜드에 맞는 초안까지 빠르게 가는 데는 Open Design을 쓰고, 손의 정밀함과 실시간 협업이 필요한 작업에는 Figma를 계속 쓰세요.

제 Figma 디자인을 임포트할 수 있나요? 간접적으로요. 직접적인 Figma 추출은 현재 거칩니다. 믿을 만한 경로는 에이전트로 Figma 디자인을 코드로 바꾼 뒤, 그 코드(또는 Claude Design ZIP)를 Open Design으로 임포트하는 것입니다.

꼭 Claude를 써야 하나요? 아니요. Open Design은 지원되는 아무 에이전트나 구동하며 — Codex, Gemini CLI, Cursor, OpenCode 등 — 프로젝트 중간에 모델을 바꾸거나 자신의 API 키를 가져올 수 있습니다.

무료인가요? 앱은 Apache-2.0 라이선스의 오픈소스이며 로컬에서 무료로 실행됩니다. 연결한 에이전트와 프로바이더의 모델·미디어 사용분에 대해서만 비용을 냅니다.

---

이 글 가이드는 Anton Larichev의 실습 둘러보기를 바탕으로 합니다. 위의 전체 영상을 보고, 개발과 AI 도구에 관한 더 깊은 이야기를 원한다면 PurpleSchool | Anton Larichev를 구독하세요.