Agentic Build Intro

Agentic Build Intro は何をしますか？

スタート画面、実際のページのスキャン、そしてラベル付きカーソルエージェントによる実際のページの構築。フレームワーク不要、ビルドステップ不要。assets/layers.js と assets/layers.css の2つのファイルで構成されます。

ファイル

• assets/layers.js: ランタイム。設定を読み込み、ゲートを表示し、スキャンとビルドを実行します。
• assets/layers.css: すべてのスタイル。--lx-* カスタムプロパティを通じてテーマ設定されます。
• assets/head-snippet.html: すべてのページの <head> に必要な3つのタグ。
• references/gate-design.html, references/scan-design.html: 元のスタンドアロンデザイン。所有者が新しいゲートまたはスキャンデザインを希望する場合の出発点として使用します。

手順

1. サイトをバックアップします。 次に、layers.js と layers.css をサイトにコピーします（デフォルトパスは /js/layers.js および /css/layers.css。サイトが別のパスを使用する場合はスニペットを調整してください）。

2. すべてのページにヘッドタグを追加します。 assets/head-snippet.html を各ページの <head> に貼り付けます。インラインスクリプトは、イントロが実行される場合にのみペイント前にページを非表示にし、ランタイムが読み込まれなかった場合は4秒後に再表示します。

3. ゲートのコピーを設定します。 スクリプトタグの data-* 属性、またはスクリプトが読み込まれる前に設定された window.AgenticBuildIntro オブジェクトを使用します。オブジェクトは属性よりも優先されます。

   キー	属性	デフォルト値
   name	data-name	document.title
   initials	data-initials	name の最初の文字
   title	data-title	空の場合は非表示
   location	data-location	空の場合は非表示
   timezone	data-timezone	訪問者のローカル時刻
   clock	data-clock	true
   cta	data-cta	ポートフォリオビルドを開始
   skip	data-skip	サイトに進む
   agents	data-agents	デスクトップ30、電話14
   colors	data-colors	組み込みパレット（カンマ区切りリスト）

   所有者から提供された事実のみを使用してください。名前、肩書き、場所をでっち上げないでください。追加のコピーはニュートラルなUIテキストのみです。

4. サイトのデザインシステムに合わせます。 サイトのCSS変数とフォントを読み取り、サイト自身のスタイルシートの :root で --lx-* トークンをオーバーライドします: --lx-bg, --lx-surface, --lx-stroke, --lx-text, --lx-muted, --lx-soft, --lx-ink, --lx-accent-1 から --lx-accent-4、--lx-font-display、--lx-font-body。キットはフォントをロードしません。サイト自身の色を維持し、背景に対して読みやすい鮮やかなエージェントカラーを選択してください。

5. スキャンの動作は変更しないでください。 スキャンのアウトラインはビルドで使用されるのと同じ要素リストから取得されるため、アウトラインは実際のコンテンツが配置される場所に正確に配置され、スキャンエージェントは同じスポット、色、ラベルでビルドエージェントに引き継ぎます。汎用のワイヤーフレームと決して入れ替えないでください。

6. 以下の動作を維持します。

   • ボックスはハンドルとW×Hラベルとともにドラッグアウトされ、テキストはキャレットとともに入力され、エージェントが作業中はガイドラインが点滅します。
   • 画像は約1.7秒かけて、段階的なトップダウンwipe、スキャンライン、かすかなストライプ、グレースケールからカラーへの定着で表示されます。
   • ペーシングのデフォルトはスムーズだがテンポよく、すべてソフトなイーズインアウト: カーソルは0.5～0.7秒移動、ボックスは0.6～0.8秒かけてドラッグアウト、テキストは1文字あたり約15ミリ秒（長いブロックは約1.4秒で上限）、各エージェントはタスク間で約150ミリ秒の一時停止。速度はページサイズから事前に設定され、ビルド中にデスクトップで約23秒、電話で20秒の目標に遅れている場合は徐々に加速し、必要に応じてエージェントがさらに下部まで開始できるようにします。エージェントはフッターまでのすべての要素を常にビルドします。45秒のフェイルセーフが唯一のハードストップです。
   • フォローはデフォルトでオン: 次のビルドターゲットがビューポートの約65%以下になると、ページは1回のゆっくりとした動きで下にイージングし、作業が上部から約30%の位置に来るようにします。最後にトップにスクロールバックすることはありません。動きの軽減設定がある場合は、イージングではなくジャンプします。
   • セッションごとに1回実行されます。?build=1 で再表示、?build=0 でスキップ。Enterキーで開始、Escキーでゲートスキップ。ホイール、クリック、タッチ、または任意のキーで実行中のイントロをスキップします。
   • 幅390pxまで動作し、電話ではエージェント数が少なくなります。prefers-reduced-motion ではイントロをスキップします。

7. コードルール。 コードコメントなし、コピーにemダッシュなし、AI生成の人物像なし。

8. 録画で検証します。 JSで node --check を実行します。サイトを提供し、Playwrightビデオを1280x800と390x844で録画します: ?build=1 を開き、スタートボタンをクリックし、20～60秒録画します。ゲート、スキャン、ハンドオフ、ビルド、終了状態のフレームを抽出し、ページエラーを確認し、問題を修正します。既存のすべてのページがまだ200を返すことを確認します。

9. 報告 は、ライブリンク、ゲートのスクリーンショット、録画を添えて行います。