好文集ChatGPT Plus¥119

我用 REA 逆向了 Screen Studio:拆出 6 条自动缩放规则,claude code 半小时复刻(附全过程)

文章目录

部分视频或图片暂未收录,已在正文保留提示;需要时可查看原文。查看原文 ↗

这周 REA 在时间线上刷屏,大家都在聊,我也拿它试了一把。

这次拆的是 Screen Studio。Mac 上挺火的一个录屏软件,录完会自动跟着鼠标放大,光标移动很顺,很多人拿它录产品演示和教程。我想看看这个自动放大到底是怎么做的。

先说结果。REA 用 101 秒把 Screen Studio 的安装包拆成了一张地图,3695 个文件,我顺着地图找到了自动缩放那几块代码。代码是混淆过的,REA 自带的还原工具在 Mac 上跑不了,最后是 claude code 现写了一个小脚本,把 6 万多处加密字符串解开。读下来,自动缩放背后就是 6 条规则。

然后我跟 claude code 说了一句"你继续完成这个 Screen Studio",它照着这 6 条规则从零写了一个本机版,录屏、自动放大、平滑光标、摄像头小窗都有。从开写到出第一版样片,半小时左右。

下面是复刻版录我自己主页的一段,鼠标点哪镜头跟到哪,光标是后画上去的。这段我没碰鼠标,是让 claude code 自己录的,它开了一个干净的浏览器窗口,照人手的节奏去点、去滚。

媒体暂未收录,可在原文中查看

一、REA 是什么,怎么装

REA 是 GitHub 上的一个开源项目,全名 Reverse Engineer Anything,我看的时候快 12 万星。它做的事情是给 claude code、codex 这些 agent 接上一套逆向工具,让 agent 能去翻一个没有源代码的软件。

逆向这个词听着吓人,其实就是手里没有源代码,从装好的程序反推它是怎么写的。以前这是安全圈的手艺,要会看汇编、会用反编译器。REA 把这些工具包成 agent 能直接调的接口,你只要说清楚想知道哪个功能怎么做的,agent 自己去翻。

它能拆的东西挺多,Mac 和 Windows 上的原生程序、Electron 写的桌面应用、网页、.NET 程序、安卓安装包都行。原生程序要另装 Hopper、Ghidra 或 IDA 这类反编译器;Electron 和网页这种 JavaScript 写的,什么都不用装。Screen Studio 正好是 Electron 写的。

装之前确认两样东西。Node 要 22.19 以上、24.11 以上或 26 以上,版本不对也能跑,但会一直报警告,用 nvm 单独装一个 24 最省事,不影响平时用的版本。在 Mac 上拆应用,还要有 Xcode 命令行工具,REA 分析时会用它现编一个小程序。

nvm install 24
xcode-select --install

然后一条命令注册进你的 agent。

npx rea-agents setup

它会列出 claude code、codex、cursor 这些,问你要配哪几个,改之前会备份原来的配置,配完重启 agent 就能用。装完跑一下自带的体检,Node、编译器、反编译器缺什么,它会直接告诉你。

npx rea-agents doctor

不想注册也行,每个功能都有对应的命令行,下面拆 Screen Studio 用的就是命令行。

二、拆 Screen Studio:先拿地图,再找功能

Electron 应用的代码都打包在一个叫 app.asar 的文件里,Screen Studio 的在 /Applications/Screen Studio.app/Contents/Resources/app.asar。拆它的命令是这样的。

npx -y rea-agents@latest analyze-javascript-application \
  "/Applications/Screen Studio.app/Contents/Resources/app.asar" \
  --integrity-policy record-and-continue --format json > ss-app.json

最后那个 --integrity-policy 参数,拆 Electron 应用多半要加。REA 默认会核对包里每个文件的指纹,Screen Studio 有 25 个随包带的原生程序,打包之后又签了名,指纹和包里登记的对不上,不加这个参数它会停下来,告诉你哪个文件对不上、常见原因是什么、确认没问题要加什么参数继续,不会闷头给你一个结论。这个默认挺好。加上之后,它把这些文件标成不可信,接着分析。

跑了 101 秒,出来一个 124MB 的证据文件。里面有 3695 个文件的清单,1814 个 JavaScript 文件逐个解析过,主进程和界面之间有哪些通信、加载了哪些原生插件、每个模块从哪来,都列着,每条结论后面跟着证据和局限。

这就是我说的地图。它告诉你的是东西都在哪,自动缩放具体怎么做,得顺着地图自己去读。

我在地图里搜 zoom、cursor、spring 这几个词,很快就看到了 ZoomEditor、zoomRanges、mouseClickSpring 这些名字,最后锁定在三个代码块里,加起来 5MB 左右。

如果你已经把 REA 注册进了 agent,这一步就是一句话的事。我会这样问。

用 REA 分析 /Applications/Screen Studio.app,
找出录屏导出后画面自动放大、跟着鼠标走是怎么实现的。
每个结论给出代码位置和证据,看不到的地方直接说不知道,不要猜。

最后那句很重要。逆向出来的东西天然不完整,你要让 agent 把看到的和猜的分开说。

三、撞上混淆:REA 在 Mac 上停在了这一步

打开那三个代码块,才知道 Screen Studio 防了一手。它的代码做过混淆,变量名全是 _0x4fb6f6 这种乱码,所有字符串被抽出来塞进一个大数组,数组还打乱了顺序,代码里要用一个字符串,就调一个函数去数组里按编号取。

人基本没法读。连 zoomRanges 这种名字,在代码里都长成 _0x4fb6f6(0x16eb)。

REA 其实有还原源码的命令,叫 recover-javascript-sources。一跑,它说这一步要借一个叫 Wakaru 的开源工具,要自己装,而且 REA 只在 Linux 上开放这个功能,Mac 上直接不让用。我翻了它的代码,确实是写死的。

就算换到 Linux 也不一定解决。Wakaru 擅长的是把压缩、打包过的代码还原,Screen Studio 这种把字符串加密藏起来的混淆,Wakaru 自己的说明里也写了,要先用 webcrack 这类反混淆工具处理一遍。

这时候是 claude code 接手。它看了几眼混淆的套路,写了一个六十来行的小脚本。先把整份代码解析成语法树,找出那个装字符串的数组和取字符串的函数,把这两段单独放进一个什么权限都没有的空沙箱里执行,再把代码里所有取字符串的调用,替换成真正的字符串。

三个代码块,一共替换了 6 万多处,没有一处失败。替换完再看,zoomRanges、sourceStartTime、snapToEdgesRatio 这些名字全回来了,逻辑能读了。

这一步让我把 REA 的分工想清楚了一点。REA 负责地图和证据,告诉你东西在哪、文件可不可信、模块之间怎么连;把一段逻辑真正读懂,还是 agent 的活。两个配在一起,看到一个功能想知道它怎么做的,这条路才算走通。

四、拆出来的 6 条规则

读完代码,Screen Studio 的自动缩放可以归成 6 条规则。每条我先说规则,再说我怎么理解它为什么这么设计。

1. 点一下,才放大

自动放大只跟点击有关。每次鼠标按下,它生成一段放大区间,从点击前 0.3 秒开始,到点击后 2.5 秒结束。两段之间隔不到 2.5 秒,就连成一整段。默认放大 2 倍,录屏最后 1 秒里的点击不算。

我的理解是,点击就是在告诉观众看这里。提前 0.3 秒开始推,镜头推到位的时候,正好赶上点下去那一下;点完多停 2.5 秒,留给观众看点击之后发生了什么。几次点击挨得近就连成一段,镜头不会在两次点击之间退出去又推进来。

2. 镜头跟着一团鼠标走

在一段放大里,它把鼠标的移动和点击按时间顺序往一个框里装。框的大小是放大后可视区域的一半宽、七成高,装得下就继续装,装不下就开一个新框。镜头对准当前这个框的中心。

效果就是,鼠标在一小块地方晃来晃去,镜头纹丝不动;鼠标跑出这个框,镜头才平移过去。我觉得这是它看着舒服最主要的原因。要是镜头老老实实跟着鼠标每一下走,画面会一直抖,看久了头晕。

3. 靠边就贴边

鼠标在屏幕边上的时候,放大后的画面要是还以鼠标为中心,就会露出屏幕外面的空白。它的做法是鼠标离边 25% 以内,直接把画面贴到那条边上,放大后的画面永远不会出界。

4. 所有的动,都是弹簧

镜头的推拉平移、光标的移动、点击时光标那一下缩放,各有一套弹簧。镜头那套偏重,推过去几乎不回弹,显得稳;点击那套偏轻,会轻轻弹一下,显得有手感。

还有一个我之前没想到的细节。导出的时候要算第 t 帧镜头在哪,它会从 t 往前 3.5 秒的位置重新开始,一帧一帧把弹簧算到 t。这样不管是从头导出,还是在编辑器里随便拖进度条,同一帧算出来的画面永远一样。弹簧本来要依赖上一帧的状态,它用这个办法让每一帧都能单独算。

5. 光标的两个小心思

一个是点击。鼠标按下之前 130 毫秒,光标就开始缩到 0.8 倍,松手才弹回来。等你看到点击那一下,光标的动作已经到位了。

另一个是倾斜。光标横着快速移动的时候,会顺着方向歪一点,越快歪得越多,最多 20 度。很细微,但光标看起来像是被手甩过去的。

6. 光标是重新画的

它录屏的时候根本不录系统光标,单独把鼠标位置记下来,导出的时候再画一个高清光标上去。所以画面放大 2 倍,光标还是清楚的,前面那些平滑、缩放、倾斜也才做得出来。

五、让 claude code 照着规则复刻一个

拆完这些,我对 claude code 说了一句"你继续完成这个 Screen Studio"。

它先回头把 Screen Studio 的默认参数又翻了一遍,比如每次点击生成的区间具体多长、几套弹簧各是多少,然后从零开始写。最后做出来两块。

1. 录制器

用 Swift 写的,调的是苹果的 ScreenCaptureKit。录屏时不录系统光标,同时每秒记 240 次鼠标位置,每秒 20 次记下当前光标是箭头、文字竖线还是小手,所有数据对齐到同一个时钟上。可以顺带录摄像头和麦克风。

2. 渲染

接在我平时做视频用的 Remotion 上。计算都放在一个文件里,放大区间、鼠标装框、靠边、三套弹簧、光标缩放和倾斜,全照拆出来的规则写;画面那层只管画。背景渐变、圆角阴影、摄像头小窗也有,镜头放大的时候小窗会缩小一点,不挡画面。

两块加起来 1300 行左右,我自己一行没写。用起来是这样的。

sz record 演示1                  # 倒数 3 秒开录,Ctrl-C 结束
sz render 演示1                  # 出 1080p、60 帧的成片
sz render 演示1 --aspect 9:16    # 出竖屏
sz ranges 演示1                  # 把自动生成的放大区间导出来,手改后再出片

实测在我的 M4 Pro 上,录屏 60 帧一帧没丢,22 秒的片子 50 秒左右渲完。

文章配图

样片里抽的 6 帧,从左到右、从上到下依次是全景,点风格按钮推近,点价格跟到导航,点 ¥299,跟着鼠标平移到另议,退回全景

复刻里我最想说的是它怎么验证。光标是重画的,最怕画上去的光标和画面对不上,比如鼠标明明停在按钮上,画出来的光标偏了几个像素,或者慢了半拍。claude code 的办法是专门录一段把系统光标也录进去的视频,再把自己画的光标涂成红色叠上去,一帧一帧裁出来比。大多数帧里红光标把系统光标完全盖住,只有快速移动的那一帧差了几个像素,在一帧以内。

这次对比还顺带发现了一个差距。鼠标停在文字上的时候,系统显示的是文字竖线光标,复刻版一直画箭头。于是又补了光标类型,现在能画箭头、竖线、小手三种。

竖屏单独调过。2 倍放大在竖屏里还是太小,上下全是空白,竖屏默认改成了 2.5 倍。

和正版比,它还差不少。没有图形界面的编辑器,改放大区间要改文件;光标只有三种;运动模糊只是整体糊一下,没做成顺着运动方向的;打字时放大和点击音效都没做。摄像头和麦克风的代码写了,还没拿真摄像头测过。做出一个能用的版本够了,要替代 Screen Studio 还差得远。

六、REA 适合拿来干什么

这次用下来,我觉得 REA 最适合的场景,是你看到一个软件的某个细节做得特别好,想知道它是怎么做的,好用到自己的东西里。以前只能靠猜,或者对着录屏一帧一帧扒;现在给 agent 一句话,它能拿着证据告诉你。

用之前有几点最好知道。

1. JavaScript 写的东西最顺。 Electron 桌面应用、网页、.NET 程序,不装别的就能拆。原生程序要自己装反编译器。

2. 它看得到的是装在你电脑上的部分。 软件放在服务器上的逻辑,它碰不到。

3. 混淆过的代码要多走一步。 REA 的源码还原只在 Linux 上开放,它借的 Wakaru 管的也是压缩代码。碰上字符串加密这类混淆,先用 webcrack 这类反混淆工具,或者像我这样让 agent 自己写脚本解。

4. 日常用还是注册进 agent。 命令行版本也能用,但追功能那几个命令是按 agent 连续对话设计的,单独敲要来回传 100 多 MB 的证据文件,很别扭。

5. 守住边界。 REA 的说明里自己写了,只用于合法的研究、学习、兼容对接,以及你自己有权分析的软件。我这次只是学原理,复刻是从零写的,没用 Screen Studio 的代码和素材,解出来的代码也不会公开。拆别人的软件之前,先看一眼它的用户协议。

写在最后

REA 刷屏这一周,很多人在吵软件会不会被抄完。我自己试完的感受是,它打下来的是看懂一个软件的成本。一个功能好在哪,以前要么靠猜,要么得认识做这个的人,现在半小时就能看到它的规则,还能马上做一个自己的版本出来验证。

对做小工具、做内容工具的人,这是好事。我做视频一直是全链路本地跑的,这次的复刻版也直接接在同一套 Remotion 上,等于给自己的流水线多了一个录屏模块。

有问题评论区问,我看到都会回。

文章配图

全文完
查看原文

沿着这个主题继续读

从一篇文章,找到相关的教程、经验和阅读路径。

Claude CodeClaude Code 入门与配置,从终端操作到项目记忆、Agent 机制和实践。