Open Design은 어떤 코딩 에이전트로 구동해야 할까?

Open Design에서 가장 먼저 내려야 할 진짜 결정은 무엇을 만들지가 아니라——어떤 코딩 에이전트로 그것을 구동하는가입니다. 이 가이드는 그 선택에 초점을 맞춥니다: (긴) 지원 에이전트 목록, 고르는 방법, 그리고 설정하고 만들기 시작하는 법입니다. 이 글은 Tony Xhepa가 그의 영상에서 보여주는 실습 안내를 따르며, 다시 쓰고 현행 릴리스에 맞춰 업데이트했습니다. 위의 영상을 보거나, 계속 읽어 텍스트 버전을 확인하세요.

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

왜 에이전트가 중요한 선택인가

Open Design은 자체 모델을 제공하지 않습니다——오픈소스이며 로컬 우선의 인터페이스로, 이미 가지고 있는 어떤 코딩 에이전트 위에서든 실행됩니다. 그래서 당신이 고른 에이전트가 곧 당신의 디자인 엔진입니다: 품질, 비용, 속도를 좌우하죠. 아름다운 점은 그 폭넓음입니다. Tony가 나열하는 지원 에이전트 목록은 깁니다: Claude Code, Codex, Devin for Terminal, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro——그리고 더 많이. 이미 무엇을 쓰고 있든 Open Design은 대개 지원하며, 아무것도 설치하지 않았다면 대신 Anthropic이나 OpenAI API 키를 쓸 수 있습니다.

어떻게 고를까

빠르게 고르는 방법:

• 이미 코딩 CLI에 요금을 내고 있나요? 그것을 쓰세요——Open Design은 그 구독에 얹혀 가므로 두 번째 청구가 없습니다.
• 가장 강력한 디자인 결과물을 원하나요? 첫 빌드에서는 최상급 모델(예: 강력한 모델 위의 Claude Code)로 향하게 하세요.
• 저렴하거나 무료로 쓰고 싶나요? Gemini CLI의 무료 등급이나 OpenCode에 번들된 모델이 잘 작동합니다. 자신의 키를 가져올 수도 있습니다.
• 프라이버시/로컬을 중시하나요? 어떤 로컬 CLI든 생성 과정을 기기를 절대 벗어나지 않는 자격 증명 위에 유지합니다.

묶여 있지 않습니다——활성 에이전트는 나중에 한 번의 클릭으로 바꿀 수 있습니다.

1단계——소스에서 설치

Open Design은 Next.js 앱입니다. 빠른 시작은 몇 개의 명령이면 됩니다:

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

그런 다음 출력되는 로컬 URL을 여세요(포트는 동적입니다——하드코딩하지 마세요). Tony가 짚는 한 가지: Node 24가 필요합니다——Node 22에서는 “unsupported engine” 경고가 뜨므로 먼저 Node 24를 설치하세요. 터미널을 쓰고 싶지 않다면? open-design.ai/download에 데스크톱 앱이 있습니다.

2단계——실행 모드 설정(에이전트 고르기)

첫 실행 시 실행 모드를 설정합니다: 로컬 CLI, Anthropic API, 또는 OpenAI API. 로컬 CLI를 선택하면 Open Design이 당신의 기기에서 감지한 에이전트를 보여줍니다——Tony는 Codex, Gemini, OpenCode, Pi를 설치해 두었습니다(그 기기에서는 Claude Code가 미설치로 표시됨). 하나를 고르고(그는 OpenCode를 선택), 선택적으로 모델을 고른 뒤 Get started를 누릅니다.

플러그인 허브: 레지스트리를 둘러보고, 플러그인을 가져오며, 팀을 위해 준비합니다.

3단계——첫 디자인 만들기

Prototype을 만들고 이름을 붙인 뒤, 충실도(높음)를 고르고 제안된 브리프에서 시작하세요(Tony는 SaaS 분석 대시보드를 선택). Open Design은 디스커버리 질문(브랜드 맥락, 차트 데이터 소스, 비주얼 방향)을 진행하고, 당신이 답하고 방향을 고르면 그것을 만듭니다. 완성된 산출물에는 미리보기, 소스 코드 보기, 댓글, 그리고 Share 메뉴가 있습니다——PDF로 내보내기, 다운로드, 독립형 HTML, 템플릿으로 저장 등.

플러그인 라이브러리: 레지스트리에서 skill을 바로 설치——안티슬롭 디자인 skill도 포함합니다.

팁

• 이미 요금을 내고 있는 에이전트를 고르세요——두 번째 구독이 없고, 그것이 품질/비용을 정합니다.
• 먼저 Node 24를 설치하여 엔진 미지원 경고를 피하세요.
• local CLI 모드를 쓰세요——그러면 Open Design이 설치된 에이전트를 자동 감지합니다.
• 언제든 에이전트 교체——이 선택은 영구적이지 않으며, 한 번의 클릭으로 바꿉니다.
• CLI가 없나요? API 키를 쓰세요(Anthropic 또는 OpenAI).

자주 묻는 질문

Open Design은 어떤 에이전트를 지원하나요? 많습니다——Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen, GitHub Copilot CLI, Devin, Hermes, Kimi, Pi, Kiro 등. 기기에 설치된 것들을 자동 감지합니다.

어떻게 하나를 고르나요? 이미 요금을 내고 있는 CLI를 쓰세요. 첫 빌드에는 강력한 모델을, 반복에는 더 저렴한 것을 고르세요. 또는 무료 등급/자신의 API 키를 쓰세요.

왜 Node 24 경고가 뜨나요? Open Design은 Node 24를 요구합니다. Node 22에서는 “unsupported engine” 경고가 뜹니다. Node 24를 설치하면 사라집니다.

무료이고 오픈소스인가요? 네——Apache-2.0, 로컬 우선입니다. 무료로 실행하고, 연결한 에이전트나 키의 모델 사용분에 대해서만 지불합니다.

---

이 텍스트 가이드는 Tony Xhepa의 실습 안내를 기반으로 합니다. 위의 전체 영상을 보고, 더 많은 오픈소스 개발 도구를 위해 Tony Xhepa를 구독하세요.