如何去掉 AI 生成界面的“塑料感”：常见 AI 俗套清单与减法走查
几乎所有大模型在没有约束时，都会写出一眼能认出来的“AI 默认脸”：每个大标题头顶悬着一颗带圆点的胶囊小标签，浅色卡片里再套一层小卡片，左边贴一条 4px 彩色竖线，角落里塞满“+128% 效率提升”或“99.98% 准确率”之类的假数字。要让界面脱掉这层塑料感，靠的不是往上叠加更多发光特效，而是把这些机械习惯逐条删干净。
核心要点
- 识别高频 AI 默认习惯：标题上方胶囊（Eyebrow Pill）、左侧 4px 装饰竖条、三层嵌套圆角框、全大写宽字距英文副标题、生造百分比指标。
- 用对齐和留白代替框线：能用间距和字重分清层级的地方，就不要再加一层外框或背景卡片。
- 所有数字必须来自真实业务上下文（如价格档位、批次余量、实际延迟毫秒数），禁止模型为了填满版面捏造营销数字。
- 通过 Oil UI 的可读性与减法检查表，在 100% 与 200% 截图下逐行排查冗余元素。
npx skills add oil-oil/oil-ui装入 Agent 后，模型会在生成与走查阶段自动对照反 AI 俗套清单做减法。
一眼暴露“AI 味”的六个高频习惯
所谓“AI 塑料感”，并不是某一种颜色的错，而是模型在不理解业务重心时，为了凑够视觉复杂度而机械重复的几套装饰组件。只要把下面六种习惯改掉，页面气质立刻会变得沉稳：
| AI 高频默认习惯 | 为什么显得假 | Oil UI 的替换与减法做法 |
|---|---|---|
| 每个区块标题头顶都放一颗圆角胶囊 (Eyebrow Pill) | 全页十几个胶囊标签，把原本该突出的重点彻底稀释成噪音 | 直接用干净的章节标题或序号进入正题；整页最多保留一处真正代表状态的标签 |
| 卡片套卡片，外加左侧 3–4px 彩色竖边框 | 多层边框与内边距把正文字宽挤窄，满屏都是平行的框线 | 去掉外层包裹框，改用网格对齐、段落间距与单条细分割线组织信息 |
| 蓝紫霓虹渐变文字 + 半透明毛玻璃发光背景 | 无论做律所、木工坊还是医疗后台都套同一套赛博配色 | 根据品类物理属性选色（如木工坊用原木亚麻调、铸钟坊用暗青铜、财务账本用纸白与墨黑） |
| 随手生造“+240% 增长”“99.9% 正常运行”假指标卡片 | 访客一眼看出数字没有业务出处，瞬间降低对产品的信任感 | 只展示有真实含义的业务数据（如三脚凳 32/45/62cm 售价、当月 24 把批次、API 实际调用明细） |
| 三张完全等宽、顶部带圆圈线性图标的空话卡片 | “极速 / 安全 / 智能”三连卡片几乎成了 AI 模板的签名 | 换成一主两辅的不对称叙事，或直接放入一个可操作的真实控件（如字体试排器、费率切换器） |
| 浅灰背景上放浅灰小字，或满屏全大写字母加超宽字距 | 远看似乎有设计感，近看正文字号太小、对比度不够，阅读极累 | 严格守住正文对比度与舒适行宽（每行 55–75 字符），字号层级拉开清晰差距 |
做减法的顺序：先拿掉框线，再立住字号与留白
打开画廊里的《Fieldwork Type》（字体铸造厂）、《Atelier Volders · 器物年轮》（家具工坊）或《迹闻 TRACE》（香水电商），你会注意到它们几乎不用圆角阴影卡片，却依然层次分明。原因在于它们把重心放在了三个基本功上：
- 拉大主标题与正文的字号对比，减少中间字号
- 一页里有四套明确的字号（主标题、分节标题、正文、辅助说明）就够了。不要在同一屏里出现 11px、12px、13px、14px、15px 五种差不多的字号。
- 删掉一半以上的边框线，看结构是否依然成立
- 在走查时试着把容器外框去掉：如果靠左对齐和上下间距就能让人看懂哪几行是一组，那条边框就是多余的。
- 让控件本身说话，而不是靠图标点缀
- 与其在“支持按用途购买授权”旁边画一个小盾牌图标，不如直接放上桌面、Web、App 三档授权勾选框，让访客勾选时看到价格跳动。
可直接附加到任何任务的“去 AI 俗套”提示词
除了安装 Oil UI 让模型自动执行检查表，你也可以在日常提示词末尾加上下面这段约束：
请按 Oil UI 规范设计与检查本页面，严格执行以下减法：
1. 禁止在每个标题上方堆叠胶囊小标签（Eyebrow Pill），禁止使用左侧彩色竖条边框和无意义的蓝紫发光渐变。
2. 禁止生造没有业务出处的百分比涨跌（如 +128%、99.9%）或空洞的“快速/智能/安全”三等分图标卡片。
3. 禁止多层卡片套卡片；优先使用网格对齐、字号对比、留白与极简分割线建立层级。
4. 完成后在 1440×900 与 390×844 下截图，逐处删掉拿走后不影响理解的装饰框线。配合 npx skills add oil-oil/oil-ui 使用效果最佳。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
Fieldwork Type
字体铸造厂官网
一家独立字体铸造厂的官网（1440×900 起，响应式到 390 宽）：首屏展示一款主打字体，访客可以直接输入自己的文字试排，调字号、字重和字宽；往下是字体家族的字重表、字符集、使用案例，以及按使用场景（桌面、网页、App）选授权并加入购物车。 试字和授权选择是这件作品的核心：输入时排版当场变化，授权价格随选项更新。设计首屏、试字面板展开、授权选择三个状态。
查看作品与提示词 →
Atelier Volders · 器物年轮
手作家具工坊官网
比利时根特 Korenlei 14 号的一家双人木工坊官网（1440×900 起，响应式到 390 宽），界面用英文。工坊只做一件器物：手工车削、楔入榫卯的实心橡木三脚凳 De Drievoet。木料在河岸棚下自然风干三年，每月只开窑做一批、固定 24 张。 提供三种高度（32 cm 炉边矮凳 €240、45 cm 餐桌与书桌凳 €270、62 cm 带白蜡木脚圈的高脚凳 €310）和三种表面处理（白亚麻籽皂洗原木、氨熏深褐橡木、熟亚麻籽油蜂蜡）。访客可以实时切换高度与木料表面查看变化，了解六周制作工序、凳底热烙批次印记与周六工坊开放时间，并预留当月批次。不提供现成产品照片。
查看作品与提示词 →
Vesper
API 用量计费与账单后台
为 AI 与开发者工具团队设计一个 API 用量计费与客户账单管理后台，采用英文界面，桌面视口为 1440×900。用户可以管理订阅方案与实时 API 用量，查看本周期应收金额和异常账单，按状态与用量阈值筛选客户或账单，并打开单条记录查看计费明细、扣款与 Webhook 时间线及事件报文，完成重试扣款、调整配额或导出账单等操作。 实现三个关键状态：展示收入与用量走势、客户或账单列表及实时筛选的日常工作区；展示用量拆解、状态时间线和恢复操作的异常账单详情；以及快捷命令面板。交付可离线打开的 `index.html`，并以 1440×900、DPR=2 截取 `shots/desktop.png`、`shots/state-1.png` 和 `shots/state-2.png`。
查看作品与提示词 →
迹闻 TRACE
香水品牌电商
一个小众香水品牌的线上店铺。做店铺首页和一款香水的详情页。
查看作品与提示词 →Oil UI Pro：完整 AI 俗套清零表与 200% 放大减法走查
Oil UI Pro 内置了详尽的“AI 默认习惯清零清单”“100% / 200% 缩放可读性清单”与“逐行减法走查步骤”，并由无上下文子 Agent 在盲审阶段强制拦截漏网的套路化元素。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
为什么在提示词里写了“不要 AI 味”，模型还是照样画三张卡片？
因为模型不知道“不要 AI 味”具体指哪些 CSS 写法。只有像 Oil UI 这样把禁忌拆解成具体可检查的特征（如禁掉标题顶部的圆角 pill、禁掉无来源的百分比角标、禁掉三层嵌套容器），并给出明确的替代版式，模型才能真正改过来。
完全不用卡片，怎么把不同模块区分开？
可以用四种更耐看的手段：1) 充足的上下留白（比如模块间留 80–120px，模块内留 16–24px）；2) 通栏的微弱背景色阶交替；3) 顶部的单根 1px 细横线配左栏章节名；4) 左右非对称分栏（左栏固定标题，右栏纵向展开内容）。
什么时候适合用胶囊标签（Badge / Pill）？
当它代表真实的业务状态且需要与其他状态区分时——比如账单后台里的“扣款失败”“待重试”，或工坊批次里的“4月批次仅剩 3 把”。如果只是把章节名重复写一遍放在标题头上，就应该直接删掉。
怎么快速检查一个页面是不是还有残留的 AI 俗套？
把页面缩放到 50% 或把文字模糊掉看结构：如果满眼都是同样大小的圆角方框、药丸标签和对称的三列豆腐块，说明还在套模板；如果能清楚看出首屏焦点、疏密节奏和主次对比，版面就立住了。