スキル自身の言葉で
Stitch内でプロジェクトのソース・オブ・トゥルースとして機能する設計システムを、MCPツールを使って管理します。プロジェクトのメタデータと画面のアセットを取得し（list_projects、list_screens、get_screen、read_url_content）、既存の画面からdesign-mdスキルを使ってトークンを合成するか、単純な説明文からトークンを合成し、.stitch/DESIGN.mdを書き出し、そのMarkdownをアップロードしてcreate_design_system_from_design_mdを呼び出します。
ハードチェックポイントでは、何かをアップロードする前に、表示名、カラー、フォント、角丸のユーザー承認が必要です。作成後、apply_design_systemはスクリーンインスタンスidのみを使用して既存のスクリーンにトークンを適用し、.stitch/metadata.jsonはプロジェクト、スクリーン、デザインシステムの概要を記録します。
生成されるもの
- プロジェクト用に生成されたDESIGN.mdデザインファイルです。
- プロジェクトID、タイトル、既知のすべての画面、デザインシステムの概要を記録する .stitch/metadata.json ファイルです。
- Stitch内で保持されるプロジェクトレベルのデザイントークンで、後続の生成プロンプトで再度記述する必要はありません。
仕組み
- 01プロジェクトとスクリーンのアセットを取得する
list_projectsが対象のprojectIdを見つけ、list_screensがHomeやMain Dashboardなどの代表的な画面を提示し、get_screenがHTMLを取得する前にスクリーンショットとhtmlCodeのダウンロードURLを返します。
- 02デザインシステムを統合します
既存の画面は design-md スキルによって解釈されます。まったく新規のプロジェクトや直接的な説明の場合は、まずユーザーの曖ちょうな言葉を正確な値にマッピングして処理します。
- 03DESIGN.mdをアップロードしてデザインシステムを作成
推奨されるアップローダースクリプトは、markdown をプロセス内で base64 エンコードし、プロジェクトの batchCreate エンドポイントに送信することで、出力トークンの上限を回避します。その後、create_design_system_from_design_md が projectId と返された screen instance を使って実行されます。
- 04既存の画面にシステムを適用する
apply_design_systemはprojectId、assetId、そして画面インスタンスのリストを受け取り、すでに構築済みの画面に保存済みのトークンを適用します。