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负责效率,人类负责温度。