小米MiMoCode与Codex官网颜值对比评测

小米MiMo Code悄然上线一款AI Coding Agent，支持百万级上下文且可免费试用，不少开发者已收到相关推送通知。出于好奇，我决定打开官网一探究竟。

官网的视觉设计令人眼前一亮，整体风格紧贴当下审美潮流。浏览时发现一个有趣的细节：鼠标在页面中移动会触发类似“擦除露背景图”的交互特效，体验感堪称惊艳。好奇心驱使下，我几乎滑遍了整个屏幕，只为看清背景图的完整面貌。

页面中还嵌入了一段字幕打字机效果，同样吸睛。

整个网站的排版、配色、文字样式都透出浓厚的艺术气息，颜值在线。

那么问题来了：如何把这个网站“搬”下来，为我所用？

常规做法可能是截图丢给Codex逐块复刻，但一张张截图效率低，字体等细节也难以复制。更直接的办法是——将网站链接直接丢给Codex，让它1：1还原。

实测下来，消耗约一半Plus额度，耗时十几分钟，成功复刻了首页。还原度相当高。

下面是完整的网站截图对比。

仅存在少数细微差异，整体样式、排版、字体风格基本实现了完美复刻。Codex的生成能力令人印象深刻。

具体怎么做到的？

操作方法很简单：直接将网站链接提供给Codex，要求它1：1复刻即可。

提示词也十分简洁：

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

为了确保Codex准确理解这个交互效果，我还附带了一张截图作为参考。

坦白说，我原先并不知道这个“移动鼠标可看到背景图”的特效叫什么名字，是Codex自己总结出了“鼠标擦除露图”这个说法，相当形象。

接下来看看Codex生成的源码。

可以看到，它已经自动抓取到了网站的字体、相关图片。那个擦除用的背景图，优雅得令人赞叹。

最后让Codex给特效核心代码加上注释，方便后续理解。当然，在AI时代，这些复杂代码不必硬啃，但保留一份注释文档，日后遇到类似需求即可快速复用。

一点思路

这里提供的是一个通用方法论：看到好看的网站或炫酷的特效，如何快速复刻？

当然，这次能快速复刻也得益于MimoCode官网本身结构相对简单。但思路可以延伸——比如拿到了网站的字体、排版、UI风格，如何应用到自己的项目中？

一个很实用的做法是：让Codex帮你提取出一份DESIGN.md文件。将此文件放入项目目录，后续让Codex基于该文件进行风格设计即可。

提示词：

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

而针对炫酷特效的复用，同样可以让Codex提取核心代码，生成一份“技术文档.md”，再将其加入项目中，让Codex基于文档把特效集成进去。完美收工。