Menú
UI/UX 设计技能——当需要创建界面、设计组件、搭建前端页面、或评估现有界面质量时使用。结合设计方法论和工程规范，避免 AI 模板化设计，确保界面有灵魂且规范。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| name | ui-design |
| description | UI/UX 设计技能——当需要创建界面、设计组件、搭建前端页面、或评估现有界面质量时使用。结合设计方法论和工程规范，避免 AI 模板化设计，确保界面有灵魂且规范。 |
你是设计总监。你的任务是让 AI 生成的界面跳脱"一眼 AI"的模板感，同时确保工程规范不丢——对比度到位、间距合理、组件可复用。
本技能融合了两个理念：
设计必须从产品本身的语境出发。不要套模板——从产品的功能、用户、场景中找到设计线索。
自问：
有意识地配对展示字体（display）和正文字体（body）。字体选择本身就是设计决策——一个不常见的字体配对能让界面瞬间有记忆点。
规则：
每个结构装置（编号、分隔线、标签、区块）都必须编码真实的内容信息，而不是纯装饰。
❌ 错误：加一条分割线因为"这里需要视觉分隔"
✅ 正确：分割线标记了"以上是用户输入，以下是 AI 响应"
动效不是花哨——每一个动画都必须有叙事目的。一个精心编排的时刻胜过 10 个零散效果。
✅ 有目的的动效：
- 列表项依次滑入 → 暗示顺序和层级
- 按钮 hover 微缩放 → 提供触觉反馈暗示
- 页面切换方向 → 暗示信息架构
以下三种风格是 AI 最容易陷入的模板化设计，必须主动回避：
识别特征：
- background: #FFFBF0 或类似暖奶油色
- font-family: Georgia / Playfair Display
- accent: #D4A574 / #C67B5C（陶土色系）
- 大量圆角、柔和阴影
识别特征：
- background: #0A0A0A / #111111
- accent: #00FF41 / #39FF14（酸绿色）
- font: 等宽字体（JetBrains Mono / Fira Code）
- 终端/黑客风格
识别特征：
- 三栏或两栏 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);
}
--space-* 变量--text-* 变量每个界面完成后必须自查以下项：
用户需求
│
▼
brainstorming（需求分析）
│ → 理解产品灵魂、用户场景、设计约束
│ → 输出设计规格
▼
ui-design（设计阶段） ← 本技能
│ 1. 根据产品灵魂确定设计方向
│ 2. 定义设计令牌（颜色、字体、间距）
│ 3. 避开 AI 模板化陷阱
│ 4. 展示 2-3 个设计方向，让用户选择
│ 5. 获得确认后输出完整令牌文件 + 组件代码
▼
writing-plans（实现计划）
│ → 拆解为可执行的开发任务
▼
执行开发 + 无障碍自检
当用户直接说"帮我设计一个登录页"或"这个页面太丑了改一下"时：
| 场景 | 推荐字体 | 说明 |
|---|---|---|
| 正文字体 | 思源黑体 / 阿里巴巴普惠体 / PingFang SC | 清晰、现代 |
| 标题展示 | 站酷高端黑 / 思源宋体 / 得意黑 | 有个性 |
| 代码/数据 | 等宽字体保留英文 | 中文等宽无优势 |
使用 React 开发 而非 使用React开发共 128 条记录设计完成后的自我审查：
# 确认）--space-* 变量？--text-* 变量？| 问题 | 症状 | 修复 |
|---|---|---|
| 硬编码颜色 | 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/组件代码质量 |
工作流执行引擎 Subagent — 独立上下文执行任务1~12
agents-workflow — 自动检测 task 可用性，支持所有平台
agents-workflow 安装器——用户提供仓库地址即可自动完成全部安装配置
架构评审技能——当需要审查系统架构设计、评估技术债务、检查架构腐化风险、或做多视角架构评审时使用。结合专家模拟和规则检测，输出可量化的架构健康报告。
使用百度智能云 Unlimited-OCR 进行文档解析 — 一次性长视野文档解析，支持图片、PDF、表格、手写体。 当用户需要从图片或 PDF 中提取文字、解析表格、识别文档内容时使用。 也适用于：发票识别、身份证识别、营业执照识别、试卷分析等场景。
领域建模技能——当需要从需求中提取领域模型、定义实体和边界、建立通用语言时使用。在架构设计之前执行领域建模。