pbakaus/impeccable

コーディングエージェントに、画面のデザインをまともにさせるための道具立て。Anthropic が公開した frontend-design スキルから始めたものだ、と作者は書いている。問題意識ははっきりしていて、どのモデルも同じような SaaS のテンプレートで学習しているので、放っておくと同じ癖が出る——書体は何でも Inter、紫から青のグラデーション、カードの中にまたカード、色のついた背景に灰色の文字、見出しの上に必ず置かれる角丸のアイコン。この「AI が作った感じ」を、道具の側で潰しにいく。

入口は1つのスキルで、その下に23のコマンドが並ぶ。polish（仕上げ）、audit（技術面の点検）、critique（UX のレビュー）、distill（削ぎ落とす）、bolder / quieter（強める・抑える）、animate、harden（例外やはみ出しの処理）といった具合に、AI と共有する言葉としてコマンドが用意されている。最初に一度 init を実行すると、誰のための製品か・目的・制約・語り口といった変わりにくい事実が PRODUCT.md に書き出される。見た目の方向性はそれとは別に DESIGN.md に記録され、混ざらないように分けてある。

面白いのは、LLM を一切使わない検査が付いていること。61個の決め打ちのルールを持った検出器があり、上に挙げたような癖に加えて、行が長すぎる、余白が詰まりすぎ、押せる領域が小さい、見出しの階層が飛んでいる、といった一般的な品質の問題も機械的に拾う。ディレクトリでも HTML ファイルでも公開中の URL でも走らせられて、JSON で出せば CI に載せられる。API キーは要らない。さらに、フックに対応している5つのツール（Claude Code、GitHub Copilot、Codex、Cursor、Grok Build）では、画面のファイルを編集すると、その場でこの検出器が走る。指摘の戻り方は3通りで、Cursor は書き込む前に止める。Claude Code・GitHub Copilot・Codex は編集のあとに返す。Grok Build だけは、走るのは編集のあとでも、指摘が届くのは手が止まったときになる。

エージェントに書かせた画面が、毎回同じ顔になるとき

出てきたものを見て「なんか見たことある」と思うが、どこを直せと言えばいいか出てこない——という状態を、言葉のほうから崩しにいく道具になる。bolder／quieterのように、方向だけを指す言い方が最初から用意されている。

直す基準を、レビューする人の目から外に出したいとき

「余白が狭い」「その紫はやめて」を毎回言うのは続かない。言う側が疲れるうえ、言い忘れた回だけ抜ける。決まった型の指摘は、LLM を通さない検査のほうに渡してしまえる。

検査が通っても、デザインが良い証明にはならない。 README 自身が「検出器がきれいでも、視覚やアクセシビリティの品質が保証されるわけではない。画面を実際に見るのを置き換えるものではない」と断っている。避けるべきものを避けたかどうかしか見ていない。

フックの動きは先に把握しておいたほうがいい。 Claude Code では、入ったフックがモデルへの承認とは別に走る。README も「最初の編集でエンジンを取りに行くことがあるので、無人で回す前に入っているフックを確認してほしい」と注意している。人が見ていない自動実行に組み込む前に、ここは読んでおく場所になる。

ライブモードは手元専用。 ブラウザ上で要素をいじる機能は、手元の開発サーバーか静的 HTML に対して使うもので、公開中の本番サイトに差し込むのは非対応と明記されている。動かすためにブラウザの保護や CSP を緩めるな、とも書いてある。公開中のページを見たい場合は、URL を検査するほうを使う。

規則には好みの向きがある。 「よく使われる書体は避ける」といった項目は、ブランドで書体が決まっている場合と正面からぶつかる。個別に除外する仕組みは用意されているので、自分たちの決まりのほうを先に持っているなら、外す作業が要ると思っておくほうがよい。

ライセンスは Apache 2.0。