# 设计技巧 **版本：** 1.0 **来源：**设计标准 > 不可协商的设计和用户界面标准。这些不是偏好，而是要求。 ** ** ## 范围和边界 **此技能涵盖：** * 设计系统理念和原则 * 设计代币的使用和执行 * 语义 HTML 模式（元素选择） * CSS 格式和质量规则 * 组件状态（悬停、焦点、活动、禁用） * 布局理念（网格 vs Flexbox 选择） * 响应式设计原理及断点 * 高级 UI 哲学和反模式 **尊重其他技能：** *“网络可访问性”：深度 WCAG 合规性、屏幕阅读器模式、ARIA 使用、键盘导航 * `web-css`：CSS 架构、文件组织、命名约定 (BEM)、暗模式实现 **在以下情况下使用此技能：** 您需要设计原则、令牌实施或语义 HTML 指导。 **在以下情况下使用网络辅助功能：** 您需要 WCAG 合规性、屏幕阅读器支持或焦点管理。 **在以下情况下使用 web-css：** 您需要 CSS 组织、可变架构或响应式实现细节。 ** ** ## 核心原则 1. **用户第一** — 优先考虑用户需求、工作流程和易用性 2. **细致的工艺**——每一个UI元素的精准和打磨 3. **速度和性能** - 快速加载时间，快速交互 4. **简单明了** — 干净的界面，明确的标签 5. **专注&效率**——帮助用户快速实现目标 6. **一致性** — 统一的设计语言 7. **辅助功能 (WCAG AA)** — 面向所有用户的包容性设计 8. **固执己见的默认设置**——深思熟虑的默认设置可以减少决策疲劳 ** ** ## 设计系统（单一事实来源） ### 关键规则 1. **始终使用设计标记** — 切勿使用硬编码值 2. **所有值均来自`styles/global.css`** — CSS 变量的单一真实来源 3. **没有魔法数字** - 每种颜色、间距、大小都使用 CSS 变量 ### 示例 /* ✅ 正确 - 使用设计令牌 */ .按钮{ 填充： var(--space-sm) var(--space-md); 字体大小：var(--font-size-body); 背景：var(--color-primary); 边界半径：var(--radius-sm); 盒子阴影：var（--shadow-sm）； } /* ❌ 错误 - 硬编码值 */ .按钮{ 内边距：8 像素 16 像素； /* 使用 var(--space-sm) var(--space-md) */ 字体大小：14px； /* 使用 var(--font-size-body) */ 背景：#3B82F6； /* 使用 var(--color-primary) */ 边框半径：4px； /* 使用 var(--radius-sm) */ } ### 设计系统包含什么 * 完整的调色板（中性色、语义色、深色模式） * 完整的版式比例（字体、大小、粗细、行高） * 间距系统（4px 基础） * 边界半径 * 阴影 * Z索引层 * 动画持续时间和缓动 * 图标大小 * 断点值 ** ** ## 语义 HTML ### 所需练习 1. 使用语义标签：`

`、`

设计

包含技能