行业设计反模式系统

概述

行业设计反模式系统是一种以负样本为核心的设计知识编码方式：为每种产品类型预定义「绝对不能做什么」，使 AI 生成 UI 时能自动规避行业隐性禁忌。核心洞察：设计知识的精华不是「什么好看」，而是「什么在特定场景下会坏事」。

关键内容

核心洞察

传统 AI 方式：
  用户: "做一个金融 App"
  AI:   生成紫色渐变 + 粒子动画（AI 不知道金融场景的隐性规范）

反模式驱动：
  推理引擎识别 → Banking 规则 → 加载禁用清单
  → 过滤掉 AI-Native UI / 霓虹色 / 手写字体
  → AI 生成深海军蓝 + Inter + 克制动画（专业、可信）

161 条推理规则本质上是 161 份行业经验的负样本库。

产品类型专属反模式示例

产品类型	核心反模式（禁止事项）
Banking / 金融	AI 紫/粉渐变、粗糙动画、暗黑模式（摧毁用户信任）
Healthcare / 医疗	过于鲜艳的颜色、密集动画（引发焦虑）
Children's Apps / 儿童	复杂布局、细小字体、暗色模式
Luxury E-commerce / 奢侈品	廉价感渐变、倒计时、Sale 标签
Mental Health / 心理健康	高对比刺激色、警告红、急迫感 CTA
Gaming / 游戏	极简主义、白色大背景（违背用户期待）
Legal Services / 法律	花哨渐变、AI 感设计、Claymorphism

五维度推理输出（以 Banking App 为例）

PATTERN:    Hero(安全感)→Feature→Trust(合规证书)→Testimonial→CTA
STYLE:      Minimalism（优先）/ Soft UI（备选）/ 禁止 AI-Native UI
COLORS:     深海军蓝 #003087 + 金融绿 #006400 / 禁止亮霓虹色、AI 紫
TYPOGRAPHY: Playfair Display(标题) / Source Sans Pro(正文) / 禁止手写字体
KEY EFFECTS:微妙数字滚动 ✓ / 粒子效果 ✗ / 故障艺术 ✗

通用交付前检查清单（Pre-delivery Checklist）

每次生成设计系统后自动附带：

[ ] 无 emoji 作为图标（使用 SVG：Heroicons/Lucide）
[ ] 所有可点击元素有 cursor: pointer
[ ] Hover 状态有平滑过渡（150-300ms）
[ ] 文字对比度最低 4.5:1（WCAG AA）
[ ] 焦点状态对键盘导航可见
[ ] 遵守 prefers-reduced-motion
[ ] 响应式断点：375px / 768px / 1024px / 1440px

知识工程价值

这一模式将隐性的行业设计经验编码为可机器执行的过滤条件：

传统方式	反模式系统
经验在设计师脑中	编码在 CSV 规则中
AI 不知道行业惯例	AI 自动加载并执行禁止规则
结果：平庸或错误	结果：行业规范合格

应用扩展

同样的模式可推广至其他领域：将某一领域的隐性禁忌结构化为负样本库，作为 AI 生成任务的过滤层（如法律合规、医疗用语禁忌、文化敏感词等）。

来源

raw/articles/ai-tools/claude-skills/blog-03-design-system-generator.md