丢个网址还你一套能跑的 React,Perfect Web Clone 把网页复刻做成流水线

让 AI「照着这个网站做一个」,多数模型的产物乍看有点像、一交互就散架:按钮点不动,布局是截图像素堆出来的。Perfect Web Clone 是开发者 ericshang98 出品的网页复刻工具,以技能形式驱动编码代理干活:你只要说一句 clone 加网址,它就把整条流水线走完——不是截一张图交差,而是量出来的复刻。项目 MIT 开源,在 SkillHub 插件广场 web-tools 分类在架,星标二百多。

它能做什么

  • 一句话授权全流程:clone 命令发起后自动走捕获、分区规划、React 编写、组装构建、评分、修复整条链路,中途不需要你再搭手
  • 手眼分离:捕获、测量、评分全部走确定性命令行工具,这些环节不烧模型调用;模型只负责写代码和修问题
  • 像素级是门槛表,不是提示词:每个区块按指纹、权重、视觉匹配三项打分,不达标就针对得分垫底的区块重建复测,循环到达标为止
  • 诚实交付:结果只有两种状态——可以交付评审,或带着残余问题清单如实报告;WebGL、运行时画布、滚动编排这类复刻上限会提前说明,内容照样克隆,动态外观可能还原不了
  • 产出是干净工程:Vite 加 React 加 Tailwind 的标准模板结构,资源本地化并做完整性校验,拿到手就能继续开发,不是一堆死图片
  • 过程可复盘:提取、规划、组装、构建、指纹、权重、评分每条子命令都输出 JSON,每个环节怎么过的关查得到

怎么获取

环境要求 Python 3.10 以上与 Node 20 以上,按官方仓库说明安装核心包并补装浏览器内核,再把配套技能装进 Claude Code、Codex 或任意能执行其命令行工具的编码代理;DeepSeek Harness 用户可在 SkillHub 插件广场 web-tools 分类直接找到它。

上手怎么用

  1. 参考页转代码:手里只有线上参考站、没有源文件时,克隆下来当开发起点,比对着截图手写快一个量级
  2. 自有站点迁移:老官网要迁到新框架,先克隆现状再逐步替换,结构对照着改,功能不丢件
  3. 评分表当验收基准:复刻完成后把评分结果存档,后续改动重跑一遍,视觉偏差有没有变大一目了然
  4. 版权红线先想清楚:克隆产物用于自有资产与内部参考,别人站点的素材与文案不要直接拿来上线,这跟工具无关,是使用者的责任

适合谁用

经常要把设计参考变成可编辑代码的前端与全栈工程师;给客户做站点改版、需要快速起步的建档团队。工具本身只管复刻质量,页面资产的权利归属要自己把关——这也是做交付时该反复强调的边界。想把「看图还原」升级成「量化复刻」的团队,可以先拿一个内部页面练手;贵州诚鑫致达科技 在网站交付里同样用这类量化验收的思路控制还原度,标准能测量,返工才会少。


企业存储选型参考|贵州诚鑫致达科技

做机房存储、虚拟化或监控归档,群晖在售机型参考:FS6400(全闪存阵列,数据库与虚拟化场景)。需要选型建议或上门评估,搜「诚鑫致达」即可找到我们。