uiux-pro-max

name	UI/UX 设计指南 (Pro Max 增强版)
description	根据PRD生成专业级界面结构和视觉方向。集成 ui-ux-pro-max 设计系统，提供 67 种样式、96 种调色板、57 种字体组合和 100 条行业推理规则。

思维框架

在动手设计之前，先明确以下四个方面：

• 目的 (Purpose)：界面需要解决什么问题？主要的用户场景和任务是什么？
• 基调 (Tone)：选择一种鲜明而极端的审美方向，例如极简主义、复古未来、布鲁塔利斯主义等，用以支撑品牌个性和情感诉求。
• 差异化 (Differentiation)：界面应该如何脱颖而出？考虑独特的布局、配色或互动形式，避免随大流的千篇一律。
• 信息架构 (Information Architecture)：将 PRD 中的功能映射为页面结构和导航流程，保证用户在完成任务时路径清晰。

---

设计系统生成工作流 (ui-ux-pro-max)

Step 1: 分析用户需求

从 PRD 和用户请求中提取关键信息:

• 产品类型: SaaS, 电商, 作品集, 仪表盘, 落地页等
• 风格关键词: minimal, playful, professional, elegant, dark mode 等
• 行业领域: 医疗, 金融科技, 游戏, 教育, 美容/SPA 等
• 技术栈: React, Vue, Next.js, 或默认 html-tailwind

Step 2: 生成设计系统 (必需)

通过 ui-ux-pro-max 已安装的 Claude 插件获取完整的设计系统推荐：

推荐方式：使用 ui-ux-pro-max Skill 工具

该工具会：

1. 并行搜索 5 个领域（产品、样式、颜色、落地页、字体）
2. 应用 ui-reasoning.csv 中的推理规则选择最佳匹配
3. 返回完整设计系统：模式、样式、颜色、字体、效果
4. 包含需要避免的反模式

获取的设计系统内容：

• 67 种 UI 样式库（极简、玻璃态、黏土态等）
• 96 种调色板
• 57 种字体组合
• 100 条行业推理规则
• UX 最佳实践指南

补充搜索： 如需更多选项，使用 Skill 工具中的领域搜索功能：

• style - 更多样式选项
• color - 调色板推荐
• typography - 字体组合
• landing - 落地页模式
• chart - 图表推荐
• ux - UX 最佳实践

Step 3: 按需补充详细搜索

获取设计系统后，使用 Skill 工具中的领域搜索功能获取更多细节：

需求	领域	用途
更多样式选项	style	获取 67 种样式中更符合需求的变体
图表推荐	chart	仪表盘、数据展示相关推荐
UX 最佳实践	ux	动画、可访问性、交互指南
替代字体	typography	57 种字体组合中的替代方案
落地页结构	landing	落地页布局和结构参考

Step 4: 获取技术栈指南

通过 Skill 工具获取特定技术栈的设计实现指南：

可用技术栈：

• html-tailwind - HTML + Tailwind CSS
• react - React 组件库
• nextjs - Next.js 框架
• vue - Vue 框架
• svelte - Svelte 框架
• swiftui - iOS/macOS
• react-native - React Native
• flutter - Flutter
• shadcn - shadcn/ui 组件库
• jetpack-compose - Android Compose

---

可用样式库 (67 种)

通用样式 (推荐)

#	样式	最佳用途	关键特征
1	Minimalism 极简主义	企业应用、仪表盘、文档	大量留白、sans-serif、高对比度
2	Neumorphism 新拟态	健康/冥想应用	柔和阴影、浅色调、圆角 12-16px
3	Glassmorphism 玻璃态	现代 SaaS、金融仪表盘	磨砂玻璃、backdrop-blur、半透明
4	Brutalism 布鲁塔利斯主义	设计作品集、艺术项目	粗犷字体、不对称、高对比度
5	Claymorphism 黏土态	教育应用、儿童应用	柔和 3D、圆润、友好
6	Neubrutalism 新布鲁塔利斯主义	Z 世代品牌、Figma 风格	粗边框、明亮色块、趣味性
7	Bento Box Grid 便当盒网格	仪表盘、产品页、作品集	不等分网格、卡片布局
8	Dark Mode (OLED) 深色模式	夜间应用、代码平台	纯黑背景、霓虹强调色
9	Soft UI Evolution 柔和 UI	现代企业应用、SaaS	柔和阴影、平滑过渡
10	AI-Native UI AI 原生	AI 产品、聊天机器人	渐变、动态元素、未来感

落地页样式

#	样式	最佳用途
1	Hero-Centric	有强视觉标识的产品
2	Conversion-Optimized	获客、销售页
3	Feature-Rich Showcase	SaaS、复杂产品
4	Social Proof-Focused	服务、B2C 产品
5	Trust & Authority	B2B、企业、咨询

仪表盘样式

#	样式	最佳用途
1	Data-Dense Dashboard	复杂数据分析
2	Executive Dashboard	C-suite 摘要
3	Real-Time Monitoring	运维、DevOps
4	Financial Dashboard	财务、会计
5	Sales Intelligence	销售团队、CRM

---

行业推理规则 (100 条)

设计系统会根据产品类型自动应用行业特定规则:

类别	示例产品	推荐样式	颜色基调
Tech & SaaS	SaaS, B2B, 开发者工具	Glassmorphism + Flat	信任蓝 + 强调对比
Finance	金融科技, 银行, 加密	Minimalism + Professional	深蓝/绿 + 金色强调
Healthcare	医疗诊所, 药房, 心理健康	Accessible + Ethical	平静蓝/绿 + 白色
E-commerce	通用电商, 奢侈品, 订阅盒	Feature-Rich + Conversion	品牌色 + 高对比 CTA
Beauty/Spa	美容院, 水疗, 健康	Soft UI + Organic	柔粉/鼠尾草绿 + 金色
Creative	作品集, 代理商, 摄影	Brutalism + Motion	大胆对比 + 动态
Gaming	游戏, 娱乐	Cyberpunk + Retro-Futurism	霓虹 + 深色背景

---

设计系统指南

颜色体系设计

主色 (Primary Color)

• 用于主要操作按钮、重要信息、品牌标识
• 选择标准: 符合品牌调性、对比度 >= 4.5:1 (WCAG AA)
• 数量: 1-2 个

辅助色 (Secondary Color)

• 用于次要信息、辅助操作
• 选择标准: 与主色形成和谐或对比
• 数量: 1 个

中性色 (Neutral Colors)

• 用于文本、背景、边框
• 必须包含: 至少 5 个灰度层级
• 示例: #FFFFFF (背景), #F8FAFC (surface), #E2E8F0 (border), #64748B (次要文本), #1E293B (主要文本)

语义色 (Semantic Colors)

• Success: 绿色系 (如 #10b981)
• Warning: 黄/橙色系 (如 #f59e0b)
• Error: 红色系 (如 #ef4444)
• Info: 蓝色系 (如 #3b82f6)

排版系统

字体选择 (避免 Inter、Roboto):

风格	标题字体	正文字体	适用场景
优雅	Cormorant Garamond	Montserrat	奢侈品、美容、编辑
专业	DM Sans	DM Sans	SaaS、企业、B2B
现代	Space Grotesk	Inter	科技、创业公司
友好	Outfit	Source Sans Pro	教育、消费品
大胆	Bebas Neue	Work Sans	游戏、娱乐

字号比例 (基于 16px):

xs: 12px | sm: 14px | base: 16px | lg: 18px | xl: 20px | 2xl: 24px | 3xl: 30px

行高:

• 正文: 1.5 (24px for 16px text)
• 标题: 1.2
• 按钮文字: 1.0

间距系统

使用 8px 基准网格:

xs: 4px | sm: 8px | md: 16px | lg: 24px | xl: 32px | 2xl: 48px | 3xl: 64px

组件规范

Button (按钮)

• 高度: 至少 44px (移动端触控区域)
• 内边距: 水平 16-24px, 垂直 12px
• 圆角: 4-12px
• 必须: hover 状态、cursor-pointer、过渡动画 150-300ms

Input (输入框)

• 高度: 至少 48px
• 必须包含: label, placeholder, error message
• 状态: normal, focus, error, disabled

Card (卡片)

• 内边距: 16px
• 圆角: 8-16px
• 亮色模式: bg-white/80 或更高不透明度
• 必须: cursor-pointer (如可点击)、hover 状态

---

专业 UI 通用规则

图标和视觉元素

规则	正确做法	错误做法
禁止 emoji 图标	使用 SVG 图标 (Heroicons, Lucide)	使用 emoji 作为 UI 图标
稳定 hover 状态	使用颜色/透明度过渡	使用 scale 变换导致布局偏移
品牌 Logo	从 Simple Icons 获取官方 SVG	猜测或使用错误路径
统一图标尺寸	固定 viewBox (24x24) + w-6 h-6	随意混用不同尺寸

交互和光标

规则	正确做法	错误做法
Cursor pointer	所有可点击元素添加 cursor-pointer	保留默认光标
Hover 反馈	提供视觉反馈 (颜色、阴影、边框)	无交互指示
平滑过渡	transition-colors duration-200	瞬间变化或过慢 (>500ms)

亮/暗模式对比度

规则	正确做法	错误做法
玻璃卡片亮色模式	bg-white/80 或更高	bg-white/10 (太透明)
文本对比度 (亮色)	#0F172A (slate-900)	#94A3B8 (slate-400)
边框可见性	亮色用 border-gray-200	border-white/10 (不可见)

布局和间距

规则	正确做法	错误做法
浮动导航栏	top-4 left-4 right-4 留边距	贴边 top-0 left-0 right-0
内容填充	考虑固定导航栏高度	内容被固定元素遮挡
响应式断点	375px, 768px, 1024px, 1440px	仅考虑一种尺寸

---

交付前检查清单

视觉质量

• 未使用 emoji 作为图标 (使用 SVG)
• 所有图标来自统一图标库 (Heroicons/Lucide)
• 品牌 Logo 正确 (Simple Icons 验证)
• Hover 状态不导致布局偏移
• 直接使用主题颜色 (bg-primary) 而非 var() 包装

交互

• 所有可点击元素有 cursor-pointer
• Hover 状态提供清晰视觉反馈
• 过渡平滑 (150-300ms)
• 键盘导航的焦点状态可见

亮/暗模式

• 亮色模式文本对比度足够 (4.5:1 最小)
• 玻璃/透明元素在亮色模式可见
• 边框在两种模式下可见
• 交付前测试两种模式

布局

• 浮动元素与边缘有适当间距
• 无内容被固定导航栏遮挡
• 在 375px, 768px, 1024px, 1440px 响应式正确
• 移动端无水平滚动

可访问性

• 所有图片有 alt 文本
• 表单输入有 labels
• 颜色不是唯一指示器
• 尊重 prefers-reduced-motion

---

UI Schema 输出格式

生成的 ui.schema.yaml 必须包含以下结构:

design_system:
  style: "Glassmorphism"          # 选择的样式
  colors:
    primary: "#2563eb"
    secondary: "#64748b"
    success: "#10b981"
    warning: "#f59e0b"
    error: "#ef4444"
    background: "#ffffff"
    surface: "#f8fafc"
    border: "#e2e8f0"
    text:
      primary: "#1e293b"
      secondary: "#64748b"
      inverse: "#ffffff"

  typography:
    font_family:
      headings: "DM Sans"
      body: "DM Sans"
    font_size:
      xs: 12
      sm: 14
      base: 16
      lg: 18
      xl: 20
      2xl: 24
      3xl: 30
    line_height:
      body: 1.5
      heading: 1.2

  spacing:
    unit: 8
    scale:
      xs: 4
      sm: 8
      md: 16
      lg: 24
      xl: 32
      2xl: 48

  border_radius:
    sm: 4
    md: 8
    lg: 12
    full: 9999

  effects:
    hover_transition: "200ms"
    shadow: "subtle"
    blur: "backdrop-blur-md"

pages:
  - id: home
    title: "首页"
    type: list
    description: "展示所有项目列表"
    components:
      - type: header
        content: "我的应用"
      - type: list
        source: "api/items"
        item_layout:
          - type: text
            field: "title"
            style: "heading"
          - type: text
            field: "description"
            style: "body"
        actions:
          - type: "navigate"
            target: "detail"
            params: ["id"]

  - id: detail
    title: "详情"
    type: detail
    params:
      - name: "id"
        type: "number"

  - id: create
    title: "创建"
    type: form
    fields:
      - name: "title"
        type: "text"
        label: "标题"
        required: true
    submit:
      action: "post"
      endpoint: "/api/items"
      on_success: "navigate:home"

---

决策原则

• 目的驱动：每个页面和组件都必须有明确目的，服务于用户目标；
• 移动优先：优先考虑移动端体验，使用简洁的交互模式和清晰的触控区域；
• 可访问性：选择易读的字体和颜色组合，保证足够的对比度和可视性；
• 简洁有限：限制页面数量（例如 <= 3 页），聚焦核心功能和使用路径；
• 预览一致：预览原型应与 UI Schema 中的结构保持一致，以便下游开发复用；
• 工具优先：始终先运行设计系统生成脚本获取推荐，而非凭感觉选择。

---

不要做 (NEVER)

• NEVER 使用泛滥的 AI 风格字体（如 Inter、Roboto 等）或紫色/粉色渐变背景；
• NEVER 生成与 PRD 无关的页面或多余的动画效果；
• NEVER 使用 emoji 作为 UI 图标（必须使用 SVG 图标库）；
• NEVER 忘记给可点击元素添加 cursor-pointer；
• NEVER 使用低于 4.5:1 的颜色对比度；
• NEVER 触控区域小于 44px；
• NEVER 忽略 Loading 和 Error 状态的设计；
• NEVER 超过 3 个页面（MVP 限制）；
• NEVER 跳过设计系统生成步骤直接开始设计。

---

数据文件参考

设计系统数据位于 skills/ui/ui-ux-pro-max-skill/src/ui-ux-pro-max/data/:

文件	内容	用途
styles.csv	67 种 UI 样式	样式选择和 CSS 关键词
colors.csv	96 种调色板	行业特定颜色推荐
typography.csv	57 种字体组合	字体配对和 Google Fonts 链接
ui-reasoning.csv	100 条推理规则	产品类型 -> 设计系统映射
landing.csv	落地页模式	页面结构和 CTA 策略
charts.csv	图表类型	仪表盘图表推荐
ux-guidelines.csv	UX 最佳实践	可访问性和交互规则

遵循这些原则和工作流可以让界面设计既有专业美感又贴合产品目标，便于后续开发落地。