小米MiMoCode官网颜值高？Codex：拿来吧您嘞！1:1完美复刻～

大家好，我是卡卡罗特~

今天小米MiMo Code给我发个短信，告诉我他们发布了一个AI Coding Agent，免费体验百万上下文

很多人今天应该都收到了。

我没有第一时间去体验，而是打开了他们的官网看看。

诶哟，颜值挺高的哇，挺符合我的审美~

网站是这个：mimo.xiaomi.com/zh/mimocode

然后我发现这个网站移动鼠标的时候， 有一个【擦除露出背景图】的特效，还挺有意思的。

该死的好奇心驱使在整个屏幕一直滑动鼠标，像看下这个背景图全貌是啥，**不知道大家有没有跟我一样的！**

然后这里有【字幕打字机】的效果，也挺有意思的。

整个网站无论是排版，色彩，文字样式都挺有艺术感的，总是就颜值挺高的

那，怎么把它爬下来，为我所用呢

我第一想法是通过截图丢给Codex，让他复刻。但是一张一张截图又太麻烦了。

而且字体它比较难复制，那在怎么办呢？

直接把网站链接丢给Codex，让它1:1 复刻

然后大概耗费了我Plus一一半的额度，

花了十来分钟，将首页复刻出来了，还原度很高。

我把网站全部截图如下。

只有一些细微的差别，基本把样式啊，排版啊，字体样式完美复刻。Codex牛啊。

我是怎么做的？

直接把网站链接给Codex，让他1:1还原即可。

提示词很简单。

帮我1:1 复刻这个网站：https://mimo.xiaomi.com/zh/mimocode这个网站有个鼠标移动，展示背景图的效果，感觉挺有意思的，需要复刻。怎么做的？

这里我给了一张截图给他，我怕它不理解背景图的效果

我之前是不知道“移动鼠标可以看到背景图”这个特效叫什么的，是Codex总结出来的。我觉得【鼠标擦除露图】这个词挺形象的

然后我看下Codex做的源码。

我发现它把网站的字体，相关图片都爬下来了

擦除的背景图是这个。emmm，优雅，太优雅了。

然后我让Codex帮我把特效的核心代码加上注释，方便我理解。（AI时代，谁还看这么复杂的代码啊，不看不看...）

一点思路

这里只是给大家提供一个思路

比如看到好看的网站，或者看到一些比较炫酷的特效，怎么复刻它？

当然，这里能快速复刻，也是以为 MimoCode 的官网比较简单。

**比如我这里拿到了网站的字体，排版，网站的UI风格，怎么应用到我们自己的网站呢？**

可以让Codex帮你提取出一个DESIGN.md文件，后续把这个MD文件丢到你的网站目录下，让Codex基于这个文件做风格设计就行了。

提示词：

我觉得这个网站的UI风格很好看，帮我提取出这个网站的设计风格，生成一个 DESIGN.md 文件，方便后续我将这个网站的UI风格迁移到其他网站中，用于指导AI Agent更换风格。 DESIGN.md的文件规范参考 Google Labs 开源的 DESIGN.md 规范结构来写。

怎么把炫酷特效应用到自己网站？

让Codex提取出核心代码，生成一份“技术文档.md”，然后丢到你的网站，让Codex基于文档把特效加进去进行了。

完美~