UI平面设计稿全专家

要解决什么问题

产品界面往往从零散按钮、间距和色值起步，设计稿与前端实现各说各话，评审时缺少统一检查项。本技能把 UI/平面设计 从「单页好看」拉到 可复用的设计语言：团队能按同一套 Token、组件状态和页面骨架协作，减少返工。

技能如何工作

技能以 设计系统四层金字塔 组织输出：

1. 基础设计语言：品牌色、字体层级表（H1～Caption）、圆角与阴影档位、8pt 栅格间距。
2. 组件库：五类按钮（Primary/Secondary/Text/Ghost/Danger）及完整交互状态；原子化、可组合、可覆盖原则；高频组件清单（表格、弹窗、表单控件、空/加载/错误态等）。
3. 页面模板：列表、详情、表单、Dashboard、设置页的结构与关键要素。
4. 协作规范：命名、分阶段 设计评审清单（交互/视觉/多端）、Design to Dev 交付要点。

此外会引用 WCAG 2.1 AA 对比度、触摸目标、44×44px 焦点与键盘可达性，以及 Figma 工作流与排版五原则（亲密性、对齐、重复、对比、留白），并附质量检查清单（Token 格式、图标风格统一等）。

适用边界

• 侧重 B 端/中后台式 系统化规范，不替代具体品牌视觉创意或动效设计稿。
• 文中部分章节（如色彩系统细节、命名规范全文）在 SKILL 里为提纲占位，需结合你方现有设计资产补全。
• 无障碍与多端条目是 最低标准清单，落地仍需按真实设备与业务场景实测。