# なぜ Reddit は独自のAIプロトタイピングツールを作ったのか | Blair Metcalf

- 番組: [How I AI](https://ai-curator.jp/podcasts/shows/cmv40atz1000f5j0zm69lxx8n)（Claire Vo）
- 元のタイトル: Why Reddit built its own AI prototyping tool | Blair Metcalf
- 配信日: 2026年10月26日
- 長さ: 29分
- 要約作成日: 2026年10月26日
- トピック: [#プロトタイピング](https://ai-curator.jp/topics/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0) [#デザインシステム](https://ai-curator.jp/topics/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0) [#MCP](https://ai-curator.jp/topics/MCP) [#Cursor](https://ai-curator.jp/topics/Cursor) [#vibe coding](https://ai-curator.jp/topics/vibe%20coding) [#Figma](https://ai-curator.jp/topics/Figma)
- URL: https://ai-curator.jp/podcasts/cmvp5uwjm0000421120wztu4x

## 要約

Reddit のプリンシパル UX エンジニア Blair Metcalf が、社内向けの vibe coding 環境「Reddit Proto」を Claire Vo に紹介した回。デザインシステムに沿ったガードレール、本番の実データを使うプロトタイプ、Cursor への注釈連携、Figma から PRD を生成する「feature capsule」などを披露している。UX・プロダクト部門では採用率100%、700以上のプロトタイプが稼働しているという。

## ポイント

- Reddit Proto はデザインシステムのコンポーネントと UX パターンを組み込み、デザイナーや PM が Git を意識せず、ガードレールの中で vibe coding できるようにした社内ツールである。
- ログインして本番のパーソナライズデータを表示できるため、モックデータでは伝わらない「自分に関係のある」体験を経営層にレビューしてもらえると Blair は述べている。
- 画面上の注釈を Cursor に送ると、コード上の位置・コンポーネント・依頼内容が渡され、的を絞った編集ができる。
- Figma のリンクから Figma MCP とカスタム MCP を通して PRD を生成する「feature capsule」が、エンジニアへの引き継ぎ資料になる。
- MCP はデザイントークンと本番コードの対応表を作り、PR や CI、エンジニアのフィードバックで磨いたものだ。理解を確かめるため可視化した「Rosetta stone」も作った。
- 意外にもビジュアルデザイナーやアニメーターが優れたプロトタイパーだったという。AI が迷走したときは、あえて曖昧に全体像を語る「監督」になるのが Blair の対処法である。

## 章立て

- [02:12] **Reddit Proto の狙いと概要** — デザインと製品の距離を縮めるため、デザインシステムに沿ったガードレール付きの独自ハーネスを作った経緯が語られる。
- [03:19] **スキャフォールドと設定機能のデモ** — Git を隠すデスクトップアプリ、ナビゲーション制御、デバイスやテーマ、モデレーター等のペルソナ切替、サインイン済みデータの利用を紹介する。
- [07:32] **実データの価値と注釈から Cursor へ** — 本番データによる検索機能の試作と、注釈を Cursor に送って的確に編集するワークフローを実演する。
- [09:32] **社内デプロイと共有・採用状況** — Kubernetes 上の社内デプロイ、PWA での実機確認、約700件のプロトタイプ一覧、採用率100%と意外な活用者について述べる。
- [13:34] **レビューとフィードバック** — 経営層レビューでの活用と、ライブコメント機能の構想、即時の合意形成という効果が語られる。
- [15:40] **feature capsule とエンジニアへの引き継ぎ** — Figma から PRD を生成し、Cursor で本番形のコードと下書き PR を作る流れを説明する。
- [17:47] **カスタム MCP と Rosetta stone** — トークンと本番コードの対応づけ、フィードバックでの改善、デザインシステムの可視化の意図を紹介する。
- [25:05] **ライトニングラウンド** — チームのトレーディングカード制作と、AI が言うことを聞かないときに曖昧に指示する対処法を語る。

## 解説記事

Reddit のプリンシパル UX エンジニア Blair Metcalf が、ポッドキャスト How I AI のホスト Claire Vo に、社内製のプロトタイピング環境「Reddit Proto」を披露した回である。デザイナーや PM が本番に近いプロトタイプを安全に作り、社内で共有する仕組みを、デモを交えて紹介している。

#### なぜ独自のハーネスを作ったのか

Blair は、デザインとプロダクトの間の距離は広いと述べる。全員がビルダーになれば新機能を vibe coding（AI にコードを書かせながら試作する手法）で素早く作れる。そこで Reddit のデザインシステムのコンポーネントや UX パターンを組み込み、デザイナーや PM がレールから外れないようにしたハーネスを作ったという。大量のアイデアを作ってレビューし、選んだ一つに時間をかけて本番へ進める流れを想定している。

デスクトップアプリから新規プロジェクトを始めると、Git のクローンやブランチを意識せずに土台のアプリが立ち上がる。ナビゲーションの無効化、デバイスやテーマの切り替え、モデレーターなどの状態の再現も設定できる。ステークホルダーがクリックしすぎないよう制御できる、という例も挙がった。

#### 本番の実データを使う意味

特徴的なのは、ログインして本番のパーソナライズデータをプロトタイプに表示できる点だ。Claire は、モックデータや JSON を使う手法は聞いたことがあるが、本番データを認証して表示するのは初めて聞いたと反応している。Blair によれば、Figma のモックを経営層に見せても自分に関係のあるものに見えない。実データなら、たとえば検索機能を試作して実際の候補を LLM で並べ替え、デザインを試せる。本番投入までに9か月かけずに検証できると述べている。

#### 注釈から Cursor への編集ワークフロー

画面上の要素に注釈を書いて Cursor に送ると、コード上の位置、コンポーネント、依頼内容がファイルとして渡される。Cursor に「注釈を適用して」と指示すれば、狙った部分だけが編集される。Blair は検索機能の追加をその場で試し、動いたことに驚いたと語った。デザインシステムのトークンやコンポーネントが使われ、成果物は社内インフラ（Kubernetes 上で動く、社内版 Vercel のようなもの）にデプロイされる。URL を Slack で共有でき、PWA としてスマホで確認することもできる。

社内にはプロトタイプの一覧ダッシュボードがあり、約700件が登録されている。規模が増えたため、検索やタグ、チーム別の絞り込みができるコンソールを開発中だという。社内ではすべて公開で、ライブコメントなどのレビュー機能も構想中とのことだ。UX・プロダクト部門の採用率は100%で、150人以上が使っている。意外にも、ビジュアルデザイナーやアニメーターが優れたプロトタイパーだった。Blair は、文脈が豊富で状況を描写でき、失敗を恐れず試す「良い監督」だからだろうと見ている。効果としては、本番と同じデザインシステムと実データでレビューするため、細部の揚げ足取りが減り、経営層との「即時の合意形成」が進むと述べている。

#### feature capsule と MCP

エンジニアへの引き継ぎには「feature capsule」を使う。Figma のフレームの場所をコピーし、Figma MCP 経由で作成すると、デザインシステムを本番にマッピングした情報を使って PRD が生成される。PRD にはユーザー目標や受け入れ基準、Figma へのリンクが含まれる。これを Cursor に渡すと、本番形のコードを兄弟リポジトリに書き、下書き PR まで出す。Blair は、PRD がスコープやワークフローを明確にするため、エンジニアへの引き継ぎとして多くの重みを持つと述べた。

この MCP は、デザイン言語 RPL（Reddit Product Language）のトークン、コンポーネント、画面、ジャーニーを、Figma、iOS、本番 GitHub、プロトタイプ用 GitHub に対応づけたものだ。Code Connect も使っている。PR を出して CI レビューを通るか試し、エンジニアの指摘をフィードバックして MCP を磨いている。Blair は、LLM が幻覚を起こすのは目標や文脈、最終形が示されていないからだという立場だ。さらに、MCP が全部品を把握しているか確かめるため、デザインシステムを可視化した「Rosetta stone」を作ったと説明した。

#### AI が迷走したときの対処

ライトニングラウンドでは、チームのトレーディングカードを生成した例が紹介された。ChatGPT でイラストを作り、Cursor とマークダウンのプロンプトで画風を統一したという。AI が言うことを聞かないときは、怒らずに一日置き、プロジェクトの外で映画監督のように全体像と意図を曖昧に語ってから戻る。Claire は「プロンプトは控えめに」という考えに通じると評した。

#### まとめ

本回の要点は、プロトタイピングツールを自社の文脈に合わせて作り込む価値にある。デザインシステムと本番コードを MCP で結ぶことで、AI が本番に近いコードを書く土台ができるという。日本の開発組織でも、デザインシステムの整備、実データを使ったレビュー、PRD を介した引き継ぎは参考になる。特に、トークンの対応表を作り、CI とエンジニアのフィードバックで改善していく進め方は、AI 活用の信頼性を高める実践例として注目できる。

> この要約・解説記事は、元の音声の文字起こしをもとに AI（Claude）が日本語で作成したものです。出典: How I AI「Why Reddit built its own AI prototyping tool | Blair Metcalf」