ishan-parihar/website-design

Website Design

あらゆるAIエージェント（小規模または性能の低いモデルを含む）を、世界水準の美しく機能豊富なWebサイトを構築・デプロイできるエージェントに変えるパイプラインです。各フェーズは名前付きアーティファクトを生成し、次のフェーズがそれを再読み込みするため、一度下した判断が再作成されたり失われることはありません。スキル作成者の規約に従ってトリガーされ、すべての説明は引用符で囲まれた1行文字列です。

パイプラインのアーティファクト（作業メモリ）: DESIGN BRIEF（オーディエンス、雰囲気、ダイヤル）→ DIRECTION（スタイル、パレット、タイポグラフィ、許可/禁止）→ TOKENS（正規のCSSカスタムプロパティ、ダークモード）→ SECTION MAP（見出し/本文/アセット/CTAスロットを持つ順序付きセクション）→ DEPLOY SPEC（ホスト、タイプ、URL、ロールバック）。

ルーティングパターン: パイプライン + ファセット

パイプライン（順序通り、フェーズをスキップしない）:

1. briefing - ユーザーメッセージ、リンク、スクリーンショット、リポジトリからDESIGN BRIEFを抽出します。
2. direction - HTMLやCSSの前にスタイル、パレット、タイポグラフィを選択します。
3. system - DIRECTIONをTOKENSに変換し、テーマ/ダークモードを設定します。
4. structure - TOKENSとDIRECTIONからSECTION MAPを生成します。
5. components - ブロックレシピから各セクションを構築します（子: navigation, heroes, feature-sections, social-proof, conversion, forms）。
6. content - SECTION MAPのすべてのスロットを実際のコピーと実際のアセットで埋めます。
7. motion - MOTIONダイヤルに基づくセクションごとのアニメーション仕様。
8. quality - レビューのみのゲート: anti-slop, accessibility, performance, audit, production, preflight（最終ゲート）。
9. deploy - ホストを選択: higgsfield または generic。

ファセット（フェーズではなくエントリーポイント）:

• サイトがすでに存在する場合（URL、リポジトリ、ファイル）→ ブリーフィングの前にredesignから開始し、その後パイプラインに再入します。
• quality/* のリーフはレビューのみです。チェック時にロードし、ビルド時にはロードしません。
• version-control はすべてのフェーズと並行して実行されます。各アーティファクトが生成されたらコミットします。webdev管理のサイトリポジトリ（WEBSITES/）で作業する場合、これは必須です。

子

• briefing - 新しいビルドでは常に最初。VARIANCE/MOTION/DENSITYダイヤルを含むDESIGN BRIEFを生成します。
• direction - ui-ux-pro-max検証済み検索によるスタイル、パレット、タイポグラフィ。DIRECTION.mdを生成します。
• system - 正規のトークン、テーマ、ダークモード。TOKENSを生成します。
• structure - 順序付きセクションとスロット数。SECTION MAPを生成します。
• components - セクションの種類ごとのブロックレシピ。セクションごとに1つのリーフをロードします。
• content - 実際のコピー、実際の画像、フィラーなし。CONTENTを生成します。
• motion - アニメーション仕様、GSAPスケルトン、モーション軽減パス。
• preflight - 最終ゲート。すべての品質兄弟を参照し、デプロイに引き渡します。
• deploy - ホスティングルーター: higgsfield（website/app/game）または汎用静的ホスト。DEPLOY SPECを生成します。
• redesign - サイトがすでに存在する場合の監査ファーストのエントリーポイント。
• version-control - すべてのフェーズにわたるGit規律。未コミットの作業を残しません。

ナビゲーション（ルートルーターのみ）

• ジャンプ: フェーズがわかっているか？その子を直接ロードし、ツリー全体をロードしません。
• ウォーク: 判断自体が不明確な場合のみ。一度に1つのルーターを読みます。
• 現在操作中のフェーズを宣言し、変更したらその旨を伝えます。
• 再ルーティング: ロードしたリーフがタスクと矛盾する場合、ここに戻って再度選択し、リーフを即興で作成しません。
• 広いブランチは、子のパスとスライスされたタスクを持つサブエージェントに委任します。そのサブツリーのみがロードされます。
• 上限: リーフは祖先のルールを超えません。このファイルが競合を解決します。

規約

_build/plan-expanded.mdから昇格。サブツリー内のすべてのノードに適用されます。

• 弱いモデル対応: 決定テーブル、具体的な数値（「パディング96-128px」、「大きめ」ではなく）、リーフごとにカウント可能でgrep可能な3〜8の合格/不合格チェック。スマートなモデルが一般化できるように1行で説明し、機械的なルールはそれだけで成立します。
• 主題に基づく根拠付け: すべての美的選択は、具体的な主題、オーディエンス、主要なジョブ（業界、素材、専門用語）に基づきます。8〜11歳の女の子向けおもちゃ屋と金融アナリスト向けツールは分岐しなければなりません。全体に渡って実際のコンテンツを使用し、コンテンツがない場合は、briefingを介して具体的なコピーを提案し、確認を取ります。
• 言語非依存: 原則はreferences/stack-adapters.mdのセマンティックHTML + CSSに記述。React、Tailwind、または任意のフレームワークに依存しません。
• 正規トークン: systemで定義され、どこでも使用: --bg --surface --text --text-muted --accent --accent-contrast --border --destructive、--radius --radius-lg、--font-display --font-body --font-mono、--space-1..--space-10（4 8 12 16 24 32 48 64 96 128）、--container、--shadow-1 --shadow-2。
• briefingのダイヤル: 整数1〜10、正確な名前 VARIANCE（1最小限、10非対称/アート）、MOTION（1静的、10シネマティック）、DENSITY（1疎、10密集）。新しいダイヤルを発明しないでください。
• ui-ux-pro-maxプロトコル: direction/systemの選択は、パックのスタイル/パレット/タイポグラフィデータに対して検証されます。結果が空の場合は、組み込みテーブルにフォールバックし、その旨を伝えます。
• 5つのアーティファクトはフェンスで囲まれたブロックとして移動し、名前で再読み込みされ、メモリから読み込まれることはありません。
• フロントマター: name: はディレクトリと一致、description: は引用符で囲まれた1行のトリガー文字列。
• スタイル: ダッシュは使用しない（ハイフンまたはピリオドを使用）、絵文字は使用しない、絶対的な禁止事項はanti-slopにのみ存在、兄弟間はルート相対リンク（heroes）。

絶対条件

• どのノードでもダッシュは使用しない。anti-slopリーフの検出器がそれをgrepします。
• 偽造されたロゴ、推薦文、統計、ブランド画像は使用しない。contentが提案し、ユーザーが確認します。
• プレースホルダートークンは使用しない。すべてのセクションは正規のトークンセットを介してレンダリングされます。
• デザインシステムの混合禁止: 1ビルドにつき、1つのスタイルファミリー、1つのパレット、1つのタイプペアリング。
• 未コミットのアーティファクト禁止: version-controlは、次のフェーズが開始する前に各フェーズの出力をコミットします。
• preflightが合格するまではデプロイしないでください。
• チャートはこのスキルの範囲外です。データ可視化（ui-ux-pro-maxの25のチャートタイプ）については、グリッド+バーを即興で作成するのではなく、python ~/.agents/skills/ui-ux-pro-max/scripts/search.py "<data shape>" --domain chart をクエリしてください。