@xiaoerzhan: Replica skill release - I used this skill to 1:1 replicate the currently recognized top-notch frontend website, achieving 100% fidelity. See comments. Here I explain the principles. I. Core understanding: Where is the "true source code" of a website? The key is to distinguish two types of websites— A. Server-side rendered / data-driven sites (Taobao, backend systems, most SaaS…

Recreating a Skill Release

I took this skill and 1:1 recreated the currently recognized best front-end website. The reproduction accuracy is 100% (see comments). Here I’ll explain the principles.

1. Core Insight: Where Does the “Real Source Code” Actually Live?

The key is to distinguish two types of websites:

• A. Server-side rendered / Data-driven sites (Taobao, admin systems, most SaaS)
  The actual logic runs on a server you can’t see. The browser only receives fragmented results spit out by the server.

• B. Static built sites (Astro / Vite SSG / Hugo — oryzo is this type)
  The entire client runtime (HTML + JS bundle + CSS + all 3D/images/font assets) is packaged into downloadable static files at build time and thrown onto a CDN. There’s no hidden backend computing frames.

Obviously, type B is the one you can dig into.

2. Why This Website Is Tricky: Assets Are Loaded Lazily on Scroll

You can’t just use wget to grab the HTML and call it done. Why? Because the heaviest parts of oryzo are:

• .sog Gaussian splatting data (3MB 3D scene)
• 25 .buf files (geometry + camera animation curves)
• wasm sorter, Rive animations

All these are dynamically fetched by JavaScript when you scroll — the URLs are even constructed on the fly in code. Static HTML scanning won’t find them.

That’s why mirror-site.mjs works like this: it spins up a real browser, scrolls from top to bottom, records every real network request that happens during that process, then downloads each one according to that “actual request list”. This is the only way to capture all dynamic assets. This time it captured 135 files.

3. Why Does It Render Identically After Moving?

It relies on root-relative paths. All paths in oryzo’s code start with /, e.g., /_astro/hoisted.js, /models/coaster.buf, /splats/props.sog.

As long as I serve the site/ folder as the web root directory, the browser will resolve /models/coaster.buf to my local copy. Same code, same paths, same bytes → the browser can’t tell if it’s the original site. It’s running Lusion’s real code + real assets, so it even replicates the original site’s quirk where two mp4s would abort.

The only two things that needed changes (not rewrites, but redirections):

1. Typekit fonts — Adobe locks licenses by domain; switched to localhost may block fonts → download the font files and self-host them, then change one line of @import to point locally.
2. Remove Cloudflare tracking — one line deletion.

All other 133 files remain unchanged. So the final hero pixel diff is only 36 out of 1.3 million — that tiny difference is just the random jitter from Gaussian splatting per-frame sorting.

I really open-source everything, you know~~ remember to give me a star:
https://github.com/Jane-xiaoer/web-clone…

Here’s the link for you to play: http://oryzo.ai
Save it — you’ll have ammunition when you need it.

It turns out to be a daily trending product — seems like my pain point is everyone’s pain point.

My “Little Ear Find” lives inside my computer. Hit option+F and it pops up with a panel. You just ask directly.

Behind it is a huge amount of work: embedding all local content. I switched between two RAG methods. The principle of the second method is more worth learning.

Before: cutting content into fixed chunks of 500 characters — that approach didn’t work well.

Now: the core idea is converting content into Q&A pairs, then merging and tagging them hierarchically. This makes searching much smarter.

I’ll post the second method’s link in the comments. You can use it yourself to process the base data on your computer.