Codex と Claude Code で Impeccable を使う方法。

Impeccable は、コーディングエージェントにデザインの語彙を与えます。bolder、quieter、critique、polish などのコマンドと、モデルを呼び出さずに AI 製のパターンを指摘するディテクターです。すでにある UI にいちばんよく効きます。このチュートリアルでは、Codex と Claude Code へのインストール、プロジェクトへの設定、最初に覚えたいコマンド、すべてを有効にする前に確認すべき設定を説明します。

2026年11月6日更新 · 約 8 分で読めます

Impeccable とは

Impeccable は、Paul Bakaus によるオープンソース（Apache 2.0）のデザインスキルです。Anthropic の frontend-design スキルから始まり、2 つのものに成長しました。bolder や quieter などのデザインの操作から critique や audit などのレビューまでの、名前の付いた 24 のコマンドと、AI っぽさと品質の問題を見つける 62 のルールを備えた、決まった手順で動くディテクターです。バージョン 4.8 は、Codex、Claude Code、Cursor、GitHub Copilot、Gemini CLI、そのほか多くのエージェントで動きます。

インストールする

プロジェクトのルートフォルダで次を実行します。

npx impeccable install

インストーラーはコーディングツールを見つけ、このプロジェクト用かすべてのプロジェクト用かを尋ね、エージェントが編集するすべての UI ファイルをチェックするデザインフックを提案します。そのあとツールを再読み込みしてください。

Codex： /hooks を開いてプロジェクトのフックを承認してください。そうしないと動きません。フックが変わる更新のあとも、同じことをします。Codex では、スラッシュコマンドではなく $impeccable（または /skills から）でスキルを呼び出します。
Claude Code： ここでもインストーラーが使えます。または /plugin marketplace add pbakaus/impeccable でプラグインを追加し、/plugin から Impeccable をインストールします。

Node が必要なのは npx を実行するときだけです。スキルは、~/.impeccable/bin/ に一度だけダウンロードされる小さなエンジンを実行します。更新するには npx impeccable update を実行します。

プロジェクトに設定する

プロジェクトごとに、一度だけ init を実行します。

$impeccable init      # Codex
/impeccable init      # Claude Code and most other agents

コードを読み、自分では判断できないこと（プロダクトの利用者、何ができるべきか、制約）だけを尋ねて、PRODUCT.md を書きます。以降のコマンドはすべてこのファイルを読みます。アプリにすでにビジュアルスタイルがあるなら、次に document を実行して DESIGN.md に記録しておくと、あとの変更もブランドに沿ったままになります。2 つのファイルは、リポジトリに置いておきましょう。

まず 1 つのコンポーネントから

Impeccable は、対象を絞ったときにいちばん効きます。ページ全体をざっと見るより、1 つのセクションをじっくり見るほうが役に立ちます。コマンドと対象を指定します。

/impeccable critique the pricing cards
/impeccable quieter the landing page hero
/impeccable typeset the settings page
/impeccable polish checkout

Codex では、/impeccable の代わりに $impeccable と書きます。「このヒーローセクションをやり直して」のように、やりたいことを説明するだけでもかまいません。

最初に覚えたいコマンド

グループ	コマンド	用途
調整	`bolder`, `quieter`, `distill`, `colorize`, `typeset`, `layout`, `animate`, `delight`, `overdrive`	デザインの一部を、はっきりした方向に寄せる
レビュー	`critique`, `audit`	スコア付きの UX レビュー、または P0 から P3 までの優先度が付いた技術レポートを得る
仕上げ	`polish`, `harden`, `clarify`, `adapt`, `optimize`, `onboard`	最終チェック、エッジケース、文言、画面サイズ、速度、初回利用時の状態
反復	`live`, `generate`	ブラウザで要素のバリエーションを試す
セットアップ	`shape`, `init`, `document`, `extract`	UX を計画し、コンテキストファイルを書き、繰り返すパターンをシステムにまとめる

最初のループの例：画面を critique し、quieter や typeset などの調整コマンドでいちばん大きな問題を直し、そのあと polish します。/impeccable だけを入力すると、使っているエージェントで全コマンドの一覧が表示されます。よく使うものは /impeccable pin audit でピン留めできます。

AI っぽさのディテクターを実行する

ディテクターは、AI っぽさ 31、品質 31 の計 62 のルールをチェックし、モデルも API キーも要りません。

npx impeccable detect src/                   # scan your source files
npx impeccable detect http://localhost:5173  # scan a rendered page in Chrome or Edge
npx impeccable detect --github src/          # annotations for GitHub Actions
npx impeccable detect --list-rules           # list every rule

ソースファイルにはパターンのルールが適用されます。コントラストの低さや小さすぎる文字のように、描画されたページが必要なルールは、URL をスキャンしたときだけ動くので、開発サーバーにも向けてください。問題を見つけると終了コード 2 で終わるので、CI のチェックを失敗させるのも簡単です。ブランドのフォントが「使われすぎのフォント」のリストに入っている場合は、npx impeccable ignores add-value overused-font Inter --reason "Brand font" で許可します。

先に確認したい設定

Claude Code では、フックはモデルの承認の外で動く。 インストール済みのフックは、モデルのコマンドを拒否していても実行されるので、最初の編集でエンジンがダウンロードされることがあります。無人で実行する前に、フックを確認してください。
ライブモードは、承認なしでエージェントを動かせる。 live モードで編集を適用するとき、聞いているチャットセッションがなければ、承認とサンドボックスをオフにした codex か claude の CLI を起動します。ライブモードを始める前に IMPECCABLE_LIVE_COPY_AGENT=chat を設定するとチャット内にとどめられ、off にすると無効になります。
テレメトリー。 新しいデザインは、impeccable.style のカタログからビジュアルの方向性を取得します。テレメトリーをオフにする（npx impeccable telemetry off か DO_NOT_TRACK=1）と、どの方向性を選んだかの匿名の記録は止まりますが、このリクエスト自体は止まりません。
うまく動かない？ /impeccable doctor が、古くなったコンテキストファイルや壊れたフックを見つけます。

よくある質問

Impeccable は無料ですか？

はい。Apache 2.0 ライセンスのオープンソースです。

Impeccable は Codex で使えますか？

はい。npx impeccable install を実行し、/hooks でプロジェクトのフックを承認して、$impeccable で呼び出します。

Impeccable でモバイルアプリをデザインできますか？

はい。Web サイトだけでなくアプリの画面も扱い、iOS と Android のリファレンスがあります。ほかの選択肢との比較は、Taste Skill・Impeccable・UI UX Pro Max の比較を参照してください。