なぜ Claude はデフォルトで凡庸なデザインを生成するのか、それを実践で修正する 5 つのスキル、そして自分のブランドに合うものがない場合の段階的な作成手順。
あなたはすでにその見た目を認識できるでしょう。白い背景に紫のグラデーション、Inter フォント、カードのソフトな影、セクションの中央に置かれた気の抜けた絵文字。それを見て、「これは Claude が作ったな」と思うのです。
それはモデルのせいではありません。モデルのデフォルトの振る舞いのせいです。
追加の指示なしに「ランディングページを作って」と依頼すると、モデルは最も興味深い選択肢を追求しません。最も確からしい選択肢を追求します。そして最も確からしい選択肢とは、トレーニング中に見たすべてのものの平均、つまり何百万もの安全で、凡庸で、忘れられるページの平均です。その結果は、AI デザインのように見えるデザインになります。なぜなら、それは文字通り、ウェブ上に存在するものの統計的な中心だからです。
Anthropic はこれに名前をつけており、分布収束と呼んでいます。実際には、これは一つのことを意味します。方向性がなければ、Claude は常に平凡な領域に落ち込むのです。
スキルとは、そこから Claude を引き上げる方法です。
スキルとは何か、簡単に言うと
Claude が作業を始める前に読み込む、マークダウン（テキスト）ファイルを想像してください。毎回のプロンプトで好みやデザインシステム、トーンを繰り返す代わりに、一度書けば自動的に読み込まれます。それは、タスクを渡す前に手渡すジョブ記述書のようなものです。
出力の違いは計り知れません。同じプロンプト、同じ Claude でも、適切なスキルが読み込まれていれば、凡庸なデザイナーから、あなたの仕事を知る協力者へと変わります。
私はいくつものスキルをテストし、同じプロンプトで Before / After を比較し、何が本当に効果を発揮するかを見極めました。ウェブデザインにおいて、その効果を大きく動かす 5 つのスキルを紹介できます。
1. Frontend Design（Anthropic 公式）
これはエコシステムで最も人気があり、それも理由があります。Anthropic 自身がリリースしたものです。インストール数は 277,000 を超えています。
その秘訣は、Claude に美しく描く方法を教えることではなく、やってはいけないこと を教えることです。このファイルには、避けるべき決まり文句が明示的にリストアップされています。使い古されたフォント、よくある配色、誰もが認識するあのカードの影の構造などです。モデルに埋め込まれた、良質なセンスの短いレッスンと言えるでしょう。
Before / After のテストでは、この効果が明らかです。紫のグラデーションと絵文字で出力されていた同じランディングページが、エレガントなセリフ体とクリーンなサンセリフ体の組み合わせ、スクロールフェードアニメーション、洗練されたホバー状態を備えた、エディトリアルなものに変わります。たった一つのプロンプトからです。
使用すべきタイミング： プロジェクトを一から始める際、最初のトライでデフォルトから脱却したい場合。これがベースとなります。
そして、このスタイルに縛られる必要はありません。他のルールはそのままに、サンセリフ体のフォントだけを使いたい場合は、マークダウンを編集して「Geist、Google Sans、DM Sans のみを使用」と指示するだけです。Claude がファイルを調整します。
2. Impeccable（ツールボックス）
Paul Bakaus によって作られたこれは、短期間でコミュニティのお気に入りの一つとなり、GitHub で 45.9k のスターを獲得しました。その理由は明らかです。
このスキルの素晴らしい点はコマンドにあります。純粋な /impeccable もありますが、コンテキストに応じて呼び出す約 20 のサブコマンドが付属しています。
/impeccable animateは、ページの流れに沿った形で、一貫性のあるイントロアニメーションと動きを追加します。/impeccable quieterはデザインの「ノイズ」監査（グラデーションの多用、見出しすべてへの太いフォントウェイト、散らばった絵文字など）を実行し、過剰な部分を削り、うるささではなくエレガンスをもたらします。/impeccable auditは品質とアクセシビリティのチェックを行います。/impeccable documentは、デザインシステム全体をキャプチャしたdesign.mdを生成し、他のエージェントが後で読み取れるようにします。
内部では、スロップ（手抜き）検出のための 46 の決定論的ルールが動作しています。これらはモデルの推測に依存せず、AI 生成パターンを正確に捉えます。
使用すべきタイミング： 既存のものに反復的に手を加えたい場合。ページができていて、誇張を抑えたいなら quieter。活気が足りないなら animate。2 つのプロンプトで、サイトのレベルが変わります。
ツールを超えたディテール：Impeccable には「スロップ」タブがあり、AI に避けるよう教えているパターンが表示されます。このリストを自分で見てみてください。カードの側面にあるアクセントボーダーが AI の決まり文句になっていると認識できるようになると、手動でデザインする際にも、より良い判断ができるようになります。
3. UIUX Pro Max（Claude に思考を強制するスキル）
これは強化されたデザインデータベースであり、このリストで最もスターを獲得しています。GitHub で 105k スターを超えています。67 の UI スタイル、161 のカラーパレット、57 のフォントペア、99 の UX ガイドライン、16 のテクノロジースタックが含まれており、各フレームワークでどのように実装するかを理解しています。
このスキルのポイントは、コードを高速に提供することではありません。その逆です。コードを一行も書く前に、Claude に推論を強制します。レイアウトを 5 つのドメイン（プロダクト、スタイル、カラー、ランディング、タイポグラフィ）で並行検索にかけ、推論ルールを適用し、その後に初めて完全なデザインシステムを返します。避けるべきアンチパターンも既にマークされています。
https://x.com/nett0eth/status/2073490435066982554
その結果は、意図的なセクションであり、装飾的なものではありません。テストでは、KPI ブロックでまさにライトからダークへのトランジションを行い、飛び出させる必要のある数字を強調するといったことをしていました。これは、ジェネレーターではなく、人間に期待する種類の判断です。
使用すべきタイミング： コンテンツについて明確なビジョンがあり、デザインの深みを求めている場合。そして、金の価値があるヒントを一つ。各セクションで何を望むか具体的であればあるほど、結果は良くなります。スキルはあなたの考えを読むのではなく、あなたの方向性を増幅します。「スキルを使って、より抜本的なリデザインをして。パレットとフォントペアを探求して」と送るだけで、返ってくるものが完全に変わります。
4. Web Design Guidelines（Vercel Labs による監査役）
これはプロジェクトの終盤、開始時ではなく、終盤に使うものです。Vercel Labs から提供され、GitHub で 29k スターを獲得しています。Vercel のウェブインターフェースガイドラインリスト（100 以上のルール）に基づいてコードを監査します。キーボードフォーカスの動作、ズームの無効化禁止、ペーストのブロック禁止、ボタン上のローディングインジケーター、見出し階層、ARIA などです。
そして、私が気に入っているトリックがあります。Claude に問題をプレビュー画面に直接注釈付けするよう依頼できるのです。リストを読む代わりに、サイト上で、aria-label が欠落している場所、キーボードナビゲーションが壊れている場所、CTA にフォーカスがない場所がオレンジ色で表示され、視覚的に確認できます。
使用すべきタイミング： デザインが既に良好で、アクセシビリティを確保し、キーボードやスクリーンリーダーを使用するユーザーにとって問題がないことを確認したい場合。公開前の QA として最適です。
5. Astryx（Meta によるエージェント対応デザインシステム）
https://x.com/nett0eth/status/2073826299789889884
5 つ目は別のカテゴリーに属します。これはセンスのスキルではなく、完全なデザインシステムです。上記 4 つは Claude に 1 画面ずつ、より良いデザインを教えるものです。Meta は逆の道を選び、Astryx を公開しました。これは 8 年間社内で育成され、同社最大かつ最も使用されるデザインシステムとなり、13,000 以上のアプリで動作しています。現在はオープンソースであり、ここで重要なディテールとして、エージェント対応です。
その要点はこうです。モデルがあらゆるコンポーネントに対して常識を持っていることを期待する代わりに、すべてが最初からアクセシブルで一貫性のあるシステムを提供します。150 以上のコンポーネント、7 つの既製テーマ、ダークモード、そして人間とエージェントの両方が同じドキュメントを読んで同じ方法で使用する CLI が含まれています。リポジトリ内には CLAUDE.md もあり、Claude が最初の一行を書く前に家のルールを理解できるようになっています。
React と StyleX 上で動作し、ベータ版ですが、すでに 8.2k のスターを獲得しています。
使用すべきタイミング： 単なる美しい画面ではなく、システム全体の一貫性を求める場合。スキルはモデルのセンスを洗練しますが、Astryx はあらゆるプロンプトの前に基盤が既に強固であることを保証します。この 2 つは互いに補完し合います。
さらにスキルを探すには
これら 5 つで、Claude でウェブデザイナーが行う作業の約 90% をカバーできます。しかし、さらに探索したい場合、優れたディレクトリがあります。
- UI Skills はデザインエンジニア向けに特化していますが、ウェブデザインにも役立ちます。上記のスキルのいくつかもリストされており、アクセシビリティや Shadcn 関連のものもあります。
- Type UI は、ビジュアルを第一に考える方に私が最も気に入っているサイトです。スクロールすると各スタイル（ミニマリスト、ネオ・ブルータリズム、洗練されたコーポレート）のプレビューが表示され、指示文を一文も書かずに、欲しいものを呼び出すことができます。
- MCP Market は大規模なコミュニティリポジトリです。Agent Skills > Categories > Design Tools に進むと、無限のリストがあります。
- skills.sh は Vercel などが公式に公開している場所で、一次情報を入手するのに適しています。
独自のスキルを作成する方法
既存のどのスキルもあなたのブランドやスタックに 100% 合わない場合。その時は、自分で作成します。
Claude アプリまたは Claude Code で、Customize > Skills > Create Skill > Create with Claude に進みます。まず、スキルに何をさせるかを尋ねられます。
有用なスキルと役に立たないスキルを分けるのは、ここでどれだけ具体的に記述するかです。「きれいなデザインにして」ではなく、推論ルールを与えてください。例えば：
- まず製品タイプ（ダッシュボード、ランディング、アプリ）を常に特定する。デザインはコンテキストによって変わるから。
- 描画する前に、画面の目標を常に推論する。最も重要なアクションと、ユーザーが最初に気づくべきものは何か。
- デフォルトは控えめなパレット、よりニュートラルな背景とサーフェスにする。
- プライマリの本文フォントと、必要に応じて大きな見出し用のディスプレイフォント。
Claude が会話を開始し、スタック（例：Tailwind トークン）、スペーシングの比率、レイアウトの制限について尋ねてきます。ここで詳細に答えることが、スキルを価値あるものにします。最終的に、リファレンスフォルダを含む .md ファイルにパッケージ化され、独自のスラッシュコマンドでアクセスできるようになります。
しかし、スキルの作成は簡単な部分です。難しいのは、次のセッションで壊れないようにすることであり、ここで多くの人が見落とす軸が出てきます。私は Matt Pocock の、持続可能なスキルを書くための 8 ステップフレームワーク（トリガー、構造、方向性、剪定）を別の記事で詳しく解説しました。これは、インストールするどんなデザインスキルよりも価値があります。
https://x.com/nett0eth/status/2075976597513830727
一緒に読む価値があります。「モデルに正しい定規を与える」という同じ考え方を、一段上のレイヤーに適用したものです。Anthropic の公式ガイド、The Complete Guide to Building Skills for Claude も、その原則を詳しく説明しています。
残るもの
Claude は、デフォルトでは印象的なデザイナーではありません。これは、ランディングページを依頼して、いつもの紫のグラデーションを受け取ったことのある人にとっては、もはやニュースではありません。
スキルは、このギャップを埋める方法です。モデルが賢くなったからではなく、あなたが本物のデザイナーが頭の中に持っている定規をモデルに与えたからです。モデルそのものよりも、その周りに構築するループの方が重要です。
一度設定すれば、出力の飛躍的な向上を実感し、もうスキルなしでは作業したくなくなるでしょう。
疑問は残ります。あなたのプロジェクトのうち、どれだけが、尋ねる前にスキルを読み込まなかったという理由だけで、まだいつもの紫のグラデーションで出力されているのでしょうか？ 保存してシェア 👍
