Codex复刻小米MiMoCode官网 3步丝滑融入保姆级教程

上次借助Codex将小米MiMoCode官网完整复刻了一遍。文章发布后，后台私信几乎被挤爆——清一色都在问源码能否开源。答案是：当然可以。

实际上，Codex最初生成的代码是将HTML、CSS以及各类样式直接拼装在一起，整体观感……怎么说呢，比较“粗放”。整个项目完全是Codex一把梭出来的——一个超大的HTML文件，CSS、JS、HTML全混在一起。

优势在于：如果你希望AI参照这段代码来完善你的站点，这种格式反而最理想——只需丢给它一个文件，它就能清楚掌握网站内容、所用CSS以及JavaScript特效。AI理解起来几乎没有学习成本。

但反过来，如果你想基于这个项目做二次开发，就相当棘手了。因此我后续让Codex把整个项目迁移至现代前端技术栈：用React + Vite + TailwindCSS重写，并做组件化拆分。原来的鼠标擦除特效、字幕打字机效果，全部封装成独立组件，拿来即用。这次用的是Codex GPT 5.5，坦白讲，基本就是“言出法随”，指哪打哪。

目前项目已在GitHub开源。

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

融入项目

说实话，很多人和我感受一样：小米MiMoCode官网的UI确实惊艳。恰好手头有个前端项目缺首页，就打算直接拿过来，嵌入自己的项目里。

效果看起来还挺有那个味道的吧？全局页面如下。

这是我用Vibe Coding搞出来的一个项目，当前主要用来辅助发布文章内容。里面包含两个子功能：一个是通过Markdown格式生成图片；

另一个是生成自媒体封面。

全程由Codex Vibe完成——目前仅在本地运行，尚未部署到远程。后续计划用Cloudflare部署，白嫖服务器资源，顺便又能水一篇文章。等再打磨打磨，部署出来让大家直接用。

我是如何融入项目的？

回到正题。具体操作全部在Codex里完成。最初使用的提示词是：

出来的页面呢……emmm，跟小米MiMoCode的风格，不能说完全不像，只能说大概有40%的相似度。最吸引我的古风字体风格、背景擦除效果，全都没有。

想了想，干脆换个思路：先把页面完整搬过来，再让Codex改。用了一个提示词，效果立刻不同：

这个提示词能把MimoCode的内容原封不动搬下来，之前缺失的背景擦除效果全都回来了。

页面长这样：

那问题有哪些呢？代码拆分不合理：所有代码都耦合在一起，分包也不够清晰。那就让Codex继续调整。

接着让Codex帮我融入项目，替换内容。

改到这个阶段，基本就复刻了小米MiMoCode的官网风格。后续就是针对性地逐步优化。

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

大家不妨去试试，有问题评论区聊聊。