Stitch Design Taste — Semantic Design System Skill

概要

このスキルは Google Stitch スクリーン生成用に最適化された DESIGN.md ファイルを生成します。実戦で検証されたアンチスロップフロントエンドエンジニアリング指令を、Stitch のネイティブセマンティックデザイン言語に変換します。Stitch の AI エージェントが解釈できる自然言語ルールと正確な値のペアで、プレミアム で非ジェネリックなインターフェースを生成するよう支援します。

生成された DESIGN.md は、新しいスクリーン生成をキュレーションされた高品質デザイン言語に合わせてプロンプトする際の唯一の情報源として機能します。Stitch はデザインを**「Visual Descriptions」**を通じて解釈し、具体的な色値、タイポグラフィ仕様、コンポーネント動作で支援されます。

前提条件

• labs.google.com/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)

デフォルト基準: 創造性 9、バリエーション 8、モーション 6、密度 5。ユーザーのバイブ説明に基づいて動的に調整します。

2. カラーパレットをマッピングする

各色について提供: 説明的な名前 + 16進数コード + 機能的な役割。

必須制約:

• 最大 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 を超える場合、すべての数字は Monospace を使用

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

ヒーローセクションは最初の印象であり、創造的で印象的で、決してジェネリックではない必要があります:

• インラインイメージタイポグラフィ: ヘッドラインの単語または文字の間に小さく、コンテキストに応じた写真やビジュアルを直接埋め込みます。画像はタイプハイトでインラインに配置され、角丸で、ビジュアルな句読点として機能します。これがシグネチャ創造技法です
• 重複なし: テキストは画像または他のテキストと決して重複しない。各要素が独自のクリーンな空間ゾーンを占有
• フィラーテキストなし: 「スクロールして探索」、「スワイプダウン」、スクロール矢印アイコン、バウンスするシェブロンは禁止。コンテンツがユーザーを自然に引き込むべき
• 非対称構造: バリエーションが 4 を超える場合、中央配置のヒーロレイアウトは禁止
• CTA の抑制: 最大 1 つのプライマリ CTA。「詳細を学ぶ」リンクなし

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

各コンポーネントタイプについて、形状、色、シャドウ深度、インタラクション動作を説明:

• ボタン: アクティブ状態での触覚的なプッシュフィードバック。ネオン外部グローなし。カスタムマウスカーソルなし
• カード: 高さが階層を通信する場合のみ使用。背景色合いでシャドウを着色。高密度レイアウトの場合、カードを上部ボーダー区切り線または負のスペースに置き換え
• 入力/フォーム: ラベルは入力の上、ヘルパーテキストはオプション、エラーテキストは下。標準的なギャップ間隔
• ローディング状態: レイアウト寸法に一致するスケルタルローダー — ジェネリック円形スピナーなし
• 空の状態: データを入力する方法を示す構成
• エラー状態: クリアで、インラインエラー報告

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

• 重複する要素なし — すべての要素が独自のクリーンな空間ゾーンを占有。絶対配置コンテンツスタッキングなし
• 中央配置ヒーローセクションはバリエーションが 4 を超える場合は禁止 — スプリット画面、左揃え、非対称ホワイトスペースを強制
• ジェネリック「3 つの等しいカード (水平)」機能行は禁止 — 2 列ジグザグ、非対称グリッド、または水平スクロールを使用
• CSS Grid 優先 (Flexbox 計算ではなく) — calc() パーセンテージハックは使用しない
• max-width 制約を使用してレイアウトを含める (例: 1400px 中央)
• フルハイトセクションは min-h-[100dvh] を使用 — h-screen を使用しない (iOS Safari 壊滅的ジャンプ)

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

すべてのデザインはすべてのビューポートで機能する必要があります:

• モバイルファーストコラプス (< 768px): すべてのマルチカラムレイアウトは単一カラムに折りたたまれます。例外なし
• 水平スクロールなし: モバイルの水平オーバーフロー は致命的な欠陥
• タイポグラフィスケーリング: clamp() を使用してヘッドラインをスケール。ボディテキスト最小 1rem/14px
• タッチターゲット: すべてのインタラクティブ要素は最小 44px タップターゲット
• 画像動作: インラインタイポグラフィ画像 (単語間の写真) はモバイルでヘッドラインの下にスタック
• ナビゲーション: デスクトップ水平ナビゲーションはクリーンなモバイルメニューに折りたたまれます
• スペーシング: 垂直セクションギャップは比例して削減 (clamp(3rem, 8vw, 6rem))

8. モーション哲学をエンコードする

• スプリング物理デフォルト: stiffness: 100, damping: 20 — プレミアム、重厚感のある感覚。線形イージングなし
• 永続的マイクロインタラクション: すべてのアクティブコンポーネントは無限ループ状態 (Pulse、Typewriter、Float、Shimmer) を持つべき
• 段階的な構成: リストをインスタントにマウントしない — ウォーターフォール表示には連鎖的な遅延を使用
• パフォーマンス: transform と opacity 経由のみでアニメーション。top、left、width、height をアニメーションしない。グレイン/ノイズフィルターは固定疑似要素のみ

9. アンチパターンをリストアップする

これらを DESIGN.md の明示的な「NEVER DO」ルールとしてエンコード:

• 絶対にないし場所
• 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 テキストなし: 「スクロールして探索」、「スワイプダウン」、スクロール矢印、バウンスシェブロン
• 破損した 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.)

ベストプラクティス

• 説明的であること: 「Deep Charcoal Ink (#18181B)」 — 単に「dark text」ではなく
• 機能的であること: 各要素が何に使用されるかを説明
• 一貫性があること: ドキュメント全体で同じ用語を使用
• 正確であること: 正確な16進数コード、rem 値、ピクセル値を括弧内に含む
• 独創的であること: これはニュートラルテンプレートではなく、特定のプレミアム美学を強制

成功のためのヒント

1. 雰囲気から始める — 詳細を記述する前にバイブを理解する
2. パターンを探す — 一貫したスペーシング、サイジング、スタイリングを特定
3. セマンティック的に考える — 外観ではなく、目的で色に名前を付ける
4. 階層を考慮する — ビジュアルウェイトが重要性をどのように通信するかを記録
5. 禁止をエンコードする — アンチパターンはルール自体と同じくらい重要

一般的なピットフォール (回避すべき)

• 翻訳なしで技術用語を使用 (「rounded-xl」は「generously rounded corners」ではなく)
• 16進数コードを省略するか、説明的な名前のみを使用
• デザイン要素の機能的な役割を忘れる
• 雰囲気説明が曖昧すぎる
• アンチパターンリストを無視する — これらがプレミアム出力の理由です
• キュレーションされた美学を強制する代わりにジェネリック「安全な」デザインにデフォルト