概要

stitchSkillは、Antigravityプラットフォーム向けの「Stitch Wireframe Generator」スキルです。主に、仕様書や要件文書をAIで読み解き、画面ごとの設計プラン（スクリーン構成）を生成し、そのコンテキストを含んだプロンプトを作成してGoogle StitchのMCP（Multi-Channel Platform）経由でワイヤーフレームを自動描画します。これにより、デザイナーやプロダクトマネージャーが手作業で多数のスクリーンを作る必要がなくなり、設計の初期段階を高速化できます。サンプルやSKILL定義が同梱され、Antigravityエージェントへの組み込みを想定した構成です。

リポジトリの統計情報

スター数: 7
フォーク数: 1
ウォッチャー数: 7
コミット数: 2
ファイル数: 10
メインの言語: JavaScript

主な特徴

ドキュメント解析から画面群（screens）設計までの一連ワークフローをAIで自動化
Google Stitch MCPへ送るためのコンテキスト付きプロンプトを自動生成
Antigravityスキル（SKILL.md）としてAgentに組み込み可能な設計
サンプルやデモを含むexamplesディレクトリで動作イメージを確認可能

技術的なポイント

stitchSkillの中心は「AIによる設計パイプラインの自動化」です。READMEにあるように、入力となるソフトウェア説明（仕様書）をAIが解析して全体の画面構成をプランニングし、その結果を元にGoogle Stitchへ送るプロンプトを生成します。技術的には以下の点が注目できます。

Antigravityプラットフォームとの親和性：SKILL.mdやREADME_en.mdが含まれており、Antigravityのエージェントにスキルとして登録して呼び出す設計になっています。エージェントはスキルを通じてドキュメントを受け取り、ステップごとに処理を進められます。
プロンプトエンジニアリング：ワイヤーフレーム描画には「文脈（context）」が重要なため、stitchSkillは画面構成、コンポーネント配置、優先度、ラベルやユーザーフローなどを含む詳細なプロンプトを生成します。これによりGoogle Stitch上での描画品質を向上させます。
Google Stitch MCPとの連携：MCP API（あるいはStitchのチャネル経由）へ指示を送り、ワイヤーフレーム生成を自動実行します。READMEのコメントから、複数のスクリーンをまとめて描画するバッチ的アプローチと、対話的に逐次描画するアプローチの双方を意識していることが分かります。
実装スタック：リポジトリは主にJavaScriptで構成されており、エージェントのラッパーやプロンプト構築ロジックがJSで書かれている想定です。examplesディレクトリにサンプル入出力やテンプレートがあり、利用者はそれを元に自分のドキュメントに合わせたプロンプト調整が可能です。
拡張性と制約：自動生成は初期設計の高速化に強みがある一方で、詳細デザインやUX微調整は手作業が必要です。プロンプト品質やStitchの描画能力に依存するため、複雑なUI/アニメーションを必要とする場合は追加の指示や後処理が必要です。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
README.md: file
README_en.md: file
SKILL.md: file
examples: dir
package.json（想定）: file
index.js（想定）: file
lib/ または src/（想定）: dir
LICENSE（存在する場合）: file
その他設定ファイルやテンプレート類

…他 5 ファイル

（実際のファイル数はリポジトリ参照に基づくため、ローカルでの展開や最新コミットで差異が出る可能性があります。）

使いどころと改善案

stitchSkillはプロダクトの初期設計フェーズ、特に仕様書から大量の画面を短時間で形にしたいときに有用です。導入の際はプロンプトテンプレートをプロジェクト固有のUI規約やデザインシステムに合わせてカスタマイズすると精度が上がります。改善案としては、生成結果のバリエーション管理（複数案のスナップショット化）、Stitch側での要素編集履歴の取り込み、アクセシビリティやレスポンシブ対応ルールの明示的なプロンプトパラメータ化などが挙げられます。

まとめ

仕様書からワイヤーフレーム生成までを自動化し、画面設計の初期作業を大幅に効率化する実験的なスキルです（約50字）。

リポジトリ情報：

名前: stitchSkill
説明: 説明なし
スター数: 7
言語: JavaScript
URL: https://github.com/arinnem/stitchSkill
オーナー: arinnem
アバター: https://avatars.githubusercontent.com/u/27327811?v=4

READMEの抜粋：

🧩 Stitch Wireframe Generator — Antigravity Skill

AI đọc tài liệu mô tả phần mềm → lên kế hoạch toàn bộ màn hình → xây dựng prompt có context đầy đủ → tự động vẽ wireframe qua Google Stitch.

Một skill cho Antigravity giúp tự động hóa quy trình vẽ wireframe qua Google Stitch MCP. Thay vì ngồi tạo từng screen thủ công, để AI agent xử lý toàn bộ pipeline — từ phân tích tài liệu đến vẽ hệ thống hoàn chỉnh。

Stitch ワイヤーフレームジェネレーター — Antigravity Skill