尧图网页设计 
让落地页活起来ai-design-skills流体动效与滚动动画完整实现教程【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skillsai-design-skills 是一套面向 Claude Code、Cursor、Codex、Windsurf 等 AI 编码工具的开源设计技能包。本文以其中的 landing-page-design 技能为例手把手教你用流体动效与滚动动画让落地页活起来——无需手写动画逻辑只要把技能文件交给 AI它就能产出一个具备完整视觉系统的落地页。一、快速了解 ai-design-skills 是什么 ai-design-skills 的组织方式非常简单每个技能就是一个自包含的文件夹装哪个用哪个。目前仓库内置一个核心技能技能能做什么landing-page-design从零搭建高转化落地页需求问答、页面结构、转化文案外加一整套视觉系统字体、间距、圆角、动效技能的灵魂是一条理念见 SKILL.md 开头定义一个卖点 → 一个受众 → 一个主行动整个技能分为两半Part A —— 策略与结构页面该说什么、分几个板块、文案怎么写PART A 章节Part B —— 视觉系统不可妥协的视觉规则本文主角流体动效就在 B7 章节二、三步安装最快把技能接入你的项目 以 Claude Code 为例只需三条命令详见 README 安装章节mkdir -p .claude/skills git clone https://gitcode.com/gh_mirrors/ai/ai-design-skills /tmp/ai-design-skills cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/其他工具有各自的放置位置参考 README.md#L35-L58工具放置路径Cursor.cursor/rules/CodexAGENTS.mdWindsurf.windsurfrulesCline.clinerules装好后用大白话提需求即可例如帮我做一个落地页产品是 XX目标用户是 YY。想换成自己的品牌风格每个技能的设计值字体、颜色、间距、动效参数都集中在文件底部一节改那一段整个技能自动跟随见 README Make it yours。三、流体动效核心用自定义缓动模拟真实物理 ⚡这是 B7 Motion choreography流体动力学 的第一条铁律永远不要用默认过渡动画。所有动效都要通过自定义三次贝塞尔曲线模拟真实世界中的质量与弹簧物理。技能给出的标准组合是一行 Tailwind 类transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]这条cubic-bezier(0.32, 0.72, 0, 1)缓动曲线手感先快后稳、带一点冲量是整页动效的基因——后续所有揭示动画、按钮反馈都复用它。流体岛屿导航Fluid Island Nav️导航栏不是死板的横条而是一枚悬浮的玻璃胶囊rounded-fullmt-6mx-auto与页面顶部分离随页面漂着走。它包含四个关键动效细节SKILL.md#L275-L283汉堡菜单形变点击后三条线平滑旋转成 Xrotate-45/-rotate-45绝不允许直接消失模态展开菜单以全屏遮罩打开重玻璃拟态backdrop-blur-3xl交错遮罩揭示导航链接从不可见的盒子里淡入 上滑translate-y-12 opacity-0→translate-y-0 opacity-100并用delay-100、delay-150、delay-200逐项错开像水波一样依次浮现。四、滚动动画实现要点元素绝不静态出现 Scroll interpolation 章节 定义了滚动入场动画的标准公式元素进入视口时执行一次沉重而温和的上浮淡入translate-y-16 blur-md opacity-0 → translate-y-0 blur-0 opacity-100时长800ms 以上。注意细节里的blur 去模糊过程——元素像从水中浮出一样先虚后实这正是流体感的来源。性能红线新手最容易踩的坑✅ 用IntersectionObserver或 Framer Motion 的whileInView驱动揭示动画❌严禁window.addEventListener(scroll)—— 它会触发持续回流直接拖垮移动端性能也就是说把技能文件交给 AI 后它写出的滚动动画会自动遵守这套只监听进入视口、不监听滚动的原则你在 Code Review 时把它当成验收标准即可。五、点睛之笔Tagline Reveal 逐词点亮动画 ✨Part B 规定每个落地页必须包含一个独立的大字标语区块B11 Tagline reveal通常放在 Hero 之后或利益点之后。它的动画是整页的高光时刻文字初始呈主题色的 25%~35% 透明度安静地躺在页面里随着区块滚入视口每个单词按阅读顺序单独点亮为全色而不是一整块同时变亮字号遵循 B1 类型比例text-4xl~text-6xl实现方式逐词IntersectionObserver或经requestAnimationFrame节流的单一监听——依然不允许无节流的 scroll 监听。效果就像墨水在纸上逐字洇开是流体二字最直观的体现。六、让动效完整的配套细节 动效不会孤立存在B9 States 章节 要求每个交互元素都带齐一套物理反馈状态规则Hover背景微变 轻微缩放或位移Activescale(0.98)或translateY(1px)按下感Focus可见的焦点环无障碍刚需Loading骨架屏而非转圈Error行内具体提示禁止window.alert()另外两条与动效气质相关的硬规则背景永远不用渐变全页唯一渐变只允许出现在 Hero 标题文字上见 B4/B5嵌套圆角遵循内圆角 外圆角 − 间距公式B3。这些约束保证页面动得优雅但不花哨。七、交付前自查清单 ✅技能文件末尾内置了 Quick checklist交付落地页前建议逐项核对与动效相关的关键项每个过渡动画都使用自定义cubic-bezier滚动揭示使用IntersectionObserverTagline reveal 区块存在至少两行单词随滚动逐个点亮Hover / Active / Focus / Loading / Empty / Error 状态齐全文案无 Lorem Ipsum、无 AI 套话SeamlessGame changer 等总结ai-design-skills 的思路值得所有做落地页的同学借鉴把动效品味沉淀成一份可执行的规则文件而不是每次都口头叮嘱 AI要丝滑一点。核心就四件事全页统一一条弹簧感缓动曲线cubic-bezier(0.32,0.72,0,1)导航做成玻璃胶囊 交错遮罩揭示滚动入场 上浮 去模糊 淡入用IntersectionObserver驱动用一个逐词点亮的 Tagline 区块制造记忆点。把它装进你的 AI 编码工具然后说一句帮我搭一个落地页剩下的交给技能文件。项目采用 MIT 许可见 LICENSE可自由使用与二次改造。【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 让落地页活起来：ai-design-skills流体动效与滚动动画完整实现教程
让落地页活起来ai-design-skills流体动效与滚动动画完整实现教程【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skillsai-design-skills 是一套面向 Claude Code、Cursor、Codex、Windsurf 等 AI 编码工具的开源设计技能包。本文以其中的 landing-page-design 技能为例手把手教你用流体动效与滚动动画让落地页活起来——无需手写动画逻辑只要把技能文件交给 AI它就能产出一个具备完整视觉系统的落地页。一、快速了解 ai-design-skills 是什么 ai-design-skills 的组织方式非常简单每个技能就是一个自包含的文件夹装哪个用哪个。目前仓库内置一个核心技能技能能做什么landing-page-design从零搭建高转化落地页需求问答、页面结构、转化文案外加一整套视觉系统字体、间距、圆角、动效技能的灵魂是一条理念见 SKILL.md 开头定义一个卖点 → 一个受众 → 一个主行动整个技能分为两半Part A —— 策略与结构页面该说什么、分几个板块、文案怎么写PART A 章节Part B —— 视觉系统不可妥协的视觉规则本文主角流体动效就在 B7 章节二、三步安装最快把技能接入你的项目 以 Claude Code 为例只需三条命令详见 README 安装章节mkdir -p .claude/skills git clone https://gitcode.com/gh_mirrors/ai/ai-design-skills /tmp/ai-design-skills cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/其他工具有各自的放置位置参考 README.md#L35-L58工具放置路径Cursor.cursor/rules/CodexAGENTS.mdWindsurf.windsurfrulesCline.clinerules装好后用大白话提需求即可例如帮我做一个落地页产品是 XX目标用户是 YY。想换成自己的品牌风格每个技能的设计值字体、颜色、间距、动效参数都集中在文件底部一节改那一段整个技能自动跟随见 README Make it yours。三、流体动效核心用自定义缓动模拟真实物理 ⚡这是 B7 Motion choreography流体动力学 的第一条铁律永远不要用默认过渡动画。所有动效都要通过自定义三次贝塞尔曲线模拟真实世界中的质量与弹簧物理。技能给出的标准组合是一行 Tailwind 类transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]这条cubic-bezier(0.32, 0.72, 0, 1)缓动曲线手感先快后稳、带一点冲量是整页动效的基因——后续所有揭示动画、按钮反馈都复用它。流体岛屿导航Fluid Island Nav️导航栏不是死板的横条而是一枚悬浮的玻璃胶囊rounded-fullmt-6mx-auto与页面顶部分离随页面漂着走。它包含四个关键动效细节SKILL.md#L275-L283汉堡菜单形变点击后三条线平滑旋转成 Xrotate-45/-rotate-45绝不允许直接消失模态展开菜单以全屏遮罩打开重玻璃拟态backdrop-blur-3xl交错遮罩揭示导航链接从不可见的盒子里淡入 上滑translate-y-12 opacity-0→translate-y-0 opacity-100并用delay-100、delay-150、delay-200逐项错开像水波一样依次浮现。四、滚动动画实现要点元素绝不静态出现 Scroll interpolation 章节 定义了滚动入场动画的标准公式元素进入视口时执行一次沉重而温和的上浮淡入translate-y-16 blur-md opacity-0 → translate-y-0 blur-0 opacity-100时长800ms 以上。注意细节里的blur 去模糊过程——元素像从水中浮出一样先虚后实这正是流体感的来源。性能红线新手最容易踩的坑✅ 用IntersectionObserver或 Framer Motion 的whileInView驱动揭示动画❌严禁window.addEventListener(scroll)—— 它会触发持续回流直接拖垮移动端性能也就是说把技能文件交给 AI 后它写出的滚动动画会自动遵守这套只监听进入视口、不监听滚动的原则你在 Code Review 时把它当成验收标准即可。五、点睛之笔Tagline Reveal 逐词点亮动画 ✨Part B 规定每个落地页必须包含一个独立的大字标语区块B11 Tagline reveal通常放在 Hero 之后或利益点之后。它的动画是整页的高光时刻文字初始呈主题色的 25%~35% 透明度安静地躺在页面里随着区块滚入视口每个单词按阅读顺序单独点亮为全色而不是一整块同时变亮字号遵循 B1 类型比例text-4xl~text-6xl实现方式逐词IntersectionObserver或经requestAnimationFrame节流的单一监听——依然不允许无节流的 scroll 监听。效果就像墨水在纸上逐字洇开是流体二字最直观的体现。六、让动效完整的配套细节 动效不会孤立存在B9 States 章节 要求每个交互元素都带齐一套物理反馈状态规则Hover背景微变 轻微缩放或位移Activescale(0.98)或translateY(1px)按下感Focus可见的焦点环无障碍刚需Loading骨架屏而非转圈Error行内具体提示禁止window.alert()另外两条与动效气质相关的硬规则背景永远不用渐变全页唯一渐变只允许出现在 Hero 标题文字上见 B4/B5嵌套圆角遵循内圆角 外圆角 − 间距公式B3。这些约束保证页面动得优雅但不花哨。七、交付前自查清单 ✅技能文件末尾内置了 Quick checklist交付落地页前建议逐项核对与动效相关的关键项每个过渡动画都使用自定义cubic-bezier滚动揭示使用IntersectionObserverTagline reveal 区块存在至少两行单词随滚动逐个点亮Hover / Active / Focus / Loading / Empty / Error 状态齐全文案无 Lorem Ipsum、无 AI 套话SeamlessGame changer 等总结ai-design-skills 的思路值得所有做落地页的同学借鉴把动效品味沉淀成一份可执行的规则文件而不是每次都口头叮嘱 AI要丝滑一点。核心就四件事全页统一一条弹簧感缓动曲线cubic-bezier(0.32,0.72,0,1)导航做成玻璃胶囊 交错遮罩揭示滚动入场 上浮 去模糊 淡入用IntersectionObserver驱动用一个逐词点亮的 Tagline 区块制造记忆点。把它装进你的 AI 编码工具然后说一句帮我搭一个落地页剩下的交给技能文件。项目采用 MIT 许可见 LICENSE可自由使用与二次改造。【免费下载链接】ai-design-skills项目地址: https://gitcode.com/gh_mirrors/ai/ai-design-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考