ui-redline-walkthrough 是开发者 rjmahesh 放出的一款开源软件，以 MIT 协议托管在 GitHub 仓库里。它做的事情很具体：把产品 UI 改造前与改造后的两张截图交给支持 Skill 的 Claude Agent，Agent 会按仓库里写好的工作流，生成一段带红墨水手写批注的动画红稿走查。红笔在真实界面上逐个圈出问题，界面平滑变形到修复版，结尾停在干净的 redesign 上。成品同时输出一份自包含 HTML 动画和一段高质量 MP4，相当于把一次产品评审现场录成可播放的影片；在 AI工具 这个分类下，它属于少见的把设计走查直接做成动画的 AI应用。
场景痛点
做产品评审或设计走查的人都熟悉这种场面：改造前后两张截图摆在桌上，要给同事和 stakeholder 讲清楚为什么改、改成了什么样，通常只能来回切图、靠嘴描述，或者自己在录屏软件里一帧帧加箭头。普通录屏看不出节奏，静态截图又缺少问题怎么被修掉的动态过程。这个 设计工具 想补的就是这段缺口，也是 工具推荐 方向上少见的专门做红稿走查的小工具。
主要功能特点
两张截图起步，一段红稿动画走查
输入非常克制：只要改造前和改造后两张截图，界面元素位置大体对应即可。Agent 不凭空生成画面，先调脚本把截图里的盒子、颜色、文本行量出来，再按 choreography 文档排节拍，让批注和界面变化按时间轴依次出现。示例是一次聊天回答 redesign，对比 Visa 与支付同类产品的回答差异，成品 19 秒。
红墨水手写批注圈在界面上
批注不是方正的打字体标注，而是模拟红笔手写：圈、箭头、引线和简短说明都画在真实截图之上，像设计师拿红笔在原型上批改。choreography.md 专门规定红墨浓度、批注先后、镜头推近与停顿节奏，避免动画变成乱飞的特效。这种 AI设计 式处理让问题点第一时间被读到，而不是被花哨动效盖过去。
界面平滑 morph 到修复版
走查不是两张图硬切：问题批完，对应元素会平滑 morph 到修复后的位置、尺寸和配色，从 before 过渡到 after。morph 范围由 Agent 按 measuring.md 的对齐坑来排，栅格、文本行 extent、图标位置都要量准，否则会穿帮。影片最后停在干净 redesign 上收尾，这也是 UI设计 走查片常见的收束方式。
自包含 HTML 与 MP4 双输出
动画引擎是 assets/template.html，浏览器打开即跑，空格暂停、方向键 seek。交付时用 export_mp4.py 调 headless Chromium 出帧，再交给 ffmpeg 合成 MP4。示例 3200×1800、60 帧，HTML 把引擎素材打成单文件，双击即放，这种 效率工具 式交付免播放器。
四份 references 写死走查经验
仓库带四份说明：intake.md 定开工问题与默认值；measuring.md 讲量截图与对齐坑；choreography.md 定义节拍、镜头、红墨与 morph；review-checklist.md 是评审打磨清单。沉淀成 Skill工具 文档，换 Agent 会话也能复用同一套走查标准。
脚本管线量框抠图标出帧
三个 Python 脚本撑起动画：measure.py 量出盒子与文本行；extract_icons.py 把图标抠成透明 PNG 合成 sprite；export_mp4.py 出帧并封装 MP4。这套 MIT 协议的 开源项目 源码在 GitHub 可读可改。
装进 Claude Code 配好依赖
安装很轻：把文件夹复制进 ~/.claude/skills/，或在 Claude 设置里上传 .skill 文件，在 Agent 会话里给两张截图即可开工。它不是开箱即用的软件，须有支持 Skill 的 Agent 环境，前后截图都得备齐。作为 开源软件，它适合愿意读脚本写提示词的人，对习惯在 实用软件 里找安装包的人门槛要先认。
项目地址
GitHub https://github.com/rjmahesh/ui-redline-walkthrough
下载地址
https://pan.quark.cn/s/53fd3733a48e
https://www.guangyapan.com/s/1967440175719751680_aeWhI5wocgzRgCO6 （光鸭新用户注册福利：永久免费空间：所有新用户注册即可解锁 2TB 永久免费存储空间，无需额外任务或付费）
相关推荐
Rainman Translate Book — 给 Codex 和 Claude Code 用的整本书并行翻译 Skill
2026-11-06
