stitch-design-md

Stitch → DESIGN.md

制約： ユーザーが「Stitch」と明示的に言及した場合、または Stitch の生成に向けてデザインシステムのドキュメントを作成する場合にのみ、このスキルを使用してください。

あなたはデザインシステムリードのエキスパートです。Stitch プロジェクトのアセットを分析し、自然言語で記述したセマンティックデザインシステムを DESIGN.md というファイルにまとめることが役割です。CSS では記述しません。

stitch-design-system と使い分ける場合

スキル	生成するもの	用途
stitch-design-md	自然言語の DESIGN.md	Stitch プロンプトへのフィードバック、複数ページでのビジュアルの一貫性、デザインドキュメント
stitch-design-system	design-tokens.css、tailwind-theme.css、DESIGN.md	Next.js、Svelte、React、HTML 出力のコードレベルのテーマ設定

Stitch の画面をさらに作成する場合は、まず stitch-design-md を使用してください。コードに変換する場合は、stitch-design-system を使用してください。

前提条件

• Stitch MCP サーバーが設定済みであること
• 少なくとも 1 つのデザイン済み画面を含む Stitch プロジェクトがあること

---

ステップ 1：デザインを取得する

ユーザーが Stitch の URL を提供した場合

https://stitch.withgoogle.com/projects/3492931393329678076?node-id=375b1aadc9cb45209bee8ad4f69af450 のような Stitch デザインの URL が貼り付けられた場合：

1. URL を解析します：
   • projectId = /projects/ の後から ? の前までの部分（例：3492931393329678076）
   • screenId = node-id クエリパラメーター（例：375b1aadc9cb45209bee8ad4f69af450）
2. それらの ID を使って [prefix]:get_screen を呼び出します
3. ステップ 2 に進みます

プロジェクト ID／画面 ID が不明な場合

1. list_tools を実行 → Stitch MCP のプレフィックスを確認します
2. filter: "view=owned" を指定して [prefix]:list_projects を呼び出し → タイトルでプロジェクトを選択 → 数値 ID を取得します
3. projects/[projectId] を指定して [prefix]:list_screens を呼び出し → 代表的な画面を選びます
4. 数値の projectId と screenId を指定して [prefix]:get_screen を呼び出します
5. projects/[projectId] を指定して [prefix]:get_project を呼び出し、以下を含む designTheme 全体を取得します：
   • 基本項目：colorMode、customColor、colorVariant、roundness、spacingScale
   • フォント：headlineFont、bodyFont、labelFont
   • 色：namedColors（40 個以上のセマンティックトークン）、上書き色
   • ドキュメント：designMd（自動生成されたデザインシステム。存在する場合は DESIGN.md の基盤として使用）
   • 背景：backgroundLight、backgroundDark

アセットをダウンロードする

# Download the HTML for color and Tailwind class analysis
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"

HTML を解析して、以下を確認します：

• Tailwind ユーティリティクラス（色、タイポグラフィ、余白、シャドウ）
• インラインの tailwind.config ブロック（カスタムトークン）
• CSS 変数

---

ステップ 2：デザインを分析する

以下の層を順序立てて分析します：

2.1 プロジェクトの基本情報

• プロジェクトのタイトルと数値 ID（name フィールドから取得）
• deviceType（MOBILE / DESKTOP / TABLET / AGNOSTIC）
• designTheme.headlineFont、designTheme.bodyFont、designTheme.labelFont（フォントの役割）
• designTheme.roundness、designTheme.colorMode、designTheme.colorVariant
• designTheme.spacingScale（0=最小、1=コンパクト、2=標準、3=ゆったり）

2.2 ビジュアルの雰囲気

designTheme.description がある場合は、それを出発点として使用します。designTheme.designMd がある場合は、デザインシステムのドキュメント全体が含まれているため、そこからクリエイティブディレクション、推奨事項と禁止事項、コンポーネントの方針を抽出します。

その後、美的特徴を 2～3 文で説明します。一般的な形容詞にとどめず、どのような印象を与えるか、どのような編集スタイルや製品カテゴリを想起させるかを記述します。

例：

• 「洗練されたミニマリストのサンクチュアリ ― ギャラリーのような広々とした空間、写真を主役にした構成、北欧の穏やかさ」
• 「高密度な生産性ツール ― 情報を最優先し、鋭いエッジと焦点の定まったコントラストを採用」
• 「温かみのある職人ブランド ― 手作り感、自然な質感、ゆったりとした余白」

2.3 カラーパレット

get_project から namedColors を取得できる場合： 信頼できるカラーソースとして使用してください。プライマリ、セカンダリ、ターシャリ、サーフェス階層、エラー状態、反転バリエーションなど、40 種類以上のセマンティックトークンが提供されます。HTML から推測するのではなく、これらをパレットのドキュメントに直接反映してください。

backgroundLight／backgroundDark を取得できる場合： ライトモード／ダークモードの基準背景色として使用してください。

各キーとなる色について、次のように記述してください。

[Descriptive name] ([hex]) — [functional role]

例：

Deep Muted Teal-Navy (#294056) — Primary actions, links, active states
Warm Barely-There Cream (#FCFAFA) — Page background
Charcoal Near-Black (#2C2C2C) — Headlines and product names
Soft Warm Gray (#6B6B6B) — Body copy and metadata

色は 4～6 色を目安にしてください。ライトモードとダークモードの両方がある場合は、背景色をどちらも含めてください。

2.4 タイポグラフィ

• フォントファミリー名（designTheme.font または Tailwind クラスから取得）
• ウェイトのスケール（ディスプレイ、セクション見出し、本文、ラベルで使用するウェイト）
• 特筆すべき文字間隔、行間、サイズの規則

2.5 形状と幾何学的特徴

Tailwind クラスを説明的な表現に置き換えます。

• rounded-full → 「ピル型」
• rounded-lg（12px）→ 「やや丸みのある角」
• rounded-md（8px）→ 「わずかに丸みのある角」
• rounded-none → 「角を丸めない、直線的なエッジ」

2.6 奥行きと高さ

シャドウの有無とスタイルを説明します。

• shadow-none → 「フラットで、シャドウなし」
• shadow-sm → 「ごく柔らかく拡散したシャドウ」
• shadow-lg → 「目立つ浮き上がり」

2.7 レイアウトの原則

• コンテンツの最大幅、グリッド列数、ブレークポイントの動作
• 基本のスペーシング単位（4px／8px のシステム）
• セクションのマージンとパディングのパターン
• タッチターゲットのサイズ（モバイルの場合）

---

ステップ 3：DESIGN.md を作成する

次の構成をそのまま使用してください。

# Design System: [Project Title]
**Project ID:** [numeric ID]
**Device:** [MOBILE / DESKTOP / TABLET / AGNOSTIC]

## 1. Visual Theme & Atmosphere
[2–3 sentences describing the overall aesthetic and mood]

## 2. Color Palette & Roles
- **[Descriptive Name]** ([#hex]) — [Functional role]
- **[Descriptive Name]** ([#hex]) — [Functional role]
[...4–6 colors total]

## 3. Typography Rules
**Primary Font:** [Name] — [One-line character description]

- **Display (H1):** [weight], [size range]
- **Section (H2):** [weight], [size range]
- **Body:** [weight], line-height [value], [size]
- **Labels/Captions:** [weight], [size]

## 4. Component Stylings
- **Buttons:** [shape (Xpx radius)], [color], [padding]; hover [behavior]
- **Cards/Containers:** [roundness (Xpx)], [background], [shadow]; hover [behavior]
- **Inputs/Forms:** [border style], [background], [roundness], [focus behavior]

## 5. Layout Principles
- Max content width: [value]; [grid description]; [column behavior at breakpoints]
- Base spacing unit: [4px/8px]; section margins [range]; touch targets [size]

## 6. Design System Notes for Stitch Generation
[This section is copy-paste ready for new Stitch prompts]

When creating new screens:
- **Atmosphere:** "[Quote the atmosphere description from Section 1]"
- **Colors:** Always use descriptive name + hex (e.g. "[Name] ([#hex])")
- **Shape:** "[Describe buttons and cards using the language from Section 4]"
- **Spacing:** "[Describe the whitespace/density philosophy]"
- **Font:** [Font name] — [one-line descriptor]

---

ステップ 4：統合

作成したものをどのように使うか、ユーザーに伝えてください。

## DESIGN.md created

Saved to: ./DESIGN.md

**How to use it:**

1. **More Stitch screens:** Copy Section 6 into the DESIGN SYSTEM block of your next Stitch prompt.
   This keeps every new screen visually consistent with your existing design.

2. **Multi-page build with stitch-loop:** Include Section 6 in every `next-prompt.md` baton file.

3. **Code conversion:** Hand off to `stitch-design-system` when you're ready to generate
   `design-tokens.css` and `tailwind-theme.css` for your framework.

---

ベストプラクティス

• 技術的な表現より具体的な表現を優先： 単に「青」ではなく、「深海を思わせるセラリアン（#0077B6）」とします。
• 機能上の役割が重要： 色の名前だけでなく、どのような役割を果たすかも説明してください。
• セクション 6 が要です： これはコピーして貼り付けるブロックであり、以後作成するすべての画面に一貫性をもたらします。
• 正確さを重視： 必ず正確な 16 進コードを記載してください。「やや温かみのあるベージュ」のような曖昧な表現では役に立ちません。

よくある落とし穴

• rounded-xl を「十分に丸みのある角（12px）」に置き換えず、ドキュメントにそのまま残す
• 機能上の役割を示さずに色を列挙する
• フォントのウェイトスケールを省略する（「Manrope」とだけ記載しても、400 と 600 をいつ使うかはわかりません）
• 実際の 16 進コードを記載せずにセクション 6 を作成する（Stitch で使うには役に立ちません）

---

参考資料

• examples/usage.md — 実例
• examples/DESIGN.md — 家具の EC サイト向けの完全な出力例
• docs/color-prompt-guide.md — アイデアの参考にできる、すぐに使える 8 種類のカラーパレット
• scripts/fetch-stitch.sh — GCS URL から HTML を安定してダウンロードするスクリプト