프롬프트에서 라이브 URL까지 —— Open Design로 편집, 검사, 원클릭 배포

이 가이드는 프로토타입 하나를 프롬프트에서 실제 URL까지 단번에 완성합니다. 디자인 시스템을 고르고, 생성하고, 캔버스의 Edit과 Inspect 도구로 다듬은 다음, 곧장 Vercel 또는 Cloudflare Pages에 배포합니다 — 모두 Open Design을 벗어나지 않고요. 01Coder가 워크스루에서 진행한 데모를 바탕으로, 이 글에 맞게 재구성하고 최신 릴리스에 맞춰 업데이트했습니다. 실제 실행은 위 영상으로 보시거나, 계속해서 글 버전을 읽어 보세요.

Open Design 작업 공간: 무엇을 만들고 싶은지 설명하고 모드를 고르면, 나머지는 에이전트가 알아서 합니다.

Open Design란?

Open Design는 오픈소스이자 로컬 우선 디자인 플랫폼으로, 이미 사용 중인 코딩 에이전트 위에서 동작합니다——Claude Code, Codex, Gemini, Hermes 등——또는 직접 보유한 API key로도 됩니다. 데스크톱 앱으로 제공되며(컴파일 불필요), 깊이 있는 스킬 라이브러리와 깊이 있는 브랜드급 디자인 시스템 라이브러리를 짝지어, 빈 캔버스가 아니라 진짜 미학에서 시작하게 해 줍니다.

• 오픈소스, Apache-2.0——클론하거나, 셀프호스팅하거나, 그냥 앱을 다운로드하세요.
• 로컬에서 실행——프로젝트는 당신의 머신에 존재합니다.
• 에이전트 교체 가능——왼쪽 아래에서 언제든 에이전트를 전환하세요.
• 실제 브랜드의 디자인 시스템——Apple, Airbnb, ElevenLabs 등 다수.

1단계 —— 설치하고 디자인 시스템 고르기

가장 쉬운 길은 open-design.ai/download에서 데스크톱 앱을 받는 것입니다(macOS와 Windows; 소스에서 실행하고 싶다면 Docker 또는 pnpm). 실행하면 왼쪽 아래에 활성 에이전트가 표시됩니다(01Coder는 Codex 사용)——클릭해서 전환하세요.

Prototype을 만들고 이름을 지정한 뒤, 드롭다운에서 디자인 시스템을 선택하세요——각 항목은 출력물을 해당 브랜드의 룩으로 입힙니다. 이미 Claude Design에서 무언가를 만들었다면, 그 ZIP을 여기서 가져오세요.

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

2단계 —— 디스커버리 + 시각적 방향으로 생성하기

브리프를 작성해 보내세요. Open Design는 짧은 디스커버리 질문(누구를 위한 것인지, 디자인 톤, 브랜드 맥락, 언어)을 던진 뒤, 시각적 방향 선택기를 제시합니다——01Coder는 “FT Magazine” 에디토리얼 방향을 골랐습니다. 하나를 고르면 오른쪽에 첫 버전이 만들어집니다.

3단계 —— Edit와 Inspect로 세밀하게 다듬기

여기서 다시 프롬프트하지 않고도 다듬을 수 있습니다:

• Edit——아무 요소나 클릭해 그 내용을 직접 바꿉니다. 01Coder는 라벨을 “GitHub”에서 “GH”로 줄이고 헤드라인의 한 단어를 고쳐 쓴 다음 apply content를 누릅니다. 같은 방식으로 링크도 조정할 수 있으며, 왼쪽 패널에는 아티팩트가 레이어별로 정리되어 표시됩니다.
• Inspect——시각적 스타일용입니다. 처음에는 아티팩트에 data-oid 태그가 없다고 경고합니다; 에이전트가 추가하게 두세요(이것이 Open Design가 요소를 안정적으로 겨냥하는 방식입니다), 그런 다음 다시 로드하세요. 이제 아무 요소(예: 히어로의 h1)를 클릭하면 색, 배경, 글꼴 크기를 조정할 수 있고, 너무 많이 바꿨다면 리셋할 수 있습니다.

더 큰 변경에는 채팅으로 돌아가 직접 대화식으로 편집하세요——Edit/Inspect는 빠르고 정밀한 미세 조정을 위한 것입니다.

4단계 —— 원클릭으로 라이브 URL에 배포하기

준비되면 Share 메뉴(오른쪽 위)에서 PDF, PPTX, ZIP 또는 독립형 HTML로 내보낼 수 있습니다——또는 Vercel이나 Cloudflare Pages로 원클릭 배포할 수 있습니다. 01Coder처럼 Cloudflare를 사용하는 경우:

1. deploy → Cloudflare를 클릭한 다음 get / create an API token을 진행하세요.
2. Cloudflare Pages 권한이 있는 커스텀 토큰을 만들고, 요약으로 넘어가 생성하세요.
3. 토큰을 Open Design에 붙여 넣고, account ID를 추가한 뒤(Cloudflare 대시보드에서 복사), 배포하세요.
4. 제공된 링크를 여세요——첫 로딩이 이상해 보이면, 전파되는 동안 한두 번 새로고침하세요.

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

라이브 결과가 마음에 들지 않나요? 채팅으로 돌아가 반복하고, 다시 배포하세요.

팁

• 디자인 시스템에서 시작하세요, 그러면 첫 결과물부터 이미 온브랜드가 됩니다.
• Inspect를 쓰기 전에 에이전트가 data-oid 태그를 추가하게 하고, 그런 다음 미리보기를 다시 로드하세요.
• 카피에는 Edit, 스타일에는 Inspect, 구조에는 채팅——변경에 맞는 올바른 도구를 고르세요.
• Cloudflare 배포에는 둘 다 필요합니다: API 토큰(Pages 권한 포함)과 account ID.
• 첫 배포 후 새로고침——페이지가 아직 전파되지 않았다면.

자주 묻는 질문

정말로 Open Design 내부에서 공개 URL로 배포할 수 있나요? 네——Share 메뉴가 Vercel 또는 Cloudflare Pages로 원클릭 배포합니다(프로바이더 토큰은 당신이 제공합니다; Cloudflare는 account ID도 필요합니다).

data-oid는 무엇이며 Inspect는 왜 그것을 요구하나요? 그것은 Open Design가 요소를 안정적으로 겨냥할 수 있도록 요소에 추가하는 속성입니다. 에이전트가 추가하게 하고, 다시 로드하면, Inspect가 작동합니다.

꼭 소스에서 실행해야 하나요? 아니요——macOS 또는 Windows용 데스크톱 앱을 다운로드하세요. 원한다면 소스에서 Docker와 pnpm으로 실행하는 선택지도 있습니다.

무료인가요? 앱은 Apache-2.0 하에 오픈소스이며 로컬 실행은 무료입니다. 연결하는 에이전트와 프로바이더의 모델 및 미디어 사용량에 대해서만 비용을 지불합니다.

---

이 글 가이드는 01Coder의 실습 데모를 기반으로 합니다. 위의 전체 영상을 보고, 더 많은 AI 제품 심층 탐구를 위해 01Coder를 구독하세요.