anti-purple-ui

抗紫色 UI

此技能严格遵循仅使用单色加一种强调色的配色原则。它旨在消除默认的 AI/SaaS 美学：紫色渐变、蓝紫色辉光、青绿色到靛蓝色的渐变、带色调的磨砂玻璃，以及伪装成“极简”的多色调配色方案。

---

规则

全局使用灰度色。仅用一种强调色。例外为零。

整个 UI 由中性灰度色阶构成。刻意选择并谨慎使用一种强调色，提供所有对比和强调效果。其他颜色一律为黑色、白色或灰色。

---

配色系统

灰度色阶（CSS 变量——始终定义这些变量）

:root {
  --color-bg:        #0a0a0a;  /* near-black background */
  --color-surface:   #141414;  /* card / panel surface */
  --color-border:    #2a2a2a;  /* subtle dividers */
  --color-muted:     #555555;  /* disabled, placeholder */
  --color-secondary: #888888;  /* secondary text */
  --color-primary:   #e0e0e0;  /* primary text */
  --color-white:     #f5f5f5;  /* headings, high-emphasis */

  /* For light-mode variants, invert the scale: */
  /* --color-bg: #f5f5f5; --color-white: #0a0a0a; etc. */
}

强调色

定义一种强调色。根据情境和预期氛围进行选择。不要随意挑选——选择应当显得经过深思熟虑。

:root {
  --color-accent: /* ONE color only */;
  --color-accent-dim: /* same hue, lower saturation/lightness for hover states */;
}

适合不同氛围的强调色：

氛围 / 情境	强调色
粗犷 / 工业风	#ff3300（纯红）
技术 / 终端风	#00ff41（荧光绿）
金融 / 严肃	#f0b429（琥珀金）
编辑 / 印刷风	#e8113a（墨红）
冷峻 / 临床风	#00bfff（冰蓝）
奢华 / 极简	#c9a84c（暖金）
警告 / 紧急	#ff6b00（信号橙）
科学	#7fff00（黄绿色）

禁止使用的强调色（这些就是 AI 美学）：

• ❌ 紫色（#7c3aed、#6366f1、#8b5cf6，以及任何紫罗兰色）
• ❌ 蓝紫色、靛蓝色、薰衣草色
• ❌ 青绿色到靛蓝色的渐变
• ❌“品牌蓝”（#3b82f6、#2563eb）
• ❌ 任何粉彩色
• ❌ 多种强调色（“再加一种次要强调色”——不行）

---

使用规则

强调色仅用于突出重点

强调色可用于：

• 最重要的单个交互元素（主要 CTA 按钮）
• 活动 / 选中状态指示器
• 一个需要突出显示的关键数据点或指标
• 聚焦状态下的输入框边框
• 进度 / 加载指示器

强调色不可用于：

• 背景（小型徽章或胶囊标签除外）
• 大面积表层
• 装饰元素
• 超过可见 UI 总面积的约 10%

禁止渐变。就是这样。

/* ❌ Never */
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(to right, var(--color-accent), purple);

/* ✅ Always */
background: var(--color-surface);
border-left: 3px solid var(--color-accent); /* accent as line, not fill */

禁止使用彩色阴影或辉光

/* ❌ Never */
box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
text-shadow: 0 0 10px #7c3aed;

/* ✅ If shadows, always neutral */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

禁止使用带色调的磨砂玻璃

/* ❌ Never */
background: rgba(99, 102, 241, 0.1);
backdrop-filter: blur(12px);

/* ✅ If glass effect, neutral only */
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px);
border: 1px solid var(--color-border);

---

对比度与无障碍性

使用单色系统时，对比度必须来自明度，而非色相。请确保：

• 正文文本（--color-primary）与 --color-bg 的对比度达到 WCAG AA 标准
• 深色背景上的强调色达到 WCAG AA 标准（文本为 4.5:1，UI 组件为 3:1）
• 不要仅依赖颜色来传达状态——同时使用图标、标签或字重变化

---

组件模式

按钮

/* Primary — the ONE place accent lives prominently */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);  /* or --color-white depending on accent lightness */
  border: none;
}

/* Secondary — monochrome only */
.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}
.btn-secondary:hover {
  border-color: var(--color-primary);
}

卡片 / 表层

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* Optional: accent left-border for featured/highlighted card */
}
.card--featured {
  border-left: 3px solid var(--color-accent);
}

数据 / 统计

/* Accent only on the ONE metric that matters most */
.stat-value--primary { color: var(--color-accent); }
.stat-value--secondary { color: var(--color-white); }
.stat-label { color: var(--color-secondary); }

---

浅色模式变体

反转色阶，并保持相同的强调色原则：

:root[data-theme="light"] {
  --color-bg:        #f8f8f8;
  --color-surface:   #ffffff;
  --color-border:    #e0e0e0;
  --color-muted:     #b0b0b0;
  --color-secondary: #666666;
  --color-primary:   #1a1a1a;
  --color-white:     #0a0a0a;
  /* --color-accent stays the same */
}

---

交付前检查清单

交付使用此技能构建的任何 UI 前，请确认：

• 全部界面中没有紫色、紫罗兰色、靛蓝色或青绿色到紫色的渐变
• 定义并使用的强调色恰好只有一种
• 强调色覆盖的视觉面积不超过总面积的 10%
• 没有彩色阴影或辉光
• 没有多段渐变（表层使用低不透明度的单色调色彩除外）
• 所有交互状态都通过明度 / 字重变化表达，而非使用新颜色
• 背景和表层颜色仅使用中性灰色 / 黑色 / 白色
• 如使用磨砂玻璃，不带任何色调

---

与 frontend-design 技能配合使用

此技能覆盖 frontend-design 的配色部分。frontend-design 中的其他内容（排版、布局、动效、空间构成）仍然适用。两者同时启用时：

1. 阅读 frontend-design 以了解整体创意方向
2. 在此基础上，将此技能的配色系统作为严格约束
3. 强调色应与所选美学风格相符（例如，粗犷主义布局适合搭配纯红；编辑风格布局适合搭配墨红或琥珀色）