普段はサーバーサイド開発がメインの僕ですが、社内システムを整備するにあたり、フロントエンドにも手を出さなければならなくなりました。
フロントエンドの難しいところは、「何が良い画面で、何が悪い画面なのか」という判断基準が自分の中になかなか育たないことです。
コードは書けても、デザインとUXの観点が乏しいとなかなか自信を持った実装ができません。
そこで見つけたのが、Googleが提供する Stitch というUIデザインツールです。
使ってみたところ「これはバックエンドエンジニアの救世主では？」となったので、使い方と MCP 連携までの流れをまとめます。
Stitch とは
Stitch は Google が提供する、AIを活用したUIデザインツールです。
作りたい画面のイメージをチャットで伝えるだけで、Material Design に準拠したUIコンポーネントを使った画面サンプルを自動生成してくれます。
生成した画面は React や Vue 向けのコードとしてエクスポートでき、MCP サーバーとしてエディターから呼び出すことも可能です。
主な特徴をまとめると以下のとおりです。
- チャットで画面イメージを伝えるだけで自動生成
- Material Design ベースのコンポーネントを使用
- React / Vue 向けのコードをエクスポート可能
- MCP サーバーとしてエディターのAIと連携できる
2025年時点では Stitch はプレビュー版です。一部機能に制限がある場合があります。
Step 1: Stitch でざっくり画面サンプルを作る
まず Stitch のサイト にアクセスし、チャット画面から作りたいUIのイメージを伝えます。
「なんとなくこういう感じ」でも十分生成してくれますが、以下の3点を盛り込むとより精度が上がりました。
| 項目 | 具体例 |
|---|---|
| 目的・利用者 | 社内の営業チームが使う顧客管理一覧 |
| 必要な機能 | 検索・絞り込み、テーブル表示、詳細ページへの遷移 |
| デザインイメージ | シンプルで落ち着いたトーン、プライマリーカラーはブルー |
入力すると Stitch がリアルタイムで画面サンプルを生成します。
プレビューを見ながら気に入らない部分はチャットで追加フィードバックするだけで修正できるので、デザインツールの操作スキルは不要です。
Step 2: エディターに MCP サーバーを追加する
ざっくりした画面イメージができたら、普段使いのエディター（VS Code など）に Stitch の MCP サーバーを追加します。設定ファイルは .vscode/mcp.json です。
{
"servers": {
"stitch": {
"url": "https://stitch.googleapis.com/mcp",
"type": "http",
"headers": {
"Accept": "application/json",
"X-Goog-Api-Key": "YOUR_API_KEY",
},
},
}
}
パッケージ名は変更される可能性があります。最新の設定方法は Stitch の公式MCPドキュメント を参照してください。
Step 3: エディターのAI経由で画面を生成する
MCP の設定が完了したら、エディターのAI（GitHub Copilot など）に対して以下の情報を伝えます。
- 使用する API のエンドポイントや型定義
- 画面に必要なコンポーネントの要件
- デザインの方向性
AIがこれらの情報をまとめて Stitch の MCP サーバーへ送り、Stitch 側で画面コードを生成してくれます。
毎回 Stitch のチャット画面に API 仕様を貼り直す手間がなくなるのが大きなメリットです。
Step 4: コードをエクスポートしてエディターに取り込む
Stitch の web 画面上で生成結果をプレビューし、問題なければ Export → MCP をクリックします。するとプロンプトが画面に表示されるので、それをコピーしてエディターに貼り付けるだけです。
あとはエディターのAIがそのプロンプトを元にコードをプロジェクトに組み込んでくれます。
この流れをまとめると以下のようになります。
Stitch + MCP のメリットまとめ
エディターのAIだけで完結させようとすると、生成されたUIが実際どう見えるか確認できず、何度も微調整するやり取りが発生しがちです。
Stitch を挟むことでブラウザ上でリアルタイムに見た目を確認してから実装に入れるため、無駄なやり取りを大幅に削減できます。
| 方法 | 画面確認 | コンテキスト共有 | コード生成 |
|---|---|---|---|
| エディターAI のみ | △ テキスト説明のみ | ○ | ○ |
| Stitch のみ | ○ | △ 手動で都度入力 | ○ |
| Stitch + MCP | ○ | ○ | ○ |
まとめ
Stitch を MCP と組み合わせることで、フロントエンドが本業でないバックエンドエンジニアでも、短時間でそれなりに整ったUIをプロトタイピングできるようになりました。
特に以下のような方には強くおすすめです。
- バックエンドメインでフロントに苦手意識がある
- デザインツール（Figma など）を使いこなす時間がない
- 社内ツールをサクッと作りたい
AIとのやり取りだけでは「なんか違う」となりがちなUI設計も、Stitch で目で確認しながら進められるのは大きな安心感があります。
ぜひ試してみてください！
参考