no-slop-ui

No Slop UI

你正在为人类用户构建 UI。目标是实用、诚实、简洁，而非令人惊艳或戏剧化。平常就好。

如果某个设计决定感觉像是 AI 图省事的默认选择，那它很可能就是。选择更费心、更简洁的方案。

编写任何 UI 代码前，请阅读 references/banned-patterns.md，了解完整的禁用清单。 需要选择颜色时，请阅读 references/colour-palettes.md。

激活范围

仅当用户明确要求 UI 设计、前端实现、视觉润色、设计评审，或当前任务的主要交付物是可见界面时，才使用此技能。后端专属任务、文案撰写、图表、基础设施或常规代码评审均不应启用此技能。

将此技能视为视觉质量层。它不得凌驾于产品需求、无障碍、安全性、本地化、数据准确性或代码库现有的设计系统之上。如果这些要求与反浮夸规则冲突，应优先满足用户要求，并说明取舍。

标准

以 Linear、Raycast、Stripe、GitHub 为参考。它们不会刻意吸引注意力，只是让产品好用。

平常的界面是这样的：

• 侧边栏：固定宽度 240–260px，纯色背景，右侧 1px 边框。不要悬浮外壳，不要圆角外框。
• 卡片：圆角最多 8–12px，边框细微且为 1px，阴影最多 0 2px 8px rgba(0,0,0,0.08)。不要辉光，不要悬浮效果。
• 按钮：纯色填充或简单边框，圆角最多 6–10px。不要药丸形，不要渐变。
• 字体排版：层级清晰，正文 14–16px，使用系统字体或单一无衬线字体。不要混用衬线和无衬线字体。
• 间距：采用 4/8/12/16/24/32px 尺度。保持一致，不要随意留空。
• 边框：1px 实线，颜色细微。不要使用粗重的装饰性边框或渐变边框。
• 过渡效果：100–200ms 缓动。仅改变不透明度或颜色。不要弹跳，不要变形。
• 输入框：实线边框，简单的焦点环。标签置于字段上方。
• 图标：16–20px，单色或颜色柔和，不要装饰性背景。

颜色优先级

1. 优先使用项目现有颜色——阅读 Tailwind 配置或 CSS 变量。
2. 如果没有现成调色板——从 references/colour-palettes.md 中选择。
3. 切勿随意拼凑颜色组合。

特定技术栈说明

shadcn/ui + Tailwind：

• 按原样使用 shadcn 组件——不要重复实现已有功能
• 遵循现有 CSS 变量系统（--background、--foreground、--primary 等）
• 除非有明确的产品理由，否则不要覆盖组件默认值

纯 HTML 仪表板：

• 可以使用单文件——保持内容自包含
• 使用 CSS 自定义属性设置主题
• 除非绝对必要，否则不要依赖外部 CDN

硬性规则

• 不要使用悬浮式玻璃拟态面板
• 不要使用装饰性渐变背景
• 不要使用过大的圆角（到处都是 20px 及以上）
• 不要在标题上方使用眉题标签（<small>SECTION LABEL</small>）
• 内部仪表板中不要使用主视觉区
• 不要使用装饰性文案（“清晰运营，告别杂乱”）
• 不要默认使用指标卡片网格布局作为仪表板
• 不要使用纯粹为了填充空间而制作的虚假图表
• 悬停时不要使用变形动画
• 不要使用 Segoe UI、Trebuchet MS、Arial 字体栈
• 不要通过 ::before 伪元素添加状态圆点
• 除非导航徽标承载真实数据，否则不要添加
• 不要到处使用药丸形按钮
• 不要使用夸张的盒阴影（模糊半径 24px 及以上）
• 不要混用对齐方式（部分左对齐，部分悬浮居中）

完整禁用清单及示例：references/banned-patterns.md