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

完美~

相关推荐
桃西西呀16 小时前
Laya 源码级原理拆解之二:序列打包与决策头
人工智能·llm·ai编程
盟接之桥17 小时前
线束数字化--先进先出为什么总是停留在纸面上?
大数据·网络·数据库·人工智能·制造·ai编程
Yunovian17 小时前
AI时代,针对模型与应用,浅谈一下各编程语言
开发语言·c++·人工智能·python·ai·rust·ai编程
用户40158233246218 小时前
Git 合并冲突怎么解决?用 AI 处理冲突的流程、Prompt 和 4 个易错点
ai编程
小虎AI生活18 小时前
官媒集体下场做 GEO:AI 眼里的“你”,得自己管(附 10 分钟自检实操)
aigc·ai编程
桃西西呀19 小时前
Laya 源码级原理拆解之一:整体架构与运行入口
人工智能·llm·ai编程
吴佳浩19 小时前
Agent 安全红线:越狱防御、间接注入与数据防泄漏实战
人工智能·agent·ai编程
吴佳浩19 小时前
Claude Code 与 Hermes Agent 深度拆解:顶级 Coding Agent 为什么都放弃了纯 Chat 模式?
人工智能·agent·ai编程
乘风gg20 小时前
别跟风 AI 副业,工程师最该学的是 AI Coding
前端·ai编程·claude
小四的小六20 小时前
AI 代码需求实战:从“一句话需求“到“字段级 Spec“
aigc·openai·ai编程