核心逻辑：先立规矩（AGENTS.md），再喂素材，最后用”人话”调试。
在写代码前，先在项目根目录新建 AGENTS.md。这是给 AI 看的说明书，能挡掉 80% 的废话和错误。
# 项目规则
## 技术栈
- 单文件 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 中。
动效站的素材不在于多，而在于精。
bg.mp4。/lifetruth
├── index.html (AI生成)
├── bg.mp4 (你准备的视频)
└── AGENTS.md (你准备的规矩)
打开 Cursor 或 Codex，把 AGENTS.md 和 bg.mp4 拖进对话框，发送这段平衡版 Prompt：
“读取 AGENTS.md 的规则，基于 bg.mp4 视频，生成一个单文件 index.html。
页面结构：全屏视频背景，上层叠加暗角和上下渐变遮罩。左上角按规则排版标题。实现双页切换逻辑：第一页展示视频标题，第二页展示深色背景的简介文字。滚动时，页面向上平滑过渡（带阻尼感）。
注意：GSAP 的 ScrollTrigger 必须挂载在 Timeline 上，确保动画流畅。代码需整洁，注释清晰。”
AI 生成代码后，复制内容，粘贴到 index.html 中。
在 Cursor 里右键点击 index.html，选择 “Open with Live Server”（需安装插件），或者在浏览器中直接双击打开。
AI 写动效最容易出三个问题，按下面的”人话”让它修，百试百灵。
❌ 错误说法：”不够丝滑。”
✅ 正确指令：
“动画缺乏物理阻尼感。请将
ease属性改为power3.out或expo.out，并将过渡时间延长至 1.2s。同时加入overwrite: 'auto'防止连续滚动时动画队列堆积。”
❌ 错误说法：”滚不动。”
✅ 正确指令：
“疑似 ScrollTrigger 嵌套错误。请重构代码：创建一个主 Timeline，将
scrollTrigger配置挂载到这个 Timeline 上，然后把两个页面的动画add()进去。确保只注册一次 ScrollTrigger。”
❌ 错误说法：”视频大小不对。”
✅ 正确指令：
“视频背景没有覆盖全屏。请给视频标签添加 CSS：
position: fixed; min-width: 100%; min-height: 100%; object-fit: cover; z-index: -1;。同时检查父容器是否有padding或overflow: hidden。”
top/left 改成 transform。<head> 里补上 <title>LIFE TRUTH</title> 和 OG 标签。lifetruth 文件夹拖到 Vercel 或 Netlify，一键部署。这套流程的核心是 “规则前置，渐进生成”：
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。