UI

UI 是一项面向界面设计的系统性技能，整合了现代产品设计中的核心视觉原则与交互规范。其核心用法体现为 14 个结构化模块：从视觉层级建立、排版系统（限制 2-3 种字体家族、45-75 字符行宽）、色彩语义化（红/绿/黄对应错误/成功/警告）、间距体系（4px 基准网格）、到组件状态管理（含 focus、disabled、loading 等完整状态），覆盖了从原子级设计决策到整体响应式布局的全流程。

显著优点：一是系统性极强，将碎片化设计经验提炼为可执行的规则清单；二是强调无障碍（8% 男性色盲需测试对比度）、可访问性（4.5:1 对比度标准、44px 触摸目标）与国际化（LTR 左对齐优先）；三是引入 Design Tokens 概念，通过语义化命名（如 color-error）支持主题切换与规模化维护；四是适配现代多态界面需求，包含 Dark Mode 深度设计指南（非简单反色）与 Motion 缓动曲线规范（150-300ms 过渡）。

潜在局限：作为通用规范，未针对特定平台（iOS Material Design）或行业（金融、医疗）提供差异化指引；缺乏具体设计工具（Figma、Sketch）的落地配置示例；动效与响应式章节相对简略，复杂交互场景需补充参考。此外，规范以 "应该/不应该" 的指令形式呈现，对设计新手可能缺少原理阐释，理解 "为什么" 需额外学习。

适合人群：前端开发者（需理解设计约束）、UI/UX 设计师（建立系统思维）、产品经理（评审设计稿依据）、设计系统维护者。尤其适合需快速统一多产品视觉风格的中大型团队。

常规风险：过度遵循可能导致设计同质化、创新性受限；间距与色彩数值需结合实际品牌调性调整，不宜生搬硬套；Dark Mode 实现复杂度常被低估，需预留充足开发资源。

核心用法

该 Skill 为纯 Markdown 文档型知识库，专注于提供系统化、可落地的 UI 设计指导。内容覆盖视觉层级建立、字体排印规范、色彩语义体系、间距系统设计、响应式适配策略、暗黑模式实现、动效设计原则、设计令牌管理等 13 个核心模块。用户可通过自然语言查询快速获取具体场景的设计建议，例如"移动端按钮最小触控尺寸""暗黑模式阴影如何处理"等。

显著优点

1. 体系化知识框架：从原子级设计原则（4px/8px 间距基线）到整体页面架构（视觉焦点、栅格系统）形成完整闭环，避免碎片化学习
2. 量化可执行：提供大量具体数值标准（44px 最小触控区域、45-75 字符行宽、4.5:1 对比度下限），直接指导设计决策
3. 无障碍设计深度覆盖：专辟色彩无障碍（8% 男性色盲用户）、焦点状态、屏幕阅读器等章节，符合 WCAG 2.1 标准
4. 现代工作流适配：包含设计令牌（Design Tokens）章节，直接对接 Figma Tokens、Style Dictionary 等工程化工具
5. 零摩擦使用：无需配置、无依赖、无权限请求，对话中直接引用

潜在局限

1. 无交互式组件：仅为文本指南，不提供代码片段、Figma 插件或可视化对照工具
2. 平台特定细节有限：iOS/Android/Material Design 等平台规范差异需自行补充
3. 动态更新依赖维护：设计趋势演进（如可变字体、容器查询）需版本更新跟进
4. 案例缺失：纯原则描述，无真实产品界面正反案例对比

适合人群

• 前端开发者寻求设计决策参考
• 独立开发者快速搭建一致 UI
• 设计系统维护者制定团队规范
• 产品经理理解设计约束与技术边界

常规风险

该 Skill 无任何可执行代码、外部 API 调用或数据收集行为，六维安全检测满分通过。唯一需注意：未来版本若增加脚本功能或外部服务集成，需重新评估安全等级。