从视觉、文案到交互：三步彻底去除产品AI味

AI负责效率，人类负责温度

一、简介

现在个人开发产品，AI的使用率越来越高，虽然效率提上去了，但是摆脱不了输出的产品有一股AI味。你很容易跟别人开发的产品“撞衫”。

先思考一个问题：为什么会有AI味？

归根结底的原因是各个大模型底层的训练数据来源重叠性高。它们的训练数据往往来自相同的开源代码库，比如：

GitHub上的开源项目
WebSight、C4等网页截图、代码对数据集
Tailwind、Bootstrap等流行框架的示例代码

这些数据本身就偏向模板化、组件化，导致大模型通过训练得到的成果也是这些“常见的布局、通用的样式”。

虽然，AI编程的优势显而易见：高效、快速、低成本，能快速产出一个完整的可用版本。但是，初始化的版本除了上述说的一些「AI味」外，常常还显得机械、缺乏「人味」。

要想真正开发出一个产品，还需要在AI的基础上进行人为优化。

懂技术开发的同学可以自己接手细化，不懂技术的同学可以继续给AI IDE喂提示词，直到把细节打磨到自己想要的效果。

这里不得不提一嘴：首先自己得有0-1的能力，其次AI才能在你手里实现1-N。

下面将从视觉、文案、交互，三个角度出发，介绍如何让AI生成的产品（以网站为例）去掉「AI味」。

二、AI味体现

1、视觉层面

布局千篇一律，像“万能模板”。细节不足，比如按钮、阴影、间距都显得生硬；

举几个常见的AI味较浓的效果：

网站大面积使用蓝色、紫色、渐变等等背景和配色效果
页面的各种小图标，使用emoji代替
鼠标悬停按钮会有上浮动画和阴影效果
柔和的光晕效果，经常用在按钮、图标或重要文本周围

2、文案层面

个人文案不专业，但是对于AI写文案，还是要吐槽几点；

网页上的文案，出现“智能化、“赋能”、“效率提升”等等字样，那十有八九是AI初始化阶段遗留的产物。
有些描述文案乍一看输出很多，但是仔细一琢磨，说了等于没说，也是AI写的。
话术过于专业，没有一点「人味」，比较机械化的语言，我相信个人输出不了过于专业的话术。

不过，文案这块要看网站的类型，专业性非常强的网站，可以用AI的话术；其他类型的网站，还是在AI基础上做文案的“二创”会比较好，可以多带点语言的温度。

3、交互层面

AI初始化后的网页，很多交互往往是不齐全的；

没有细腻的动效和反馈，这点对于好用的AI IDE已经解决。
整体操作下来感觉很生硬。
功能堆叠，逻辑缺乏连贯性，达不到自己想要的逻辑闭环。
没有做到完全的响应式，比如：在移动端，有些布局错乱，有些图标会乱飞。不过初始化提示文案到位的话，优秀的AI IDE能做到适配。

三、移除AI味

这一步是讲怎么将自己的产品（网站）移除模板化、组件的感觉，也就是“AI味”。

这是一个需要很多耐心的过程，需要自身参与进来，以“人”为主导去做产品的二次调整。

会开发的同学可以自己直接改代码做产品去AI味，因为有些细节方面，喂提示词还不如直接直接上手改的快。

不会开发也没事，找一个好用的AI IDE（如Claude Code），提示词写的细节或明确一些，AI也会安排的明明白白。

如果摸不准从哪些角度入手去调整，可以参考我介绍的三个角度：视觉、文案、交互。

1、视觉角度移除

这个环节很要求审美，如果不是设计出身，真的很难去把控，甚至不如直接用AI味视觉效果；

色调优化：整体色调的调整。如果觉得自己审美这块欠缺，可以考虑借鉴优秀的网站的色调搭配。我开发楼里网站，就参考了GitHub的色调。
排版调整：字体、字体大小、留白、布局、层级感等等。
图案素材：替换默认图标，一般AI模板输出的会用emoji表情代替图标，使用自己定制化图标/图片。可以去找开源可商用的图标网站，会设计的同学可以自己设计。
细节优化：按钮可用/不可用状态、各类元素的阴影、间距统一、背景色、鼠标的悬停效果、提示框统一。

从视觉上，肯定还有很多值得调整的地方，上面举例的只是几个比较典型的方向，好看的产品设计，需要人为参与，好好打磨的。

我以自己的网站「楼里」为参考，可以让AI IDE初始化网站的时候，直接将以下几个地方抽离成基础的、可公用的样式，定义一个global.css放置公用的目录下，后期直接用这个文件中的变量，这样可以做到统一的管理，网站每个页面也会更加的整体和统一。以下是详细的参考方向：

颜色系统（主色调）、背景色、文字颜色、边框颜色、阴影、圆角、间距、字体样式、字体大小、字重、行高、断点、标题样式、段落样式、链接样式、按钮基础样式、卡片样式、容器样式、文本样式、标签样式、响应式样式。

2、文案角度移除

这块个人并不专业，不过可以从几个角度去考虑：1、具体化；2、人性化；3、差异化；

具体化：多用动作词、场景化描述
人性化：带入情绪、拟人化表达
差异化：结合用户日常用语/行业特色

具体修改可以再次交给AI，让它去润色，使得文案看起来多点人味。还是那句话，需要多点耐心。

3、交互角度移除

交互其实很多AI IDE已经做的很好了，但是重要的一点，需要人为的参与后，才能输出最终满意的效果：网站整体的逻辑闭环。

逻辑闭环包括但不限于：页面上的交互、路由的跳转、悬停提示、加载动效、反馈文案、触控体验等等。

如果需要数据存储的话，当然还有关键的一点，前后端的接口交互。不管通过什么方式去实现这块逻辑，都需要自己深度参与进去。「楼里」网站是自身为主，AI为辅的思路去实现这个流程的。如果不懂开发的同学也没事，让后端的AI整理好接口文档，丢给前端的AI去对接就行了。不过需要自己去体验下有没有明显的bug。

四、「楼里」实践操作

下面放一张我在首页改造的实践操作；

导航栏：产品名和logo图不是自己的，调整了自己的。导航栏整体改成向左排列，选中状态太AI模板话，去掉了背景。右侧加入登录和登录后的头像。

内容部分：大标题文案调整为楼里网站的文案，按钮样式没做调整，但是按钮文案改成楼里网站的文案。右侧图标典型的AI味，emoji表情居多。给AI喂具象化的提示词，重新输出了一张符合网站整体的图片，替换了右侧部分。

调整肯定是很多的，上面只是举了其中一个例子。当然也可以不在意这种细节，直奔主题，输出最核心的功能，这种思路也没毛病。

五、结语

AI让网站开发高效，但不能代替人类的审美与情感表达，“去AI味”不是完全否定AI，而是让AI生成结果更贴近真实需求。

未来趋势：AI负责效率，人类负责温度。