typeui-fundamentals

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Fundamentals — Agent Instructions

设计基础 — Agent 指令

Universal design principles that define why patterns work, how to apply them correctly, and what accessibility requirements are non-negotiable. These are timeless, design-system-agnostic foundations that apply to every surface regardless of vertical or workflow phase.

定义为何设计模式有效、如何正确应用它们，以及哪些无障碍要求是不可协商的通用设计原则。这些是永恒的、与设计系统无关的基础，适用于所有界面场景，无论垂直领域或工作流阶段。

Load order

加载顺序

Read these files after loading the design system (

SKILL.md

DESIGN.md

+ token modules). The design system tells you what token to use; these files explain why that decision is correct and how to avoid common principle violations.

在加载设计系统（

SKILL.md

DESIGN.md

+ 令牌模块）之后阅读这些文件。设计系统会告诉你要使用哪些令牌；这些文件解释为何该决策是正确的，以及如何避免常见的原则违规。

Module index

模块索引

File	Purpose
ui-principles.md	Universal visual design principles — hierarchy, layout rhythm, typography placement, color theory, depth & layering, interaction design, responsive adaptation, component behavior
ux-principles.md	Interaction & control principles — 30 UX laws, button/control state contracts (9 states), hover/active technique palettes, touch targets, cognitive load, feedback loops
typography-principles.md	Typography-specific principles — type system foundations, scale & modular ratios, readability & measure, accessibility, responsive type, brand tone expression through type
accessibility.md	WCAG 2.1/2.2 compliance — contrast ratios, color-as-information rules, focus visibility, keyboard navigation, motion safety, target sizes, text spacing, semantic structure, ARIA

文件	用途
ui-principles.md	通用视觉设计原则 — 层级、布局节奏、排版布局、色彩理论、深度与分层、交互设计、响应式适配、组件行为
ux-principles.md	交互与控件原则 — 30条UX法则、按钮/控件状态约定（9种状态）、悬停/激活技巧库、触摸目标、认知负荷、反馈循环
typography-principles.md	特定排版原则 — 字体系统基础、比例与模块化比率、可读性与行宽、无障碍、响应式字体、通过字体传递品牌调性
accessibility.md	WCAG 2.1/2.2合规性 — 对比度、颜色作为信息的规则、焦点可见性、键盘导航、运动安全、目标尺寸、文本间距、语义结构、ARIA

What these files are NOT

这些文件不包含的内容

These files do not define:

Workflow phases (think → build → check → ship) — see
```
skills/vertical/SKILL.md
```

Quality gates or audits — see

skills/vertical/inspect.md

review.md

preflight.md

Anti-pattern catalogs — see
```
skills/vertical/anti-patterns.md
```
Industry-specific content — see
```
skills/vertical/team-social-saas.md
```
Design tokens or component specs — see
```
skills/design-system/SKILL.md
```

这些文件不定义：

工作流阶段（思考 → 构建 → 检查 → 交付）—— 参见
```
skills/vertical/SKILL.md
```

质量关卡或审核 —— 参见

skills/vertical/inspect.md

review.md

preflight.md

反模式目录 —— 参见
```
skills/vertical/anti-patterns.md
```
行业特定内容 —— 参见
```
skills/vertical/team-social-saas.md
```
设计令牌或组件规范 —— 参见
```
skills/design-system/SKILL.md
```

Conflict resolution

冲突解决

When sources disagree:

Design system wins for concrete values (colors, sizes, spacing tokens, component specs).
Fundamentals (this layer) win for structural principles (hierarchy, accessibility, motion logic).
Vertical wins for process decisions AND content architecture (section order, required sections, industry tone).

Accessibility is non-negotiable at every level — it overrides aesthetic preferences everywhere.

当来源内容不一致时：

设计系统在具体值（颜色、尺寸、间距令牌、组件规范）上优先。
基础原则（此层）在结构原则（层级、无障碍、动效逻辑）上优先。
垂直领域规则在流程决策和内容架构（章节顺序、必填章节、行业调性）上优先。

无障碍在每个层级都是不可协商的——它在任何情况下都优先于美学偏好。

When the design system is silent, these principles decide

当设计系统未覆盖时，这些原则将作为决策依据

Any design decision not covered by the system's tokens or component rules falls back to the principles here. Never contradict the design system — if a principle and a design-system rule conflict, the design system wins. Flag the conflict for review.

任何未被系统令牌或组件规则覆盖的设计决策都将遵循此处的原则。切勿与设计系统相悖——如果某一原则与设计系统规则冲突，以设计系统为准。标记该冲突以便审核。