最近做了一个复刻网站的 Skill:给一个 URL,就能 1:1 复刻整个页面,布局、排印、素材、滚动动画、交互状态全部还原。整个 skill 需要依赖于 ego lite 这个目前最好的浏览器自动化产品
repo 地址往下翻👇
首先为什么能做到 1:1?
核心是把要复刻的网页当成一个可以查询的数据源,而不是一张一张靠眼睛比对的图片。
大部分人让 AI 仿站的做法,是丢一张截图过去,让模型看图写代码。截图只有像素信息,字体、间距、动画曲线这些关键事实全靠模型猜,所以效果不稳定。
我的做法是让 agent 打开真实页面,直接从运行中的页面里提取事实:完整 DOM 结构、CSS 设计变量、字体文件、动画关键帧,甚至从编译后的 JS 里挖出界面上懒加载的配置数据。
滚动动画这种最难仿的部分,也是靠真实滚动逐帧采样逆向出来的,不是看着效果猜参数。
拿到这些事实之后,重建就有据可依了。静态站直接做 HTML 镜像,框架站逐节重建成组件。
最后一步是验收。
在原站和克隆站上跑同一套测量脚本,对比几何位置、排印、颜色、字体、动画覆盖等八个维度的数值,任何一项不达标就继续修,直到收敛。
所以,还原度不是靠模型“画得像”,而是整个流程里没有靠眼睛判断的环节:每一步的输入是测量出来的事实,产出也用测量来验证。
“像不像”这件事,从主观判断变成了一个可以收敛的数值问题。
但是要注意的是
我写这个 skill 的原因是因为我看到一个网站的滚动动画很惊艳,但是无论怎么口述,模型都无法很好地复刻出来。通过开发这个 skill 之后,模型可以直接通过 ego lite 自己去理解对应滚动动画实现的各种逻辑。
所以使用的时候也必须是用于学习,绝对不可以用于抄袭他人的作品。
目前测试成功的模型有:fable 5、opus 5、gpt 5.6-sol
repo:
github.com