スキル自身の言葉で
このスキルは、Google Stitch の画面生成に最適化された DESIGN.md ファイルを生成します。アンチスロップなフロントエンド実装指針を、Stitch のネイティブなセマンティックデザイン言語へと変換します——Stitch の AI エージェントが解釈できるよう、説明的な自然言語のルールと正確な値を組み合わせたものです。このファイルは、Stitch にプレミアムで凡庸ではないインターフェースを生成させるための、単一の信頼できる情報源として機能します。
厳格なタイポグラフィルール、調整済みのカラーパレット、非対称レイアウト、絶え間ないマイクロモーション、ハードウェアアクセラレーションによるパフォーマンスを強制します。このスキルには、Inter フォント、ネオングロー、中央揃えのヒーローセクション、汎用的なプレースホルダーコンテンツといった AI デザインの陳腐な表現を禁止する、明確なアンチパターンリストが含まれています。
生成されるもの
- 7つの構造化されたセクションを持つ DESIGN.md ファイル：Visual Theme & Atmosphere、Color Palette & Roles、Typography Rules、Component Stylings、Layout Principles、Motion & Interaction、Anti-Patterns
仕組み
- 01雰囲気を定義する
テイストスペクトラムの中の感情に訴える形容詞を使い、対象プロジェクトの意図を3つの軸で評価します：密度（1〜10、Airy から Cockpit Dense まで）、バリアンス（1〜10、Symmetric から Chaotic まで）、モーション（1〜10、Static から Cinematic まで）。
- 02カラーパレットをマッピングする
各カラーについて、説明的な名称、16進コード、機能的な役割を示します。彩度80%未満のアクセントカラーは最大1色までとします。
- 03ヒーローセクションを定義する
文字と文字の間に文字高さで小さな写真を埋め込むインラインイメージタイポグラフィ、バリアンスが4を超える場合の非対称構造、そして最大1つのプライマリ CTA を用いて、強い第一印象を作り出します。
- 04コンポーネントのスタイリングを記述する
ボタン、カード、入力欄、ローディング状態、エラー状態について、形状、色、シャドウの深さ、インタラクションの挙動を指定します。
- 05モーションの方針を記述する
スプリング物理のデフォルト値（stiffness: 100、damping: 20）、アクティブなコンポーネントに対する絶え間ないマイクロインタラクション、リストの表示のための段階的なオーケストレーション、そしてアニメーションを transform と opacity のみに限定するパフォーマンス制約を定義します。