Claude Design을 이 오픈소스 대안으로 갈아탔습니다!

이 가이드는 Open Design을 전적으로 여러분의 컴퓨터에서만 실행하는 방법을 보여줍니다. 클라우드 계정도, 디자인 건당 과금도 없고, 노트북 밖으로 빠져나가는 데이터도 없습니다. 핵심 아이디어는 Open Design을 로컬 모델 러너(예: Ollama)와 이미 설치해 둔 커맨드라인 코딩 에이전트에 묶어, 생성 과정이 로컬에서 일어나고 작업물이 비공개로 유지되도록 하는 것입니다. 이는 AI Automation Station이 로컬 설정 가이드 영상에서 밟은 경로를 따르되, 현재 릴리스에 맞춰 다시 쓰고 업데이트한 것입니다. 실시간 실행 모습은 위 영상을 보시고, 글로 된 버전은 아래에서 이어 읽으세요.

로컬로 실행되는 Open Design 워크스페이스 — 여러분의 프로젝트, 여러분의 에이전트, 여러분의 컴퓨터.

Open Design이란?

Open Design은 오픈소스이자 로컬 우선(local-first) 디자인 플랫폼으로, Claude Design과 Figma의 에이전트 네이티브 대안입니다. 완전한 로컬 설정을 가능하게 하는 것은 바로 그 핵심 아키텍처입니다. 하나의 모델 제공자에 묶여 있는 대신, Open Design은 여러분이 이미 쓰고 있는 코딩 에이전트 위에서 동작합니다. Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode 등이 모두 연결됩니다. 단순히 키만 가져오는 것이 아니라 “에이전트를 직접 가져오는” 방식입니다.

이 점이 이 튜토리얼에서 중요한 이유는, 선택한 에이전트가 로컬에서 실행된다면(즉 Ollama 같은 러너를 통해 로컬 모델을 구동하는 오픈 커맨드라인 에이전트라면) 전체 루프가 여러분의 컴퓨터 안에 머물기 때문입니다. 크레딧을 소모하지도 않고, 프롬프트가 원격 API로 전송되지도 않습니다.

알아 둘 만한 몇 가지:

• 오픈소스, Apache-2.0 — 클론하고, 셀프 호스팅하고, 모든 줄을 직접 읽어 볼 수 있습니다.
• 로컬에서 실행 — 프로젝트가 남의 클라우드가 아니라 여러분 자신의 폴더에 저장됩니다.
• 에이전트 교체 가능 — 21개 이상의 코딩 에이전트가 지원되며, 어떤 CLI가 생성을 구동할지 직접 고릅니다.
• 프로토타입 그 이상 — 프로토타입, 라이브 아티팩트, 슬라이드 덱, 매거진 레이아웃, 이미지 생성, 심지어 영상까지 모두 하나의 워크스페이스에서 만듭니다.
• 실전 출발점 내장 — 잘 알려진 브랜드(Airbnb, Airtable 등)를 본뜬 디자인 시스템과 템플릿, 이미지 프리셋이 함께 들어 있어, 빈 캔버스 앞에서 막막할 일이 없습니다.

Claude Design을 써 보셨다면 느낌이 익숙할 것입니다. Open Design은 그 차분한 미감을 그대로 유지하고 Claude Design과 똑같이 브라우저에서 동작하면서도, 그 아래의 엔진을 열어 두어 원하는 어떤 에이전트든 끼워 넣을 수 있게 해 줍니다.

시작하기 전에

Open Design을 설치하는 방법은 세 가지입니다. 자신에게 맞는 것을 고르세요:

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

영상은 소스에서 실행하는 경로를 택하지만, 오늘날 권장 경로는 데스크톱 앱입니다. Node도, pnpm도, 클론도 필요 없습니다.

완전한 로컬 설정을 원한다면, 시작하기 전에 로컬 구동이 가능한 커맨드라인 에이전트 하나도 설치해 두는 것이 좋습니다. 예를 들어 OpenCode는 무료 모델을 기본 내장하고 있고 Ollama 같은 로컬 러너를 가리키도록 설정할 수 있습니다. Open Design은 이 에이전트가 PATH에 올라와 있으면 자동으로 감지합니다.

1단계 — Open Design 설치

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

open-design.ai에 접속해 Download desktop을 클릭하세요. macOS(Apple Silicon 및 Intel), Windows(x64), Linux(AppImage)용 빌드가 제공됩니다. 설치 후 앱은 이미 PATH에 있는 모든 코딩 에이전트 CLI를 자동 감지하고, 내장된 스킬과 디자인 시스템을 알아서 불러옵니다.

방법 B — 소스에서 실행

영상처럼 저장소에서 곧장 실행하려면 몇 가지 명령만 있으면 됩니다:

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을 구동하려면(에이전트 안에서 스킬이나 MCP 서버로 호출) 다음을 실행하세요:

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

그런 다음 에이전트 안에서 이렇게 요청하세요: Use open-design to generate a dense analytics dashboard with the Airbnb design system.

첫 실행: 로컬 에이전트 연결

Open Design을 처음 실행하면 컴퓨터를 스캔해 찾아낸 모든 커맨드라인 에이전트(Claude Code, OpenCode, Codex, Gemini 등)를 보여 줍니다. 바로 이 순간이 로컬 전용 워크플로를 현실로 만드는 지점입니다. 어떤 에이전트가 디자인을 생성할지 직접 고르는 것이죠.

• 크레딧을 쓰지 않으려면 로컬 에이전트를 고르세요. Claude Code는 훌륭하지만 Claude 크레딧을 끌어다 씁니다. 대신 OpenCode 같은 무료 로컬 옵션을 선택하면 생성이 여러분의 컴퓨터에서 비용 없이 돌아갑니다. OpenCode는 여러 무료 모델(그중 MiniMax 포함)을 묶어 제공하며, Ollama 같은 로컬 러너 앞단에 놓일 수 있어 모델이 컴퓨터를 떠나지 않습니다.
• 원할 때만 제공자 API 키를 추가하세요. 언젠가 호스팅 모델을 쓰고 싶다면 Anthropic, OpenAI, Azure, Google Gemini의 키를 붙여 넣을 자리가 있습니다. 완전한 로컬 실행이라면 이 부분은 통째로 건너뛰어도 됩니다.
• 미디어 제공자 추가(선택). 이미지, 영상, 오디오를 생성하고 싶다면 해당 제공자의 키를 직접 추가하세요. 이것이 키를 직접 가져오는(bring-your-own-key) 부분이며, 선택 사항입니다.
• 스킬과 디자인 시스템 켜고 끄기. 지금 눈앞의 작업에 필요한 기능만 활성화하세요.

여기 있는 모든 설정은 나중에 바꿀 수 있으니, 첫 단계는 단순하게 가세요. 로컬 에이전트를 고르고 넘어가면 됩니다.

워크스페이스 둘러보기

Open Design은 작업을 프로젝트 단위로 유지합니다. 여러분이 만든 디자인은 작업 중인 프로젝트 폴더 안에 저장됩니다. 폴더를 바꾸면 프로젝트가 바뀝니다.

새 프로토타입을 시작하면(영상에서는 “Tube Analytics”라고 이름 붙입니다) 곧바로 선택지가 주어집니다. 디자인 시스템으로 시작할지, 자유 형식(free-form)으로 작업할지. 디자인 시스템을 먼저 정의하도록 강요당하지 않습니다. 내장 시스템 중 하나(Claude/Anthropic 시스템, Airbnb, Airtable 등)를 고르거나, Claude Design ZIP을 가져와 기존 토큰과 컴포넌트를 모두 함께 끌고 올 수도 있습니다.

디자인 시스템 라이브러리: 미리 보고, DESIGN.md를 받아 가고, 어떤 프로젝트에든 끼워 넣을 수 있는 실제 브랜드 출발점.

여기에는 브랜드 시스템만 있는 게 아닙니다. Open Design은 사용 전에 미리 볼 수 있는 예시 디자인 갤러리를 함께 제공합니다. 하나를 클릭하면 그것을 만들어 낸 프롬프트와 함께 라이브 미리보기가 열립니다. Use prompt를 누르면 거기서부터 시작할 수 있습니다. 그 옆에는 출발점으로 포크해 쓸 수 있는 이미지 템플릿이 자리합니다.

예시 디자인과 이미지 템플릿 — 어느 것이든 미리 본 뒤 포크하거나 그 프롬프트를 재사용하세요.

무언가를 만들어 보기 — 로컬로

이제 로컬 루프가 정말 작동함을 증명하는 부분입니다. 영상에서 제작자는 SaaS 분석 대시보드를 열고 Open Design에 그것을 확장해 달라고 요청합니다.

1. 프로토타입을 시작합니다. 디자인 시스템(또는 자유 형식)을 고르고, 선택적으로 Claude Design ZIP을 가져와 에이전트가 기존 디자인의 전체 맥락을 갖도록 합니다.
2. 레퍼런스를 첨부합니다. 시각 레퍼런스로 쓸 이미지를 끌어다 놓거나 붙여 넣고, 아니면 @를 입력해 프로젝트의 파일을 첨부하세요. 예를 들어 “SaaS Analytics dashboard” 파일처럼요.
3. 브리프를 작성합니다. 구체적인 내용으로 프롬프트를 주세요: “Build out the remaining tabs in the dashboard using your design system.” 익숙한 분할 레이아웃이 나타납니다. 왼쪽에는 대화, 오른쪽에는 라이브 미리보기와 디자인 파일.
4. 에이전트에서 실행되는 모습을 지켜봅니다. Open Design은 여러분이 고른 CLI(영상에서는 OpenCode)를 호출해 새 화면을 만듭니다. OpenCode의 무료 모델을 통해 로컬에서 돌아가기 때문에 크레딧이 전혀 들지 않습니다. Claude, Gemini, Codex 어디에도 과금되지 않습니다. 기존 시스템에 맞춰 스타일링된 새 탭들(트렌드, 콘텐츠 스크립트 생성기, 트랜스크립트, 댓글)이 나타납니다.
5. 내보내거나 배포합니다. 디자인이 준비되면, 코드베이스로 넘기기 위해 ZIP으로 다운로드해 달라고 하거나, Open Design 안에서 Vercel로 곧장 배포하세요. 이는 Claude Design이 제공하지 않는 기능입니다. 변경 사항을 앱에 다시 반영하려면, ZIP을 Claude Code 같은 코딩 에이전트에 넣고 “implement these design changes using the ZIP file”이라고 말하면 됩니다.

그 결과는 진짜로 상호작용하는 디자인입니다. 처음부터 끝까지 여러분 자신의 컴퓨터에서, 여러분 자신의 에이전트로, 무료로 만들어진 것이죠.

팁

• 비용 없는 생성을 위해 무료 로컬 에이전트를 고르세요. 무료 모델을 묶어 제공하는 OpenCode(또는 Ollama를 통한 로컬 모델)는 모든 실행을 크레딧 0으로 유지합니다.
• 호스팅 키는 필요할 때를 위해 아껴 두세요. Anthropic/OpenAI/Gemini 키는 프리미엄 모델을 쓰고 싶을 때만 붙여 넣으세요. 로컬 에이전트에는 그중 어느 것도 필요 없습니다.
• 시작하는 데 디자인 시스템이 꼭 있어야 하는 건 아닙니다. 내장 시스템에서 시작하거나, Claude Design ZIP을 가져오거나, 그냥 자유 형식으로 가세요.
• 여러분의 디자인은 프로젝트 폴더와 함께 머뭅니다. Open Design을 알맞은 디렉터리에 대고 실행해 작업을 정리하세요.
• 내보내기는 인계이지 종속이 아닙니다. ZIP으로 다운로드하거나, Vercel에 배포하거나, 기존 코드에 병합하도록 파일을 코딩 에이전트에 넘기세요.

자주 묻는 질문

정말로 클라우드 비용 없이 Open Design을 실행할 수 있나요? 네. Open Design 자체가 오픈소스(Apache-2.0)이며 무료로 실행됩니다. OpenCode 같은 무료 로컬 에이전트를 가리키게 하면(원한다면 Ollama 같은 로컬 러너로 뒷받침하면) 생성이 여러분의 컴퓨터에서 크레딧 비용 0으로 일어납니다. 비용을 내는 경우는 유료 호스팅 모델이나 미디어 제공자를 연결하기로 선택할 때뿐입니다.

어떻게 하면 모든 것을 로컬에서 비공개로 유지할 수 있나요? 첫 실행 때 클라우드 에이전트 대신 로컬 커맨드라인 에이전트를 고르세요. Open Design은 여러분이 고른 에이전트 위에서 동작하므로, 로컬 에이전트와 로컬 모델을 쓰면 프롬프트와 디자인이 결코 컴퓨터를 떠나지 않습니다.

어떤 코딩 에이전트를 지원하나요? Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode를 포함해 21개 이상입니다. Open Design은 컴퓨터에 이미 설치된 CLI를 감지하고, 어느 것이 생성을 구동할지 고르게 해 줍니다.

Claude Design과는 어떻게 다른가요? 똑같이 익숙한 브라우저 기반 느낌이지만, 오픈소스이고 로컬 우선이며 에이전트를 교체할 수 있습니다. 자신의 에이전트(로컬이든 호스팅이든)를 직접 가져오고, 디자인 시스템을 미리 정의하도록 강요당하지 않으며, Claude Design이 못 하는 추가 작업도 할 수 있습니다. 예를 들어 Vercel로 직접 배포하거나 같은 워크스페이스에서 슬라이드, 이미지, 영상을 생성하는 것 같은 일들이죠.

---

이 글로 된 가이드는 AI Automation Station의 로컬 설정 가이드를 바탕으로 합니다. 위의 전체 영상을 보시고, 더 많은 실전 AI 도구 튜토리얼을 원하시면 AI Automation Station을 구독하세요.