Xiaomi's MiMo Code Landing Page Gets a 1:1 Clone via OpenAI Codex

Hello everyone, I'm Kakarot AI~

Today, Xiaomi MiMo Code sent me a text message telling me they've released an AI Coding Agent, free to experience with a million-token context 😄

Many people should have received it today.

I didn't go to try it out right away. Instead, I opened up their official website to take a look.

Hey, the visual design is quite high, it really fits my aesthetic~

✅ The website is here: https://mimo.xiaomi.com/zh/mimocode

Then I discovered that when you move the mouse on the website, there's a special effect of [erasing to reveal a background image], which is quite interesting.

Damn curiosity drove me to keep sliding the mouse across the entire screen, wanting to see what the full background image looked like. I wonder if anyone else is like me! 😄

And there's a [subtitle typewriter] effect here, which is also quite interesting.

My screenshot can't show it, you can go to the MimiCode official website to see it.

The entire website, whether layout, colors, or text styles, has a sense of artistry, overall just high visual quality 🤔

So, how to scrape it down and use it for myself? 🤔

My first thought was to throw screenshots to Codex and have it replicate. But taking screenshots one by one is too troublesome.

And the fonts are difficult to copy, so what to do? 🤔

Just throw the website link directly to Codex and let it do a 1:1 replica 😄

---

Then it roughly consumed half of my Plus quota,

Spent about ten minutes, and replicated the homepage with a high degree of fidelity.

Look, my access address here is: http://localhost:5173/ Not lying 🤔

---

I took a full screenshot of the website below.

Only some subtle differences, basically perfectly replicating the styles, layout, and font styles. Codex is awesome.

How did I do it?

Just give the website link to Codex and let it do a 1:1 restoration.

The prompt is very simple.

Help me 1:1 replicate this website: https://mimo.xiaomi.com/zh/mimocode

This website has a mouse movement effect that reveals a background image, feels quite interesting, needs to be replicated. How to do it?

Here I gave it a screenshot, afraid it wouldn't understand the background image effect 🤔

I didn't know what the special effect of "moving the mouse to see the background image" was called before, it was Codex that summarized it. I think the term [mouse erase reveal image] is quite vivid 🤔

Then I looked at the source code Codex made.

I found that it crawled the website's fonts and related images down 😄

The erased background image is this one. Emmm, elegant, too elegant.

Then I asked Codex to help me add comments to the core code of the special effect, so I could understand it. (In the AI era, who still reads such complex code? Not reading, not reading...)

A bit of thought

This is just to provide everyone with a train of thought 🤔

For example, when you see a good-looking website, or some cool special effects, how to replicate it?

Of course, the quick replication here is also because MimoCode's official website is relatively simple.

For example, I got the website's fonts, layout, and UI style here. How to apply them to our own website? 🤔

You can let Codex help you extract a DESIGN.md file, and later throw this MD file into your website directory, and let Codex do the style design based on this file.

Prompt:

I think the UI style of this website looks great. Help me extract the design style of this website and generate a DESIGN.md file, so that I can later migrate this website's UI style to other websites, to guide the AI Agent in changing styles. 

Write the DESIGN.md file specification according to the DESIGN.md specification structure open-sourced by Google Labs.

How to apply cool special effects to your own website?

Let Codex extract the core code, generate a "technical doc.md", then throw it into your website, and let Codex add the special effect based on the document.

Perfect~