stitch-design-taste

Stitch Design Taste — セマンティックデザインシステムスキル

概要

このスキルは、Google Stitch の画面生成に最適化された DESIGN.md ファイルを生成します。実戦で検証されたアンチ・スロップなフロントエンドエンジニアリングの指針を、Stitch がネイティブに解釈できるセマンティックなデザイン言語へと変換します。具体的には、Stitch の AI エージェントが解釈し、ありきたりではない高品質なインターフェースを生成できるよう、正確な値を組み合わせた、説明的で自然言語によるルールを作成します。

生成された DESIGN.md は、厳選された主体性の高いデザイン言語に沿った新しい画面を Stitch に生成させるための、唯一の信頼できる情報源として機能します。Stitch は、特定のカラー値、タイポグラフィの仕様、コンポーネントの動作に裏付けられた**「ビジュアルの説明」**を通じてデザインを解釈します。

前提条件

• labs.google/stitch から Google Stitch にアクセスできること
• 任意：Cursor、Antigravity、または Gemini CLI とプログラムで連携するための Stitch MCP Server

目標

以下を定義する DESIGN.md ファイルを生成します。

1. ビジュアルの雰囲気 — ムード、密度、デザイン哲学
2. カラーの調整 — ニュートラルカラー、アクセント、使用禁止パターンとその16進コード
3. タイポグラフィの構成 — フォントスタック、スケールの階層、アンチパターン
4. コンポーネントの動作 — インタラクション状態を含むボタン、カード、入力欄
5. レイアウトの原則 — グリッドシステム、スペーシングの考え方、レスポンシブ戦略
6. モーションの哲学 — アニメーションエンジンの仕様、スプリング物理、継続的なマイクロインタラクション
7. アンチパターン — 使用禁止の AI デザインの典型例を明示したリスト

分析と統合の手順

1. 雰囲気を定義する

対象プロジェクトの目的を評価します。デザインのテイストを表す形容詞を使用します。

• 密度：「アートギャラリーのように開放的」（1〜3）→「日常的なアプリのようにバランスが取れている」（4〜7）→「コックピットのように高密度」（8〜10）
• 変化：「予測しやすく対称的」（1〜3）→「ずらしのある非対称」（4〜7）→「アーティスティックでカオス」（8〜10）
• モーション：「静的で控えめ」（1〜3）→「滑らかな CSS」（4〜7）→「映画のような振り付け」（8〜10）

デフォルトの基準値：変化 8、モーション 6、密度 4。ユーザーが説明する雰囲気に応じて動的に調整します。

2. カラーパレットを設定する

各色に、説明的な名称＋16進コード＋機能上の役割を指定します。

必須条件：

• アクセントカラーは最大1色。彩度は80％未満
• 「AI パープル／ブルー・ネオン」の美観は厳禁です。紫色に光るボタンやネオンのグラデーションは禁止します
• 高コントラストのアクセントカラーを1色だけ使用し、ベースには完全なニュートラルカラー（Zinc／Slate）を使用します
• 出力全体で一貫したパレットを使用します。暖色系と寒色系のグレーを混在させないでください
• 純黒（#000000）は使用せず、オフブラック、Zinc-950、またはチャコールを使用します

3. タイポグラフィのルールを定める

• **ディスプレイ／見出し：**字間を詰め、スケールを適切に調整します。大げさにせず、極端に大きなサイズだけに頼らず、ウェイトと色で階層を表現します
• **本文：**ゆったりとした行送りにし、1行あたり最大65文字とします
• **フォントの選定：**上質またはクリエイティブなコンテキストでは Inter を使用禁止とします。個性を際立たせるため、Geist、Outfit、Cabinet Grotesk、Satoshi を使用します
• **セリフ体の禁止：**一般的なセリフ体フォント（Times New Roman、Georgia、Garamond、Palatino）は使用禁止です。エディトリアルまたはクリエイティブなコンテキストでセリフ体が必要な場合は、特徴のあるモダンなセリフ体（Fraunces、Gambarino、Editorial New、Instrument Serif）のみを使用します。ダッシュボードやソフトウェア UI では、セリフ体を常に禁止します
• **ダッシュボードの制約：**サンセリフ体の組み合わせのみを使用します（Geist + Geist Mono または Satoshi + JetBrains Mono）
• **高密度の場合の例外：**密度が7を超える場合、すべての数値に等幅フォントを使用します

4. ヒーローセクションを定義する

ヒーローは第一印象を決めるものであり、創造的で目を引き、ありきたりなものにならないようにします。

• インライン画像タイポグラフィ： 見出しの単語や文字の間に、小さく文脈に合った写真やビジュアルを直接埋め込みます。画像は文字の高さに合わせてインラインで配置し、角を丸くして、視覚的な句読点として機能させます。これが特徴的なクリエイティブ手法です
• 重なり禁止： テキストを画像や他のテキストに重ねてはいけません。すべての要素に、それぞれ明確な空間を割り当てます
• 埋め草テキスト禁止： 「スクロールしてご覧ください」「下にスワイプ」、スクロール矢印アイコン、跳ねるシェブロンは禁止です。コンテンツ自体が自然にユーザーを引き込むようにします
• 非対称の構成： ばらつきが4を超える場合、中央揃えのヒーローレイアウトは禁止です
• CTAは控えめに： 主要CTAは最大1つにします。「詳細はこちら」のような副次的なリンクは設けません

5. コンポーネントのスタイルを説明する

各コンポーネントの種類について、形状、色、影の深さ、インタラクションの動作を説明します。

• ボタン： アクティブ状態で、押し込まれるような触覚フィードバックを与えます。ネオンの外側グローは使いません。カスタムマウスカーソルも使いません
• カード： 高さの違いで階層を表現できる場合にのみ使用します。影の色合いは背景の色相に合わせます。高密度のレイアウトでは、カードの代わりに上罫線の区切りや余白を使います
• 入力欄／フォーム： ラベルは入力欄の上に配置し、補足テキストは任意、エラーテキストは下に配置します。間隔は標準的なものにします
• 読み込み状態： レイアウトに合った寸法のスケルトンローダーを使います。一般的な円形のスピナーは使いません
• 空の状態： データの入力方法が伝わるよう、構成された表示にします
• エラー状態： 明確なエラー表示をインラインで行います

6. レイアウトの原則を定義する

• 要素を重ねてはいけません。すべての要素に、それぞれ明確な空間を割り当てます。絶対配置したコンテンツを積み重ねてはいけません
• ばらつきが4を超える場合、中央揃えのヒーローセクションは禁止です。画面分割、左揃え、または非対称の余白を使います
• 横並びの「同じ幅のカード3枚」による一般的な機能紹介の行は禁止です。2列のジグザグ配置、非対称グリッド、または横スクロールを使います
• Flexboxの計算よりCSS Gridを優先します。calc()を使った割合調整のハックは使いません
• 最大幅の制約（例：中央揃えの1400px）を使ってレイアウトを収めます
• 高さが画面いっぱいのセクションにはmin-h-[100dvh]を使います。h-screenは使いません（iOS Safariで致命的なジャンプが発生します）

7. レスポンシブルールを定義する

すべてのデザインは、あらゆるビューポートで適切に動作する必要があります。

• モバイルファーストでの折りたたみ（768px未満）： 複数列のレイアウトはすべて1列に折りたたみます。例外はありません
• 横スクロール禁止： モバイルで横方向にはみ出すことは重大な不具合です
• タイポグラフィの拡大縮小： 見出しはclamp()で拡大縮小します。本文テキストの最小サイズは1rem／14pxです
• タッチターゲット： すべてのインタラクティブ要素のタップ領域を最低44pxにします
• 画像の動作： インライン画像タイポグラフィの画像（単語の間に配置された写真）は、モバイルでは見出しの下に配置します
• ナビゲーション： デスクトップの横型ナビゲーションは、シンプルなモバイルメニューに折りたたみます
• 間隔： セクション間の縦方向の間隔は、比率に応じて縮小します（clamp(3rem, 8vw, 6rem)）

8. モーションの方針を定める

• デフォルトはスプリング物理： stiffness: 100, damping: 20に設定し、高級感と重量感を出します。リニアなイージングは使いません
• 継続的なマイクロインタラクション： アクティブなコンポーネントには、無限ループの状態（パルス、タイプライター、浮遊、きらめき）を持たせます
• 段階的な演出： リストを一度に表示してはいけません。カスケード遅延を使って、滝のように順次表示します
• パフォーマンス： アニメーションにはtransformとopacityのみを使います。top、left、width、heightはアニメーションさせません。グレイン／ノイズフィルターは固定の疑似要素にのみ適用します

9. アンチパターン（AI らしさが出る要素）を列挙する

以下を DESIGN.md に明確な「絶対にしないこと」のルールとして記載します。

• 絵文字は一切使用しない
• Inter フォントは使用しない
• 一般的なセリフフォント（Times New Roman、Georgia、Garamond）は使用しない — 必要な場合に限り、個性的でモダンなセリフフォントを使用する
• 純粋な黒（#000000）は使用しない
• ネオンや外側に光るシャドウは使用しない
• 彩度が高すぎるアクセントカラーは使用しない
• 大きな見出しでグラデーションテキストを過剰に使用しない
• マウスカーソルをカスタマイズしない
• 要素を重ねない — 常に要素間を明確に分離する
• 同じ大きさのカードを3列に並べるレイアウトは使用しない
• 一般的な名前（「John Doe」「Acme」「Nexus」）は使用しない
• 実態のないキリのいい数値（99.99%、50%）は使用しない
• AI らしいコピーライティングの決まり文句（「Elevate」「Seamless」「Unleash」「Next-Gen」）は使用しない
• 中身のない UI テキスト（「Scroll to explore」「Swipe down」）、スクロール矢印、バウンドするシェブロンは使用しない
• 壊れた Unsplash リンクは使用しない — picsum.photos または SVG アバターを使用する
• 中央揃えのヒーローセクションは使用しない（変化の幅が大きいプロジェクトの場合）

出力形式（DESIGN.md の構成）

# Design System: [Project Title]

## 1. Visual Theme & Atmosphere
(Evocative description of the mood, density, variance, and motion intensity.
Example: "A restrained, gallery-airy interface with confident asymmetric layouts
and fluid spring-physics motion. The atmosphere is clinical yet warm — like a
well-lit architecture studio.")

## 2. Color Palette & Roles
- **Canvas White** (#F9FAFB) — Primary background surface
- **Pure Surface** (#FFFFFF) — Card and container fill
- **Charcoal Ink** (#18181B) — Primary text, Zinc-950 depth
- **Muted Steel** (#71717A) — Secondary text, descriptions, metadata
- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, 1px structural lines
- **[Accent Name]** (#XXXXXX) — Single accent for CTAs, active states, focus rings
(Max 1 accent. Saturation < 80%. No purple/neon.)

## 3. Typography Rules
- **Display:** [Font Name] — Track-tight, controlled scale, weight-driven hierarchy
- **Body:** [Font Name] — Relaxed leading, 65ch max-width, neutral secondary color
- **Mono:** [Font Name] — For code, metadata, timestamps, high-density numbers
- **Banned:** Inter, generic system fonts for premium contexts. Serif fonts banned in dashboards.

## 4. Component Stylings
* **Buttons:** Flat, no outer glow. Tactile -1px translate on active. Accent fill for primary, ghost/outline for secondary.
* **Cards:** Generously rounded corners (2.5rem). Diffused whisper shadow. Used only when elevation serves hierarchy. High-density: replace with border-top dividers.
* **Inputs:** Label above, error below. Focus ring in accent color. No floating labels.
* **Loaders:** Skeletal shimmer matching exact layout dimensions. No circular spinners.
* **Empty States:** Composed, illustrated compositions — not just "No data" text.

## 5. Layout Principles
(Grid-first responsive architecture. Asymmetric splits for Hero sections.
Strict single-column collapse below 768px. Max-width containment.
No flexbox percentage math. Generous internal padding.)

## 6. Motion & Interaction
(Spring physics for all interactive elements. Staggered cascade reveals.
Perpetual micro-loops on active dashboard components. Hardware-accelerated
transforms only. Isolated Client Components for CPU-heavy animations.)

## 7. Anti-Patterns (Banned)
(Explicit list of forbidden patterns: no emojis, no Inter, no pure black,
no neon glows, no 3-column equal grids, no AI copywriting clichés,
no generic placeholder names, no broken image links.)

ベストプラクティス

• 具体的に記述する： 単に「暗いテキスト」とするのではなく、「ディープチャコールインク（#18181B）」と記述します
• 機能を説明する： 各要素の用途を説明します
• 一貫性を保つ： ドキュメント全体で同じ用語を使います
• 正確に記述する： 正確な HEX コードや rem 値、ピクセル値を括弧内に記載します
• 明確な指針を示す： 中立的なテンプレートではなく、特定の上質な美的感覚を徹底します

成功のためのヒント

1. 雰囲気から始める — トークンを詳しく記述する前に、全体の印象を把握します
2. パターンを探す — 一貫した余白、サイズ、スタイルを特定します
3. 意味を考える — 色は見た目だけでなく、用途に基づいて名前を付けます
4. 階層を考慮する — 視覚的な重みが重要度をどう伝えるかを記述します
5. 禁止事項を明記する — アンチパターンはルールと同じくらい重要です

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

• 技術用語を翻訳せずに使う（「余裕をもって丸みをつけた角」ではなく「rounded-xl」とするなど）
• HEX コードを省略したり、説明的な名前だけを使ったりする
• デザイン要素の機能的な役割を記述し忘れる
• 雰囲気の説明が曖昧すぎる
• アンチパターンのリストを無視する — これらが出力を上質にする要素です
• 厳選された美的感覚を徹底せず、無難で一般的なデザインに頼る