タスク用スキル
Stitch Skills
文章や画像から画面設計と実装部品へ AI を案内します。
紹介
公開ドキュメントに基づき LessAI Tools が編集
実装前に画面を確認したい人向けです。Google Stitch のプロジェクトで画面生成・編集、スタイル管理、React などへの変換を行います。Stitch アカウント、プロジェクト権限、MCP 接続、スキルの依存関係が必要です。Google Labs code の公開ですが Google 公式サポート対象外と明記されています。利用枠は現在の公式案内に従います。
使い始める
必要な条件を確認し、アシスタントを選んで接続手順を見てください。
- 準備するもの
- プラグイン対応の三助手。Claude Code と Cursor の導入コマンドは Node.js と npm も必要です。
- 自分の Stitch と案内された MCP 認証を用意します。設計生成にはネット接続が必要です。
- 費用
- コードは Apache-2.0。Stitch の枠はアカウントで確認し、助手料金は別です。
- 必要な権限
- MCP は許可した Stitch を読み書きします。指示、選んだ画像や HTML は Stitch に送り、生成物は手元に保存します。権利のある資料だけ使い認証は自分の設定に保管します。
Codex公式の接続手順あり
現 README に Codex 導入が明記されています。設計を読むための Stitch MCP 接続も必要です。
接続手順
- Codex の設定 → プラグインマーケット → 追加で、出典を https://github.com/google-labs-code/stitch-skills、Git ref を main にします。
- 追加したマーケットで stitch-design を導入し、まず設計用だけ使います。
- 下記 Stitch MCP 案内で認証と接続を設定し、新会話で自分のプロジェクト一覧を頼みます。
接続結果の確認方法
実際の一覧を確認します。未作成なら空も正常です。次にテスト画面を頼み Stitch で確認します。スキルだけでは MCP 接続になりません。
公式資料
Claude Code公式の接続手順あり
現 README に Claude Code 導入が明記され、設計用の Stitch MCP も必要です。
接続手順
- 対象プロジェクトで端末を開き Node.js と npm を確認します。
- npx plugins add google-labs-code/stitch-skills --scope project --target claude-code を実行し案内を確認します。
- 下記 Stitch MCP 案内で認証と接続を設定し、新会話で自分のプロジェクト一覧を頼みます。
接続結果の確認方法
実際の一覧を確認します。未作成なら空も正常です。次にテスト画面を頼み Stitch で確認します。スキルだけでは MCP 接続になりません。
公式資料
Cursor公式の接続手順あり
現 README に Cursor 導入が明記され、設計用の Stitch MCP も必要です。
接続手順
- 対象プロジェクトで端末を開き Node.js と npm を確認します。
- npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor を実行し案内を確認します。
- 下記 Stitch MCP 案内で認証と接続を設定し、新会話で自分のプロジェクト一覧を頼みます。
接続結果の確認方法
実際の一覧を確認します。未作成なら空も正常です。次にテスト画面を頼み Stitch で確認します。スキルだけでは MCP 接続になりません。
公式資料
公式資料
接続情報の確認日 2026-10-13 · 公開ドキュメントに基づく案内です。全項目を個別にインストールして検証したものではありません。
できること
- 文章や参照画像で画面を生成・編集する
- 画面を揃えるデザインスタイルを管理する
- 選んだスキルで実装用の部品に変換する
公式プロジェクトとドキュメント
プロジェクトの説明（翻訳）
Stitch MCP 向けの公開 Agent Skills 標準に従い、Antigravity、Gemini CLI、Claude Code、Cursor に対応するスキル集
用途が近いプラグイン
主な用途を優先し、共通する作業とスター数を参考に選んでいます。接続方法は異なる場合があります。
- Anthropic Skills · Frontend Design — 意図的なレイアウト、タイポグラフィー、インタラクションを選択してインターフェイスを計画、構築、批評します。
- Taste Skill — 公開 Web サイトに意図的な視覚的な方向性を与え、ブラウザで結果を確認します。
- Text to CAD — 形や寸法を説明し、編集可能な 3D 部品を作ります。