UI/UX 设计指南 (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 工具中的领域搜索功能获取更多细节：

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 种)

通用样式 (推荐)

落地页样式

仪表盘样式

行业推理规则 (100 条)

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

设计系统指南

颜色体系设计

主色 (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):

字号比例 (基于 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)
• 品牌 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/:

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