AI によるフロントエンド制作に「AI 臭を消す」デザインスキルを：Impeccable
中核スキル 1 つ、デザインコマンド 23 個、アンチパターン集、そして CI に組み込める slop 検出。本サイトでは使い方を解説し、/slop ページでは「AI 臭がする」UI のパターンを公開しています。
Cursor、Claude Code、Codex などの AI でフロントエンドを書くと、ページが「同じ人が大量生産した」ような見た目になりがちです。紫のグラデーション、Inter フォント、アイコンタイルのタイトル、どこも同じ 3 列カード。Impeccable がやるのは、モデルに「もっとデザインを」と教えるのではなく、デフォルトの反射を取り除き、実行可能なデザインコマンドを提供します。
まずは生成 AI のデフォルトの「筋肉記憶」をリセットする
紫と青のグラデーション、ダークな光彩、Inter / Geist のフル活用。
機能カードは常に「小さい角丸アイコン + タイトル + 3 行の説明」。
コピーは streamline / empower / supercharge。
まず slop（AI 臭）の反射を除去し、フォント / 色 / レイアウト / 動きを正確に指定。
プロジェクトのトークンとコンポーネントを尊重し、新たなデフォルトは作らない。
npx impeccable detect で PR の悪癖をチェック可能。
本サイトのキーワードは Desloppification です。フォント、配色、レイアウト、レスポンシブ、インタラクション状態、動き、コピーライティングなど、「生成 AI らしさ」のデフォルト値を取り除くことを指します。サイト自身も限界を認めています。スキルでモデルをより良いデザイナーにすることはできませんが、「生成 AI 製」に見せる反射を取り除くことはできます。
同じ問題への別の方法として、約 8 万字の貼り付け可能なルール集があります（Claude / Cursor / Codex などのルールファイルに curl で取得）。23 のコマンドも CI 用の detect もありません。コマンドフローと PR 検出が必要なら、この記事の Impeccable を。総合ルールだけ、またはベースとして併用するなら、次の記事をご覧ください。
23 のコマンドは、あなたと AI の共有デザイン語彙
各コマンドが 1 つのデザイン領域に対応し、毎回ゼロから説明する必要はありません。大きく 5 つのカテゴリに分かれます：
まず考えてから作る：要件を発見し、ブリーフを作成し、デザイン全体を実装します。
スコアリングと自動検出付きのデザインレビュー。5 つの技術的品質と P0–P3 の重大度。
文字、レイアウト、配色に特化。他にも /animate、/delight、/bolder、/quieter、/overdrive。
大胆に削る、コピーを直す、クロスデバイス対応。
最終仕上げ、パフォーマンス、本番のエッジケースと i18n。
大規模言語モデルに依存しない決定論的な検出。ファイル、ディレクトリ、標準入力、レンダリング後の URL をスキャンできます。
8 つのプロダクト能力を「プロジェクト導入」の順序で理解する
本サイトでは 8 つの項目を列挙しています。実際にリポジトリへ導入する順序で説明します。
- デザインシステムを認識：トークン、コンポーネント、規約をスキャンし、既存のシステムに沿って作業。新しいデフォルトは作らない。
- プロダクトコンテキストを一度で明確に：
PRODUCT.mdに保存し、後続のコマンドはそれを読んでからデザイン（ユーザー、トーン、禁止事項）。 - DESIGN.md をエクスポート：Google Stitch 形式で持ち出せ、他の DESIGN.md ツールでも読み取り可能。
- エージェント別にビルド：同じスキルを異なるハーネス/モデル向けに再コンパイル。既知の悪癖（例：あるモデルは画像にホバーでズームを付ける）には ban を追加。
- ブランドページとプロダクト UI でルールを分ける：ランディングページとダッシュボードは同じ美意識ではない。
- リリース前に slop をブロック：46 の決定論的ルール、終了コードで CI に通知。
- Live Mode（ベータ）：実行中の開発サーバー上で要素をクリックし、コメントを残し、ホットリプレイス可能なバリアントを生成。
- ソースコードへの書き戻し：バリアントは実ファイルに反映され、通常の diff で確認、コミット / 破棄が可能。
/slop ページ：「一目で AI と分かる」とは
impeccable.style/slop は、よくあるアンチパターンを「AI slop / Quality」に分類し、CLI またはブラウザでの検出方法を示しています。日常的に遭遇するものをいくつか紹介します：
紫と青のグラデーション、ダーク背景に青い光彩。生成 UI の「ID カード」。
見出しや数値にカラフルなグラデーション文字。ほぼ生成 AI のサイン。
等サイズのカード + アイコン + タイトル + 本文が無限に繰り返される、デフォルトのトップページ。
小さな角丸アイコンが常にタイトルの上に。機能カードの万能テンプレート。
Inter、Geist、Space Grotesk、そして新しいところでは Instrument Serif。使いすぎると「選択」ではなくなる。
暖かいアイボリーの背景は「センスが良い」の安全なデフォルトであり、パレットから導かれたものではない。
本文中の em dash の連続は、モデルの文体の指紋の一つ。
WCAG AA に達しておらず、読みにくい。「高級感」とは無関係。
ハーネス内で /impeccable critique を実行すると、ブラウザ評価時に決定論的な発見が重ねられます。CI やローカルターミナルでは npx impeccable detect。任意の Web ページをひと目でスキャンしたい場合は、Chrome 拡張機能があります。
1 つのコマンドで、お使いのハーネスに合わせたビルドをインストール
Node 22.12+ が必要です。GitHub Copilot アプリ側には組み込まれており、設定で Experimental をオンにすればインストールは不要です。
# 現在のハーネスとモデルに合わせたビルドをインストール npx impeccable install # 初回 /impeccable init # アップデート npx impeccable update # 決定論的検出（CI 組み込み可） npx impeccable detect src/
- Cursor / Claude Code / Codex などの環境で
npx impeccable installを実行 /impeccable initを実行し、プロジェクト規約と PRODUCT コンテキストを準備- 新規ページは
/impeccable shapeまたは/craftから。既存ページは/critiqueの後、polish / typeset へ - PR に
npx impeccable detectを組み込み、紫グラデーションや定型カードをマージ前にブロック - 完全なドキュメント：docs · 入門：getting started
AI フロントエンド制作に「型にはまらない」仕掛けを：23 コマンド＋CI 組み込み可能な 46 の検出ルール
Impeccable は、AI によるフロントエンド制作に、デフォルト反射を除去するデザインスキルと 23 のコマンド、そして CI に組み込める 46 のハードルールを提供します。図解でひとまとめに。
↓ この一枚で完了 · 動く図あり
Cursor、Claude Code、Codex などのツールでフロントエンドを書くと、ページはすぐ似通います。紫と青のグラデーション、すべて Inter フォント、アイコンがタイトルの上に乗った機能カード。Impeccable は、こうしたデフォルト反射をまず取り除き、フォント、色、レイアウトを正確に指定できるようにします。
紫と青のグラデーション、ダークな光彩。フォントは Inter / Geist に偏る。
機能カードは常にアイコン＋タイトル＋3 行。グリッドが無限に繰り返される。
コピーは streamline / empower などの空虚な言葉。
まずデフォルト反射を除去し、プロジェクトのデザイン規約に沿って進める。
フォント、色、レイアウトを正確に指定できるコマンド。毎回の説明は不要。
detect は CI（マージ前に自動実行されるチェック）に組み込め、悪癖を直接ブロック。
23 のコマンドは、5 つのデザイン作業に分類されます。作成で方向性を決め、レビューで採点し、タイポグラフィ・レイアウト・動きを精査、シンプル化で空疎な言葉を削除、仕上げでエッジケースを磨きます。同じ作業を毎回一から説明する必要はありません。
本サイトでは 8 つの能力を挙げています。プロジェクトの既存デザイン規約を認識し、新しいデフォルトを作らないこと。製品のトーンとユーザー像を 1 つのドキュメントにまとめ、後続のコマンドがそれを読んでから設計すること。変更は実ファイルに反映され、読み取り可能な diff で確認でき、元に戻せます。テスト段階の Live Mode は、開発画面上で要素をクリックしてコメントを残し、その場で置き換え可能なバージョンを生成できます。
impeccable.style/slop は、よくあるパターンを列挙しています。紫と青のグラデーション、タイトルのグラデーション文字、アイコン付き機能カード、Inter / Geist / Instrument Serif の濫用、暖かいアイボリーの背景、本文中のダッシュ連発。さらに、色のコントラスト不足のような純粋な品質問題もあります。これは、アクセシブルな Web ページに求められる WCAG AA 基準に達していません。
✔ 46 ルールはモデル判断に依存せず、CI に組み込み、マージ前にチェック可能
✘ 要素をクリックしてバリアントを生成する Live Mode はベータ版。安定版ではない