taste-design

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

概要

このスキルは、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）

デフォルトの基準値：創造性 9、変化の度合い 8、モーション 6、情報密度 5。ユーザーの雰囲気の説明に応じて動的に調整します。

2. カラーパレットを割り当てる

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

必須の制約：

• アクセントカラーは最大 1 色。彩度は 80％未満
• 「AI のパープル／ブルーネオン」風のデザインは厳禁です。紫色のボタンの発光やネオンのグラデーションは禁止します
• 高コントラストの単一アクセントカラーを使い、ベースには完全なニュートラルカラー（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%）は使用しない
• データや統計情報を捏造しない — ユーザーが明示的に提示していない指標、パフォーマンス数値、稼働率、応答時間、その他のデータを絶対に生成しない。「99.98% UPTIME SLA」、「124ms AVG. RESPONSE」、「18.5k DEPLOY CYCLES」は、AI が作り出した埋め草です。実際のデータがない場合は、数値をでっち上げず、[metric] のような明確なプレースホルダーラベルを使用する
• 偽のシステム／指標セクションは使用しない — 捏造したデータを埋め込んだ「SYSTEM PERFORMANCE METRICS」、「KEY STATISTICS」、「BY THE NUMBERS」のダッシュボードカードは禁止です
• LABEL // YEAR 形式は使用しない — 「SYSTEM // 2024」、「METRICS // 2025」は、実際のデザインタイポグラフィではなく、AI が安易に使うパターンです
• 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）」と記述する
• 用途を明確にする： 各要素の用途を説明する
• 一貫性を保つ： ドキュメント全体で同じ用語を使用する
• 正確に記述する： 正確な 16 進数コード、rem 値、ピクセル値を括弧内に記載する
• 明確な方針を示す： これは中立的なテンプレートではなく、特定の上質な美的スタイルを徹底するものです

成功のためのヒント

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

よくある落とし穴

• 技術用語を説明せずに使う（「ゆったりとした丸みのある角」ではなく「rounded-xl」と書く）
• 16 進数コードを省略したり、説明的な名称だけを使ったりする
• デザイン要素の機能的な役割を忘れる
• 雰囲気の説明が曖昧すぎる
• アンチパターンの一覧を無視する — これらが出力を上質にする要素です
• キュレーションされた美的スタイルを徹底せず、ありきたりな「無難な」デザインに頼る