stitch-design-taste

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

概要

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

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

前提条件

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

目標

以下の内容を定義した DESIGN.md ファイルを生成します。

1. ビジュアルの雰囲気 — ムード、密度、デザイン哲学
2. カラー調整 — ニュートラルカラー、アクセントカラー、使用禁止パターンと HEX コード
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. カラーパレットを設定する

各色には、説明的な名前、HEX コード、機能上の役割を指定します。

必須制約：

• アクセントカラーは最大 1 色。彩度は 80％未満
• 「AI パープル／ブルーネオン」の美的表現は厳禁です。紫のボタンの発光やネオングラデーションは使いません
• 高コントラストの単一アクセントカラーと、完全なニュートラルカラーのベース（Zinc／Slate）を使います
• 出力全体でパレットは 1 種類に統一します。暖色系と寒色系のグレーを混在させません
• 純粋な黒（#000000）は使いません。Off-Black、Zinc-950、または Charcoal を使います

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 コードを省略したり、説明的な名前だけを使ったりする
• デザイン要素の機能的な役割を記述し忘れる
• 雰囲気の説明が曖昧すぎる
• アンチパターンのリストを無視する — これらが出力を上質にする要素です
• 厳選された美的感覚を徹底せず、無難で一般的なデザインに頼る