核心逻辑：先立规矩（AGENTS.md），再喂素材，最后用”人话”调试。
一、开工前：建立基础
在写代码前，先在项目根目录新建 AGENTS.md。这是给 AI 看的说明书，能挡掉 80% 的废话和错误。
你的 AGENTS.md（直接复制）：
# 项目规则
## 技术栈
- 单文件 HTML（无构建工具）。
- GSAP 3.x (CDN) + ScrollTrigger。
- 原生 CSS（禁用 Tailwind）。
## 动效规范
- 滚屏切换：双 Section，wheel 事件驱动，1.2s 缓动。
- GSAP 写法：ScrollTrigger 必须挂载在 Timeline 上，禁止直接嵌套在 to()/from() 里。
- 性能：移动端关闭 mousemove 探照灯效果。
## 设计风格
- 背景：墨黑 #0A0A0F。
- 字体：标题 Cinzel，正文 Inter。
- 质感：2% 噪点，玻璃态，禁止蓝紫渐变卡片。
- Logo：LIFE TRUTH®，® 标为金色 #D4AF37。
## 输出
- UTF-8 无 BOM 编码。
- CSS 和 JS 全部内联在 HTML 中。
二、素材准备：少即是多
动效站的素材不在于多，而在于精。
- 视频背景：找一段 10-15 秒的深海、流体或星空视频。压缩到 5MB 以内（用 HandBrake 或在线压缩工具），命名为
bg.mp4。 - 字体：不用下载，直接使用 Google Fonts CDN 引入。
结构：
/lifetruth
├── index.html (AI生成)
├── bg.mp4 (你准备的视频)
└── AGENTS.md (你准备的规矩)
三、生成代码：Cursor / Codex 实操
1. 投喂 Prompt（核心指令）
打开 Cursor 或 Codex，把 AGENTS.md 和 bg.mp4 拖进对话框，发送这段平衡版 Prompt：
“读取 AGENTS.md 的规则，基于 bg.mp4 视频，生成一个单文件 index.html。
页面结构：全屏视频背景，上层叠加暗角和上下渐变遮罩。左上角按规则排版标题。实现双页切换逻辑：第一页展示视频标题，第二页展示深色背景的简介文字。滚动时，页面向上平滑过渡（带阻尼感）。
注意：GSAP 的 ScrollTrigger 必须挂载在 Timeline 上，确保动画流畅。代码需整洁，注释清晰。”
2. 生成与预览
AI 生成代码后，复制内容，粘贴到 index.html 中。
在 Cursor 里右键点击 index.html，选择 “Open with Live Server”（需安装插件），或者在浏览器中直接双击打开。
四、调试：遇到 Bug 怎么跟 AI 说话
AI 写动效最容易出三个问题，按下面的”人话”让它修，百试百灵。
场景 1：动画生硬，像 PPT
❌ 错误说法：”不够丝滑。”
✅ 正确指令：
“动画缺乏物理阻尼感。请将
ease属性改为power3.out或expo.out，并将过渡时间延长至 1.2s。同时加入overwrite: 'auto'防止连续滚动时动画队列堆积。”
场景 2：滚动时页面抖动或失效
❌ 错误说法：”滚不动。”
✅ 正确指令：
“疑似 ScrollTrigger 嵌套错误。请重构代码：创建一个主 Timeline，将
scrollTrigger配置挂载到这个 Timeline 上，然后把两个页面的动画add()进去。确保只注册一次 ScrollTrigger。”
场景 3：视频没铺满，有黑边
❌ 错误说法：”视频大小不对。”
✅ 正确指令：
“视频背景没有覆盖全屏。请给视频标签添加 CSS：
position: fixed; min-width: 100%; min-height: 100%; object-fit: cover; z-index: -1;。同时检查父容器是否有padding或overflow: hidden。”
五、优化与上线
- 性能检查：打开浏览器 DevTools (F12) 的 Performance 面板，录制一下滚动过程，确保帧率（FPS）保持在 60 左右。如果掉帧，让 AI 帮你把动画属性从
top/left改成transform。 - SEO：别忘了在
<head>里补上<title>LIFE TRUTH</title>和 OG 标签。 - 部署：把整个
lifetruth文件夹拖到 Vercel 或 Netlify，一键部署。
总结
这套流程的核心是 “规则前置，渐进生成”：
- AGENTS.md 管住 AI 的审美和技术路线。
- 精简素材 保证加载速度和质感。
- 精准调试 用行业术语（Timeline, Ease, Overwrite）代替模糊描述。
