ui-design-aesthetics

UI 设计与美学

为设计和实现美观、高性能的用户界面提供专家指导。此技能通过渐进式披露和动态加载，在确保技术卓越的同时，打造鲜明独特的美学风格。

核心能力

• 美学方向：通过强调独特的字体、色彩和层次感，避免“AI 垃圾风”。
• 性能架构：确保 UI 组件动态加载，以尽量减少初始载荷。
• 渐进式披露：设计仅在需要时才展现复杂内容的界面。
• API 契约验证：确保前端组件与后端数据结构保持一致。

用法

在以下情况下使用此技能：

• 从零开始设计新功能或应用。
• 重构现有 UI，使其更现代、性能更佳。
• 实现复杂的仪表盘或数据密集型界面。

快速参考

主题	参考资料
美学规则（字体、色彩、动效）	skills/ui-design-aesthetics/references/aesthetics.md
渐进式披露与动态加载	skills/ui-design-aesthetics/references/progressive-disclosure.md
API 契约验证	skills/ui-design-aesthetics/references/api-contracts.md

设计工作流

1. 分析并选择美学风格：选择协调统一的主题（瑞士风格、新粗野主义等），避免采用泛泛的默认样式。
2. 针对性能进行架构设计：找出需要延迟加载的重量级组件（React.lazy、动态导入）。
3. 设计交互：规划分步呈现和基于交互的加载。
4. 验证数据：为 API 响应定义 TypeScript 接口或 Zod 模式。
5. 实现：使用工具类（Tailwind）编写代码，并遵循设计系统。

性能要求

• 初始载荷：仅包含关键路径所需的 CSS/JS。
• 动态加载：次要组件必须在交互发生时或组件可见时加载（IntersectionObserver）。
• 延迟：针对耗时超过 100ms 的交互设计乐观 UI 状态。