注册并分享邀请链接,可获得视频播放与邀请奖励。

木马人 (@cnyzgkc) “看到小耳老师这个skill,顺便分享一个复刻网站的神器,这个项目在Github上有23.8k sta” — TopicDigg

木马人 的个人资料封面
木马人 的头像
木马人
@cnyzgkc
加入 December 2024
0 正在关注    0 粉丝
看到小耳老师这个skill,顺便分享一个复刻网站的神器,这个项目在Github上有23.8k star: 👉ai-website-cloner-template 原理:给它一个网址,AI 帮你逆向工程,直接生成出一个完整且干净的 Next.js 代码库。 优势: 1. 还原度极高:不只是抄外壳,AI 可以帮你自动截图,分析对应的布局、颜色、字体等,包括一些很细致的交互都能获取。 2. 兼容性好:支持 Claude Code、Cursor、GitHub Copilot 等主流 AI 编程助手。 怎么用? 在终端里输入 /clone-website [xx网址],AI 就帮你干活了。 跑完 npm install,直接在 Cursor 里打开项目,接着让它帮你改代码就行。 想复刻某个网站设计,或者做竞品分析的,这个工具效率直接拉满 👇
显示更多
复刻skill发布 🔥 我拿这个skill 1:1复刻了当前公认的最牛前端网站 还原度可以是100% 见评论区 在这里讲讲原理 一、核心认知:网站的"真源码"到底在哪? 关键要分清两类网站—— A. 服务端渲染 / 数据驱动的站(淘宝、后台系统、大部分 SaaS) 真正的逻辑跑在你看不到的服务器上,浏览器只拿到服务器吐出来的零碎结果。 B. 静态构建站(Astro / Vite SSG / Hugo —— oryzo 就是这类) 整个客户端运行时(HTML + JS bundle + CSS + 所有 3D/图/字体资产)在构建时就全部打包成可下载的静态文件,扔到 CDN 上。没有隐藏的后端在算画面。 ▎ 💡 所以很显然B是能扒拉的~~ 二、为什么这个网站麻烦:资产是"滚动时才掏出来"的 你不能简单 wget 把 HTML 抓下来就完事。因为 oryzo 最重的东西—— - .sog 高斯泼溅数据(3MB 的 3D 场景) - 25 个 .buf(几何 + 相机动画曲线) - wasm 排序器、Rive 动画 全是 JavaScript 在你往下滚的时候才动态 fetch 的,URL 还是代码里现拼的。静态扫 HTML 根本发现不了它们。 所以 mirror-site.mjs 的做法是:开一个真浏览器,从头滚到尾,把这期间发生的每一个真实网络请求全部录下来,再照着这份"实际请求清单"逐个下载。— 这是唯一能把动态资产抓全的办法。这次抓全了 135 个。 三、为什么搬过来就渲染得一模一样? 靠的是根相对路径。oryzo 的代码里全是 /_astro/hoisted.js、/models/coaster.buf、/splats/props.sog 这种以 / 开头的路径。 只要我从 site/ 这个文件夹作为 web 根目录起服务,浏览器请求 /models/coaster.buf 就解析到我本地那份。同样的代码、同样的路径、同样的字节 → 浏览器根本分不出这是不是原站。它跑的就是 Lusion 那套真代码 + 真资产,所以连原站那俩 mp4 会 abort 的怪癖都一模一样。 唯二需要改的地方(都不是"重写",是"重定向"): 1. Typekit 字体——Adobe 按域名锁授权,换到 localhost 可能不给字体 → 把字体文件下下来自托管,改一行 @import 指向本地。 2. 删 cloudflare 追踪——一行