完璧: Claudeで実現する独自のフロントエンドUI開発スキル

Impeccableは、Paul BakausによるオープンソースのClaude Codeスキルで、AIが生成するフロントエンドにありがちな「AIの雑多な問題（AI slop）」を解決するための実装可能なツール群です。20種類のステアリングコマンド（例：/audit、/polish、/critique）、7つのドメイン別デザインリファレンス、そして「何をしてはいけないか」を明示するアンチパターンが組み込まれています。これにより「自動生成感」のない洗練されたUIをAIで構築できます。 Apidogを今すぐ試してみよう

AIが生成するフロントエンドがすべて同じに見える理由

AIコーディングアシスタントにダッシュボードやランディングページを作らせると、よく見る「Interフォント」「紫から青のグラデーション」「カードの中にカード」など、同じようなUIが量産されがちです。これは大規模言語モデルがテンプレート的なパターンを学習しているためです。

Impeccableはこの「没個性なAIフロントエンド」から脱却するために設計されています。公式のfrontend-designスキルをベースに、より広範な専門知識・ドメインカバレッジ・厳密な制約を追加し、AIの出力を「デザインされたもの」へ進化させます。

💡ImpeccableでClaude Codeの /audit や /polish を実行する前に、Apidog を無料でダウンロードしてください。AIが生成するフロントエンドが呼ぶAPIエンドポイントを視覚的にテスト・デバッグでき、ペイロード/認証/応答/モックデータをすぐに検証できます。これでUIとバックエンドの同期ミスを未然に防げます。

Impeccableの正体

ImpeccableはClaude Codeスキルで、フロントエンド開発のアプローチを実践的に強化するための指示・リファレンス・スラッシュコマンド群です。

主な3コンポーネント:

Impeccableの拡張フロントエンドデザインスキル

frontend-designスキルは7つの専門分野リファレンス（レイアウト/タイポグラフィ/色彩/インタラクション/アクセシビリティ/アイコン/アクセント）に分かれています。

例：タイポグラフィリファレンスは単に「良いフォントを使う」ではなく、垂直リズムやFOUT回避、size-adjustやclamp()の使いどころまで具体的に記載。即実践できる深い知見が特徴です。

Impeccableのコンテキスト収集プロトコル

/teach-impeccableコマンドで、デザイン前にターゲット・ユースケース・ブランド性をヒアリング。情報は.impeccable.mdに保存され、以降のすべてのAI出力で自動参照されます。これにより、プロジェクト固有の文脈がAIの生成に反映される＝「量産型AI UI」から脱却可能。

AI生成フロントエンドを修正する20のコマンド

Impeccableは、AIフロントエンドでよく起きる問題をピンポイント修正できる20のスラッシュコマンドを用意しています。Claude Codeでそのまま使えます。

/audit          → アクセシビリティ・パフォーマンス・レスポンシブ性をチェック
/critique       → UXレビュー（階層・明瞭性・感情的共鳴）
/polish         → 最終微調整（整列・間隔など）
/distill        → 不要な複雑さの排除
/normalize      → デザインシステム標準に揃える
/animate        → 意図的なアニメーション追加
/colorize       → 配色の戦略的導入
/bolder         → 地味なデザインを強化
/quieter        → 派手すぎるデザインを抑制
/delight        → 印象に残る心地よさを追加
/typeset        → フォント選定・階層・サイズ調整
/arrange        → レイアウト・間隔・リズム修正
/harden         → エラー処理・i18n・エッジケース対応
/optimize       → パフォーマンス改善
/extract        → 再利用可能なコンポーネント抽出
/adapt          → デバイス・コンテキストへの適応
/onboard        → オンボーディング・空状態デザイン
/clarify        → UXコピーの明確化
/overdrive      → シェーダー/物理/高度アニメーション演出
/teach-impeccable → デザイン文脈の収集（初回のみ）

コマンドはスコープ引数も対応（例：/audit headerでヘッダーのみ監査、/polish checkout-formで決済フォームのみ微調整）。機能している部分は触れずに修正したい箇所だけを狙えます。

ワークフロー例：/auditで問題抽出→/arrangeでレイアウト修正→/typesetでフォント調整→/polishで仕上げ、とステップを積み重ねることで、AI UIでもプロ品質の完成度に仕上げられます。

アンチパターンライブラリ：AIにやってはいけないことを教える

Impeccableの独自性は「やってはいけない」アンチパターンをAIモデルに明示的に指示できる点です。これにより、AIが陥りやすい失敗を未然に防ぎます。

タイポグラフィアンチパターン例

• Inter/Roboto/Arial/システムデフォルトは避ける（没個性化）
• モノスペースフォントの乱用禁止
• 大きな角丸アイコン＋見出しのテンプレート化禁止

配色アンチパターン例

• 色付き背景＋灰色テキスト禁止（色あせた印象）
• AI的な「暗背景＋シアン/紫→青グラデ」
• 真っ黒（#000）・真っ白（#fff）の不使用、中間色推奨

レイアウトアンチパターン例

• なんでもかんでもカードで囲まない
• カードの中にカードをネストしない
• 単調なカードグリッド化禁止
• 全部中央揃えにしない（左右非対称や左揃えを活用）

モーションアンチパターン例

• バウンスやエラスティックイージング禁止（古臭さの原因）
• width/height/paddingのアニメ化禁止、transform/opacityのみ許容

これらの「禁止事項」を明示することで、AIのアウトプットにありがちな“AIっぽさ”を根本から修正できます。

舞台裏：ビルドシステム・単体テスト・マルチツール対応

Impeccableは単なるプロンプト集ではなく、ビルドシステム・単体テスト・複数AIツール向けの出力を自動生成するエンジニアリング志向のOSSです。

ビルドシステム

source/skills/配下のYAMLファイルを、Cursor/Claude Code/OpenCode/Gemini CLI/Codex CLI/VS Code Copilot/Kiro/Pi向けに一括変換できます。

bun run build      # 8プロバイダー全てにコンパイル
bun run rebuild    # クリーン→再ビルド

各AIツールごとに適切な形式・メタデータを自動生成。トランスフォーマーアーキテクチャで保守性・拡張性も高いです。

単体テストスイート

Bunベースの単体テスト（tests/build.test.js）で、ビルドパイプライン全体・各トランスフォーマー・ファイル生成・変換正確性・エッジケースまで自動検証できます。

bun test

トランスフォーマー更新時も即座に全AIツール出力へ影響有無を確認できるので、OSSへの安全なコントリビュートが可能です。

Impeccable + Apidog: デザイン品質とAPI品質を両立させる

Impeccableはフロントエンドの品質を、ApidogはAPI層の品質を担保します。両方組み合わせて使うことで、AIアシスト開発の最大の弱点である「UIとAPIのギャップ」を埋められます。

• APIを視覚的に設計
• APIスキーマから即モックサーバー生成→AI UIとリアルなデータ連携
• 自動APIテストで本番前にバグ検出
• インタラクティブなAPIドキュメントをチーム共有

Impeccableで唯一無二のUIを実現し、Apidogで堅牢なAPI基盤を構築。Apidogを無料でお試しください、AIフロントエンドのAPIモック・ドキュメント生成に最適です。

Impeccableを始める

1. impeccable.styleからバンドルをダウンロード
2. お好みのツール用に解凍

Claude Codeで使う場合:

# プロジェクトごとにインストール
cp -r dist/claude-code/.claude your-project/

# 全プロジェクト向けグローバルインストール
cp -r dist/claude-code/.claude/* ~/.claude/

1. /teach-impeccableコマンドでプロジェクト文脈を一度セット
2. 20コマンドすべてが即利用可能に

よくある質問

Q. ImpeccableはAnthropic公式のfrontend-designスキルと何が違う？

A. Anthropic公式スキルに7ドメインリファレンス・20ステアリングコマンド・アンチパターンを追加した上位互換。より高度なAI UI設計が可能です。

Q. Claude Code以外でも使える？

A. Cursor・Claude Code・OpenCode・Gemini CLI・Codex CLI・VS Code Copilot・Kiro・Pi 向けの形式をビルドで自動生成できます。

Q. /overdriveコマンドは何に使う？

A. WebGLシェーダーや物理演算アニメーションなど、高度な演出や「技術的に難しい」エフェクト生成用です。

Q. 単体テストの運用方法は？

A. Bunベースのテストスイートでトランスフォーマーやビルド結果を自動検証。bun testで全テスト実行。

Q. API駆動フロントエンドにも役立つ？

A. ImpeccableはUI品質、API面はApidogと併用がおすすめ。APIデザイン・自動テスト・モックサーバー生成が簡単です。

Q. Impeccableは無料？

A. はい、Apache 2.0ライセンスのOSS。GitHubでソース公開、impeccable.styleでバンドル配布中です。