또 다른 오픈소스 저장소가 Claude Design을 그대로 복제했다

이 가이드는 Open Design을 처음 만나보는 체계적인 안내입니다. 설치하고, 간단한 데모를 실행하고, 내장 디자인 시스템과 템플릿을 둘러본 뒤, 어디가 빛나고 어디가 아직 거친지에 대한 솔직한 평가로 마무리합니다. Chase AI가 직접 실습한 영상에서 밟은 경로를 따르되, 단계별로 그대로 따라 할 수 있도록 현재 릴리스에 맞게 다시 쓰고 최신 내용으로 업데이트했습니다. 실제 실행 장면은 위 영상을 보시고, 글로 된 버전은 아래에서 이어 읽어 보세요.

Open Design 작업 공간 — 프로토타입, 슬라이드 덱, 이미지, 동영상이 한곳에 모인 차분하고 친숙한 캔버스.

Open Design이란?

Open Design은 이미 사용 중인 코딩 에이전트 위에서 동작하는 오픈소스, 로컬 우선 디자인 플랫폼입니다. 하나의 모델 제공자에 묶어두는 대신, 사용자의 컴퓨터에 이미 설치된 CLI들 — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode, 그리고 그 밖에 수십 개 — 을 감지해 그 에이전트가 생성 작업을 주도하게 합니다. Chase는 이를 "자신의 에이전트를 가져오기(bring your own agent)"라고 부르는데, 바로 그게 핵심입니다. 생성 작업이 사용자 본인의 CLI를 통해 돌아가기 때문에, 이미 가입한 구독 위에 별도의 API 요금을 또 내지 않아도 됩니다.

눈여겨볼 만한 몇 가지 이유:

• 오픈소스, Apache-2.0 — 복제하고, 직접 호스팅하고, 모든 코드를 들여다볼 수 있습니다.
• 로컬에서 실행 — 프로젝트가 남의 클라우드가 아니라 본인 컴퓨터의 폴더에 저장됩니다.
• 에이전트 교체 가능 — 21개 이상의 코딩 에이전트를 지원하며, 어떤 CLI가 작업을 주도할지 직접 고르거나, 다른 하니스를 쓰고 싶다면 본인의 API 키를 가져올 수 있습니다.
• 프로토타입 그 이상 — 프로토타입, 슬라이드 덱, 매거진 레이아웃, 이미지 생성, 심지어 동영상까지 모두 하나의 작업 공간에서 만듭니다.
• 풍부한 디자인 시스템과 스킬 라이브러리가 기본 내장되어 있어, 빈 캔버스에서 시작하지 않아도 됩니다.

Claude Design을 써본 적이 있다면 인터페이스가 바로 친숙하게 느껴질 것입니다 — Open Design은 동일한 차분한 미감을 유지하면서, 그 위에 추가 기능(슬라이드 덱, 이미지, 동영상)을 얹습니다. 솔직하게 자리매김하자면, 이것은 어느 한 도구의 외형만 바꾼 것이 아니라, 그 자체로 열려 있고 로컬에서 돌아가며 에이전트를 기반으로 하는 독자적인 작업 공간입니다.

시작하기 전에

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

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

Chase는 영상에서 터미널 방식을 보여주지만, 오늘날 권장 경로는 데스크톱 앱입니다 — Node도, pnpm도, 복제도 필요 없고, 에이전트를 자동으로 감지해 줍니다.

1단계 — Open Design 설치하기

옵션 A — 데스크톱 앱 (권장, 설정 없음)

open-design.ai/download으로 가서 본인 OS용 빌드를 받으세요. 설치 후 앱은 이미 PATH에 있는 모든 코딩 에이전트 CLI를 자동으로 감지하고, 내장된 스킬과 디자인 시스템을 대신 불러옵니다. 작동하는 작업 공간에 도달하는 가장 빠른 방법입니다.

옵션 B — 소스에서 실행하기

Chase가 영상에서 하듯 저장소에서 직접 실행하고 싶다면, 몇 가지 명령만 있으면 됩니다:

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 버전을 알아서 선택해 줍니다. (개발 서버가 뜨지 않으면 에이전트에게 "Open Design 개발 서버를 띄워줘"라고 말해 명령을 처리하게 할 수도 있습니다.)

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

GUI를 한 번도 열지 않고 Open Design을 사용하려면 — 에이전트 안에서 스킬로 호출하려면 — 다음을 실행하세요:

od mcp install <agent>
# od는 Open Design과 함께 제공됩니다. <agent> = claude | codex | cursor | copilot | gemini | opencode | …

그런 다음 에이전트 안에서 이렇게 요청하면 됩니다: Use open-design to generate a landing page with the Airbnb design system.

2단계 — 첫 실행: 코딩 에이전트 연결하기

Open Design을 처음 실행하면 컴퓨터를 스캔해 찾아낸 모든 로컬 CLI를 보여줍니다. AI를 어떻게 구동할지 묻는 프롬프트가 뜨는데, 이것이 바로 "자신의 에이전트를 가져오기" 단계입니다.

• 로컬 CLI를 선택하세요. Open Design을 Claude Code, Codex, OpenCode로 연결하면, 별도의 API 요금을 물지 않고 이미 결제 중인 구독에서 생성 작업이 이뤄집니다. (다른 하니스를 선호한다면 본인의 API 키를 연결할 수도 있습니다.)
• 모델은 기본값으로 두세요 — 그러지 않을 이유가 없다면 말이죠. 모델은 CLI 자체의 설정을 따릅니다.
• 미디어 제공자 추가(선택). 이미지, 동영상, 오디오를 생성하고 싶나요? OpenAI, MiniMax, ElevenLabs 등 제공자에 대한 본인의 API 키를 추가하세요. 바로 이것이 작업 공간의 이미지·동영상 영역을 여는 열쇠이며, 순수한 Claude Design 클론은 제공하지 못하는 부분입니다.
• 스킬과 디자인 시스템을 켜고 끄세요. 지금 하려는 작업에 필요한 기능만 활성화하세요.

이 모든 것은 나중에 바꿀 수 있으니, 첫 시도에서는 단순하게 가세요.

3단계 — 작업 공간 둘러보기

상단을 가로질러 Designs, Examples, Design systems, 그리고 이미지와 동영상 템플릿 라이브러리가 있습니다. 처음 둘러볼 때 가장 중요한 두 가지는 디자인 시스템과 예시입니다.

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

디자인 시스템 라이브러리가 단연 돋보입니다. 각 항목은 실제 브랜드 — 예를 들어 Airbnb — 를 가져와 팔레트, 타이포그래피, 컴포넌트, 그리고 전체적인 시각적 분위기로 분해합니다. 그 브랜드 같은 느낌의 페이지를 원한다면, 해당 시스템을 끼워 넣기만 하면 빈 캔버스가 아니라 그 규칙들로부터 생성이 시작됩니다.

Chase의 실습에서 나온 솔직한 한마디: 예시들은 한 줄짜리 프롬프트로 만들어진 것이며, 그 정확한 프롬프트가 카드에 그대로 표시됩니다. 인상적으로 보이지만 뒤에 숨겨진 비법은 없습니다 — 보이는 것이 곧 입력한 것입니다. 원클릭 마법의 약속이 아니라 영감으로 받아들이세요. 이미지와 동영상 템플릿 갤러리도 비슷합니다. 참고용으로는 유용하지만, 프로토타입과 슬라이드 덱 워크플로보다는 일상적인 가치가 가볍습니다. 실제로 내보낼 결과물에 집중하세요.

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

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

4단계 — 무언가 만들어 보기

진짜 워크플로 — Open Design이 제값을 하는 지점 — 는 프로토타입과 슬라이드 덱을 만드는 것입니다. 예상하는 그대로 동작합니다:

1. 프로젝트 이름을 정하고 내장 목록에서 하나 이상의 디자인 시스템을 고르세요.
2. 충실도를 선택하세요 — 구조를 빠르게 잡으려면 와이어프레임, 완전히 스타일링된 결과물을 원하면 고충실도.
3. 선택적으로 Claude Design ZIP을 가져오세요. Claude Design에서 직접 디자인 시스템을 만들었나요? 거기서 프로젝트를 열고 Share → Download project as .zip을 선택한 다음, 그 ZIP을 Open Design에 업로드하세요. 모든 디자인 파일이 작업 공간에 나타나 바로 재사용할 수 있습니다. (현재로서는 이 ZIP 가져오기가 본인의 브랜드를 들여오는 가장 깔끔한 방법입니다 — 아직 "처음부터 디자인 시스템 만들기" 버튼은 없습니다.)
4. 브리프를 작성하고 만들기를 누르세요. Open Design은 Claude Design에서 보던 것과 같은 종류의 확인용 Q&A를 실행합니다 — 누구를 위한 것인지, 슬라이드는 몇 장인지, 어떤 충실도인지, 어떤 시각적 톤인지 — 그런 다음 할 일 목록을 만들어 차례로 처리합니다. 영상에서 Chase는 Lighthouse라는 가상 SaaS의 랜딩 페이지를 세 가지 비교 가능한 방향(클래식 스택형, 에디토리얼, 강렬한 스타일)으로 요청한 뒤, 브루탈리스트 슬라이드 덱을 생성해 PowerPoint로 내보냅니다.

결과물은 선택한 디자인 시스템으로 만들어진 실제로 상호작용 가능한 산출물입니다. Chase의 솔직한 평가: 결과는 대략 "90% 완성" 수준에 도달합니다 — 브랜드에 들어맞고 쓸 만한 덱이되, 간격과 서식을 살짝 손볼 부분이 남아 있습니다. 아직 초기 단계인 것치고는 강력한 출발점입니다.

팁

• API가 아니라 로컬 CLI를 사용하세요. 그래야 호출당 과금이 아니라 이미 가입한 구독에서 생성 작업이 이뤄집니다.
• 내장 디자인 시스템에서 시작하세요 — 빈 캔버스를 건너뛰고, 본인 브랜드가 필요할 때 Claude Design ZIP을 가져오세요.
• 실제로 쓸 미디어 키만 추가하세요 — 시작하는 데 모든 제공자가 필요하지는 않습니다.
• 90% 초안을 예상하고, 그다음 다듬으세요. 일찍 내보내(PowerPoint 포함) 넘기기 전에 작은 서식 어긋남을 잡아내세요.
• 먼저 프로토타입과 슬라이드 덱에 기대세요. 가장 완성도 높은 영역이며, 예시와 템플릿 갤러리는 완성된 결과물이라기보다 영감으로 활용하는 편이 낫습니다.

자주 묻는 질문

Open Design은 무료인가요? 네 — Apache-2.0 라이선스 아래의 오픈소스입니다. 로컬에서 무료로 실행하며, 연결한 에이전트와 API 제공자의 모델 및 미디어 사용량에 대해서만 비용을 냅니다. 로컬 CLI로 연결하면 생성 작업이 이미 가입한 구독을 타고 이뤄집니다.

어떤 코딩 에이전트를 지원하나요? Claude Code, Codex, Cursor, Gemini, GitHub Copilot, OpenCode를 포함해 21개 이상의 에이전트를 지원합니다. Open Design은 컴퓨터에 이미 설치된 CLI를 자동으로 감지하므로, 보통은 별도로 설정할 필요가 없습니다.

내 디자인 시스템을 사용할 수 있나요? 네. 오늘날 가장 매끄러운 방법은 Claude Design에서 시스템을 만들고, 프로젝트를 ZIP으로 다운로드한 뒤, 그 ZIP을 Open Design으로 가져오는 것입니다 — 토큰과 컴포넌트가 그대로 넘어옵니다. 아직 GUI에 전용 "디자인 시스템 만들기" 버튼이 없으므로, ZIP 가져오기가 권장 경로입니다.

Claude Design과 무엇이 다른가요? 익숙한 느낌은 같지만, 오픈소스에 로컬 우선이며 21개 이상의 CLI에 걸쳐 에이전트를 교체할 수 있습니다 — 게다가 단일 제공자 도구가 주지 못하는 슬라이드 덱, 매거진 레이아웃, 이미지 생성, 동영상 같은 추가 기능까지 갖췄습니다. 초기 릴리스인 만큼 거친 부분이 몇 군데 있겠지만, 기반은 탄탄합니다.

---

이 글로 된 가이드는 Chase AI의 직접 실습 영상을 바탕으로 합니다. 위의 전체 영상을 보시고, 더 실용적인 AI 도구 분석을 원하시면 Chase AI를 구독하세요.