Back to Details

ui-design-aesthetics

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Design & Aesthetics

UI设计与美学

Expert guidance for designing and implementing beautiful, high-performance user interfaces. This skill enforces distinctive aesthetics while ensuring technical excellence through progressive disclosure and dynamic loading.
提供设计和实现美观、高性能用户界面的专业指导。该Skill在通过渐进式信息披露和动态加载保障技术卓越性的同时，坚持打造独特的美学风格。

Core Capabilities

核心能力

  • Aesthetic Direction: avoiding "AI slop" by enforcing distinctive typography, color, and depth.
  • Performance Architecture: ensuring UI components load dynamically to minimize initial payload.
  • Progressive Disclosure: designing interfaces that reveal complexity only when needed.
  • API Contract Validation: ensuring frontend components align with backend data structures.
  • 美学方向：通过规范独特的排版、色彩与层次感，避免“AI通用化设计（AI slop）”。
  • 性能架构：确保UI组件动态加载，以最小化初始加载资源体积。
  • 渐进式信息披露：设计仅在需要时才展示复杂内容的界面。
  • API契约验证：确保前端组件与后端数据结构保持一致。

Usage

使用场景

Use this skill when:
  • Designing a new feature or application from scratch.
  • Refactoring an existing UI to be more modern and performant.
  • Implementing complex dashboards or data-heavy interfaces.
在以下场景中使用该Skill：
  • 从零开始设计新功能或应用。
  • 重构现有UI以使其更现代化、性能更优。
  • 实现复杂仪表盘或数据密集型界面。

Quick Reference

快速参考

TopicReference
Aesthetic Rules (Typography, Color, Motion)
skills/ui-design-aesthetics/references/aesthetics.md
Progressive Disclosure & Dynamic Loading
skills/ui-design-aesthetics/references/progressive-disclosure.md
API Contract Validation
skills/ui-design-aesthetics/references/api-contracts.md
主题参考文档
美学规则（排版、色彩、动效）
skills/ui-design-aesthetics/references/aesthetics.md
渐进式信息披露与动态加载
skills/ui-design-aesthetics/references/progressive-disclosure.md
API契约验证
skills/ui-design-aesthetics/references/api-contracts.md

Design Workflow

设计工作流

  1. Analyze & Select Aesthetic: Choose a cohesive theme (Swiss, Neo-Brutalism, etc.) and reject generic defaults.
  2. Architect for Performance: Identify heavy components for lazy loading (
    React.lazy
    , dynamic imports).
  3. Design Interaction: Plan staggered reveals and interaction-based loading.
  4. Validate Data: Define TypeScript interfaces or Zod schemas for API responses.
  5. Implement: Write the code using utility classes (Tailwind) and enforcing the design system.
  1. 分析与选择美学风格：选择统一的主题（如瑞士风格、新粗野主义等），摒弃通用默认样式。
  2. 性能架构设计：识别需要懒加载的重型组件（使用
    React.lazy
    、动态导入）。
  3. 交互设计：规划分步展示和基于交互的加载逻辑。
  4. 数据验证：为API响应定义TypeScript接口或Zod模式。
  5. 实现开发：使用工具类（Tailwind）编写代码并严格遵循设计系统。

Performance Requirements

性能要求

  • Initial Payload: Critical path CSS/JS only.
  • Dynamic Loading: Secondary components MUST load on interaction or visibility (IntersectionObserver).
  • Latency: Design optimistic UI states for interactions > 100ms.
  • 初始加载资源：仅包含关键路径的CSS/JS。
  • 动态加载：次要组件必须在交互触发或进入可视区域时加载（使用IntersectionObserver）。
  • 延迟处理：针对响应时间超过100ms的交互，设计乐观UI状态。