#269 脱・AI臭。1行のコマンドでデザインを「プロ並み」にする魔法

AIでサイトを作ると便利だけど、装飾が「いかにもAI」になりがち。UI Skillsで少し解消した話

＊＊＊
📩 Chrome拡張機能やsrefコード集など
メルマガ無料登録で特典+全アーカイブが見れます
▶︎ https://chi3.substack.com/welcome
＊＊＊

こんにちは、ちーみつです。

今回は、AIでWebサイトを作る時の
「いかにもAIで作りました」という装飾を
少し解消できたツールについてお届けします。

完璧ではないけれど、
確実に良くなった実感があります。

AIで作ったサイトが「AIっぽい」のはなぜ？

装飾が学習データの平均値になるからです。

AIでサイトを作ると、
便利だけど毎回似たようなデザインになりませんか？

私も作りかけのサイトを見て、
「なんか、どこかで見たような…」と感じていました。

理由を調べてみると、
AIは学習データの平均値を出すため、
どうしても「よくあるデザイン」になりやすいそうです。

具体的には:

• 青いボタン

• Interフォント

• 過剰なグラデーション

• 見慣れたカードレイアウト

これらは悪くないのですが、
「個性がない」「安っぽい」と感じる原因にもなります。

UI Skillsとは？

AIにプロのデザインルールを設定できるツールです。

「毎回デザイン指示を出すのは面倒だな」
と思っていた時に見つけたのが、
UI Skillsというツールでした。

これは、AIに
「プロのデザイナーが守るべきルール」を
事前に設定できるものです。

公式サイト: https://www.ui-skills.com/

設定すると、
AIが自動的にそのルールに従って
コードを生成してくれます。

UI Skillsを導入してみた結果は？

装飾の安っぽさが少し解消されました。

実際に作りかけのサイトで試してみました。

導入方法は1行のコマンドだけ:

curl -fsSL https://ui-skills.com/install | bash

その後、AIに Antigravityなどで`/ui-skills` とコマンドを入力するだけで、
プロのデザインルールが自動的に適用されます。

また、既存のファイルをチェックしたい時は:

/ui-skills src/

このように指定すると、
ルール違反を指摘してくれます。

実際に使ってみた結果、
装飾の安っぽさが少し解消されました。

完璧ではありませんが、
確実に良くなった実感があります。

どんなルールが設定されるのか？

プロが守る細かいルールが自動適用されます。

UI Skillsで設定されるルールの一部:

• アニメーションは必要な時だけ

• 余白は一貫性を持たせる

• フォントは読みやすさ優先

• 色は使いすぎない

これらを毎回AIに指示するのは大変ですが、
UI Skillsなら最初に設定するだけで済みます。

最後に

今回、UI Skillsを使ってみて、
「AIっぽさ」が少し解消されたことで、
そう感じました。

もし、AIで作ったサイトの装飾に
違和感を感じているなら、
試してみる価値はあるかもしれません。

最後まで読んでいただきありがとうございます。

関連記事

🎁メルマガ無料登録プレゼント

以下の特典（全10点以上）をプレゼント中です。

• Chrome拡張機能 4種：Midjourneyの画像一括DLなど、私が自作した時短ツール

• Midjourney srefコード集：コピペで使えるプロ級スタイル集

• AIプロンプト集：思考がクリアになる対話テンプレート

• その他：SUZURI攻略ガイド、Tampermonkeyスクリプトなど

登録は無料。合わなければいつでも解除できます。

▼ 以下のリンクから、すべての特典を今すぐ受け取る

SNS

X : https://x.com/chi3_jp
Instagram：https://www.instagram.com/chi3jp_aiart
私のまとめサイト : https://wks3.vercel.app/