用途:Anti-Purple UI 是一个前端设计约束技能,用于消除常见的 AI/SaaS 视觉风格,包括紫色渐变、蓝紫光晕、青到靛的过渡、带色磨砂玻璃以及伪装成“极简”的多色配色。它强制界面采用严格的黑白灰单色加单一强调色的配色纪律。
主要能力:定义一套中性灰阶 CSS 变量(背景、表面、边框、弱化、次要、主要、白色),并要求只定义一个强调色及其暗色变体。强调色仅用于最重要的交互元素(主 CTA 按钮)、激活/选中状态、一个关键数据点、聚焦输入边框和进度指示器;不得用于大面积背景、装饰元素或超过约 10% 的可见 UI 面积。禁止渐变、彩色阴影或光晕、带色磨砂玻璃。提供按钮、卡片、数据统计等组件模式,以及浅色模式变体(反转灰阶、保持同一强调色)。强调对比度与可访问性:正文需满足 WCAG AA,强调色在深色背景上需满足 WCAG AA(文本 4.5:1,UI 组件 3:1),且不能仅靠颜色传达状态。
使用方式:在构建 UI 时应用该技能,按资料中的 CSS 变量与组件模式编写样式;交付前按清单检查:无紫色/紫罗兰/靛色或青到紫渐变、恰好一个强调色、强调色覆盖面积不超过 10%、无彩色阴影或光晕、无多段渐变、交互状态通过明度/字重变化表达、背景与表面仅用中性灰黑白、磨砂玻璃无色调。该技能会覆盖 frontend-design 技能的颜色部分,其余排版、布局、动效、空间构成仍适用;强调色应匹配所选美学基调。
适用场景:需要去除“AI 味”配色、追求工业、终端、金融、编辑、冷峻、奢华、警示或科学等特定氛围的前端界面设计。
限制:资料未提供安装命令、平台支持、收费或价格信息;具体实现需依赖 CSS 变量与样式代码,且强调色选择需人工根据语境决定。