claude-design-critic

Claude Design Critic

技術的には問題なくても、「AI が一発で作った」ように見えてしまうサイトはあります。このスキルでは、その原因を具体的に示し、何を変えればよいかを伝えます。デザインだけでなくコピーもレビューします。生成されたような文章は、中央揃えのヒーローや紫のグラデーションと同じくらい、サイトが AI 生成だとすぐに見抜かれる原因になるためです。

claude-landing-composer の出力や、雰囲気でコーディングしたあらゆるフロントエンド、あるいはありきたりに感じられる公開サイトの仕上げに使ってください。claude-design-system-architect のデザイントークンと併用できます（トークンがある場合は、それに照らして監査してください）。

Step 1 — 対象を把握する

URL（WebFetch + スクリーンショット）、ローカルプロジェクト（コンポーネントやスタイルを読む）、または貼り付けられたコードを対象にします。次の点を明らかにします。このページの目的は何か、対象ユーザーは誰か、そして促したいアクションは何か。目標が分からないままの批評は、単なる意見にすぎません。

Step 2 — 各観点から監査する

観点ごとに確認し、曖昧な印象ではなく具体的な箇所を指摘します。

レイアウトと構成

• すべてのセクションが中央揃えの積み重ねになっていませんか？ 同じカードを3つ並べる反射的なパターンはありませんか？ リズムのない、予測どおりのヒーロー → カード → CTA になっていませんか？ 意図的に見せたいところまで対称的になっていませんか？ 余白が窮屈、または均一すぎませんか？

色

• 紫や既定の AI 風グラデーション（分かりやすい兆候）。競合するアクセントカラーが多すぎませんか？ ブランドに合わない色や、トークンに紐付いていない任意の HEX 値はありませんか？ コントラストに問題はありませんか（AA を確認してください）。

タイポグラフィ

• 既定のシステムサンセリフ体を2〜3サイズだけ使っていませんか？ 適切なモジュラースケールがありませんか？ 階層が弱くありませんか？ ありきたりな書体の組み合わせになっていませんか？ 行の長さや行間が既定値のように見えませんか？

余白と細部

• どこでも同じパディングを使っていませんか？ 視覚的な調整がありませんか？ 枠線や影がすべて同じ、またはすべて強すぎませんか？

モーション

• すべての要素に同じフェードアップを使っていませんか？ 動きが誘導ではなく装飾になっていませんか？ prefers-reduced-motion を無視していませんか？

アイコンとアセット

• UI に絵文字を使っていませんか（Lucide/Heroicons に置き換えてください）。ありきたりなストック画像はありませんか？ 仮のロゴが残っていませんか？

コピー（デザインと同じくらい厳しくレビューしてください）

• AI らしい表現：「高める」「解き放つ」「シームレス」「力を与える」「変化の速い今日の世界では」「心よりうれしく思います」「〜の力」、際限のない em ダッシュ、すべての文が三つ並びの表現。
• ありきたりな価値提案（「X を実現する最良の方法」）、曖昧な言い回し、「詳細はこちら」ボタン、「{Product} へようこそ」というヒーロー、埋め草のマイクロコピー。
• 問題のある行を正確に指摘し、特に問題の大きいものを書き換えます。

アクセシビリティとセマンティクス

• 見出しの順序、代替テキスト、フォーカス状態、セマンティックなランドマーク、タップ領域のサイズ。

Step 3 — 優先順位を付け、具体的な修正を報告する

# Design Critique — {target}
Generated: {timestamp} · Goal: {…} · Verdict: {SHIP / FIX FIRST / REBUILD SECTION}

## The 30-second read
The 2–3 things making this look generated, in plain language.

## Findings (prioritized: High → Low)
| # | Dimension | What | Where (selector/line/section) | Why it reads as AI | Fix |

## Copy rewrites
"{exact current line}" → "{rewritten line}"

## Quick wins (under 30 min, high impact)
## Bigger moves (worth the time)
## What's already good (keep it)

質問しなくても各修正を実施できるほど具体的に記述します。ファイル、セクション、行を示します。トークンがある場合は、使用すべきトークンを挙げます。

Step 4 — 適用を提案する

優先度の高い修正を直接実装して（コンポーネントやコピーを編集して）再監査するか、再構築を claude-landing-composer に依頼することを提案します。

ハウススタンダード

プレミアムな印象を生むのは、意図的なレイアウトのリズム、抑制された配色、実用的な文字サイズのスケール、ゆとりある余白、目的のある動き、人間らしいコピーです。生成された印象を生むのは、すべての要素の中央揃え、虹色や紫のグラデーション、既定のサンセリフ体、均一なパディング、すべてにフェードアップ、「ワークフローを高める」といった表現です。すべての対象を後者から前者へ近づけてください。紫は使わず、UI に絵文字を使わないでください。

ガードレールのまとめ

デザインとコピーの両方を批評する · すべての指摘は具体的な箇所を示す · トークンがある場合は明記する · 影響度に応じて優先順位を付ける · 適用を提案し、その後で再監査する。