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. 为每个页面添加头部标签。 将 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	Initiate Portfolio Build
   skip	data-skip	Skip to site
   agents	data-agents	桌面端 30，手机端 14
   colors	data-colors	内置调色板（逗号分隔列表）

   仅使用所有者提供的事实。切勿捏造姓名、标题或位置。任何额外的文案都应是中性的界面文本。

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 秒内揭示。
   • 默认节奏平滑且轻快，全部使用柔和的缓入缓出效果：光标移动 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. 代码规则： 无代码注释，文案中无 em 破折号，无 AI 生成的人物形象。

8. 通过录制验证： 对 JS 文件运行 node --check。启动网站并使用 Playwright 在 1280×800 和 390×844 分辨率下录制视频：打开 ?build=1，点击开始按钮，录制 20 到 60 秒。提取入口、扫描、交接、构建和结束状态的帧，检查页面错误，并修复发现的问题。确认每个已有页面仍然返回 200。

9. 报告：包含在线链接、入口截图和录制视频。