Repolode
投稿する
pbakaus

pbakaus/impeccable

AIコーディングエージェント向けのデザインガイド。デザインスキル、24個のコマンド、ブラウザー上でのライブ反復機能、AI生成フロントエンドUI向けの決定論的な検出ルール61個を提供します。

GitHub で見る公式サイト
スター
83,060
フォーク
5,022
未解決の Issue
48
最終コミット
6 時間前

これは何？

Impeccableは、Claude Code、Cursor、Codex CLI、Gemini CLIなどのAIコーディングエージェント向けのデザインスキル兼ツールキットです。polish、audit、critique、distill、animateなどのコマンドを通じて共通のデザイン用語をエージェントに提供します。また、initステップでプロダクトの背景情報をPRODUCT.mdに記録するため、以降のコマンドで対象ユーザーや制約を踏まえた対応ができます。

さらに、HTML、ソースディレクトリ、ライブURLに対して61個の決定論的な検出ルールを実行できる、単体で動作するCLIとブラウザー拡張機能も提供します。LLMやAPIキーは不要です。検出ルールは、フォントの使い回し、紫色のグラデーション、カードの入れ子、バウンスイージングなど、AI生成フロントエンドにありがちなパターンに加え、小さすぎるタッチターゲットや見出しレベルの飛ばしといった一般的な問題も対象にします。

対応するハーネスでは、インストール可能なフックがUIファイルの直接編集後に検出器を実行し、その結果をエージェントのワークフローにフィードバックします。ライブモードでは、ローカルの開発サーバーまたは静的HTMLを使い、ブラウザー上でページの要素を調整しながら反復できます。

主な機能

  • 01/impeccable initを1回実行するだけで、プロダクトの背景情報をPRODUCT.mdに記録できます。
  • 02批評、監査、ブラッシュアップ、レイアウト、タイポグラフィ、モーションなどに対応する24個のコマンド。
  • 03CLI、ブラウザー拡張機能、エージェントフックから実行できる、決定論的な検出ルール61個。
  • 04ローカルの開発サーバーや静的HTMLを使い、ブラウザー上で要素を調整しながら反復できるライブモード。
  • 05Cursor、Claude Code、Codex CLI、Gemini CLIを含む、幅広いAIコーディングツールに対応したインストーラー。

ユースケース

  • AIコーディングエージェントが生成したフロントエンドコードのビジュアル品質を高める。
  • リリース前に既存のWebページを監査し、アクセシビリティ、レスポンシブ対応、レイアウトの問題を見つける。
  • HTMLやJSXに対してCIで検出器を実行し、よくある画一的なAIデザインパターンを指摘する。
  • ソースコードに触れずに、本番環境のURLをスキャンしてデザイン上のアンチパターンを検出する。

クイックスタート

  1. 1

    プロジェクトのルートから、スキルをプロジェクトにインストールします

    npx impeccable install
  2. 2

    AIコーディングツール内で、初回のみ必要なセットアップコマンドを実行します

    /impeccable init

使う前に知っておきたいこと

  • npxインストーラーを使うにはNode.jsが必要ですが、手動インストールやGit経由のインストールなら不要です。
  • デザインフックを実行する前に、フックの承認や信頼設定などの追加手順が必要なハーネスもあります。

トピック

#ai-agents#frontend#design#ui-ux#linter#claude-code#cursor#accessibility

よくある質問

impeccable とは？
AIコーディングエージェント向けのデザインガイド。デザインスキル、24個のコマンド、ブラウザー上でのライブ反復機能、AI生成フロントエンドUI向けの決定論的な検出ルール61個を提供します。 Impeccableは、Claude Code、Cursor、Codex CLI、Gemini CLIなどのAIコーディングエージェント向けのデザインスキル兼ツールキットです。polish、audit、critique、distill、animateなどのコマンドを通じて共通のデザイン用語をエージェントに提供します。また、initステップでプロダクトの背景情報をPRODUCT.mdに記録するため、以降のコマンドで対象ユーザーや制約を踏まえた対応ができます。
impeccable は無料で使えますか？ライセンスは？
impeccable は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
impeccable は今もメンテナンスされていますか？
活発にメンテナンス中。impeccable の最終コミットは 2026年10月19日 です。
impeccable は何に使えますか？
AIコーディングエージェントが生成したフロントエンドコードのビジュアル品質を高める。 リリース前に既存のWebページを監査し、アクセシビリティ、レスポンシブ対応、レイアウトの問題を見つける。 HTMLやJSXに対してCIで検出器を実行し、よくある画一的なAIデザインパターンを指摘する。 ソースコードに触れずに、本番環境のURLをスキャンしてデザイン上のアンチパターンを検出する。
impeccable のインストール方法は？
プロジェクトのルートから、スキルをプロジェクトにインストールします: npx impeccable install AIコーディングツール内で、初回のみ必要なセットアップコマンドを実行します: /impeccable init
impeccable はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/pbakaus/impeccable

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト