拒绝 AI 设计垃圾：7 条铁律，让产品有人味
2026/7/17大约 9 分钟
"
如何区分"人类设计"和"默认 LLM 输出"？
如何避免 AI 生成的设计垃圾（AI slop）？
Anti-AI-slop rules：7 条铁律 + 3 层检查
让产品有人味，拒绝模板化
来源：open-design（开源 Claude 替代品）
问题背景
AI 生成的设计垃圾（AI slop）泛滥：
┌─────────────────────────────────────────────────────────┐
│ AI 生成的设计垃圾（AI slop） │
├─────────────────────────────────────────────────────────┤
│ │
│ 典型特征： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 默认的 Tailwind indigo 作为强调色 │ │
│ │ · #6366f1, #4f46e5, #4338ca, #3730a3 │ │
│ │ · #8b5cf6, #7c3aed, #a855f7 │ │
│ │ · 这是 AI 的教科书式特征 │ │
│ │ │ │
│ │ 2. Hero 上的两站"信任"渐变 │ │
│ │ · purple→blue, blue→cyan │ │
│ │ · indigo→pink │ │
│ │ · 典型的 AI 模板渐变 │ │
│ │ │ │
│ │ 3. Emoji 作为功能图标 │ │
│ │ · ✨, 🚀, 🎯, ⚡, 🔥, 💡 │ │
│ │ · 出现在 <h*>, <button>, <li>, class*="icon" │ │
│ │ · 典型的 AI 图标选择 │ │
│ │ │ │
│ │ 4. Sans-serif 在显示文本上 │ │
│ │ · h1/h2 使用硬编码的 Inter / Roboto / system-ui│ │
│ │ · 而不是 var(--font-display) │ │
│ │ · 忽略设计系统的字体绑定 │ │
│ │ │ │
│ │ 5. 圆角卡片带有彩色左边框强调 │ │
│ │ · 典型的"AI 仪表盘瓦片"形状 │ │
│ │ · 既有圆角，又有左边框 │ │
│ │ · AI 的标准模板 │ │
│ │ │ │
│ │ 6. 发明指标 │ │
│ │ · "10× 更快", "99.9% 正常运行时间" │ │
│ │ · "3× 更有生产力" │ │
│ │ · 没有真实来源的虚假数据 │ │
│ │ │ │
│ │ 7. 填充文本 │ │
│ │ · lorem ipsum, "功能一/二/三" │ │
│ │ · "占位符文本", "示例内容" │ │
│ │ · 空白区域的设计问题 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 问题： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · AI 生成的产品看起来都一样 │ │
│ │ · 缺乏人类设计的独特性 │ │
│ │ · 模板化严重，没有灵魂 │ │
│ │ · 用户无法记住产品 │ │
│ │ · 没有品牌识别度 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘解决方案：Anti-AI-slop rules
具体、可检查的规则，区分"人类设计"和"默认 LLM 输出"
┌─────────────────────────────────────────────────────────┐
│ Anti-AI-slop rules │
├─────────────────────────────────────────────────────────┤
│ │
│ 核心定位： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 🎯 拒绝 AI 生成的设计垃圾（AI slop） │ │
│ │ 🎨 让产品有人味，拒绝模板化 │ │
│ │ 🔍 具体、可检查的规则 │ │
│ │ 🤖 区分"人类设计"和"默认 LLM 输出" │ │
│ │ 🛡️ 自动强制执行（daemon 的 lint-artifact） │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 规则层级： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ P0（必须修复）：七大原罪 │ │
│ │ · 这些模式由 linter 在 P0 阻止 │ │
│ │ · 未能强制执行的规则是回归，而非风格偏好 │ │
│ │ · 自动检查，必须修复 │ │
│ │ │ │
│ │ P1（应该修复）：软性特征 │ │
│ │ · 应该修复，但不阻塞 │ │
│ │ · 指导性，非自动检查 │ │
│ │ │ │
│ │ P2（最好修复）：打磨特征 │ │
│ │ · 最好修复，提升质量 │ │
│ │ · 指导性，非自动检查 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 项目信息： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ GitHub: nexu-io/open-design │ │
│ │ License: MIT │ │
│ │ Status: Open Design（开源 Claude 替代品） │ │
│ │ 来源: refero_skill (MIT) │ │
│ │ 适配: Open Design 的 lint surface │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘七大原罪（P0 - 必须修复）
这些模式由 linter 在 P0 阻止，必须修复：
┌─────────────────────────────────────────────────────────┐
│ 七大原罪（P0 - 必须修复） │
├─────────────────────────────────────────────────────────┤
│ │
│ 原罪 1：默认的 Tailwind indigo 作为强调色 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 禁止的颜色： │ │
│ │ · #6366f1 (indigo-500) │ │
│ │ · #4f46e5 (indigo-600) │ │
│ │ · #4338ca (indigo-700) │ │
│ │ · #3730a3 (indigo-800) │ │
│ │ · #8b5cf6 (violet-500) │ │
│ │ · #7c3aed (violet-600) │ │
│ │ · #a855f7 (purple-500) │ │
│ │ │ │
│ │ 原因： │ │
│ │ · 这是 AI 的教科书式特征 │ │
│ │ · 默认的 LLM 输出总是选择这些颜色 │ │
│ │ · 缺乏品牌独特性 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 使用 DESIGN.md 提供的 --accent │ │
│ │ · 选择其他颜色，避免默认 indigo │ │
│ │ · 尊重设计系统的颜色标记 │ │
│ │ │ │
│ │ 示例： │ │
│ │ ✅ 使用: var(--accent) │ │
│ │ ❌ 使用: #6366f1, #4f46e5, #4338ca │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 原罪 2：Hero 上的两站"信任"渐变 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 禁止的渐变： │ │
│ │ · purple→blue │ │
│ │ · blue→cyan │ │
│ │ · indigo→pink │ │
│ │ │ │
│ │ 原因： │ │
│ │ · 这是 AI 的模板化渐变 │ │
│ │ · 典型的"信任"渐变，缺乏创意 │ │
│ │ · 平坦的表面 + 有意的排版永远胜过它 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 使用平坦的表面 │ │
│ │ · 使用有意的排版 │ │
│ │ · 避免标准的两站渐变 │ │
│ │ · 考虑单色或创意配色 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 原罪 3：Emoji 作为功能图标 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 禁止的 Emoji： │ │
│ │ · ✨ (sparkles) │ │
│ │ · 🚀 (rocket) │ │
│ │ · 🎯 (dart) │ │
│ │ · ⚡ (zap) │ │
│ │ · 🔥 (fire) │ │
│ │ · 💡 (bulb) │ │
│ │ │ │
│ │ 出现位置： │ │
│ │ · <h*> (标题) │ │
│ │ · <button> (按钮) │ │
│ │ · <li> (列表项) │ │
│ │ · class*="icon" (图标类) │ │
│ │ │ │
│ │ 原因： │ │
│ │ · 这是 AI 的标准图标选择 │ │
│ │ · 缺乏品牌独特性 │ │
│ │ · 不专业 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 使用 1.6–1.8px stroke 的 monoline SVG │ │
│ │ · 使用 currentColor │ │
│ │ · 使用专业的图标库（Heroicons, Lucide 等） │ │
│ │ · 自定义图标，展示品牌个性 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 原罪 4：Sans-serif 在显示文本上，当种子绑定 serif │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 禁止的字体： │ │
│ │ · 硬编码的 Inter │ │
│ │ · 硬编码的 Roboto │ │
│ │ · 硬编码的 system-ui │ │
│ │ │ │
│ │ 出现位置： │ │
│ │ · h1/h2 必须使用 var(--font-display) │ │
│ │ · 而不是硬编码的 sans-serif │ │
│ │ │ │
│ │ 原因： │ │
│ │ · 忽略设计系统的字体绑定 │ │
│ │ · 不尊重 DESIGN.md 的定义 │ │
│ │ · AI 的默认输出总是选择 sans-serif │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · h1/h2 必须使用 var(--font-display) │ │
│ │ · 尊重设计系统的字体绑定 │ │
│ │ · 使用 DESIGN.md 定义的字体 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 原罪 5：圆角卡片带有彩色左边框强调 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 禁止的形状： │ │
│ │ · 圆角卡片 + 彩色左边框 │ │
│ │ · 典型的"AI 仪表盘瓦片"形状 │ │
│ │ │ │
│ │ 原因： │ │
│ │ · 这是 AI 的标准模板 │ │
│ │ · 缺乏创意 │ │
│ │ · 过度使用 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 放弃圆角或左边框之一 │ │
│ │ · 考虑其他布局方式 │ │
│ │ · 避免标准的"仪表盘瓦片"形状 │ │
│ │ · 使用创意的卡片设计 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 原罪 6：发明指标 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 禁止的指标： │ │
│ │ · "10× 更快" │ │
│ │ · "99.9% 正常运行时间" │ │
│ │ · "3× 更有生产力" │ │
│ │ · 没有真实来源的虚假数据 │ │
│ │ │ │
│ │ 原因： │ │
│ │ · AI 喜欢发明指标 │ │
│ │ · 缺乏可信度 │ │
│ │ · 损害品牌信誉 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 从真实来源提取数据 │ │
│ │ · 使用标记的占位符 │ │
│ │ · 不要发明指标 │ │
│ │ · 提供数据来源 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 原罪 7：填充文本 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 禁止的文本： │ │
│ │ · lorem ipsum │ │
│ │ · "功能一/二/三" │ │
│ │ · "占位符文本" │ │
│ │ · "示例内容" │ │
│ │ │ │
│ │ 原因： │ │
│ │ · 空白区域是设计问题 │ │
│ │ · 应该通过构图解决，而不是发明文字 │ │
│ │ · 缺乏创意 │ │
│ │ · 不专业 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 空白区域是设计问题，用构图解决 │ │
│ │ · 不要发明文字 │ │
│ │ · 使用真实的内容 │ │
│ │ · 或者留空，等待真实内容 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘软性特征（P1 - 应该修复）
这些特征应该修复，但不阻塞：
┌─────────────────────────────────────────────────────────┐
│ 软性特征（P1 - 应该修复） │
├─────────────────────────────────────────────────────────┤
│ │
│ 特征 1：标准的"Hero → Features → Pricing → FAQ → │
│ CTA"序列，没有变化 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 问题： │ │
│ │ · 这是 AI 模板的骨架 │ │
│ │ · 缺乏创意 │ │
│ │ · 用户看腻了 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 引入至少一个非常规部分 │ │
│ │ · 证言墙作为全出血引用 │ │
│ │ · 定价作为与现状的比较 │ │
│ │ · 内联迷你产品演示 │ │
│ │ · 打破标准序列 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 特征 2：外部占位符图片 CDN │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 禁止的 CDN： │ │
│ │ · unsplash.com │ │
│ │ · placehold.co │ │
│ │ · placekitten.com │ │
│ │ · picsum.photos │ │
│ │ │ │
│ │ 原因： │ │
│ │ · 脆弱且明显 │ │
│ │ · 不专业 │ │
│ │ · 依赖外部服务 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 使用 shipped 的 .ph-img 占位符类 │ │
│ │ · 使用本地图片 │ │
│ │ · 避免外部 CDN │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 特征 3：超过 ~12 个原始十六进制值在 :root 之外 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 问题： │ │
│ │ · Token 没有被尊重 │ │
│ │ · 颜色值硬编码 │ │
│ │ · 难以维护 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 在 :root 中定义颜色变量 │ │
│ │ · 使用 CSS 变量 │ │
│ │ · 尊重设计系统的 token │ │
│ │ · 保持 :root 之外的原始十六进制值少于 12 个 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 特征 4：var(--accent) 在渲染主体中使用 6+ 次 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 问题： │ │
│ │ --accent 过度使用 │ │
│ │ · 缺乏色彩层次 │ │
│ │ · 视觉疲劳 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 每个屏幕最多 2 个可见使用 │ │
│ │ · 使用其他颜色变量 │ │
│ │ · 建立色彩层次 │ │
│ │ · 避免 --accent 过度使用 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘打磨特征（P2 - 最好修复）
这些特征最好修复，提升质量：
┌─────────────────────────────────────────────────────────┐
│ 打磨特征（P2 - 最好修复） │
├─────────────────────────────────────────────────────────┤
│ │
│ 特征 1：部分没有 data-od-id │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 问题： │ │
│ │ · 注释模式无法定位它们 │ │
│ │ · 难以进行代码审查 │ │
│ │ · 难以维护 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 为每个部分添加 data-od-id │ │
│ │ · 便于注释模式定位 │ │
│ │ · 便于代码审查 │ │
│ │ · 便于维护 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 特征 2：装饰性 blob / wave SVG 背景 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 问题： │ │
│ │ · 无意义的几何图形 │ │
│ │ · 缺乏目的 │ │
│ │ · AI 的默认输出 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 使用有意义的背景 │ │
│ │ · 避免装饰性 blob / wave │ │
│ │ · 考虑品牌相关性 │ │
│ │ · 考虑用户体验 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 特征 3：完美对称布局，没有视觉张力 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 问题： │ │
│ │ · 缺乏视觉张力 │ │
│ │ · 过于完美，不自然 │ │
│ │ · AI 的默认布局 │ │
│ │ │ │
│ │ 解决方案： │ │
│ │ · 交替密度（一个紧凑部分，一个呼吸部分） │ │
│ │ · 打破完美对称 │ │
│ │ · 创造视觉张力 │ │
│ │ · 让布局看起来有意设计 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘如何添加灵魂而不违反规则
目标：~80% 成熟模式 + ~20% 独特选择
┌─────────────────────────────────────────────────────────┐
│ 如何添加灵魂而不违反规则 │
├─────────────────────────────────────────────────────────┤
│ │
│ 目标比例： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ~80% 成熟模式 + ~20% 独特选择 │ │
│ │ │ │
│ │ 80% 成熟模式： │ │
│ │ · 经过验证的设计模式 │ │
│ │ · 用户熟悉的交互方式 │ │
│ │ · 可访问性最佳实践 │ │
│ │ · 响应式设计原则 │ │
│ │ │ │
│ │ 20% 独特选择： │ │
│ │ · 品牌独特性 │ │
│ │ · 创意视觉决策 │ │
│ │ · 产品个性 │ │
│ │ · 记忆点 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 20% 独特选择的实现位置： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 一个大胆的视觉移动 │ │
│ │ · 字体选择 │ │
│ │ · 单个颜色决策 │ │
│ │ · 意外比例 │ │
│ │ │ │
│ │ 2. 声音和微文案 │ │
│ │ · "开始跟踪"按钮胜过"开始"按钮 │ │
│ │ · 品牌语调 │ │
│ │ · 微文案创意 │ │
│ │ │ │
│ │ 3. 一个用户会记住的微交互 │ │
│ │ · 按钮按下移动 2px │ │
│ │ · 数字计数增加 │ │
│ │ · 悬停效果 │ │
│ │ │ │
│ │ 4. 一个只有使用过产品的人才会放置的细节 │ │
│ │ · 微妙的键盘快捷键提示 │ │
│ │ · 状态徽章，带有产品特定措辞 │ │
│ │ · 深度用户才会注意到的细节 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 灵魂测试： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 如果审查者截图了工件，项目外的人可以 │ │
│ │ 识别出这是哪个产品的 — 你有灵魂。 │ │
│ │ │ │
│ │ 如果不能 — 你发布了一个模板。 │ │
│ │ │ │
│ │ 测试方法： │ │
│ │ 1. 截图你的产品 │ │
│ │ 2. 展示给项目外的人 │ │
│ │ 3. 问他们：这是哪个产品？ │ │
│ │ 4. 如果他们能认出 — 你有灵魂 │ │
│ │ 5. 如果他们不能 — 你发布了一个模板 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘核心思想
拒绝 AI 设计垃圾，让产品有人味
┌─────────────────────────────────────────────────────────┐
│ 核心思想 │
├─────────────────────────────────────────────────────────┤
│ │
│ AI 生成的产品看起来都一样： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 默认的 Tailwind indigo 作为强调色 │ │
│ │ · Hero 上的两站"信任"渐变 │ │
│ │ · Emoji 作为功能图标 │ │
│ │ · Sans-serif 在显示文本上 │ │
│ │ · 圆角卡片带有彩色左边框强调 │ │
│ │ · 发明指标 │ │
│ │ · 填充文本 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 拒绝 AI 设计垃圾，让产品有人味： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 遵守七大原铁律（P0 - 必须修复） │ │
│ │ 2. 修复软性特征（P1 - 应该修复） │ │
│ │ 3. 提升打磨特征（P2 - 最好修复） │ │
│ │ 4. 添加 20% 独特选择 │ │
│ │ 5. 通过灵魂测试 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 灵魂测试： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 如果审查者截图了工件，项目外的人可以 │ │
│ │ 识别出这是哪个产品的 — 你有灵魂。 │ │
│ │ │ │
│ │ 如果不能 — 你发布了一个模板。 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 目标： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 让产品有人味，拒绝模板化 │ │
│ │ 拒绝 AI 生成的设计垃圾（AI slop） │ │
│ │ 让产品有品牌识别度 │ │
│ │ 让用户记住产品 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘收尾金句
- 如何区分"人类设计"和"默认 LLM 输出"？
- 如何避免 AI 生成的设计垃圾（AI slop）？
- Anti-AI-slop rules：7 条铁律 + 3 层检查
- 让产品有人味，拒绝模板化
- ~80% 成熟模式 + ~20% 独特选择
- 如果审查者截图了工件，项目外的人可以识别出这是哪个产品的 — 你有灵魂。如果不能 — 你发布了一个模板。
拒绝 AI 设计垃圾，让产品有人味！
7 条铁律 + 3 层检查 + 灵魂测试 = 产品有人味！