Impeccable

Impeccableとは？

Impeccableは、AIコーディングエージェント向けのオープンソースデザインスキルです。Claude Code、Codex、Cursor、GitHub Copilotなどのコーディングツールに導入され、エージェントにデザインの指針、名前付きデザインコマンドの語彙、AI生成フロントエンドが繰り返しがちなUIパターンを調べる自動チェッカーを提供します。

Impeccable デザインスキルは、UIのゼロからの構築、既存UIの改善、既存デザインシステムへの忠実さを可能にするデザインの専門性をエージェントに与えるものと位置づけられています。リポジトリはパッケージを、1つのスキル、24のコマンド、ブラウザでのライブ反復、AI生成フロントエンドデザイン向けの61の決定論的検出ルールと要約しています。

公式サイトはPaul Bakausを作者とし、新規インストールではRenaissance Geek, Inc.が署名したエンジンがダウンロードされ、同社はImpeccableのChrome拡張機能の開発元にも記載されています。プロジェクトREADMEによると、Anthropicのfrontend-designはClaude向けに初めて広く使われたデザインスキルで、Impeccableはそれを出発点にしています。

「Impeccable」は無関係の企業も使う一般語でもあり、本ページはpbakaus/impeccableリポジトリ公開のデザインスキルを扱います。

2026年10月5日の取得記録では、このリポジトリはApache-2.0ライセンスで76.3kのスターを表示し、同日、拡張機能のストアページは60,000人のユーザーを表示していました。

主な機能

すべてはメインスキル /impeccable 1つで動作し、後にコマンドか普段の言葉の依頼を続けます。audit、polish、critiqueなどのコマンドは別途インストール不要です。

コマンドの分類

コマンドリファレンスはコマンドを作成（2）、評価（2）、洗練（8）、簡素化（3）、堅牢化（4）、システム（5）の6グループに分けています。

• 作成：impeccableは作成・改善対象の説明を受け取り、shapeはアイデアを実装可能なデザインブリーフにします。
• 評価：auditは実装の問題を見つけて修正に優先順位を付け、critiqueはデザインの足を引っ張る点を見つけます。
• 洗練：animate、bolder、colorize、delight、layout、overdrive、quieter、typesetはそれぞれモーション、色、タイポグラフィなど1つの質を高めます。
• 簡素化：adapt、clarify、distillは他のデバイス、より明確な次のステップ、散らかりの軽減を扱います。
• 堅牢化：harden、onboard、optimize、polishは失敗状態、初回実行、速度、仕上げを担います。
• システム：init、document、extract、generate、liveはコンテキスト、デザイン記録、共有コンポーネント、バリエーションを管理します。

よく使うコマンドは /impeccable pin critique のようにショートカットに固定でき、依頼はメインスキルに転送されるため、その改良がそのまま反映されます。

PRODUCT.mdとDESIGN.mdのプロジェクトコンテキスト

Impeccableはユーザーとその目標を一度だけ尋ね、そのコンテキストをPRODUCT.mdに保存して以降のデザイン作業前に読み込みます。documentコマンドはUIを読み取り、色、タイポグラフィ、コンポーネントのルールをDESIGN.mdに記録し、次のページや次のエージェントも同じ決定に従えるようにします。Impeccableを更新すると自身のインストール済みファイルが置き換わり、プロジェクトのPRODUCT.mdとDESIGN.mdはそのまま残ります。

AIスロップと品質問題の検出器

AIスロップ検出器は言語モデルなしで動作する部分です。カタログは61の検出ルールと、デザインレビュー用に確保された6パターンを掲載しています。チェックは低コントラスト、はみ出したテキスト、よくあるAIデザインパターン、文書化されたデザインシステムからのずれなどの問題を探します。

• ターミナルスキャン：npx impeccable detectはフォルダー、ファイル、URLを受け付け、URLスキャンではデフォルトで1280 × 800のブラウザでページをレンダリングします。
• 機械可読な結果：JSONフラグはスクリプトやCI向けで、終了コードは主要な検出なし（0）、主要な検出あり（2）、スキャンできない対象（1）を示します。
• ソースの範囲：HTMLスキャンはリンク先のローカルCSSを含み、JSX、TSX、Vue、Svelte、Astro、スタイルシートはソースチェックの対象です。
• デザインシステムチェック：ローカルにDESIGN.mdがあれば、そこに記載のフォント、色、角の丸み、文字サイズもチェックされます。
• 範囲を絞った例外：使いすぎと指摘されたブランドフォントのような意図的な選択は、ルールを有効にしたまま値単位で無視できます。

デザインフック

デザインフックはエージェントがUIファイルを扱う間に検出器を実行するため、変更がまだコンテキストにあるうちに検出結果が届きます。Claude CodeとCodexは編集ごとに的を絞ったフィードバックを受け、ターン終了時にはより広いチェックも受けます。GitHub Copilotは対応する編集後に検出器全体を実行し、Cursorでは検出結果が、エージェントの修正まで提案された書き込みをブロックできます。

ライブモードとgenerate

ベータ表示のライブモードでは、実行中ページの一部を選んでその場で3つのバリエーションを比較したり、「方向づけ」機能でページ全体を導いたりでき、採用したバージョンはソースコードの一部になります。要素と方向性をすでに言えるなら、generateコマンドがチャットから同様の比較を始めます（例：generate 料金カードの大胆なバリエーションを3つ）。

デザインの方向性とモックアップ

新しい作業では、それぞれ独自のビジュアルルールを持つ、人間がレビューしたデザインの方向性を参照し、プロダクトから取り出したアイデアと比較検討します。画像生成があればモックアップ先行（comp-led）で進められ、なければコードで直接作り（code-led）、こちらはまとまりよく見えやすい一方、たいてい大胆さに欠けます。

ガイド

はじめに

始めるにはコーディングツール、プロジェクトフォルダー、Node.js 22.18以降が必要で、空のプロジェクトやスキャフォールド直後のアプリでも構いません。

1. プロジェクトルートのターミナルでnpx impeccable installを実行し、コーディングツールとインストール先（このプロジェクトか全プロジェクトか）を選び、ツールを再読み込みします。
2. エージェントチャットで /impeccable init を実行し、プロジェクトの対象者に関する質問に答え、生成されたPRODUCT.mdを読んで誤解を直します。
3. 既存のビジュアルシステムがあれば、先に /impeccable document を実行します。
4. /impeccable hooks on で自動チェックを有効にし、ツールのフック承認またはワークスペース信頼の手順を済ませます。
5. 最初のタスクを普段の言葉で説明します。たとえば /impeccable polish 料金ページ と書くか、新しいページを依頼して誰向けかを伝えます。
6. 結果を開き、狭い画面でも主な操作を試し、コード変更をレビューします。

アップデートとチーム共有のバージョン

インストーラーで導入した環境はnpx impeccable updateで更新し、npx impeccable checkで新バージョンの有無を確認します。マーケットプレイス経由ならツールのプラグインマネージャーで更新します。チームは代わりに、記録した1つのバージョンをGitサブモジュールとして持ち、各自のツールにリンクもできます。

Impeccableのユースケースと例

• 動いているページの仕上げ：polishは既存デザインの範囲内で余白、タイポグラフィ、ラベル、インタラクション状態を洗練します。
• リリース前のページチェック：指定ページのauditは、アクセシビリティ、パフォーマンス、レスポンシブ挙動など実装上の問題をレビューします。
• ブリーフから始める：ページと対象者、訪問者ができるべきことを説明し、モックアップ先行のワークフローでは実装前に構図を承認します。
• プルリクエストの関門：CLIはビルドで利用できる検出結果と終了コードを返すため、プルリクエストのUI変更を自動でチェックできます。
• 繰り返すパターンをシステムに：extractは繰り返されるUIパターンを、後のページで再利用できる共有コンポーネントとスタイルにまとめます。

対象ユーザー

• デザインやAIコーディングツールの初心者：デザインの経験や語彙は不要で、何を作るのか、誰のためか、どこに違和感があるかを説明します。
• コードに移ってきたデザイナー：2026年7月のインタビューで、作者は今ではデザイナーが利用者の少なくとも半分を占めると推定しています。
• 確立されたデザインを持つチーム：プロジェクト既存の色、コンポーネント、ルールで構築・洗練するため、新しいページも同じプロダクトの一部に感じられます。

次の2つの場合はあまり向きません。

• ネイティブモバイル開発：フックはWebコードをチェックし、PRODUCT.mdでios、android、adaptiveと宣言されたプロジェクトはスキップします。ネイティブUIのレビューにはauditが推奨されます。
• 1回のプロンプトで完成デザインを期待する場合：作者は、これがワンショットのデザインツールになることは決してないと述べています。

プラットフォーム

対応コーディングツールには、Claude Code、Codex、Cursor、GitHub Copilot、Gemini CLI、OpenCode、Piなどがあります。

Claude Code デザインスキルとして、Impeccableはインストーラーからスキルファイル以上を受け取り、Claude Code、Cursor、Codex、GitHub Copilot、Grok Buildでは現在のプロジェクトにプラットフォームネイティブのフックマニフェストも追加されます。

ライブモードは実行中の開発サーバー上のWebページやローカル静的HTMLで動作し、対応フレームワークにはViteベースのアプリ、Next.js、SvelteKit、Astro、Nuxtがあります。コーディングツールの外では、Chrome拡張機能がDevToolsにImpeccableパネルを追加し、検査対象に選んだページのデザインの問題を表示します。

価格

Impeccableの公開スキル、コマンド、CLI、検出エンジンは無料かつApache 2.0ライセンスのオープンソースで、実際の費用は周辺ツールで生じます。

• コーディングツールとモデルの利用：コーディングツールやモデルプロバイダーは画像生成を含む利用に課金する場合があり、その料金はImpeccableとは別です。
• 画像生成：Codexの組み込み生成はCodexの利用上限にカウントされ、OpenAI APIの代替手段は自分のAPIプロジェクトに課金され、モックアップや修正のたびにリクエストが1回増えることがあります。

プライバシーポリシーにはImpeccable Proのウェイトリストの記載もあり、Pro準備完了時に知らせるため登録メールアドレスを保存するとしています。確認したページにProの機能や価格の公開はありませんでした。

Impeccableの代替ツール

フロントエンドデザインスキルの独立系まとめ記事では、ほかに2つのエージェントスキルがImpeccableと並んで登場します。

Anthropicのfrontend-designは、Impeccableが出発点にしたフロントエンドデザインスキルで、新規UIの作成や既存UIの作り直しで、個性的で意図あるビジュアルデザインを行うための指針だと自らを説明しています。ImpeccableのREADMEは自身の追加分を、1つのセットアップフロー、24のコマンド、CLIとブラウザ拡張機能がLLMもAPIキーも使わずに実行する61の決定論的検出ルールと位置づけています。

taste-skillはMITライセンスの移植可能なエージェントスキル群で、テンプレート風UIより優れたレイアウト、タイポグラフィ、モーション、余白を目指しており、リポジトリにはWeb、モバイル、ブランドキットの参考ボード向け画像生成スキルも含まれます。

制限事項

• WebのUIのみ：検出器はWebのUIをチェックし、ネイティブのiOSやAndroidの作業はauditへ案内し、ライブモードもネイティブのiOSやAndroidのUIには接続しません。
• ライブモードはまだベータ：ドキュメントは試用可能としていますが、珍しいプロジェクト構成ではまだトラブルシューティングが必要な場合があります。
• 報告されたソース書き込みの不具合：2026年9月のある公開イシューでは、Next.js 16とReact 19のプロジェクトでライブモードが無効なTSXをソースに書き込み、git diffとTypeScriptのチェックでようやく発見されたと説明しています。バージョン4.4.0に対する2件目は、複数行のJSX要素の位置を特定できず、代替の破棄・復元ステップが元の要素を削除しうると報告しています。
• 問題なしでもデザイン評価ではない：問題なしの結果は、これらのチェックで報告すべき問題が見つからなかったことを示すだけで、デザイン全体を判断するコマンドはcritiqueです。
• フックはツールに依存する：たとえばCodexは、ImpeccableのPostToolUseとStopのフックをユーザーが確認して信頼した後にのみ実行し、何も表示されないのは問題のない編集、静音モード、無効なフックのいずれかの場合があります。
• モックアップはコード化で細部を失う：画像からコードへの変換は非可逆なので、モックアップの個性や細部の一部は変わるか失われ、ドキュメントは数回のプロンプトとレビューを見込むよう案内しています。
• 公開当初の反応：一般公開の頃のある開発者フォーラムのスレッドで、何人かのコメント者が公開されたビフォーアフターの例を元より悪いと評価し、うち一人は有用な情報の大半を失ったダッシュボードを指摘しました。作者はそれらの例を急ごしらえだったとして削除し、語彙でユーザーやLLMが優れたデザイナーになるわけではないと書いています。

プライバシーとデータの取り扱い

• プロジェクトのチェックはローカルで実行され、プロジェクトファイルや検出結果をImpeccableのサーバーにアップロードしませんが、コーディングツールはプロンプト、ファイル、スクリーンショット、その他のコンテキストを自身のAIプロバイダーに送る場合があります。
• バージョン確認は通常1日最大1回実行され、プロジェクト内容は送信されず、IMPECCABLE_NO_UPDATE_CHECK=1で無効にできます。
• デザイン方向性のリクエストではランダムな抽選キー、スコープ、任意のフィルターを送信しますが、プロジェクト名、ファイルパス、プロンプト、ブリーフは送りません。任意の選択レポートはIMPECCABLE_NO_TELEMETRY=1またはDO_NOT_TRACK=1で無効にできますが、カタログやプレビュー画像のリクエストは止まりません。
• 画像ジェネレーターはOPENAI_API_KEYで実行すると画像プロンプトと参照画像をOpenAIに送信し、そのプロンプトにはプロジェクトの詳細が含まれる場合があります。
• 公式サイトはトップページでGoogle Analyticsを、全ページでPostHogを使用し、ページビュー、クリック、コピーされたコマンド、選んだインストール方法を記録します。
• Chrome拡張機能はページスナップショットと検出結果をローカルで処理しますが、ユーザーが選んだサイトを検査できるよう、すべてのURLへのアクセスを要求します。

よくある質問

Q1. Impeccableは無料ですか？

はい。公開スキル、コマンド、CLI、検出エンジンはApache 2.0ライセンスで無料です。コーディングツール、モデルプロバイダー、画像生成による利用料金は、各プロバイダーが別途請求します。

Q2. 検出器にAIモデルやAPIキーは必要ですか？

いいえ。検出器とデザインフックはAIモデルやAPIキーなしでコードとして動作します。エージェントのデザイン作業だけがそのモデルを使います。

Q3. liveではなくgenerateを使うのはいつですか？

欲しい要素と方向性を言えるときはgenerateを、ブラウザセッション中に自分で要素を選んだり、注釈を付けたり、ページ全体を導いたりしたいときはライブモードを使います。

Q4. iOSやAndroidのアプリに使えますか？

一部のみ使えます。検出器、フック、ライブモードはWebのUIを対象とするため、ドキュメントはネイティブのレビューにauditコマンドを勧めています。