Impeccable（インペッカブル）でAIっぽいデザインを検出｜62ルール、今週9,713スター増
AIエージェントが作ったページの「AIっぽさ」を検出して直すツール「Impeccable」が、GitHub（ギットハブ）の週間トレンドに入った。今週だけで9,713スターを集め、累計は96,932スターになる（2026年10月31日時点）。
紫のグラデーションや入れ子のカードなど、AIが作りがちな癖を62のルールで洗い出す。判定にLLMもAPIキーも使わない。
Claude Code（クロードコード）やCodex（コーデックス）、Cursor（カーソル）の上では、デザインを直す命令としても動く。
動かす手順と検出の対象、24個の命令の内訳は下に書いた。
AIが作るページに出やすいデザインの癖
ImpeccableのREADMEは、指定なしでエージェントにページを頼んだときに繰り返し出る例を挙げている。
どの文字もInter（インター）のフォント
紫から青へのグラデーション
カードの中に入れたカード
色の付いた背景に灰色の文字
各見出しの上に置いた角丸の四角いアイコン
READMEによると、これらの癖はモデルやプロジェクトをまたいで繰り返し出る。
READMEには比較の例も載っている。同じモデル（Claude Fable 5.1）に、イタリアのリグーリア海岸で家族が営む14室の宿について、ページを頼んだ結果だ。Impeccableなしでは、クリーム色の背景に細いセリフ体、斜体の差し色、丸いボタンが並んだ。
Impeccableありでは、海から見た夜の宿の絵を全面に置き、ページをその1枚を軸に組んだ。比較は開発元が公開した1例で、第三者の測定ではない。
検出機能の使い方｜エージェント・ターミナル・Chrome
検出機能を動かす方法は3通りある。
エージェント内では、デザイン用のフックが編集されたUIファイルを毎回検査し、作業完了の前に結果を返す。対応はClaude Code、Cursor、Codex、GitHub Copilot（コパイロット）、Grok Build（グロック・ビルド）、Hermes Agent（ヘルメス・エージェント）
ターミナルやCIでは、`npx impeccable detect` でエージェントなしに検査する
ブラウザでは、Chrome拡張が公開中の他社のページにも同じ検出結果を重ねて表示する
検査の対象によって、効くルールが変わる。JSXやTSXのソースはパターンのルールだけで判定する。コントラストの低さや小さすぎる文字は、描画されたページが必要なのでURLを指定したときに調べる。
結果にはルール名と場所が出る。 公式の解説の例では、文字にグラデーションをかけたCSSを `gradient-text` として3行目で指摘し、単色の文字色を勧めている。ブランドのフォントなど、意図して使うものは例外として登録できる。
24個の命令の内訳｜critique・polishなど
エージェントのチャットで `/impeccable critique the pricing cards` のように、命令と対象を指定する。Codexでは `$impeccable` と打つ。
方向づけ（9個）は bolder、quieter、distill、colorize、typeset、layout、animate、delight、overdrive
評価（2個）のcritiqueは点数付きのUXレビュー、auditは技術面の品質報告で、指摘を重要度P0〜P3に分ける
仕上げ（6個）は polish、harden、clarify、adapt、optimize、onboard
ブラウザ上の調整（2個）は live、generate
準備（4個）は shape、init、document、extract
残りの1個のcraftは、非推奨の別名として残っている。READMEによると、得意なのは既存の画面の改善で、新規のページ作りは難しいほうのモードだという。 まず1つの部品を指定する使い方を勧めている。
liveは手元のチェックアウト専用だ。文言の修正を適用するときに `package.json` の `impeccable:manual-edit-validate` スクリプトを実行するので、READMEは見慣れないリポジトリでは先に中身を確かめるよう書いている。
試す手順
READMEとドキュメントに書かれた手順だけを並べた。`npx` にはNode.jsが必要になる。
# 1. プロジェクトのフォルダで、検出だけを試す
npx impeccable detect src/
# 2. 動いているページを検査する（URLは開発サーバーのもの）
npx impeccable detect http://localhost:3000
# 3. エージェントに組み込む
npx impeccable install
# 4. ツールを再読み込みして、エージェントのチャットで実行する
/impeccable init
/impeccable critique the pricing cards手順1と2は、AIとの会話を始めずに検査できる。 終了コードは、0が指摘なし、2が指摘あり、1が検査できない対象ありを示す。
手順3のインストーラーは、使っているツールを判別し、プロジェクト単位か全体かを尋ねる。Codexではこのあと `/hooks` でフックの承認が必要になる。手順4のinitは、対象の読者や目的をまとめた `PRODUCT.md` を作る。
まとめ｜Impeccableの導入とdetectの対象
今日試せること：手元のプロジェクトのフォルダで `npx impeccable detect src/` を1回実行する。フォルダ名が違うなら、UIのコードがある場所に置き換える。
検出機能はLLMもAPIキーも使わず、ライセンスはApache-2.0。
▼ 毎朝、AIの最新ニュースが1分で読める
Substack「えーAI」では、最新AIニュースと活用術を毎朝 無料配信している。
その日いちばん効くニュースだけを選び、1分で読める形にして届ける。
▼ あわせて読みたい
Claude Codeに足す道具をもう1本。こちらは文脈の消費を減らす話。
AIニュースは毎日更新。取りこぼしたくない方はフォローを。
▼「うちの仕事でも使えるのか」を整理する
記事で扱ったAIを自分の業務にどう組み込むか、無料相談で一緒に整理する。ITが本業ではない個人事業主・小規模事業者が中心。
※ この記事はAIによって執筆した記事です。誤りが含まれる可能性があります。重要な情報は必ず一次ソースをご確認ください。
