小米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基于文档把特效加进去进行了。

完美~

相关推荐
Flynt1 小时前
我的Claude Code今天又抽风了,但Safe Mode救了我
ai编程·claude
guyoung1 小时前
BoxAgnts 工具系统(5)——WASM 工具开发:从 Hello World 到生产部署
rust·agent·ai编程
leeyi2 小时前
流式管道:Pipe、StreamReader、背压控制
agent·ai编程·领域驱动设计
佛系豪豪吖2 小时前
AtomCode 部署流程与使用经验
笔记·chatgpt·github·ai编程·gitcode
an317422 小时前
使用 LangGraph + DeepSeek 构建 AI 面试官:状态图设计与实践
前端·ai编程
夜尽天明_2 小时前
告别 AI 乱写代码!一键生成项目“AI 说明书”,让 Cursor 和 Claude 乖乖守规矩
ai编程
win4r2 小时前
Claude Fable 5 来了:这不是 Opus 的小升级,而是 Anthropic 给 Agent 时代递出的新牌
ai编程·claude·vibecoding
小明的IT世界2 小时前
编程智能体的上下文工程
人工智能·ai编程
yaoxiaoganggang3 小时前
强行开启 Flash Attention 2,但没有正确设置最大序列长度
人工智能·经验分享·ai编程