Impeccable — AI コーディングツールのフロントエンド設計を底上げするスキルライブラリ

AI コーディングツール（Claude Code、Cursor、Gemini CLI など）で UI を生成すると、「動くけど見た目がイマイチ」になりがちだ。Impeccable は、AI に設計のボキャブラリーを教えることで、生成される UI の品質を引き上げるスキルライブラリだ。

Impeccable とは

Impeccable は、Paul Bakaus 氏が開発した AI コーディングツール向けの設計スキル拡張だ。Anthropic の公式 frontend-design スキルをベースに、17個のコマンドと厳選されたアンチパターン集を提供する。

「派手なデザイン」ではなく「洗練された仕上がり」を目指すのが特徴で、中国のインディー開発者コミュニティでも注目を集めている。

対応ツール

Cursor
Claude Code
Gemini CLI
Codex CLI
VS Code Copilot
Google Antigravity
Kiro

インストール方法

npx（推奨）

1
npx skills add pbakaus/impeccable

Claude Code の場合

1
2
3
4
5
# プロジェクト単位
cp -r dist/claude-code/.claude your-project/

# グローバル
cp -r dist/claude-code/.claude/* ~/.claude/

Cursor の場合

1
cp -r dist/cursor/.cursor your-project/

Nightly チャンネルの使用と Agent Skills の有効化が必要。

17個のコマンド一覧

Impeccable は用途別に整理された17個のコマンドを提供する：

セットアップ

コマンド	機能
`/teach-impeccable`	初期セットアップ。プロジェクトの設計コンテキストを収集

品質チェック系

コマンド	機能
`/audit`	技術品質チェック（アクセシビリティ、パフォーマンス、レスポンシブ）
`/critique`	UX 設計レビュー

調整・改善系

コマンド	機能
`/normalize`	デザインシステム標準への統一
`/polish`	最終調整（スペーシング、アニメーション等の微調整）
`/distill`	本質の抽出。複雑性を削除
`/clarify`	UX コピーの改善
`/optimize`	パフォーマンス最適化
`/harden`	エラー処理、多言語化対応

デザイン強化系

コマンド	機能
`/animate`	意図的なモーションの追加
`/colorize`	戦略的な色の導入
`/bolder`	地味な設計を強調
`/quieter`	大胆すぎる設計を調整
`/delight`	喜びの瞬間（マイクロインタラクション等）を追加

構造化系

コマンド	機能
`/extract`	再利用可能なコンポーネントに分離
`/adapt`	異なるデバイスへの対応
`/onboard`	オンボーディングフロー設計

実践的な使い方

基本的なワークフローは /audit で問題を検出し、他のコマンドで順番に修正していく流れだ：

/audit           # まず問題を検出
/normalize       # デザインの不一致を修正
/polish          # スペーシングやアニメーションを微調整
/distill         # 不要な複雑性を削除

特定の要素にフォーカスすることもできる：

/audit header
/polish checkout-form

アンチパターン集

Impeccable には、LLM が陥りがちな設計のアンチパターンも含まれている：

使い古されたフォントの回避（Arial、Inter など）
グレーテキスト on カラー背景の禁止
純粋なブラック/グレーの禁止（常にティント処理すべき）
カード内カードのネストの回避
バウンス/エラスティックイージングの禁止

これらのルールが AI に適用されることで、「AI っぽい」デザインから脱却できる。

7つの設計参考資料

スキルには以下の分野のベストプラクティスが組み込まれている：

Typography — フォントペアリング、モジュラースケール
Color & Contrast — OKLCH、ダークモード、アクセシビリティ
Spatial Design — スペーシング、グリッド、視覚階層
Motion Design — イージング曲線、スタッガリング
Interaction Design — フォーム、フォーカス状態、ローディングパターン
Responsive Design — モバイルファースト、流体設計
UX Writing — ボタンラベル、エラーメッセージ

Impeccable が埋める「構造と仕上げ」のギャップ

関連記事を俯瞰すると、AI コーディングエージェントと UI/UX の関係には一つの共通課題がある。AI は「動くもの」は作れるが、「整ったもの」にするには人間の介入が必要という点だ。

バイブコーディングの記事では、コンポーネント名で「構造」を指示すれば AI の出力品質が上がることを示した。しかし、正しい構造で生成されても、スペーシングの微調整、アニメーションの適切なイージング、色のコントラスト比といった「仕上げ」の領域は、プロンプトだけでは制御しきれない。Impeccable の /polish や /audit は、まさにこの仕上げ工程を体系的にカバーする。

Claude-Native Designer のワークフローでは、CLAUDE.md にデザイン原則やカラーパレットを記述することでプロダクト固有の品質を担保する。Impeccable はこれを補完する形で、プロダクト固有のルールではなく 普遍的な設計のベストプラクティス（タイポグラフィ、空間設計、モーションデザイン等）を AI に教える。CLAUDE.md が「何を作るか」の指針なら、Impeccable は「どう整えるか」の指針だ。

「Figma は不要か」という議論の本質は、デザインとコードの翻訳レイヤーが AI によって不要になるかどうかだった。Impeccable は コードの中にデザインの知識を埋め込むことで、この翻訳レイヤーの必要性をさらに減らす。/critique でUXレビューを行い、/normalize でデザインシステムに準拠させ、/audit でアクセシビリティを検証する — これらはかつて Figma 上でデザイナーが行っていた作業だ。

そして「UI デザイナーの仕事は軽くならない」という指摘は、Impeccable の存在によってむしろ鮮明になる。Impeccable が自動化するのは「整える仕事」（下流工程）であり、「なぜこのデザインなのか」「ユーザーにとって何が最適か」を判断する上流工程は依然として人間に委ねられる。Impeccable は /audit で問題を検出できるが、検出された問題のうちどれを優先するかの判断はデザイナーの仕事だ。

つまり Impeccable は、バイブコーディングで生まれた「構造は正しいが仕上げが甘い」という課題と、Claude-Native Designer ワークフローの「仕上げ工程の負荷」を同時に解決する。デザイナーは「整える仕事」から解放され、より本質的な「決める仕事」に集中できるようになる。

まとめ

Impeccable は「AI にデザインの語彙を教える」というアプローチで、生成される UI の品質を底上げする。派手さではなく洗練さを追求する設計思想は、実務で使えるプロダクト開発に適している。Claude Code や Cursor でフロントエンド開発をしているなら、導入を検討する価値がある。

Impeccable とは#

対応ツール#

インストール方法#

npx（推奨）#

Claude Code の場合#

Cursor の場合#

17個のコマンド一覧#

セットアップ#

品質チェック系#

調整・改善系#

デザイン強化系#

構造化系#

実践的な使い方#

アンチパターン集#

7つの設計参考資料#

関連記事 — AI コーディングエージェントと UI/UX#

Impeccable が埋める「構造と仕上げ」のギャップ#

まとめ#