leonxlnx/taste-skill

Stitch Design Taste — 意味論的デザインシステムスキル

概要

このスキルは、Google Stitchの画面生成に最適化された DESIGN.md ファイルを生成します。戦術的に証明された「アンチ・スロップ」フロントエンドエンジニアリングの指示を、Stitchのネイティブな意味論的デザイン言語（説明的で自然言語によるルールと、StitchのAIエージェントが解釈してプレミアムで非ジェネリックなインターフェースを生成するための正確な値）に変換します。

生成された DESIGN.md は、厳選された高自由度のデザイン言語に沿った新しい画面をStitchにプロンプトするための単一の真実源として機能します。Stitchは、特定のカラー値、タイポグラフィ仕様、コンポーネント動作に裏付けられた 「ビジュアル記述」 を通じてデザインを解釈します。

前提条件

• Google Stitchへのアクセス（labs.google/stitch）
• オプション: Cursor、Antigravity、またはGemini CLIとのプログラム統合のためのStitch MCPサーバー

目標

以下の内容をエンコードした 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パープル/ブルーネオン」の美学は厳密に禁止 — 紫色のボタンのグロー、ネオングラデーションは禁止
• 絶対的なニュートラルベース（Zinc/Slate）を高コントラストの単一アクセントと共に使用
• 出力全体で一貫したパレットを使用 — 暖色/寒色のグレーの変動は禁止
• 純粋な黒 (#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列ジグザグ、非対称グリッド、または水平スクロールを使用
• CSS GridをFlexboxの計算よりも優先 — calc() のパーセンテージハックは決して使用しない
• 最大幅制約（例：1400px中央揃え）を使用してレイアウトをコンテナに収める
• 全高セクションは min-h-[100dvh] を使用 — h-screen は決して使用しない（iOS Safariでの壊滅的なジャンプ防止のため）

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

すべてのデザインがすべてのビューポートで動作する必要がある:

• モバイルファーストの折り畳み (< 768px): すべてのマルチカラムレイアウトはシングルカラムに折り畳まれる。例外なし
• 水平スクロール禁止: モバイルでの水平方向のオーバーフローは重大な失敗
• タイポグラフィのスケーリング: 見出しは 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列均等カードレイアウトを使用しない
• 汎用的な名前（「山田太郎」、「株式会社A」、「Nexus」）を使用しない
• 偽の丸数字（99.99%、50%）を使用しない
• AIコピーライティングの決まり文句（「昇華」、「シームレス」、「解き放つ」、「次世代」）を使用しない
• フィラーUIテキスト: 「スクロールして探索」、「スワイプダウン」、スクロール矢印、跳ねるシェブロンを使用しない
• 壊れたUnsplashリンクを使用しない — picsum.photos またはSVGアバターを使用
• 中央揃えのヒーローセクションを使用しない（高変化プロジェクトの場合）

出力形式（DESIGN.md 構造）

# デザインシステム: [プロジェクトタイトル]

## 1. ビジュアルテーマと雰囲気
（ムード、密度、変化、モーションの強度を想起的に記述。
例：「抑制された、ギャラリーのように風通しの良いインターフェースで、自信に満ちた非対称レイアウト
と流動的なばね物理モーションを備えています。雰囲気は臨床的でありながら温かみがあります — 
まるで明るい建築スタジオのように。」）

## 2. カラーパレットと役割
- **キャンバスホワイト** (#F9FAFB) — プライマリ背景サーフェス
- **ピュアサーフェス** (#FFFFFF) — カードとコンテナの塗りつぶし
- **チャコールインク** (#18181B) — プライマリテキスト、Zinc-950の深み
- **ミュートスチール** (#71717A) — セカンダリテキスト、説明、メタデータ
- **ウィスパーボーダー** (rgba(226,232,240,0.5)) — カードのボーダー、1pxの構造線
- **[アクセント名]** (#XXXXXX) — CTA、アクティブ状態、フォーカスリング用の単一アクセント
（アクセントは最大1つ。彩度 < 80%。パープル/ネオンは禁止。）

## 3. タイポグラフィルール
- **表示用:** [フォント名] — トラッキングを詰め、コントロールされたスケール、ウェイト駆動の階層
- **本文:** [フォント名] — 余裕のある行送り、65ch最大幅、ニュートラルなセカンダリカラー
- **等幅:** [フォント名] — コード、メタデータ、タイムスタンプ、高密度の数字に使用
- **禁止:** Inter、プレミアムコンテキストでの汎用システムフォント。ダッシュボードでのセリフフォントは禁止。

## 4. コンポーネントスタイリング
* **ボタン:** フラット、外側のグローなし。アクティブ時に触覚的な -1px の移動。プライマリはアクセント塗りつぶし、セカンダリはゴースト/アウトライン。
* **カード:** ゆったりとした角丸（2.5rem）。拡散したウィスパーシャドウ。エレベーションが階層に役立つ場合にのみ使用。高密度: 上部ボーダーの区切り線に置き換え。
* **入力欄:** ラベルは上部、エラーは下部。アクセントカラーのフォーカスリング。フローティングラベルは禁止。
* **ローダー:** 正確なレイアウト寸法に一致するスケルトンシャイマー。円形スピナーは禁止。
* **空の状態:** 構成された、イラストを使ったコンポジション — 単なる「データがありません」テキストではない。

## 5. レイアウト原則
（グリッドファーストのレスポンシブアーキテクチャ。ヒーローセクションの非対称分割。
768px未満での厳格なシングルカラム折り畳み。最大幅コンテナ。
フレックスボックスのパーセンテージ計算なし。余裕のある内部パディング。）

## 6. モーションとインタラクション
（すべてのインタラクティブ要素にばね物理。段階的カスケード表示。
アクティブなダッシュボードコンポーネントの常時マイクロループ。ハードウェアアクセラレーションされた
トランスフォームのみ。CPU負荷の高いアニメーション用の分離されたクライアントコンポーネント。）

## 7. アンチパターン（禁止）
（禁止されたパターンの明示的なリスト: 絵文字なし、Interなし、純粋な黒なし、
ネオングローなし、3列均等グリッドなし、AIコピーライティングの決まり文句なし、
汎用的なプレースホルダー名なし、壊れた画像リンクなし。）

ベストプラクティス

• 説明的に: 「ダークテキスト」ではなく「ディープチャコールインク (#18181B)」
• 機能的に: 各要素が何に使用されるかを説明する
• 一貫性を保つ: ドキュメント全体で同じ用語を使用する
• 正確に: 正確な16進数コード、rem値、ピクセル値を括弧内に含める
• 意見を持つ: これは中立的なテンプレートではなく、特定のプレミアムな美学を強制する

成功のためのヒント

1. 雰囲気から始める — トークンを詳細化する前に雰囲気を理解する
2. パターンを探す — 一貫したスペーシング、サイジング、スタイリングを特定する
3. 意味論的に考える — 色を外観だけでなく目的で命名する
4. 階層を考慮する — ビジュアルウェイトがどのように重要性を伝えるかを文書化する
5. 禁止事項をエンコードする — アンチパターンはルール自体と同じくらい重要である

避けるべき一般的な落とし穴

• 翻訳なしで技術的な専門用語を使用する（「ゆったりとした角丸」ではなく「rounded-xl」）
• 16進数コードを省略したり、説明的な名前のみを使用する
• デザイン要素の機能的な役割を忘れる
• 雰囲気の説明があいまいすぎる
• アンチパターンリストを無視する — これらが出力をプレミアムにする
• 厳選された美学を強制する代わりに、汎用的な「安全な」デザインをデフォルトにする