Agent Skills をはじめる

Stitch Design Skills をインストールし、MCP サーバーに接続して、最初の画面を生成します — すべてコーディングエージェントから。

Stitch Design Skills は、コーディングエージェントにデザインの強力な機能を追加するエージェント指示です。画面の生成、デザインシステムの抽出、複数ページのサイト構築、デザインから React コンポーネントへの変換を行えます。Agent Skills 標準をサポートする任意のエージェント（Gemini CLI、Claude Code、Cursor、Antigravity）で動作します。

プラグインスイートをインストールする

プロジェクトディレクトリで次を実行します：

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

これにより、3 つのプラグイン（stitch-design、stitch-build、stitch-utilities）と合計 13 のスキルがすべてインストールされます。

エージェントのターゲットを選ぶ

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

# Cursor
npx plugins add google-labs-code/stitch-skills --scope project --target cursor

# Gemini CLI
npx plugins add google-labs-code/stitch-skills --scope project --target gemini-cli

Antigravity をお使いの方： plugins CLI はまだ Antigravity をターゲットとしてサポートしていません。代わりに、選択してインストールするセクションの npx add-skill コマンドを使用してください。

選択してインストールする（任意）

特定のスキルだけが必要な場合は、次のコマンドを実行して、必要なスキルを選択します：

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

多くのスキルは相互に依存しています。たとえば code-to-design スキルには、extract-static-html、extract-design-md、upload-to-stitch が必要です。プラグインをすべてインストールする方が安全です。

Stitch MCP サーバーに接続する

スキルは Model Context Protocol を通じて Stitch と通信します。Stitch MCP セットアップ手順に従ってサーバーを登録し、API 認証情報を設定してください。

接続すると、エージェントは list_projects、generate_screen_from_text、get_screen などのツールを利用できるようになります。

接続を確認する

PROMPT
List my Stitch projects.

既存のプロジェクトが表示されるはずです。Stitch を初めて使う場合は空のリストが表示されます。エラーが表示される場合は、MCP サーバーが実行中であることと、API キーが有効であることを確認してください。

最初の画面を生成する

大まかなアイデアから始めます。enhance-prompt スキルが、曖昧なコンセプトを構造化された生成可能なプロンプトに変換します。

PROMPT
Enhance this prompt for Stitch: “Create a landing page for an artisanal coffee shop”

出力に注目してください。スキルはプラットフォーム仕様を追加し、ページを番号付きのセクションに構造化し、曖昧な表現を具体的な UI/UX キーワードに置き換え、カラーロールを含むデザインシステムブロックを生成します。この強化されたプロンプトは、元のプロンプトよりはるかに良い結果を生み出します。

では生成しましょう：

PROMPT
Generate a screen in my Stitch project using the enhanced prompt from the previous step.

15〜30 秒かかります。完了すると、画面 ID とファイルパスを含む確認が表示されます。生成されたスクリーンショットを開いてデザインを確認してください。ヒーローセクション、機能カード、ナビゲーション、フッターを備えた完全なランディングページが、1 つのテキストプロンプトから生成されています。

次のステップ

スキルのインストール、Stitch への接続、最初の画面の生成が完了しました。次はこちらへ進みましょう：

トラブルシューティング

問題解決方法
npx plugins が見つからないNode.js 18 以降をインストールする：node --version
MCP サーバーが応答しないセットアップを確認する：MCP セットアップガイド
エージェントにスキルが表示されないインストール後にエージェントセッションを再起動する
権限エラー--scope global の代わりに --scope project を使用する
API キーエラーエージェントの MCP 設定のキーが期限切れでないことを確認する

原文: https://stitch.withgoogle.com/docs/skills/get-started/

本ページは Google Stitch 公式ドキュメントの翻訳です。原文の著作権は Google LLC に帰属します。本サイトは独立した非公式の翻訳です。

次へ →コードとデザインのラウンドトリップ