ai-design-check：AIが作った画面の「生成っぽさ」を137のルールで検査し、機械的に直せる所は自動で直す

どんな問題を解決するか / いつ使うか

Hallmark や unslop のようなスキルはエージェントが画面を見て判断するが、毎回モデルを動かすので時間と使用量がかかる。ai-design-check は、焦点リングを消している、スケール外の文字サイズ（text-[10px] など）、文字間を広げた大文字ラベル、紫のグラデーション、transition-all などを、ファイル名と行番号つきでlintのように指摘する。CIやPRのチェックに入れて「AIっぽさが戻ってこない」ようにしたいときに使う。React・Vue・Svelte・HTMLのほか、SwiftUI・Jetpack Compose・Flutter・React Nativeにも対応している。

やり方

1. 検査する：npx @enmera/ai-design-check
2. 答えが1つに決まる所を直す：まず npx @enmera/ai-design-check --fix --dry-run で変更内容を確認し、問題なければ --dry-run を外して実行する。余白と角丸はスケールの一番近い値へ、極端に太い文字は bold に変わる。タップ領域・色・絵文字・文言・情報の優先順位は判断が要るので、レポートに残るだけ。
3. 残りをエージェントに直させる：npx skills add enmerasoftware/ai-design-check でスキルを入れ、「この画面のデザインを直して」と頼む。エージェントが画面を測り、製品から短い方針を書いてから直し、直す前と後の指摘件数を示す。機能・データ・文言は変えない。

ほかのコマンド（README による）：

• scan <URL>：実際にChromeでPC幅とスマホ幅で開き、コントラスト・サイズ・要素の重なり・画像切れ・スクリプトエラーを調べる。--format github でPR向けの出力。
• redesign <URL>：エージェントがセクションごとに「何を伝えるか・何が問題か」のカードを書き、新しいブランチで1パスずつ直す。内容が消えたり見た目が悪くなったパスは捨てる。--plan でカードだけ作って止められる。
• inventory：ボタン・入力欄・見出し・カードが何種類あるかを数える。
• narrow：スマホ幅や長い言語で崩れる所を調べる。
• system --brand "#色"：新しい製品の書体・文字サイズ・配色の初期値を出す。

注意点

• 余白は4pxグリッド、文字は11pxが下限、など作者の会社の基準が前提になっている。自分のデザインシステムと違う所は設定（designSystem で fonts・sizes・radii・colors を指定）で合わせる。
• 137のうち33のルールは目で見る必要があり、自動では判定されない（review扱い）。
• 投稿時点でスター数は約200と新しいツール。--fix は必ず dry-run で確認してから使う。

関連

• Hallmarkスキルで「作る・採点・作り直し・好きなサイトから抽出」を使い分け、AIっぽくないUIにする
• AIっぽいUIを「監査→5行の方向性→1項目ずつの修正パス」で直させるプロンプト（unslop）
• Pristineスキル：実画面を4通り（明暗×PC/スマホ）で撮り、10点満点で採点してから直させる

出典

• @LLMpsycho · 2026-11-04
• リポジトリ：github.com