← 返回业务线：AI 创意建站

说明：前两期（07-14、07-21）逐项核查后均无新料。本期重新逐项核查 Motion / GSAP / React Bits / v0 / bolt.new / Lovable / Figma 官方渠道及 Chrome/Safari/Firefox release notes，本期有实质进展，以下按覆盖面分节呈现；未获实质进展的子领域在末尾注明，不硬凑。

一、常用组件与视觉风格：Motion 官方推出「Motion UI」动效组件库

Motion（前身 Framer Motion）团队于 2026-07-23 发布新产品线 Motion UI：26 套区块 + 35 个组件，覆盖 Hero、定价、客户证言、Bento Grid 等常见营销/落地页板块，每个组件均带 “MotionScore” 性能评分。安装方式支持通过 shadcn CLI 无 token 直装，或通过 Motion+ 会员的 Motion AI Kit / Motion+ MCP 由 AI agent 直接拉取组件源码适配进项目。同日配套发布 Motion AI Kit 6.2.0，扩展了 search-motion-codex 这个 MCP 工具，使其能把 Motion UI 组件作为可直接粘贴的多文件源码返回给调用的 AI agent。

需注意：Motion 核心动画库本身版本未变（仍是 2026-07-01 发布的 12.42.2，已直接核实 GitHub CHANGELOG），Motion UI 是一条新的、独立的产品线，而非核心库的版本升级。

对建站工作流的启发：这是本业务线”vibe coding 建站”与”常用组件/交互模式”两个子领域少见的同时命中——一个由动效库官方出品、shadcn 兼容、且原生支持被 AI agent 通过 MCP 直接调用安装的动效组件库，直接对应本业务线”代码前置 + AI 辅助从想法到上线”的方法论主张，值得纳入工具箱的候选组件源。

来源：Motion UI、Introducing Motion UI

二、动效实现手法与库：浏览器动画 API 小幅更新，组件库维持常规打磨

Chrome 151（2026-07-28 今日转正式版）：AnimationEvent/TransitionEvent 接口新增只读属性 animation，可在动画事件回调中直接拿到触发该事件的 Animation 对象，便于 JS 驱动的动画调试与动画间的链式编排。

Safari Technology Preview 248（2026-07-22）：一批 CSS 引擎级修复——progress() 函数新增 no-clamp 选项、修复跨相邻色彩空间插值时缺失分量的转发问题、修复 :last-child 系伪类选择器错误依赖解析器状态的问题等。这批是引擎正确性修复而非新能力，与”性能/无障碍/响应式”仅有间接关联。

React Bits（DavidHDev/react-bits）：本周（07-21～07-26）仍是围绕既有 Silk、Plasma 等 shader 背景组件的常规打磨——修复 Silk 组件参数变化时画面冻结的问题、Plasma 组件默认帧率从 30 提到 60、新增 CurvedInput 组件的多种技术栈变体（JS/Tailwind、TS/CSS、TS/Tailwind）。延续了此前两期”多为已有组件的 bug 修复/变体补全，非新组件品类”的模式，本期不作为独立条目展开。

来源：Chrome 151 Release Notes、Safari TP 248 Release Notes、React Bits Commits

三、vibe coding 建站工作流：Lovable 上线”先规划、后生成”的 Chat Mode

Lovable 新增 Chat Mode：新建项目时可先与 AI agent 做多轮规划对话（agent 可自主决定何时查文件、看日志、查数据库），确认方案后再进入代码生成，用以降低”一次性 prompt 直接生成”的失败率；同批还包含一个 Security Scan 功能——发布时如已连接 Supabase，会自动做一次约 10～15 秒的安全扫描（数据库权限配置、RLS 策略缺失、鉴权漏洞等），并自动修复不影响可用性的问题。

⚠️待核实：Chat Mode 对应博文 chat-mode-and-questions 与 Security Scan 功能均可独立确认真实存在，但受目标站点反爬限制，未能直接核实其精确发布日期是否落在 07-21～07-28 窗口内（检索结果多次交叉印证功能细节一致，但发布时间戳未见于可抓取页面）。故本条计入本期综述时标注日期存疑，供读者自行复核。

对建站工作流的启发：如果日期核实为真，”规划优先于生成”与”发布前自动安全扫描”都是对本业务线”AI 辅助从想法到上线”工作流的直接补充，可作为评估其他 vibe coding 工具是否具备同等能力的参照点。

来源：Lovable Blog: Chat mode & Follow-up questions、How Lovable protects your apps automatically

本期未展开（无新料或不硬凑）

  • GSAP：直接查询 npm registry API，最新版本仍为 3.15.0（发布于 2026-04-13），本周无新版本。
  • 性能/无障碍/响应式：本期未检索到 prefers-reduced-motion、移动适配等方向的新进展。
  • 部署与技术栈：本期未检索到 GitHub Pages/Jekyll/静态托管相关的新进展。
  • 设计到代码：Figma 的 “Code Layers”（设计图层转实时 React 代码）为 2026-06-24 Config 大会发布的功能延续（当前处于需申请的早期访问阶段），非本周新闻，不重复收录。
  • v0.dev、bolt.new 本周检索到若干疑似更新（如 v0 未登录预览沙箱额度提升、bolt.new 模型层调整），但均未能核实其发布日期确切落在本周窗口内，故不纳入，避免误导读者当作”本周新闻”。

参考来源

  1. Motion UI — https://motion.dev/ui
  2. Introducing Motion UI — https://motion.dev/magazine/introducing-motion-ui
  3. Chrome 151 Release Notes — https://developer.chrome.com/release-notes/151
  4. Safari Technology Preview 248 Release Notes — https://webkit.org/blog/18162/release-notes-for-safari-technology-preview-248/
  5. React Bits Commits — https://github.com/DavidHDev/react-bits/commits
  6. Lovable Blog: Chat mode & Follow-up questions — https://lovable.dev/blog/chat-mode-and-questions
  7. Lovable Blog: How Lovable protects your apps automatically — https://lovable.dev/blog/how-lovable-protects-your-apps-automatically
知识库创意建站Web动效