saas-ui-master

UI/UX Pro Max - SaaS 设计智能

面向 Web 和移动应用的综合设计指南，专为可投入生产的 SaaS 产品优化。包含 50 多种样式、97 套配色方案、57 组字体搭配、99 条 UX 指南，以及涵盖 9 种技术栈的 25 种图表类型。可搜索的数据库提供基于优先级的建议，并严格遵循专业设计标准，避免制作出业余的、“凭感觉编写”的界面。

适用场景

在以下情况中参考这些指南：

• 设计新的 UI 组件、页面或复杂的 SaaS 仪表板
• 选择配色方案（尤其是定义 4 层系统和深色模式）和字体排版
• 检查代码中的 UX、布局或无障碍问题
• 构建需要建立高转化信任度的落地页
• 使用现代色彩空间（OKLCH）实现主题引擎

按优先级划分的规则类别

优先级	类别	影响	领域
1	无障碍	严重	ux
2	触控与交互	严重	ux
3	布局与架构	高	ux、product
4	性能	高	ux
5	字体排版与 4 层配色	中	typography、color
6	动画	中	ux
7	样式选择	中	style、product
8	图表与数据	低	chart

快速参考：SaaS 核心理念

1. 组件架构（高）

• 整合导航： 将管理链接（Settings、Billing、Profile、API Keys、Logout）归入统一的账户弹出菜单，而不是让主侧边栏显得杂乱。
• 精简列表/表格： 将次要行操作（Edit、Delete、Duplicate）收进简洁的省略号（三点）菜单。
• 通过模态框聚焦： 对简单表单使用居中的模态框，并折叠高级选项。切勿使用空白的全高飞出菜单。

2. 4 层配色系统（中）

• 第 1 层（中性色基础）： 切勿将纯白色（#FFFFFF）用作应用背景。使用米白色/浅灰色（bg-slate-50）。交互式卡片表面使用纯白色，使其突出。使用极淡的边框（85% 白色）或细微的投影。
• 第 2 层（功能性色彩）： 生成从 50 到 950 的色阶。主按钮 = 500/600，悬停 = 700，文本链接 = 400/500。
• 第 3 层（语义传达）： 成功 = 绿色，警告 = 黄色/橙色，破坏性操作 = 红色。图表使用 OKLCH 色彩空间，以保持亮度/色度恒定。
• 第 4 层（主题引擎）： 使用 OKLCH 数学计算生成程序化主题：将中性 Hex 转换为 OKLCH，降低亮度 -0.03，增加色度 +0.02，并调整色相值。

3. 深色模式规则（严重）

• 拉大层级差异： 深色容易混在一起。如果浅色模式背景的亮度每次提高 2%，深色模式则必须提高 4% 到 6%。
• 将强调色调亮： 将主品牌色调整至 300 或 400 色阶，用于按钮/激活状态，以确保清晰易读。

---

使用方法

使用下方的 CLI 工具搜索特定领域。

前提条件

检查是否已安装 Python：

python3 --version || python --version

如果未安装 Python，请根据用户的操作系统进行安装：

macOS：

brew install python3

Ubuntu/Debian：

sudo apt update && sudo apt install python3

Windows：

winget install Python.Python.3.12

---

工作流说明

当用户请求 UI/UX 工作（设计、构建、创建、实现、审查、修复、改进）时，请遵循以下工作流：

步骤 1：分析用户需求

从用户请求中提取关键信息：

• 产品类型：SaaS、电商、作品集、仪表板、落地页等
• 样式关键词：极简、活泼、专业、优雅、深色模式等
• 行业：医疗保健、金融科技、游戏、教育等
• 技术栈：React、Vue、Next.js，或默认使用 html-tailwind

步骤 2：生成设计系统（必需）

**始终先使用 --design-system**，获取全面且附有推理依据的建议：

python3 skills/saas-ui-master/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

此命令会：

1. 并行搜索 5 个领域（产品、风格、颜色、落地页、字体排印）
2. 应用 ui-reasoning.csv 中的推理规则，选择最合适的选项
3. 返回完整的设计系统：模式、风格、颜色、字体排印和效果
4. 列出需要避免的反模式

步骤 2b：保存设计系统（主文件 + 覆盖项模式）

若要保存设计系统以便跨会话分层检索，请添加 --persist：

python3 skills/saas-ui-master/scripts/search.py "<query>" --design-system --persist -p "Project Name"

这会创建：

• design-system/MASTER.md — 包含所有设计规则的全局事实来源
• design-system/pages/ — 用于存放特定页面覆盖项的文件夹

添加特定页面的覆盖项：

python3 skills/saas-ui-master/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

分层检索的工作方式：

1. 构建特定页面时（例如“结账”页面），先检查 design-system/pages/checkout.md
2. 如果页面文件存在，其中的规则会覆盖主文件中的规则
3. 如果不存在，则仅使用 design-system/MASTER.md

步骤 3：通过详细搜索补充信息（按需）

获取设计系统后，可使用领域搜索获取更多细节：

python3 skills/saas-ui-master/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

何时使用详细搜索：

需求	领域	示例
更多风格选项	style	--domain style "glassmorphism dark"
图表建议	chart	--domain chart "real-time dashboard"
UX 最佳实践	ux	--domain ux "animation accessibility"
其他字体	typography	--domain typography "elegant luxury"
落地页结构	landing	--domain landing "hero social-proof"

步骤 4：技术栈指南（默认：html-tailwind）

获取针对具体实现的最佳实践。如果用户未指定技术栈，**默认使用 html-tailwind**。

python3 skills/saas-ui-master/scripts/search.py "<keyword>" --stack html-tailwind

可用技术栈：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose

---

搜索参考

可用领域

领域	用途
product	产品类型建议（SaaS、电商、作品集）
style	UI 风格、颜色和效果（玻璃拟态、极简主义）
typography	字体搭配、Google Fonts
color	按产品类型划分的调色板
landing	页面结构、CTA 策略（主视觉、定价、社交证明）
chart	图表类型、库推荐
ux	最佳实践、反模式（动画、无障碍）
prompt	AI 提示词、CSS 关键词

---

输出格式与技巧

--design-system 标志支持两种输出格式：

# ASCII box (default) - best for terminal display
python3 skills/saas-ui-master/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/saas-ui-master/scripts/search.py "fintech crypto" --design-system -f markdown

提升效果的技巧：

1. 描述具体 —“医疗保健 SaaS 仪表盘”优于“应用”
2. 组合多个领域 — 风格 + 字体排印 + 颜色 = 完整设计系统
3. 始终检查 UX — 搜索“animation”“z-index”“accessibility”，排查常见问题

---

专业 UI 的通用规则

以下问题经常被忽略，会让 UI 显得不够专业：

图标与视觉元素

规则	应该做	不应该做
不要使用表情符号图标	使用 SVG 图标（Heroicons、Lucide、Phosphor）	使用 🎨 🚀 ⚙️ 等表情符号作为 UI 图标
保持悬停状态稳定	悬停时使用颜色/不透明度过渡效果	使用会导致布局偏移的缩放变换
使用正确的品牌徽标	从 Simple Icons 查找官方 SVG	猜测徽标路径或使用错误路径
统一图标尺寸	使用固定的 viewBox (24x24) 和 w-6 h-6	随意混用不同尺寸的图标

排版与组件布局

规则	应当	不应
文本层级	使用不同色调建立层级（slate-900、700、500）	仅依赖字重（粗体/常规）
操作整合	将设置/登出操作归入账户弹出框	将管理链接零散地放在侧边栏中
表格操作	将行操作折叠到省略号菜单中	在每一行都显示 3 个或更多图标按钮
表单模态框	为简单的创建流程使用居中模态框	使用几乎空白的全高侧滑栏

交互与光标

规则	应当	不应
指针光标	为所有可点击卡片添加 cursor-pointer	让交互元素保留默认光标
悬停反馈	提供视觉反馈（颜色、阴影）	不提示元素可交互
平滑过渡	使用 transition-colors duration-200	状态瞬间改变或过渡过慢（>500ms）

浅色/深色模式对比度

规则	应当	不应
基础背景	将米白色/slate-50 用作应用背景	将纯 #FFFFFF 用作应用主背景
深色模式间距	将对比度间隔加倍（每步 4-6%）	使用与浅色模式完全相同的亮度间隔
深色模式强调色	将品牌按钮调整至 300/400 色阶	深色模式按钮仍使用相同的深色
边框可见度	使用 border-gray-200 或柔和阴影	使用刺眼、粗重的黑色边框

---

交付前检查清单

交付 UI 代码前，请确认以下各项：

视觉质量与架构

• 不使用表情符号作为图标；使用 SVG 图标集（Heroicons/Lucide）。
• 导航已整合（使用账户弹出框，而非扁平列表）。
• 表格/列表的行操作已收纳在省略号菜单中。
• 不将纯白色（#FFFFFF）用作应用基础背景。
• 边框使用极淡的色调/阴影，而非刺眼的黑线。

交互

• 所有可点击元素都带有 cursor-pointer。
• 悬停状态提供清晰的视觉反馈，且不会导致布局偏移。
• 过渡平滑（150-300ms）。
• 键盘导航时焦点状态清晰可见。

浅色/深色模式

• 浅色模式文本符合 4.5:1 的对比度（主要文本使用 #0F172A）。
• 玻璃/透明元素在浅色模式下清晰可见。
• 深色模式背景的对比度间隔加倍（每步 4-6%）。
• 深色模式强调色调亮（300/400 色阶），以确保清晰易读。
• 交付前测试两种模式。

无障碍与布局

• 浮动元素与边缘保持适当间距（top-4 left-4）。
• 所有图片都带有描述性替代文本。
• 表单输入框都关联了相应标签。
• 颜色不是状态的唯一指示方式。
• 在 375px、768px、1024px、1440px 屏幕宽度下均能自适应，且移动设备上不会出现水平滚动。

署名与归属

此技能中的底层 CLI 搜索引擎、Python 脚本（search.py）和基础数据数组最初由 nextlevelbuilder 创建。此技能在其出色的技术框架基础上，融入了严格的 4 层 SaaS UI/UX 设计理念。