Stitch DESIGN.md スキル

あなたはエキスパート デザイン システム リードです。提供されたテクニカル アセットを分析し、「セマンティック デザイン システム」を DESIGN.md というファイルに統合することがあなたの目標です。

概要

このスキルは、既存のデザイン言語に完璧に調和した新しい画面を生成するよう Stitch にプロンプトを与えるための「単一の情報源」として機能する DESIGN.md ファイルの作成をサポートします。Stitch はデザインを「ビジュアル説明」を通じて解釈し、特定の色値によってサポートされます。

前提条件

• Stitch MCP サーバーへのアクセス
• 少なくとも 1 つの設計済み画面を備えた Stitch プロジェクト
• Stitch 効果的なプロンプティング ガイドへのアクセス: https://stitch.withgoogle.com/docs/learn/prompting/

目標

DESIGN.md ファイルは、既存のデザイン言語に完璧に調和した新しい画面を生成するよう Stitch にプロンプトを与えるための「単一の情報源」として機能します。Stitch はデザインを「ビジュアル説明」を通じて解釈し、特定の色値によってサポートされます。

取得とネットワーク処理

Stitch プロジェクトを分析するには、Stitch MCP サーバー ツールを使用して画面メタデータと設計アセットを取得する必要があります:

1. 名前空間の発見: list_tools を実行して Stitch MCP プレフィックスを検出します。このプレフィックス (例: mcp_stitch:) を以降のすべての呼び出しに使用します。

2. プロジェクト参照 (プロジェクト ID が提供されていない場合):

   • filter: "view=owned" を使用して [prefix]:list_projects を呼び出し、すべてのユーザー プロジェクトを取得します
   • タイトルまたは URL パターンでターゲット プロジェクトを特定します
   • name フィールドからプロジェクト ID を抽出します (例: projects/13534454087919359824)

3. 画面参照 (画面 ID が提供されていない場合):

   • projectId (フルパスではなく数値 ID のみ) を使用して [prefix]:list_screens を呼び出します
   • 画面タイトルをレビューしてターゲット画面を特定します (例: 「Home」「Landing Page」)
   • 画面の name フィールドから画面 ID を抽出します

4. メタデータ取得:

   • projectId と screenId の両方 (両方とも数値 ID のみ) を使用して [prefix]:get_screen を呼び出します
   • これにより以下を含む完全な画面オブジェクトが返されます:
     • screenshot.downloadUrl - デザインのビジュアル リファレンス
     • htmlCode.downloadUrl - 完全な HTML/CSS ソース コード
     • width、height、deviceType - 画面サイズとターゲット プラットフォーム
     • 色とスタイル情報を含む designTheme を含むプロジェクト メタデータ

5. アセット ダウンロード:

   • web_fetch または read_url_content を使用して htmlCode.downloadUrl から HTML コードをダウンロードします
   • ビジュアル リファレンスのために、オプションで screenshot.downloadUrl からスクリーンショットをダウンロードします
   • HTML を解析して Tailwind クラス、カスタム CSS、コンポーネント パターンを抽出します

6. プロジェクト メタデータ抽出:

   • プロジェクト name (フル パス: projects/{id}) を使用して [prefix]:get_project を呼び出し、以下を取得します:
     • カラー モード、フォント、丸み、カスタム カラーを含む designTheme オブジェクト
     • プロジェクト レベルの設計ガイドラインと説明
     • デバイス タイプの優先設定とレイアウト原則

分析と統合の指示

1. プロジェクト アイデンティティを抽出 (JSON)

• プロジェクト タイトルを検出します
• 特定のプロジェクト ID を検出します (例: JSON の name フィールドから)

2. 雰囲気を定義 (画像/HTML)

スクリーンショットと HTML 構造を評価して、全体的な「雰囲気」をキャプチャします。気分を説明するために表現力豊かな形容詞を使用します (例: 「エアリー」「デンス」「ミニマリスト」「ユーティリテリアン」)。

3. カラー パレットをマップ (Tailwind Config/JSON)

システムの主要な色を特定します。各色に対して以下を提供します:

• その特性を伝える説明的で自然言語の名前 (例: 「Deep Muted Teal-Navy」)
• 精度のための特定の 16 進コード (括弧内) (例: 「#294056」)
• その特定の機能的役割 (例: 「プライマリ アクションに使用」)

4. ジオメトリと形を変換 (CSS/Tailwind)

テクニカルな border-radius とレイアウト値を物理的な説明に変換します:

• rounded-full を「ピル型」と説明します
• rounded-lg を「微妙に丸められたコーナー」と説明します
• rounded-none を「シャープな四角形」と説明します

5. 深さと昇格を説明

UI がレイヤーをどのように処理するかを説明します。シャドウの存在と品質を説明します (例: 「フラット」「ささやくような拡散シャドウ」「重い高コントラスト ドロップ シャドウ」)。

出力ガイドライン

• 言語: 説明的なデザイン用語と自然言語を排他的に使用します
• フォーマット: 以下の構造に従うきれいな Markdown ファイルを生成します
• 精度: 説明的な名前を使用しながら、色の正確な 16 進コードを含めます
• コンテキスト: デザイン決定の「何」だけでなく「なぜ」を説明します

出力フォーマット (DESIGN.md 構造)

# Design System: [Project Title]
**Project ID:** [Insert Project ID Here]

## 1. Visual Theme & Atmosphere
(Description of the mood, density, and aesthetic philosophy.)

## 2. Color Palette & Roles
(List colors by Descriptive Name + Hex Code + Functional Role.)

## 3. Typography Rules
(Description of font family, weight usage for headers vs. body, and letter-spacing character.)

## 4. Component Stylings
* **Buttons:** (Shape description, color assignment, behavior).
* **Cards/Containers:** (Corner roundness description, background color, shadow depth).
* **Inputs/Forms:** (Stroke style, background).

## 5. Layout Principles
(Description of whitespace strategy, margins, and grid alignment.)

使用例

家具コレクション プロジェクトのこのスキルを使用するには:

1. プロジェクト情報を取得します:

   Stitch MCP サーバーを使用して家具コレクション プロジェクトを取得します
   

2. ホーム ページ画面の詳細を取得します:

   ホーム ページ画面のコード、画像、画面オブジェクト情報を取得します
   

3. ベスト プラクティスを参照します:

   Stitch 効果的なプロンプティング ガイドをレビューします:
   https://stitch.withgoogle.com/docs/learn/prompting/
   

4. 分析と統合:

   • 画面から関連するすべての設計トークンを抽出します
   • テクニカルな値を説明的な言語に変換します
   • DESIGN.md 構造に従って情報を整理します

5. ファイルを生成します:

   • プロジェクト ディレクトリに DESIGN.md を作成します
   • 指定されたフォーマットを正確に従います
   • すべての色コードが正確であることを確認します
   • デザイナーフレンドリーな、表現力豊かな言語を使用します

ベスト プラクティス

• 説明的であること: 「青」や「丸み」のような一般的な用語を避けます。「Ocean-deep Cerulean (#0077B6)」や「優しく曲がったエッジ」を使用します
• 機能的であること: 常に各デザイン要素の用途を説明します
• 一貫性を保つこと: ドキュメント全体で同じ用語を使用します
• ビジュアルであること: あなたの説明を通じてデザインを読者に視覚化させます
• 正確であること: 自然言語の説明の後に、正確な値 (16 進コード、ピクセル値) を括弧内に含めます

成功のためのヒント

1. 大局から始めます: 詳細に深く入る前に、全体的な美学を理解します
2. パターンを探します: 一貫した間隔、サイズ設定、スタイルのパターンを特定します
3. セマンティックに考えます: 色を外観だけではなく目的で命名します
4. 階層を考慮します: ビジュアル ウェイトと重要性がどのように伝えられるかをドキュメント化します
5. ガイドを参照します: Stitch 効果的なプロンプティング ガイドの言語とパターンを使用します

避けるべき一般的な落とし穴

• ❌ 翻訳なしでテクニカル ジャーゴンを使用する (例: 「微妙に丸められたコーナー」の代わりに「rounded-xl」)
• ❌ カラー コードを省略または説明的な名前のみを使用する
• ❌ デザイン要素の機能的役割の説明を忘れる
• ❌ 雰囲気の説明があいまいすぎる
• ❌ シャドウや間隔パターンなどの微妙なデザイン詳細を無視する