Open Design — 이미 가진 에이전트를 디자인 엔진으로 바꾸기

이 가이드는 대부분의 워크스루가 슬쩍 넘기는 부분, 즉 엔진에 초점을 맞춥니다. Open Design 자체는 디자인 표면일 뿐이고, 실제 생성은 여러분이 가리킨 코딩 에이전트와 모델이 수행합니다. 그리고 그 선택이야말로 결과물 품질을 좌우하는 가장 큰 지렛대입니다. 이 글은 Codedigipt가 실습 워크스루에서 사용하는 구성을 따르되, 현재 릴리스에 맞게 다시 쓰고 업데이트한 것입니다. 실제 실행은 위 영상으로, 글 버전은 아래에서 보세요.

Open Design 워크스페이스: 만들고 싶은 것을 설명하고 모드를 선택하면 나머지는 에이전트가 처리합니다.

Open Design이란?

Open Design은 이미 쓰고 있는 코딩 에이전트 위에서 돌아가는 오픈소스이자 로컬 우선 디자인 플랫폼입니다. 자체 모델을 싣지 않고, 머신에 이미 있는 CLI(Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode, 그 외 수십 가지)를 스캔해 그 에이전트를 디자인 엔진으로 사용합니다. 그래서 작업은 이미 가진 구독이나 무료 크레딧으로 돌아가며, 디자인용 두 번째 청구서가 생기지 않습니다.

• 오픈소스, Apache-2.0 — 클론하고, 셀프호스팅하고, 모든 줄을 읽을 수 있습니다.
• 로컬 실행 — 프로젝트는 여러분 자신의 머신에 있는 폴더입니다.
• 엔진은 직접 가져오기 — 지원되는 어떤 CLI든, 또는 여러분의 API 키든.
• 디자인 시스템과 스킬의 두툼한 라이브러리가 내장되어, 빈 캔버스에서 시작하지 않아도 됩니다.
• 프로토타입을 넘어서 — 프로토타입, 슬라이드, 이미지 생성, 그리고 영상.

핵심 아이디어: 모델이 곧 품질 노브

이것이 Codedigipt가 도달한 멘탈 모델이며, 가장 내면화할 가치가 있는 한 가지입니다. Open Design의 결과물 품질은 여러분이 고른 모델을 따라간다. Open Design은 구조—스킬, 디자인 시스템, 디스커버리 흐름—를 제공하지만, 실제 디자인 판단은 엔진에서 나옵니다. 빠르고 저렴한 모델로 돌리면 빠르고 저렴한 초안이 나오고, 최상급 모델로 돌리면 같은 프롬프트와 디자인 시스템에서 훨씬 다듬어진 결과가 나옵니다.

이것은 한계가 아니라 기능입니다. 프로젝트마다 비용과 품질을 저울질해 조절할 수 있고, 언제든 엔진을 바꿀 수 있다는 뜻입니다.

1단계 — Open Design 설치하기

들어가는 길은 세 가지:

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

가장 빠른 길은 open-design.ai/download에서 받는 데스크톱 앱입니다 — 설치된 에이전트 CLI를 자동으로 감지합니다. 소스에서 실행하려면(Codedigipt의 방식):

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

출력된 로컬 URL을 여세요 — 동적 포트를 해석하므로 포트를 하드코딩하지 마세요. Codedigipt가 경험에서 짚어 주는 함정: Node 24가 필요합니다. Node 22에서는 그의 환경에서 시작되지 않았습니다. 먼저 Node 24 LTS를 설치하세요. Corepack이 고정된 pnpm 버전을 선택합니다.

2단계 — 엔진 고르기

바로 이 단계가 중요합니다. 설정(실행 모드 구성)을 열고, Open Design이 머신에서 감지한 CLI 중에서 생성을 구동할 에이전트를 고르세요. 설치되지 않은 것은 비활성으로 표시됩니다.

• Gemini CLI — 디자인 단계에서 Codedigipt의 선택: 디자인 감각이 좋고 무료 등급 크레딧도 오래갑니다. 생성은 그 크레딧으로 돌아갑니다.
• Claude Code — 디자인에 강한 모델(Sonnet 또는 Opus)을 가리키면 가장 충실도 높은 결과물을 얻습니다.
• OpenCode — 유능한 기본 모델(예: MiniMax, GLM)을 기본 탑재. 아무것도 설정하고 싶지 않다면 적합합니다.
• Anthropic API(BYOK) — CLI가 없나요? API 키를 넣고 모델을 직접 고르면 됩니다. 이렇게 하면 별도의 Claude Design 구독 없이 Claude 품질의 결과물을 쓸 수 있습니다 — 키는 여러분이, 디자인 표면은 Open Design이 가져옵니다.

3단계 — 먼저 생성하고, 엔진으로 판단하라

프로젝트를 만들고 이름을 붙인 뒤 고충실도를 선택하고 요청을 작성하세요(Codedigipt는 「auth-as-a-service」 API의 랜딩 페이지를 만듭니다). 무언가를 쓰기 전에 Open Design은 짧은 디스커버리 폼—출력 형식, 주요 화면, 대상 독자, 비주얼 톤, 브랜드 방향—을 돌려주어, 에이전트가 추측 대신 올바른 방향을 고정하도록 합니다. 답하고 비주얼 방향을 고르면 빌드가 시작됩니다.

미리보기에 렌더링된 실제 생성 프로토타입 — 어둡고 영화 같은 에이전시 랜딩 페이지.

빠른 모델에서의 결과(Codedigipt는 Gemini flash 프리뷰 사용)는 수초 만에 나오는 깔끔하고 쓸 만한 초안입니다. 그가 거듭 강조하는 솔직한 단서: 결과물은 여러분이 고른 모델 수준만큼 나온다. Opus급 다듬음이 필요하다고요? 엔진을 Opus의 Claude로 바꾸고 같은 요청을 다시 돌리세요 — 같은 스킬, 같은 디자인 시스템, 더 날카로운 결과.

플러그인 라이브러리: 레지스트리에서 곧바로 스킬을 설치하세요 — anti-slop 디자인 스킬도 포함됩니다.

마음에 들면 공유 메뉴에서 PDF, PPTX, 단독 HTML 또는 ZIP으로 내보낼 수 있습니다 — 또는 Vercel로 바로 배포할 수도 있습니다. 전체 플러그인 라이브러리는 open-design.ai/plugins에서 둘러볼 수 있습니다.

팁

• 모델을 작업에 맞춰라. 빠른 초안과 반복에는 저렴하고 빠른 모델을, 클라이언트에게 보일 최종본에는 최상급 모델을.
• 로컬 CLI를 쓰면 생성이 이미 가진 구독이나 무료 크레딧으로 돌아갑니다.
• Claude Design 플랜 없이 Claude 품질을 원하면 BYOK — Anthropic 키를 설정에 넣고 모델을 선택하세요.
• 약한 모델 탓을 도구에 돌리지 마라. 좋은 디자인 시스템도 약한 엔진은 구하지 못합니다. 결과가 빈약해 보이면 프롬프트를 다시 쓰기 전에 모델부터 업그레이드하세요.
• 디스커버리 폼은 끝까지 채워라 — 그것이 엔진이 첫 시도에 방향을 고정하는 방식입니다.

자주 묻는 질문

고르는 모델이 정말 결과물을 그렇게 많이 바꾸나요? 네 — 가장 큰 지렛대입니다. Open Design은 스킬과 디자인 시스템을 제공하지만, 디자인 판단은 엔진에서 나옵니다. 같은 요청이라도 Opus와 빠른 프리뷰 모델에서는 다듬음의 차이가 뚜렷합니다.

Claude Design 비용을 내지 않고 Claude 수준의 품질을 쓸 수 있나요? 네. Open Design을 Claude Code로 가리키거나, Anthropic API 키를 설정에 넣고(BYOK) 모델을 고르세요. 별도의 Claude Design 구독 없이 그 결과물을 얻습니다.

프로젝트 도중에 모델을 바꿀 수 있나요? 네 — 설정에서 에이전트/모델을 바꾸고 다시 돌리면 됩니다. 같은 스킬과 디자인 시스템, 그 뒤의 엔진만 달라집니다.

무료인가요? 앱은 Apache-2.0 아래 오픈소스이며 로컬 실행은 무료입니다. 연결한 에이전트의 모델/크레딧 비용만 내면 됩니다.

---

이 글 버전 가이드는 Codedigipt의 실습 워크스루를 바탕으로 합니다. 위의 전체 영상을 보시고, 더 실용적인 AI 도구 구성을 원하시면 Codedigipt를 구독하세요.