Prototyper
Prototyper (founded by Thijs Verreck) · コーディング
PrototyperはAIプロトタイピングツールだ。エージェントが動くReactアプリ、ワイヤーフレーム、スライドを共有キャンバスに作り、チームがそのまま編集できる。
Prototyper について
About
Prototyperとは
Prototyperはブラウザで動くデザインと開発のキャンバスだ。画面を言葉で説明するか、大まかな箱を描く。するとエージェントが本物のReactとTailwindのコードを書き、ワークスペース内でコンパイルして実行する。書き出しの工程はない。動いている画面がそのまま成果物になる。Reactでプロトタイプ作成をしたい場合も、ブラウザから出る必要はない。
エージェントはPrototyper内蔵のものに限らない。Claude Code、Codex、Cursor、その他のMCPクライアントが同じキャンバスにつながり、プロジェクトのファイルを読み、コードを書き、ターミナルから実際のpull requestを開く。支払うのはキャンバスと内蔵アシスタントの分で、すでに契約しているサブスクリプションを持ち込める。
制約は現実的だ。Webアプリなので重いローカルツールは外に置く。内蔵アシスタントには週あたりのメッセージ上限があり、それを超えると従量のAIクレジットになる。無料のワークスペースは2つまで。きれいなバージョン管理を求めるならブランチの理解は欠かせない。
はじめかた
- prototyper.coで登録し、最初のワークスペースを開く。無料プランはカード登録が要らない。
- キャンバスにブリーフを置くか、入力欄に画面を書く。たとえば「プランカードと請求書テーブルを置いた請求設定ページ」でいい。
- エージェントに作らせ、プレビューを操作する。フォームに実データを入れ、ウィンドウを広げ、状態をひと通り触る。
- さらに2案を頼み、並べて比べ、議論に勝ったものを残す。
- GitHubリポジトリをつなぐかMCPのインストール行を貼れば、Cursor、VS Code、ターミナルから続けられる。
AIツール情報
Prototyperの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- プロダクトデザイナー：流れを描けば、エージェントが動くReact画面に変え、その日の午後に実在のユーザーで試せる。ブラウザ上のコーディング環境に多少慣れている必要がある。
- フロントエンドエンジニア：キャンバスは双方向に書き戻す。図形を動かせばコードが変わり、コードを直せば図形が動く。捨てる予定のモックを後から作り直さずに済む。
- スタートアップの創業者：投資家向けのデモが、そのまま相手に渡せる製品になる。無料プランの2ワークスペースでアイデア1つと予備1つをまかなえる。
- 小さなチームのデザイン責任者：無料のビューア席があるので、顧客や関係者は有料ライセンスなしで動く版を触れる。
タスク
- 文章のブリーフをクリックできるアプリにする：AIプロトタイプ生成はキャンバス上のブリーフを読み、静止画ではなくコンパイルが通るアプリを返す。
- 手描きの下書きからワイヤーフレームを作る：ワイヤーフレーム生成が描いた箱を受け取り、配置済みの画面を返す。あとは要素を指して直すだけだ。
- ローンチ用のスライドを組む：スライドはアプリと同じ面で生まれるので、スクリーンショットと製品がずれない。
- 複数案を並べて試す：候補3つを横に並べ、チャットで言い合う代わりに議論に勝った案を残す。
シーン
- 1日で終える検証スプリント：朝に画面を書き、昼過ぎに5人で試し、生き残った版をそのまま出す。
- デザイン職でない人を交えたレビュー：全員が同じリンクを開いてプロトタイプを操作する。静的なモックより速くレイアウトの議論が片づく。
- エンジニアへの引き渡し：プロトタイプから本番までが1段階で済む。ユーザーテストを通ったコードがそのまま公開される。
主な機能
書き戻すキャンバス
キャンバス上のウィンドウはすべて実行中のアプリで、描画された画像ではない。図形を動かせば下のReactが書き換わり、エディタでコードを直せば画面の図形が動く。最初のスケッチから出す版まで、プロジェクト全体で生きた成果物を1つだけ持つ、というのが要点だ。
使い慣れたエージェントを持ち込む
PrototyperはClaude Code、Codex、Cursor、その他のMCPクライアントで動く。インストール行を1つ貼れば、すでに払っているエージェントがプロジェクトのファイルを読み、コンポーネントを書き、実際のpull requestを開く。結果は隣に現れる。契約も習慣もそのままだ。
1つの面で複数エージェントを動かす
同じキャンバスに3つのエージェントを同時に向けられる。1つがUI、1つがテスト、1つがコピーを担当し、3つが目の前で作業する。進捗会議は要らない。進捗が見えているからだ。
汎用出力ではなく設計ルール
内蔵エージェントは、AI生成インターフェースの癖に対抗するために作られた設計ルールに沿って書く。型付きでアクセシブルな50以上のプリミティブと自社のデザイントークンを合わせると、出力は既定値ではなく選ばれたものに見える。ブランドカラー、余白、コンポーネントは毎回の描画に乗る。
人とボットが同じ場所で作業する
チームメンバーはカーソル、エージェントはボットとして現れ、同じ部屋で同じファイルを触る。誰が何を変えたかが見え、空の状態に付箋を残せばエージェントに意図が正確に伝わる。バージョン履歴はプランに応じて7日から90日まで戻せる。
本物のプレビューと本物の書き出し
プレビューはワークスペース内でビルド工程なしにコンパイルされる。コードが届いた瞬間にプロトタイプは操作できる。有料プランなら、同じコードを自分のリポジトリへ書き出せる。ここのAIアプリ開発ツールは成果物を独自形式に閉じ込めない。
メリットとデメリット
メリット
- プロトタイプが動くので、ユーザーテストで想像ではなく実際の破綻が出る。
- すでに払っているClaude Code、Codex、Cursorの契約をそのまま使える。
- デザインとコードが同期し、本番前の作り直しがなくなる。
- 無料のビューア席のおかげで、小さなチームでも関係者レビューのコストが低い。
- バージョン履歴とファイル単位の巻き戻しがプランに応じて7日から90日まで効く。
デメリット
- 無料プランは週5メッセージ、MCP呼び出し100回までで、実案件ではすぐ尽きる。
- 内蔵AIは同梱分を使い切ると従量クレジットに移る。ヘビーに使うと表示価格からは読めない請求になる。
- ブラウザのワークスペースなので、オフライン作業もローカルのビルド環境もない。
- Reactを使わないチームには利点が薄い。生成されるのはReactとTailwindだ。
よくある質問
動くReactアプリ、ワイヤーフレーム、スライドを共有キャンバス上に作る。成果物はワークスペースでコンパイルされ実行されるので、スクリーンショットを見る代わりにクリックし、入力し、試せる。
関連コンテンツ
Prototyperに関連するツール、スキル、記事を探す。
Prototyperの代替ツール
Base Code
Base44 (Wix) · コーディング · 生産性向上Base CodeはBase44の共有クラウド開発環境だ。既存のGitHubリポジトリに対する変更をチャットで伝え、プレビューで確認し、プルリクエストとして返せる。
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
GitGlow
GitGlow · コーディング · 生産性向上GitGlow は自分のコードと AI エージェントの変更を一つのレビューにまとめるデスクトップ Git クライアントだ。出荷前に、マシンから何が出ていくのかを確かめられる。