Codex复刻小米MiMoCode官网：保姆级3步教程

此前使用 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 官网的 UI 设计十分出色。恰好手头的前端项目缺少首页，遂决定将其直接融入自己的项目。效果颇具原版风格。全局页面如下。

这是一个通过 Vibe Coding 方式开发的项目，目前主要用于辅助发布文章内容。项目包含两个子功能：通过 Markdown 格式生成图片，以及生成自媒体封面。全程由 Codex 配合 Vibe 方式完成，当前仅在本地运行，尚未部署至远程。后续计划通过 Cloudflare 进行部署，利用免费资源，并可由此撰写一篇新文章。待进一步完善后，将部署上线供大家使用。

我是怎么融入到项目里的？

回到正题，具体操作均在 Codex 中完成。最初使用的提示词为：随后生成的页面与原小米 MiMoCode 风格相似度仅约 40%，且缺少最吸引人的古风字体和背景擦除效果。于是改变策略：先完整搬移页面，再让 Codex 进行修改。使用以下提示词后效果显著不同：

这个提示词能够原封不动获取 MimoCode 内容，之前提到的背景擦除效果全部恢复。页面效果如下。

但随之出现代码拆分不合理的问题：所有代码耦合在一起，分包也不合理。于是继续让 Codex 进行改进，并融入项目，替换内容。至此基本复刻了小米 MiMoCode 的官网风格，后续仅需针对性逐步优化。

总结而言，核心流程为：先 1:1 复刻 → 合理分包、组件拆分 → 加入自己的内容。一句话概括：先原样搬移，再整理结构，最后替换内容。看到任何喜欢的网站风格，均可采用此流程融入自己的项目。欢迎尝试，如有问题可在评论区交流。