让 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 三坑。