AIが作るUIデザインの「いつもの手抜き感」を撲滅する17のコマンド — impeccable

アーキテクチャ・仕組み

Impeccableは、AIコーディングツールの「スキル」機能を活用するデザインガイドラインシステムです。Anthropicが公開した frontend-design スキル をベースに拡張されており、AIに対してデザインの専門知識とルールを事前に読み込ませることで、生成されるUI/UXの品質を向上させます。

7つの専門リファレンス

17コマンドの分類

• 初期設定: /teach-impeccable — プロジェクトのデザインコンテキストを収集して設定に保存
• 品質チェック系: /audit（技術品質）、/critique（UXデザインレビュー）
• 修正・調整系: /normalize（デザインシステム準拠）、/polish（最終仕上げ）、/distill（本質だけに絞る）、/clarify（UXコピー改善）
• パフォーマンス系: /optimize（パフォーマンス改善）、/harden（エラーハンドリング、i18n、エッジケース）
• 表現強化系: /animate（モーション追加）、/colorize（戦略的な色の導入）、/bolder（インパクト強化）、/quieter（トーンダウン）、/delight（喜びの演出追加）
• 構造系: /extract（再利用可能コンポーネントへの分離）、/adapt（デバイス対応）、/onboard（オンボーディングフロー設計）

各コマンドはオプション引数で対象を絞り込める（例: /audit header、/polish checkout-form）。

アンチパターン（明示的な禁止事項）

• Arial、Inter、システムデフォルトなど使い古されたフォントの使用
• 色付き背景にグレーテキストを置く
• 純粋な黒/グレーの使用（必ず色味を加える）
• すべてをカードで囲む、カードの中にカードを入れ子にする
• バウンス/エラスティックイージングの使用（古臭く見える）

対応ツール

• Cursor — Nightly チャンネル + Agent Skills有効化が必要
• Claude Code — プロジェクト単位またはグローバルに設定可能
• Gemini CLI — プレビュー版（@google/gemini-cli@preview）+ Skills有効化が必要
• Codex CLI — コマンド構文が異なる（/prompts:audit 形式）

ライセンス・商用利用

• Apache 2.0 ライセンス（商用利用可能）
• Anthropicのオリジナルスキルをベースにしており、NOTICE.mdに帰属表示あり

制作者

Paul Bakaus が作成。ケーススタディは impeccable.style で確認可能。

ウェブサイトからダウンロード（推奨）

impeccable.style からZIPをダウンロードして展開するだけ。

リポジトリから手動コピー

Cursor:

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

Cursor Nightly チャンネルへの切替と Agent Skills の有効化が必要

Claude Code:

# プロジェクト単位
cp -r dist/claude-code/.claude your-project/

# グローバル（全プロジェクト共通）
cp -r dist/claude-code/.claude/* ~/.claude/

Gemini CLI:

cp -r dist/gemini/.gemini your-project/

プレビュー版が必要: npm i -g @google/gemini-cli@preview

Codex CLI:

cp -r dist/codex/.codex/* ~/.codex/

使い方

/audit           # 問題点を発見
/normalize       # 不整合を修正
/polish          # 最終仕上げ
/distill         # 複雑さを除去