大家好，我是卡卡罗特。
上一篇文章我不是用Codex把小米MiMoCode的官网复刻了一遍嘛，文章发出去之后，后台收到不少私信。
说那个源码能不能开源出来？那肯定是能的。
最开始Codex是直接把HTML、CSS然后一些样式组装起来，代码整体看起来比较乱。
整体的代码风格，大概是图片这样。
整个项目就是Codex一把梭生成出来的，一个超大html文件，CSS、JS、HTML全揉在一起。
如果你想让AI参考这个代码去完善你自己的网站，这个是最合适的。（是不是有点不可思议🤔）
因为你只用给他一个文件，他就知道这个网站有哪些内容，有哪些CSS，有哪些JS特效。AI很容易理解。
PS：如果你需要用Claude Code使用里面的内容的话，代码回退到这个提交节点就行了。
但是如果你想基于这个网站去进行二开的话，那就比较麻烦了。
然后我用Codex帮我改造成了现代化的前端技术栈。
用React + Vite + TailwindCSS重写，组件化拆分。
原来的鼠标擦除特效、字幕打字机效果，全部封装成了独立组件，拿来就能用。
这次我用的是Codex GPT 5.5，说实话，基本都是言出法随，指哪打哪。
现在项目已经在GitHub开源了。
✅仓库地址是：https://github.com/kklt1024me/MiMoCodeWeb
融入到项目
很多人跟我一样，都小米MiMoCode的官网UI挺好看的。
刚好我有个前端项目缺少一个首页，我打算把它拿过来，放到我的首页。🤔
看起来有那味了吧🤔
全局页面如下。
这是我自己Vibe Coding出来的一个项目，目前是辅助我发布文章内容用。
里面主要有两个子功能，一个是通过Markdown格式生成图片：
一个是生成自媒体封面：
全程都是通过Codex Vibe出来的****😂
目前只是本地，还没部署到远程。到时候可以通过Cloudflare部署一下，可以白嫖机器，刚好又可以写水一篇文章了😂等我再完善完善，然后部署出来给大家用。
如果大家有需要的话可以开源，感兴趣可以关注一下🤔
我是怎么融入到项目的呢？
回到正题，我是怎么把小米MiMoCode的UI风格融入到我自己项目中的呢？
下面我全程都是在Codex里面操作的。
最开始我是这样的提示词：
然后出来的页面是这样。
emmmm，这跟小米MiMoCode 的风格，不能说不像吧，只能说只有40%😁
我最看得上他的古风字体风格，背景擦除效果都没有……
然后我又思考了下，干脆直接把页面搬过来，然后再让他改。
✅这个提示词好啊，赶紧收藏🤣
1:1复刻这个网站：https://mimo.xiaomi.com/zh/mimocode
这里面的特效、字体、UI风格，图片、icon要复刻。
让这个页面作为我当前项目的主页。
这个提示词可以把MimoCode的内容1:1弄下来，之前说的背景擦除效果都有。
页面就长这样：
**那问题有哪些呢？**🤔
代码拆分不合理：代码都耦合在一起，分包也不合理。
那就让Codex继续改。
然后再让Codex帮我融入到项目中，改下内容。
改到这里基本就复刻了小米MiMoCode的官网风格了。后面都是我让它针对性的一点一点的优化了。
✅总结就是：先1:1复刻 --> 合理分包、组件拆分 --> 加入自己内容
核心就一句话：先原样搬，再整理结构，最后换内容。 看到任何喜欢的网站风格，都可以用这个流程融到自己的项目里🤔
我是卡卡罗特，每天持续分享对你有用的AI知识～ 你的鼓励是我更新的动力，加个关注再走呗🫣～
大家可以去试试，有问题评论区聊聊🤔
100
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
