Impeccable：AIコーディングエージェント向けデザインガイダンス

pbakaus-impeccable-deep-analysis: AIコーディングエージェント向けデザインガイダンス

Impeccableは、AIコーディングエージェント向けのデザインガイダンスパッケージです。READMEによると、1つのスキル、23のコマンド、ライブブラウザ反復、AI生成フロントエンドデザインのための59の決定的検出ルールとして提供されます。クイックスタートは2ステップです。プロジェクトルートで`npx impeccable install`を実行し、AIコーディングツール内で`/impeccable init`を実行します。完全なドキュメントはimpeccable.styleにあります。

Impeccable は AI コーディングエージェント向けに、1 つの skill、23 個の command、59 個の決定的な検出ルールをまとめる。README の入口はプロジェクトルートで npx impeccable install を実行し、エージェント内で /impeccable init を呼ぶ二段階だ。init はブランドかプロダクトかを尋ね、後続の判断に使うデザインコンテキストを書き込む。

pbakaus-impeccable-deep-analysis: 存在理由

Impeccableは、Anthropicのfrontend-designスキルから始まりました。READMEはこれをClaudeで最初に広く使われたデザインスキルと呼んでいます。READMEによると、同じSaaSテンプレートで訓練されたモデルは繰り返しの兆候を生み出します。すべてにInter、紫から青へのグラデーション、カードの中のカード、色付き背景のグレーテキスト、各見出しの上の角丸四角アイコンタイルなどです。Impeccableは、統一されたセットアップフロー、共有コマンド語彙、59の決定的検出ルールとLLM専用の批評チェックを追加します。決定的ルールはLLMやAPIキーなしで実行されます。

コマンドには craft、critique、audit、polish、harden、animate、colorize、typeset、layout、live などがある。/impeccable pin <command> で個別のショートカットも作れる。名前の多さだけで効果を判断せず、対象 UI の変更前後と検出結果を同じ画面で比較する必要がある。

pbakaus-impeccable-deep-analysis: インストール方法

READMEには5つのインストール方法が記載されています。推奨されるCLIインストーラは`npx impeccable install`を実行し、`~/.claude`やプロジェクトローカルの`.cursor`などのハーネスフォルダを検出し、プロバイダやスコープをカスタマイズできます。`npx impeccable update`で既存のインストールを更新します。チームはリポジトリをGitサブモジュールとしてベンダリングし、コンパイル済みプロバイダビルドをリンクできます。Claude CodeとGrok Buildにはプラグインインストールがあります。impeccable.styleからZIPをダウンロードするか、特定のツール用にリポジトリからスキルフォルダを直接コピーすることもできます。READMEは、Codexユーザーがインストール後に`/hooks`を開いてプロジェクトフックを承認する必要があること、Grok Buildがプロジェクトフォルダの信頼を必要とすることを指摘しています。

npx impeccable detect src/ はディレクトリ、HTML ファイル、Puppeteer で開ける URL を対象にし、--json で CI 向けの出力を返す。紫のグラデーション、暗い glow、小さなタッチターゲット、見出しのスキップなどを検出するが、59 ルールがデザイン全体の品質を証明するわけではない。

pbakaus-impeccable-deep-analysis: コマンドセット

すべてのコマンドは`/impeccable`を通じて実行されます。`init`はサーフェスがブランドかプロダクトかを尋ね、後続のコマンドが読み取るデザインコンテキストを書き込みます。他のコマンドには`craft`、`document`、`extract`、`shape`、`critique`、`audit`、`polish`、`bolder`、`quieter`、`distill`、`harden`、`onboard`、`animate`、`colorize`、`typeset`、`layout`、`delight`、`overdrive`、`clarify`、`adapt`、`optimize`、`live`があります。`/impeccable pin <command>`でコマンドを固定して、スタンドアロンのショートカットを作成できます。READMEはまた、過剰使用フォント、色付き背景のグレーテキスト、ティントなしの純黒/グレー、カードの過剰使用、バウンスイージングなど、避けるべきアンチパターンを列挙しています。

install は Claude Code、Copilot、Codex、Cursor、Grok Build などのプロバイダ用フックも配置する。Codex では /hooks からプロジェクトフックを手動承認する必要があり、Cursor は不適切な提案書き込みを止める場合がある。.impeccable/config.json と hook.auditLog の扱いを確認し、生成された一時ファイルを git 管理に入れないことが重要だ。

pbakaus-impeccable-deep-analysis: 検出ルールとスタンドアロンCLI

Impeccableには、AIハーネスなしでアンチパターンを検出するためのスタンドアロンCLIが含まれています。`npx impeccable detect src/`はディレクトリ、HTMLファイル、またはPuppeteerでURLをスキャンします。`--json`はCIに適した出力を提供します。検出器は、サイドタブの境界線、紫のグラデーション、バウンスイージング、暗いグロー、行の長さ、窮屈なパディング、小さなタッチターゲット、スキップされた見出しなど、AIスロップと一般的なデザイン品質にわたる59の決定的問題をキャッチします。`.impeccable/config.json`と`config.local.json`の検出設定を尊重し、ファイルまたは行にスコープされたインライン無視コメントをサポートします。

pbakaus-impeccable-deep-analysis: デザインフック統合

Claude Code、GitHub Copilot、Codex、Cursor、Grok Buildでは、`npx impeccable install`と`update`がスキルとともにプロバイダネイティブのフックマニフェストをインストールします。フックは直接のUIファイル編集に対してデザイン検出器を実行し、結果をエージェントフローに返します。Cursorは不良な提案書き込みが着地する前にブロックします。インストーラは無関係なフックエントリを保持し、マニフェストが不正な場合は`--force`で再実行しない限り中止します。フックライフサイクルは`.impeccable/config.json`で設定可能です。`hook.auditLog`にパスを設定して、呼び出しごとのNDJSONログを記録できます。Codexはインストール後にプロジェクトフックの手動承認が必要です。

pbakaus-impeccable-deep-analysis: 作業ファイルと.gitignore

コマンドを実行すると、`.impeccable/`の下に作業ファイルが書き込まれます。批評とポリッシュのスクリーンショット、ライブモードのセッションとプレビュー状態、ランタイムキャッシュ、開発者ごとの設定です。そのほとんどは一時的なもので、コミットすべきではありません。READMEは、マーカーでラップされた`.gitignore`ブロックを提供し、`apps/web/.impeccable/`のようなネストされたワークスペースをカバーするために非アンカーパターンを使用しています。追跡するファイルは次のとおりです：`.impeccable/config.json`、`.impeccable/live/config.json`、`.impeccable/design.json`、`.impeccable/critique/*.md`。一時ファイルが以前にコミットされた場合は、`git rm --cached <path>`を使用します。

pbakaus-impeccable-deep-analysis: サポートされているツールとコミュニティ

READMEは、Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI、Grok Build、OpenCode、Pi、Kiro、Trae、Rovo Dev、Qoder、Mistral Vibe、Google Antigravityのサポートをリストしています。コミュニティとエコシステムのチャネルには、GitHub Discussions、npmパッケージ、Twitterアカウントがあります。貢献ガイドラインは`docs/DEVELOP.md`にあります。プロジェクトはApache 2.0ライセンスです。

編集部の結論

READMEには、5つのインストール方法、23コマンドのスキル、スタンドアロンの検出CLI、複数のAIコーディングツール向けデザインフックが記載されています。プロジェクトはApache 2.0ライセンスです。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes