프롬프트의 속도로 프로토타이핑
머릿속에 있는 플로우를 설명하기만 하면 에이전트가 진짜 클릭 가능한 프로토타입을 조립합니다 — 여러 화면, 공유된 스타일, 살아있는 인터랙션이 열고, 공유하고, 엔지니어링에 넘길 수 있는 HTML로 곧장 렌더링됩니다.
한 줄로 말하면
Open Design은 이미 사용 중인 코딩 에이전트를 위한 디자인 레이어입니다. 프로토타이핑에서는 한 단락짜리 아이디어에서 탐색 가능하고 스타일이 잡힌 프로토타입까지 한 번의 세션으로 간다는 뜻입니다 — 디자인 도구도, 내보내기 단계도, 인계의 단절도 없이.
Open Design에서 프로토타이핑이 작동하는 방식
- 01
플로우를 설명한다
무엇을 만드는지 평범한 언어로 에이전트에게 말합니다 — "환영 화면, 요금제 선택, 확인 화면이 있는 온보딩 플로우"처럼. Open Design이 프로토타입 기술을 불러와 에이전트가 단일 페이지가 아니라 여러 화면을 만들어야 한다는 것을 알게 합니다.
- 02
스타일이 잡힌 화면을 생성한다
에이전트는 Open Design의 디자인 시스템과 프로토타입 템플릿을 적용하므로 모든 화면이 타이포그래피, 여백, 컴포넌트를 공유하며 거친 초안처럼 보이지 않습니다. 동떨어진 목업이 아니라 일관된 화면 묶음을 얻습니다.
- 03
인터랙션을 연결한다
버튼이 이동하고, 탭이 전환되고, 모달이 열립니다. 프로토타입은 자체 완결형 HTML로 렌더링되어 어떤 브라우저에서도 진짜처럼 동작합니다 — 보기 위해 프로토타이핑 도구 계정이 필요 없습니다.
- 04
반복하고 인계한다
에이전트와 대화하며 다듬습니다 — "요금제 선택을 3열 레이아웃으로 만들어줘"처럼. 산출물이 프로젝트 안에 있기 때문에 디자인과 최종 코드가 하나의 진실 공급원을 공유하여, 흔한 디자이너-엔지니어 인계의 단절을 메웁니다.
프로토타입으로 만들 수 있는 것
프로토타입 전체 프롬프트 보기 → 웹 프로토타입
범용 데스크톱 웹 프로토타입. `assets/template.html`을 복사하고 `references/layouts.md`의 레이아웃을 붙여넣어 단일 독립형 HTML 파일 생성. 랜딩/마케팅/문서/SaaS 페이지의 기본 옵션.
프로토타입 전체 프롬프트 보기 → 모바일 앱
페이지 내에서 픽셀 단위로 정확한 iPhone 15 Pro 프레임 안에 렌더링되는 모바일 앱 화면입니다. assets/template.html을 복사하고 references/layouts.md에서 화면 원형 하나를 붙여넣어 제작합니다. 브리프에서 '모바일 앱', 'iOS 앱', 'Android 앱', '휴대폰 화면' 또는 '앱 UI'를 요청할 때 사용하세요.
프로토타입 전체 프롬프트 보기 → SaaS 랜딩
히어로, 기능, 사회적 증명, 가격, CTA가 포함된 단일 페이지 SaaS 랜딩 페이지입니다. 활성화된 DESIGN.md의 색상/타이포그래피/레이아웃 토큰을 준수합니다. 트리거 키워드: "saas landing", "marketing page", "product landing".
프로토타입 전체 프롬프트 보기 → 게임화 앱
3개 화면으로 구성된 게임화 모바일 앱 프로토타입: 커버 화면, XP 리본과 레벨 바가 있는 오늘의 퀘스트, 퀘스트 상세 화면. 게임화 앱, 습관 트래커, RPG 스타일 라이프 앱, 레벨업 앱, 일일 퀘스트, XP/연속 기록 앱에 적합합니다.
프로토타입 전체 프롬프트 보기 → HR 온보딩
단일 페이지 신입 사원 온보딩 계획 — 첫 주 일정, 버디 + 매니저 소개, 학습 트랙, 장비 체크리스트 및 '준비 완료 조건'. 브리프에 '온보딩', '신입 사원', '첫 주 계획' 또는 '入职'가 언급될 때 사용.
프로토타입 전체 프롬프트 보기 → Kami Landing
인쇄급 단일 페이지 종이 문서 생성 — 따뜻한 양피지 캔버스, 잉크 블루 강조색, 단일 두께 세리프체, 이탤릭 없음, 쿨 그레이 없음. 앱 UI가 아닌 전문 백서나 스튜디오 원페이저처럼 출력됩니다. 다국어 지원 설계(EN · zh-CN · ja). 독립형 HTML 파일 하나, 의존성 없음.
Open Design 프로토타이핑 vs 기존 방식
| 필요한 것 | Open Design이라면 | 기존 프로토타이핑 도구 |
|---|---|---|
| 아이디어에서 첫 화면으로 | ●이미 열어 둔 에이전트에 프롬프트 하나 | 별도 도구를 열고, 파일을 시작하고, 박스를 손으로 드래그 |
| 연결된 여러 화면 | ●공유 스타일과 작동하는 내비게이션을 갖춘 한 세트로 생성 | 각 프레임을 손으로 그리고 손으로 연결 |
| 일관된 비주얼 시스템 | ●에이전트가 적용하는 재사용 가능한 디자인 시스템에서 가져옴 | 파일마다 다시 만들거나 손으로 유지 |
| 공유 가능한 결과물 | ●자체 완결형 HTML — 어떤 브라우저에서도 열림, 계정 불필요 | 보는 사람에게 벤더 도구의 좌석이나 공유 링크가 필요 |
| 실제 코드로 가는 경로 | ●산출물이 리포지토리에 있고, 디자인과 코드가 하나의 원천을 공유 | 별도 인계 후 처음부터 다시 제작 |
| 비용과 종속 | ●오픈소스, 자신의 키를 가져와 로컬에서 실행 | 좌석당 구독, 벤더 호스팅, 내보내기 제한 |
이 모두가 프롬프트로 시작해 클릭 가능한 산출물로 렌더링되었습니다. 아이디어에 가까운 템플릿을 고르고 변형을 설명하면 에이전트가 그것을 적응시킵니다.
프로토타이핑 FAQ
-
01 Open Design으로 프로토타이핑하려면 Figma 같은 디자인 도구가 필요한가요?
아니요. Open Design은 코딩 에이전트 안에서 실행되며 프로토타입을 HTML로 렌더링합니다. 플로우를 언어로 설명하면 에이전트가 화면을 만들어 냅니다. 따로 배우거나 비용을 낼 캔버스 도구가 없습니다.
-
02 프로토타입은 인터랙티브한가요, 아니면 그냥 정적 목업인가요?
인터랙티브합니다. 출력이 진짜 HTML과 CSS이기 때문에 내비게이션, 탭, 모달이 작동합니다. 사용자와 똑같이 어떤 브라우저에서든 클릭해 볼 수 있습니다.
-
03 어떤 에이전트를 쓸 수 있나요?
Open Design은 Claude Code, Codex, Cursor Agent, Gemini CLI 및 12종 이상의 퍼스트파티 어댑터와 함께 작동합니다. 자신의 프로바이더 키를 가져오며, 무엇도 대신 호스팅되지 않습니다.
-
04 프로토타입이 실제 제품이 될 수 있나요?
바로 그게 핵심입니다. 산출물이 프로젝트 안에 있으므로 같은 디자인 시스템과 컴포넌트가 인계 후 버려지는 대신 프로덕션 코드로 이어집니다.
다음 아이디어를 오늘 밤 프로토타입으로
리포지토리에 스타를 누르고 Open Design을 설치한 뒤, 다음 "만약에"를, 이미 사용 중인 에이전트 안에서 클릭할 수 있는 무언가로 바꿔 보세요.