1仕組みと動作原理
スキルパッケージには Stitch クライアントが同梱されておらず、実行時にホストの list_tools を使用して MCP プレフィックスを動的に検出し、[prefix]:ツール名 で呼び出します。そのため、同一の指示で異なるホストに対応できます。
plugins/stitch-build/skills/react-components/SKILL.md
1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.
リポジトリ内に `mcp__stitch__` のリテラルは一切存在せず、プレフィックスはプレースホルダーです。これにより Claude Code / Codex / Gemini CLI 間での移植性を実現しています。
MCP からデザインの署名付き URL が返された後、モデル組み込みのフェッチではなく、同梱の curl スクリプトによるダウンロードを強制します。これは Google Cloud Storage ドメインでの取得失敗を回避するためです。
plugins/stitch-build/skills/react-components/SKILL.md
4. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains. You MUST use the provided script.
直後に HTML とスクリーンショット用の2つの fetch-stitch.sh コマンドが提示されます（スクリーンショット URL には =w{width} を追加）。スクリプト自体は認証情報を読み取らない極めてシンプルな curl ラッパーです。
ダウンロードされた HTML 内の tailwind.config からデザイントークンを抽出し、**スキル同梱の** resources/style-guide.json に上書きします。これにより、該当ファイルが今回のコンポーネント生成における唯一のカラーパレット情報源となります。
plugins/stitch-build/skills/react-components/SKILL.md
2. **Sync `resources/style-guide.json`**: Overwrite the file with the extracted tokens from THIS project. The style guide MUST match the Stitch project being converted.
これは Phase 2 の GATE です。前プロジェクトの古いトークンの再利用は失敗とみなされ、「上書き」によってトークンのドリフトを検知可能なハードエラーへと変換します。
生成結果は正規表現ではなく AST で検証されます。Props で終わるインターフェースが必須であり、className 内にハードコードされた16進カラー値を含めることは禁止されています。
plugins/stitch-build/skills/react-components/scripts/validate.js
if (node.type === 'TsInterfaceDeclaration' && node.id.value.endsWith('Props')) hasInterface = true;
同ファイル内で配色ソース検証用の HEX_COLOR_REGEX が定義されています。このスクリプトは package.json scripts.validate および .github/workflows/validate-skills.yml から呼び出され、自動実行可能な受け入れゲートとして機能します。
アップロードでは意図的に MCP ツールをバイパスしています。Base64 エンコードがモデルの出力トークンを圧迫するため、Python スクリプトがプロセス内でエンコードを行い、Stitch REST API へ直接 HTTP POST します。
plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py
a 53KB PNG becomes ~71K chars of base64). The output gets truncated
コメントには明確に「This script bypasses the model entirely」と記載されています。MIME ホワイトリストは png/jpg/jpeg/webp/html/htm/md に限定され、対象外は拒否されます。
code-to-design は純粋なオーケストレーション型スキルです。自身は変換を行わず、順序に従って3つの兄弟スキルにタスクを委譲します。
plugins/stitch-design/skills/code-to-design/SKILL.md
This skill orchestrates three other skills in sequence:
extract-static-html → extract-design-md → upload-to-stitch の順序が記載されています。これにより、パッケージ全体が「デザイン / 構築 / ツール」の3つのプラグインに分割されている理由が説明されます。
stitch-loop は .stitch/next-prompt.md をバトンファイルとして使用して無人での複数ページサイトループを実現し、各ラウンドで必ずバトンを更新する必要があります。
plugins/stitch-utilities/skills/stitch-loop/SKILL.md
1. Reads the current task from a baton file (`.stitch/next-prompt.md`)
同ファイルには `You MUST update `.stitch/next-prompt.md` before completing.` という厳格な制約があります。セッションメモリの代わりにファイル状態を利用することで、新しいセッションでもループを継続できます。
静的 HTML 抽出の主力は Puppeteer スクリプトです。ヘッドレス Chrome を起動してレンダリング後の DOM をキャプチャし、CSS と画像をインライン化して単一ファイルにまとめます。
plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts
* snapshot.ts — Production-grade Puppeteer-based full-page HTML snapshot
スクリプトは約1,470行です。puppeteer はどの package.json にも記載されておらず、ロックファイルではなく `npx tsx` による実行時依存解決に依存しています。
デザインシステムの唯一の信頼できる情報源（Single Source of Truth）は DESIGN.md です。アップロード後はプロジェクト単位でトークンが保持されるため、生成プロンプトにカラーやフォントを再記述しないよう求められます。
plugins/stitch-design/skills/manage-design-system/SKILL.md
After generating `.stitch/DESIGN.md`, make sure to also create or update the
同ファイルではユーザーの確認を得てからアップロードし、create_design_system_from_design_md を呼び出すよう指示されています。これにより、デザインシステムをローカルに留めず Stitch プロジェクト側に反映させます。
2コア機能
01テキストや画像から Stitch 画面を生成・編集し、デザインバリアントを出力
02既存のフロントエンドコードを Stitch に移行（静的 HTML 抽出 + デザインシステム抽出 + アップロード）
03Stitch デザインを React/Vite コンポーネントに変換し、AST 検証およびトークン整合性チェックを実施
04Stitch HTML を React Native コンポーネントおよび StyleSheet テーマに変換
05Stitch プロジェクトから Remotion ウォークスルー動画を生成
06DESIGN.md デザインシステムを抽出または合成し、以降のプロンプトの信頼できる情報源として活用
07実行中の Web アプリケーションをキャプチャし、自己完結型の静的 HTML に変換（CSS、画像、canvas、iframe をインライン化）
08曖昧な UI アイデアを Stitch 最適化プロンプトにリライト
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| api | Stitch API 默认 base URL |
| api | BatchCreateScreens 端点 |
| cli | curl 下载 MCP 返回的签名资产 |
| network | 远程 Stitch MCP（URL 由用户填） |
| cli | npx tsx 运行 TypeScript 脚本 |
| cli | python3 运行上传脚本 |
| package | puppeteer（未在任何 package.json 声明，由 npx tsx 运行时解析） |
| package | @swc/core（已声明依赖，用于 AST 解析） |
| cli | npx shadcn CLI 拉取组件源码 |
| package | @google/design.md linter |
| cli | npm 安装 Remotion 依赖 |
| cli | npx remotion render 出片 |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
隔離環境で実行、都度明示的な認可
管理者向け
厳格な認可、全量監査、コンプライアンス確認
判定根拠（ファイルパスと抜粋）
- SKILL.md: コンプライアンスおよびプラットフォーム利用規約の厳格な規制対象に該当
- scripts/: ローカルスクリプトまたはコマンドの実行: `bash scripts/fetch-stitch.sh` による HTML/スクリーンショットのダウンロード（指示箇所: react-components/SKILL.md および r
- scripts/ 或 SKILL.md: 外部言語パッケージ依存関係の動的インストールの宣言
- 网络端点: 外部ネットワークアクセスの宣言: MCP が返した署名付き URL（Google Cloud Storage ドメイン）を curl で取得: fetch-stitch.sh 内の curl 行; re
- 本地工作目录: ファイル読み書きおよび成果物の出力: .stitch/designs/{page}.html および .png の書き込み（fetch-stitch.sh の2つのコマンド）。
監査ノート： 🔴 赤：厳格な管理対象。本スキルはソースコードの証拠を伴う2つのレッドラインに同時に抵触しています。① 任意コード実行のリスク：extract-static-html の snapshot.ts は、`const authModule = await import(authPath);` を通じて `--auth-script` で指定された任意のローカル JS/TS モジュールを実行します。引数はエージェントによって入力され、パスや内容の検証は一切行われません。また、同スキルは `npx tsx` を使用して同梱の TS スクリプトを実行します（puppeteer 依存関係はいずれの package.json にも記載されておらず、実行時に npx によって解決されます）。② 認証情報の読み取りと平文での外部受け渡し：upload-to-stitch/SKILL.md は、~/.claude.json、~/.gemini/settings.json、.gemini/antigravity/mcp_config.json などのホスト MCP 設定から Google API キーを抽出し、`--api-key <API_KEY>` の平文コマンドライン引数として子プロセスに渡すようエージェントに指示しています。これにより、キーがプロセス引数やコマンド履歴ログに残る可能性があります。なお、「本パッケージはマルウェアではない」という点には留意が必要です。Google Labs によるものであり、同種のものと比較してガードレールの密度は高く（ダウンロード／アップロード／サービス起動前の強制ユーザー確認、アップロード MIME ホワイトリスト、AST 検証、CI 受け入れ、Apache-2.0、フックや postinstall の不在など）、2つのレッドラインはいずれも機能設計上の要件によるものです。しかし、利用前には上記2点、特にコマンドラインでのキー露出と任意モジュールの実行エントリポイントについて十分に認識しておく必要があります。
5二重目の独立検証
- [ok] skill.path 的选取 — 重读 .agents/plugins/marketplace.json 与三个 plugin.json：仓库根与 plugins/ 直属层都没有 SKILL.md 或 manifest，故条目只能落在插件级或插件内的具体技能上。根 README 与 marketplace 都把它当『库』对待（displayName=Stitch Skills、三条 source.path），而 brief 要求 official_desc 取 SKILL.md frontmatter 原文——plugins/stitch-design 本身没有 SKILL.md，故选其中承载设计主流程的入口技能目录 plugins/stitch-design/skills/generate-design（name: stitch::generate-design，frontmatter 有完整 description）。
- [ok] official_desc 逐字与折行 — 重读 generate-design/SKILL.md L1-9：description 用 YAML 折叠符 `>-`，跨 5 行；已按折叠后单行逐字收录，未改动用词。另注意 plugins/stitch-design/plugin.json 的插件级 description 与 .codex-plugin/plugin.json 的文案不同（前者用破折号、后者更短），属两处清单不一致，非本 skill 的 description。
- [ok] external_deps：Stitch REST 端点与请求头 — 重读 upload_to_stitch.py：默认 base 为 https://stitch.googleapis.com，URL 拼接为 `{api_url}/v1/projects/{project_id}/screens:batchCreate`，请求头 `X-Goog-Api-Key` 与 `--api-key required=True` 均在位；三处行号与首遍一致。
- [ok] external_deps：curl 调用点与两处重复脚本 — 对 plugins 全量二次检索 curl：react-components 与 react-native 的 fetch-stitch.sh 是同一语句的两个副本，remotion 的 download-stitch-asset.sh 额外做 mkdir -p 与失败 rm -f。三处均为极简包装，不读凭证。
- [ok] security.credential_reads 的三条配置路径 — 重读 upload-to-stitch/SKILL.md 的『Get the API Key』段：Antigravity / Gemini CLI / Claude Code 三条配置路径、X-Goog-Api-Key 取值说明、找不到时必须向用户索要的强约束，以及脚本调用处的 `--api-key <API_KEY>`，逐字与首遍一致。
- [ok] security：任意模块执行分支 — 重读 snapshot.ts 的 auth-script 分支：打印 Running authentication script from 后 `path.resolve(process.cwd(), opts.authScript)` 再 `await import(authPath)`，若导出为函数则以 page 调用。确认这是无校验的本地模块执行入口，参数由调用方（agent）填入。
- [ok] security：SSL 处理是否属安全降级 — 重读 upload_to_stitch.py 的 ssl 相关行与 SKILL.md 的 Troubleshooting 段：脚本用 certifi 提供的 CA 建默认上下文，SKILL.md 建议通过 SSL_CERT_FILE 指定 CA——是修正缺失根证书，不是 disable verification；故未把它计入降级行为。
- [ok] security.file_writes 的路径清单 — 重读 react-components/SKILL.md 与 stitch-loop/SKILL.md 的写入段：.stitch/designs、.stitch/metadata.json、resources/style-guide.json 覆盖写、site/public 迁移、.stitch/next-prompt.md 强制更新均有原文；另补 post_process.ts 与 snapshot.ts 的脚本级写入。写入目标全部位于当前项目或技能自身目录。
6結論
最適な用途： Google Stitch（またはその MCP）をすでに利用している、あるいは導入を検討しているプロダクト／フロントエンドチーム、特に「デザイン ↔ コード」の双方向フロー（既存フロントエンドの Stitch 移行、トークン整合性を保った React/RN コンポーネント変換、ウォークスルー動画生成、バトンファイルによる複数ページサイトループ）を構築したいワークフローに最適です。また、外部 SaaS の MCP 機能を段階的開示スキルとしてパッケージ化する手法や、プラグイン分割・GATE 設計を研究したい開発者の参考資料としても適しています。
不向きな用途： シークレットの露出に敏感な環境や、コマンドライン上に認証情報を表示することが禁止されている環境（--api-key を平文引数として渡すため）には適していません。信頼されていないスクリプトの実行が禁止されている制限環境（--auth-script による任意のモジュール import や npx tsx による実行時依存解決がロックファイルで拘束されないため）には適していません。Stitch MCP を持たないユーザーには適していません（すべての生成機能が前提となっており、MCP がなければドキュメントとしての価値しか残りません）。また、完全ローカルかつサードパーティ CLI を一切排除したい環境（curl、python3、npx、npm、shadcn、remotion が実行チェーンに含まれるため）にも適していません。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload stitch-skills.tar.gz
sha256:
Option B · Copy Guide for Agent88df56fdbec37bb5…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0337446dad.