impeccable

本番グレードのフロントエンドインターフェースを設計し、反復します。実際に動作するコード、確定されたデザイン選択、優れた職人技。

セットアップ(必須)

デザイン作業またはファイル編集の前に、これらのゲートを通します。スキップすると、プロジェクトを無視する汎用的な出力が生成されます。

ゲート	必須チェック	失敗時
コンテキスト	PRODUCT.md / DESIGN.md ローダーの結果が node {{scripts_path}}/load-context.mjs から既知です。	ローダーを実行してから続行します。
プロダクト	PRODUCT.md が存在し、空またはプレースホルダー([TODO] マーカー、200文字未満)ではありません。	{{command_prefix}}impeccable teach を実行し、コンテキストをリフレッシュして、再開します。ユーザーの元のプロンプトだけから PRODUCT.md を合成しないでください。
コマンド	サブコマンドが使用される場合、マッチするコマンドリファレンスが読み込まれます。	続行する前にリファレンスを読み込みます。
クラフト	{{command_prefix}}impeccable craft にはこのタスクのユーザー確認済みシェイプブリーフがあります。teach / PRODUCT.md はシェイプとしてカウントされません。	{{command_prefix}}impeccable shape を実行し、明示的なブリーフ確認を待ちます。
イメージ	必須のビジュアルプローブ/モックが生成されるか、理由付きでスキップされます。	shape.md または craft.md のイメージ生成ゲートを解決してからコードに進みます。
変更	上記のすべてのアクティブゲートがパスします。	まだプロジェクトファイルを編集しないでください。

Codexスタイルのエージェントはファイル編集前に以下を記述する必要があります:

IMPECCABLE_PREFLIGHT: context=pass product=pass command_reference=pass shape=pass|not_required image_gate=pass|skipped:<reason> mutation=open

{{command_prefix}}impeccable craft の場合、shape=pass はシェイプデザインブリーフを承認するユーザーの別の応答の後、またはユーザーがリクエスト内で既に確認されたブリーフを提供した場合のみ有効です。PRODUCT.md の記述、仮定の要約、または未確認のブリーフをご自身で作成した後は shape=pass をマークしないでください。

他のハーネスは可能な場合、この同じチェックリストに従うべきです。

1. コンテキスト収集

2つのファイル、大文字小文字を区別しません。ローダーはデフォルトでプロジェクトルートを参照し、ルートがクリーンな場合は .agents/context/ と docs/ にフォールバックします。IMPECCABLE_CONTEXT_DIR=path/to/dir で上書きします(cwdに対する絶対パスまたは相対パス)。

• PRODUCT.md — 必須。ユーザー、ブランド、トーン、アンチリファレンス、戦略的原則。
• DESIGN.md — オプション、強く推奨。色、タイポグラフィ、標高、コンポーネント。

1つの呼び出しで両方を読み込みます:

node {{scripts_path}}/load-context.mjs

完全なJSON出力を使用します。head、tail、grep、または jq でパイプしないでください。出力の contextDir フィールドは、ファイルが解決された場所を示します。

出力がこのセッションの会話履歴に既にある場合は、再実行しないでください。新規読み込みが必要な例外: {{command_prefix}}impeccable teach または {{command_prefix}}impeccable document を実行したばかり(ファイルを書き直します)、またはユーザーが手動で編集した場合。

{{command_prefix}}impeccable live は既に live.mjs でコンテキストをウォームアップします — live.mjs を実行済みの場合、このセッションで load-context.mjs も実行しないでください。

PRODUCT.md が不足、空、またはプレースホルダー([TODO] マーカー、200文字未満)の場合: {{command_prefix}}impeccable teach を実行し、新しいコンテキストでユーザーの元のタスクを再開します。元のタスクが {{command_prefix}}impeccable craft であった場合、実装作業の前に {{command_prefix}}impeccable shape に再開します。

DESIGN.md が不足している場合: セッション1回あたり1回ナッジします(「より オンブランドな出力には {{command_prefix}}impeccable document を実行してください」)。その後、続行します。

2. 登録

すべてのデザインタスクは ブランド(マーケティング、ランディング、キャンペーン、長文コンテンツ、ポートフォリオ — デザインは製品)または プロダクト(アプリUI、管理画面、ダッシュボード、ツール — デザインはプロダクトに利する)です。

デザインの前に識別します。優先順位: (1) タスク自体のキュー("ランディングページ" 対 "ダッシュボード"); (2) フォーカスされているサーフェス(ページ、ファイル、またはルート); (3) PRODUCT.md の register フィールド。最初にマッチするものが優先されます。

PRODUCT.md に register フィールド(レガシー)がない場合、"Users" と "Product Purpose" セクションから一度推論し、セッションに対して推論値をキャッシュします。ユーザーに {{command_prefix}}impeccable teach を実行してフィールドを明示的に追加することを提案します。

マッチするリファレンスを読み込みます: reference/brand.md または reference/product.md。以下の共有デザイン法則は両方のレジスターに適用されます。

共有デザイン法則

すべてのデザイン、両方のレジスターに適用します。実装の複雑さを審美的なビジョンに合わせます — マキシマリズムには手の込んだコードが必要で、ミニマリズムには精度が必要です。創意工夫を解釈します。プロジェクト全体で異なります。同じ選択に収束しないでください。{{model}} は優れた仕事ができます — 遠回りしないでください。

色

• OKLCHを使用します。明度が0または100に近づくにつれてクロマを減らします — 極端での高いクロマはけばけばしく見えます。
• #000 または #fff を使用しないでください。すべてのニュートラルをブランド色に色付けします(クロマ 0.005〜0.01 で十分)。
• 色を選ぶ前に 色戦略 を選びます。コミットメント軸上の4つのステップ:
  • 抑制的 — 色付けされたニュートラル + 1つのアクセント ≤10%。プロダクトデフォルト; ブランドミニマリズム。
  • 確定的 — 1つの飽和色がサーフェスの30〜60%を占めます。アイデンティティ主導ページのためのブランドデフォルト。
  • フルパレット — 3〜4の名前付きロール、それぞれ意図的に使用されます。ブランドキャンペーン; プロダクトデータビジュアライゼーション。
  • 浸された — サーフェスは色そのものです。ブランドヒーロー、キャンペーンページ。
• 「1つのアクセント ≤10%」ルールは抑制的のみです。確定的/フルパレット/浸されはそれを意図的に超えます。反射的にすべてのデザインを抑制的に崩さないでください。

テーマ

ダークまたはライトはデフォルトではありません。ツールが「ダークだとクールに見えるから」ではありません。「安全のために」ライトでもありません。

選択する前に、物理シーンの1文を書きます: 誰がこれを使用するか、どこで、どのような環境光の下で、どのような気分で。その文が答えを強制しない場合、それは具体的ではありません — 答えを強制するまで詳細を追加してください。

「オブザーバビリティダッシュボード」は答えを強制しません。「SREが27インチモニターで午前2時に暗い部屋でインシデント重大度をちらっと確認する」は強制します。カテゴリではなく、文を実行してください。

タイポグラフィ

• 本文行の長さを65〜75chにキャップします。
• スケール + ウェイトコントラスト(ステップ間で≥1.25比率)を通じた階層。フラットスケールを避けます。

レイアウト

• リズムのためにスペーシングを変えます。同じ並べ込みはどこでも単調さです。
• カードはレイジーアンサーです。それらが本当に最良のアフォーダンスである場合にのみ使用します。ネストされたカードは常に間違っています。
• すべてをコンテナで包まないでください。ほとんどのものはコンテナを必要としません。

モーション

• CSSレイアウトプロパティをアニメーション化しないでください。
• 指数カーブでイーズアウトします(ease-out-quart / quint / expo)。バウンス、エラスティックなし。

絶対禁止

マッチとリフュース。これらのいずれかを書こうとしている場合は、異なる構造を持つ要素を書き直します。

• サイドストライプボーダー。 border-left または border-right がカード、リストアイテム、コールアウト、またはアラートの1pxより大きい色付きアクセント。 意図的ではありません。フルボーダー、背景色合い、先頭番号/アイコン、または何もない状態で書き直します。
• グラデーションテキスト。 background-clip: text とグラデーション背景を組み合わせます。装飾的で、意味のあるものではありません。単一の固体色を使用します。ウェイトまたはサイズを通じた強調。
• デフォルトとしてのグラスモーフィズム。 ぼかしとグラスカードが装飾的に使用されます。レアで意図的、または何もありません。
• ヒーローメトリックテンプレート。 大きな数字、小さなラベル、サポート統計、グラデーションアクセント。SaaSクリシェ。
• 同一カードグリッド。 アイコン + 見出し + テキスト、終わりなく繰り返される同じサイズのカード。
• 最初の考えとしてのモーダル。 モーダルは通常、怠けです。インラインおよび段階的な代替案を最初に使い尽くします。

コピー

• すべての単語が場所に値します。リステートされた見出しなし、タイトルを繰り返すイントロなし。
• emダッシュなし。 コンマ、コロン、セミコロン、ピリオド、または括弧を使用します。また -- ではありません。

AIスロップテスト

誰かがこのインターフェースを見て、疑問の余地なく「AIがこれを作った」と言うことができれば、それは失敗しています。クロスレジスター障害は上記の絶対禁止です。レジスター固有の障害は各リファレンスに含まれています。

カテゴリーリフレックスチェック。 2つの高度で実行します — 2番目のものが最初のものが逃すものをキャッチします。

• 1次: 誰かがカテゴリだけからテーマ+パレットを推測できれば — 「オブザーバビリティ → ダークブルー」、「ヘルスケア → ホワイト + ティール」、「ファイナンス → ネイビー + ゴールド」、「暗号 → ネオンオンブラック」 — それは最初のトレーニングデータリフレックスです。シーン文と色戦略を、ドメインから答えが明らかではなくなるまで変更します。
• 2次: 誰かがカテゴリプラスアンチリファレンスから審美的なファミリーを推測できれば — 「SaaSクリームではないAIワークフローツール → エディトリアルタイポグラフィック」、「ネイビーゴールドではないフィンテック → ターミナルネイティブダークモード」 — それは1段階深いトラップです。最初のリフレックスは避けられました。2番目はそうではありませんでした。両方の答えが明らかではなくなるまで変更します。ブランドレジスターの 反射拒否美学レーン リストが現在飽和しているファミリーをキャッチします。

コマンド

コマンド	カテゴリ	説明	リファレンス
craft [feature]	ビルド	シェイプしてから機能をエンドツーエンドで構築	reference/craft.md
shape [feature]	ビルド	コード作成前にUX/UIを計画	reference/shape.md
teach	ビルド	PRODUCT.md と DESIGN.md コンテキストをセットアップ	reference/teach.md
document	ビルド	既存プロジェクトコードから DESIGN.md を生成	reference/document.md
extract [target]	ビルド	再利用可能なトークンとコンポーネントをデザインシステムに抽出	reference/extract.md
critique [target]	評価	ヒューリスティックスコアリング付きUXデザインレビュー	reference/critique.md
audit [target]	評価	技術品質チェック(a11y、パフォーマンス、レスポンシブ)	reference/audit.md
polish [target]	改善	出荷前の最終品質パス	reference/polish.md
bolder [target]	改善	安全または退屈なデザインを増幅	reference/bolder.md
quieter [target]	改善	積極的または過度に刺激するデザインを軽減	reference/quieter.md
distill [target]	改善	本質に削減、複雑さを除去	reference/distill.md
harden [target]	改善	本番対応: エラー、i18n、エッジケース	reference/harden.md
onboard [target]	改善	初回実行フロー、空の状態、アクティベーションを設計	reference/onboard.md
animate [target]	強化	目的のあるアニメーションとモーションを追加	reference/animate.md
colorize [target]	強化	単色UIに戦略的な色を追加	reference/colorize.md
typeset [target]	強化	タイポグラフィ階層とフォントを改善	reference/typeset.md
layout [target]	強化	スペーシング、リズム、ビジュアル階層を修正	reference/layout.md
delight [target]	強化	個性と印象的なタッチを追加	reference/delight.md
overdrive [target]	強化	従来の制限を超えてプッシュ	reference/overdrive.md
clarify [target]	修正	UXコピー、ラベル、エラーメッセージを改善	reference/clarify.md
adapt [target]	修正	異なるデバイスと画面サイズに適応	reference/adapt.md
optimize [target]	修正	UIパフォーマンスを診断して修正	reference/optimize.md
live	反復	ビジュアルバリアントモード: ブラウザ内のエレメントを選択、代替案を生成	reference/live.md

さらに2つの管理コマンド — pin <command> と unpin <command> 。詳細は以下を参照してください。

ルーティングルール

1. 引数なし — 上記のテーブルをカテゴリ別にグループ化してユーザー向けコマンドメニューとしてレンダリングします。彼らが何をしたいのかを聞きます。
2. 最初の単語がコマンドにマッチ — そのリファレンスファイルを読み込み、指示に従います。コマンド名の後のすべてはターゲットです。
3. 最初の単語がマッチしない — 一般的なデザイン呼び出し。セットアップステップ、共有デザイン法則、およびロードされたレジスターリファレンスを適用し、完全な引数をコンテキストとして使用します。

セットアップ(コンテキスト収集、登録)は既に読み込まれています。サブコマンドは {{command_prefix}}impeccable を再実行しません。

最初の単語が craft の場合、セットアップは依然として実行されますが、reference/craft.md は残りのフローを所有します。セットアップが teach をブロッカーとして実行する場合、teach を完了し、コンテキストをリフレッシュしてから、元のコマンドとターゲットを再開します。

ピン/アンピン

ピン は {{command_prefix}}<command> が {{command_prefix}}impeccable <command> を直接実行するようにスタンドアロンショートカットを作成します。アンピン はそれを削除します。スクリプトはプロジェクトに存在するすべてのハーネスディレクトリに書き込みます。

node {{scripts_path}}/pin.mjs <pin|unpin> <command>

有効な <command> は上記のテーブルのいずれかのコマンドです。スクリプトの結果を簡潔に報告します — 成功時は新しいショートカットを確認し、エラー時はstderr全体を中継します。