Open Design은 모든 바이브 코더의 꿈입니다
Open Design을 위한 바이브 코더 플레이북 — 이미 쓰던 에이전트를 그대로 가져오고, AI 슬롭을 잡아줄 디자인 시스템을 고르고, 전환을 일으키는 구조를 프롬프트로 지시한 다음, 거친 PRD를 단 몇 분 만에 랜딩 페이지, 모바일 앱, 데스크톱 앱으로 바꿔보세요. Sean Kochel의 실전 데모를 바탕으로 합니다.
이 가이드는 Open Design을 위한 바이브 코더의 플레이북입니다. 이미 쓰고 있는 에이전트를 그대로 가져오고, 결과물이 “AI가 만든 티”를 내지 않도록 디자인 시스템을 고르고, 실제로 전환을 일으키는 구조를 프롬프트로 지시한 다음, 대화를 통해 반복 개선합니다. 이 글은 Sean Kochel이 자신의 실전 데모에서 연달아 진행하는 세 가지 빌드 — 랜딩 페이지, 모바일 앱, 데스크톱 앱 — 를 따라가며, 현재 릴리스에 맞춰 다시 쓰고 최신화한 내용입니다. 라이브 실행을 보려면 위 영상을, 글로 읽고 싶다면 아래를 이어서 보세요.
Open Design 워크스페이스 — 프로토타입, 슬라이드 덱, 이미지, 비디오를 차분하고 익숙한 하나의 캔버스에 담았습니다.
Open Design이란?
Open Design은 이미 쓰고 있는 코딩 에이전트 위에서 동작하는 오픈소스, 로컬 우선 디자인 플랫폼입니다. 머신에 이미 설치된 CLI들 — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode, 그리고 수십 개가 더 있습니다 — 을 감지해 그 에이전트가 생성을 주도하게 합니다. Sean의 말을 빌리면, 에이전트를 설정하는 CLI 레이어가 있고, 품질을 끌어올리는 시스템 프롬프트가 있으며, 그다음에 진짜 가치를 만들어 내는 부분 — 스킬 지원과 방대한 디자인 시스템 라이브러리 — 이 있습니다. 결과물은 실제 HTML 파일이므로, 무엇을 만들든 그대로 여러분의 실제 프로젝트에 떨어집니다.
바이브 코더가 주목하는 이유:
- 자신의 에이전트와 키를 그대로 사용 — 두 번째 구독도, 공급자 종속도 없습니다.
- 로컬에서 실행 — 결과물은 코드베이스에 바로 옮겨 넣을 수 있는 HTML입니다.
- 디자인 시스템이 AI 슬롭 느낌을 잡아줍니다 — 빈 캔버스가 아니라 실제 브랜드에서 시작합니다.
- 스킬은 커스터마이즈 가능 — 자신만의 카피라이팅 규칙, UX 패러다임, 프로세스를 넣을 수 있습니다.
- 오픈소스, Apache-2.0 — 읽고, 포크하고, 클라이언트 작업에 쓰세요.
모든 바이브 빌드가 부딪히는 두 가지 문제
Sean은 전체 워크플로를 두 가지 실패 양상을 중심으로 설명합니다. 나머지 플레이북 전체가 이 두 가지를 피하는 방법이기 때문에 짚어볼 가치가 있습니다:
- AI 슬롭처럼 보인다. 뻔한 그래디언트, 똑같은 세리프 폰트, 컨테이너 범벅 — 만든 본인조차 마음에 들지 않습니다.
- 제 역할을 하도록 구조화되어 있지 않다. 전환되지 않는 랜딩 페이지, 흐름이 말이 안 되는 앱.
디자인 시스템이 첫 번째 문제를 해결합니다. 실제 구조를 갖춘 의도적인 프롬프트가 두 번째 문제를 해결합니다. 아래의 모든 빌드에서 이 둘을 염두에 두세요.
1단계 — 설치하고 에이전트를 고르세요
들어가는 방법은 세 가지입니다:
| 경로 | 적합한 대상 | 요구 사항 |
|---|---|---|
| 데스크톱 앱 | 대부분의 사람 — 설정이 전혀 필요 없음 | 없음. 다운로드해서 열기만 하면 됩니다. |
| 소스에서 실행 | 코드를 읽거나 수정하고 싶은 개발자 | Node ~24, pnpm 10.33.x |
| 에이전트에 설치 | 터미널에서 사는 사람 | 기존 코딩 에이전트 CLI |
가장 빠른 경로는 데스크톱 앱입니다 — open-design.ai/download에서 받으세요. 여러분의 PATH에 이미 있는 에이전트 CLI를 자동으로 감지합니다. 대신 소스에서 실행하려면:
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web출력되는 로컬 URL을 여세요(동적 포트를 사용하므로 포트를 하드코딩하지 마세요). 처음 실행할 때 Open Design이 작업을 주도할 에이전트를 지정하거나, 자신의 API 키를 가져오세요.
2단계 — 전환되는 랜딩 페이지 만들기
이것이 Sean의 첫 번째 데모이며, 나머지 모든 작업의 템플릿이 됩니다:
- 디자인 시스템을 고르세요. 데모에서 그는 Anthropic의 디자인 시스템을 선택합니다. 이것이 슬롭 방지 가드레일입니다 — 에이전트가 그 브랜드의 팔레트, 타이포그래피, 컴포넌트 언어를 물려받습니다.
디자인 시스템 라이브러리: 각 항목이 실제 브랜드를 팔레트, 타이포그래피, 컴포넌트, 시각적 분위기로 분해해 재사용할 수 있게 해줍니다.
- 분위기뿐 아니라 구조를 프롬프트하세요. Sean은 어떤 섹션을 만들지 정확히 — 열한 개를 — 지시하고, 자신의 PRD에서 가져온 경영 요약(제품 비전, 문제 정의, 타깃 사용자, 제안 솔루션, 핵심 기능)을 붙여 넣어 카피가 실제 맥락을 바탕으로 작성되게 합니다.
- 디스커버리 질문에 답하세요. Claude Design과 마찬가지로, Open Design은 작성하기 전에 명확히 하는 질문을 던집니다. 여기서는 실행을 위해 SaaS 랜딩 페이지 스킬을 가져다 씁니다 — 그리고 스킬은 그저 파일이기 때문에, 대신 자신만의 카피라이팅 가이드라인이나 섹션 구조를 스킬로 불러올 수도 있습니다.
- 실행되게 두세요. 약 5분 뒤에 전문적인 첫 결과물이 나옵니다 — 실제 전환 지향 구조, 깔끔한 비교 표, 보기 좋게 스타일링된 사례 연구 카드, 탄탄한 FAQ까지.
다른 느낌을 원하나요? Sean은 똑같은 브리프를 에디토리얼 대신 브루탈리스트 톤으로 다시 실행해, 의미 있게 다른 디자인을 얻습니다 — 구조는 같고 껍데기만 다릅니다. 디자인 시스템이 무거운 일을 대신해 주기 때문입니다.
3단계 — 화면 단위로 모바일 앱 만들기
모바일 데모에서 Sean은 한 번에 한 화면씩 작업합니다. 같은 Anthropic 디자인 시스템을 유지한 채, 각 화면마다 자신의 PRD를 바탕으로 만든 프롬프트를 붙여 넣습니다 — 홈 피드, “빈틈 채우기” 추천 화면, 즉석 음식 기록. 에이전트는 명확히 하는 질문을 던지고, iOS 레이아웃을 목업하며, 세 화면 모두에서 선택한 디자인 시스템을 일관되게 따릅니다.
교훈은 이렇습니다: UX를 어떻게 프롬프트하느냐가 결과의 대부분을 좌우한다. 그가 같은 앱을 채팅 우선의 코칭 인터페이스로 다시 짜자, 전혀 다르지만 여전히 일관된 화면 세트를 얻습니다. 디자인 시스템이 브랜드 일관성을 지키고, 프롬프트가 패러다임을 결정합니다.
템플릿 라이브러리: 유형별로 필터링하고 포크해서 시작할 수 있는 프로토타입, 슬라이드, 이미지, 비디오 출발점들.
4단계 — 멀티모달로 가기: 화면에서 데스크톱 앱으로
마지막 데모는 멀티모달 트릭을 보여줍니다. Sean은 모바일 화면 세 개를 스크린샷으로 찍어 새 채팅에 넣고, 열린 형태의 요청을 던집니다: “이 핵심 기능의 웹 앱 버전을 목업해줘.” 5분 뒤에 깔끔한 3분할 데스크톱 변환본이 나옵니다 — 왼쪽에 내비게이션, 가운데에 작업 캔버스, 오른쪽에 진행 상황 뷰 — 슬래시 커맨드 상호작용까지 목업되어 있습니다.
모호한 프롬프트에 참고 이미지만 더해도 쓸 만한 출발점이 나옵니다. 제대로 된 스펙이 있으면 더 선명해지지만, 요점은 그대로입니다: 여러 표면 사이를 자유롭게 오갈 수 있다는 것입니다.
팁
- 항상 디자인 시스템에서 시작하세요. AI 슬롭 느낌에 맞서는 가장 큰 단일 지렛대입니다.
- 구조를 명시적으로 프롬프트하세요. 섹션이나 화면을 나열하고, PRD에서 가져온 실제 맥락을 붙여 넣어 카피가 공허하지 않게 하세요.
- 스킬에 기대고 — 자신만의 스킬도 작성하세요. 스킬은 그저 파일입니다. 카피라이팅 규칙이나 UX 패러다임을 워크플로에 바로 불러오세요.
- 대화로 반복 개선하세요. UX 프레이밍이 달라지면 결과가 크게 달라집니다. 그것이 기능이니, 여러 가지를 시도해 보세요.
- 참고 이미지를 활용하세요. 기존 화면을 스크린샷으로 찍어 넣어 표면을 넘나들며 변환하세요.
- 결과물이 HTML이라는 점을 기억하세요. 이미 시작한 프로젝트에 떨어뜨려 넣도록 만들어졌습니다.
FAQ
특정 모델을 꼭 써야 하나요? 아니요. Open Design은 여러분이 설정한 어떤 에이전트든 — Claude Code, Codex, Cursor, Gemini, OpenCode 등 — 또는 자신의 API 키로 구동합니다. 공급자 종속이 없습니다.
Claude Design과는 어떻게 다른가요? 익숙한 느낌은 같지만, 무료이고 오픈소스이며 로컬 우선이고 모델에 구애받지 않으며 훨씬 더 커스터마이즈하기 좋습니다 — 자신만의 스킬과 프로세스를 추가할 수 있습니다. 게다가 단일 공급자 도구로는 얻을 수 없는 이미지·비디오 생성 기능까지 있습니다.
만든 것을 기존 앱에 병합할 수 있나요? 네 — 결과물이 HTML 파일이므로, 이미 시작한 프로젝트에 떨어뜨려 넣도록 만들어졌습니다. Sean은 스펙 기반 병합 워크플로를 별도 영상에서 다룹니다.
무료인가요? 앱은 Apache-2.0 라이선스의 오픈소스이며 로컬에서 무료로 실행할 수 있습니다. 비용은 연결한 에이전트와 공급자의 모델 및 미디어 사용분에 대해서만 발생합니다.
이 글로 된 가이드는 Sean Kochel의 실전 데모를 바탕으로 합니다. 위의 전체 영상을 보고, 더 많은 AI 빌드 워크플로를 보려면 Sean Kochel을 구독하세요.