MD412/agentic-build-intro

代理式建構介紹

一個啟動畫面、一次真實頁面的掃描，然後由多個帶標籤的游標代理建構出真實頁面。無需框架，無需建構步驟。共兩個檔案：assets/layers.js 和 assets/layers.css。

檔案

• assets/layers.js：執行時期。讀取設定、顯示起始畫面、執行掃描與建構。
• assets/layers.css：所有樣式，透過 --lx-* 自訂屬性進行主題化。
• assets/head-snippet.html：每個頁面 head 區段所需的三個標籤。
• references/gate-design.html、references/scan-design.html：原始獨立設計。若擁有者想要新的起始畫面或掃描設計，可將這些檔案作為起點。

步驟

1. 備份網站。 然後將 layers.js 和 layers.css 複製到網站中（預設路徑為 /js/layers.js 和 /css/layers.css；若網站使用其他路徑，請調整程式碼片段）。

2. 將 head 標籤新增至每個頁面。 將 assets/head-snippet.html 貼到每個頁面的 <head> 中。內嵌腳本會僅在即將執行介紹時，於繪製前隱藏頁面；若運行時從未載入，則在 4 秒後取消隱藏。

3. 設定起始畫面文字。 使用 script 標籤上的 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	Initiate Portfolio Build
   skip	data-skip	Skip to site
   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 x H 標籤，文字輸入時顯示游標，代理工作時引導線閃爍。
   • 影像以大約 1.7 秒的時間，透過階梯式從上到下擦除、掃描線、模糊條紋和灰階轉彩色來揭示。
   • 節奏預設為流暢但輕快，全部使用平穩的 ease-in-out：游標移動 0.5 至 0.7 秒，方塊拖曳 0.6 至 0.8 秒，文字輸入約每字元 15 毫秒（長區塊上限約 1.4 秒），每個代理在任務間暫停約 150 毫秒。速度會根據頁面大小預先設定，若建構進度落後於目標（桌面約 23 秒，手機約 20 秒），則會在建構過程中加快，必要時允許代理從更下方的摺頁處開始。代理會一直建構到頁尾的每個元素。45 秒的保護措施是唯一硬性停止條件。
   • 預設啟用跟隨：當下一個建構目標低於視窗約 65% 時，頁面會以一次緩慢移動向下平移，使工作區域距離頂部約 30%。在結束時絕不會捲動回頂部。在減少動畫模式下，會直接跳躍而非平緩移動。
   • 每個工作階段僅執行一次。?build=1 可重播，?build=0 可跳過。按 Enter 開始，按 Esc 跳過起始畫面；滾輪、點擊、觸碰或任何按鍵均可跳過正在運行的介紹。
   • 支援最小寬度 390px，手機上的代理數量較少。prefers-reduced-motion 會跳過介紹。

7. 程式碼規則。 無程式碼註解、無全形破折號、無 AI 生成的人物圖案。

8. 透過錄製進行驗證。 對 JavaScript 執行 node --check。啟動網站並在 1280x800 和 390x844 解析度下錄製 Playwright 影片：開啟 ?build=1，點擊開始按鈕，錄製 20 至 60 秒。擷取起始畫面、掃描、交接、建構和結束狀態的幀，檢查頁面錯誤，並修正所見問題。確認每個現有頁面仍回傳 200 狀態碼。

9. 回報 時附上即時連結、起始畫面截圖和錄製影片。