“别再让AI网站丑下去了!”涛哥用Claude code实战MinIO主题移植,效果炸裂!完全去掉AI味!

434 阅读5分钟

哈罗,大家好,我是涛哥,上市公司程序员裸辞,All in AI,探索AI编程更多可能,主要使用Claude Code等AI编程工具进行开发,打造一人公司,立志在AI时代做出世界级产品。

今天聊一个很多 AI 编程新手都会踩的坑“如何去掉程序中的AI味”。事情是这样的:

上周我花了一天时间用Claude code开发的nano banana提示词网站已经上线了,访问地址发到了几个AI群里,有群友反馈说这个用AI开发的网站的配色方案AI味道太重了,看多了觉得有点low。

网站地址: nano-banana.yueshu365.cn/

Image

首页

Image

提示词列表页

是的,目前这个网站的配色一看就知道是AI开发的,配色的确需要重新设计一下。

这里我先解释下AI编程里的AI味道来源:如果你在使用AI编程工具进行开发时,不给它明确说明使用的配色方案,AI模型大部分情况AI默认都会用蓝色、紫色作为主题颜色,这就导致AI开发的网站千篇一律,这就是AI味道的来源。

那么为什么AI会钟情于“蓝紫”呢?

之所以AI对蓝紫色会形成偏爱,主要是特定技术框架(如 Tailwind CSS)的早期默认设置,再加上这类颜色在训练数据中高频出现,两者共同作用下,就让AI形成了这一偏好。

既然知道了病灶,对症下药就两条路:

    1. 要么是你自己明确跟AI说要用哪几种颜色作为网站的主题色;
    1. 要么你就找一个目标网站,然后让Claude code按照目标网站的配色设计一个。

我用的是第二种方法,并且不需要你上传目标网站的截图就能帮你仿造出来。那么到底怎么做的呢,下面我会给出具体步骤。

先补充一个基础知识,我们知道,浏览器中展示出来的页面都是由3套代码来控制的:

  • • HTML是一个搭积木的包工头,它负责告诉浏览器 哪里得放块砖(标题),哪里得留个窗(图片),没有它,浏览器打开就一张白纸,连 hello world都写不出来。
  • • CSS相当于给房子装修的软装设计师,他可以“把按钮刷成骚粉色、字体加粗、再让它hover的时候蹦一下” 全由她说了算,没有css,网页就会到90年代,全是蓝链灰底,丑到亲妈都不认识。
  • • JavaScript是家里的智能家居+保姆,页面能动能交互全靠它。没有js,网页就是一张不会动的海报。

总结就是HTML是骨架,CSS是皮囊,Javascript是灵魂

换句话说,换肤不换骨,我们只需要吧CSS这层皮囊拔下来即可,HTML和JS完全不动。

很多人在让AI修改配色主题的这一步会把目标网站页面的所有代码搞过来,发送给claude code进行参考和仿照,这么做不光浪费token,也会让上下文很长,导致最终的效果还不好。还有人会把截图复制过让AI根据根据图片生成代码,但是图片会丢失一些类似hover的动态效果信息。

其实去AI味,只需要修改主题色,也就是css这个皮囊。我们只需要去目标网站上找到它的主题对应的css文件,把这个文件的内容复制过来就行了。

理论说完,我们直接上手,我选择的换肤目标站点就是 min.io ,一步步给你演示怎么把它的皮肤扒的干干净净。

第一步 打开控制台

打开 www.min.io/ 网站,按 F12 键,打开控制台,或者 通过鼠标在页面中右击,再选择检查

Image

打开控制台

第二步 找到css文件

点击控制台的左上角的检查 按钮(一个箭头的标志),然后点击页面的中的DOWNLOAD按钮

为什么点击按钮呢?这里解释一下,因为这个页面中DOWNLOAD按钮的色彩比较鲜明,这种大概率是网站的主题色,所以选择这个按钮的样式来找css文件

Image

点检查,找到css文件

第三步 复制css文件

查看控制台中的样式栏,右侧有一个对应的css文件,点击就能打开,打开后你就可以复制这个css文件定义的主题了

Image

查看并复制css代码内容

第四步 Claude Code参考设计

把复制的css代码发送到Claude Code中,并输入提示词 参考整个主题设计一个有质感有设计感的主题样式Image

将css代码和提示词一起发给claude code

第五步 在项目中实现

上一步设计完成后,再输入提示词 帮我将上面的设计实现到当前项目中

最后等待它完成,我们再打开页面就可以看到一个没有AI味,高级感上线的网站了。

Image

换肤后的首页

Image

换肤后的提示列表页

好了,本期内容就结束了,我会持续分享AI编程相关的技巧和工具,如果对你有用,欢迎一键三连+关注。

提示词网站地址: nano-banana.yueshu365.cn/

如果你想要本期文章中完整的minio的css文件和提示词,请在公众号后台 【涛哥AI编程】 发送【主题样式】关键词,即可获取下载地址。

 

Claude Code优质内容

70%成本降幅!不装软件混搭Claude Code,我的年省2500元秘籍
【保姆级】零基础小白的AI编程环境搭建:Claude Code × Kimi K2 完全步骤-windows
claude code开发案例,提示词+效果图
claude code开发案例1:提示词+网站截图

 

粉丝福利

在 公众号后台 【涛哥AI编程】 发送 【 报告 】获取2025年最新AI行业报告:

Image