AIが作ったUIは綺麗なのに刺さらない。GitHub Copilot組み込みのImpeccableが仕上げ工程を単価に変える

AIに画面を作らせると、見た目はそれっぽいのに何も売れない。紫から青のグラデーション、入れ子のカード、薄いコントラスト、意味の弱いモーション。自分は10年以上の現役エンジニアで、副業でAIエージェントを複数運用しているのだけど、AIが吐き出すUIの『綺麗だけど刺さらない感』に何度もぶつかってきた。

2026年6月22日、GitHubがその課題への答えを公式に押し出した。Impeccable(開発: Paul Bakaus氏 / Renaissance Geek)というデザイン支援スキルが、GitHub Copilotアプリの組み込みスキルとして、Experimental設定から利用できるようになった、と公式Xで案内している。Claude CodeやCursorでもnpxコマンド一発で入る。AIに『何を作らせないか』を先に教える側に回れる仕組みだ。

AIが生成したUIが「それっぽいけど稼げない」理由
ImpeccableがGitHub Copilotに組み込まれた意味
1. Claude CodeやCursorでもnpx一発で入る
デザイン語彙をプロジェクトで共有すると単価が変わる
副業エンジニアがImpeccableを導入する3ステップ
まとめ
参考
【PR】フリーランスエンジニアにおすすめのツール
【PR】おすすめの書籍
1. あわせて読みたい

AIが生成したUIが「それっぽいけど稼げない」理由

ChatGPTやClaude、Copilotに『LPを作って』『管理画面のダッシュボードを作って』と頼むと、それっぽい画面が返ってくる。グラデーションのヒーロー、整列したカードリスト、CTAボタン、3カラムの機能紹介、フッター。組み立ては正しい。ただ、コンバージョンが鈍い。リードが来ない。問い合わせフォームが押されない。

Impeccableの公式サイトでは、AIが吐く定型のUI問題を『AI slop(AI製の粗悪パターン)』として列挙している。紫から青のグラデーション、カードの入れ子、見出しと本文の強弱が曖昧、低コントラスト、意味の薄いモーション、重複したUXコピー。並べられると心当たりしかない。

問題はこの定型が『悪く見えない』ことにある。ぱっと見の完成度は高い。テンプレとしては整っている。技術的に壊れているわけでもない。だから直す動機が湧かないまま放置される。そして、ユーザーの目には『AIが作った量産品』として映る。差別化要素ゼロのページに人は財布を開かない。

副業や受託の現場で言えば、これは単価に直結する話だ。納品物の8割がAI生成のテンプレ顔をしていれば、クライアントは『これ自分でもChatGPTに頼めるのでは』と思う。価格交渉の主導権はクライアント側に行く。逆に、AI生成のクセを検出して整えるレイヤーを持っている人は、納品物が同じ工数でも『AIで仕上がった量産品』に見えない。差を作るのは生成スピードではなく、生成後の仕上げ工程になりつつある。

ImpeccableがGitHub Copilotに組み込まれた意味

Impeccableは、Paul Bakaus氏が開発したオープンソースのデザイン支援スキルで、Apache-2.0ライセンスで配布されている。これまでもClaude CodeやCodex CLI、Cursorに入れて使うことはできたが、2026年6月22日の発表で、GitHub Copilotアプリ側に組み込みスキルとして同梱されるようになった。

GitHubのEvan Boyle氏が公式Xで案内した内容によると、GitHub CopilotアプリのSettings → Experimentalで『Impeccable design skill』を有効化し、コマンド /impeccable で呼び出せる。任意の自動化スクリプトを動かすにはPATH上のNode.js 18以上が必要で、Node.jsが無い環境ではデザインガイダンスのテキスト出力のみになる、と説明されている。

この組み込みの背景には、Bakaus氏が立ち上げたRenaissance GeekとGitHubのパートナーシップがある。Renaissance Geekはa16zからの支援を受けていることも、Bakaus氏自身が明らかにしている。要するに『AI生成UIの粗悪パターン検出』という領域に、まともな資本とプラットフォームが付き始めたという話だ。

副業エンジニアにとって何が大事かと言うと、『AIにUIを書かせる人』が次の段階に進んだという事実だ。生成の量だけ競う段階は終わりに近い。次に効くのは、生成された大量のUIを誰がどの基準で仕上げるか。Impeccableはその仕上げ工程に名前と仕組みを与えた、と読める。

Claude CodeやCursorでもnpx一発で入る

GitHub Copilotアプリの組み込み以外で使う場合、プロジェクトルートで以下を実行するとセットアップされる。

npx impeccable install

Claude Code、Codex CLI、Cursor、いずれの環境でもこの一行で入る。インストール後は /impeccable 配下に23のサブコマンドが用意されていて、READMEによれば init craft critique audit polish typeset layout live などが揃う。デザインレビュー、タイポグラフィ、レイアウト、モーション、UXコピー、ブラウザ上でのライブ編集まで一通り触れるという作りだ。

中心になるのは /impeccable init で生成される2つのファイル、PRODUCT.md と DESIGN.md だ。PRODUCT.mdは『誰のための、何のための画面か』を記録する。対象読者、ブランドのトーン、避けたい方向性、アクセシビリティ目標などが対話形式で聞かれて書き出される。DESIGN.mdは『色、書体、コンポーネントなどのデザインシステム』を記述する。既存のCSSトークンがあれば、それを下敷きに生成される設計になっている。

2026年6月22日に公開されたv3.8.0では、GitHub Copilot向けのデザインフックも追加された。Changelogによれば、プロジェクトにインストールすると .github/hooks/impeccable.json が追加され、CopilotがUIファイルを編集した直後にデザイン上の問題を検出する処理が走る。検出結果はエージェント向けに要点を絞ったリマインダーとして返ってくる。Copilot CLIとクラウドエージェントが対象で、apply_patchツールを含むCopilotの編集経路も認識する、と説明されている。

さらにv3.7.0では、プロジェクト固有のデザインシステムを反映した検出が導入されている。DESIGN.mdがある場合、UI編集後のフックや impeccable detect コマンドはローカルのデザインシステムを読み込み、ドキュメント化されたパレット、書体、角丸スケールなどからの逸脱を指摘してくれる。つまり、汎用的な『AI slop』検出だけではなく、『このプロジェクトのデザイン方針から外れた色や角丸』も拾える。

デザイン語彙をプロジェクトで共有すると単価が変わる

ここからが副業エンジニア側の話だ。Impeccable本体の機能紹介より、自分はこの設計思想そのものに価値があると考えている。要点は3つ。

1つ目は、AIに渡す前提が標準化される点。PRODUCT.mdとDESIGN.mdというファイル形式で『対象読者・避けたい方向性・色・書体』がプロジェクト内に残る。AIに指示を出すたびに同じ前提を口頭で繰り返さなくていい。

自分も日々のAI運用で、CLAUDE.md(Claude Code向けのプロジェクトルール定義ファイル)に『誰向けに書くか』『避けたいトーン』『口調』『使ってはいけない用語』を書いて回している。これがあるのと無いのとで、生成物の手戻り時間が体感で半分以下になる。AIが速く動いてくれても、毎回方向修正で30分削られていたら効率は出ない。前提を共有してから走らせるのが結局一番速い、というのが運用してみて分かったことだ。Impeccableはそれをデザイン領域で形にしたと言える。

2つ目は、ルールベースの品質チェックが入ること。生成後にAIエージェントが自分で『この画面はプロジェクトのデザイン方針に合っているか』を確認する経路が用意される。人間が目視で気づかなければならなかった『AIっぽさ』が、機械可読のチェックポイントに落ちる。

副業や受託で効くのはここだ。納品物のレビューで『なんか違うけど何が違うか言語化できない』クライアントに、根拠を持って説明できる。『DESIGN.mdに定義した角丸スケールから逸脱しているのでこちらに揃えました』『色のコントラスト比がアクセシビリティ目標を下回るので調整しました』と言える人は、価格交渉の場で言葉を持っている。

3つ目は、AIエージェントへの拡張可能性だ。Impeccableのフックは、Copilotの編集経路を認識して動く。つまり『AIが書いた直後に別のAIが検査する』という二段構えがプロジェクトに組み込まれる。一人の人間がAI生成物を全部レビューする運用は早晩スケールしなくなる。検査側もAIで回す前提に、ようやく仕組みが追いついてきた印象だ。

ここで強気な未来予測はしないでおく。デザイン語彙の標準化が定着するかは、ライブラリ単体ではなくエコシステム全体の動き次第だ。ただ、GitHub Copilotアプリに組み込まれた、Renaissance Geekにa16zが付いた、という2つの事実は、少なくとも『無視はできない流れになりつつある』ことを示している。差別化につながる可能性は十分ある、という程度には言える。

副業エンジニアがImpeccableを導入する3ステップ

実際に手を動かす場合の入り方を整理しておく。元記事の著者は手元のプロジェクトで /impeccable init を実走させて挙動を確かめている。その流れを参考に、副業の受託案件や自分のサービスに組み込む場合の最小手順を3ステップにまとめた。

ステップ1: 対象を絞って PRODUCT.md を作る

まずプロジェクトルートで /impeccable init を実行する。最初に『プロダクト寄りか、ブランド/マーケティング寄りか』が聞かれる。受託案件なら、対象がアプリの管理画面なのか、コーポレートサイトのLPなのかで答えが分かれる。

そのあと、対象機能の主な利用者と用途、仕上げで避けたいUIの方向性、アクセシビリティ目標が順に聞かれる。ここをサボると後段の検出精度が落ちる。『AIっぽいテンプレUIは避けたい』だけだと弱い。『紫青のグラデは避けたい』『見出しのウェイトを上げて本文との階層を明確にしたい』『コントラスト比はWCAG AA基準を下回らない』のように、具体的に答えるほど後の polish が効く。

対話の最後に『回答内容で PRODUCT.md を書き出すか』が聞かれる。書き出して、コミットしておく。これがプロジェクトの『デザイン憲法』になる。

ステップ2: 既存のCSSトークンから DESIGN.md を生成する

PRODUCT.md が出来ると、続けて『既存のCSSトークンなどをもとに DESIGN.md を生成するか』を聞かれる。すでにCSS変数やTailwindのテーマ定義がある案件なら、それを読ませて生成させる。ゼロから書くより、既存資産の言語化として走らせる方が早い。

DESIGN.mdには色、書体、コンポーネント、角丸スケール、影、スペーシングなどが記述される。ここまで揃うと、AIエージェントは『このプロジェクトの色はこの3色、書体はこの2種類、角丸は4/8/16の3段階』という前提を持って編集できるようになる。

モノレポを扱っている場合は v3.8.0 の挙動も覚えておくと得だ。リポジトリのルートを開くと、Impeccableはアプリケーションごとに PRODUCT.md と DESIGN.md を解決し、アプリ側に定義がない情報はルート側を参照する。クライアントのモノレポ案件で『管理画面と公開サイトでデザイン方針が違う』みたいな構成にも自然に乗る。

ステップ3: /impeccable polish で実走する

最後が実走だ。対象のHTMLテンプレートやコンポーネントファイルに対して /impeccable polish を走らせる。元記事の著者が試した例では、装飾的な背景の削除、フォントスタックの調整、フォーカス/ホバー状態の改善、コピー操作の分かりやすさ、アクセシビリティ対応の調整が自動で入ったと書かれている。

ここでのコツは、ステップ1と2をサボらないことに尽きる。PRODUCT.mdとDESIGN.mdが薄いと、polishの判断材料が弱くなって出力もブレる。逆に、ここを丁寧に書いておくと、polishの結果は『このプロジェクト向けに調整された仕上げ』として安定する。

副業の納品物にこの工程を1枚噛ませるだけで、レビュー指摘の戻りが目に見えて減る。手戻りが減れば1案件あたりの実働時間が縮む。同じ請求額でも時給換算は上がる。これが『単価が変わる』の実態だ。

まとめ

・AIが生成するUIには『AI slop』と呼ばれる定型パターンがあり、刺さらない見た目の温床になっている・Impeccable(GitHub Copilot組み込みスキル、開発: Paul Bakaus氏 / Renaissance Geek)はAI slop検出とプロジェクト固有のデザイン方針照合を提供する・副業エンジニアは PRODUCT.md と DESIGN.md でデザイン語彙を共有し、polishで仕上げる3ステップで単価交渉の根拠を持てる