design-anti-patterns

设计反模式（Uncodixfy）

来源：Uncodixfy（访问于 2026-03-17）

编写任何 UI 代码前，先执行 Uncodixfy 元认知检查：列出你默认会采用的 UI 设计决策，然后如果它们符合以下任何禁用模式，就不要采用。构建像 Linear、Raycast、Stripe 或 GitHub 一样的界面——实用、诚恳，不搞视觉噱头。

预检

生成任何 UI 组件前，先执行以下内部检查：

1. 列出你默认会为该组件做出的所有样式决策
2. 将每项与此技能及完整规则参考中的禁用模式逐一比对
3. 将所有匹配项替换为参考中的“常规”标准
4. 确认结果中不包含任何禁用模式

绝对禁止

除非用户明确要求，否则绝不接受以下模式：

• 任何元素的边框半径 > 12px
• 胶囊形按钮或徽章
• 玻璃拟态、磨砂面板、模糊雾效
• 柔和的企业风渐变（背景、按钮、文本）
• 仪表板或内部工具中的 Hero 区块
• 装饰性文案（“清晰运营，告别杂乱”）
• 眉题标签（带字母间距的大写 <small>）
• 默认采用 KPI 卡片网格作为仪表板布局
• 仅用于填充空间的虚假图表
• 悬停时的变换动画（translateX、scale、bounce）
• 戏剧化的盒子阴影（模糊半径 > 8px、彩色阴影）
• 悬浮且分离、带圆角外壳的侧边栏
• <h2> 标题块上方的 <small> 副标题
• 使用 <small> + <strong> 模式的装饰性备注卡片
• UI 元素中的通用创业公司文案
• 百分比含糊不清的环形图
• 多种嵌套面板类型（panel、panel-2、rail-panel）
• 使用 ::before 伪元素彩色圆点的状态指示器
• 没有实际用途的“Live”导航徽章或数量指示器
• 页脚元信息行（“Dashboard v2.1 - dark mode - single-file HTML”）

常规标准

为每个组件采用以下默认值：

组件	标准
侧边栏	固定宽度 240-260px、纯色背景、简单的右边框
按钮	实色填充或简单边框，圆角最多 8-10px
卡片	圆角 8-12px、细微边框、阴影最多为 0 2px 8px rgba(0,0,0,0.1)
字体排印	系统字体或简单的无衬线字体，正文 14-16px，层级清晰
间距	仅使用 4/8/12/16/24/32px 规格
过渡效果	100-200ms 缓动，仅改变不透明度/颜色
容器	最大宽度 1200-1400px，居中，标准内边距
工具栏	标准高度 48-56px，简单的水平布局
输入框	纯色边框、简单的焦点环、标签置于字段上方
模态框	居中叠层、简单背景遮罩、不使用滑入动画

颜色选择

按以下优先级顺序执行：

1. 使用项目现有颜色——在项目文件中搜索现有调色板定义
2. 从预定义调色板中选择——参见规则参考中的颜色调色板
3. 绝不随意拼凑颜色组合，除非用户明确要求

从预定义调色板中选择时，随机挑选——不要默认使用第一个。

快速参考

完整了解 30 多种明确禁止的实现模式、各组件的“常规”标准以及 19 种预定义颜色调色板（10 种深色、9 种浅色），请阅读完整的 Uncodixfy 规则。