Repolode
投稿する
google-labs-code

google-labs-code/stitch-skills

Stitch MCP serverを通じて、コーディングエージェントがGoogle Stitchのデザインプロジェクトを扱えるようにするAgent Skillsとプラグイン集。

代替できる製品:Figma

GitHub で見る公式サイト
スター
8,546
フォーク
1,115
未解決の Issue
17
最終コミット
2 か月前

これは何？

Stitch Skillsは、デザインツールGoogle Stitch向けのエージェントスキル集です。各スキルは、Claude Code、Cursor、Codex、Gemini CLIなどのコーディングエージェントが読み込み、特定のStitchワークフローを実行するための手順をまとめたフォルダです。利用するには、エージェントの環境でStitch MCP serverを設定する必要があります。

スキルは3つのプラグインに分類されています。stitch-designは画面の生成・編集、デザインシステムの管理、ソースコードからのDESIGN.mdファイル抽出、アセットのアップロードに対応します。stitch-buildはStitchの画面をReact、React Native、またはReact + Viteのダッシュボードコードに変換するほか、shadcn/uiのガイダンスやRemotionを使った解説動画を提供します。stitch-utilitiesはプロンプトの改善、DESIGN.mdの生成、複数ページのWebサイト生成を扱います。

スキルはCodex marketplace、npxのpluginsまたはskillsコマンドからインストールできるほか、OpenCode向けに手動でコピーすることもできます。スキル同士に依存関係がある場合があるため、必要なスキルだけを選んでインストールする際は、その依存先も含めてください。

主な機能

  • 01テキストや画像からStitchの新しい画面を生成し、既存の画面を編集します。
  • 02フロントエンドのソースコードから、デザインシステムを記述したDESIGN.mdファイルを抽出します。
  • 03Stitchの画面をReact、React Native、またはReact + Viteのダッシュボードコードに変換します。
  • 04ローカルのHTML、画像、モックアップをStitchプロジェクトにアップロードします。
  • 05Claude Code、Cursor、Codex、Gemini CLIなど、Agent Skills対応エージェントにインストールできます。

ユースケース

  • 既存のフロントエンドコードベースをStitchのデザインに変換し、レビューや反復的な改善に活用する。
  • デザイントークンの一貫性を保ちながら、Stitchの画面からReactコンポーネントを生成する。
  • 他のエージェントが参照できるよう、プロジェクトのビジュアルシステムをまとめたDESIGN.mdを作成する。
  • Stitchプロジェクトの解説動画を作成する。

クイックスタート

  1. 1

    CLI経由でCodexにStitch Skillsマーケットプレイスを追加する

    codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities
  2. 2

    またはnpxで必要なスキルだけをインストールする

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

使う前に知っておきたいこと

  • スキルを利用するには、事前にStitch MCPサーバーと認証情報を設定する必要があります。
  • Googleが公式にサポートする製品ではありません。

トピック

#ai-agents#design-to-code#mcp#react#design-system#coding-agents#ui-generation

よくある質問

stitch-skills とは？
Stitch MCP serverを通じて、コーディングエージェントがGoogle Stitchのデザインプロジェクトを扱えるようにするAgent Skillsとプラグイン集。 Stitch Skillsは、デザインツールGoogle Stitch向けのエージェントスキル集です。各スキルは、Claude Code、Cursor、Codex、Gemini CLIなどのコーディングエージェントが読み込み、特定のStitchワークフローを実行するための手順をまとめたフォルダです。利用するには、エージェントの環境でStitch MCP serverを設定する必要があります。
stitch-skills は無料で使えますか？ライセンスは？
stitch-skills は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
stitch-skills は今もメンテナンスされていますか？
半年以内に更新あり。stitch-skills の最終コミットは 2026年8月17日 です。
stitch-skills は何に使えますか？
既存のフロントエンドコードベースをStitchのデザインに変換し、レビューや反復的な改善に活用する。 デザイントークンの一貫性を保ちながら、Stitchの画面からReactコンポーネントを生成する。 他のエージェントが参照できるよう、プロジェクトのビジュアルシステムをまとめたDESIGN.mdを作成する。 Stitchプロジェクトの解説動画を作成する。
stitch-skills のインストール方法は？
CLI経由でCodexにStitch Skillsマーケットプレイスを追加する: codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities またはnpxで必要なスキルだけをインストールする: npx skills add google-labs-code/stitch-skills
stitch-skills はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/google-labs-code/stitch-skills

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト