---

name: de-ai-design
description: LLMに生成させたWebサイトやUIが「いかにもAIが作った」見た目になるのを防ぐためのSKILL。ランディングページ、ダッシュボード、Reactコンポーネント、HTMLモックなど、視覚的な成果物を生成する前に適用する。既存デザインのリファイン依頼にも使う。

脱・AIっぽいデザイン

このSKILLの目的

LLMが生成するUIには強い「平均への回帰」が働き、誰が頼んでも似た見た目になる。このSKILLは、その典型パターンを自覚的に避け、意図のあるデザインを選ばせるためのチェックリストと代替指針を与える。

まず避けるべき「AIっぽさ」の典型症状

以下は生成UIに頻出する記号であり、1つでも複数当てはまると「AI製」に見える。

1. 紫〜青のグラデーション(indigo→purple、blue→violet)をヒーローやボタンに使う
2. グラスモーフィズム(半透明カード + backdrop-blur)の乱用
3. 絵文字を見出しやリストの先頭に置く(🚀 ✨ 💡 など)
4. 中央揃えヒーロー + グラデーション文字 + 角丸大ボタン2つという定型構成
5. 3カラムの機能カードグリッド(アイコン + 太字見出し + 2行説明)
6. rounded-2xl + shadow-lg の白カードを等間隔に敷き詰める
7. フォントがInterまたはデフォルトsans一択
8. 「Empower」「Seamless」「Elevate」「〜を、もっと自由に。」のような中身のないコピー
9. すべての要素が同じ余白・同じサイズで視覚的な強弱がない
10. ダークモードでslate-900背景 + 彩度の高いアクセントという定番配色

生成前に決めること(必須)

コードを書き始める前に、次の3つを明示的に決めて宣言する。

1. 美的方向をひとつ選ぶ

「モダンでクリーン」は方向ではない。以下のような具体的な参照点を1つ選ぶ:

• エディトリアル/雑誌的(大胆なセリフ体、非対称レイアウト、余白の緊張感)
• ブルータリズム(生のHTML感、太い罫線、システムフォント、無装飾)
• スイス/国際様式(厳格なグリッド、Helvetica系、限定色)
• レトロ計器盤/端末風(等幅フォント、罫線表、アンバーやグリーンの単色)
• 和文の組版意識(明朝系見出し、縦のリズム、控えめな装飾)

2. タイポグラフィで個性を出す

• 見出しと本文で性格の違う2書体を選ぶ(例: 見出しにセリフ体やディスプレイ体、本文にニュートラルなsans)
• サイズ差を大胆に(見出しは本文の3〜6倍でよい)
• 行間・字間・ウェイトを既定値のまま使わない
• 日本語なら「Noto Sans一択」をやめ、明朝、ゴシックの太さ違い、丸ゴなどを文脈で選ぶ

3. 色は「1つの強い決断」に絞る

• ベースは無彩色寄りに抑え、アクセント1色だけを強く効かせる
• グラデーションを使うなら理由を言えること。言えないなら単色
• 白背景以外(生成りの紙色、深緑、墨色など)も選択肢に入れる

レイアウトの指針

• 完全な左右対称・等分割を疑う。非対称と余白の偏りが人の手の痕跡になる
• 全カード同型ではなく、重要度に応じてサイズと密度を変える
• 罫線・下線・番号など、影とぼかし以外の区切り方を使う
• 角丸は全要素一律にしない(0px も選択肢)
• ホバーやトランジションは1〜2箇所に絞り、意味のある動きだけ残す

コピーとコンテンツ

• プレースホルダでも具体的な固有名詞・数字を入れる(「導入企業3社の事例」ではなく実在しそうな社名と数値)
• 見出しは機能説明ではなく主張にする
• 絵文字は原則使わない。使うなら1画面に1つまで、明確な意図を持って

セルフチェック(出力直前)

生成したUIに対して次を自問し、2つ以上Yesなら作り直す:

• このデザインを100人のAIに頼んだら、似たものが返ってきそうか
• 紫系グラデーション・グラスモーフィズム・絵文字見出しのいずれかを無自覚に使っていないか
• フォント・色・レイアウトのどれか1つでも「明確な決断」と呼べる選択があるか(なければNo→作り直し)
• 見出しコピーがどの製品にも使い回せる汎用文になっていないか

使い方の例

ユーザー: ポートフォリオサイトを作って
→ このSKILLを適用: まず美的方向(例: エディトリアル)を宣言し、
  書体・アクセント色・レイアウトの決断を明示してからコードを生成する

このSKILLは「装飾を増やす」ためのものではない。選択に意図を持たせ、平均から離れるためのものである。