拓冰网站定制 
Transitions.dev架构揭秘:动效扫描引擎、MCP Server与Cloudflare Worker托管修复服务如何实现【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.devTransitions.dev 是一个开源的 UI 动效 AI Agent 项目它内置 43 个手工打磨的过渡动效配方库并提供一个能扫描你的代码库、给出 0-100 动效评分、再用 AI 提出修复建议的智能体。本文将拆解它的三层核心架构——确定性的动效扫描引擎、MCP Server和基于 Cloudflare Worker 的托管修复服务带你弄懂这套AI 只动 CSS、不碰逻辑的动效修复方案是如何落地运行的。一、项目全景库、Agent、Skill 三位一体仓库的组织方式非常清晰三大板块各司其职目录角色transitions/43 个过渡动效示例modal、tooltip、toast、tabs……每个一个独立可交互 demoagent/动效扫描引擎 CLI GitHub Action Cloudflare Worker 修复服务skills/ 与 cli/free/教 AI 使用配方的 Skill 文档与免费配方手册如果你想本地跑起来可以克隆仓库git clone https://gitcode.com/gh_mirrors/tr/transitions.dev二、动效扫描引擎纯确定性规则不花一分钱 AI 费扫描引擎位于 agent/lib/是整套系统里最硬核的部分。它的设计原则是扫描完全确定性、免费、离线AI 只在后续的修复环节出场。1. 四步流水线文件收集agent/lib/walk.mjs 遍历仓库收集 CSS、SCSS、JSX、Vue、Svelte 等样式与组件文件规则检查agent/lib/rules.mjs 运行一套纯正则/词法级别的动效规则例如transition: all、过长的 duration、hover 缺少过渡覆盖、缺少prefers-reduced-motion保护等组件识别agent/lib/components.mjs 通过类名、ARIA 角色、组件名、Tailwind 工具类和 Framer Motion 属性认出每一个 UI 组件modal、dropdown、tooltip、toast、accordion、tabs……读懂它的开/关时长、缓动、缩放再与对应配方的按用途匹配的基准值对比评分汇总agent/lib/scan.mjs 汇总所有发现算出动效评分。2. 评分怎么算出来的评分算法在 agent/lib/scan.mjs 中一目了然每条发现按严重度加权major扣 8 分、warn扣 4 分、info扣 2 分、minor扣 1 分每条规则设有扣分上限如recipe-mismatch最多扣 32 分防止单条吵闹规则把分数打到零最终得分映射为四档等级90 是smooth75 是decent50 是janky低于 50 是static。扫描输出的发现分三类恰好对应修复的三种形态发现类型含义修复方式off-scale数值不在动效刻度上如 modal 关闭用了 300ms应为 150mspolish把值挪到刻度上recipe-mismatch动效构建方式不对动画了布局属性、没有退出动画、直接闪现revamp安装官方配方recipe-available手写组件恰好有现成配方不扣分仅提示revamp 可安装三、MCP Server你的 AI 来修我方提供配方第二个架构层是部署在api.transitions.dev/v1/agent/mcp的MCP ServerModel Context Protocol源码在 agent/worker/mcp.mjs。它的定位很独特服务器上从不调用任何模型。你用自己的 Claude Code、Cursor 连过来用自己的 token干活Server 只负责提供 AI 无法自己知道的东西——扫描器契约、修复指引和真实的配方源码Pro 配方按许可证发放。Server 暴露四个工具见 agent/worker/mcp.mjsscan_instructions—— 告诉你如何跑确定性扫描、每条发现什么意思fix_guidance(mode)—— 返回 polish 或 revamp 模式下的完整修复规则list_recipes—— 列出全部配方清单slug、名称、tierget_recipe(slug, variant)—— 拉取配方的权威源码CSS / React / TypeScript 三种变体。配方的物料由 agent/worker/pack-recipes.mjs 打包进 Cloudflare KV 的RECIPES命名空间——配方更新后重跑一次打包即可。免费配方无需密钥Pro 配方则校验许可证且每月有 2000 次拉取的宽松额度KV 存储本身免费额度只为保护内容。四、Cloudflare Worker 托管修复服务AI Key 只出现在服务端第三个架构层是同 Worker 上的托管修复接口/v1/agent/fix入口在 agent/worker/worker.mjs。这里藏着整套架构最核心的安全设计Anthropic API Key 只存在服务端secret ANTHROPIC_API_KEY客户端只发自己的 license key 扫描发现 受影响文件内容。1. 一次修复请求的完整旅程客户端 CLI → POST /v1/agent/fixlicense key findings files ① 校验许可证LICENSES KV ② 配额检查USAGE KV月度 / 每日 / 全局预算三重阀门 ③ revamp 模式从 RECIPES KV 加载真实配方源码 ④ 流式调用 Claude要求返回精确的搜索-替换编辑而非整文件 ⑤ 服务端应用编辑edits.mjs完整文件原样返回 ⑥ 成功后才记账失败永远不扣配额几个值得细看的工程细节编辑式输出agent/worker/worker.mjs模型只返回{find: ..., replace: ...}级别的精确编辑一个几百 token 的大组件修复只需几个 token快且不会截断agent/worker/edits.mjs 在服务端应用编辑匹配不上或会破坏代码的编辑会被跳过并如实报告流式保活agent/worker/worker.mjs长修复任务期间每 5 秒向响应流写一个空格防止任何代理或客户端超时断开分级限流agent/worker/wrangler.toml免费档用更快的 haiku 模型10 次/月、5 次/天外加一个FREE_GLOBAL_MONTHLY 2000的全局月度预算熔丝把免费档的 AI 花费硬性封顶在几十美元付费档用 sonnet200 次/月不受免费池影响诚实的失败agent/worker/worker.mjs模型过载、超时、上下文过大都映射为可读的错误语义model_busy、model_timeout、too_large并附带一句本次未计入你的配额。2. 两种修复模式模式做什么风险polish默认免费档可用所有值按用途挪到动效刻度上300ms 的 modal 关闭变 150ms、0.8 缩放变 0.96补 hover 覆盖、加 reduced-motion 保护命名属性替代transition: all。绝不重构极小几行的 diffrevampBusiness 档polish 之上为每个被识别的组件安装官方配方配方 CSS、状态钩子、进出场 JS含 Pro 配方但从不触碰组件逻辑较大 diff走 PR 评审五、GitHub Action让 CI 替每个 PR 把关动效架构的最后一环是 CI 集成。agent/templates/transitions-agent.yml 提供现成的工作流模板npx transitions-agent init-ci一条命令即可装好每个 Pull Request 自动获得一条动效评分评论含识别出的组件与发现每次推送原地更新自动修复有问题时向该 PR 的分支绝不含 main开一个修复 PR——合并即采纳关闭即拒绝描述里用人话解释用户会感知到什么打开从 800ms 变 250ms、关闭时会平滑退出而不是瞬间消失可选的min-score合并门禁评分低于阈值直接挂掉检查。agent/action/ 下的 autofix.mjs 与 comment.mjs 分别实现修复 PR 和评分评论配合revamp/polish/no-motion-fix三个 PR 标签即可按单调整修复策略。六、安全模型为什么你可以放心把代码交给它整套架构的信任边界设计得非常克制四点值得记住先 diff 后落盘——所有修复先以 diff 形式展示没有一声yes不写任何文件PR 优先——--pr开在新分支上团队评审、测试通过、人工合并才生效全量 git 化——任何已合并的修复都离一次git revert那么远;只动动效——修复只碰 CSS 过渡与动画保护永远不碰组件逻辑。写在最后Transitions.dev 的架构给了AI 改代码类项目一个很好的范本把确定性逻辑扫描、评分、配额、应用编辑全部放在自己可控的层里把创造性工作理解代码、生成编辑交给模型再用 MCP 这种开放协议让用户选择用你的 AI还是用我们的服务。如果你想亲手验证从npx transitions-agent跑一次扫描开始再顺着 agent/README.md 里的完整文档往下走你会发现这套动效修复流水线远比你想象的克制、可靠。【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Transitions.dev架构揭秘:动效扫描引擎、MCP Server与Cloudflare Worker托管修复服务如何实现
Transitions.dev架构揭秘:动效扫描引擎、MCP Server与Cloudflare Worker托管修复服务如何实现【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.devTransitions.dev 是一个开源的 UI 动效 AI Agent 项目它内置 43 个手工打磨的过渡动效配方库并提供一个能扫描你的代码库、给出 0-100 动效评分、再用 AI 提出修复建议的智能体。本文将拆解它的三层核心架构——确定性的动效扫描引擎、MCP Server和基于 Cloudflare Worker 的托管修复服务带你弄懂这套AI 只动 CSS、不碰逻辑的动效修复方案是如何落地运行的。一、项目全景库、Agent、Skill 三位一体仓库的组织方式非常清晰三大板块各司其职目录角色transitions/43 个过渡动效示例modal、tooltip、toast、tabs……每个一个独立可交互 demoagent/动效扫描引擎 CLI GitHub Action Cloudflare Worker 修复服务skills/ 与 cli/free/教 AI 使用配方的 Skill 文档与免费配方手册如果你想本地跑起来可以克隆仓库git clone https://gitcode.com/gh_mirrors/tr/transitions.dev二、动效扫描引擎纯确定性规则不花一分钱 AI 费扫描引擎位于 agent/lib/是整套系统里最硬核的部分。它的设计原则是扫描完全确定性、免费、离线AI 只在后续的修复环节出场。1. 四步流水线文件收集agent/lib/walk.mjs 遍历仓库收集 CSS、SCSS、JSX、Vue、Svelte 等样式与组件文件规则检查agent/lib/rules.mjs 运行一套纯正则/词法级别的动效规则例如transition: all、过长的 duration、hover 缺少过渡覆盖、缺少prefers-reduced-motion保护等组件识别agent/lib/components.mjs 通过类名、ARIA 角色、组件名、Tailwind 工具类和 Framer Motion 属性认出每一个 UI 组件modal、dropdown、tooltip、toast、accordion、tabs……读懂它的开/关时长、缓动、缩放再与对应配方的按用途匹配的基准值对比评分汇总agent/lib/scan.mjs 汇总所有发现算出动效评分。2. 评分怎么算出来的评分算法在 agent/lib/scan.mjs 中一目了然每条发现按严重度加权major扣 8 分、warn扣 4 分、info扣 2 分、minor扣 1 分每条规则设有扣分上限如recipe-mismatch最多扣 32 分防止单条吵闹规则把分数打到零最终得分映射为四档等级90 是smooth75 是decent50 是janky低于 50 是static。扫描输出的发现分三类恰好对应修复的三种形态发现类型含义修复方式off-scale数值不在动效刻度上如 modal 关闭用了 300ms应为 150mspolish把值挪到刻度上recipe-mismatch动效构建方式不对动画了布局属性、没有退出动画、直接闪现revamp安装官方配方recipe-available手写组件恰好有现成配方不扣分仅提示revamp 可安装三、MCP Server你的 AI 来修我方提供配方第二个架构层是部署在api.transitions.dev/v1/agent/mcp的MCP ServerModel Context Protocol源码在 agent/worker/mcp.mjs。它的定位很独特服务器上从不调用任何模型。你用自己的 Claude Code、Cursor 连过来用自己的 token干活Server 只负责提供 AI 无法自己知道的东西——扫描器契约、修复指引和真实的配方源码Pro 配方按许可证发放。Server 暴露四个工具见 agent/worker/mcp.mjsscan_instructions—— 告诉你如何跑确定性扫描、每条发现什么意思fix_guidance(mode)—— 返回 polish 或 revamp 模式下的完整修复规则list_recipes—— 列出全部配方清单slug、名称、tierget_recipe(slug, variant)—— 拉取配方的权威源码CSS / React / TypeScript 三种变体。配方的物料由 agent/worker/pack-recipes.mjs 打包进 Cloudflare KV 的RECIPES命名空间——配方更新后重跑一次打包即可。免费配方无需密钥Pro 配方则校验许可证且每月有 2000 次拉取的宽松额度KV 存储本身免费额度只为保护内容。四、Cloudflare Worker 托管修复服务AI Key 只出现在服务端第三个架构层是同 Worker 上的托管修复接口/v1/agent/fix入口在 agent/worker/worker.mjs。这里藏着整套架构最核心的安全设计Anthropic API Key 只存在服务端secret ANTHROPIC_API_KEY客户端只发自己的 license key 扫描发现 受影响文件内容。1. 一次修复请求的完整旅程客户端 CLI → POST /v1/agent/fixlicense key findings files ① 校验许可证LICENSES KV ② 配额检查USAGE KV月度 / 每日 / 全局预算三重阀门 ③ revamp 模式从 RECIPES KV 加载真实配方源码 ④ 流式调用 Claude要求返回精确的搜索-替换编辑而非整文件 ⑤ 服务端应用编辑edits.mjs完整文件原样返回 ⑥ 成功后才记账失败永远不扣配额几个值得细看的工程细节编辑式输出agent/worker/worker.mjs模型只返回{find: ..., replace: ...}级别的精确编辑一个几百 token 的大组件修复只需几个 token快且不会截断agent/worker/edits.mjs 在服务端应用编辑匹配不上或会破坏代码的编辑会被跳过并如实报告流式保活agent/worker/worker.mjs长修复任务期间每 5 秒向响应流写一个空格防止任何代理或客户端超时断开分级限流agent/worker/wrangler.toml免费档用更快的 haiku 模型10 次/月、5 次/天外加一个FREE_GLOBAL_MONTHLY 2000的全局月度预算熔丝把免费档的 AI 花费硬性封顶在几十美元付费档用 sonnet200 次/月不受免费池影响诚实的失败agent/worker/worker.mjs模型过载、超时、上下文过大都映射为可读的错误语义model_busy、model_timeout、too_large并附带一句本次未计入你的配额。2. 两种修复模式模式做什么风险polish默认免费档可用所有值按用途挪到动效刻度上300ms 的 modal 关闭变 150ms、0.8 缩放变 0.96补 hover 覆盖、加 reduced-motion 保护命名属性替代transition: all。绝不重构极小几行的 diffrevampBusiness 档polish 之上为每个被识别的组件安装官方配方配方 CSS、状态钩子、进出场 JS含 Pro 配方但从不触碰组件逻辑较大 diff走 PR 评审五、GitHub Action让 CI 替每个 PR 把关动效架构的最后一环是 CI 集成。agent/templates/transitions-agent.yml 提供现成的工作流模板npx transitions-agent init-ci一条命令即可装好每个 Pull Request 自动获得一条动效评分评论含识别出的组件与发现每次推送原地更新自动修复有问题时向该 PR 的分支绝不含 main开一个修复 PR——合并即采纳关闭即拒绝描述里用人话解释用户会感知到什么打开从 800ms 变 250ms、关闭时会平滑退出而不是瞬间消失可选的min-score合并门禁评分低于阈值直接挂掉检查。agent/action/ 下的 autofix.mjs 与 comment.mjs 分别实现修复 PR 和评分评论配合revamp/polish/no-motion-fix三个 PR 标签即可按单调整修复策略。六、安全模型为什么你可以放心把代码交给它整套架构的信任边界设计得非常克制四点值得记住先 diff 后落盘——所有修复先以 diff 形式展示没有一声yes不写任何文件PR 优先——--pr开在新分支上团队评审、测试通过、人工合并才生效全量 git 化——任何已合并的修复都离一次git revert那么远;只动动效——修复只碰 CSS 过渡与动画保护永远不碰组件逻辑。写在最后Transitions.dev 的架构给了AI 改代码类项目一个很好的范本把确定性逻辑扫描、评分、配额、应用编辑全部放在自己可控的层里把创造性工作理解代码、生成编辑交给模型再用 MCP 这种开放协议让用户选择用你的 AI还是用我们的服务。如果你想亲手验证从npx transitions-agent跑一次扫描开始再顺着 agent/README.md 里的完整文档往下走你会发现这套动效修复流水线远比你想象的克制、可靠。【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考