← 返回业务线：AI 创意建站
本期窗口拉长为 2026-08-04～08-25（三周）。8 个覆盖面子领域中 3 个查到密集更新，均以 GitHub CHANGELOG/PR/commit 或浏览器官方发布说明为一手来源核实。vibe coding 建站工作流（Lovable/bolt.new）本期检索到的多为公司融资等运营新闻，未见落在窗口内且可核实日期的产品功能更新，跳过。
一、动效实现手法与库：Motion 三周连发三版（含破坏性变更），React Bits 新增像素转场组件
Motion（motion.dev） 本窗口连续发布三个版本：
- v13.0.0（2026-08-05，破坏性更新）：移除可选的
@emotion/is-prop-valid依赖，改为显式MotionConfig的isValidProp配置；修复硬件加速 SVG 元素动画结束时最终样式应用不正确的问题；修复AnimatePresence节点移除时机判断问题。 - v13.1.0（2026-08-10）：
Reorder组件新增多维拖拽重排、自动坐标轴检测、RTL（从右到左）支持——对卡片墙、看板类可拖拽交互直接有用。 - v13.1.1（2026-08-18）：修复非浏览器环境下访问
window的保护逻辑；改进AnimatePresence与 React 19 严格模式的兼容性。
同期，官方付费组件库 Motion UI v0.0.2（2026-08-13）新增 Toast 堆叠通知组件：多条通知以共享弹簧动画折叠成一叠卡片的视觉效果（3D 变换 + 透明度），配合 shadcn CLI 安装，是”高完成度”通知/提示交互模式的一个可直接参考的新样本。
React Bits（github.com/DavidHDev/react-bits）本窗口有多次组件更新：PixelSwap 组件（PR #1037，2026-08-12 合并）——像素碎片拼合成封面、替换底层内容后消散的转场效果，支持 6 种动画模式、3 种触发方式，内置 prefers-reduced-motion 无障碍支持和键盘交互，是本期少有同时覆盖”动效技法”与”无障碍”两个子领域的条目；Hyperspeed 组件新增”Neon Waves”预设（PR #1035，2026-08-12 合并），六种背景动效预设之一；ShapeBlur 组件几处几何清理/闪烁修复与动画循环内存泄漏修复（2026-08-13～14）。
GSAP 本期无新版本——npm registry 核实最新仍为 3.15.0（2026-04-13 发布），跳过。
对建站的启发：Motion v13 的破坏性变更（移除可选依赖）意味着升级前要检查项目是否依赖 @emotion/is-prop-valid 的自动注入；PixelSwap 组件”默认内置无障碍降级”这一设计思路，值得作为”高完成度动效同时兼顾可访问性”的正面范例写进方法论篇。
来源：Motion CHANGELOG（v13.0.0/v13.1.0/v13.1.1）、Motion UI · React Toast Stack（v0.0.2，2026-08-13）、React Bits PR #1037、React Bits PR #1035
二、设计到代码：Figma Code Connect 发布 2.0 破坏性大版本
Figma 于 2026-08-18 发布 Code Connect v2.0.0：彻底停止支持框架专属解析器（React/SwiftUI/HTML parser，此前已预告 8 月 17 日起停止维护），此后除迁移/取消发布命令外，其余命令均直接引导迁移到”模板文件（template files）”模式；仍需旧解析器可降级安装 @figma/code-connect@1。此前的 v1.5.3（2026-08-12）修复了 React 嵌套箭头函数回调渲染问题，并给模板文件的 InstanceHandle 新增 id 属性，与 Plugin API 的 SceneNode.id 对齐，便于设计稿到代码的节点级映射。
同期，Figma 于 2026-08-13 上线可在软件内直接编写的 Agent Skills（详见 AI 设计教学·本期综述），50+ 官方技能覆盖调研、设计系统、交接（handoff）等工作流，对”设计到代码”与”vibe coding 建站工作流”两个子领域都有参考价值，此处不重复展开。
对建站的启发：如果项目正用 Code Connect 的框架专属解析器把 Figma 组件映射到代码，这次 2.0 是一次需要主动处理的破坏性升级，建议升级前先读迁移指南；InstanceHandle.id 对齐 Plugin API 则让”设计稿节点 → 代码组件”的自动化脚本可以做更精确的双向定位。
来源：Figma Code Connect CHANGELOG（v1.5.3、v2.0.0）
三、性能/无障碍/响应式：Chrome 152 新增 CPU 性能分级 API，Safari TP 250 新增排版细节属性
Chrome 152（早期稳定版 2026-08-12，本轮检索时点 2026-08-25 正面向全量用户推送）新增 CPU Performance API（navigator.cpuPerformance）：只读整数 1（弱）～4（强），0 为未知，可配合 Compute Pressure API 使用；企业可通过 CpuPerformanceTierOverride 策略统一控制。该版本也是四周发布节奏的最后一版（9 月起 Chrome 153 改为两周节奏）。
Safari Technology Preview 250（2026-08-13）新增几项 CSS 特性：ruby-overhang: spaces（限制注音悬挂在相邻空格/标点内）、::marker 伪元素支持 content 属性、text-decoration-inset 属性、white-space-trim 属性——多属于排版细节增强。
对建站的启发：CPU Performance API 可以让做粒子背景、着色器动效的落地页，在低端设备上侦测到”弱”档位时自动降级或关闭重动效，是”高完成度但不能卡顿”这条原则第一次有了浏览器原生的分级依据，而不必只靠帧率监测这类事后判断；Safari 新增的几个排版属性（尤其是标点悬挂、下划线间距控制）则直接服务于”视觉风格与高完成度做法”里的版式节奏细节。
来源：Chrome for Developers · Chrome 152 Beta、WICG CPU Performance API 提案、WebKit · Safari Technology Preview 250 Release Notes（2026-08-13）
本期未展开（无新料或不硬凑）
- vibe coding 建站工作流：Lovable 本期消息以完成 4 亿美元 C 轮融资（估值 133 亿美元，8-18）、与 Cerebras 合作降响应延迟（8-11）等公司/运营新闻为主，未见落在窗口内且可核实具体日期的产品功能更新；bolt.new 疑似新增团队站点可见性设置、单独断开 GitHub 仓库连接、密码泄露检测等功能，但对应的 release notes 页面本轮检索环境无法直接核实到精确日期，暂不纳入。
- Web 动效技法图鉴、常用组件/交互模式：本期更新已并入”动效实现手法与库”一节，不重复单列。
- 视觉风格与「高完成度」做法：检索结果多为泛泛的年度设计趋势文章，缺乏具体日期与可验证来源，未纳入。
- 部署与技术栈：Jekyll 官方仓库在窗口前（8-3）有更新但未找到具体变更内容说明，不计入本窗口。
参考来源
- Motion CHANGELOG（v13.0.0/v13.1.0/v13.1.1，2026-08-05～08-18）— https://github.com/motiondivision/motion/blob/main/CHANGELOG.md
- Motion UI · React Toast Stack（v0.0.2，2026-08-13）— https://motion.dev/examples/react-toast-stack
- React Bits PR #1037（PixelSwap，2026-08-12）— https://github.com/DavidHDev/react-bits/pull/1037
- React Bits PR #1035（Hyperspeed Neon Waves，2026-08-12）— https://github.com/DavidHDev/react-bits/pull/1035
- Figma Code Connect CHANGELOG（v1.5.3/v2.0.0，2026-08-12/08-18）— https://github.com/figma/code-connect/blob/main/CHANGELOG.md
- Chrome for Developers：Chrome 152 Beta（2026-08-12）— https://developer.chrome.com/blog/chrome-152-beta
- WebKit：Safari Technology Preview 250 Release Notes（2026-08-13）— https://webkit.org/blog/18191/release-notes-for-safari-technology-preview-250/