@xiaoerzhan: 复刻skill发布 我拿这个skill 1:1复刻了当前公认的最牛前端网站 还原度可以是100% 见评论区 在这里讲讲原理 一、核心认知：网站的"真源码"到底在哪？ 关键要分清两类网站—— A. 服务端渲染 / 数据驱动的站（淘宝、后台系…

X AI KOLs Timeline 工具
website-cloning static-site frontend tutorial reproduction

摘要

这篇文章讲解了如何1:1复刻一个公认的最牛前端网站（oryzo），包括抓取动态资产和修改少量配置的方法，实现了高还原度。

复刻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 追踪——一行 <script> 切掉。 其余 133 个文件零改动。所以最后 hero 像素 diff 只有 36/130万 ——那点差异还只是高斯泼溅每帧排序的随机抖动。
查看原文
查看缓存全文

缓存时间: 2026/06/30 13:42

复刻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 追踪——一行