三步复刻小米MiMoCode官网：Codex项目集成保姆级教程

上次使用Codex将小米MiMoCode的官网完整复刻了一遍。文章发布后，后台收到了大量私信，都在询问源码是否可以开源。答案当然是：可以开源。

说实话，最开始Codex生成的代码，只是将HTML、CSS和一些样式直接拼凑在一起，整体风格比较粗放。整个项目由Codex一次性生成，所有代码都集中在一个超大HTML文件中，CSS、JS、HTML混杂在一起。

不过，这样的格式也有好处：如果你希望AI参考这些代码来完善你自己的网站，这种单文件格式反而最为合适——只需提供一个文件，AI就能全面了解网站的内容、所用CSS以及JS特效，几乎没有理解门槛。

但是，如果你想基于这个网站进行二次开发，就会遇到不少麻烦。因此，后来我让Codex将整个项目重构为现代化的前端技术栈：使用React + Vite + TailwindCSS重新编写，并进行组件化拆分。原本的鼠标擦除特效、字幕打字机效果等，全部封装成了独立组件，可直接复用。这次使用的是Codex GPT 5.5，体验可以说是"言出法随"，指哪打哪，非常精准。

目前该项目已在GitHub上开源。

仓库地址是：github.com/kklt1024me/…

将小米MiMoCode风格融入项目

说实话，很多开发者和我一样，都认为小米MiMoCode的官网UI设计非常出色。正好我手头有一个前端项目缺少首页，于是打算将这套风格直接移植过来，应用到自己的项目中。

从最终效果来看，确实颇有原版的味道。以下是全局页面展示：

这是我使用Vibe Coding搭建的一个项目，目前主要用于辅助发布文章内容。项目中包含两个子功能：一是通过Markdown格式生成图片；

二是生成自媒体封面。

整个项目全程由Codex通过Vibe Coding完成，目前仅在本地运行，尚未部署到远程服务器。后续计划通过Cloudflare进行部署，利用免费服务器资源，顺便再写一篇文章分享经验。等到进一步完善后，我会部署上线供大家使用。

具体如何融入项目？

回到正题。整个操作过程都在Codex中完成。最开始我使用的提示词是：

但生成的页面……与小米MiMoCode的风格，不能说完全不像，只能说大概只有40%的相似度。最吸引我的古风字体风格和背景擦除效果，全都没有出现。

思考后，我决定换一个思路：先将页面完整复制过来，再让Codex进行修改。使用新的提示词后，效果立刻不同了：

这个提示词能够将MiMoCode的内容原封不动地复制下来，之前提到的背景擦除效果也全都恢复了。

页面长这样：

那么还有哪些问题呢？代码拆分不合理：所有代码都耦合在一起，分包也不合理。于是继续让Codex进行优化。

接着，让Codex帮助我将代码融入项目，并替换内容。

经过以上修改，基本上完整复刻了小米MiMoCode的官网风格。后续就是针对细节进行逐步优化。

总结下来，核心流程就是：先1:1复刻 → 合理分包、组件拆分 → 添加自己的内容。一句话概括：先原样移植，再整理架构，最后替换内容。看到任何喜欢的网站风格，都可以用这个流程融入自己的项目中。

大家可以去尝试一下，如果遇到问题，欢迎在评论区交流讨论。