生成コードエージェントは強力ですが、自由に任せるとデフォルトで視覚的な混乱を生み出します：予測可能なグラデーション、調整されていないスペーシング、時代遅れで重いコンポーネント構造です。ImpeccableはPaul Bakausが作成したデザインスキルパッケージで、Claude Code、Gemini CLI、Codex CLI（さらにCursorやGitHub Copilot）内で直接動作し、美的な制約を厳格に課すために、各ハーネス向けに再コンパイルされた同一のルールセットを使用します。

意図的なスキル設計を適用することで、エージェントを一般的なパターンから遠ざけ、正確で視覚的にハイレベルなウェブ体験を生成させることができます。

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

スキル設計（skill design）は、非決定論的AIモデルのために決定論的なレールを作る実践です。エージェントに「もっと良く見せて」や「パフォーマンスを改善して」と無限に頼む代わりに、コンパイル済みのDESIGN.mdと機能的指令を注入し、各イテレーションでエージェントがこれを守るようにします。

ImpeccableはAnthropicのfrontend-designスキル上に構築され、共有デザイン語彙を持つ23のコマンドと、58の決定論的アンチパターン検出ルール（デフォルトのInterフォント、紫-青のグラデーション、ネストされたカード、カラー背景上のグレー文字、各見出し上の角丸アイコンなど）を追加しています。AIを美観を推測しようとするジュニア開発者から、あなたが定義した視覚ルールの厳格な実装者に変えます。

モダンウェブアプリケーション向けに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はフロントエンドアーキテクチャを強制しません（Angular zoneless、signals、どのアニメーションエンジンを使用するかなどを決めません） — それはあなた次第です。Impeccableが一貫して行うのは、あなたが定義した視覚ルールを読み込むことです。厳格なブランド制約を持つDESIGN.mdの例は次のようになります：

# 説明用例 — Impeccableの実際のスキーマではありません。
# Google Stitch形式のMarkdownでDESIGN.md/PRODUCT.mdを使用します
brand:
  background_base: "#0c1624"
  allowed_accents: ["green", "pink"]
  voice: "Calm, precise, no hype"
  anti_references: "Avoid pure white. Do not generate generic gradients. Reject all 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は実装中にエージェントが一般的な視覚パターンを再導入することを防ぐだけです。