·15 分で読めます

Stitch Skills ＋ Claude Code 入門チュートリアル：AI エージェントで UI デザインを生成する

Google 公式の stitch-skills プロジェクトを詳しく紹介し、Claude Code での設定と使い方を通じて、自然言語から UI デザイン、そしてコードまでの完全なワークフローを実現します。

S
Stitch Prompt Team
Content Team
StitchClaude CodeAIチュートリアルGitHub

Stitch Skills とは？

Stitch Skills は Google が公式に保守している Agent Skills ライブラリです（GitHub: google-labs-code/stitch-skills、6.4k スター）。AI コーディングエージェントが Google Stitch と直接やり取りできるようにし、次を実現します。

  • デザインの生成 — テキスト／画像から Stitch の UI 画面を生成
  • デザインシステムの管理 — DESIGN.md のアップロードと適用
  • コード生成 — Stitch のデザインを React／React Native コンポーネントに変換
  • 設計規約の抽出 — フロントエンドコードから DESIGN.md を抽出

ひと言でいえば、Stitch Skills を使えば Claude Code の中で AI に UI デザインを直接生成させ、それを自動で使えるフロントエンドコードに変換できます。

前提条件

始める前に、以下を用意します。

  1. Google アカウント — Stitch へのアクセスに使用
  2. Node.js 18+ — 実行環境
  3. Claude Code — AI コーディングエージェント
  4. Google Cloud プロジェクト — Stitch API の認証に使用

ステップ 1：Stitch MCP Server を設定する

Stitch Skills は Stitch MCP Server を介して Stitch と通信します。まず MCP 接続を設定します。

1.1 Google Cloud プロジェクトを作成する

  1. Google Cloud Console にアクセスする
  2. プロジェクトセレクターをクリック →「新しいプロジェクト」
  3. プロジェクト名を入力する（例：my-stitch-project）
  4. 「作成」をクリックする

1.2 Stitch API を有効にする

  1. 左側のメニューで「API とサービス」→「ライブラリ」をクリック
  2. 「Stitch API」を検索する
  3. 「有効にする」をクリックする

1.3 MCP Server をインストールして設定する

自動設定ウィザードを実行します。

npx @_davideast/stitch-mcp init

このウィザードは gcloud CLI のチェック、Google ログイン、プロジェクト設定、Stitch API の有効化を自動で処理します。

または手動で設定します。

# Google Cloud にログイン
gcloud auth login
gcloud config set project YOUR_PROJECT_ID

# アプリケーションのデフォルト認証情報を設定
gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

# Stitch API を有効化
gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

1.4 Claude Code に MCP を登録する

claude mcp add   -e GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID   -s user stitch   -- npx -y @_davideast/stitch-mcp proxy

接続を確認します。

claude mcp list | grep stitch

ステップ 2：Stitch Skills をインストールする

2.1 完全なプラグインセットをインストールする（推奨）

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

これで 3 つのプラグインパッケージがインストールされます。

プラグインパッケージ機能
stitch-design中核のデザインワークフロー（生成、編集、デザイン管理）
stitch-buildコード生成（React、React Native、shadcn/ui）
stitch-utilities補助ツール（プロンプト強化、DESIGN.md 生成）

2.2 選択してインストールする

一部のスキルだけが必要な場合：

npx skills add google-labs-code/stitch-skills

2026 年 10 月のアップデート：公式 CLI がより簡潔なインストール経路を提供するようになりました——stitch agent-skills add --user の 1 コマンドで、Claude Code、Cursor、Codex、Gemini CLI、Antigravity に Skills をまとめてインストールできます。詳細は Stitch CLI 完全ガイド をご覧ください。上記で紹介した手動の流れは、細かな制御が必要なシーンで引き続き有効です。

ステップ 3：実践デモ

設定が完了したら、Claude Code の中で自然言語のコマンドで Stitch を直接操作できます。

3.1 UI デザインを生成する

Claude Code で入力します。

> Make a mobile app homepage for a fitness tracker with a dashboard, 
> activity chart, and bottom navigation

Claude Code は Stitch の generate-design スキルを呼び出し、あなたの Stitch プロジェクトに対応する UI デザインを生成します。

3.2 既存のデザインを編集する

> Edit the login screen to add a "Remember Me" checkbox and change 
> the button color to blue

3.3 デザインのバリアントを生成する

> Generate 3 design variants of the home screen with dark mode, 
> light mode, and high-density layouts

3.4 デザインを React コンポーネントに変換する

> Convert all screens in my Stitch project to React components

Claude Code は自動で Stitch からデザインを取得し、React コンポーネントのコードを生成し、デザイントークンの一貫性を確保します。

3.5 フロントエンドコードからデザインシステムを抽出する

> Scan /src and extract the design system into .stitch/DESIGN.md

利用可能なスキル一覧

Design スキル

スキル説明コマンド例
stitch::generate-designテキスト／画像からデザインを生成"Make a settings page for a SaaS app"
stitch::code-to-designフロントエンドコードを Stitch デザインに変換"Upload /src/dashboard into Stitch"
stitch::manage-design-systemデザインシステムを管理"Apply our DESIGN.md to all screens"
stitch::extract-design-mdコードから DESIGN.md を抽出"Extract design system from /src"
stitch::upload-to-stitchローカル素材を Stitch にアップロード"Upload landing_page.html to Stitch"

Build スキル

スキル説明コマンド例
stitch::react-componentsReact コンポーネントを生成"Convert Stitch screens to React"
stitch::react-nativeReact Native コンポーネントを生成"Convert design to React Native"
shadcn-uishadcn/ui 開発ガイド"Build a data table with shadcn/ui"

Utilities スキル

スキル説明コマンド例
enhance-promptプロンプトを強化"Enhance: make a settings page"
stitch-loop複数ページのサイトを生成"Build a 5-page portfolio website"
taste-designハイエンドな DESIGN.md を生成"Generate premium DESIGN.md"

完全なワークフロー例

以下はゼロから始める完全なワークフローです。

ステップ 1：プロジェクトを作成する

mkdir my-app && cd my-app
npm init -y
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

ステップ 2：要件を記述する

Claude Code で：

> Build a mobile fitness tracking app with:
> - Dashboard showing today's stats (steps, calories, heart rate)
> - Activity chart for the last 7 days
> - Bottom navigation with Home, Activities, Profile tabs
> - Clean modern design with blue accent color

ステップ 3：デザインを生成する

Claude Code が Stitch を呼び出して対応する UI デザインを生成します。stitch.withgoogle.com で確認・編集できます。

ステップ 4：コードをエクスポートする

> Now convert these designs to React Native components with proper 
> theme and navigation

ステップ 5：イテレーションで最適化する

> Change the primary color to green and add a dark mode variant

よくある質問

Q: 有料ですか？

A: 完全に無料です。Stitch は Google Labs の無料枠（月 350 回の生成）を使用し、Stitch Skills もオープンソースで無料です。

Q: どのコーディングエージェントに対応していますか？

A: Claude Code、Cursor、Gemini CLI、Codex CLI、Antigravity など、MCP 互換のコーディングエージェントすべてに対応しています。

Q: 生成されるコードの品質はどうですか？

A: Stitch が生成するのは HTML/CSS コードで、stitch-build プラグインを通じて React／React Native コンポーネントに変換できます。コードの品質はプロンプトの明確さに依存します。

Q: 既存のプロジェクトと統合できますか？

A: できます。code-to-design スキルで既存のフロントエンドコードを Stitch にアップロードし、Stitch でデザインをイテレーションしてから、更新後のコードをエクスポートできます。

まとめ

Stitch Skills ＋ Claude Code の組み合わせは、まったく新しい UI 開発の方法を提供します。

  1. 自然言語で要件を記述する → Stitch が UI デザインを生成
  2. Claude Code でイテレーションする → デザインの細部を調整
  3. 自動でコードに変換する → React／React Native コンポーネントを生成

このワークフローは、高速なプロトタイプ開発、ノンデザイナーによる独立開発、そしてデザインの方向性を素早く探索する必要があるシーンに特に適しています。

Stitch プロンプトのテクニックをもっと知りたい場合は、Stitch プロンプトチュートリアル と スタイルギャラリー をご覧ください。

← ← ブログに戻る