Newshot 用你的编码 agent 把 vibe-coded 网站升级到高级质感。先动效，再品味，在真实浏览器中检查。
安装 · 升级网站 · 命令 · 评审器 · 演示 · FAQ · 贡献
左：agent 根据一段话的 brief 构建的网站。右：同一个网站，由一个新的 agent（Opus 5.5）对其运行 premium-motion upgrade 之后的样子。没有任何手工编辑。全部四项升级。
每个 agent 构建的落地页看起来都一样：接近黑色配一个霓虹强调色、标题里带一个斜体词、胶囊按钮、bento 网格、logo 跑马灯，而且每个区块都以同样的方式淡入上移。它并不丑。它只是告诉所有人这是模型做的，而且在发布前没人看过它。
Motion Debugger 给你的 agent 两样它没有的东西：
- 🎬 一套重建外观并保留事实的工作流。premium-motion skill 运行一条升级流水线：它记录基线，保留每一个事实、链接和表单，从产品自身的世界中选取一个方向，然后围绕编排好的动效和一个电影感滚动场景重建页面。它使用经过测试的 GSAP、ScrollTrigger、SplitText 和 Lenis 技术栈，或在 React 项目中使用 Motion。
- 👀 眼睛。motion-debugger critique 在 Chromium 中打开本地页面，记录入场，滚动整个页面，悬停每个控件，检查手机布局和 reduced motion，并把按优先级排序的修复项以及真实帧的截图交给 agent。agent 查看、修复、再看，然后与基线对比。
安装
下面每一行都是一条命令。它们适用于任何模型和任何编码 agent，且同样的命令可在 macOS、Linux 和 Windows（bash、zsh 或 PowerShell）上运行。CLI 和 npx 行需要 Node.js 22 或更高版本；git 行只需要 git。
完整安装（评审器、skill 和 agent 配置）。先安装，然后在你的项目中运行 init：
npm install -g https://github.com/ShadowKingYT444/motion-debugger/releases/latest/download/motion-debugger.tgz
motion-debugger init
init 会检测你的 agent（Claude Code、Cursor、Codex、VS Code、OpenCode），安装 skill，提供下载匹配 Chromium 的选项，并在要求你输入 yes 之前展示它将更改的每个文件。没有这一步不会写入任何内容，你现有的设置会被保留。
只装 skill，或只装评审器：
| 你想要 | 一行命令 |
|---|---|
| 为你使用的 agent 装 skill | npx skills add ShadowKingYT444/motion-debugger --skill premium-motion -a cursor |
| 把 skill 装到许多 agent 都会读取的共享 .agents/skills 文件夹 | npx skills add ShadowKingYT444/motion-debugger --skill premium-motion -a universal -y |
| 不装 Node 装 skill（bash、zsh） | mkdir -p .agents/skills && git clone --depth 1 https://github.com/ShadowKingYT444/motion-debugger.git /tmp/motion-debugger && cp -r /tmp/motion-debugger/plugin/motion-debugger/skills/premium-motion .agents/skills/ |
| 不装 Node 装 skill（PowerShell） | git clone --depth 1 https://github.com/ShadowKingYT444/motion-debugger.git $env:TEMP\motion-debugger; $null = New-Item -ItemType Directory -Force .agents\skills; Copy-Item -Recurse $env:TEMP\motion-debugger\plugin\motion-debugger\skills\premium-motion .agents\skills\ |
| 什么都不装，直接用评审器 | npx -y -p https://github.com/ShadowKingYT444/motion-debugger/releases/latest/download/motion-debugger.tgz motion-debugger critique http://localhost:3000 |
| 为评审器准备一个浏览器 | motion-debugger setup --browser |
对于 -a，使用你的 agent 的名称：claude-code、cursor、codex、gemini-cli、github-copilot、windsurf、cline、roo、zed、opencode、goose、kiro-cli、amp、junie 以及另外约 70 个（skills CLI）。无法运行 shell 命令的 agent 仍然可以遵循该 skill；它只是无法查看页面。
文章标题：Show HN: Motion Debugger——一个针对 AI 粗制滥造作品的浏览器批评器
如果你下载了 Playwright 的 Chromium，批评器会优先使用它，其次是 CHROMIUM_PATH，然后是已安装的 Chrome、Chromium 或 Edge（位于 macOS、Windows 或 Linux 上的常规位置）。CI 在三个平台上安装打包好的 CLI，并对一个真实页面进行批评。
git clone https://github.com/ShadowKingYT444/motion-debugger.git
cd motion-debugger && npm ci && npm run build && npm install -g .
motion-debugger setup --browser # version-matched Chromium
motion-debugger doctor
更多选项见 client setup。
升级一个站点
启动你的开发服务器，然后告诉你的 agent：
对这个站点使用 premium-motion upgrade。
agent 会做什么，来自 commands/upgrade.md：
- 基线。按现状批评页面，并列出它的 AI 痕迹。
- 盘点。写下要保留的内容（事实、数字、CTA、表单、你的 logo 和颜色）以及要替换的内容。
- 方向。编写 PREMIUM.md：受众、事实、产品的世界、字体、颜色、图像，以及一种动效个性。
- 首屏。单独重建 hero，并反复批评直到它站得住。
- 重建。逐区块推进，每个区块都从其内容出发进行布局，而不是 eyebrow、bento 和 marquee。
- 标志性场景。构建一个滚动驱动的场景，讲述产品的故事，并且在每个滚动位置都是完整的。
- 打磨与加固。修复所有列出的缺陷，然后是手机布局、减少动效、无障碍和滚动性能。
- 验证。再次批评，并与基线并排比较。
窄目标也可以：升级 pricing 区块、为 how-it-works 区块做 signature、打磨 footer。
命令
| 命令 | 作用 |
|---|---|
| upgrade [target] | 上述完整流水线：从 vibe-coded 到 premium，前后均验证 |
| audit [target] | 记录页面并排列所有 AI 痕迹和动效或完成度缺陷。不做编辑 |
| direction | 编写 PREMIUM.md，即其他所有命令读取的设计上下文 |
| motion [target] | 以同一种个性编排 hero、reveals、hover、press 和 transitions |
| signature [target] | 设计并构建一个电影感滚动场景 |
| typeset [target] | 用具有个性、尺度和完成度的系统替换默认字体 |
| palette [target] | 从产品的世界出发处理颜色、光线和深度，并带有章节节奏 |
| imagery [target] | 不使用 stock 照片的丰富视觉：产品渲染、生成式场景、实时产品 UI |
| compose [target] | 布局、层级和节奏：每帧一个主导元素 |
| polish [target] | 完成度处理：批评器列出的所有内容、每个状态、每个边缘情况 |
| harden [target] | 手机布局、减少动效、无障碍和滚动性能 |
agent 从 skill 中复制的动效代码会从其 Markdown 中提取，并在 CI 中以桌面、手机和减少动效尺寸在 Chromium 中运行，因此文档中的代码片段就是经过测试的代码片段。
批评器
你可以自己对任何本地内容运行它：
motion-debugger critique http://localhost:3000 # your dev server (Next.js, Vite, …)
motion-debugger critique ./site # a folder with index.html, or one .html file
它会打印发现的问题及修复方法，将 contact sheets 写入 .motion-critique/，并说明自上次运行以来发生了什么变化：已修复、新增和剩余。
| 发现项 | 含义 | |
|---|---|---|
| 🎞️ | 动效检查 | 无入场动效、入场动效无错峰、线性缓动、动效在 hero 区域之后停止、悬停无反馈、焦点不可见、不支持 reduced-motion、滚动卡顿、布局偏移 |
| 🚫 | stuck-invisible | 内容始终不出现，即使完整滚动页面后仍然如此（最常见的 agent 缺陷） |
| 🧱 | text-collision、copy-under-sticky | 文案覆盖在其他文案之上，或滚动时钻到 sticky 头部下方 |
| 🕳️ | hollow-containers、dead-space | 卡片内部存在空白带；页面大部分区域为空白 |
| 📐 | near-miss-alignment、edge-crowding | 元素偏离其列几个像素；文案紧贴屏幕边缘 |
| 📱 | mobile-overflow、tap targets、clipped text | 手机布局实际上只是被压缩的桌面布局 |
| 🤖 | default-template | 首屏与九项默认 AI 落地页特征中的多少项重合 |
发现项来自真实的 Chromium 帧，绝不来自阅读源码。每一项检查及其局限。
四项升级
四个落地页由 Sonnet 5.5 根据一段式 brief 构建，未使用插件，作为下方 A/B 研究的对照组。一个全新的 Opus 5.5 agent 对每个页面运行 upgrade，使用相同的 prompt。这些是单次运行，用于展示工作流，并非盲测对比，且无人编辑结果。prompt、skill 版本和每一份录屏都在 demos/upgrades.json 中。
| 评审分数 之前 → 之后 | 阻断级与重要发现 | 模板特征 | |
|---|---|---|---|
| Ledgerline：支付 API | 30 → 100 | 2 → 0 | 6 → 1 / 9 |
| Atelier Norr：建筑工作室 | 8 → 98 | 4 → 0 | 7 → 0 / 9 |
| Halo：无线音箱发布 | 38 → 100 | 3 → 0 | 5 → 0 / 9 |
| Drift：AI 睡眠教练 | 24 → 100 | 3 → 0 | 8 → 0 / 9 |
每个站点在 agent 完成后运行一次评审。agent 是针对此评审器进行工作的，因此请将分数理解为“它能看到的缺陷已消失”，而非品味度量。请评判影片。
Atelier Norr：建筑工作室 · 影片
Halo：无线音箱发布 · 影片
Drift：AI 睡眠教练 · 影片
Ledgerline：支付 API · 影片
每个 upgraded/ 文件夹还包含 agent 编写的 PREMIUM.md 方向文件。可从 demos/ 实时打开任意站点。
它有效吗？盲测研究
与升级分开，我们进行了一项从零构建的盲测 A/B 测试：相同的 brief、相同的构建模型（Sonnet 5.5），每个站点一个全新 agent。一个 agent 在空项目中工作；另一个拥有 skill 和评审器。
在最新一批（四对匹配，插件 v4）中，盲测 Opus 5.5 评审在全部四对中都偏好插件生成的站点（8/8 判定）。独特性从 6.4 升至 8.8，整体高级感从 6.9 升至 8.0。对照组站点平均共享 6.5/9 项默认模板特征；插件站点则一项都不共享。视觉设计变化最小（7.8 至 8.1）。
四对样本太少，不足以达到统计显著性。更早的 16 对研究在整体高级感（+1.0，p = 0.005）和动效质量（+1.34，p = 0.0004）上达到了显著性，但未发现视觉设计方面的提升，后续版本已针对此重建。该研究早于升级工作流。方法、每一项判定及有效性威胁。
FAQ
Show HN: Motion Debugger —— 针对 AI 粗制滥造内容的浏览器批评器
它与 Impeccable 或其他设计技能有何不同？该技能的形态（一个技能、一套命令词汇、一个上下文文件以及每个命令对应的 playbook）借鉴自 Impeccable，在此致谢。区别在于关注点和循环。动效是核心：经过测试的 GSAP 与 Lenis 技术栈、标志性滚动场景、编排以及 reduced-motion 处理。并且每条命令最后都会在真实浏览器中录制页面：批评器测量实际发生移动的内容，并在捕获的帧中发现完成度缺陷，因此 agent 依据证据工作，而不是阅读它自己写的 CSS。
它会改变我的内容吗？upgrade 会保留产品的事实、数字、链接、表单以及任何你已经拥有的东西（logo、品牌色、字体、照片）。它替换的是通用的外观。如果你只想要一份报告，请先运行 audit。
它能配合我的技术栈使用吗？纯 HTML、React、Next.js、Vite、Motion（framer-motion）和 GSAP。该技能使用你已有的动画库，绝不会再添加第二个。
它需要 Claude 或某个特定模型吗？不需要。这里没有任何东西调用模型 API：批评器是一个普通的 CLI，输出 Markdown 或 --json，而该技能是一个用 Markdown 编写的标准 Agent Skill。它可以与你 agent 运行的任何模型配合使用。演示是用 Claude 模型制作的，因为我们手头只有这些；工作流并不依赖它们。init 会配置 Claude Code、Cursor、Codex、VS Code 和 OpenCode，而 skills CLI 覆盖了约 80 个其他 agent（见 Install）。
它能在我的机器上运行吗？可以，在 macOS、Linux 和 Windows 上，需要 Node.js 22 或更高版本。CI 在三个平台上安装打包好的 CLI，并对一个真实页面进行批评。
会有任何东西离开我的机器吗？不会。批评器只打开无需凭据的本地页面（localhost、127.0.0.1、files），从不导入你的浏览器配置文件，并将录制内容保存在你的项目文件夹中。安全模型。
与你的 agent 配合使用
motion-debugger init 会为你配置这些；以下是它写入的内容。
| Agent | --client | MCP 配置 | 技能 |
|---|---|---|---|
| Claude Code | claude-code | .mcp.json | .claude/skills/ |
| Cursor | cursor | .cursor/mcp.json | .cursor/skills/ |
| Codex | codex | .codex/config.toml | .agents/skills/ |
| VS Code / Copilot | vscode | .vscode/mcp.json | .github/skills/ |
| OpenCode 1.x | opencode | opencode.json | .opencode/skills/ |
任何其他 agent（Gemini CLI、Aider、Windsurf、CI 任务）：将技能文件夹复制到你的项目中，并将 motion-debugger agents-md --skills-dir <folder> 打印出的块添加到该 agent 的指令文件（AGENTS.md、GEMINI.md、.cursorrules 等）中。
MCP 宿主还会获得 motion_critique，它会将发现的问题和截图作为图像内容返回。客户端设置详情 · 原生插件包。
对于单次交互，MCP 证据工具会录制有界旅程并比较修复：
| 工具 | 用途 |
|---|---|
| motion_critique | 批评整个页面：发现的问题、修复方案和 contact sheets |
| motion_recipe | 获取可运行的动画模式和集成指导 |
| motion_review | 通过 actor 观察和原生图像审查过渡 |
| motion_probe | 尝试中断偏移并保留失败证据 |
| motion_capture | 以明确的预期录制本地交互 |
| motion_inspect | 检查某一时刻附近的事件和测量数据 |
| motion_frames | 从实际录制中提取图像 |
| motion_compare | 比较等效的前后旅程 |
| motion_list | 查找已保存的捕获 |
见 Agent workflow。
贡献
欢迎提交 bug 报告、批评器误报的问题以及新的检查项。浏览 open issues 或在 Discussions 中打招呼。贡献指南。