saas-product-ui-system

SaaS 产品 UI 系统

概述

将此技能用作严肃 SaaS 产品工作的默认 UI/UX 与前端设计工作流。它结合了 ui-ux-design-system 更简洁的设计系统语言，以及 saas-ui-ux-designer-with-flex 更强大的工作流、排版、灵活性和页面构成指导。

使用此技能进行

• 设计或重新设计仪表板、设置页面、管理面板、运行时／提供商界面、编辑器、构建器、账单、安全，以及数据密集型列表／详情页面
• 将杂乱的 UI 重构为统一连贯的产品系统
• 在着手样式设计前确定布局层级
• 改进排版、信息密度、间距和响应式行为
• 实现或评审应具备产品级品质且可复用的前端代码
• 为卡片、表格、筛选器、侧边面板、抽屉、对话框和摘要条选择合适的构成方式

不要将此技能用于

• 不涉及 UI 或产品界面影响的纯后端工作
• 纯装饰性概念艺术或海报风格设计
• 对已定义所有设计令牌和组件的设计系统进行严格的像素级复刻
• 平台惯例比 SaaS 网页模式更重要的原生移动端 UI

工作流

1. 确定界面类型：
   • 公开的营销页或信任页面
   • 需登录的产品工作区
   • 管理或运营页面
   • 设置或运行时配置
   • 编辑器、构建器或写作工作区
2. 明确用户目标、当前状态和主要操作。
3. 在布局前确定信息密度：
   • 入门引导、空状态和注重信任的界面采用舒适密度
   • 大多数产品页面采用均衡密度
   • 管理、报告和数据密集型运营视图采用紧凑密度
4. 在设计样式前规划屏幕结构：
   • 上下文行或页面介绍
   • 当前状态摘要
   • 主要工作区
   • 辅助面板或侧边栏
   • 次要详情
5. 有意识地选择布局基元：
   • 使用 flex 布局对齐操作、行、工具栏、筛选器和控件组
   • 使用 grid 布局呈现摘要、卡片集合、分栏区域和多列表单
6. 应用设计系统、排版、组件和页面模式参考。
7. 提供实现方案或评审意见，并涵盖实际状态、响应式行为和清晰的层级。

默认设置

• 优先使用中性色界面
• 采用高端 SaaS 产品风格
• 深色模式优先，同时保证浅色模式体验一致
• 每个区域设置一个明确的主要操作
• 默认采用均衡的信息密度
• 通过排版和间距体现层级
• 语义色仅用于状态、焦点和关键操作
• 在已有应用中工作时，优先遵循现有产品模式，而非另创新样式

参考资料加载顺序

仅加载任务所需的资料。对于广泛的页面设计工作，按以下顺序使用：

1. references/product-ui-principles.md 核心理念、令牌、布局规则、AI 产品模式、状态规则、响应式设计和无障碍访问。
2. references/app-surface-patterns.md 关于设置、管理、运行时、编辑器、表格、外壳行为和密度选择的应用界面指南。
3. references/typography-system.md 排版层级、比例、字重、行高和可读性规则。
4. references/layout-flexibility.md 响应式布局、flex/grid 策略、断点、溢出处理和压力测试规则。
5. references/component-spec.md 关于按钮、输入框、导航、覆盖层、表格和反馈状态的共享组件行为与要求。
6. references/page-blueprints.md 公开页面和内部产品界面的构成模式。
7. references/design-tokens.css 在实现需要现成 CSS 变量基础时使用的具体令牌值。

如果任务需要起始令牌文件，而非仅使用概念性指导，请使用 assets/default-product-tokens.css。

输出约定

除非用户要求更精简的内容，否则请提供：

1. 产品和用户假设
2. 界面类型和密度模式
3. 视觉方向
4. 布局结构
5. 字体排印和设计令牌决策
6. 组件和状态决策
7. 响应式设计和无障碍说明
8. 实现说明或评审发现

如果用户要求编写代码：

• 优先遵循现有技术栈和模式
• 使用语义化令牌和可复用组件
• 编写适用于生产环境且以工作流为导向的标记

如果用户要求评审：

• 首先找出层级、密度、状态和响应式方面的不足
• 优先建议结构性修复，而非装饰性改动

限制

• 在现有应用中工作时，优先采用现有产品模式和设计令牌。
• 不要为了让某个页面显得独特而引入破坏设计系统的装饰样式。
• 保持管理和设置界面以操作为主，避免过度强调展示效果。
• 设置和运行时页面的文案应简短；界面应通过结构自明。
• 在相关场景中，构建真实的空状态、加载状态、错误状态、禁用状态和选中状态。
• 避免喧闹的渐变、散乱的强调色和一次性的视觉处理。