AIっぽいダサいデザインを直す無料スキル12選

Interフォント。紫のグラデーション。ドロップシャドウ付きの角丸カード。初めてvibe codingを始めたとき、本当のボトルネックはコードではありませんでした。デザインだったのです。AIが生成するインターフェースはどれも、同じテンプレート工場から出てきたかのように見えました。

1つのSKILL.mdファイルを入れるだけで、エージェントのデザインに対する考え方が変わります。この数ヶ月間で数十個のデザインスキルをインストールしてテストしました。ほとんどは1週間以内に削除しました。互いに競合するか、改善効果がわずかだったからです。以下の12個が、実際に定着したものです。

まずはここから

Anthropic公式のfrontend-designプラグインがベースラインです。Claude Codeに同梱されており、レイアウト、タイポグラフィ、配色の基本ルールを設定してくれます。これがなければ、エージェントは毎回同じInter + 紫グラデーションの組み合わせをデフォルトで使います。これは天井ではなく、床だと考えてください。

Impeccableは公式プラグインの上に構築されており、/polish、/audit、/distill、/bolder、/quieterなど20のスラッシュコマンドを提供します。それぞれが特定のデザイン課題をターゲットにしています。/auditはアクセシビリティ、テーマ設定、レスポンシブブレークポイントにわたる包括的な品質チェックを実行します。/distillはコンポーネントを本質的な要素まで削ぎ落とします。私はデプロイ前の最終チェックとして毎回/polishを使っています。

デザインの強度をコントロールする

Taste Skillは異なるアプローチを取ります。スラッシュコマンドの代わりに、DESIGN_VARIANCEのような3つの数値変数を使って、エージェントがデフォルトからどれだけ逸脱するかを制御します。保守的な企業向けインターフェースには低く設定し、実験的なランディングページには高く設定します。粒度は便利ですが、最適値を見つけるには試行錯誤が必要です。高い値で最初に試したときは、2006年のMySpaceページのようなものが出来上がりました。

アイコンとビジュアルアセット

Better Iconsは、200,000以上のアイコンを含む150以上のアイコンコレクションに接続します。キーワードで検索すると、SVGを直接プロジェクトに同期してくれます。これを使う前は、5つの異なるサイトからアイコンを手動でダウンロードしていました。検索品質はコレクションによって異なりますが、一般的なUIアイコンについては適切なものを素早く見つけてくれます。

コンポーネントレベルのデザインインテリジェンス

UI Design Brainは、5つのデザインスタイルにわたる60以上のコンポーネントのデザイン原則を含んでいます。ミニマリストなシステムとグラスモーフィズムのシステムで、モーダルがどのように振る舞うべきかをエージェントに教えます。この具体性が重要です。なぜなら、「見栄えを良くして」という汎用的な指示は、汎用的な結果しか生まないからです。

UI UX Pro Maxはさらに広範囲をカバーします。50以上のデザインスタイル、97のカラーパレットの組み合わせ、57のフォントペアリング、そして160以上のプロダクトタイプに対する業界固有の推論を備えています。スコープは野心的です。正直なところ、コンテキストを絞らないと、選択肢の多さが生成速度を遅くすることがあります。私は通常、エージェントに選ばせるのではなく、スタイルとパレットを明示的に指定しています。

レビューと品質ゲート

Vercelのagent-skillsには、100以上のチェックポイントを持つUIレビュールールセットが含まれています。スペーシングの一貫性、カラーコントラスト、インタラクション状態、レスポンシブ動作を評価します。デザインフェーズ後にこれを実行すると、ノートパソコンでは問題なく見えてもモバイルで崩れる問題を検出できます。

UI SkillsはTailwind固有の品質チェックを追加します。/baseline-uiのようなコマンドで一貫したユーティリティクラスの使用を強制し、/fixing-accessibilityで集中的なアクセシビリティ監査を実行します。スタックがTailwindベースの場合、汎用的なデザインスキルでは見落とされるギャップを埋めてくれます。

ワークフロー全体のカバレッジ

Designer Skills Collectionは、ここで紹介する中で最も包括的なパッケージです。63のスキルと27のコマンドで、ワイヤーフレームからプロダクションまでのデザインワークフロー全体をカバーします。独自の主張が強いため、他のスキルと競合することがあります。矛盾する指示がエージェントに届かないよう、いくつかの重複するルールを無効にする必要がありました。

Design Pluginは、コードレベルでデザイン原則を強制します。改善を提案するのではなく、設定されたデザインシステムに違反するパターンをブロックします。複数の人が同じエージェントにプロンプトを送るチームで特に有用です。

プレミアムな見た目

Super Designは、プレミアムなタイポグラフィと余裕のあるホワイトスペースに焦点を当てています。より大きなフォントサイズ、より広いマージン、抑制されたカラーパレットなど、高級感のある選択にエージェントを誘導します。結果は目に見えて洗練されたものになりますが、コンテンツが多いページではホワイトスペースが過剰になることがあります。

Make Interfaces Feel Betterは、マイクロインタラクションに特化しています。ホバー状態、ローディングトランジション、スクロール動作、ボタンのフィードバックなどです。これらの小さなディテールこそが、「まあ見た目は問題ない」と「使い心地が良い」を分けるものです。このリストの他のどのスキルよりも、このスキルから最も大きな体感品質の向上を感じました。

うまくいかなかったこと

すべての組み合わせがうまく共存するわけではありません。12個全部を同時にインストールすると、矛盾する指示が生まれてエージェントが混乱しました。実用的なセットアップは、異なる関心事をカバーする3つか4つのスキルを重ねることです。基本ルール用に1つ、コンポーネントレベルのガイダンス用に1つ、レビュー用に1つ、そしてプロジェクト固有の見た目のギャップを埋めるものを1つという構成です。

また、同じレイヤーをターゲットにするスキル（例えば、競合する2つのカラーパレットシステム）は互いに打ち消し合うことも分かりました。1つの関心事につき1つを選び、それに決めてください。

12個すべて無料です。まずは公式のfrontend-designプラグインとImpeccableから始めて、出力がまだ汎用的に見える部分に応じて追加していってください。そして、フォントスタックからInterを削除しましょう。