テック技報最新号へ →
デザイン

デザイン用スキル+決まったルールで検出する仕組みで「AIっぽいUI」を潰す(Impeccable等)

エージェントにデザインの語彙(スキル)と、LLMを使わず決まったルールで判定する検出器を持たせ、作成→批評→仕上げを毎回同じ基準で回す。

@superdoccimo · 2026-10-09
#AIデザイン#Claude#Codex#Cursor#スキル#Impeccable#レビュー#AIスロップ

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

エージェントの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で確認すること。

出典

X の元の投稿を開く