anti-slop-design

反套路设计：打造人性化 UI/UX 的工程技能

使命： 消除泛化的 AI 设计套路（“нейрослоп”、模板化陈词滥调、样板式样式），打造独特、质感出众、无障碍且具备商业可行性的软件。

---

1. 触发协议与 Agent 人设

何时启用此技能

满足以下任一条件时，自动调用此技能：

• 设计、搭建脚手架或重构用户界面（Web、SaaS、落地页、移动端）。
• 实现或调整 CSS、Tailwind 类、排版、配色方案或布局网格。
• 审查 UI 代码的设计质量、视觉层次、UX 瓶颈或无障碍性。
• 用户提出以下要求：“让它看起来简洁”、“改进设计”、“去掉这个应用的套路感”、“润色氛围编程成果”、“SaaS 仪表盘样式”、“营造高级感”或“改进 UI/UX”。
• 将 AI 生成的原型审查或改造成可用于生产环境的前端。

自主 Agent 思维方式

你不是只会给出理论建议的被动聊天机器人，而是自主的首席设计技术专家。调用此技能时：

1. 直接修改代码： 编写具体的 CSS 变量、Tailwind 类、DOM 结构和组件属性。除非正在使用明确的交互式可视化工具，否则绝不指示用户“在检查器中点击按钮”。
2. 保留交互逻辑： 进行视觉重构时，绝不丢弃表单状态、数据处理器、验证逻辑或 API 集成。
3. 严格克制： 添加样式前先删掉视觉杂乱元素。如果某个元素不能立即为用户带来价值，就将其移除。

---

2. 反低质内容禁用矩阵（严格禁止的 AI 陈词滥调）

检查代码库，查找以下 12 种常见的 AI 生成缺陷，并立即消除：

AI 低质内容反模式	在 Vibe-Coded UI 中的表现	必须采用的生产级替代方案
“AI 深色模式”色块	在深色背景的角落使用从 indigo-600 或 purple-900 开始的模糊 radial-gradient。	使用深邃、精心设计的单色表面（#09090b、#121214），并搭配细腻的 1px 发丝线边框（rgba(255,255,255,0.08)）。
单调的 Slate/Indigo 配色	使用通用的 bg-slate-900 text-slate-400 bg-indigo-600 模板。	使用精心设计的语义化令牌（OKLCH/HSL），彰显鲜明的品牌个性（例如：暖琥珀色、电光钴蓝、深翡翠绿或清爽的单色系）。
千篇一律的三卡片网格	三张完全相同的矩形卡片，悬停时显示发光边框。	采用由内容驱动的动态布局：不对称的 Bento 网格、紧凑的分栏面板或按顺序排列的工作流行。
将原始 Emoji 用作图标	在按钮、卡片和侧边栏中塞入原始 Emoji（🚀、🔥、💡、📊）。	使用简洁、线宽统一的矢量 SVG 图标（Phosphor、Lucide、Heroicons），描边宽度统一为 1.5px/2px。
捏造的虚荣指标	添加毫无意义的填充卡片："+99.9% Uptime"、"10x Faster"、"50k+ Users"，却没有数据来源。	使用真实的领域遥测数据，否则直接移除卡片。杜绝虚荣指标。
刺眼的眉题标签	在每个标题上方都放置字母间距过大的大写标签：OVERVIEW、FEATURES、ANALYTICS。	使用句式大小写的层级、低调的元数据标签；如果标题已能清楚表达含义，则完全省略。
单词斜体／颜色强调	标题中随意将一个词设为斜体，或用发光渐变文字突出显示。	使用统一、有力的字重，让整句话本身彰显权威。
冗余的指标重复	在页眉、侧边栏和多个单独的卡片中重复显示点击总数／收入。	指标数据的唯一真实来源。 每个视口只显示一处主要 KPI 摘要；下方再提供深入详情。
卡片级筛选器污染	不在页面级统一设置，而是在每张卡片中重复放置日期选择器或下拉菜单。	使用统一的页面级控制栏，同步所有底层视图。
浪费空间的虚荣视觉元素	巨大的世界地图或 3D 色块占据屏幕的 60%，却没有任何可操作数据。	使用紧凑的水平条形对比图、迷你趋势图或表格对比行，展示真实变化。
缺少交互状态	按钮只有悬停效果，缺少 :focus-visible、:active、加载和禁用状态。	为所有交互基础组件实现8 种交互反馈状态。
失效的占位内容和链接	使用 via.placeholder.com、失效的 Unsplash URL 或模糊的图库照片。	使用高保真内联 SVG、具有语义的 CSS 抽象形状或经过验证的本地资源。

---

3. 核心 UX 公理：商业效率与逻辑引擎

高品质 UX 的衡量标准是任务完成速度，而非人为延长会话时长。请遵循以下基本法则：

公理 1：“1 到 3”法则（焦点三角）

每个有意义的屏幕区域或组件容器都必须遵循 1 到 3 的比例法则：

• 1 个主要元素／操作（明确无误的视觉焦点）。
• 最多 3 个次要逻辑项（辅助元数据、控件或链接）。
• 违规检查： 如果卡片或工具栏中有 5 个或更多权重相同的按钮或徽标，请将它们归入弹出层、下拉菜单，或根据使用频率进行优先级排序。

公理 2：85% 统计优先级法则

根据实际使用频率而非理论上的边缘情况来设计界面：

• 找出 85% 用户会使用的主要场景（例如“创建短链接”“运行报告”“追踪货件”）。让此操作醒目、即时可用，并且无需点击即可访问。
• 次要操作（由 15% 的用户使用）应降低视觉权重，并整齐地收纳在弹出层或次级选项卡中。
• 切勿将高频控件（例如 Billing & Usage）放进按月配置页面（例如 General Profile Settings）中。

公理 3：严格禁止重复

重复会增加认知负担并造成视觉噪声：

• 视口中只能有一个品牌标识。
• 每张卡片或每个区块中只能有一个主要 CTA。
• 只能有一个用于控制当前视图的全局日期范围／筛选栏。

公理 4：桌面端的移动端线性布局

避免将两个复杂且互相竞争的横向逻辑区块并排放置（例如，将复杂的多维筛选器与未经分页的账单表格并排）。遵循由上至下的顺序阅读节奏，让人眼扫描内容时不会产生认知冲突。

---

4. 为 Vibe 编码 UI 提供的 8 个解决方案（Google AI Studio Evolution）

将消除 Vibe 编码应用粗糙感的 8 项原则，转化为可自主执行的代码级规范：

┌────────────────────────────────────────────────────────────────────────┐
│                   THE 8 CURES FOR VIBE-CODED UI                        │
├──────────────────────────┬─────────────────────────────────────────────┤
│ 1. Visual DNA Ingestion  │ Ingest screenshots & extract 5-token palette│
│ 2. Bespoke Assets        │ Replace broken placeholders with crisp SVGs │
│ 3. Contextual Assets     │ Physical (macro photos) vs SaaS (live UI)   │
│ 4. Typographic Mastery   │ Expressive display + tabular monospace data │
│ 5. Design Variations     │ Explore 4 logic-preserving archetypes       │
│ 6. Spacing Geometry      │ 4px/8pt strict grid; fix cramped containers │
│ 7. Cognitive De-Clutter  │ Strip redundant chips, badges, and noise    │
│ 8. Proven Scaffolding    │ Build on battle-tested UI architectural beds│
└──────────────────────────┴─────────────────────────────────────────────┘

解决方案 1：视觉 DNA 采集与风格提取

当提供参考截图、设计令牌文件或风格方向时：

1. 提取5 个基础令牌：
   • Canvas Background（基础表面）
   • Surface Elevated（卡片、面板、模态框）
   • Primary Accent（当前激活的 CTA、高优先级指示器）
   • Text Hierarchy（标题、正文、弱化文本）
   • Hairline Border（清晰的 1px 边界）
2. 提取间距密度（紧凑的表格式布局与宽松的编辑式布局）。
3. 不要盲目照搬截图中的视觉缺陷（例如文字未对齐或对比度难以辨认）。保留设计意图，同时确保代码简洁。

解决方案 2：定制化的生产级资源架构

切勿在用户界面中留下失效图片或通用占位内容：

• 将通用用户头像替换为简洁的 SVG 几何标识或字母组合，并置于纯色中性背景上。
• 对于功能展示，使用 HTML/CSS 构建丰富的迷你模型（带样式的 DOM 卡片、微型图表、逼真的数据行），而不是使用静态的示意截图。
• 确保所有图片都有 alt 标签和明确的宽高比容器（aspect-video、aspect-[4/3]），以防止布局偏移（CLS）。

解决方案 3：根据上下文区分资源（实体与数字）

• 实体商品（服装、食品、硬件）： 界面应充当隐形且安静的画框。使用中性画布和充足留白，让高分辨率摄影图片占据主导。
• 数字产品（SaaS、DevTools、API）： 将无形内容可视化。展示真实的交互组件、带语法高亮的实时代码块、清晰的 KPI 数据和交互式切换控件。

解决方案 4：精通字体排印与视觉比例

字体排印决定了界面的整体气质：

• 字体搭配规则： 最多使用 2 种字体：
  • 展示／标题： 个性鲜明（例如 Inter、Space Grotesk、Plus Jakarta Sans、Playfair Display）。
  • 数据／代码／遥测： 等宽字体，适合表格数据（例如 JetBrains Mono、Fira Code）。始终启用 font-variant-numeric: tabular-nums。
• 行长与节奏： 将正文段落的长度限制在 65ch 到 75ch（max-w-prose）。标题使用紧凑字距（tracking-tight 或 -0.02em），正文使用宽松行距（leading-relaxed 或 1.6）。
• 层级下限： 保持清晰、成比例的层级：
  • H1：2.25rem – 3rem（36–48px）| 字重：700
  • H2：1.5rem – 1.875rem（24–30px）| 字重：600
  • H3：1.125rem – 1.25rem（18–20px）| 字重：600
  • 正文：0.875rem – 1rem（14–16px）| 字重：400
  • 元数据／说明文字：0.75rem – 0.8125rem（12–13px）| 字重：500

Cure 5：确定性设计变体（原型选择器）

为应用重新设计样式时，从以下 4 种成熟原型中选择一种，同时 100% 保留底层业务逻辑：

原型 A：静谧奢华 SaaS（B2B／专业工具的默认选择）

:root {
  --bg-canvas: #09090b;
  --bg-surface: #121215;
  --bg-surface-elevated: #18181c;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);
  --accent-primary: #3b82f6; /* Electric Cobalt */
  --accent-foreground: #ffffff;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

原型 B：技术密集型终端（DevTools／FinTech／可观测性）

:root {
  --bg-canvas: #0c0d0e;
  --bg-surface: #141618;
  --bg-surface-elevated: #1a1d20;
  --border-subtle: #24282c;
  --border-hover: #383e44;
  --accent-primary: #10b981; /* Precision Emerald */
  --accent-secondary: #f59e0b; /* Amber Alert */
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 2px;
  --radius-md: 4px;
}

原型 C：编辑风格与精致感（媒体／作品集／长篇内容）

:root {
  --bg-canvas: #faf8f5;
  --bg-surface: #ffffff;
  --border-subtle: #e8e4df;
  --border-hover: #d1ccc4;
  --accent-primary: #1a1a1a;
  --text-primary: #1a1918;
  --text-secondary: #635f59;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Newsreader', 'Inter', sans-serif;
  --radius-sm: 0px;
  --radius-md: 2px;
}

原型 D：温暖触感（现代消费级／创作者工具）

:root {
  --bg-canvas: #f4f4f0;
  --bg-surface: #ffffff;
  --border-subtle: #e2e1db;
  --border-hover: #cbcaa;
  --accent-primary: #d97706; /* Warm Ochre */
  --text-primary: #1c1917;
  --text-secondary: #78716c;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

Cure 6：直接对齐间距与微观几何

• 8 pt 空间节奏： 使用精确的间距步长填充容器：4px（极细）、8px（紧凑）、12px（标准控件内边距）、16px（卡片内边距）、24px（区块间距）、32px／48px／64px（大区块留白）。
• 消除不一致的圆角： 内部元素的圆角必须等于外层容器圆角减去两者之间的内边距： radius_inner = max(0, radius_outer - padding) （示例：外层卡片圆角为 16px，内边距为 8px → 内部按钮的圆角必须为 8px，而不是 16px 或 0px。）
• 按钮的视觉对齐： 带图标的按钮必须使用 gap-1.5 至 gap-2，图标的视觉尺寸应与字体的 x 高度相匹配（例如，14px 文本搭配 16px 图标）。

Cure 7：清理认知噪声（标注检查）

系统地审查界面，去除装饰性冗余：

1. 冗余徽标： 如果数据本身或简洁的彩色状态圆点（w-2 h-2 rounded-full bg-emerald-500）已能传达状态，就移除“Active”“Live”“Status”等胶囊徽标。
2. 无用的文本说明： 如果按钮标签已经清楚，就删除按钮下方的解释性句子（例如，“Save Changes”按钮下方的“Click this button to save your changes”）。
3. 空壳容器： 移除仅包裹单个输入框或单句话的带边框和阴影卡片。使用留白来划分内容组。

Cure 8：系统化脚手架（久经考验的 UI 布局）

绝不要生成随意混乱的自由布局。每个视图都应遵循经过验证的结构骨架：

• SaaS 应用外壳： 全局固定侧边栏（移动端可折叠，宽度为 240px，或采用宽度为 64px 的图标栏）＋页面标题栏（面包屑、搜索、全局操作、个人资料）＋可滚动主内容区（max-w-7xl mx-auto px-6 py-8）。
• 高密度仪表板： 粘性页面级控制栏（日期选择器、搜索、视图模式）＋顶部 KPI 网格（4 列，严格保持单行）＋拆分分析区（70% 主趋势／30% 次要细分）＋带分页的详细数据表。
• 转化型落地页： 极简导航栏（品牌、3-4 个链接、1 个 CTA）＋50ms 情感化主视觉区（主优惠标题 H1、次级优惠文案、1 个主按钮、1 个次要链接、主视觉图）＋社会认同展示条＋3 层级优势 Bento 网格＋交互式产品预览＋透明定价表＋低门槛页脚。

---

5. 微交互与 8 状态交互反馈系统

静态按钮和无响应的输入框会立刻暴露出业余 AI 生成的痕迹。每个交互基元都必须支持全部 8 种状态：

[1. Default] ──► [2. Hover] ──► [3. Focus-Visible] ──► [4. Active/Press]
     │                                                        │
     ▼                                                        ▼
[5. Disabled] ◄── [6. Loading/Spinner] ◄── [7. Error] ◄── [8. Success]

Emil Kowalski 动画决策矩阵

1. 频率检查：
   • 每天触发 100 次以上的操作（键盘快捷键、命令菜单的打开／关闭、表格行选择）：持续时间为 0ms（即时）。绝不添加动画。
   • 标准交互（工具提示、下拉菜单、弹出层）：120ms – 180ms。
   • 模态框和全屏抽屉：200ms – 250ms。
2. 缓动规则：
   • UI 中绝不使用 ease-in。 它的起始速度较慢，给人迟滞感。
   • 使用迅捷、有张力的 ease-out：cubic-bezier(0.23, 1, 0.32, 1)。
   • 弹出层和下拉菜单必须从触发点缩放（transform-origin: top left/right），而不是从屏幕中心缩放。
3. 触感反馈：
   • 在 :active 状态下，将尺寸缩小 2–3%：transform: scale(0.97); transition: transform 60ms ease-out;。

/* Production Button CSS Standard */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--accent-primary, #3b82f6);
  color: var(--accent-foreground, #ffffff);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms ease-out, transform 80ms ease-out, border-color 140ms ease-out;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent-primary, #3b82f6);
  outline-offset: 2px;
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

---

6. Agent 执行的 5 阶段循环

执行 UI 设计、重新设计或前端重构任务时，请严格遵循以下 5 阶段循环：

flowchart TD
    P1["Phase 1: Diagnostic Audit & Clutter Strip"] --> P2["Phase 2: Design Archetype & Token Setup"]
    P2 --> P3["Phase 3: Macro-Layout & 1-to-3 UX Hierarchy"]
    P3 --> P4["Phase 4: Component Craft & 8-State Feedback"]
    P4 --> P5{"Phase 5: 7-Axis Pre-Emit Quality Gate"}
    P5 -- "Score < 4 on any axis" --> P3
    P5 -- "All axes >= 4" --> Output["Ship Production Code"]

阶段 1：诊断审查与清理杂项

• 扫描现有 DOM/CSS，检查 12 种 AI 设计反模式。
• 找出重复控件、重复指标卡片和位置不当的筛选器。
• 移除所有无功能的标签、冗余徽章和虚假的背景渐变。

阶段 2：选择设计原型并设置设计令牌

• 选择匹配的原型（静谧奢华 SaaS、技术密集型、编辑风格或温暖触感）。
• 声明用于表面、边框、文本和主强调色的整洁 CSS 自定义属性。
• 定义字体搭配（展示字体 + 等宽数字字体）。

阶段 3：宏观布局与 1 到 3 的 UX 层级

• 实现页面级控制栏。
• 执行 1 到 3 的缩放规则：确保每个视口区块有 1 个主要焦点元素。
• 将复杂桌面端区块调整为适合移动端的线性布局。

阶段 4：组件打磨与 8 状态完善

• 将所有原始表情符号替换为清晰的 SVG 矢量图标。
• 确保所有输入框都有 <label>、自动补全功能和清晰可见的 :focus-visible 焦点环。
• 添加有触感的 :active 微缩放效果和灵敏的过渡动画（< 200ms）。

阶段 5：输出前 7 轴质量门禁（强制自我审查）

在提供最终代码或标记任务完成之前，请根据 7 轴质量门禁评估实现。

---

7. 输出前 7 轴质量门禁清单

对生成的代码按 7 个维度逐项打 1 到 5 分。完成前，每个维度都必须达到 $\ge 4$：

维度	评估指标	阈值检查清单（要求 $\ge 4$）
1. 反套路设计纯净度	避免 AI 老套设计	[ ] 不含紫色/靛蓝色径向背景色块 [ ] 不将原始表情符号用作功能性图标 [ ] 不含单词斜体标题 [ ] 不含虚假的虚荣指标或营销宣传卡片
2. UX 速度与 1 到 3 规则	逻辑清晰度与效率	[ ] 每个视口区块有 1 个明确的主要操作 [ ] 次要操作最多 3 个 [ ] 日期选择器和全局筛选器统一放在页面级 [ ] 不含重复指标卡片或冗余按钮
3. 排版规范	个性与层级	[ ] 字体系列最多 2 种 [ ] 所有指标均启用等宽数字（tabular-nums） [ ] 正文行宽 $\le 75\text{ch}$ [ ] 标签使用句首字母大写格式；不使用字间距过大的全大写文本
4. 间距与几何规范	空间节奏与对齐	[ ] 严格遵循 4px/8pt 网格 [ ] 遵循嵌套圆角公式：$R_{\text{inner}} = R_{\text{outer}} - P$ [ ] 卡片不拥挤；卡片内部边距至少为 16px [ ] 图标与文本组合在视觉上居中
5. 微交互与动效	实体感与响应速度	[ ] UI 过渡灵敏且少于 200ms [ ] 高频操作（每天 100 次以上）使用 0ms 动画 [ ] 存在有触感的 :active { transform: scale(0.97) } 反馈 [ ] 不使用迟缓的 ease-in 曲线
6. 无障碍与键盘操作流程	符合 WCAG 2.1 AA	[ ] 所有交互元素都有清晰可见的焦点环（:focus-visible） [ ] 不在没有替代焦点环的情况下使用 outline: none [ ] 纯图标按钮具有 aria-label [ ] 使用语义化 HTML 标签（<button>、<a>、<nav>、<main>、<header>）
7. 移动端与响应式线性布局	跨设备稳定性	[ ] 在移动端视口上清晰地纵向堆叠 [ ] 不出现横向滚动溢出（overflow-x: hidden / flex 换行） [ ] 移动端触控目标最小为 44x44px [ ] 表格数据改为卡片或整洁的滚动容器

---

8. 改造前后参考

重构氛围编码组件时，请使用此改造蓝图：

界面元素	氛围编码式 AI 糟粕（改造前）	生产级反糟粕设计（改造后）	工程考量
页面分析标题栏	日期筛选器嵌入 4 个独立卡片；有 3 个重复的点击计数器。	页面标题栏中设置一个全局日期范围选择器；使用一个汇总 KPI 横幅。	消除杂乱、同步所有卡片，并避免时间区间各自割裂。
SaaS 侧边栏	通用图标加表情符号，活动链接使用发光的紫色渐变，还有冗余链接。	简洁的 240px 侧边栏，统一使用 1.5px 描边的 Lucide 图标，活动项边框采用低调的 1px 细线。	减轻视觉疲劳，树立专业可信度，并节省垂直空间。
数据对比	巨大的装饰性 3D 地球仪／地图组件，显示区域百分比均为零。	紧凑的水平条形对比列表，包含百分比变化和表格式数字。	提供可执行的业务价值，而非华而不实、占用大量 CPU 的装饰。
操作按钮	bg-indigo-600 hover:bg-indigo-700 transition-all duration-300，没有焦点环，也没有活动状态。	bg-zinc-900 text-white hover:bg-zinc-800 active:scale-[0.97] focus-visible:ring-2，采用灵敏的 140ms ease-out。	提供即时的操作反馈，满足 WCAG 无障碍要求，并带来人工精心打造的质感。
设置与账单	5 个互相重叠的卡片，账单功能藏在杂乱的用户个人资料设置中。	专属账单标签页，提供透明的套餐对比、实时折扣计算和直接付款方式。	高频商业操作必须直观易用，不能藏得太深。
落地页首屏	140px 标题分成 4 行，其中 1 个词采用粗体斜体；有 3 个按钮和视频预加载器。	简洁明了的 44px 标题，聚焦单一核心卖点；1 个主要 CTA、1 个演示链接，并快速完成初始渲染。	最大限度提升 50ms 内的第一印象；避免预加载器拖慢页面而导致用户跳出。

---

9. 最终验证标准

交付代码前，请确认：

“这个界面是否让人觉得出自一位优秀、严谨的设计技术专家之手，并且极其尊重用户的注意力和时间？还是看起来像是 AI 根据提示词生成的？如果任何元素显得像提示词糟粕，请立即将其消除。”