design-standards

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Standards

设计标准

Production design standards for any web project. Stack-agnostic. Tool-agnostic. Covers tokens, contrast, hierarchy, spacing, mobile rules, and the pre-ship checklist.

This skill complements

brand-identity

(which defines the visual system) and

brand-style-guide

(which documents it). This skill is for the day-to-day work of applying those standards in real components and pages.

适用于所有Web项目的生产级设计标准。与技术栈无关，与工具无关。涵盖Design Tokens、对比度、层级、间距、移动端规则以及上线前检查清单。

此技能是

brand-identity

（定义视觉系统）和

brand-style-guide

（记录视觉系统）的补充，用于在实际组件和页面中日常应用这些标准。

When to use

使用场景

Building a new page, section, or component
Reviewing UI for quality, accessibility, or consistency
Setting up design tokens for a new project
Fixing layout, contrast, or hierarchy issues
Establishing a button or form standard
Pre-ship design review

构建新页面、区块或组件
审查UI的质量、可访问性或一致性
为新项目设置Design Tokens
修复布局、对比度或层级问题
建立按钮或表单标准
上线前设计审查

When NOT to use

不适用场景

Defining a brand identity from scratch (use
```
brand-identity
```
)
Documenting a finished brand system (use
```
brand-style-guide
```
)
Building a formal component library (use
```
design-system
```
)
Frontend code architecture (use
```
frontend-component-build
```
)
Accessibility-only audits with WCAG remediation (use
```
accessibility-audit
```
)

从头定义品牌标识（使用
```
brand-identity
```
）
记录已完成的品牌系统（使用
```
brand-style-guide
```
）
构建正式组件库（使用
```
design-system
```
）
前端代码架构（使用
```
frontend-component-build
```
）
仅针对WCAG整改的可访问性审计（使用
```
accessibility-audit
```
）

Required inputs

必要输入

The page or component being built or reviewed
The brand's design tokens (colors, type, spacing) - or willingness to define them
The target devices and viewports

If brand tokens are undefined, define a working set first using the template in

references/design-tokens-template.md

正在构建或审查的页面或组件
品牌的Design Tokens（颜色、字体、间距）——或愿意定义这些内容
目标设备和视口

如果未定义品牌Tokens，请先使用

references/design-tokens-template.md

中的模板定义一套可用的Tokens。

The framework: 6 standards

框架：6项标准

Six standards apply to every piece of UI. Hold the line on these and most design problems disappear.

每一处UI都需遵循以下6项标准。严格执行这些标准，大多数设计问题都会迎刃而解。

1. Design tokens

1. Design Tokens

Every project needs tokens defined before any UI gets built. Tokens are the source of truth.

Color tokens (minimum):

Primary brand color
Primary hover (typically 15 to 25 percent darker)
Background variants (surface, alt-section, hero/dark, footer)
Text scale (heading, body, muted, on-dark)
Semantic (success, warning, error, info)

Spacing tokens:

A consistent scale (e.g., 4, 8, 12, 16, 24, 32, 48, 64, 96)
Page max-width
Section vertical padding (large, medium, small)
Card padding
Grid gaps

Type tokens:

Display, H1 through H4, body large, body, small, caption
Each with size, weight, line height, letter spacing
Font fallback stacks

Radius tokens:

Tight (cards, badges)
Standard (buttons, inputs)
Round (avatars, pill buttons)

Document the tokens once. Reference them everywhere. Hardcoded values are technical debt.

任何项目在构建UI前都需要定义Tokens，它们是设计的唯一来源。

颜色Tokens（最低要求）：

主品牌色
主色 hover 态（通常比原色深15%-25%）
背景变体（表层、交替区块、Hero/深色区、页脚）
文本层级（标题、正文、弱化文本、深色背景文本）
语义色（成功、警告、错误、信息）

间距Tokens：

统一的比例（如：4, 8, 12, 16, 24, 32, 48, 64, 96）
页面最大宽度
区块垂直内边距（大、中、小）
卡片内边距
网格间距

字体Tokens：

展示字体、H1至H4、大正文、正文、小文本、说明文本
每种字体对应的字号、字重、行高、字间距
字体降级方案

圆角Tokens：

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

Tokens只需记录一次，所有地方都要引用。硬编码值属于技术债务。

2. WCAG AA contrast (non-negotiable)

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

Contrast is not a preference. It is a baseline. A design that fails AA is broken, regardless of how it looks to designers with full vision.

Element	Required ratio
Normal body text	4.5:1
Large text (18pt regular or 14pt bold)	3:1
UI components and graphical elements	3:1

Common failures to avoid:

Light gray body text on white that calculates to 2 to 4:1
Brand color used for body text without a darker variant
Light borders on form fields that compute under 3:1
Bright orange or yellow on white at small sizes

For the math, the contrast checker, and brand-color strategies, see

brand-identity/references/contrast-and-accessibility.md

对比度不是偏好，而是基线。不符合AA标准的设计就是有缺陷的，无论视力正常的设计师觉得它看起来有多好。

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

需避免的常见问题：

白色背景上的浅灰色正文，对比度仅为2:1至4:1
使用品牌色作为正文颜色但未提供深色变体
表单字段的浅色边框对比度低于3:1
白色背景上的小尺寸亮橙色或亮黄色文本

如需计算方法、对比度检查工具和品牌色策略，请查看

brand-identity/references/contrast-and-accessibility.md

。

3. Visual hierarchy

3. 视觉层级

A well-designed page has a clear scan order. Hierarchy comes from:

Size. The largest element gets noticed first.
Weight. Bold beats regular at the same size.
Color. Saturated beats neutral. High-contrast beats low.
Spacing. What sits alone gets emphasis. What gets crowded recedes.
Position. Top-left and center get weight. Edges and corners recede.

Apply hierarchy intentionally. Every visual element should be reachable through the hierarchy. If three things compete for primary attention, none of them wins.

Common failures:

Multiple elements styled as the "primary" CTA (creates ambiguity)
Body text and headlines too close in size
Hero image fighting the hero text for attention
Icon, headline, and image at similar visual weight

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

尺寸：最大的元素最先被注意到
字重：相同字号下，粗体比常规体更突出
颜色：饱和色比中性色突出，高对比度比低对比度突出
间距：孤立的元素会被强调，拥挤的元素会被弱化
位置：左上角和中心区域更受关注，边缘和角落则会被忽略

要有意识地应用层级。每个视觉元素都应能通过层级被用户感知。如果三个元素都争夺主要注意力，那么它们都不会胜出。

常见问题：

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

4. Spacing and rhythm

4. 间距与韵律

Spacing is what separates a polished layout from a cluttered one.

Rules:

Use the spacing scale, not arbitrary values
Related elements sit closer together than unrelated ones (proximity principle)
Section breathing room: minimum 64px desktop, 48px mobile
Card padding: minimum 24px desktop, 16px mobile
Form field spacing: minimum 16px between fields
Touch targets: minimum 44 by 44 pixels

Common failures:

Inconsistent spacing within similar contexts (one card has 24px padding, the next has 32px)
Cramped sections that bleed into each other
Touch targets under 44 pixels on mobile
Headline butted directly against subheadline with no rhythm

间距是区分精致布局和杂乱布局的关键。

规则：

使用间距比例，而非任意值
相关元素的间距应小于无关元素（邻近原则）
区块留白：桌面端最小64px，移动端最小48px
卡片内边距：桌面端最小24px，移动端最小16px
表单字段间距：字段间最小16px
触摸目标：最小44×44像素

常见问题：

相似场景下的间距不一致（比如一张卡片内边距24px，另一张32px）
区块拥挤，互相重叠
移动端触摸目标小于44像素
标题与副标题直接相连，没有韵律感

5. Mobile rules

5. 移动端规则

Most users are on mobile. Designing for desktop first guarantees mobile failures.

Standards:

Test on a 375 to 390 pixel viewport before declaring complete
All interactive elements minimum 44 by 44 pixels
Sticky bottom bars: page wrapper needs bottom padding equal to bar height
No fixed pixel widths without max-width constraint
Text never smaller than 14 pixels for body content
Tap targets get 8 pixels of spacing minimum on all sides
Modal and popover content scrolls; body locks
Form inputs: at least 16px text size to prevent iOS auto-zoom

Common failures:

Designs that work in browser dev tools but break on real devices
Sticky navigation eating 80px of viewport without compensation
Horizontal scroll appearing because of one over-wide element
Tap targets that are visually fine but impossibly close to other tap targets

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

标准：

在375至390像素视口上测试后再宣告完成
所有交互元素最小44×44像素
底部粘性栏：页面容器需要添加与栏高相等的底部内边距
没有max-width约束时，不要使用固定像素宽度
正文字号不得小于14像素
触摸目标四周最小要有8px的间距
模态框和弹出框内容可滚动，页面主体锁定
表单输入框：字号至少16px，防止iOS自动缩放

常见问题：

在浏览器开发者工具中正常显示，但在真实设备上失效
粘性导航栏占用80px视口高度却没有补偿措施
单个过宽元素导致出现横向滚动
视觉上看起来正常，但触摸目标与其他目标距离过近，难以点击

6. Component consistency

6. 组件一致性

The same thing should look the same everywhere. Variations should be intentional.

Common consistency principles:

Buttons: one primary style, one secondary style, one ghost style. Not five.
Cards: one base card pattern with variants. Not bespoke cards per page.
Icons: one stroke weight, one corner style across the icon set
Avatars and brand marks: one shape rule (rounded-lg or fully round, pick one and stick to it)
Form inputs: one set of input states (default, focus, error, disabled) used everywhere

Common failures:

Three different "primary buttons" used inconsistently across pages
Some cards with rounded-2xl corners, others with rounded-xl
Iconography style drifting between sections
Brand avatar that switches between square and round depending on the page

相同的元素在任何地方都应保持一致。变体必须是有意设计的。

常见一致性原则：

按钮：一种主样式、一种次样式、一种幽灵样式，而非五种
卡片：一种基础卡片样式加变体，而非每个页面都定制卡片
图标：整个图标集使用统一的描边粗细和圆角样式
头像和品牌标识：统一形状规则（比如rounded-lg或全圆形，选一种并保持一致）
表单输入框：一套输入状态（默认、聚焦、错误、禁用）通用所有场景

常见问题：

三个不同的“主按钮”在页面间不一致使用
部分卡片使用rounded-2xl圆角，其他使用rounded-xl
不同区块的图标风格不一致
品牌头像在不同页面切换为方形和圆形

Workflow

工作流程

Confirm tokens. If tokens are not yet defined, define a working set first. Document them.
Sketch hierarchy. Before writing markup, identify the primary action, secondary actions, and supporting content. Confirm the scan order makes sense.
Build mobile-first. Lay out for the smallest target viewport before scaling up.
Apply tokens. All values come from the token set. No hardcoded colors, sizes, or spacing.
Run contrast checks. Every text-on-background combination passes AA. Every UI element passes 3:1.
Test at viewport breakpoints. 375, 768, 1024, 1440 minimum. Confirm nothing breaks.
Run the pre-ship checklist in
```
references/preship-checklist.md
```
.

确认Tokens：如果尚未定义Tokens，先定义一套可用的Tokens并记录下来。
梳理层级：编写标记语言前，确定主要操作、次要操作和辅助内容，确认浏览顺序合理。
移动端优先构建：先针对最小目标视口布局，再向上适配。
应用Tokens：所有值都来自Token集合，禁止硬编码颜色、尺寸或间距。
运行对比度检查：所有文本与背景的组合都需通过AA标准，所有UI元素都需达到3:1对比度。
在视口断点测试：至少测试375、768、1024、1440像素的视口，确保没有问题。
运行上线前检查清单：参考
```
references/preship-checklist.md
```
。

Failure patterns

常见问题模式

Designing without tokens. Hardcoded colors and spacing. Hard to maintain. Inconsistent at scale.
Skipping contrast checks. Especially on brand colors used for text. Most brand colors fail AA.
Designing only for desktop. Mobile reveals every layout sin. Test mobile first or last, but always.
Rounded-everything. Treating "modern" as "rounded all the things." Rounded corners are a tool, not a default.
Visual hierarchy mush. Three things competing as primary. Reader does not know where to look.
Touch target violations. Visually nice 32px buttons that fail finger ergonomics on real devices.
Component drift. Each page rebuilds the card or button from scratch. Design system erodes.

无Tokens设计：硬编码颜色和间距，难以维护，规模化后会出现不一致。
跳过对比度检查：尤其是使用品牌色作为文本颜色时，大多数品牌色都无法通过AA标准。
仅针对桌面端设计：移动端会暴露所有布局问题。无论先测还是后测，移动端测试必不可少。
过度圆角：把“现代”等同于“所有元素都圆角”。圆角是工具，不是默认选项。
视觉层级混乱：三个元素争夺主要注意力，用户不知道该看哪里。
触摸目标违规：视觉上美观的32px按钮，在真实设备上不符合手指操作 ergonomics。
组件漂移：每个页面都从头重构卡片或按钮，设计系统逐渐失效。

Output format

输出格式

This skill produces design decisions and review notes more than artifacts. Outputs include:

Design tokens file (when starting a project):
```
design-tokens.md
```
or equivalent
Component or page review: markdown notes scored against the 6 standards, with specific fixes
Pre-ship checklist results: pass/fail across the checklist with notes

When generating component code (HTML, CSS, framework-specific markup), the SKILL.md remains stack-agnostic. Stack-specific patterns live in reference files.

此技能主要产出设计决策和审查笔记，而非制品。输出包括：

Design Tokens文件（项目启动时）：
```
design-tokens.md
```
或同类文件
组件或页面审查：按照6项标准评分的Markdown笔记，包含具体修复方案
上线前检查清单结果：清单各项的通过/失败状态及备注

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

Reference files

参考文件

```
references/design-tokens-template.md
```
- Template for setting up tokens for any project.
```
references/preship-checklist.md
```
- Final design review checklist before shipping.
```
references/tailwind-patterns.md
```
- Optional. Tailwind-specific component patterns (hero, cards, buttons, data rows) for projects on that stack.

```
references/design-tokens-template.md
```
- 适用于所有项目的Tokens设置模板。
```
references/preship-checklist.md
```
- 上线前最终设计审查清单。
```
references/tailwind-patterns.md
```
- 可选。针对使用Tailwind技术栈的项目，提供特定的组件模式（Hero、卡片、按钮、数据行）。