本文是网页动效词典系列的中篇，从第 17 到第 36 个动效词条，系统讲解了三大类网页动效：进阶文字动效（按字符显现、打字机、乱码解码、文字变形）、滚动与空间动效（视差滚动、多层视差、横向滚动、滚动缩放、固定式滚动叙事、图片序列、滚动吸附、进度提示）以及鼠标与指针动效（磁吸按钮、倾斜卡片、光标跟随、聚光灯、跟随眼睛、光标拖尾）。每个词条都说明了效果原理、常见类型、适用场景，并附上可直接使用的 AI 提示词，帮助开发者用 vibe coding 方式实现精致的网页交互效果。
本文是 Vibe Coding 网页动效词典的下篇，从第 37 个词继续，涵盖组件反馈、布局过渡与页面转场三大板块。内容包括折叠展开、锚定浮层、弹窗过渡、抽屉、标签页切换、轮播等组件动效；数字计数、骨架屏、加载指示、成功错误反馈等结果反馈动效；布局过渡、共享元素转场和页面转场等空间变化动效。每个词条均配有常见类型、适用场景和可直接使用的 AI 提示词示例，最后介绍第四层 UX 规则（反馈、操作暗示等），帮助零基础开发者用提示词驱动 AI 实现专业网页动效。
本文是一篇 Vibe Coding 网页动效教程（上篇），旨在帮助读者用准确的术语向 AI 描述网页动效。文章先介绍 UI、UX 和 Vibe coding 的概念，提出网页动效的四层结构：技术工具（CSS、Motion、GSAP、Three.js 等）、触发方式、动效类型和 UX 规则。上篇重点讲解触发方式（悬停、焦点、点击、指针、视口、滚动、手势、页面加载、状态变化、定时）及动效类型的基础部分（Easing、Duration 等），每个词条配有可直接使用的提示词示例，帮助读者清晰表达脑中的动效效果。
文章介绍了 Vibe Coding 视觉词典的下篇，详细讲解了滚动与动作、提示与加载、视觉风格三大模块的设计概念与 AI 提示词，涵盖 Scroll Reveal、Parallax、Skeleton Screen 等前端开发技巧。
文章针对 AI 做网页时指令模糊的问题，提出了“视觉词典”概念。通过拆解页面布局、结构、导航和组件四个层级，提供了 26 个具体的网页设计模式（如 Bento Grid、Masonry Layout、Sticky Navbar）。每个词条包含概念说明、适用场景及可直接复制给 AI 的提示词，旨在帮助用户更精准地指挥 AI 生成高质量的网页设计。
作者尖沙咀小霸王精选了九篇关于网页动效的中文 X 长文进行推荐。内容涵盖 Punk 的动效词典（上中下三篇），系统讲解缓动、滚动叙事、鼠标交互、按钮反馈等动效术语与制作方法；爻火基于 Omarchy 拆解的 21 种像素 Logo 动效；Punk 的前端设计工作流与视觉词典，覆盖页面布局、结构与整体风格描述；Russell 的 PPT as Code 演示文稿方案；以及万象 AI 实验室用 HyperFrames、GSAP 将长文转化为手绘动画的方法。文章旨在帮助读者用准确的语言描述动效需求，提升网页设计的表现力。
本文介绍了用AI开发小程序时如何补齐设计规范，解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解：确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈，以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑（规范与代码各改各的）的解决方法、维护流程和一段可直接使用的提示词，帮助AI持续按同一套规则产出页面。
作者针对小伙伴们个人网页普遍内容过满、缺乏重点的问题，结合自身 UI 设计经验提出九条建议：一是留出空白，让首屏清晰传达“你是谁、做什么”；二是把成熟项目和成果前置；三是配色先确定风格，强调色克制使用；四是重视字体对气质的影响，区分字号字重；五是让 AI 少用千篇一律的卡片布局；六是融入个人小巧思；七是广泛浏览设计参考积累审美；八是动效克制并注意移动端适配；九是可加轻量音效彩蛋。核心观点是个人网页应体现个人风格，删繁就简。
作者分享使用 Codex Sites 功能快速建站的全流程经验：从触发 Sites、用结构化描述生成需求，到预览迭代并发布为可分享的稳定链接。Sites 将代码生成、托管、部署合并，适合做个人作品集、资源合集、活动邀请和产品预热页等静态站点，但不支持用户登录、数据表单和深度 SEO。作者还踩了两个坑：本地预览进程易挂导致页面丢失，建议每版导出静态文件；多站点堆积会使 Codex 变慢，建议做完即归档。结论是它适合快速验证想法，不适合正式官网和长期托管。
作者记录了利用 Claude Code 和 AI 辅助工具，从零开始开发 AI 阅读插件 ReadCue 的全过程。文章探讨了 HTML 在 AI 时代的复兴、全新的设计开发范式，以及程序员如何从手写代码转向架构决策和产品定义。
文章指出在交互和视频制作中，单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题，文章推荐了一个简短的视频教程，该视频整理并演示了 13 类常见的 Motion 动效名称（如 Push Slide, Staggered Entrance, FLIP 等）。掌握这些标准术语，可以帮助用户更准确地向 AI、设计师或开发者表达需求，大幅提升沟通效率。
本文由设计师 clear 分享了如何利用 AI (Vibe Coding) 在 4-6 小时内构建高质量初创公司落地页的完整工作流。文章详细介绍了技术栈的选择（Cursor、Claude Code、Tailwind CSS、Framer Motion 等），并重点强调了分步构建的策略：从结构搭建、设计系统应用到内容填充，再到最后的细节打磨和移动端适配。作者指出，具体的提示词、参照现实设计案例以及保持视觉一致性是区分“Vibe Code”成品与垃圾代码的关键。
文章探讨了“PPT as Code”的理念，主张利用现代网页技术替代传统PPT，以实现演示文稿的可复用性与迭代能力。内容涵盖了底层模型构建、基础分页与动画实现、进阶框架（如Scroll-snap、WAAPI、reveal.js）的选择，以及如何通过建立视觉系统与AI辅助提升设计美观度。作者强调将演示从一次性文件转变为可持续维护的内容资产。
