UI/UX 设计系统生成

面向 Vue 2.6 + Element UI 技术栈的 UI/UX 设计指南。包含样式、色彩、字体、UX 规范与图表类型推荐。

项目 UI 规范（必须遵守）

本项目的 UI 规范已在 PROJECT_RULES.md 中定义，开发时首先遵守以下约束：

• 主色：#409EFF，辅助色：#67C23A / #F56C6C / #909399
• 卡片：高度 100px，内边距 12px，圆角 12px
• 操作按钮左对齐，统计卡片内容垂直居中
• 列表需有图标，不同颜色区分类型（颜色不能太多）
• 空值显示"无"，列表不换行
• 表格统一使用 NCC-table

---

如何使用 UI/UX Pro Max 工具

工具脚本位于：.cursor/skills/ui-ux-pro-max/scripts/search.py

Step 1：生成设计系统（推荐始终从这步开始）

python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

示例（适用于本项目的美业 ERP 风格）：

python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "beauty ERP dashboard professional" --design-system -p "绿纤美业ERP"

Step 2（可选）：按领域补充搜索

python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain>

需求	Domain	示例
更多样式选项	style	--domain style "dashboard professional"
图表推荐	chart	--domain chart "trend comparison"
UX 最佳实践	ux	--domain ux "table list form"
字体搭配	typography	--domain typography "professional clean"

Step 3：Vue 技术栈指南

python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack vue

---

持久化设计系统

python3 .cursor/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "绿纤美业ERP"

会生成：

• design-system/MASTER.md — 全局设计规则
• design-system/pages/ — 页面级覆盖

---

交付前 UI 检查清单

• [ ] 操作按钮左对齐
• [ ] 统计卡片内容垂直居中
• [ ] 所有列表数据有图标，颜色区分类型
• [ ] 空值显示"无"，列表不换行
• [ ] 卡片高度 100px，内边距 12px，圆角 12px
• [ ] 色彩使用项目主色方案
• [ ] 弹窗/二级页面/复杂表单已拆为独立 Vue 文件
• [ ] 文件命名 kebab-case