非デザイナーでもできる。Google Stitchがだいたい理解できるハンズオンマニュアル
著者: すぅ AI駆動PM 媒体: note 公開日: 2026-03-21
概要
非エンジニア・非デザイナーの すぅ AI駆動PM が実際に Google Stitch を操作しながら書いたハンズオンマニュアル。自己紹介サイトを題材に、ラフ案生成 → デザインシステム抽出 → DESIGN.md 作成 → Claude Code との MCP 連携による微修正、という8ステップの流れを体験できる構成。Google Stitch の核心は DESIGN.md（agent-friendly markdown file）にあるという主張が軸。
主要テーマ
- Google Stitch の3つの特徴（AIネイティブキャンバス・デザインエージェント・DESIGN.md）
- Vibe Design の概念（画面ではなく意図・感情から設計を始める）
- デザインシステムの自動生成と
DESIGN.mdへの書き出し - Stitch →
DESIGN.md→ Claude Code の役割分担フロー - MCP を使った Stitch と Claude Code の直接連携
8ステップの内容
| Step | 内容 |
|---|---|
| 1 | Stitch にログインして画面確認（モデル選択・レイアウト選択） |
| 2 | 方針を先に決める（誰に・何を・どう感じてほしいか・避けたい印象） |
| 3 | プロンプトでラフ案を生成し、3回の修正で方向を決める |
| 4 | デザインシステムを生成 → DESIGN.md を確認・保存 |
| 5 | DESIGN.md のルールをラフ案ページに適用して一貫性を揃える |
| 6 | Play ボタンでプロトタイプを確認（3秒ルール・実績までの導線・問い合わせ距離） |
| 7 | Stitch の MCP を設定し Claude Code と接続する |
| 8 | Claude Code が Stitch からコードを取得し、DESIGN.md を守りながら微修正する |
キーポイント
Vibe Design
Google が提唱するコンセプト。UIパーツの細かい指示から始めるのではなく、「何を達成したいか」「ユーザーに何を感じてほしいか」という意図・感情から設計をスタートする。最初のプロンプトで方向性を置くことで、後の修正回数が減る。
DESIGN.md とは
Stitch が自動生成する DESIGN.md は Google が「agent-friendly markdown file」と定義するファイル。デザインルール（Color・Typography・Spacing・Components・Layout）をマークダウン形式で記述し、他のデザインツールやコーディングツールにそのまま渡せる。別プロジェクトへのルール移植にも使える。
重要な記述原則：
- 色やサイズは具体的な値で書く（「落ち着いた色」ではなく
#1B3A5C） - 各値に役割を併記する（「何に使う色か」「どこの余白か」を明示）
モデル選択（Stitch 内）
| モデル | 特徴 |
|---|---|
| 3 Flash | Gemini 3.0 Flash。速い。コーディングエージェントへのエクスポート向き |
| Thinking with 3.1 Pro | Gemini 3.1 Pro。速度より品質と推論を優先 |
| Redesign | 既存サイト・アプリのスクリーンショットから再設計 |
| Ideate | アイデア出し用 |
Stitch × Claude Code の役割分担
Stitch で方向を決める
↓
DESIGN.md でルール化する
↓
Claude Code で細部を揃える
- Stitch が強い: 複数案の比較・方向性の決定・見た目を DESIGN.md に落として持ち運ぶこと
- Claude Code が強い: DESIGN.md を読みながら余白・階層・ボタン・カードの局所修正を繰り返す微修正
MCP 連携手順
- Stitch の右側エクスポートアイコン → Format「MCP」を選択
- 「MCP を設定」→ クライアントに「Claude Code」を選択 → API キーを発行
- Claude Code 側に MCP を設定
Stitch のプロジェクト一覧を見せてくださいで接続確認- Claude Code に Stitch からコード取得を指示 → ローカルに
index.htmlとstyles.cssを保存