本文是 Vibe Coding 网页动效词典的下篇，从第 37 个词继续，涵盖组件反馈、布局过渡与页面转场三大板块。内容包括折叠展开、锚定浮层、弹窗过渡、抽屉、标签页切换、轮播等组件动效；数字计数、骨架屏、加载指示、成功错误反馈等结果反馈动效；布局过渡、共享元素转场和页面转场等空间变化动效。每个词条均配有常见类型、适用场景和可直接使用的 AI 提示词示例，最后介绍第四层 UX 规则（反馈、操作暗示等），帮助零基础开发者用提示词驱动 AI 实现专业网页动效。
本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。
本文是网页动效词典系列的中篇，从第 17 到第 36 个动效词条，系统讲解了三大类网页动效：进阶文字动效（按字符显现、打字机、乱码解码、文字变形）、滚动与空间动效（视差滚动、多层视差、横向滚动、滚动缩放、固定式滚动叙事、图片序列、滚动吸附、进度提示）以及鼠标与指针动效（磁吸按钮、倾斜卡片、光标跟随、聚光灯、跟随眼睛、光标拖尾）。每个词条都说明了效果原理、常见类型、适用场景，并附上可直接使用的 AI 提示词，帮助开发者用 vibe coding 方式实现精致的网页交互效果。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词，用于提升界面视觉设计。内容涵盖：移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画（ease-out 250ms）、限制字号不超过 4 种（最小 12px）、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友：0.5px 边框在老旧或低分屏设备上可能不适用，提示偏个人经验；另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
本文介绍了用AI开发小程序时如何补齐设计规范，解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解：确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈，以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑（规范与代码各改各的）的解决方法、维护流程和一段可直接使用的提示词，帮助AI持续按同一套规则产出页面。
文章指出在交互和视频制作中，单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题，文章推荐了一个简短的视频教程，该视频整理并演示了 13 类常见的 Motion 动效名称（如 Push Slide, Staggered Entrance, FLIP 等）。掌握这些标准术语，可以帮助用户更准确地向 AI、设计师或开发者表达需求，大幅提升沟通效率。
作者整理了 20 种与动画、物理、3D、声音及交付相关的开源技能与工具库，涵盖 Remotion、HyperFrames、Anime.js、React Spring、PixiJS、p5.js、Paper.js、Matter.js、Three.js、Rapier、OGL、tsParticles、glTF Transform、GL Transitions、OBS Studio、Chatterbox、Tone.js、faster-whisper、OpenCut 和 FFmpeg。每个工具附有简介和 GitHub 链接，覆盖从视频渲染、动画编排、图形绘制到配音、字幕转录和视频编码交付的完整创作流程。
文章介绍了 Codex 的 UI/UX 设计增强工具 UI UX Pro Max，包含 192 条行业设计规则、79 种 UI 风格、192 套配色方案、74 种字体组合，并支持 React、Next.js、Vue、Flutter 等 22 种技术栈。作者演示了如何通过一段提示词在 Codex 中安装配置该 Skill，并用其生成高端 AI SaaS 官网，解决了以往 AI 生成页面廉价感强、配色布局千篇一律的问题。评论区也讨论了 Skill 作为能力封装新形态的意义与实际效果。
作者分享了使用 Opus 5.5 一次性生成 UI 空状态 SVG 插图的完整提示词模板。提示词详细规定了画布尺寸、底板斜纹、卡片样式、占位条、Remix icon 图标、强调色使用规则、深色模式配色（CSS 变量 + data-theme 自动切换）、构图约束（缩小版真实产品界面而非插画）及技术细节（阴影用滤镜拼装、id 加随机前缀防冲突、可选弹出动画）。只需将【场景】替换即可复用，大幅节省设计精力。
文章整理了 8 个用 Claude Opus 生成视频的 GitHub 仓库，核心思路是让 Claude 写动画代码，再通过浏览器或本地工具渲染成视频。包括成片与提示词合集 awesome-opus5-5-videos、提供 51 种影片风格的 Skill 项目 lemo-opuscar、两支歌词 MV 完整工程 pdoom-video 与 PDoomVideo、15 种 MG 动效风格的 mg-styles-15、角色动画起步包 ClaudeAnimationBase，以及案例追踪和中文提示词仓库。作者建议从 10-15 秒短片练手，并提醒素材商用授权需注意。
作者分享了用 Claude 编写程序生成动画的完整攻略。Claude 不直接生成视频画面，而是通过写代码逐帧渲染视频。文章梳理了 4 条技术路线：代码生成视频（Remotion、HyperFrames、Manim 等）、网页即动画（Claude Artifacts、p5.js、Three.js）、通过 MCP 操作专业软件（Blender、After Effects），以及 AI 素材与代码组装的混合编排。同时总结 11 种动画风格，包括产品发布片、动态排版、数据信息图、数学讲解、名画风、生成艺术、3D 场景等，每种风格附样例、适用场景和工具推荐，并附有素材来源、提示词模板、做片流程和开源 skill，是一份可直接上手的实操指南。
作者分享了音效生成工具 Earshot v0.3 的使用体验，强调音效对动画质感的重要性。Earshot 内置 201 种全部由代码生成的音效，可一键生成整套音效包，且音效可精确到某一帧与动画完美同步，现已集成进 Cinetic 动效设计 Skill。作者认为 AI 不仅能做出漂亮动画，还能用代码精准控制声音，实现真正的声画合一。此外代码生成音效无版权风险，背景音乐也可用 strudel 制作。
作者以自媒体真实工作场景实测Google新发布的Gemini 4 Argon模型。通过鹈鹕骑自行车SVG动画、爆款视频拆解与提示词还原、公众号文章风格分析与选题生成、五道前端实战题（数据看板、3D宫殿、品牌官网、浏览器合成器等）进行评测。结论是该模型跑分第一，长视频理解和前端能力出色，写作能力介于Claude Opus和GPT之间，并提醒读者注意订阅档位和API优惠价截止时间。
