AI（Claude Codeなど）で作ったアプリのUI、なんとなく「似てる」「使いにくい」「アクセシビリティが足りない」と感じたことはないですか？
この記事では、Impeccableを使って、AI出力の偏りを抑えつつ短期間で品質を上げる仕組みと、実務で役立つ17コマンドの使い方を具体例つきで解説します。
Contents
Impeccableとは？
概要
Impeccableは、Anthropicのfrontend-designスキルをベースにした実務向けのデザイン指示セットです。
公式は impeccable.style、ソースは pbakaus/impeccable — GitHub にあります。
目的は「LLMが出しがちな偏ったデザイン（安易なフォント選択、色の使い方、過剰なアニメーションなど）をルールベースで補正する」ことです。
LLMに対して具体的な設計禁止事項と推奨を与えることで、AIが陥りがちなデザインの偏り（例：安易なフォント選択や不適切な色使い）を抑止し、代替案を提示するツール群です。
デザインレビュープロセスの効率化や実装工数の削減が期待できます。
7つの参照ファイル
概要
AIに単に「良いデザインを出して」と頼むと、学習データの偏りで同じような出力になります。参照ファイルは「根拠あるルール」を与えることで、生成結果に一貫性と実装可能な数値（明度差、イージング値、トークン名など）を与えます。
タイポ、色、空間、動き、インタラクション、レスポンシブ、UXライティングに分かれており、AIの出力に一貫性と根拠を与えます。
各参照ファイルの要点
- typography：モジュールスケールとフォントペアリングの指針。注意点として「Interを無条件に採用しない」方針を持ち、必要に応じてOpenType機能を推奨します。
- color-and-contrast：OKLCHベースの色設計を推奨し、ダークモードやtinted neutralsの扱いも具体例付きで示します（例：有彩色に対する中性色の明度調整 +15～18%）。
- spatial-design：階層的スペーシング、カードの適切な使いどころ、グリッドとコンテナ設計（container queriesの利用例）を提示します。
- motion-design：標準的なイージングと時間指標を明記し、バウンス系過剰アニメーションを避ける具体値（例：cubic-bezier(0.2,0.8,0.2,1)、duration 120–200ms）を示します。
- interaction-design：入力フィードバック、フォーカススタイル、キーボード操作、ARIAの使い方など、操作面の要件を整理しています。
- responsive-design：モバイルファーストの方針とcontainer queriesのサンプル、要素の再配置ルールを提示します。
- ux-writing：ボタンラベルやエラーメッセージのトーンガイド
参照ファイルは「決まりごと」を与えることでAIの曖昧さを取り除きます。
17個のコマンドの使い道
概要
17コマンドは大きく分けて「導入・設定」「評価・レビュー」「修正・調整」「抽出・適応」の4フェーズで使い分けます。
各コマンドの簡単な役割は既存記事に一覧がありますが、以下では実務での具体的な使い道を示します。
コマンドの意味
17コマンドは「導入→レビュー→修正→抽出→適応」を一通りカバーします。
それぞれの目的を理解して、ワークフロー内で最適な順番で使うことが重要です。
- /teach-impeccable — 初回セットアップ。プロジェクトコンテキストを収集して .impeccable-configに保存。
- /audit — 技術的品質チェック（アクセシビリティ、コントラスト、レスポンシブ、パフォーマンス指摘）。
- /critique — UX観点のレビュー（階層、わかりやすさ、CTAの明確化）。
- /normalize — デザインシステム基準に整合させる標準化処理。
- /polish — リリース前の最終微調整（文言、スペーシング、フォーカス）。
- /distill — 情報をそぎ落とし、本質だけを残すリファクタリング。
- /clarify — 曖昧なUXコピーの明確化。
- /optimize — パフォーマンス改善提案（画像やリソースの最適化）。
- /harden — エラー処理・i18n・エッジケースの強化。
- /animate — 意図のあるアニメーション案を付与。
- /colorize — 戦略的なカラーパレットの生成（OKLCHベース）。
- /bolder — CTAなどの視覚的主張を強化。
- /quieter — 過剰な主張を抑えてノイズを減らす。
- /delight — マイクロインタラクションや小さな喜びを追加。
- /extract — 再利用可能なコンポーネントを抽出してテンプレート生成。
- /adapt — デバイス別（mobile/desktop）に設計を適応。
- /onboard — 初回ユーザー向けの導線・メッセージ設計。
17コマンドもあるの!? どれを使えば良いの？
まずは /teach-impeccableと /auditを使おう。
最初に使うコマンド
- /teach-impeccable：
初回実行時はこのコマンドを実行します。
プロジェクトのブランド色、主要フォント、既存のデザインシステムURL、優先度の高いアクセシビリティ基準などをJSONで渡し、.impeccable-config（またはCLAUDE.md）を生成します。
- /audit：
ページや画面単位で実行し、アクセシビリティ、コントラスト、パフォーマンス、レスポンシブ問題を検出します。
優先度（Critical/High/Medium/Low）をつけて出力されるので、スクラムのバックログ化がしやすいです。
修正・調整フェーズ
- /normalize：
デザイントークンやセマンティック色をglobals.css等に導入し、境界条件（ボーダー半径、間隔スケール）を一括で整えます。大規模リファクタで役立ちます。 - /polish：
リリース前の微調整。フォーカススタイル、ホバー、コピー調整などを反映します。1画面ずつ回す運用が効果的です。 - /colorize と /bolder と /quieter：
配色や視覚的主張の調整。A/B案を複数出して比較すると意思決定が速くなります。 - /animate：
目的のあるアニメーション案（入出・フィードバック系）を生成。motion-design参照に合わせてdurationやeasingを指定できます。 - /onboard：
新規ユーザー向けの初回導線を設計する際に使用。プロダクトツアーや初回表示メッセージの文言案を生成します。 - /delight
ユーザーをほっとさせるマイクロインタラクションを設計します。 - /clarify
曖昧なUXコピーを簡潔かつ明確に書き換えます。 - /critique
UX観点から階層・明瞭さ・感情的共鳴を評価し、具体的修正案を出します。 - /optimize
パフォーマンス改善提案（画像やリソースの最適化）。
抽出・適応フェーズ
- /extract：
冗長な構造から再利用可能コンポーネントを抽出し、テンプレート化します。Design→Codeの橋渡しに便利です。 - /distill：
複雑なUIを視覚情報量で数値化し、ノイズ削減案を提案します。ダッシュボードなどで効果が出やすいです。 - /adapt：
モバイル／デスクトップでの再配置や振る舞いの差分を自動生成します。 - /harden：
エラーやi18n、エッジケース対応を強化するためのチェック提案を出します。
導入手順
最も簡単な導入方法は、以下に記載のコマンドを実行することです。
https://impeccable.style/#downloads
npx skills add pbakaus/impeccableコマンドを実行すると、このような画面に切り替わります。
Select skills to installでインストールしたいコマンドを選択します。
明確に使いたいコマンドがない場合は、ひとまず全て選択すると良い思います。
次に何のAIエージェントツールで使うかを選択します。
（例：Claude Code）
次に、スコープを選択します。
Claude Codeの場合は、ホームディレクトリ配下の.claudeに配置するか、プロジェクト配下に配置するかでスコープが変わります。
ひとまず一つのプロジェクトで試す目的であれば、プロジェクト配下の.claudeにインストールすることを推奨します。
# プロジェクトにコピー（推奨：プロジェクト単位で管理）
your-project/.claude
# グローバルに置く（個人利用や一時的な検証向け）
~/.claudeInstallation methodにSymlinkを選択します。
（これを選択することで、他プロジェクトにインストールしたときも同じ実体が参照されるので、重複ダウンロードによる容量圧迫などを回避することができます）
最後にProceed with installation?でYesを選択してエンターを押します。
これでインストールが完了です。
プロジェクトの.claude/skills配下に各コマンドごとのフォルダができているはずです。
実際に使ってみた
以下は実際に/teach-impeccable、/audit、/normalize、/polishを実行した際の出力を要約したものです。
/teach-impeccableの実行結果
/teach-impeccableにはJSONスタイルでプロジェクト情報を渡すと最初の提案が具体的になります。
上記のような内容をもとに、実行すると、実現したいデザインパターンがCLAUDE.mdに追記されました。
上記のような内容をもとに、実行すると、実現したいデザインパターンがCLAUDE.mdに追記されました。
/audit実行結果
アクセシビリティとパフォーマンス周りで重要なクリティカル問題が検出されました。
- Top 3 Critical Issues（優先対応）
- アイコンのみのボタンにaria-labelが無い（スクリーンリーダー不可）
- カスタムトグルにrole=”switch”やaria-checkedが無い（キーボード/スクリーンリーダー非対応）
- <img>をNext.jsの <Image> に置き換えていない（パフォーマンス・CLS懸念）
推奨の即時アクション：
- 全てのアイコンボタンに
aria-labelを追加する（/hardenで一括提案可能） - トグルを に置き替え、Space/Enterで操作可能にする
- 当面は <img loading=”lazy” width height> を追加し、長期的にNext.js <Image> へ移行する
Executive Summary
┌──────────┬────────┐
│ Category │ Issues │
├──────────┼────────┤
│ Critical │ 3 │
│ High │ 5 │
│ Medium │ 8 │
│ Low │ 4 │
│ Total │ 20 │
└──────────┴────────┘
以下のようなコマンドの実行が推奨されました。
/normalize実行結果
globals.cssにデザイントークン（ブランド色、セマンティック色、ボーダー半径スケール等）が導入され、境界が曖昧だった角丸や間隔の基準を統一されました。
これにより一貫性が向上しました。
- 変更例：
- ボーダー半径の標準化（–radius-sm / –radius-md / –radius-lg / –radius-xl）
- HistoryCard等のカードをrounded-xlに統一
- 一部のコンポーネントのハードコード色は意図的に残した（Canvas系など）
/polish実行結果
アクセシビリティやフォーカス表現、キーボード操作性に関する小さな改善を多数適用されました。
具体的にはボタンのフォーカスリング追加やホバー効果の強化など、キーボードユーザーに優しい調整が行われました。
- 主な改善点：
- アクションボタンにフォーカススタイルを追加
- トグルにfocus:ringを付与（キーボードで見える化）
- アクションボタンにカラーマッチしたフォーカスリングを追加
/distillの実行結果
/distillは「視覚ノイズや過度な構造の簡素化」を目的としています。
実際の実行例を以下に示します（抜粋）。
Distillation summary
- Dashboard: 3つの白カードを1行のインライン統合（カード内ボタンの過剰ラップを削除）
- Navbar: 冗長な「Dashboard」リンクを削除、ユーティリティ順を最適化
- Shadow purge: shadow-sm と border の二重装飾を37箇所で除去ポイント：/distillは「見た目の情報量」を数値化して減らす提案を出します。
ダッシュボードやナビ周りで大きな効果が出やすいです。
UIの変更結果
例えば、以下のようにUIが変更されていました。
この例の場合だと、少しの差ではありますが、一定の品質を保つのには役立ちそうです。
改修前
↓↓
改修後
まとめ
ImpeccableはClaudeCode利用者が短期間でUI品質を向上させるための実践的なツールセットです。
まずは/teach-impeccableでプロジェクト情報を登録し、/auditで現状を把握することを推奨します。
そしてその他のコマンドを使って徐々に自分好みのUIに近づけていくのが良いと思います。
参考リンク：Impeccable公式ドキュメント
要はAIに良いデザインのルールを与えるツールです。