デザイン用スキル+決まったルールで検出する仕組みで「AIっぽいUI」を潰す(Impeccable等)
エージェントにデザインの語彙(スキル)と、LLMを使わず決まったルールで判定する検出器を持たせ、作成→批評→仕上げを毎回同じ基準で回す。
どんな問題を解決するか / いつ使うか
エージェントのUIが「Inter・紫系グラデーション・カードの入れ子・絵文字アイコン」のような、どこかで見た見た目ばかりになるとき。
やり方
投稿で紹介されていた構成の例
- 作る:Anthropicの frontend-design スキル(Claude Codeでは
/plugin install frontend-design@claude-plugins-official) - 批評・仕上げ:Impeccable(作者 @pbakaus)
npx impeccable install→ エージェント上で/impeccable init- init で、製品の事実(利用者・目的・制約・トーン)を PRODUCT.md に、見た目の方向性を DESIGN.md に分けて書く
/impeccable critique/impeccable audit/impeccable polishなどのコマンドで、ページごとに批評→修正npx impeccable detect src/で、APIキー不要の決まったルールによる検出を実行(CI向けにJSON出力あり)
- 値の固定:色・余白・文字のトークンファイルを1つ用意し、エージェントがその場で値を作らないようにする(@rwspatin の構成)
- その他の候補として、taste-skill、Vercelの web design guidelines(UIコードをルールに照らしてファイル・行単位で指摘)、ブランド別のDESIGN.md集などが挙げられていた(@0xrux)
おすすめの組み方:作るエージェントと検証するエージェント(またはスキル)を分ける。検証は作業の最後に必ず実行するようにしておく。
注意点・対応状況
- 検出器の結果は1次チェックで、見た目の品質やアクセシビリティを保証するものではない(READMEにも限界が書かれているとのこと)。
- 自社ブランドのフォントや色がアンチパターンと判定されることがある。除外ルールを設定する。
- フック(自動実行)はツールごとに信頼設定が必要。まず1プロジェクトで試してから広げる。
- スター数やコマンド名は投稿時点の情報。導入前にGitHubで確認すること。
出典
- 投稿者: @superdoccimo(美濃加茂まむ)/ @rwspatin / @0xrux
- 投稿: @superdoccimo · 2026-10-02 / @rwspatin · 2026-10-04 / @0xrux · 2026-10-06
- 収集日: 2026-10-09(JST)