はじめに
Codexで開発をしていますが、画面の生成はあまり向いていない様子...
画面の生成は専用のAIに任せた方が良さそうです。
最近GoogleがStitchなるAIをリリースしたらしいので、VSCode上のCodexから使用して画面を生成させてみました。
実現したいワークフロー
- Codex に「設計書から画面作って」と指示
- Codex → MCP → Stitch にプロンプト送信
- Stitch が UI を生成
- Codex が生成物をプロジェクトへ反映
= 設計書 → UI生成 → コード反映 をVSCode内で完結
前提
・VSCode + Codex が利用可能
Stitch 側：MCPキー発行
参考ページ:https://stitch.withgoogle.com/docs/mcp/setup
- Stitch の設定を開く
-
APIキーにある、キーを作成を押下する - 生成されたキーを控えておく
VSCode：MCPサーバ設定
1. Codex設定画面を開く
サイドバーからCodexを開く
設定(右上の歯車アイコン)>MCP設定>MCP 設定を開く
Codex Settings画面が開きます
カスタムサーバー欄にある+サーバーを追加する
次の通りに入力します
名前 ・・・ なんでもOK
MCPの機能 ・・・ ストリーミング可能なHTTP
URL ・・・ https://stitch.googleapis.com/mcp
ヘッダー ・・・ X-Goog-Api-Key : 控えたキー
※他は未入力
保存する
Codex Settings画面に戻るので拡張を再起動するでCodexを再起動します。
接続確認
Codexで実行：
使えるツールを教えて
stitch が表示されれば成功です。
使えるツールは次のとおりです（このセッション内）:
...
Stitch系：functions.mcp__stitch__create_project / get_project / list_projects / list_screens / get_screen / generate_screen_from_text / edit_screens / generate_variants
...
#使ってみた
VSCode上からCodexに以下のようなプロンプトを投げることで、
設計書を指摘するだけで画面を無事生成することができました!
ユーザ登録画面(ID:S-02)について設計書に基づいた画面をstitchを使用してhtmlで生成して
また、仕様変更も設計書とデザインを両方同時に修正してもらえるので便利です!
まとめ
やったこと：
・StitchでAPIキー生成
・CodexのMCP設定
・CodexからStitch呼び出し成功
→ 設計書からUI生成する開発フローが完成