コンテンツにスキップ

Stripe「Harbor」— 社員の25%が使う、ブラウザ内で動く AI プロトタイピングツール

作成日: 2026-09-27 出典: Stripe Dot Dev Blog「Harbor: Stripe's AI-assisted prototyping tool」 関連: メルカリ_arca_ai時代の高速プロトタイピング基盤_整理 / stripe_toolshed_minions_社内mcpとコーディングエージェント_整理 / 社内saasデータ統合基盤_ai活用_事例比較_整理

0. 要点（3行）

  • 一言で: メルカリ Arca と同じ「非エンジニアが AI で作ったものをどこで動かし、どう共有するか」への Stripe の答え。ただしサーバーを持たず、閲覧者のブラウザでその都度コンパイルする方式を選んだ。
  • 2026年5月以降、3,000人超が12,000のプロトタイプを作成、社員の25%が少なくとも1つ作成。使い手はデザイナーだけでなく、財務（スライドの代わり）、リスク運用、営業（価格提案・ROI 計算機）まで広がった。
  • 共有は「公開 URL＋コメント＋リミックス」。エージェントが書き直してもコメントが迷子にならない仕組みに力を入れている。社内データへの接続（プロトタイプ単位の DB、ライブデータのウィジェット）はまだ今後の計画。

1. 背景

stripe.com を変えるとき、デザイン案が実現できるかを確かめるために、毎回エンジニアが本格的なプロトタイプを作るのは割に合わない。デザイナーがコードを理解しなくても、静的なデザインを動くものに変えられる道具が必要だった。

2. 仕組み — サーバーではなくブラウザでコンパイル

flowchart LR
    Author[作成者] -->|指示| Agent[エージェント]
    Agent -->|React + TypeScript<br>複数ファイルのツリー| Drydock[Drydock<br>レンダリングエンジン]
    Drydock -->|解決・コンパイル・マウント| Page[ブラウザ内で<br>動くページ]
    Drydock -->|コンパイル・実行時エラーの<br>レポート| Agent
    Agent -->|読む・要素検査・クリック・<br>入力・スクロール・スクショ| Page
    DS[Stripe デザインシステム<br>＋モックデータ] --> Agent
  • エージェントは React / TypeScript の複数ファイルのソースツリーを書く
  • レンダリングエンジン Drydock がそれを解決・コンパイルし、ブラウザでマウントして、コンパイルエラー・実行時エラーを含むレポートを返す
  • エージェントは描画されたページを読み、要素を検査し、クリック・入力・スクロール・ビューポート切り替え（モバイル / タブレット / デスクトップ幅）・スクリーンショットができる。自分で画面を見て直すループ
  • 作成者がデザインシステムを選ぶと、パッケージと開始ファイルが設定され、Stripe のデザインシステムとリアルなモックデータが使える
  • 使っているモデル・エージェントの名前は記事に記載なし

3. 共有・コメント・リミックス

sequenceDiagram
    participant Au as 作成者
    participant Hb as Harbor
    participant Vw as 閲覧者のブラウザ
    participant Ag as エージェント
    Au->>Hb: プロトタイプを公開（公開版は常に1つ）
    Vw->>Hb: URL を開く
    Hb->>Vw: ソースツリー
    Vw->>Vw: 自分のブラウザで一からコンパイル
    Vw->>Hb: 画面の要素にコメント
    Au->>Ag: 修正を指示
    Ag->>Hb: 書き直し・新しいスナップショットを公開
    Hb->>Hb: 既存コメントを再解決<br>付いたまま / 要確認 / 孤立 に分類
    Vw->>Hb: リミックスして自分のコピーを作る
  • 公開版は一度に1つ。閲覧者ごとにブラウザがそのコピーをコンパイルする
  • コメントの付け先を壊さない工夫: エージェントが画面を書き直してもコメントが正しい場所に残るよう、意味的なラベル・安定した識別子・テキストの証拠・構造上のパス・リストのキー・周囲の文脈（ダイアログ、アコーディオン）・一意性を記録する。再解決して「付いたまま / 要確認 / 孤立」に分類し、勝手に移動はしない
  • 公開コメントはそのバージョンに紐づき、新しいスナップショットが出ると古いコメントは「古い」と表示される
  • 他の人が公開プロトタイプをリミックスして自分のコピーにできる

4. 誰がどう使っているか

職種 使い方
デザイナー 新しい製品ページ（アニメーション付きのヒーロー）を作り、エンジニア・PdM・リーダーとその場で触りながら議論
財務 月次実績や事業レビューを、スライドの代わりにクリックできるプロトタイプで提示
リスク運用アナリスト 処理時間の分析をダッシュボードにしてチームで検証
営業（アカウントエグゼクティブ） 特定の顧客向けの価格提案、バトルカード、ROI 計算機

数値: 2026年5月以降、3,000人超が12,000のプロトタイプを作成。社員の25%が少なくとも1つ作成。

5. 他ツールとの統合

  • Harbor のツール群を MCP サーバーで公開。他のエージェントが、文脈を手でコピーせずにプロトタイプを作成・読み取り・更新・公開できる。devbox 上のコーディングエージェント（stripe_toolshed_minions_社内mcpとコーディングエージェント_整理）からも使える
  • レンダリングエンジン Drydock を独立したサービスにし、「React / TypeScript の複数ファイルツリーを入れると、ブラウザで動くページとレポートが返る」という契約で、Kai（社内の知識作業向け AI プラットフォーム）など他のツールからも使える

6. データアクセスの観点で読む

観点 現状 今後の計画
データ デザインシステム＋モックデータ プロトタイプ単位の小さな状態保持、ライブデータ接続
社内データの取り込み 記事に記載なし（数値は手でコピーしている前提の書きぶり） 社内データへのクエリを埋め込んだ自動更新ウィジェットで、手で数字を写す作業を無くす
セキュリティ 記事に記載なし —

Arca との違い: Arca は最初から「永続ディスク付きの VPS」で、DB も Redis も中で動かせ、GCP の権限もマシンごとに渡せる。代わりに出口プロキシ・キーの後付けなど重い安全装置が要る。Harbor はサーバーを持たないので守る面が小さいが、そのぶん本物のデータにつなぐのはこれから。「まず安全に広く配る → データ接続は後から足す」という順番の選択に見える（自分の解釈）。

7. まとめ

一言で: 「サーバーを持たないプロトタイプ基盤で、まず全社の4分の1に配った」。

比較軸 Stripe Harbor メルカリ Arca
実行場所 閲覧者のブラウザ GKE 上の gVisor Pod（永続ディスク付き）
できること フロントエンドのプロトタイプ バックエンド・DB・常駐サービスまで
データ デザインシステム＋モック（ライブデータは今後） GCP サービスアカウント・社内ツール連携済み
安全の取り方 サーバーが無いので守る面が小さい 出口プロキシ・キー後付け・Webhook 代理応答
規模 3,000人超・12,000件・社員の25% 作成者346名・マシン631台

参考リンク

  • Stripe「Harbor: Stripe's AI-assisted prototyping tool」: https://stripe.dev/blog/harbor-stripes-ai-assisted-prototyping-tool

作成: 2026-09-27 ／ 最終更新: 2026-09-27