design-standards

设计标准

适用于任何 Web 项目的生产级设计标准。不依赖技术栈或工具。涵盖设计令牌、对比度、层级、间距、移动端规则和上线前检查清单。

此技能补充 brand-identity（定义视觉系统）和 brand-style-guide（记录视觉系统）。此技能适用于日常工作，帮助你在实际组件和页面中应用这些标准。

---

适用场景

• 构建新页面、版块或组件
• 检查 UI 的质量、无障碍性或一致性
• 为新项目设置设计令牌
• 修复布局、对比度或层级问题
• 建立按钮或表单标准
• 上线前设计审查

不适用场景

• 从头定义品牌形象（使用 brand-identity）
• 记录已完成的品牌系统（使用 brand-style-guide）
• 构建正式的组件库（使用 design-system）
• 前端代码架构（使用 frontend-component-build）
• 仅针对无障碍性进行 WCAG 修复审计（使用 accessibility-audit）

---

所需输入

• 要构建或审查的页面或组件
• 品牌的设计令牌（颜色、字体、间距），或愿意定义这些令牌
• 目标设备和视口

如果尚未定义品牌令牌，请先使用 references/design-tokens-template.md 中的模板定义一套可用的令牌。

---

框架：6 项标准

六项标准适用于每个 UI。坚持这些标准，大多数设计问题都会迎刃而解。

1. 设计令牌

任何 UI 开始构建之前，都需要先为项目定义令牌。令牌是唯一可信来源。

颜色令牌（最低要求）：

• 品牌主色
• 主色悬停态（通常加深 15% 到 25%）
• 背景变体（表面、替代版块、主视觉/深色、页脚）
• 文本色阶（标题、正文、弱化文本、深色背景上的文本）
• 语义色（成功、警告、错误、信息）

间距令牌：

• 一致的间距阶梯（例如 4、8、12、16、24、32、48、64、96）
• 页面最大宽度
• 版块垂直内边距（大、中、小）
• 卡片内边距
• 网格间距

字体令牌：

• 展示文本、H1 到 H4、大号正文、正文、小号文本、说明文字
• 为每种样式定义字号、字重、行高和字间距
• 字体回退列表

圆角令牌：

• 紧凑（卡片、徽章）
• 标准（按钮、输入框）
• 圆形（头像、胶囊按钮）

将令牌记录一次，并在所有地方引用。硬编码值会积累技术债务。

2. WCAG AA 对比度（不可妥协）

对比度不是个人偏好，而是基本要求。未达到 AA 标准的设计就是有问题，无论视力正常的设计师觉得它看起来如何。

元素	要求的对比度
普通正文文本	4.5:1
大号文本（18pt 常规字重或 14pt 粗体）	3:1
UI 组件和图形元素	3:1

应避免的常见问题：

• 白色背景上的浅灰正文文本，对比度仅为 2 到 4:1
• 正文文本使用品牌色，却没有更深的变体
• 表单字段的浅色边框对比度低于 3:1
• 小字号文本在白色背景上使用亮橙色或黄色

有关计算方法、对比度检查工具和品牌色策略，请参阅 brand-identity/references/contrast-and-accessibility.md。

3. 视觉层级

设计良好的页面有清晰的浏览顺序。层级来自：

• 大小。 最大的元素最先吸引注意。
• 字重。 相同字号下，粗体比常规字重更醒目。
• 颜色。 高饱和度比中性色更醒目。高对比度比低对比度更醒目。
• 间距。 独立放置的元素更突出。拥挤的元素会弱化。
• 位置。 左上方和中心位置更醒目。边缘和角落则相对弱化。

有意识地运用层级。每个视觉元素都应在层级体系中找到合适位置。如果有三项内容都在争夺主要注意力，就没有一项能脱颖而出。

常见问题：

• 多个元素都被设计为“主要”CTA（造成歧义）
• 正文文本和标题字号太接近
• 主视觉图片与主视觉文本争夺注意力
• 图标、标题和图片的视觉权重相近

4. 间距与节奏

间距决定了布局是精致还是杂乱。

规则：

• 使用间距刻度，不要随意取值
• 相关元素之间的距离应小于无关元素之间的距离（邻近原则）
• 区块间留白：桌面端至少 64px，移动端至少 48px
• 卡片内边距：桌面端至少 24px，移动端至少 16px
• 表单字段间距：字段之间至少 16px
• 触控目标：至少 44 × 44 像素

常见问题：

• 相似场景中的间距不一致（一张卡片内边距为 24px，下一张却是 32px）
• 区块过于拥挤，彼此混在一起
• 移动端的触控目标小于 44px
• 标题与副标题直接贴在一起，毫无节奏感

5. 移动端规则

大多数用户使用移动设备。先为桌面端设计，必然会导致移动端问题。

标准：

• 宣告完成前，先在 375 至 390 像素的视口中测试
• 所有交互元素至少为 44 × 44 像素
• 粘性底栏：页面容器需要设置与底栏高度相等的底部内边距
• 固定像素宽度必须设置最大宽度限制
• 正文文本字号不得小于 14 像素
• 点击目标四周至少留出 8 像素间距
• 模态框和弹出层内容可滚动；锁定页面主体
• 表单输入框：字号至少为 16px，以防止 iOS 自动缩放

常见问题：

• 在浏览器开发工具中正常、在真实设备上却出错的设计
• 粘性导航占去 80px 视口高度，却没有做相应处理
• 单个元素过宽，导致出现水平滚动
• 点击目标看起来没问题，但与其他点击目标贴得太近，难以点击

6. 组件一致性

相同的内容在各处都应有相同的外观。只有有意为之时才应有所不同。

常见的一致性原则：

• 按钮：一种主要样式、一种次要样式、一种幽灵样式，不要五种
• 卡片：一种基础卡片模式及其变体，不要每个页面都单独设计卡片
• 图标：整套图标使用统一的描边粗细和圆角样式
• 头像和品牌标记：统一形状规则（圆角-lg 或全圆，选一种并保持一致）
• 表单输入框：所有位置都使用同一组输入状态（默认、聚焦、错误、禁用）

常见问题：

• 页面中不一致地使用了三种不同的“主要按钮”
• 有些卡片使用 rounded-2xl 圆角，另一些则使用 rounded-xl
• 各区块的图标风格不一致
• 品牌头像在不同页面上有时是方形，有时是圆形

---

工作流

1. 确认令牌。 如果尚未定义令牌，请先定义一组可用令牌并记录下来。
2. 勾勒层级。 编写标记之前，先确定主要操作、次要操作和辅助内容。确认浏览顺序合理。
3. 移动端优先构建。 先针对最小目标视口进行布局，再逐步扩展。
4. 应用令牌。 所有值均来自令牌集。不要硬编码颜色、尺寸或间距。
5. 运行对比度检查。 所有文本与背景的组合均须通过 AA 检查。所有 UI 元素均须达到 3:1。
6. 在视口断点进行测试。 至少测试 375、768、1024、1440。确认没有问题。
7. 运行发布前检查清单，见 references/preship-checklist.md。

---

常见失败模式

• 不使用令牌进行设计。 颜色和间距硬编码，难以维护，规模扩大后会变得不一致。
• 跳过对比度检查。 尤其是用作文本颜色的品牌色。大多数品牌色都无法通过 AA 检查。
• 只针对桌面端设计。 移动端会暴露布局中的所有问题。可以先测或最后测移动端，但一定要测。
• 所有元素都做圆角。 把“现代”理解成“所有东西都加圆角”。圆角是工具，不是默认设置。
• 视觉层级混乱。 三个元素都在争当主角，读者不知道该看哪里。
• 违反触控目标规范。 32px 按钮看起来不错，却不符合真实设备上的手指操作需求。
• 组件风格漂移。 每个页面都从头重建卡片或按钮，设计系统逐渐瓦解。

---

输出格式

此技能的产出以设计决策和评审说明为主，而非实际构件。输出包括：

• 设计令牌文件（项目启动时）：design-tokens.md 或同等文件
• 组件或页面评审：Markdown 说明，依据 6 项标准评分，并提供具体修复建议
• 发布前检查清单结果：逐项标注通过/未通过，并附说明

生成组件代码（HTML、CSS、特定框架的标记）时，SKILL.md 保持与技术栈无关。特定技术栈的模式存放在参考文件中。

---

参考文件

• references/design-tokens-template.md - 用于为任意项目设置令牌的模板。
• references/preship-checklist.md - 发布前的最终设计评审清单。
• references/tailwind-patterns.md - 可选。适用于采用该技术栈的项目的 Tailwind 专属组件模式（主视觉区、卡片、按钮、数据行）。