UI设计系统

要解决的问题

在开发具有专业外观和一致用户体验的产品时，团队常面临挑战。设计系统的建立需要耗费大量时间，且难以保证达到主流互联网大厂或 Pinterest 级别的审美标准。具体问题包括：

• 风格割裂：设计师与开发者对“高级感”、“简约”的理解不一，导致最终产物视觉杂乱或过时。
• 缺乏系统：组件、色彩、间距使用随意，无法形成统一的设计语言，增加维护成本。
• 标准模糊：虽参考 Material Design 或 Apple HIG，但落地时对细节（如阴影、圆角、微交互）的把握不到位。

技能如何工作

本技能提供一套结构化的 UI 生成与审计协议，旨在将高标准的设计哲学转化为可执行的代码与规范。其核心能力与关键步骤如下：

核心能力：

• 设计系统输出：生成完整的 CSS 变量 体系，确保色彩、间距、字体的一致性。
• 协议化工作流：从分析到交付，有明确步骤，减少主观偏差。
• 规范参考集成：内化 Google Material 3、Apple HIG 等权威指南的精髓。

关键工作步骤：

1. 需求分析与 DNA 定义：首先明确产品定位、品牌调性与主色倾向，这是所有设计决策的起点。
2. 建立 Token 系统：生成 Tonal Palette 等色彩体系，确定排版层级与间距网格（如 8pt 系统），为所有组件提供基础。
3. 组件化实现：按照协议构建 按钮、卡片、输入框 等核心组件，确保每个组件包含完整的交互状态（Default, Hover, Active, Focus, Disabled, Loading）。
4. 注入动效与质感：应用基于 Apple Spring 或 Material Motion 曲线的微交互（如 scale(0.97) 压感），并通过精准的阴影和渐变提升层次感。
5. 审查与优化：针对已有 UI，可进行 六维度审计（视觉层级、色彩对比度、排版质量、间距对齐、组件一致性、现代感），并提供优化方案。

适用边界与注意点

• 依赖输入质量：技能的效果直接取决于 需求分析 阶段提供的信息（如品牌调性、目标用户）。信息缺失时，会进行合理假设，但可能偏离预期。
• 设计范式偏好：其生成结果强遵循“克制的奢华”与“系统性思维”，偏好 Pinterest/Dribbble 式的视觉风格。对于需要极繁主义、完全非常规或实验性 UI 的场景，可能不适用。
• 非自动创意工具：本技能是设计规范的执行者和优化器，而非从零开始进行概念创新的工具。它更擅长“如何做得专业且一致”，而非“做什么全新的东西”。
• 输出形式：主要输出 HTML/CSS、React/JSX 等代码。对于纯设计稿（如 Figma 文件），其指导价值高于直接产出。