Prototyper
Prototyper (founded by Thijs Verreck) · 코딩
Prototyper는 AI 프로토타이핑 도구다. 에이전트가 실행되는 React 앱과 와이어프레임, 슬라이드를 공유 캔버스에 만들고 팀이 그대로 고친다.
Prototyper 소개
About
Prototyper란
Prototyper는 브라우저에서 도는 디자인과 개발용 캔버스다. 화면을 말로 설명하거나 대략적인 박스를 그리면, 에이전트가 실제 React와 Tailwind 코드를 써서 워크스페이스 안에서 컴파일하고 실행한다. 따로 내보내는 단계가 없다. 돌아가는 화면 자체가 결과물이기 때문이다. React 프로토타입 제작을 브라우저 안에서 끝낼 수 있다는 점이 이 도구의 기본값이다.
에이전트는 Prototyper에 내장된 것만 쓸 필요가 없다. Claude Code, Codex, Cursor, 그 밖의 MCP 클라이언트가 같은 캔버스에 붙어 프로젝트 파일을 읽고 코드를 쓰며 터미널에서 실제 pull request를 연다. 비용은 캔버스와 내장 어시스턴트에 내고, 이미 쓰는 구독은 그대로 가져오면 된다.
한계는 현실적이다. 웹 앱이라 무거운 로컬 도구는 밖에 둔다. 내장 어시스턴트는 주간 메시지 한도가 있고 그 뒤로는 사용량 기반 AI 크레딧으로 넘어간다. 무료 워크스페이스는 두 개까지다. 깔끔한 버전 관리를 원하면 브랜치를 이해해야 한다.
시작하는 방법
- prototyper.co에서 가입하고 첫 워크스페이스를 연다. 무료 플랜은 카드 등록이 필요 없다.
- 캔버스에 브리프를 올리거나 입력창에 화면을 적는다. 예를 들어 플랜 카드와 청구서 표가 있는 결제 설정 페이지 같은 식이다.
- 에이전트가 짓게 두고 미리보기를 조작한다. 폼에 실제 데이터를 넣고 창 크기를 바꾸고 상태를 하나씩 눌러 본다.
- 두 가지 시안을 더 요청해 나란히 비교하고, 논의에서 살아남은 것을 남긴다.
- GitHub 저장소를 연결하거나 MCP 설치 줄을 붙여 넣으면 Cursor, VS Code, 터미널에서 이어서 작업할 수 있다.
제품 정보
Prototyper의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 프로덕트 디자이너
- 프런트엔드 개발자
- 스타트업 창업자
- 작은 팀의 디자인 리드
작업
- 글로 된 브리프를 클릭 가능한 앱으로
- 손그림 스케치에서 와이어프레임 만들기
- 런칭 슬라이드 구성
- 여러 시안 나란히 시험
활용 상황
- 하루짜리 검증 스프린트
- 디자이너가 아닌 사람과의 리뷰
- 엔지니어링으로 넘기기
주요 기능
다시 쓰는 캔버스
캔버스의 모든 창은 렌더링된 그림이 아니라 실행 중인 앱이다. 도형을 옮기면 밑의 React가 다시 써지고, 에디터에서 코드를 고치면 화면의 도형이 따라 움직인다. 첫 스케치부터 내보내는 버전까지 프로젝트 전체에 살아 있는 결과물 하나만 둔다는 것이 핵심이다.
쓰던 에이전트 그대로
Prototyper는 Claude Code, Codex, Cursor와 다른 MCP 클라이언트와 함께 작동한다. 설치 줄 하나를 붙이면 이미 돈을 내고 쓰는 에이전트가 프로젝트 파일을 읽고 컴포넌트를 쓰고 실제 pull request를 연다. 결과는 옆에 나타난다. 구독도 습관도 그대로다.
한 화면에서 여러 에이전트 지휘
같은 캔버스에 에이전트 세 개를 동시에 붙일 수 있다. 하나는 인터페이스, 하나는 테스트, 하나는 문구를 맡고 셋이 눈앞에서 일한다. 진행 회의는 필요 없다. 진행 상황이 보이니까.
범용 출력 대신 디자인 규칙
내장 에이전트는 AI가 만든 인터페이스의 상투적인 흔적을 겨냥해 만든 디자인 규칙에 따라 쓴다. 타입이 잡히고 접근성이 확보된 50여 개 프리미티브와 자체 디자인 토큰을 더하면 결과가 기본값이 아니라 골라진 것처럼 보인다. 브랜드 색과 간격, 컴포넌트가 매 렌더링에 실린다.
사람 커서와 봇이 함께 있는 멀티플레이
팀원은 커서로, 에이전트는 봇으로 나타나 같은 방에서 같은 파일을 만진다. 누가 무엇을 바꿨는지 보이고, 빈 상태에 메모를 붙이면 에이전트가 의도를 정확히 알아듣는다. 버전 기록은 플랜에 따라 7일에서 90일까지 되돌린다.
진짜 미리보기와 진짜 내보내기
미리보기는 워크스페이스 안에서 빌드 단계 없이 컴파일된다. 코드가 도착하는 순간 프로토타입은 조작 가능하다. 유료 플랜에서는 같은 코드를 자기 저장소로 내보낸다. 여기 AI 앱 빌더는 결과물을 독자 형식에 가두지 않는다.
장단점
장점
- 프로토타입이 돌아가므로 사용자 테스트에서 상상이 아닌 실제 문제가 나온다.
- 이미 내고 있는 Claude Code, Codex, Cursor 구독을 그대로 쓴다.
- 디자인과 코드가 동기화돼 배포 전 재작업 단계가 사라진다.
- 무료 뷰어 좌석 덕에 작은 팀도 이해관계자 리뷰 비용이 낮다.
- 버전 기록과 파일 단위 되돌리기가 플랜에 따라 7일에서 90일까지 적용된다.
단점
- 무료 플랜은 주당 AI 메시지 5개와 MCP 호출 100회라 실제 프로젝트에서는 금방 바닥난다.
- 내장 AI는 포함분을 쓰면 사용량 기반 크레딧으로 넘어간다. 많이 쓰면 표시 가격으로는 예측할 수 없는 청구서가 나온다.
- 브라우저 워크스페이스라 오프라인 작업도 로컬 빌드 환경도 없다.
- React를 쓰지 않는 팀은 얻는 게 적다. 생성되는 코드가 React와 Tailwind이기 때문이다.
자주 묻는 질문
돌아가는 React 앱과 와이어프레임, 슬라이드를 공유 캔버스에 만든다. 결과물은 워크스페이스에서 컴파일되고 실행되므로 스크린샷을 보는 대신 클릭하고 입력하고 시험할 수 있다.
관련 콘텐츠
Prototyper와 관련된 도구, 스킬, 아티클을 살펴보세요.
Prototyper 대안
Udon
Udon · 코딩 · 생산성Udon은 Apple Silicon Mac을 Mac 홈서버로 바꾸는 소프트웨어다. 브라우저에서 컨테이너와 파일 공유를 관리하고, 원하면 AI 시스템 관리자까지 붙일 수 있다.
offstage
offstage cloud · 코딩 · 생산성offstage는 AI 에이전트와 CI 작업에 진짜 Mac을 넘긴다. Apple Silicon 위의 새 macOS 27 계정을 API로 다루고 초 단위로 과금한다.
BotBus
Chengdu Tuyang Tusen Technology Co., Ltd. · 코딩 · 생산성BotBus는 AI 코딩 에이전트 원격 제어 앱이다. 스마트폰과 워치에서 명령을 승인하고, 작업을 시작하고, 결과를 확인한다.