スキル自身の言葉で
ランディングページ、ポートフォリオ、リデザイン向けの、AIっぽさを排除するフロントエンドスキルです。エージェントはブリーフを読み込み、デザインの方向性を推測した上で、3つのダイヤル（DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY）を設定し、これらがすべてのレイアウト、モーション、密度の判断を制御します。既存のデザインシステム（Fluent、Carbon、GOV.UK、Polaris）が該当する場合はブリーフをそれにマッピングし、見た目だけの方向性についてはその旨を正直に明記します。
ハードルールには、ヒーローのビューポート適合、アイバロウ（見出し上の小さなラベル）の抑制、1ページに1つのアクセントと1つのテーマ、禁止されているAIらしさのサイン、そして特定のアイコン・フォント・アニメーションライブラリが含まれます。リデザインはまず監査から始まります。最後は、コードを出荷する前にすべての項目が合格しなければならない機械的なプレフライトチェックで締められます。
生成されるもの
- コードを書く前に述べられる、1行のデザインリード（Design Read）：ページの種類、対象読者、雰調言語、そして採用するデザインシステムまたは美的系統。
- フロントエンドコードは既定でTailwind v4を使用し、既存プロジェクトがv3を必要とする場合のみv3にフォールバックします。
- どの部分が借用したインスピレーションで、どの部分が公式素材であるかを明確に示すコードコメントです。
- 画像ソースが存在しない場合の、明確にラベル付けされたプレースホルダースロットと、末尾に付ける必要な実画像のリストです。
仕組み
- 01何よりもまずブリーフを読む
エージェントは、デフォルトの美的スタイルに飛びつくのではなく、ページの種類、雰調を表す言葉、参照資料、対象読者、既存のブランド資産、暗黙の制約からユーザーが本当に望んでいることを推測します。
- 023つのダイヤルを設定する
基準値は8 / 6 / 4で、デザインリードによって会話的に上書きされます。プリセットは用途ごとに用意されており、公共サービス向け（3 / 2 / 5）からエージェンシー向けランディングページ（9 / 8 / 3）まであります。
- 03基盤を正直に選ぶ
ブリーフがMicrosoft、IBM、GitHub、Shopify、Atlassian、あるいは公共セクターを想起させる場合は、そのCSSを手作業で再現するのではなく、公式パッケージをインストールして使用します。
- 04デフォルトのスタックを適用する
Server ComponentsによるReactまたはNext.js、Tailwind v4、そしてmotion/reactからインポートされたMotionを使用し、アニメーションはクライアントのリーフコンポーネントに隔離します。
- 05プレフライトチェックを実行する
コードを出力する前に、Section 14のマトリクスにあるすべての項目が合格していなければなりません。1つでも未チェックの項目があれば、作業は完了していません。