design-md

Stitch DESIGN.md スキル

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

概要

このスキルは、既存のデザイン言語に完全に沿った新しい画面を Stitch に生成させるためのプロンプトに使用する「信頼できる唯一の情報源」となる DESIGN.md ファイルの作成を支援します。Stitch は、特定のカラー値で補足された「視覚的な説明」を通じてデザインを解釈します。

前提条件

• Stitch MCP サーバーへのアクセス
• デザイン済みの画面が少なくとも 1 つある Stitch プロジェクト
• Stitch Effective Prompting Guide へのアクセス：https://stitch.withgoogle.com/docs/learn/prompting/

目標

DESIGN.md ファイルは、既存のデザイン言語に完全に沿った新しい画面を Stitch に生成させるためのプロンプトに使用する「信頼できる唯一の情報源」となります。Stitch は、特定のカラー値で補足された「視覚的な説明」を通じてデザインを解釈します。

情報の取得とネットワーク

Stitch プロジェクトを分析するには、Stitch MCP サーバーのツールを使って画面のメタデータとデザインアセットを取得する必要があります。

1. 名前空間の検出：list_tools を実行して、Stitch MCP のプレフィックスを特定します。以降のすべての呼び出しで、このプレフィックス（例：mcp_stitch:）を使用します。

2. プロジェクトの検索（Project ID が指定されていない場合）：

   • [prefix]:list_projects を filter: "view=owned" とともに呼び出し、すべてのユーザープロジェクトを取得します
   • タイトルまたは URL パターンで対象のプロジェクトを特定します
   • name フィールドから Project ID を抽出します（例：projects/13534454087919359824）

3. 画面の検索（Screen ID が指定されていない場合）：

   • projectId（完全なパスではなく、数値 ID のみ）を指定して [prefix]:list_screens を呼び出します
   • 画面タイトルを確認して、対象の画面を特定します（例：「Home」、「Landing Page」）
   • 画面の name フィールドから Screen 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）

• プロジェクトタイトルを確認します
• プロジェクト固有の Project ID を確認します（例：JSON の name フィールドから）

2. 雰囲気を定義する（画像/HTML）

スクリーンショットと HTML 構造を評価し、全体的な「雰囲気」を捉えます。ムードを表現する印象的な形容詞（例：「開放的」、「情報量が多い」、「ミニマル」、「実用的」）を使います。

3. カラーパレットを対応づける（Tailwind Config/JSON）

システム内の主要な色を特定します。それぞれの色について、次の情報を記載します。

• その色の特徴を伝える、具体的で自然な名前（例：「深みのある落ち着いたティールネイビー」）
• 正確さを期すための、括弧内の具体的な HEX コード（例：「#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.)

使用例

Furniture Collection プロジェクトでこのスキルを使用するには、次の手順に従います。

1. プロジェクト情報を取得する：

   Use the Stitch MCP Server to get the Furniture Collection project
   

2. ホームページの画面の詳細を取得する：

   Retrieve the Home page screen's code, image, and screen object information
   

3. ベストプラクティスを参照する：

   Review the Stitch Effective Prompting Guide at:
   https://stitch.withgoogle.com/docs/learn/prompting/
   

4. 分析して要点をまとめる：

   • 画面から関連するデザイントークンをすべて抽出する
   • 技術的な値を描写的な言葉に置き換える
   • DESIGN.md の構成に沿って情報を整理する

5. ファイルを生成する：

   • プロジェクトディレクトリに DESIGN.md を作成する
   • 指定された形式に厳密に従う
   • すべてのカラーコードが正確であることを確認する
   • デザイナーに伝わりやすく、印象的な言葉で表現する

ベストプラクティス

• 具体的に描写する： 「青」や「角丸」のような一般的な表現を避け、「深い海を思わせるセルリアンブルー（#0077B6）」や「緩やかにカーブしたエッジ」のように表現してください
• 機能を説明する： 各デザイン要素が何に使われるかを必ず説明してください
• 一貫性を保つ： ドキュメント全体で同じ用語を使用してください
• 視覚的に表現する： 描写を通じて、読者がデザインを思い描けるようにしてください
• 正確に記述する： 自然な言葉での説明の後に、括弧書きで正確な値（16 進カラーコード、ピクセル値など）を記載してください

成功のためのヒント

1. まず全体像を捉える： 詳細に入る前に、デザイン全体の美的な方向性を把握してください
2. パターンを探す： 一貫した余白、サイズ、スタイルのパターンを特定してください
3. 意味を考える： 色は見た目だけでなく、その用途に基づいて名前を付けてください
4. 階層を考慮する： 視覚的な重みや重要度がどのように伝えられているかを記録してください
5. ガイドを参照する： Stitch Effective Prompting Guide の表現やパターンを活用してください

避けるべきよくある落とし穴

• ❌ 専門用語を説明なしで使う（例：「寛大に丸みを帯びた角」の代わりに「rounded-xl」を使う）
• ❌ カラーコードを省略する、または具体的な名称だけを使う
• ❌ デザイン要素が果たす機能を説明し忘れる
• ❌ 雰囲気の説明が曖昧すぎる
• ❌ シャドウや余白のパターンなど、さりげないデザインの詳細を無視する