#아티클공유 #읽을거리
PM이 AI 프로토타이핑 도구를 활용해 아이디어, PRD, Figma 디자인, 손그림 스케치 등을 짧은 시간 안에 실제 작동하는 프로토타입으로 바꾸는 방법을 설명하는 아티클 공유드립니다!
단순히 “AI로 코드를 짠다” 수준이 아니라, PM이 제품 아이디어를 검증하고 고객 피드백을 빠르게 받기 위해 어떤 도구를 선택해야 하는지, 각 도구의 장단점은 무엇인지, 어떤 상황에서 어떤 프롬프트를 써야 하는지까지 다루고 있습니다.
저자는 AI 프로토타이핑이 PM의 업무 방식을 크게 바꿀 수 있고 & 이전에는 엔지니어 리소스를 투입해야만 가능했던 인터랙티브 프로토타입, 내부 툴, 간단한 앱, CRM 같은 제품 실험물을 이제는 PM도 직접 몇 분 안에 만들어볼 수 있다고 봅니다.
(내용 AI 번역 및 요약)
1.
글의 도입부: PM에게 AI 프로토타이핑이 왜 중요한가
글은 Lenny’s Newsletter의 유료 구독자용 글로 시작한다. 주제는 제품을 만들고, 아이디어를 실험하고, PM으로 일하는 방식을 바꿀 AI 프로토타이핑이다.
저자는 독자가 AI 도구를 이미 깊게 쓰고 있든, 이제 막 시작했든 이 글을 통해 다음을 얻을 수 있다고 설명한다.
첫째, PM이 주목해야 할 AI 개발 도구가 무엇인지 알 수 있다.
둘째, 어떤 상황에서 어떤 도구를 써야 하는지 판단할 수 있다.
셋째, AI 도구를 쓰다가 막혔을 때 어떻게 풀어야 하는지 배울 수 있다.
넷째, 실제로 검증된 프롬프트와 예시, 단계별 가이드를 바로 적용할 수 있다.
특히 저자는 PM이 Figma 디자인을 몇 번의 클릭으로 작동하는 앱으로 바꾸거나, PRD를 몇 분 만에 인터랙티브 프로토타입으로 변환할 수 있다고 강조한다. 즉, AI 프로토타이핑은 단순히 코딩 보조가 아니라 제품 발견, 아이디어 검증, 고객 피드백 수집 속도를 크게 높이는 도구로 소개된다.
1.
글쓴이 Colin Matthews 소개
이 글의 필자인 Colin Matthews는 오랫동안 PM으로 일했고, 현재는 AI Prototyping for Product Managers라는 AI 프로토타이핑 강의를 운영하는 사람으로 소개된다.
Lenny는 Colin이 복잡한 기술 개념을 매우 쉽고 명확하게 설명한다고 평가한다. Colin은 과거에도 “더 기술적인 PM이 되는 법”에 관한 인기 글을 쓴 적이 있고, 이번 글 역시 PM들이 AI 프로토타이핑을 실제 업무에 적용하는 데 큰 도움이 될 것이라고 소개된다.
또한 글에서는 Colin의 무료 30분 강의와 4주짜리 코호트 기반 강의도 언급된다. 이 강의에서는 10분 안에 기능형 프로토타입을 만드는 법, AI 프로토타이핑 도구 사용법, 흔한 디버깅 문제 해결법, 코딩의 기본 구조 등을 다룬다고 설명한다.
1.
최근 6개월 사이 AI 개발 도구가 급부상했다
저자는 최근 6개월 사이에 Cursor, Replit Agent, v0, Bolt 같은 AI 도구들이 빠르게 등장했고, 이 도구들을 통해 몇 분 만에 작동하는 앱을 만들 수 있게 되었다고 말한다.
예시로 저자는 AI에게 몇 단계의 프롬프트를 던져 2D 탱크 게임을 10분 만에 만들었다고 설명한다. 처음에는 “AI 상대가 있는 2D 탱크 게임”을 만들라고 지시하고, 이후 총알 충돌, 체력 0일 때 애니메이션과 게임 리셋, 플레이어 이동 가속 개선, 스페이스바 연속 발사 타이머, 맵에 파워업 추가 같은 기능을 순차적으로 요청했다.
이 사례는 AI 도구가 단순히 정적인 화면을 그리는 수준이 아니라, 게임 로직, 충돌 처리, 애니메이션, 상태 변화, 조작감 개선, 기능 추가까지 점진적으로 수행할 수 있음을 보여준다.
1.
PM이 AI 프로토타이핑으로 할 수 있는 일
저자는 단순한 게임 예시보다 더 중요한 것은, PM이 이 도구들을 활용해 실제 제품 업무에 가까운 작업을 할 수 있다는 점이라고 강조한다.
예를 들어 PM은 다음과 같은 작업을 할 수 있다.
Figma 디자인을 기능형 프로토타입으로 바꾸기.
손으로 그린 대략적인 스케치를 작동하는 앱으로 만들기.
PRD 문서를 인터랙티브 프로토타입으로 바꾸기.
팀 내부에서 사용할 수 있는 간단한 내부 툴을 직접 만들기.
고객에게 보여줄 수 있는 실험용 기능을 빠르게 구현하기.
즉, AI 프로토타이핑은 PM이 엔지니어에게 “이런 거 만들어주세요”라고 요청하기 전에, 직접 눈에 보이고 만져지는 형태로 아이디어를 구체화하는 수단이 된다.
1.
AI 개발 도구는 크게 세 가지 유형으로 나뉜다
글은 본격적으로 도구 선택법을 설명하면서, 현재 AI 개발 도구를 세 가지 유형으로 분류한다.
첫 번째는 챗봇형 도구다. 예시는 ChatGPT, Claude다. 사용자가 프롬프트를 입력하면 코드나 설명을 만들어주는 방식이다.
두 번째는 클라우드 개발 환경이다. 예시는 Replit, Bolt, v0, Lovable이다. 이들은 앱을 만들고 실행하고 배포하는 환경까지 제공한다.
세 번째는 로컬 개발 보조 도구다. 예시는 GitHub Copilot, Cursor, Windsurf, Zed다. 기존 개발자의 IDE 안에서 코드를 작성하고 수정하는 것을 도와주는 도구다.
글은 이후 각 유형별로 어떤 일을 할 수 있는지, 어떤 상황에 적합한지, PM 입장에서 어떻게 써야 하는지를 설명한다.
1.
챗봇형 도구: ChatGPT, Claude
챗봇형 도구는 복잡한 디자인 요구사항이 없고, 한 페이지 정도로 끝나는 간단한 프로토타입에 적합하다.
예를 들어 계산기, 플립 카드, 데이터 시각화, 간단한 랜딩 페이지, 날짜 선택기, 투두 리스트 같은 작은 앱을 만들 때 쓸 수 있다.
ChatGPT나 Claude는 사용자의 질문에 답하듯 코드를 작성할 수 있다. 예를 들어 “React로 계산기를 만들어줘”라고 하면, 계산기 컴포넌트에 해당하는 코드를 생성할 수 있다.
다만 ChatGPT의 경우, 생성된 코드를 실제로 실행하려면 사용자가 직접 코드를 복사해서 IDE에 붙여넣고 로컬 환경에서 실행해야 한다. 즉, 코드를 만들어주기는 하지만 호스팅이나 실행 환경까지 제공하지는 않는다.
Claude는 Artifact 기능을 통해 한 단계 더 나아간다. Claude Artifact에서는 생성된 코드를 Claude 인터페이스 안에서 실행해볼 수 있고, 공유 가능한 링크로 배포할 수도 있다. 하지만 한계도 있다. 사용자가 코드를 직접 수정하기 어렵기 때문에, 변경하려면 계속 프롬프트를 통해 AI에게 수정 요청을 해야 한다.
Perplexity도 언급되지만, 저자는 앱 제작용으로 추천하지 않는다. Perplexity는 검색 중심 도구에 가깝고, ChatGPT나 Claude 같은 모델을 기반으로 기본적인 코드를 쓸 수는 있지만, 프로토타입 제작에는 적합도가 낮다고 본다.
정리하면 챗봇은 클라이언트, 서버, 데이터베이스 등 소프트웨어 스택의 여러 부분에 대한 코드를 생성할 수는 있지만, 직접 호스팅하거나 복잡한 다중 페이지 앱을 만드는 데는 한계가 있다. 따라서 간단하고 일회성인 프로토타입에 가장 적합하다.
1.
클라우드 개발 환경: Replit, Bolt, v0, Lovable
클라우드 개발 환경은 챗봇보다 훨씬 강력하다. 이 유형의 도구들은 아이디어를 실제 작동하는 제품에 가깝게 만들기 위한 여러 작업을 한 번에 처리할 수 있다.
저자는 이 도구들이 다음을 지원한다고 설명한다.
엔드투엔드 기능 구현.
프로토타입 실행에 필요한 백엔드 인프라 처리.
여러 파일을 동시에 수정하는 에이전트형 워크플로.
데이터베이스 스키마 수정 같은 복잡한 코드베이스 작업.
클라우드 배포와 공유 가능한 링크 생성.
여러 페이지나 여러 기능을 가진 앱 제작.
이 섹션에서 중요한 기준은 호스팅이다. 소프트웨어 제품은 기본적으로 클라이언트, 서버, 데이터베이스 세 부분으로 구성된다.
클라이언트는 사용자가 직접 상호작용하는 화면이다. 보통 JavaScript로 작성된다.
서버는 클라이언트 요청을 처리하고 데이터를 가져오거나 다른 서비스와 연동한다. Node.js, Python, Java 등이 쓰인다.
데이터베이스는 데이터를 영구적으로 저장하는 공간이다.
실제 기능을 가진 프로토타입을 만들려면 클라이언트와 서버를 호스팅해야 하며, 경우에 따라 데이터베이스도 필요하다. 이 점에서 클라우드 개발 환경은 챗봇과 차이가 크다.
1.
v0: 기본 디자인 품질이 좋은 도구
v0는 클라이언트와 서버 코드를 모두 작성하고 호스팅할 수 있는 도구로 소개된다.
기본적으로 Next.js와 Shadcn UI 같은 프레임워크를 사용한다. 이 둘은 v0를 만든 Vercel과 연결된 기술 스택이다.
v0의 강점은 기본 스타일링이 뛰어나다는 점이다. 사용자가 간단히 “기본 CRM을 만들어줘”라고 요청했을 때도 꽤 보기 좋은 디자인의 CRM이 생성된다.
즉, PM이 시각적으로 괜찮은 프로토타입을 빠르게 만들고 싶을 때 v0가 유리하다. 특히 고객이나 내부 이해관계자에게 보여줄 때, “대충 만든 느낌”이 덜한 화면을 빠르게 뽑아낼 수 있다.
저자는 v0를 한 줄로 정리하면 기본적으로 아름다운 디자인이 필요한 경우 선택할 도구라고 말한다.
1.
Bolt: 빠르고 유연한 프로토타입에 적합
Bolt는 v0와 비슷하게 클라이언트와 서버 코드를 생성하고 배포할 수 있다. 하지만 중요한 차이는 서버가 어디에서 실행되느냐에 있다.
v0는 실제 클라우드 호스팅 인프라에 배포되는 반면, Bolt는 서버 코드를 사용자의 브라우저 안에서 실행한다.
이 구조 때문에 Bolt는 빠르게 프로토타입을 만들기 좋지만, 몇 가지 제한이 있다. 예를 들어 다음과 같은 기능은 Bolt만으로는 기본 지원이 어렵다.
로그인이나 계정 같은 사용자 인증.
여러 사용자가 동시에 상호작용하는 채팅이나 협업 워크스페이스.
결제 처리처럼 보안이 중요한 데이터 작업.
세션이 끝나도 유지되는 영구 데이터 저장.
이유는 각 사용자의 기기에서 독립된 서버 복사본이 실행되기 때문이다. 다만 Supabase 같은 외부 서비스를 붙이면 서버와 데이터베이스 기능을 보완할 수 있다.
저자는 Bolt로도 “기본 CRM”을 만들 수 있음을 보여주며, Bolt를 빠르고 유연한 디자인의 프로토타입에 적합한 도구로 정리한다.
1.
Replit: 내부 툴과 데이터 처리 앱에 강함
Replit은 클라이언트, 서버, 데이터베이스를 포함한 풀스택 애플리케이션을 만들 수 있는 도구다.
JavaScript뿐 아니라 Python 프레임워크를 사용한 웹 앱도 만들 수 있다. 특히 Replit은 다음과 같은 작업에 강하다고 설명된다.
내부 관리자 도구.
파일 변환 도구.
지원자 추적 시스템.
이미지 리사이징 같은 데이터 처리 앱.
여러 페이지로 구성된 대시보드.
단순한 UI를 가진 데이터 중심 애플리케이션.
저자는 자신이 실제로 Replit을 사용해 MP4를 GIF로 변환하는 도구와 Substack 이미지 리사이저를 만들었고, 이를 매주 사용한다고 설명한다.
따라서 Replit은 단순히 예쁜 화면을 만드는 것보다, 실제로 데이터를 저장하거나 변환하거나 백엔드 기능이 필요한 내부 툴에 적합하다.
한 줄 정리로는 내부 툴 또는 데이터를 저장·변환하는 제품을 만들 때 Replit을 선택하라는 것이다.
1.
Lovable: 실제 제품화에 가까운 앱을 만들 때 유리
Lovable은 v0와 Bolt에 가까운 도구다. 웹사이트 생성에 강하고, React와 Next.js 같은 JavaScript 프레임워크를 사용한다.
Lovable의 차별점은 다른 도구와의 통합이다. Lovable은 GitHub 저장소와 연결할 수 있고, Supabase를 통해 인증과 데이터베이스를 자동으로 붙일 수 있으며, Anthropic이나 OpenAI 같은 AI 제공자와도 연결할 수 있다.
이런 통합 기능 덕분에 Lovable은 단순한 실험용 프로토타입을 넘어, 실제로 사용할 가능성이 있는 제품을 만들 때 강력한 도구로 소개된다.
하지만 단점도 있다. Lovable에는 코드 에디터가 없어서, 코드를 직접 수정하려면 프롬프트로 에이전트에게 요청해야 한다. 이 때문에 디버깅이 어렵다. 저자는 종종 Lovable에서 새 기능을 빠르게 시작한 뒤, 문제가 생기면 Cursor로 옮겨 해결한다고 말한다.
Lovable의 한 줄 정리는 현재 쓰는 도구들과 통합해 실제 제품에 가까운 앱을 만들고 싶을 때 선택할 도구다.
1.
클라우드 개발 환경 도구 선택 요약
저자는 네 가지 클라우드 개발 도구를 이렇게 정리한다.
v0는 기본 디자인이 예쁜 결과물이 필요할 때 좋다.
Bolt는 빠르고 유연한 프로토타입을 만들 때 좋다.
Replit은 내부 툴이나 데이터 저장·변환이 필요한 제품을 만들 때 좋다.
Lovable은 GitHub, Supabase, AI API 등 기존 도구와 통합해 실제 제품에 가까운 앱을 만들 때 좋다.
공통적으로 이 클라우드 개발 환경들은 챗봇보다 복잡한 애플리케이션을 만들 수 있고, 클라우드 배포와 공유 가능한 링크를 통해 반복적으로 개선하기 쉽다.
1.
로컬 개발 보조 도구: GitHub Copilot, Cursor, Windsurf, Zed
세 번째 유형은 로컬 개발 보조 도구다.
이 도구들은 코딩을 할 줄 알고, 실제 프로덕션에 출시할 진지한 앱을 만드는 사람에게 적합하다.
Cursor와 GitHub Copilot은 Claude 같은 챗봇처럼 프롬프트를 받을 수 있지만, 단순히 답변을 주는 것에서 그치지 않고 사용자의 실제 코드베이스와 개발 환경 안에서 변경을 생성하고 적용할 수 있다.
즉, 이 도구들은 자동완성보다 훨씬 강력하다. 사용자가 자연어로 요청하면 여러 파일을 수정하고, 기존 코드 구조에 맞춰 기능을 추가하고, 버그를 고치는 식으로 작동한다.
1.
Lovable + Cursor 조합 사례
저자는 자신이 라이브 Q&A와 투표 기능이 있는 프레젠테이션 앱을 Lovable과 Cursor를 활용해 약 10일 만에 만들었다고 소개한다.
처음에는 Lovable에서 기본 기능을 빠르게 만들었다. 이후 코드를 GitHub에 동기화해 다른 도구에서도 수정할 수 있게 만들었다. 마지막으로 Cursor를 사용해 세부 변경과 버그 수정을 진행했다.
이 앱은 인증, 데이터베이스, 실시간 업데이트 등 꽤 복잡한 기능을 포함하고 있었다.
10일이라는 시간이 길게 느껴질 수 있지만, 대부분의 시간은 버그 해결과 문제 진단에 쓰였다고 한다. 저자는 바로 이 부분에서 Cursor가 다른 도구보다 강하다고 설명한다. 즉, Lovable은 빠르게 시작하기 좋고, Cursor는 실제 코드 수준의 문제 해결에 강하다.
1.
GitHub Copilot, Windsurf, Zed에 대한 평가
GitHub Copilot은 Microsoft가 만든 도구이기 때문에 엔터프라이즈 환경에서 인기가 많다. 기업 입장에서는 신뢰할 수 있는 벤더라는 점이 장점이다.
Copilot은 여러 파일 수정, 코드 설명 등 다양한 기능을 지원한다. 다만 저자의 경험상, Copilot은 구체적인 지시가 있을 때 잘 작동한다. 반대로 맥락이 충분하지 않은 일반적인 지시에서는 Cursor보다 아쉬운 결과를 낸다고 한다.
예를 들어 새 기능을 만들어달라고 했을 때, Copilot은 이미 앱에 존재하는 컴포넌트를 다시 만드는 경우가 있었고, Cursor는 기존 파일을 직접 수정하는 방식으로 더 잘 대응했다.
Windsurf와 Zed도 간단히 언급된다. Windsurf는 큰 규모의 복잡한 코드베이스에서 여러 줄 변경을 제안하거나 파일 이동 같은 명령을 대신 수행하는 데 강점이 있다. Zed는 성능이 좋은 에디터이며, 프롬프트 라이브러리, 슬래시 명령어, AI 생성 코드 적용을 위한 단축키 같은 생산성 기능을 제공한다.
1.
PM의 대표적인 AI 프로토타이핑 사용 사례 두 가지
도구 소개를 마친 뒤, 글은 실제 프로토타입을 만드는 과정으로 넘어간다.
저자는 PM에게 가장 흔한 프로토타이핑 사용 사례를 두 가지로 정리한다.
첫 번째는 기존 디자인을 기능형 프로토타입으로 변환하는 것이다. 예를 들어 Figma 디자인을 작동하는 앱으로 바꾸는 경우다.
두 번째는 아이디어를 처음부터 프로토타입으로 만드는 것이다. 별도 디자인이 없더라도 기존 디자인 시스템이나 컴포넌트를 활용해 빠르게 프로토타입을 구성하는 방식이다.
1.
사례 1: Airbnb 홈 화면 디자인을 기능형 프로토타입으로 바꾸기
첫 번째 실습 사례는 Airbnb 홈 화면 디자인을 작동하는 프로토타입으로 바꾸는 것이다.
목표는 기존 Airbnb 홈 화면 디자인을 바탕으로, 새로운 기능인 가격 필터를 실험해보는 것이다. 사용자는 이 프로토타입을 통해 실제 사용 경험을 확인하고, 새로운 가격 필터 기능이 어떤 느낌일지 탐색할 수 있다.
저자는 이 작업에 Bolt를 선택했다. 이유는 Bolt가 기존 디자인을 바탕으로 프로토타입을 만드는 데 적합하고, 이 사례에서는 Replit처럼 백엔드 데이터베이스가 필요하지 않기 때문이다.
처음 프롬프트의 핵심은 매우 단순하다. 디자인 스크린샷을 첨부하고, 이 디자인과 최대한 동일하게 프로토타입을 만들어달라고 요청하는 것이다. 여기서 중요한 점은 반드시 디자인 스크린샷을 함께 제공해야 한다는 것이다.
1.
가격 필터 기능 추가
디자인을 기능형 프로토타입으로 바꾼 뒤, 저자는 새로운 가격 필터 기능을 추가한다.
이때 저자가 강조하는 프롬프트 팁은 변경사항을 매우 구체적으로 설명하라는 것이다. AI 도구는 후속 프롬프트에서 사용자가 정확히 무엇을 바꾸고 싶은지 구체적으로 말할수록 더 잘 반영한다.
가격 필터 추가 요청의 핵심은 다음과 같다.
가격 필터를 검색바 안의 인라인 컴포넌트로 넣는다.
기존 “게스트 추가” 영역 옆에 별도 섹션으로 위치시킨다.
입력을 선택하면 최소 가격과 최대 가격을 입력할 수 있는 팝업이 뜨게 한다.
팝업 배경은 흰색이어야 하며, 아래 요소들을 덮어야 한다.
이처럼 위치, 상호작용, 입력값, 팝업 배경, 레이어 처리까지 자세히 설명한다.
1.
가격 슬라이더 추가
가격 필터의 기본 구조를 만든 뒤, 저자는 기능을 한 단계 더 확장한다.
최소 가격을 조정할 수 있는 가격 슬라이더를 추가해달라고 요청한다. 슬라이더에는 파란색 선과 검은색 노드가 있고, 사용자가 노드를 움직이면 최소 가격 값이 바뀌어야 한다.
이 사례를 통해 저자는 AI 프로토타이핑이 한 번에 완벽한 결과를 만드는 방식이 아니라, 초기 화면 생성 → 기능 추가 → 인터랙션 개선 → 세부 UI 수정처럼 점진적으로 발전시키는 방식이라는 점을 보여준다.
결과적으로 10분 안에 기능형 가격 필터 프로토타입을 만들 수 있었다고 설명한다. 더 나아가 가격을 조정할 때 리스트가 실시간으로 업데이트되는 기능도 추가할 수 있다고 말한다.
1.
사례 2: 디자인 없이 CRM 프로토타입을 처음부터 만들기
두 번째 사례는 기존 디자인이 없는 상태에서 아이디어만으로 프로토타입을 만드는 것이다.
저자는 자신처럼 디자인 실력이 뛰어나지 않은 PM도, Tailwind나 Shadcn UI처럼 무료로 공개된 디자인 시스템과 컴포넌트를 활용하면 충분히 초기 프로토타입을 만들 수 있다고 설명한다.
예시로는 CRM을 만든다. 가정은 이렇다. CRM 안에서 이메일 아웃리치를 자동화하는 기능을 추가할지 검토하고 있고, 실제 개발 전에 고객에게 이 기능이 어떻게 보일지 보여주고 피드백을 받고 싶다.
먼저 Bolt에 종합적인 CRM 시스템을 만들어달라고 요청한다. 그러면 몇 분 안에 작동하는 CRM v1이 만들어진다.
저자는 여기서 잠깐 멈춰, 예전 같으면 엔지니어가 몇 주를 들여야 했을 CRM 프로토타입을 이제는 5분도 안 되어 만들 수 있다는 점을 강조한다.
1.
CRM에 AI 이메일 작성 기능 추가
CRM 기본 버전을 만든 뒤, 저자는 새로운 기능을 추가한다.
추가할 기능은 가상의 AI 이메일 작성기다. 이 기능은 CRM의 왼쪽 내비게이션에서 접근할 수 있어야 한다.
이 기능 역시 몇 분 만에 추가된다. 저자는 이 사례를 통해 PM이 아이디어를 얼마나 빠르게 실험할 수 있는지를 강조한다.
핵심은 실제 제품을 개발하기 전에, 고객에게 인터랙티브한 예시를 보여주며 직접 피드백을 받을 수 있다는 점이다. 이렇게 하면 discovery 과정이 빨라지고, 초기 버전을 만드는 데 불필요한 엔지니어링 시간을 쓰지 않아도 된다.
1.
같은 프롬프트라도 도구마다 결과가 달라진다
저자는 같은 CRM 예시와 같은 프롬프트를 v0에서도 실행해본다.
여기서 중요한 메시지는 AI 도구마다 기본 설정, 디자인 철학, 기술 스택, 생성 방식이 다르기 때문에 같은 프롬프트를 입력해도 결과물이 달라진다는 것이다.
따라서 PM은 단순히 “AI에게 만들어달라고 하면 된다”고 생각하기보다, 각 도구의 기본 성향을 이해하고 목적에 맞게 선택해야 한다.
예를 들어 보기 좋은 기본 디자인이 중요하면 v0, 빠른 기능 실험과 유연성이 중요하면 Bolt, 데이터 처리나 내부 툴이면 Replit, 실제 제품화 가능성과 외부 연동이면 Lovable이 더 적합하다.
1.
공통 사용 사례와 프롬프트 템플릿
글 후반부는 PM이 바로 사용할 수 있는 프롬프트 템플릿으로 이어진다.
첫 번째 작업은 기존 Figma 디자인을 바탕으로 프로토타입 만들기다.
핵심 프롬프트 구조는 다음과 같다.
디자인과 동일하게 프로토타입을 만들어달라고 요청한다.
Tailwind CSS를 사용하라고 지정한다.
스타일, 폰트, 간격, 색상을 최대한 맞추라고 요청한다.
Figma에서 가져온 단일 스크린샷을 함께 첨부한다.
추천 도구는 Bolt다.
예시로는 Deployment manager가 언급된다.
즉, 이 템플릿의 핵심은 “대충 비슷하게 만들어줘”가 아니라, 스크린샷을 기반으로 스타일·폰트·간격·색상까지 맞추도록 명확히 지시하는 것이다.