GitHub Copilotアプリでデザイン支援スキル「Impeccable」実験的に利用可能に

GitHubは2026年6月22日、AIコーディングエージェント向けのデザイン支援スキル「Impeccable」をGitHub Copilotアプリの組み込みスキルとして利用できるようになったと公式Xで案内した。

GitHubのEvan Boyle氏はXで、GitHub CopilotアプリのExperimental settingsで/impeccableを有効化できると投稿している。

GitHub CopilotアプリのSettings内のExperimental画面では、⁠Impeccable design skill」という項目として表示される。説明文では、Apache-2.0ライセンスのスキルとして同梱され、任意の自動化スクリプトを使うにはPATH上のNode.js 18以上が必要だと案内されている。Node.jsがない場合は、デザインガイダンスのみになる。

Impeccableは、Paul Bakaus氏が開発したオープンソースのデザイン支援スキル。GitHub Copilotアプリでは組み込みスキルとしてExperimental画面から有効化できる一方、Claude Code、Codex CLI、Cursorなどでプロジェクトに導入する場合は、プロジェクトルートでnpx impeccable installを実行する。

このスキルは、AIコーディングエージェントとユーザーが共有できるデザイン語彙、プロジェクトごとの文脈、ルールベースの品質チェック、ブラウザ上での視覚的な反復作業を提供する。プロジェクトごとの文脈は、PRODUCT.mdDESIGN.mdなどプロジェクト側のファイルとして管理される。

ImpeccableのREADMEによると、AIコーディングツール内で使う初期設定用のスラッシュコマンド/impeccable initは、対象読者やブランドのトーン、避けたい方向性などを尋ね、それらを記録するPRODUCT.mdを作成する。色、書体、コンポーネントなどのデザインシステムを記述するDESIGN.mdの作成も提案する。操作用のコマンド群も用意されており、READMEでは、1つの/impeccableコマンド配下に「craft」⁠init」⁠critique」⁠audit」⁠polish」⁠typeset」⁠layout」⁠live」など23のコマンドを用意し、デザインレビュー、タイポグラフィ、レイアウト、モーション、UXコピー、ライブ編集などを扱えるとしている。

手元のプロジェクトで/impeccable initを実行してみると[1]、最初の質問で対象がプロダクト寄りか、ブランド/マーケティング寄りかを尋ねられた。そこで対象にしたいHTMLテンプレートと仕上げの方向性を伝えると、Impeccableはその対象に絞ってコードベースを確認した。続いて、PRODUCT.mdを作成するために次のような項目を順に尋ねられた。

  • 対象機能の主な利用者と用途
  • 仕上げで避けたいUIの方向性
  • PRODUCT.mdに記録するアクセシビリティ目標
  • 回答内容でPRODUCT.mdを書き出すか

その後、PRODUCT.mdが作成されると、既存のCSSトークンなどをもとにDESIGN.mdを生成するかを尋ねられた。

DESIGN.mdを生成後に続けて/impeccable polishを使うと、作成されたPRODUCT.mdDESIGN.mdを読み込んだうえで対象ファイルを調べ、デザイン方針に沿うようにファイルを変更する流れも確認できた。試した例では、HTMLテンプレートに対して、装飾的な背景の削除、フォントスタックの調整、フォーカス/ホバー状態の改善、コピー操作の分かりやすさやアクセシビリティ対応の調整などが行われていた。

Impeccableの主な用途は、AIが生成したUIにありがちな定型的な見た目や品質上の問題を、開発フローの中で見つけて直すことにある。公式サイトでは、紫から青へのグラデーション、カードの入れ子、見出しや本文の強弱が分かりにくい状態、低いコントラスト、意味の薄いモーション、重複したUXコピーなどを「AI slop」の例として挙げている。Impeccableはこうしたパターンを検出し、AIエージェントが生成したUIをプロジェクトのデザイン方針に近づけるためのフィードバックを返すという。

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

このバージョンでは、モノレポ対応も強化された。モノレポのルートを開いた場合、Impeccableはリポジトリ内のアプリケーションごとにPRODUCT.mdDESIGN.mdを解決し、各アプリケーション側に定義がない情報はルート側のファイルを参照する。/impeccable liveでは複数のアプリケーションを検出し、どれを対象にするかを確認してから、ライブ状態をそのアプリケーション内で管理する。

その前のv3.7.0では、デザインシステムを反映した検出も導入されている。プロジェクトにDESIGN.mdがある場合、UI編集後に実行されるフックやCLIコマンドimpeccable detectはローカルのデザインシステムを読み込み、ドキュメント化されたパレット、書体、角丸のスケールなどからのずれを検出する。これにより、一般的なAI生成UIの癖だけでなく、個別プロジェクトのデザイン方針から外れた色、フォント、角丸なども指摘できる。

今回のGitHub Copilotアプリへの組み込みは、Bakaus氏が立ち上げたRenaissance GeekとGitHubのパートナーシップを受けた動きでもある。Renaissance GeekはImpeccableを手がける会社で、Bakaus氏は同社がa16zの支援を受けていることも明らかにしている。

おすすめ記事

記事・ニュース一覧