ui-ux-design-system

UI UX 设计系统

概述

使用此技能，以沉稳、高级、系统优先的方式设计或评审产品 UI。它适用于应用 UI 和真实工作流界面，而非装饰性概念艺术。

工作流

1. 明确页面用途、用户目标和唯一的主要操作。
2. 先选择页面结构，再设置样式：
   • 顶栏或上下文行
   • 简介或摘要
   • 主要工作区域
   • 辅助面板
   • 次要详情
3. 应用 references/design-system-skills.md 中的设计规则。
4. 使用可复用组件、语义化令牌、响应式布局和真实状态进行实现。
5. 最后检查页面：
   • 层级一目了然
   • 点缀元素克制
   • 卡片风格统一
   • 包含空状态、加载状态和错误状态
   • 移动端布局仍可正常使用

默认设置

• 以中性色表面为主
• 高级 SaaS 产品风格
• 优先支持深色模式，并与浅色模式保持一致
• 一个明确的主要操作
• 优先使用可复用组件，避免一次性 div 堆砌
• 仅使用语义化颜色表示状态

使用此技能的场景

• 设计内部产品页面、仪表板、构建器、设置页面、编辑器、表格、模态框和抽屉
• 评审 UI 层级、间距、令牌、状态和响应式布局
• 将嘈杂或不一致的 UI 重构为统一的系统
• 决定何时使用卡片、标签页、标签、提醒、表格和侧边面板

参考资料

需要完整系统说明时，请阅读 references/design-system-skills.md：

• 设计理念
• 令牌
• 间距、圆角、阴影、排版
• 桌面端、平板端和移动端布局规则
• 组件规则
• AI 产品模式
• 无障碍和响应式设计

限制

• 在现有代码库中工作时，优先遵循已有的产品模式。
• 不要为了让某个页面显得“特别”而引入破坏系统一致性的装饰性样式。
• 除非有明确要求，否则避免使用色彩过多或杂乱的仪表板。
• 输出应可用于生产环境，而非概念艺术。