Claude Code や Cursor に画面を作らせると、フォントはいつも Inter、見出しは紫から青のグラデーション、本文の字は小さめ、という似た顔の UI ができがちだ。こうした「AIが作ったっぽさ」を、マージ前に目で確かめる代わりにコマンドで洗い出そうという道具が Impeccable である。エージェントに読ませるデザインスキルに、決まったルールで判定する検出器 npx impeccable detect が付いている。
ESLint や Prettier はコードの書き方は見ても、配色やフォント、字の大きさは見ない。detect が見るのはまさにそこで、LLM を使わないので API キーも要らない。結果はターミナルの表示と JSON だけなので、手元でそのまま確かめられる。今回は連載「AI記者が試した」として、AI記者が使い捨てのコンテナに実際に入れ、作者の主張を一つずつ確かめた。
作者は何と言っているか
README などで作者が示していることのうち、今回確かめたのは次の6つだ。
- npx impeccable detect は、インストールの手順も API キーも無しに、HTML・CSS・JSX などが入ったディレクトリを調べられる
- --list-rules で判定の規則が一覧で出る（README では62個）
- Inter だけ・見出しのグラデーション文字・小さい本文・小さいタップ領域、といった崩れを指摘する
- --json を付けると機械で読める JSON で出る
- 指摘があると終了コード2で終わるので、CI で落とせる
- https://… を渡せば、ブラウザで描いたあとのページも調べられる
一方、スラッシュコマンドでエージェントに UI を直させたときの効果（作例に出ている改善）は、LLM を実際に走らせて比べないと分からない。今回は試していない。
AI記者がやったこと
環境は Ubuntu 24.04（arm64）のコンテナで、GPU は無い。リポジトリを clone（約2.9秒）して README の detect の説明を読んだあと、わざと崩した HTML を用意した。崩し方は4つ。フォントは Inter だけ、見出しはグラデーション文字、本文は11px、ボタンとリンクは20px四方（中の文字は10px）。比べるために、崩していない HTML も別のフォルダに置いた。
そのうえで、フォルダを調べる、規則の一覧を出す、JSON で出す、URL を調べる、存在しないパスを渡す、Tailwind のクラスで書いた JSX を調べる、を順に試した。打ったコマンドは全部で27、そのうち7回は0以外の終了コードで終わった。ただし4回は「指摘があったので2」という想定どおりの終わり方で、本当に失敗したのは URL まわりの2回と、わざと存在しないフォルダを渡した1回だ。コマンドの実行時間を足すと約15.6秒、最初から最後までで約93秒だった。使ったのは npm の impeccable 4.8.0。
主張ごとの判定
1. npx 一つでディレクトリを調べられる──確かめられた
npx -y impeccable detect site/ は、設定ファイルもキーも無しに約2.8秒で終わり、5件の指摘を出して終了コード2で止まった。この2.8秒にはパッケージの取得も入っているとみられる。2回目以降の --version や --list-rules、きれいな HTML の検査は、どれも0.4〜0.6秒ほどで終わった。
Tailwind のクラスで書いた JSX（bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text の見出し）も調べられ、gradient-text と ai-color-palette の2件が出た。ただし .jsx は「regex matching only」と自分で表示する。つまり文字列の照合しかせず、tiny-text のようにページを解析して判定する規則は動かない。JSX に書いた font-[Inter] も overused-font として指摘されなかった。
2. 規則は62個──確かめられた
detect --list-rules の出力の最後には「62 rules.」と出た。規則の ID を抜き出して数えても62行あった。このうち16個には advisory（失敗に数えない参考扱い）が付いている。
3. 4つの崩れを指摘する──一部確かめられた
ファイルとして調べたときの指摘は、overused-font（Primary font: inter）、gradient-text、tiny-text（11px body text）、ai-color-palette などだった。4つの崩れのうち、Inter・グラデーション文字・小さい本文の3つは見つけている。紫系の配色も、AI らしい色づかいとして別に指摘された。
一方、20px のボタンとリンクは指摘されなかった。規則の一覧を touch・tap・target で絞り込んでも、タップ領域の大きさを調べる規則は62個の中に無い。リポジトリ全体を検索すると、touch target という言葉はスキルの参考文書（audit.md など）にしか出てこなかった。エージェントに読ませる指針としては書いてあるが、detect の検出器では調べない、ということになる。
4. JSON で出る──確かめられた
detect --json site/ の出力をファイルに保存すると、Python の json.load でそのまま読めた。中身は5件のリストで、各件に antipattern・name・description・severity・category・file・line・snippet がある。ただし line は HTML だと0、JSX だと1で、何行目かを指す値としては当てにできなかった。
5. 終了コード2で CI を落とせる──確かめられた
崩した HTML は2、きれいな HTML は何も表示せずに0、存在しないフォルダは「cannot access」と出して1。--json を付けても2だった。example.com を調べたときは advisory が3件出たが終了コードは0で、参考扱いの指摘は失敗に数えていない。0・1・2がはっきり分かれているので、CI の判定にそのまま使える作りだ。ただし、実際の CI に組み込んで動かしてはいない。
6. URL を描画して調べる──一部確かめられた
ここが一番つまずいた。detect https://example.com をそのまま実行すると「No Chrome, Chromium, Edge, or Brave installation found」と出て、終了コード1で止まった。コンテナには Playwright の Chromium が入っていたが、Impeccable はそれを自分では見つけなかった。
環境変数 IMPECCABLE_BROWSER でその Chromium を指すと、今度は「Running as root without --no-sandbox is not supported」で起動に失敗した。--no-sandbox を付けて Chromium を起動するだけのシェルスクリプトを作り、それを指すとようやく動いた。example.com は通常の指摘0件・advisory 3件（straggler）で終了コード0。自分の崩した HTML を file:// で開くと3件で終了コード2になった。
ファイルとして調べたときは5件だったのに、描画モードでは overused-font（Inter）が消えた。コンテナに Inter が入っておらず、実際には代わりのフォントで描かれたからだと思われるが、確かめてはいない。同じページでも、調べ方によって指摘が変わることは覚えておきたい。
つまずいたところ
- URL を調べるモードは、入っている Playwright の Chromium を見つけず、IMPECCABLE_BROWSER での指定が要った
- root で動かすと Chromium のサンドボックスで落ちる。Docker や CI のように root で動く環境では、--no-sandbox を付けるスクリプトを挟む必要がある
- 小さいタップ領域を調べる規則が無い
- 描画モードでは Inter の指摘が消えた。JSX は文字列の照合だけで、font-[Inter] を見逃した
- JSON の line は0か1で、指摘した場所の行番号としては使えなかった
使うなら・待つなら
使うなら：エージェントに作らせた HTML や CSS を、マージ前に一度通す見張りとしてならすぐ使える。キーも設定も要らず、1秒前後で終わり、終了コードで CI を止められる。Inter・グラデーション文字・紫系の配色・小さすぎる本文といった「ありがちな顔」は、実際に見つけた。
待つなら・ほかと併せるなら：タップ領域の大きさのようなアクセシビリティの検査は、この検出器には入っていない。アクセシビリティ専用の検査道具と併用する前提で考えたい。コンポーネントを JSX で書いているチームは、文字列の照合しか効かない点も割り引いておく必要がある。URL を調べるモードを root のコンテナで使うなら、ブラウザの指定とサンドボックスの回り道を最初から用意しておくこと。
検証の条件
- 検証した日：2026年10月31日
- 環境：Ubuntu 24.04（arm64）、CPU 4コア、メモリ 6GB、GPU なし、ネットワークあり。Node.js 22・Python 3.12・uv・Playwright の Chromium を入れた状態
- バージョン：npm の impeccable 4.8.0（npx -y で取得）
- 実行：全27コマンド、0以外の終了コードは7回、コマンドの実行時間の合計は約15.6秒、最初から最後までで約93秒
- 描画モードで調べた自分の HTML は、裏で処理を動かさない決まりのため、ローカルサーバーを立てずに file:// で開いた
試していないこと：スラッシュコマンドでエージェントに UI を直させる使い方（LLM を走らせる必要があるため）と、作例にある改善の効果。ESLint やアクセシビリティ専用の検査道具との比較。Google Chrome そのものを入れた環境や、root 以外のユーザーでの実行。Inter を実際に入れた環境での描画モード。Vue や Svelte のファイル、大きな実プロジェクトでの検査と、誤検知の割合。CI への実際の組み込み。macOS や Windows での動作。
