Taste
ありがちな AI 美学を積極的に防ぐ DESIGN.md を生成します — 調整済みのカラー、個性的なタイポグラフィ、明示的なアンチパターン。
この優れた Agent Skill は、コミュニティメンバーの Leon Lin 氏によって寄稿されました。
多くの AI 生成インターフェースは、彩度が高すぎる紫のグラデーション、中央揃えの 3 列カード、Inter フォント、捏造された統計といった同じ見た目に収束します。taste-design スキルは、これらのパターンを明示的に禁止し、プレミアムな基準を強制するデザインシステムを生成します。
taste-design を使う場面
| スキル | 役割 | 思想 |
|---|---|---|
extract-design-md | ソースコードからトークンを逆算する | 記述的 — 存在するものを文書化する |
design-md | 既存の Stitch 画面からトークンを抽出する | 記述的 — 存在するものを文書化する |
taste-design | コンセプトからデザインシステムを生成する | 規範的 — プレミアム基準を強制する |
ゼロから始めて、AI 生成の平均を超えるデザインシステムが欲しいときに taste-design を使います。
プレミアムな DESIGN.md を生成する
出力には、テイストスペクトルで調整された視覚的雰囲気、厳格なアンチパターンルール、調整済みのカラーサイエンス、明確な主張のあるタイポグラフィ、スプリング物理に基づくモーション仕様が含まれます。
カラーの調整
カラーは HSL を使用し、意図的に彩度を抑えています。これは印刷デザインの原則を反映しています。洗練されたパレットは、大きな面には低彩度の色を使い、小さく意図的なアクセントに高い彩度を取っておきます。
スキルが強制するルール:
- アクセントの彩度は 80% 未満に保つ — 彩度が高すぎるネオンは不可
- 純粋な黒(
#000000)は禁止 — Zinc-950(#18181B)のようなオフブラックを使用する - アクセントカラーは最大 1 色 — 視覚的な規律を強制する
パレットを調整する
タイポグラフィ
スキルはタイプスケールに音楽の音程比を使用します。音楽の音程が自然に響くのと同じ調和関係です:
| 音程 | 比率 | 特性 |
|---|---|---|
| 短三度 | 1.200 | コンパクトで情報密度が高い |
| 長三度 | 1.250 | バランスが良く汎用的 |
| 完全四度 | 1.333 | ゆとりがあり編集的な |
| 黄金比 | 1.618 | ドラマチックでインパクトが大きい |
フォントの組み合わせルール:
- プレミアムな文脈では
Interは禁止 — あまりに普及しすぎている - 推奨サンセリフ:
Geist、Outfit、Cabinet Grotesk、Satoshi - 推奨モダンセリフ:
Fraunces、Gambarino、Editorial New - ダッシュボードの制約:サンセリフ + モノスペースのみ(
Geist+Geist Mono)
空間のリズム
すべてのマージン、パディング、ギャップは基本単位(通常 4px または 8px)の倍数です。これにより、非対称であっても目に秩序立って映る空間関係が生まれます。
密度を調整する
テイストスペクトルは 1(ゆとりがある)から 10(コックピットのように高密度)までの範囲です:
密度を高くすると、整列のためのモノスペース数字、カードの代わりの border-top ディバイダー、より詰まった余白比率、影ではなくタイポグラフィで区別されるフラットな面が有効になります。
テイストの採点基準
DESIGN.md を 4 つの観点で評価します。プレミアムなデザインは、4 つすべてで 7 以上を獲得します:
| 観点 | 測定内容 |
|---|---|
| カラーの洗練度 | パレットの抑制、彩度の規律、コントラストの意図性 |
| タイポグラフィの技巧 | フォントの独自性、スケールの調和、ウェイトの階層 |
| 空間の一貫性 | 基本単位の一貫性、リズム、レスポンシブスケーリング |
| 視覚的階層 | 明確な primary/secondary/tertiary のレベル、情報アーキテクチャ |
いずれかの観点が弱いと感じる場合:
アンチパターンチェックリスト
仕上げる前に、これらが存在しないことを確認します:
- ❌ デザインに絵文字を使わない
- ❌
Interフォントを使わない - ❌ 純粋な黒(
#000000)を使わない - ❌ ネオンの外側グローシャドウを使わない
- ❌ 3 列均等のカードレイアウトを使わない
- ❌ 捏造された指標(「99.98% UPTIME」「124ms AVG. RESPONSE」)を使わない
- ❌ AI コピーライティングの決まり文句(「Elevate」「Seamless」「Unleash」)を使わない
- ❌ 埋め草の UI テキスト(「Scroll to explore」、跳ねるシェブロン)を使わない
- ❌
LABEL // YEAR形式のパターンを使わない
原文: https://stitch.withgoogle.com/docs/skills/taste/
本ページは Google Stitch 公式ドキュメントの翻訳です。原文の著作権は Google LLC に帰属します。本サイトは独立した非公式の翻訳です。