让 AI 输出的不是”蓝紫渐变模板风”，而是能跑的杂志级动效页
一、动效站的提示词比较难写
普通的 CRUD 页面，提示词凑合能跑。但高交互动效站有三个”AI 必翻车点”：
- 动效词是人类语言，GSAP 是机器 API —— 你说”阻尼感”，AI 可能给你
ease: "power2.out"也可能给你ease: "elastic"(3, 0.5)，差之千里 - 视觉层 / 动效层 / 交互层是三件不同的事，混在一起写，AI 会顾此失彼
- 素材没准备好就催 AI 写代码，结果 AI 自己造图、造视频 URL，出来的全是 placeholder 味的垃圾
所以上篇的核心命题：提示词不是”描述你想要什么”，而是”用 AI 能翻译的动词描述动向”。
二、提示词的四层解剖（以 lifetruth.top 为锚）
🎨 Layer 1：视觉层 —— 先锁”贵感”，防 AI 化
AI 做动效站最大的通病是蓝紫渐变 + 卡片堆叠 + 粒子满天飞。要在提示词最前面用”否定约束 + 肯定样本”锁死：
- 视觉基调：墨黑底 (#0A0A0F)，科技 × 人文，杂志封面风
- ✅ 用：Cinzel / Space Grotesk / Inter，靛蓝→品红光谱高光，2% 噪点 + 玻璃态
- ❌ 禁止：蓝紫渐变卡片堆叠、Bootstrap 式布局、AI 味的”科技感”通用词
- 参考气质：Awwwards SOTD 的 Ocean Guardian / Envy™ 那条线
关键点：给”禁止项”比给”想要项”更重要，AI 才会避开模板库。
🎬 Layer 2：动效层 —— 把”感觉词”翻译成”GSAP 动词”
这一层是动效站的灵魂。别让 AI 猜，直接把迪士尼 timing 原则和 GSAP 术语写进提示词：
| 你说的 | 提示词里要写的（AI 可翻译） |
|---|---|
| “阻尼感” | ease: "power3.out"，滚切 1.2s，scrollTrigger.scrub: 1 |
| “磁吸光标” | 鼠标 XY → 计算距离 → CTA 按钮 translate() 偏移 + 高斯光晕跟随 |
| “探照灯” | 径向渐变 mask-image 跟随 mousemove，混合模式 overlay |
| “章节化叙事” | gsap.timeline({ scrollTrigger: { trigger, pin: true, scrub: 1 } })，ScrollTrigger 只能挂在顶层 timeline，不准嵌套 |
| “微交互不抢戏” | 按钮 150ms ease-out、卡片进场 300ms、复杂 reveal ≤ 500ms |
💡 这一段直接决定了 AI 出来的是”花架子”还是”能用的动效”。GSAP Skills 之所以好用，就是因为它把这些术语预置成了 AI 知识包，不用你每次重写。
🖱️ Layer 3：交互层 —— 滚轮、光标、响应式三条线
动效站的”交互”不是点击，是驱动方式。提示词里要明确：
- 滚轮驱动：Lenis + ScrollTrigger 组合，Lenis 负责平滑，ScrollTrigger 负责章节 pin
- 光标驱动：
cursor: none全局，自定义磁吸光圈，靠近可点击元素scale(1.8)+ 色偏偏移 - 响应式降级：移动端关探照灯（performance）、
prefers-reduced-motion全关动画 - 边界约束：”只改 Hero 区动效，不动路由/文案/设计 token” —— 这条能让 AI 不打扰已发布页面
📐 Layer 4：技术约束 —— 决定 AI 用啥武器
- 技术栈：单文件 HTML（双层 Section + wheel 切页）/ 或 Next.js App Router + GSAP 3.15 + @gsap/react + Lenis
- 输出：UTF-8 无 BOM，CSS 内联
<style>，JS 内联<script> - GSAP 必写：
gsap.registerPlugin(ScrollTrigger)先注册，ScrollTrigger 不准挂嵌套 tween，scrub和toggleActions二选一
三、素材准备：提示词之外的另一半
动效站 70% 的质感在素材，30% 在代码。AI 救不了烂素材。
🎥 视频背景（Hero 流体 / 深海 / 抽象类）
- 时长：8–15s loop 最佳，太长首帧延迟，太短用户看出循环点
- 格式：H.264 / MP4，max-height: 1080、quality: 60-70%，单文件 ≤ 5MB
- 遮罩通道：如果你要做”视频上叠暗角+上下渐变”，视频本身不要带黑边，让 CSS
linear-gradient()叠，后期好调 - 免费可商用池：Pexels Videos / Coverr / Mixkit（搜 “deep ocean”、”abstract fluid”、”light leak”）
- lifetruth 建议：找一段”深海鲸鱼俯冲”或”墨汁入水”的 4K 素材，裁 12s loop，静音
🖼️ 画面元素逻辑
- SVG 路径：如果用 Stroke 描边动画（电影式章节），AI 需要
.svg里 path 的stroke-dasharray/stroke-dashoffset可操控 —— 用 Illustrator 导出时勾”保留路径可编辑” - 玻璃态素材：不用准备图，CSS
backdrop-blur-xl+bg-white/5+border-white/10就够了 - 字体：Google Fonts 的 Cinzel / Cormorant Garamond / Inter 直接 CDN 引，不用下载
📋 素材清单模板（复制到你的项目根）
/assets/
hero-video.mp4 ← 12s loop，≤5MB
og-cover.jpg ← 1200×630，OG 分享图
/fonts/ ← （可选）自托管字体
/svg/
logo.svg ← 带 path 可描边的版本
divider.svg ← 装饰线
四、一篇能直接抄的”提示词卡片”模板
把上面四层压成一张卡片，下次做站替换 [ ] 就能用：
【角色】资深前端 + UI 动效设计师，GSAP 熟练
【项目】[站名]，定位 [科技×人文/电商品牌/作品集…]，参考气质 [Awwwards 某站]
【视觉层】
- 底色 [ ]，主色 [ ]，强调色 [ ]
- 字体：[英文] + [中文]
- 质感：噪点 % / 玻璃态 / 光晕…
- ❌ 禁止：[蓝紫渐变卡片 / Bootstrap 布局…]
【动效层】
- 驱动方式：滚轮(chapter pin) / 光标(磁吸) / 自动(timeline)
- 关键动效：[阻尼滚切 1.2s] [探照灯 mousemove] [Stroke 描边]
- Timing：微交互 150ms / 过渡 300ms / reveal ≤ 500ms
【交互层】
- 技术栈：[单文件 HTML] 或 [Next.js + GSAP + Lenis]
- 响应式：移动端关 XX，prefers-reduced-motion 全关
- 边界：只改 [XX 区]，不动路由/文案
【素材】
- 视频：[hero-video.mp4，12s loop，已放 /assets]
- SVG：[/svg/logo.svg 可描边]
- 字体：Google Fonts CDN
【输出】单文件 HTML，UTF-8 无 BOM，GSAP CDN 引入即可跑
下篇预告
提示词 + 素材齐了，怎么让 Codex / Claude Code / Cursor 真的把这套跑起来，而不是”生成 → 报错 → 瞎改 → 放弃”。重点是 AGENTS.md 先写、GSAP Skills 必装、ScrollTrigger 三坑。
正文完
