Taste

ありがちな AI 美学を積極的に防ぐ DESIGN.md を生成します — 調整済みのカラー、個性的なタイポグラフィ、明示的なアンチパターン。

この優れた Agent Skill は、コミュニティメンバーの Leon Lin 氏によって寄稿されました。

Leonxlnx / taste-skill Star AI が構築したインターフェースをアップグレードするポータブルな Agent Skills。レイアウト、タイポグラフィ、モーション、余白を強化します。 Markdown Leonxlnx/taste-skill

多くの AI 生成インターフェースは、彩度が高すぎる紫のグラデーション、中央揃えの 3 列カード、Inter フォント、捏造された統計といった同じ見た目に収束します。taste-design スキルは、これらのパターンを明示的に禁止し、プレミアムな基準を強制するデザインシステムを生成します。

taste-design を使う場面

スキル役割思想
extract-design-mdソースコードからトークンを逆算する記述的 — 存在するものを文書化する
design-md既存の Stitch 画面からトークンを抽出する記述的 — 存在するものを文書化する
taste-designコンセプトからデザインシステムを生成する規範的 — プレミアム基準を強制する

ゼロから始めて、AI 生成の平均を超えるデザインシステムが欲しいときに taste-design を使います。

プレミアムな DESIGN.md を生成する

PROMPT
Generate a premium DESIGN.md for a high-density financial analytics dashboard using the taste-design skill.

出力には、テイストスペクトルで調整された視覚的雰囲気、厳格なアンチパターンルール、調整済みのカラーサイエンス、明確な主張のあるタイポグラフィ、スプリング物理に基づくモーション仕様が含まれます。

カラーの調整

カラーは HSL を使用し、意図的に彩度を抑えています。これは印刷デザインの原則を反映しています。洗練されたパレットは、大きな面には低彩度の色を使い、小さく意図的なアクセントに高い彩度を取っておきます。

スキルが強制するルール:

  • アクセントの彩度は 80% 未満に保つ — 彩度が高すぎるネオンは不可
  • 純粋な黒(#000000)は禁止 — Zinc-950(#18181B)のようなオフブラックを使用する
  • アクセントカラーは最大 1 色 — 視覚的な規律を強制する

パレットを調整する

PROMPT
Adjust the DESIGN.md accent color to a deep teal (#0D9488) and warm the neutrals toward sand tones.

タイポグラフィ

スキルはタイプスケールに音楽の音程比を使用します。音楽の音程が自然に響くのと同じ調和関係です:

音程比率特性
短三度1.200コンパクトで情報密度が高い
長三度1.250バランスが良く汎用的
完全四度1.333ゆとりがあり編集的な
黄金比1.618ドラマチックでインパクトが大きい

フォントの組み合わせルール:

  • プレミアムな文脈では Inter は禁止 — あまりに普及しすぎている
  • 推奨サンセリフ:Geist、Outfit、Cabinet Grotesk、Satoshi
  • 推奨モダンセリフ:Fraunces、Gambarino、Editorial New
  • ダッシュボードの制約:サンセリフ + モノスペースのみ(Geist + Geist Mono)
PROMPT
Use Outfit for display headlines and Geist for body text with Geist Mono for data.

空間のリズム

すべてのマージン、パディング、ギャップは基本単位(通常 4px または 8px)の倍数です。これにより、非対称であっても目に秩序立って映る空間関係が生まれます。

密度を調整する

テイストスペクトルは 1(ゆとりがある)から 10(コックピットのように高密度)までの範囲です:

PROMPT
Generate a DESIGN.md at density 8 — this is a monitoring dashboard that needs to display many metrics simultaneously.

密度を高くすると、整列のためのモノスペース数字、カードの代わりの border-top ディバイダー、より詰まった余白比率、影ではなくタイポグラフィで区別されるフラットな面が有効になります。

テイストの採点基準

DESIGN.md を 4 つの観点で評価します。プレミアムなデザインは、4 つすべてで 7 以上を獲得します:

観点測定内容
カラーの洗練度パレットの抑制、彩度の規律、コントラストの意図性
タイポグラフィの技巧フォントの独自性、スケールの調和、ウェイトの階層
空間の一貫性基本単位の一貫性、リズム、レスポンシブスケーリング
視覚的階層明確な primary/secondary/tertiary のレベル、情報アーキテクチャ

いずれかの観点が弱いと感じる場合:

PROMPT
The typographic hierarchy feels flat. Increase the weight contrast between headlines and body, and add letter-spacing differentiation.

アンチパターンチェックリスト

仕上げる前に、これらが存在しないことを確認します:

  • ❌ デザインに絵文字を使わない
  • ❌ 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 に帰属します。本サイトは独立した非公式の翻訳です。