小米MiMoCode官网颜值高?Codex:拿来吧,您嘞!1:1完美复刻~

大家好,我是卡卡罗特~

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

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

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

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

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

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

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

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

我截图看不出来,大家可以到MimiCode的官网看。

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

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

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

而且字体它比较难复制,那在怎么办呢?🤔

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


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

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

看,我这里的访问地址是:http://localhost:5173/ 没骗人🤔


我把网站全部截图如下。

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

我是怎么做的?

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

提示词很简单。

typescript 复制代码
帮我1:1 复刻这个网站:https://mimo.xiaomi.com/zh/mimocode

这个网站有个鼠标移动,展示背景图的效果,感觉挺有意思的,需要复刻。怎么做的?

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

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

然后我看下Codex做的源码。

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

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

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

一点思路

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

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

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

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

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

提示词:

typescript 复制代码
我觉得这个网站的UI风格很好看,帮我提取出这个网站的设计风格,生成一个 DESIGN.md 文件,方便后续我将这个网站的UI风格迁移到其他网站中,用于指导AI Agent更换风格。 

DESIGN.md的文件规范参考 Google Labs 开源的 DESIGN.md 规范结构来写。

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

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

完美~

相关推荐
一个有理想的摸鱼选手5 小时前
在三维地球上以另一种视角感受巴威台风
前端·gis·ai编程
谁来拯救笨小孩5 小时前
深入 Cursor 架构:一个 AI 编辑器是如何被「流式」重塑的
ai编程
JavaGuide5 小时前
再见 Superpowers!很多 Skill 真的可以扔掉了。
后端·ai编程
东小西5 小时前
第6篇:《智能调度中心:当我同时塞给AI查订单、查库存、查物流三个工具》
openai·ai编程
月白白6 小时前
AI时代下,历史项目如何共享上下文?
ai编程
武子康7 小时前
Token 单价更低,Agent 任务为什么反而更贵:4 层成本口径 + 最小事件账本 + 3 个决策问题
人工智能·agent·ai编程
大模型搬砖师7 小时前
金融、制造、互联网:三个行业的 AI 网关落地实录
aigc·ai编程·gpu算力
舒灿8 小时前
喵ing Tab 1.0.0 正式发布
前端·ai编程
小徐_23338 小时前
Open Wot 1.0.5 发布:让 AI 接入 wot-ui,只需要两条命令
前端·uni-app·ai编程
程序员老刘9 小时前
Flutter版本选择指南:3.44密集修BUG,9月大限将至 | 2026年7月
flutter·ai编程·客户端