SuperAPI AI 工具集

screenshotting-changelog

通用与其它

查看项目

更新于 10-15 21:05

技能介绍

用途:在准备含视觉或 UI 改动的拉取请求(PR)时,通过改动前后截图生成可视化变更日志,让评审者无需本地运行应用即可直观对比。

主要能力:用 Cursor 内置浏览器导航并截图,记录受影响页面或组件在改动前后的状态,并把截图整理成 Markdown 变更小结,粘贴进 PR 描述。

使用方式:先捕获“before”状态,可执行 git stash 或切到基础分支,启动开发服务器,然后调用 browser_navigate(参数如 {"url": "http://localhost:3000/affected-page", "take_screenshot_afterwards": true})再调用 browser_take_screenshot(参数如 {"fullPage": true, "filename": "before-homepage.png"}),对每个受影响页面重复。随后执行 git stash pop 或切到功能分支,等待热重载或重启开发服务器,再以相同方式捕获“after”截图(如 after-homepage.png)。最后生成变更日志,格式包含 Visual Changes 标题与 Before/After 图片对比及改动说明,并粘贴进 PR 正文。

变体:可用 browser_resize 在移动端 375px、平板 768px、桌面 1280px 宽度做响应式对比;如应用支持深色模式,可分别截取两种主题;也可捕获悬停状态、打开的弹窗、已填表单和错误状态。组件级截图可导航到 Storybook URL 或特定组件路由。

限制:截图保存在工作区,可在 Markdown 中引用或上传到 PR。此技能最适合设计改动较多的 PR,仅后端改动可跳过。资料未提供收费、价格或其他平台支持信息。