この記事について
実案件で検証した体験をベースに、AIに全体の構成をアシストしてまとめています！内容は100%リアルな現場の生の声です。
はじめに
こんにちは！
今回は、「画面のデザインシステムがない ＆ デザイナーさんがいない」というプロジェクトを、最新のAIツール群（Stitch MCP + 各種Skills）を使ってリッチに乗り切った体験談をシェアします。
従来のプロンプトだけだと「どうしてもリッチなUIにならない……」という悩みがありましたが、今回の構成でかなり実用的なフロントエンド開発ができました。
後々VS Code環境で自分が見返すためのセットアップ方針や、開発をスムーズに進めるための具体的な「やり方」の備忘録として残しておきます。
こんな人におすすめ
・新規プロダクトのプロトタイプを爆速で作る必要がある
・デザイナーがいないプロジェクトで、UIをいい感じに整えたい
・AIを使ったReactへのコード変換・品質担保を効率化したい
1. 各ツールの正確な役割分担
後で見返したときに混乱しないよう、今回使ったツールとSkillsの役割を整理しておきます。
-
Google Stitch (本体): Webブラウザ上でAIと壁打ちし、プレビューしながらUIを生成するデザインプラットフォーム。
-
Stitch MCP: VS Code等のAIエージェント拡張機能（Roo Code、Cline、Cursorなど）から、Stitch上のデザイン資産（HTML、Design.mdなど）を直接操作するためのブリッジ。
-
stitch-skills (Stitchのスキル): Stitch向けのデザインシステム（Design.md）の自動生成や、HTMLへのReact変換を担当。
-
Vercel agent-skills (Reactのスキル): Reactコードのベストプラクティス確認、コンポーネントの修正、アニメーション付与などを担当。
使用したツールのURL：
- Stitch MCP: setup docs
- Vercel agent-skills (React): GitHub
- stitch-skills: GitHub
2. UIを作る具体的な「やり方」とフロー
基本的には以下のようなステップで、VS Codeとブラウザを行き来しながらAIとキャッチボールして進めました。
Step 1: 事前に「仕様Markdown」を準備する
いきなりAIに画面を作らせるのではなく、まずは自分で仕様のベース（要件定義レベル）をMarkdownファイル（例: requirements.md）としてプロジェクト配下に置いておきます。
これがあるだけで、AIが作成する画面の完成度が違います。
Step 2: Design.md の壁打ち作成
Stitch公式のSkillsを活用し、AIと壁打ちしながらデザインシステムとなる Design.md を吐き出させます。
プロンプトでは、「デザイナーがいないので、色・タイポグラフィ・コンポーネントのルールをモダンなWebアプリ向けに定義して」と指示するのがコツです。
Step 3: StitchでのUI生成（HTML出力）
作成した Design.md と requirements.md をAIに読み込ませた状態で、Stitch上にHTMLを生成させます。
1日400トークン使えるので、ここで「もっとカードの余白を詰めて」「ダッシュボードのグラフ配置のバランスを変えて」など、納得いくまでガンガン修正を繰り返します。
Step 4: React化 ＆ 各種Skillsによるブラッシュアップ
ここからが各種Skillsの本領発揮です。
Reactへ変換：Stitch公式のSkillsに「このHTMLをReactコンポーネントにして」と投げて一発変換。
コードの最適化：React側のSkillsが動いて、自動でベストプラクティスを確認し、コードを綺麗に修正してくれます。
アニメーション追加：画面遷移に react-view-transitions を組み込むようReactのSkillsに指示。これで一気にモダンでヌルヌル動くUIになります。
デザインレビュー：ウェブデザインガイドラインのSkillsを走らせ、「UIに違和感がないかレビューして」と頼むことで、デザイナー不在の弱点をカバーします。
- 実践してわかった「良かったこと」
-
Stitch本体＆公式Skillsの恩恵
1日400トークン使える安心感：制限をほぼ気にせず、納得いくまでUIをブラッシュアップできるのが最高でした。 -
Design.md によるデザインのブレ防止
色やコンポーネントのルールをAIが自ら守ってくれるため、AIデザイン特有の「なんか安っぽい…」「統一感がない…」という現象が起きなくなります。 -
Stitch公式のSkillsでReactへの変換がめちゃくちゃ楽
Stitchが出力したHTMLをそのままReactに変換できる公式のSkillsが用意されているので、移行コストがほぼゼロでした。
ReactのSkills（agent-skills）の強力さ
-
アニメーションスキル（react-view-transitions）が優秀すぎる
これを使うだけで、プロトタイプとは思えないレベルのリッチな動きが簡単に実装できます。 -
ベストプラクティスを確認してコード修正してくれる
ただコードを吐き出すだけでなく、Reactとしてのベストプラクティスをチェックして、自動でコードを綺麗にリファクタリングしてくれます。 -
ウェブデザインガイドラインSkillsによる自律修正
ガイドラインに沿ってUIのダメ出しや改善点をAIが自分で見つけて勝手に直してくれるのは本当に心強かったです。
4. 苦労したポイントと、次への対策
後々見返すための、直面した課題とそれに対するTipsです。
課題1: Design.md が途中で肥大化しすぎてデザインがブレる
色々と指示を詰め込みすぎちゃって、AIがデザインシステムを無視し始めたり、他画面との統一感が崩れる瞬間がありました。
他画面との統一感が崩れるのはベータ版だからなのかstitch上で作成した時もヘッダーやメニューなどは崩れることがただありました。
【対策Tips：別ファイルの仕様MDを読み込ませる】
すべてを Design.md に直接書き込むのではなく、別ファイル（仕様や画面設計をまとめたMD）を外部管理にして、Design.md 内には以下のように「外部ファイルを動的に参照してデザインを適用させる指示」を書くアプローチを取れば良かったです。
<!-- Design.md 内の記述イメージ -->
## 適用ルール
- 画面の構成やコンポーネントのレイアウトは、同ディレクトリ内にある `docs/screens/*.md` の仕様に従うこと。
- 基本的なカラー・コンポーネントスタイルのみ本ファイル（Design.md）の定義を厳守すること。
課題2: MCPで画面修正するとStitch上がゴチャつく
既存ファイルの上書き更新じゃなくて、修正を加えるたびに新しく画面がどんどん増えちゃう（旧デザインが残る）挙動のようでした。
【対策】
現状はベータ版ゆえの仕様だと思われるので、増えすぎた旧デザインは手動でStitch上から削除・編集して綺麗にする運用でカバーします。将来的にはMCP上で削除・上書きまで完結してくれることを期待。
まとめ
全体的に使ってみて、「普通にかなり良かった」です！
Stitchの使用にはまだ少しベータ版らしいクセはありますが、プロトタイプの作成スピードは圧倒的。さらに各種Skillsを組み合わせることで、React変換＋ベストプラクティスやアニメーションまで勝手に担保してくれるのは本当に実用的でした。
デザイナーがいないプロジェクトや、モックをサクッと作りたいフロントエンドエンジニアにとってはかなり強力な武器になると思います。気になる方はぜひ設定して触ってみてください！