从视觉、文案到交互：三步彻底去除产品AI味
<blockquote><p>AI负责效率，人类负责温度</p>
</blockquote>
<h2 id="一简介">一、简介</h2>
<p>现在个人开发产品，AI的使用率越来越高，虽然效率提上去了，但是摆脱不了输出的产品有一股AI味。你很容易跟别人开发的产品“撞衫”。</p>
<p><strong>先思考一个问题：为什么会有AI味？</strong></p>
<p>归根结底的原因是各个大模型底层的训练数据来源重叠性高。它们的训练数据往往来自相同的开源代码库，比如：</p>
<ul>
<li>GitHub上的开源项目</li>
<li>WebSight、C4等网页截图、代码对数据集</li>
<li>Tailwind、Bootstrap等流行框架的示例代码</li>
</ul>
<p>这些数据本身就偏向模板化、组件化，导致大模型通过训练得到的成果也是这些“常见的布局、通用的样式”。</p>
<p>虽然，AI编程的优势显而易见：<strong>高效、快速、低成本</strong>，能快速产出一个完整的可用版本。但是，初始化的版本除了上述说的一些「AI味」外，常常还显得机械、缺乏「人味」。</p>
<p>要想真正开发出一个产品，还需要在AI的基础上进行<strong>人为优化</strong>。</p>
<p>懂技术开发的同学可以自己接手细化，不懂技术的同学可以继续给AI IDE喂提示词，直到把细节打磨到自己想要的效果。</p>
<p><img alt="img1" loading="lazy" src="https://img2024.cnblogs.com/blog/1691717/202509/1691717-20250923085745648-318986192.png" class="lazyload"></p>
<p>这里不得不提一嘴：<strong>首先自己得有0-1的能力，其次AI才能在你手里实现1-N。</strong></p>
<p>下面将从<strong>视觉、文案、交互</strong>，三个角度出发，介绍如何让AI生成的产品（以网站为例）去掉「AI味」。</p>
<h2 id="二ai味体现">二、AI味体现</h2>
<h3 id="1视觉层面">1、视觉层面</h3>
<p>布局千篇一律，像“万能模板”。细节不足，比如按钮、阴影、间距都显得生硬；</p>
<p>举几个常见的AI味较浓的效果：</p>
<ul>
<li>网站大面积使用蓝色、紫色、渐变等等背景和配色效果</li>
<li>页面的各种小图标，使用emoji代替</li>
<li>鼠标悬停按钮会有上浮动画和阴影效果</li>
<li>柔和的光晕效果，经常用在按钮、图标或重要文本周围</li>
</ul>
<h3 id="2文案层面">2、文案层面</h3>
<p>个人文案不专业，但是对于AI写文案，还是要吐槽几点；</p>
<ul>
<li>网页上的文案，出现“智能化、“赋能”、“效率提升”等等字样，那十有八九是AI初始化阶段遗留的产物。</li>
<li>有些描述文案乍一看输出很多，但是仔细一琢磨，说了等于没说，也是AI写的。</li>
<li>话术过于专业，没有一点「人味」，比较机械化的语言，我相信个人输出不了过于专业的话术。</li>
</ul>
<p>不过，文案这块要看网站的类型，专业性非常强的网站，可以用AI的话术；其他类型的网站，还是在AI基础上做文案的“二创”会比较好，可以多带点语言的温度。</p>
<h3 id="3交互层面">3、交互层面</h3>
<p>AI初始化后的网页，很多交互往往是不齐全的；</p>
<ul>
<li>没有细腻的动效和反馈，这点对于好用的AI IDE已经解决。</li>
<li>整体操作下来感觉很生硬。</li>
<li>功能堆叠，逻辑缺乏连贯性，达不到自己想要的逻辑闭环。</li>
<li>没有做到完全的响应式，比如：在移动端，有些布局错乱，有些图标会乱飞。不过初始化提示文案到位的话，优秀的AI IDE能做到适配。</li>
</ul>
<h2 id="三移除ai味">三、移除AI味</h2>
<p>这一步是讲怎么将自己的产品（网站）移除模板化、组件的感觉，也就是“AI味”。</p>
<p>这是一个需要很多耐心的过程，需要自身参与进来，以“人”为主导去做产品的二次调整。</p>
<p>会开发的同学可以自己直接改代码做产品去AI味，因为有些细节方面，喂提示词还不如直接直接上手改的快。</p>
<p>不会开发也没事，找一个好用的AI IDE（如Claude Code），提示词写的细节或明确一些，AI也会安排的明明白白。</p>
<p>如果摸不准从哪些角度入手去调整，可以参考我介绍的三个角度：视觉、文案、交互。</p>
<h3 id="1视觉角度移除">1、视觉角度移除</h3>
<p>这个环节很要求审美，如果不是设计出身，真的很难去把控，甚至不如直接用AI味视觉效果；</p>
<ul>
<li>色调优化：整体色调的调整。如果觉得自己审美这块欠缺，可以考虑借鉴优秀的网站的色调搭配。我开发楼里网站，就参考了GitHub的色调。</li>
<li>排版调整：字体、字体大小、留白、布局、层级感等等。</li>
<li>图案素材：替换默认图标，一般AI模板输出的会用emoji表情代替图标，使用自己定制化图标/图片。可以去找开源可商用的图标网站，会设计的同学可以自己设计。</li>
<li>细节优化：按钮可用/不可用状态、各类元素的阴影、间距统一、背景色、鼠标的悬停效果、提示框统一。</li>
</ul>
<p>从视觉上，肯定还有很多值得调整的地方，上面举例的只是几个比较典型的方向，好看的产品设计，需要人为参与，好好打磨的。</p>
<p>我以自己的网站「楼里」为参考，可以让AI IDE初始化网站的时候，直接将以下几个地方抽离成基础的、可公用的样式，定义一个global.css放置公用的目录下，后期直接用这个文件中的变量，这样可以做到统一的管理，网站每个页面也会更加的整体和统一。以下是详细的参考方向：</p>
<p>颜色系统（主色调）、背景色、文字颜色、边框颜色、阴影、圆角、间距、字体样式、字体大小、字重、行高、断点、标题样式、段落样式、链接样式、按钮基础样式、卡片样式、容器样式、文本样式、标签样式、响应式样式。</p>
<h3 id="2文案角度移除">2、文案角度移除</h3>
<p>这块个人并不专业，不过可以从几个角度去考虑：1、具体化；2、人性化；3、差异化；</p>
<ul>
<li>具体化：多用动作词、场景化描述</li>
<li>人性化：带入情绪、拟人化表达</li>
<li>差异化：结合用户日常用语/行业特色</li>
</ul>
<p>具体修改可以再次交给AI，让它去润色，使得文案看起来多点人味。还是那句话，需要多点耐心。</p>
<h3 id="3交互角度移除">3、交互角度移除</h3>
<p>交互其实很多AI IDE已经做的很好了，但是重要的一点，需要人为的参与后，才能输出最终满意的效果：网站整体的逻辑闭环。</p>
<p>逻辑闭环包括但不限于：页面上的交互、路由的跳转、悬停提示、加载动效、反馈文案、触控体验等等。</p>
<p>如果需要数据存储的话，当然还有关键的一点，前后端的接口交互。不管通过什么方式去实现这块逻辑，都需要自己深度参与进去。「楼里」网站是自身为主，AI为辅的思路去实现这个流程的。如果不懂开发的同学也没事，让后端的AI整理好接口文档，丢给前端的AI去对接就行了。不过需要自己去体验下有没有明显的bug。</p>
<h2 id="四楼里实践操作">四、「楼里」实践操作</h2>
<p>下面放一张我在首页改造的实践操作；</p>
<p><img alt="img2" loading="lazy" src="https://img2024.cnblogs.com/blog/1691717/202509/1691717-20250923085750493-1748415475.png" class="lazyload"></p>
<p><strong>导航栏</strong>：产品名和logo图不是自己的，调整了自己的。导航栏整体改成向左排列，选中状态太AI模板话，去掉了背景。右侧加入登录和登录后的头像。</p>
<p><strong>内容部分</strong>：大标题文案调整为楼里网站的文案，按钮样式没做调整，但是按钮文案改成楼里网站的文案。右侧图标典型的AI味，emoji表情居多。给AI喂具象化的提示词，重新输出了一张符合网站整体的图片，替换了右侧部分。</p>
<p>调整肯定是很多的，上面只是举了其中一个例子。当然也可以不在意这种细节，直奔主题，输出最核心的功能，这种思路也没毛病。</p>
<h2 id="五结语">五、结语</h2>
<p>AI让网站开发高效，但不能代替人类的审美与情感表达，“去AI味”不是完全否定AI，而是让AI生成结果更贴近真实需求。</p>
<p><strong>未来趋势：AI负责效率，人类负责温度。</strong></p>
</div>
<div id="MySignature" role="contentinfo">
互联网十年民工，现在转身独立开发者。<b> | </b> 公众号-主页<b> | </b>小红书-主页<b> | </b>抖音-主页<b> | </b> Git仓库-主页 <b> | </b><br><br>
来源：https://www.cnblogs.com/cicada-smile/p/19106549
頁:
[1]