去AI味网页设计

打开一个网页，三秒内能判断"这是 AI 做的"——但说不出具体哪里不对。可功能、排版、响应式样样齐全。

为什么 AI 生成的网页，一眼就能认出来？ 因为 AI 不做设计判断，只拼它见过最多次的套路。这份指南用大白话告诉你：AI 味长什么样、怎么去掉。

这是什么？

网页 AI 味 = AI 做网页的时候，不是在做"设计判断"，而是在拼凑它见过最多次的视觉套路。紫色渐变？因为教程里最多。Inter 字体？因为没人告诉它还有别的选择。三列卡片？因为这是它被喂过最多的布局。

问题不在于这些套路丑——它们很多来自优秀的网站。问题在于：每一处选择都没有你自己的理由。

打个比方：一个人穿衣服，全身都是优衣库基础款——不丑，但你看不出这个人的个性。AI 做的网页就是这样。品牌依据就是你这个人的穿衣风格——为什么戴这条围巾？因为跟你的外套颜色呼应。为什么用这个字体？因为你的品牌偏文化感，不是科技感。

多个 anti-slop 项目（open-design / SimHacker / febbhav）不约而同列出：AI 擅长选"最安全"的选项，不擅长选"最对"的选项。结果 = 平均、安全、记不住。

AI 网页长什么样

以下任何一条单独出现都不是问题。同时中了好几条、而且每条都说不清"为什么这样选"→ 这是 AI 网页。

同一个虚构产品，两版对照：左边是 AI 默认产物，右边按本文规则重做。下面的每一条特征，你都能在左图里找到。

AI 味版：渐变大字、靛蓝按钮、光球、三列卡片、emoji 图标、编造数据

去味版：品牌绿、左对齐、字重拉开、真实截图占位、具体数据

配色

• 紫→蓝渐变、青→红渐变铺满首屏 — 因为 AI 被喂了太多"用这个表达科技感"的例子
• 靛蓝色（就是那种偏紫的蓝，#6366f1）做按钮和强调色 — 这不是谁的设计选择，是 AI 训练框架 Tailwind 出厂自带的颜色，多个 anti-slop 目录（open-design / febbhav）不约而同列为"AI 味第一信号"
• 深色背景 + 发光的霓虹描边 — 暗色程序员审美当成万用方案
• 那种漂浮在背景里的彩色光球 — AI 表达"智能/魔法"最泛滥的手法
• 翠绿色配奶油色 — 第二波被用烂的组合
• 好几种浅色平均铺开，没有哪一个更突出 — 说明没做取舍

字体

• Inter、Roboto、Arial、Geist、Space Grotesk、Poppins — 不是这些字体丑，是 AI 把它们当"没想法时的安全牌"反复打
• 标题文字做成渐变色 — AI 让标题"花哨一点"的默认操作
• 字体粗细永远在"正常"到"稍粗"之间晃，标题比正文只大一点点 — 不敢拉开差距

页面结构

• 一样大的卡片排成整齐的网格，圆角一样、阴影一样 — 这不是排版，是填空
• 首屏大标题 → 合作方 Logo 墙 → 三列功能介绍 → 用户好评 → 数据展示 → 价格表 → 常见问题 → 底部注册入口 — 软件官网的标准流水线，换个产品只换字
• 首屏居中一个小标签 + 居中大标题 + 两个按钮（一个实心彩色、一个空心）+ 背景飘彩色光球 — 这是 AI 首屏的完整公式
• 卡片左边一条彩色竖线 — "全世界被 AI 生成最多的后台卡片样式"
• 所有位置间距一样、所有内容居中对齐 — 没有节奏

内容

• 编造的数据（"快 10 倍""99.9% 稳定"）— 每个 AI 生成的软件页都在用同一套数字
• 用代码画的假产品图 — 产品长什么样没人知道
• unsplash 之类的公共图库占位图 — 一看就知道是 demo，不是真实产品
• 套话连篇 — "赋能""释放""全方位""一站式"，语法全对但没有一句是人话

动效

• 滚动时所有元素统一从下往上浮出来 + 弹跳效果
• 按钮周围一圈发光的动画阴影 — 用户只注意到光在闪，没注意到按钮是干什么的

图标

• emoji 表情当功能图标（✨🚀🎯⚡🔥💡）
• 不同产品的页面出现同一套图标（闪光=AI、闪电=快、盾牌=安全）

灵魂

• 换了 Logo 和文案，这个网页可以原封不动当成另一个公司的 — 没有任何只属于你的东西

怎么修？

一句话：每个选择都要有自己的理由。 80% 用经过验证的成熟做法，20% 做只属于你的选择。去 AI 味的本质不是背禁用清单，是找回每一个视觉决策的"为什么"。

先定字体

字体是观众第一眼感知的东西，也是脱 AI 味最快的地方。

• 挑一款有辨识度的字体做标题，配一套稳的做正文。全站用两到三套，别多
• 拉开差距：标题比正文大好几倍，粗细也要极端——要么很细要么很粗，别用中间档
• 搭配逻辑：衬线体（笔画带小尾巴的，有文化感）+ 无衬线体（笔画干净的，现代感）= 编辑气质。两种都是无衬线体但气质不同 = 科技气质。等宽字体（每个字一样宽的，代码风格）+ 无衬线体 = 技术气质

被反复验证过的组合：

• 科技产品：IBM Plex 系列 / Source Sans 3 + JetBrains Mono
• 内容/文化产品：Playfair Display + Crimson Pro
• 现代品牌：Cabinet Grotesk / Satoshi / Plus Jakarta Sans
• 中文页面：Noto Sans SC 做正文 + 思源宋体或 Smiley Sans 做标题

颜色从品牌里取

• 从你自己的品牌色里找背景色和强调色，不要用 AI 出厂自带的靛蓝
• 全站统一管理颜色代码，强调色每屏最多出现两处——多了就不叫强调了
• 主色占六成、辅色占三成、强调色占一成
• 黑白灰里调一点品牌色方向的温度——偏冷像蓝灰，偏暖像米白

打破平均感

• 一个页面最多两种卡片尺寸。留一块区域完全不用卡片——让别人注意到你不是在填模板
• 圆角分着用：大卡片圆角大一点、按钮圆角小一点、小标签接近直角——每个地方有自己的处理
• 间距有松有紧——密集的信息区和舒展的展示区节奏不同
• 你产品的核心信息流保留，但叙事顺序换一换——不是每个页面都需要价格表和常见问题

用真人真数

• 每个数字能说出出处。产品图用真实截图——哪怕不够精致也比假图强十倍
• 占位图不用公共图库——用纯色方块或灰色骨架占位，至少不假
• 文案只有你自己能写——用具体的有名有姓的结果（"帮某个 D2C 品牌的广告成本降了 34%"），不用通用套话
• 按钮上的字、报错的提示、鼠标悬停的解释——写成跟朋友说话的语气

动效做减法

• 每个动效只问一个问题：它帮用户理解发生了什么，还是帮页面"显得高级"？前者留，后者删
• 鼠标放上去 = 微微放大 + 变亮，够了。不为炫而炫
• 动效有先后顺序——不是所有东西一起浮上来

图标统一

• 一套线条风格统一的图标用到底。不混 emoji、不混多种风格
• 图标只在非用不可的时候出现——文字排版本身已经建立了层次，不需要图标来撑场面

怎么判断？

一个网页是 AI 味的，如果：

• 换了 Logo 和文案，可以原封不动当成另一个公司的网站
• 装饰大于信息——看完只记得"挺好看的"，说不出产品到底做什么
• 每一个"为什么选这个颜色/字体/间距"都答不上来

记两件事

第一件：底层站不住，特效救不了。 更多人选择加渐变、加发光、加毛玻璃、加数据数字、加看起来很炫的装置——用特效密度掩盖设计上没有想法。正确的方向相反：把特效全删了，问自己——排版层次清楚吗？空间留白有节奏吗？字体选对了吗？信息先说什么后说什么？这些都站住了，再加回你真正需要的那一个特效。

第二件：改完还要再看。 AI 味不是背一遍规则就能根治的。做 → 看 → 挑毛病 → 改 → 再看 → 直到每个选择都能说清为什么。AI 网页之所以千篇一律，是因为"一次生成就接受"——反复审视本身就是反 AI 味。

延伸阅读

• 网页视觉品质原则
• 网页交付标准指南 — 交付前的完整检查单
• Open Design anti-ai-slop linter
• Frontend Design Anti-Slop Catalog
• Signs of AI Design — design-rules.md
• AI Design Slop: Why AI-Generated UI Looks Generic
• 10 Ways to Build Radical Trust in the Age of AI Junk
• Why Most AI-Generated Designs Look the Same
• 网页 AI 味信号与去味方法调研 — 原文存档

---

Agent 执行门禁

以下规则供 AI 生成网页时逐条校验。人读层在上一节，这里只放可机械检查的约束。

NEVER — 禁止出现的颜色

• #6366f1, #4f46e5, #4338ca, #8b5cf6, #7c3aed, #a855f7 — Tailwind 靛蓝/紫罗兰范围，AI 味最可靠信号
• #0D1117 + 青紫霓虹 glow 组合（box-shadow 含 #7c3aed 或 #8b5cf6 且背景 #0D1117）
• linear-gradient 方向为紫→蓝、青→品红、靛蓝→粉红 — 除非 :root 中品牌色变量明确定义了这些色值
• 极光球装饰：radial-gradient + blur(60px+) + opacity(0.4+) 组合的绝对定位 <div>
• 5 种以上等权重的 muted 色（saturation < 30% 且 lightness 均匀分布）— 无主次信号

NEVER — 禁止使用的字体（作为主要 display/body 字体）

Inter, Roboto, Arial, Geist, Space Grotesk, Poppins, Open Sans, Lato, Montserrat, system-ui

例外：品牌 spec 中明确指定的除外。中文正文允许 system-ui fallback。

NEVER — 禁止出现的 CSS 模式

• background-clip: text; -webkit-text-fill-color: transparent — 渐变文字标题
• backdrop-filter: blur() 在 3 个以上组件上 — 玻璃态泛滥
• border-radius: 0.5rem（Tailwind rounded-2xl）应用于 4 个以上不同组件类型
• box-shadow + border: 1px solid 同时出现在同一卡片上（hairline + diffuse shadow 冲突）
• animation: fade-up-on-scroll 或等效的 @keyframes + IntersectionObserver 全页应用
• @keyframes glow 作用于 box-shadow — 发光阴影动画
• 卡片左边框 accent 色条：border-left: 3px solid + border-radius 同卡片

NEVER — 禁止的页面骨架

<Hero> → <LogoWall> → <FeatureCards3> → <TestimonialCarousel> → <StatsRow> → <Pricing> → <FAQ> → <FooterCTA>

任何页面如果同时命中其中 4 段以上 → 触发重新设计。

NEVER — 禁止的内容模式

• /10[×x] faster|99\.[0-9]% uptime|unleash|leverage|comprehensive|one-stop/ — 虚假数据 + 套话列表
• lorem ipsum — 任何拉丁文占位
• unsplash.com, placehold.co, placekitten.com, picsum.photos — 外部占位图 CDN
• ✨|🚀|🎯|⚡|🔥|💡 — emoji 功能图标
• Lucide Sparkles, Zap, Shield 出现在不同概念区块

ALWAYS — 必须执行

• :root 中定义的颜色变量 ≥ 1 个来自品牌色系，不是 Tailwind 默认
• accent 色可见使用 ≤ 2 处/屏
• display 字体 ≠ Inter/Roboto/Arial/Geist/system-ui（除非品牌 spec 指定）
• 字重跨度 ≥ 500（如 200 + 700），标题 font-size / 正文 font-size ≥ 3
• border-radius 值 ≥ 2 种（不同组件类型不同值）
• 页面含 ≥ 1 个非卡片布局区域
• 动效用 transform + opacity，禁 width/height/box-shadow 动画
• 产品图 = 真实截图或几何色块占位，禁 unsplash 系

修复优先级

级别	触发条件	动作
P0 阻断	命中靛蓝 accent + Inter/默认字体 + SaaS 骨架	不交付，回炉重做
P1 必须修	命中渐变文字、emoji 图标、编造数字、外部占位图	修复后才能交付
P2 建议修	命中统一圆角、全部居中、fade-up 泛滥	标注，下次迭代修