ImpeccableはオープンソースのAIフロントエンドデザイン言語とスキルライブラリで、AIプログラミングアシスタント（Claude CodeやCursorなど）がより高品質で美的感覚に優れたUIデザインを生成し、画一的な「AIプラスチック」インターフェイスを回避できるようにすることを目的としています。このプロジェクトでは、Anthropicのフロントエンドデザインを、7つのドメイン固有のリファレンスファイル、20の制御コマンド、アンチパターンへのよく整理されたガイドを含むスキルライブラリで拡張しています。これらのリソースにより、開発者はAIがフロントエンドのコードを書く際に、よくある設計ミス（例：カードの入れ子の誤用、純粋なグレーと黒の使用、視覚的リズムの欠如など）を避けるように明示的にガイドすることができ、AIが生成したUIのレビュー、正規化、経験評価、細部の研磨を自動化するためのシンプルなスラッシュコマンド（例：/audit、/normalize、/critique、/polishなど）の使用をサポートします。これにより、フロントエンドのUI/UXデザイン分野におけるAIのパフォーマンスが大幅に向上します。
機能一覧
- 20種類のAI制御コマンドを提供を含む。
/audit(UIの品質をレビューし、レポートを作成する）、/normalize(正規化された間隔を持つアライメント設計システム）、/critique(UXインタラクションレビューの実施）、/polish(本番前の最終的なビジュアル・ポリッシュ）など、フロントエンド・デザインの全工程をカバーする。 - 7 組み込みのドメイン別参照文書タイポグラフィ、色彩、スペーシング、アニメーション、コンポーネント・デザインなど、さまざまな専門的側面におけるAIの知識を広げ、AIにフロントエンド・デザインのリテラシーを身につけさせる。
- アンチ・シュードデザイン・アンチパターン・ライブラリー（アンチパターン）例えば、黒やグレーの無地は使わない（色味をつけるべき）、カードのネスティングを乱用しない、システムのデフォルトや使い古されたフォントを使わない、など。
- 複数のAIツールの統合をサポートAnthropicが新しくリリースしたClaude Codeターミナルツールとの完全な互換性があり、Cursor、Windsurf、その他のAIプログラミングエディター用の設定ファイルやプロンプトパッケージをすぐに使用できます。
- ビフォー・アフターの比較以下は、Impeccable命令セットを使用する前と後の実際のUIデザイン比較の例で、開発者はAIが生成したコードに対するImpeccable命令セットの改善効果を視覚的に簡単に評価することができます。
ヘルプの使用
Impeccableへようこそ。Impeccableは、以下のようなAIプログラミング・アシスタントのパフォーマンスを向上させるためのプログラムです。 Claude Code, Cursor これは、フロントエンドインターフェース（UI/UX）デザイン能力のためのオープンソースの命令セットとスキルベースです。このヘルプドキュメントでは、インストール方法、特徴的なコマンドの操作方法、実際の開発におけるAIとの効率的な連携方法などを詳しく解説し、読んですぐに開発を始められるようにガイドします！
I. Impeccableのインストール方法
Impeccableは、お客様が毎日使用するAIツールに応じて、さまざまなインストールおよび統合オプションを提供します：
1.クロードコードへのインストール（推奨）
を使用している場合 Anthropic 公式のターミナルAIプログラミングアシスタントであるClaude Codeは、ターミナルでコマンドを実行するだけで、Impeccableを簡単にインストールできる：
- ステップ1： ターミナルを開く。
- ステップ2： クロードコードをグローバルにインストールし、ログインしていることを確認してください。
- ステップ3 以下のコマンドをコピーして実行する：
claude install-skill https://github.com/pbakaus/impeccable - ステップ4 Claude Codeをインストールすると、Impeccableの20の専門的なコマンドとアンチパターンのライブラリが自動的に読み込まれ、いつでもダイアログで使用することができます。
2.カーソルエディターでのインストール
AIネイティブのコードエディターであるCursorを使いたい場合は、設定ファイルをコピーすることで、Impeccableの機能をプロジェクトに組み込むことができる：
- ステップ1： ImpeccableのGitHubリポジトリまたは公式ウェブサイトにアクセスして、最新のプロジェクトのtarボールをダウンロードし、解凍してください。
- ステップ2： で解凍したフォルダを探します。
dist/cursor/.cursorカタログ - ステップ3 このディレクトリにあるすべてのコンフィギュレーション・ファイルを、開発中のローカル・プロジェクトのルート・ディレクトリに直接コピーする。
.cursorフォルダー - ステップ4 Cursorエディタを再起動するか、コンテキストを更新すると、このプロジェクトのコードを生成するときに、CursorはデフォルトでImpeccableの設計仕様に従います。
3. 他のAIツールでの使用（例：クロード・オン・ザ・ウェブ、ChatGPT、v0など）
上記のローカルクライアントを使用していない場合でも、プロンプトを手動でコピーすることで、Impeccableのデザインガイダンスを楽しむことができます：
- ステップ1： Impeccableのオープンソースリポジトリを開き、ルールやプロンプトが保存されているフォルダ（例えば
dist或src）。 - ステップ2： そこに照合された設計原則、アンチパターン・ルール、操作説明の全文を転載する。
- ステップ3 AIに質問する前に、その質問をコンテキストとしてAIに送るか（システム・プロンプト）、ダイアログの最初のメッセージとして直接送り、“次のフロントエンド開発では、この設計仕様に厳格に従ってください ”と伝える。”
II.中核となる指令と具体的な業務プロセス
Impeccableの中核をなすのは、入念に作られた20のスラッシュ（/）コマンドだ。これらのコマンドを使いこなすことで、AIが生成するUIのクオリティを完全にコントロールすることができる。ここでは、最も一般的で核となるディレクティブをいくつか紹介しよう：
1. /audit -- UI品質レビューの自動化
- 特徴 品質チェックを実行し、詳細なUIレビューレポートを出力します。このコマンドは現在のUIインターフェースのデザイン上の問題点のみを指摘します。直接的なコード変更はない。
- 適用されるシナリオ AIにコードを大幅に変更させる前に、現在のページで何がコンプライアンスに反しているのかを調べよう。
- 操作の例：
/audit blog(ブログシンジケーションページと投稿詳細ページのUI品質レビュー）/audit dashboard(コンソールダッシュボードの各コンポーネントの正常性チェック）
2. /normalize -- 規範体系と設計体系の整合性
- 特徴 標準的なUIデザインシステムにコードを合わせます。乱雑なスペーシングや不規則なフォントサイズを修正したり、断片的なカラー値を統一されたデザイントークンに置き換えたりするのに役立ちます。
- 適用されるシナリオ 終了後
/auditレビューの後や、AIが生成したインターフェイスが少々乱雑で整合性が取れていないと感じた場合に使用する。 - 操作の例：
/normalize blog(アプリケーションデザイン） Token (そして、ブログページのスペーシングを修正する）。/normalize buttons(プロジェクト内のすべてのボタンのスタイルとサイズを標準化する）
3. /critique -- 綿密なUX（ユーザー・エクスペリエンス）レビュー
- 特徴 インタラクションやユーザー・エクスペリエンス・デザインに関するハイレベルなフィードバックを提供する。コードの詳細に焦点を当てるのではなく、ユーザビリティや使いやすさの観点からフィードバックを提供し、AIによる推奨を行います。
- 適用されるシナリオ 技術的な修正ではなく、UIデザインのフィードバックやインスピレーションを求めている場合。
- 操作の例：
/critique landing page(ランディングページの全体的なユーザーエクスペリエンスとコンバージョンダイナミクスを見直す）/critique onboarding(新規ユーザーのオリエンテーションプロセスにおける認知的負荷のチェック）
4. /polish -- ビジュアル・リファイン
- 特徴 UIの仕上げ。細かいピクセルの欠点を修正し、コントラストを調整し、ホワイトスペースを最適化して、洗練されたプロフェッショナルな外観に仕上げます。
- 適用されるシナリオ コードを本番環境にデプロイし、正式にリリースする前の最終ステップ。
- 操作の例：
/polish feature modal(本稼働前の新機能のポップアップ・コンポーネントの詳細な視覚的最適化）
III.上級：複雑なワークフローを完成させるための命令の組み合わせ方
Impeccableは、複数のコマンドを組み合わせることができ、AIが特定のプロセスに従ってプロジェクトを一度に最適化できるという点でも強力だ。
- 完全なプロセス自動化の最適化： モジュールを完全に改装したい場合は、エントリーできる：
/audit /normalize /polish blog
実行ロジック： AIは、ブログ・モジュールの徹底的な見直しから始まり、雑然としたデザインを修正する仕様の適用、そして最後に高精度のビジュアル・ポリッシュを施して出力する。 - 経験値も堅牢性も向上している： コアプロセス（例：支払い）を最適化したい場合は、入力することができる：
/critique /harden checkout
実行ロジック： AIはまず、UXの観点から決済プロセスのインタラクションを最適化し、その後、AIを使用する。/hardenこのディレクティブは、さまざまなエッジケースに対するエラー処理ロジックをページに追加し、インターフェイスの見栄えだけでなく、安定性も保証します。
AIを “バッドデザイン ”から遠ざけるアンチパターン原則
アクティブなコマンドに加えて、Impeccableには「アンチパターン」の豊富なビルトインライブラリもあり、これはAIがより高度なUIを記述できるようにする秘密兵器でもある。AIと仕事をするときにあまり頻繁に言及する必要はないが、AIは無意識のうちにこれらの原則に従っている：
- 無意味なカードの入れ子を乱用しない： Impeccableは、すべての要素の周りにカードの枠線を付けるというAIの悪い癖を厳しく止める。
- ピュアブラックとピュアグレーは却下： impeccableは、インターフェイスの質感を高めるために、ほのかな色合い（Tint）のある暗い色をAIに使わせる。
- ニュートラルフォントの過剰な普及を防ぐ： AIはデフォルトで、システム独自のフォントや、Arial、Interなどのユニバーサルフォントを好んで使用するが、Impeccableは、ページのトーンに応じて、タイポグラフィにもっと個性的なフォントを含めることを提唱している。
これらの詳細なチュートリアルとヒントで、あなたはImpeccableを完全に使いこなすことができます。あなたのプロジェクトでAIアシスタントを活用し、デザインにインスパイアされたフロントエンド開発を体験してください！
アプリケーションシナリオ
- 企業ウェブサイトとランディングページの開発
Impeccableの/critique和/polishこの指示により、AIアシスタントは画一的なAIテンプレートスタイルに別れを告げ、高度なテクスチャ、優れたタイポグラフィ、ダイナミックな効果を備えた企業の公式ウェブサイトを生成し、コンバージョン率を大幅に向上させることができます。 - 複雑な管理バックエンドとダッシュボードのリファクタリング
大規模で混乱しがちなアドミニストレーターのバックエンドを再設定する場合、次のようにすれば簡単に最大限の効果を得ることができる。/audit和/normalizeコマンドの組み合わせにより、AIアシスタントがデザインの矛盾を自動的に識別し、ワンクリックでデザインシステムを整列させ、グローバルなスペーシングと色調を統一する。 - インタラクション集約型のプロダクト・プロトタイピング
多数のフォーム、ポップアップ、アクションリンクがある商品には、Impeccableのネスティング防止カードルールと/hardenロバスト性ディレクティブにより、AIアシスタントは、構造化され、オタクに強く、エラーに強い、高品質のインタラクションコードを書くことができる。
QA
- Impeccableはクロード・コードでしか使えないのですか？
そうではない。Claude Codeを直接インストールするためのビルトインサポートがある一方で、CursorやWindsurfなどのAIネイティブエディター用の専用プロファイルもあり、大規模な言語モデルで使用するために、それらの中のキューワードを手動で抽出することもできる。 - AIを使って生成したUIが、いつも典型的な「AIプラスチックスタイル」に見えるのはなぜですか？
Impeccableは、明示的なアンチパターンとコマンドによってAIのこの嗜好を修正することで、このペインポイントに対処するように設計されている。 - Impeccableを使用することで、既存のプロジェクトのUIフレームワークは変更されますか？
Impeccableは、特定のフロントエンドフレームワークに依存しないデザイン言語ロジックとディレクティブのセットです。React、Vue、Tailwind CSS、または純粋なCSSのいずれを使用している場合でも、AIの考え方を導くことで、生成されるコードの品質を向上させることができます。
