ui-design

name	ui-design
description	UI/UX 设计技能——当需要创建界面、设计组件、搭建前端页面、或评估现有界面质量时使用。结合设计方法论和工程规范，避免 AI 模板化设计，确保界面有灵魂且规范。

UI 设计技能

概述

你是设计总监。你的任务是让 AI 生成的界面跳脱"一眼 AI"的模板感，同时确保工程规范不丢——对比度到位、间距合理、组件可复用。

本技能融合了两个理念：

• 设计灵魂（来自 Anthropic frontend-design）——让界面有独特性、有记忆点
• 工程铁规（来自社区 ux-ui-agent-skills）——让界面规范、无障碍、可维护

何时使用

• 创建新页面或组件的 UI
• 改造现有界面的视觉风格
• 用户提到"好看一点"、"换个风格"、"设计感"、"UX"
• 用户给了参考图或设计稿要求复刻
• 前端代码审查时发现硬编码颜色、无规则间距

设计原则

1. 扎根于产品

设计必须从产品本身的语境出发。不要套模板——从产品的功能、用户、场景中找到设计线索。

自问：

• 这个产品的灵魂是什么？（效率工具？创意工具？社交产品？）
• 用户打开它时的情绪是什么？
• 有什么独特的视觉隐喻可以使用？

2. 字体即性格

有意识地配对展示字体（display）和正文字体（body）。字体选择本身就是设计决策——一个不常见的字体配对能让界面瞬间有记忆点。

规则：

• Display 字体（标题、Hero 区域）：允许个性强烈
• Body 字体（正文、表单）：必须清晰易读
• 中文界面优先考虑中文字体：思源黑体、阿里巴巴普惠体、站酷系列等
• 不要同时使用超过 2 个字体家族

3. 结构编码信息

每个结构装置（编号、分隔线、标签、区块）都必须编码真实的内容信息，而不是纯装饰。

❌ 错误：加一条分割线因为"这里需要视觉分隔"
✅ 正确：分割线标记了"以上是用户输入，以下是 AI 响应"

4. 运动有目的

动效不是花哨——每一个动画都必须有叙事目的。一个精心编排的时刻胜过 10 个零散效果。

✅ 有目的的动效：
- 列表项依次滑入 → 暗示顺序和层级
- 按钮 hover 微缩放 → 提供触觉反馈暗示
- 页面切换方向 → 暗示信息架构

---

AI 模板化设计识别（铁规）

以下三种风格是 AI 最容易陷入的模板化设计，必须主动回避：

模板 1：暖奶油背景 + Serif + 陶土色

识别特征：
- background: #FFFBF0 或类似暖奶油色
- font-family: Georgia / Playfair Display
- accent: #D4A574 / #C67B5C（陶土色系）
- 大量圆角、柔和阴影

模板 2：近黑背景 + 酸绿色

识别特征：
- background: #0A0A0A / #111111
- accent: #00FF41 / #39FF14（酸绿色）
- font: 等宽字体（JetBrains Mono / Fira Code）
- 终端/黑客风格

模板 3：报纸多栏布局

识别特征：
- 三栏或两栏 grid 布局
- 大量留白、极简
- 大号衬线标题
- 黑白灰配色

规则：设计审查时必须自我检查——如果你发现自己落入了以上任何一种，推倒重来。

---

设计令牌系统

在开始写代码前，必须先定义设计令牌（Design Tokens）。这些是设计的"变量"，确保全局一致性。

令牌定义模板

:root {
  /* === 色彩 === */
  /* 主色（品牌色，1个） */
  --color-primary: #XXXXXX;
  --color-primary-hover: #XXXXXX;
  --color-primary-active: #XXXXXX;

  /* 中性色（灰色系统，6-8个梯度） */
  --color-gray-50:  #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-400: #A3A3A3;
  --color-gray-600: #525252;
  --color-gray-800: #262626;
  --color-gray-900: #171717;

  /* 语义色 */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error:   #DC2626;
  --color-info:    #2563EB;

  /* === 字体 === */
  --font-display: '字体名', sans-serif;
  --font-body:    '字体名', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* === 字号（基于 16px 基准） === */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  /* === 间距（基于 4px 网格） === */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* === 圆角 === */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* === 阴影 === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
}

令牌生效规则

1. 禁止硬编码颜色值——所有颜色必须引用 CSS 变量
2. 禁止随意间距——所有 margin/padding 必须使用 --space-* 变量
3. 禁止裸露字号——font-size 必须使用 --text-* 变量

---

无障碍检查清单

每个界面完成后必须自查以下项：

• 颜色对比度：正文文字 vs 背景 ≥ 4.5:1，大号文字 ≥ 3:1
  • 检查命令：确认前景/背景色对满足 WCAG AA 标准
• 非颜色信息传递：错误/成功状态不只靠颜色区分（加图标或文字）
• 焦点可见：所有可交互元素有可见的 focus 状态
• 触控友好：可点击区域 ≥ 44×44px（WCAG 2.5.5）
• 键盘可达：所有功能可仅通过键盘操作
• 语义 HTML：使用正确的 HTML 标签（button 而非 div onclick）

---

工作流

配合 brainstorming 使用

用户需求
    │
    ▼
brainstorming（需求分析）
    │  → 理解产品灵魂、用户场景、设计约束
    │  → 输出设计规格
    ▼
ui-design（设计阶段）  ← 本技能
    │  1. 根据产品灵魂确定设计方向
    │  2. 定义设计令牌（颜色、字体、间距）
    │  3. 避开 AI 模板化陷阱
    │  4. 展示 2-3 个设计方向，让用户选择
    │  5. 获得确认后输出完整令牌文件 + 组件代码
    ▼
writing-plans（实现计划）
    │  → 拆解为可执行的开发任务
    ▼
执行开发 + 无障碍自检

独立使用

当用户直接说"帮我设计一个登录页"或"这个页面太丑了改一下"时：

1. 理解上下文——看现有代码、产品定位
2. 定义设计方向——确定风格关键词（如：极简专业 / 活泼年轻 / 高端商务）
3. 输出设计令牌——把颜色和字体体系写清楚
4. 展示关键界面——给用户看效果
5. 输出代码——带完整令牌文件

---

中文界面设计特别注意

中文字体选择

场景	推荐字体	说明
正文字体	思源黑体 / 阿里巴巴普惠体 / PingFang SC	清晰、现代
标题展示	站酷高端黑 / 思源宋体 / 得意黑	有个性
代码/数据	等宽字体保留英文	中文等宽无优势

中英混排规则

• 中文与英文之间加半角空格：使用 React 开发 而非 使用React开发
• 中文与数字之间加半角空格：共 128 条记录
• 中文行高设为 1.6-1.8（英文通常 1.4-1.5）
• 最小正文字号 14px（中文笔画密度高，过小不可读）

---

质量自检

设计完成后的自我审查：

独特性检查

• 这个设计有什么是只有这个产品才有的？
• 如果用另一个产品的名字替换，用户能不能发现？
• 是否落入了"AI 三大模板"中的某一个？

工程规范检查

• 所有颜色是否都使用了令牌变量？（用 grep 搜 # 确认）
• 所有间距是否使用了 --space-* 变量？
• 字号是否使用了 --text-* 变量？
• 主要文字与背景的对对比度是否 ≥ 4.5:1？
• 可点击元素是否 ≥ 44×44px？

体验检查

• 用户 3 秒内能理解这个页面的主要功能吗？
• 最重要的操作是否在最容易点到的地方？
• 错误状态和空状态都考虑了吗？

---

常见 AI 设计错误速查

问题	症状	修复
硬编码颜色	color: #333333	改为 color: var(--color-gray-800)
随意间距	margin-top: 23px	改为 margin-top: var(--space-6)
无 focus 样式	button 没有 :focus	加 outline: 2px solid var(--color-primary)
颜色唯一区分	错误状态只有红色文字	加 ⚠️ 图标 + 错误描述文字
行高过紧	line-height: 1.2 中文	改为 line-height: 1.7
模板化配色	一眼看出来是 AI 生成的	回顾"三大模板"清单，重新选色
字号跳跃	12px → 24px → 48px，无中间档	按 --text-* 系统选，相邻不超过 2 档
忽略空状态	只有有数据时的界面	同时设计 loading / empty / error 三种状态

---

与其他技能的配合

阶段	使用的技能	作用
需求分析	brainstorming	理解产品灵魂、用户场景
界面设计	ui-design（本技能）	设计令牌 + 组件代码
实现计划	writing-plans	拆解为开发任务
执行开发	executing-plans	按计划逐步实现
设计审查	chinese-code-review	审查 CSS/组件代码质量