01
模糊的视觉要求
只说 modern、clean 或 premium，AI 只能回到训练数据中最常见的平均答案。
ANTI-AI-SLOP UI SYSTEM
避免 AI Slop：让 AI 生成的前端不像模板
所谓 AI slop，通常不是代码不能运行，而是每个页面都像同一套默认 SaaS 模板：蓝紫渐变、圆角卡片、无意义的图标和缺少内容层级。StyleKit 帮你把‘不要普通’改写成可执行的设计规则。
AI Slop 通常从哪里产生？
02
没有内容层级
页面先堆卡片和按钮，却没有先决定叙事顺序、信息密度和真正的主要动作。
03
没有反向验收
不告诉 AI 哪些默认元素不能出现，也没有检查移动端、焦点状态和空数据状态。
一次 AI UI 迭代的反模板流程
- 1
先指出当前页面最像 AI 默认模板的 3 个地方：配色、布局、字体或组件处理。
- 2
选择一个明确风格，并写出必须使用的 tokens、组件状态和必须避免的视觉惯性。
- 3
让 AI 逐区重构，再用内容层级、响应式、可访问性和一致性清单验收，而不是只看首屏截图。
Prompt skeleton
Build a AI slop prevention interface using one StyleKit visual direction. Include: - explicit colors, typography, spacing, radii, and shadows - reusable components with hover, focus, loading, and empty states - responsive behavior and keyboard-accessible controls - a short list of visual choices that must not drift
不要只说‘有设计感’，要给 AI 一套可检查的规则
StyleKit 的风格库覆盖极简、编辑、野兽派、瑞士、复古、玻璃拟态等不同方向。每个方向都可以转换成颜色、排版、布局、组件和交互约束。
新野兽派
大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派，强调功能与原始美学。包含经典、柔和、俏皮三种变体。
编辑杂志风
优雅的杂志排版风格，衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。
新拟物派
柔和的内凹外凸立体效果，通过双重阴影模拟光源，浅色背景配同色系元素，营造精致的立体感。
玻璃拟态
半透明毛玻璃效果，通过 backdrop-blur 模糊背景、柔和边框和微妙阴影，创造现代感十足的层叠界面。
便当盒布局
灵感源于日式便当盒的不规则网格布局，通过大小不一的卡片组合创造视觉层次，常用于作品集和产品展示。
企业简洁风
专业简洁的企业风格，强调可读性、一致性和信任感。适合B2B SaaS、企业官网、后台管理系统。
用这些页面摆脱默认 AI UI
FAQ
什么是 AI slop？
AI slop 通常指大量生成、缺少独特判断和内容价值的 AI 产物。在前端里常表现为相同的渐变、圆角卡片、默认字体、装饰性图标和没有真实信息层级的页面。
如何让 AI 生成的 UI 更有设计感？
不要只要求‘好看’。选择一个明确风格，规定色彩与排版，说明内容层级和组件状态，再加入‘不要出现什么’的反向约束。
反 AI Slop 提示词适合什么工具？
适合 ChatGPT、Claude Code、Codex 等能生成或修改前端代码的工具。提示词本身不绑定某个模型，关键是设计规则足够具体。