生成コーディングエージェントは強力ですが、放っておくと視覚的な乱雑さ——予測可能なグラデーション、キャリブレーションされていないスペーシング、肥大化した古いコンポーネント構造——に陥りがちです。ImpeccableはPaul Bakausが作成したデザインスキルパッケージで、Claude Code、Gemini CLI、Codex CLI（およびCursorやGitHub Copilot）内で直接実行され、厳格な美観ガードレールを強制します。同じルールセットが各ハーネス用に再コンパイルされています。

意図的なスキル設計を適用することで、エージェントを汎用的なパターンから遠ざけ、精密で高品質なWeb体験へと導くことができます。

スキル設計とは何か、なぜAIエージェントにとって重要なのか？

スキル設計とは、非決定的なAIモデルに対して決定的なレールを構築する実践です。エージェントに「もっと良く見せて」や「パフォーマンスを改善して」と無限に依頼する代わりに、コンパイル済みのDESIGN.mdと機能的ディレクティブを注入し、エージェントが毎回の反復で必ず従うようにします。

ImpeccableはAnthropicのfrontend-designスキルを基盤にし、23のコマンドを追加してモデルとの共有デザイン語彙を提供します。また、58の決定的なアンチパターン検出ルール（デフォルトのInterフォント、パープルからブルーへのグラデーション、カードのネスト、背景色上のグレー文字、すべての見出しの上に配置された丸いアイコンタイルなど）を備えています。AIをあなたの美観を推測するジュニア開発者から、あなたが実際に定義したビジュアルルールの厳格な実装者へと変えます。

モダンWebアプリ向けのImpeccable制約の実装

このワークフローを組み込む際、精度がすべてです。Impeccableは既存のデザインシステムを上書きするのではなく尊重します。実行時にコードベース（トークン、コンポーネント、Tailwind設定）をスキャンし、独自のDESIGN.mdからブランドルールを読み込むため、汎用的な美観を押し付けることはありません。あなたのアイデンティティがミニマリストな外観に基づいている場合、それを強制する正しい方法は、そのファイルに自分で宣言することです——限定されたグリーン＆ピンクのパレット、#0c1624のダークベース背景、タイポグラフィとトーンオブボイス——それにより、その後のすべてのコマンドが何かを生成する前にそれを読み取ります。Impeccableが美観を決めるのではなく、あなたのものをすべての反復で一貫して保つための語彙とメカニズムを提供します。

重労働をこなすコマンド

Impeccableは23のコマンドを公開し、エージェントとの共有語彙として機能させます——それぞれが特定の種類のデザイン介入を命名します。本番ワークフローで最も有用な3つ：

  • /audit — 本番品質のパス。決定的なアンチパターン検出器（58の厳選ルール：汎用グラデーション、デフォルトのInterフォント、ネストされたカード、予測可能なシャドウなど）を現在のコードに対して実行し、まだ何も変更せずに結果を報告します。コードに触れる前の診断ステップです。
  • /normalize — システム内の不整合を修正します：DESIGN.mdで定義されたトークンからずれたスペーシング、ボーダーラディウス、タイプサイズ、またはカラー使用を修正します。複数のエージェントセッションが時間とともに小さな乖離を引き起こした場合に便利です。
  • /polish — 最終品質パス。既存のシステム内で修正を適用し（新しいシステムを発明しない）、検出された「AIの痕跡」を除去し、結果を返す前に検出器を再実行して、所見がゼロになるまで続けます。

Claude CodeやCursorでの典型的なフローは次のようになります：/impeccable auditで診断、/impeccable normalizeで既存のものをトークンに合わせ、コミット前の最終パスとして/impeccable polish——それぞれが同じDESIGN.md/PRODUCT.mdを読み取るため、ブランドから逸脱することはありません。

これら3つは出発点に過ぎません：タイポグラフィ、カラー、レイアウト、モーションをカバーする20の追加コマンド（/typeset、/distill、/colorize、/layout、/bolder、/quieter、/overdriveなど）があります。完全なコマンドリスト、インストールドキュメント、ソースコードは公式リポジトリREADMEでご覧いただけます。

実装例：独自のブランドルール

Impeccableはフロントエンドアーキテクチャを強制しません——zoneless Angular、Signals、またはどのアニメーションエンジンを使用するかを決めることはありません。それらはあなたの手に委ねられています。Impeccableが行うのは、あなたが定義したビジュアルルールを一貫して読み取ることです。厳格なブランド制約を持つDESIGN.mdは、例として次のようになるかもしれません：

# これは例示のみであり、Impeccableの実際のスキーマではありません。
# 実際のスキーマはMarkdownのDESIGN.md/PRODUCT.mdを使用します（Google Stitch仕様）
brand:
  background_base: "#0c1624"
  allowed_accents: ["green", "pink"]
  voice: "Calm, precise, no hype"
  anti_references: "Avoid pure white. Don't generate generic gradients. Reject aggressive or weapon-related iconography, and avoid generating or showing hands in visual assets."

Enter fullscreen mode Exit fullscreen mode

任意のモーションエンジンやアーキテクチャの決定（GSAP、Lenis、Signals付きAngularなど）は依然としてあなたの技術スタック選択です——Impeccableは単に、エージェントが汎用的な視覚パターンを再導入するのを防ぎます。