Menu
根据PRD生成专业级界面结构和视觉方向。集成 ui-ux-pro-max 设计系统，提供 67 种样式、96 种调色板、57 种字体组合和 100 条行业推理规则。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | UI/UX 设计指南 (Pro Max 增强版) |
| description | 根据PRD生成专业级界面结构和视觉方向。集成 ui-ux-pro-max 设计系统，提供 67 种样式、96 种调色板、57 种字体组合和 100 条行业推理规则。 |
在动手设计之前，先明确以下四个方面：
从 PRD 和用户请求中提取关键信息:
html-tailwind通过 ui-ux-pro-max 已安装的 Claude 插件获取完整的设计系统推荐：
推荐方式：使用 ui-ux-pro-max Skill 工具
该工具会：
ui-reasoning.csv 中的推理规则选择最佳匹配获取的设计系统内容：
补充搜索： 如需更多选项，使用 Skill 工具中的领域搜索功能：
style - 更多样式选项color - 调色板推荐typography - 字体组合landing - 落地页模式chart - 图表推荐ux - UX 最佳实践获取设计系统后，使用 Skill 工具中的领域搜索功能获取更多细节：
| 需求 | 领域 | 用途 |
|---|---|---|
| 更多样式选项 | style | 获取 67 种样式中更符合需求的变体 |
| 图表推荐 | chart | 仪表盘、数据展示相关推荐 |
| UX 最佳实践 | ux | 动画、可访问性、交互指南 |
| 替代字体 | typography | 57 种字体组合中的替代方案 |
| 落地页结构 | landing | 落地页布局和结构参考 |
通过 Skill 工具获取特定技术栈的设计实现指南：
可用技术栈：
html-tailwind - HTML + Tailwind CSSreact - React 组件库nextjs - Next.js 框架vue - Vue 框架svelte - Svelte 框架swiftui - iOS/macOSreact-native - React Nativeflutter - Fluttershadcn - shadcn/ui 组件库jetpack-compose - Android Compose| # | 样式 | 最佳用途 | 关键特征 |
|---|---|---|---|
| 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 |
设计系统会根据产品类型自动应用行业特定规则:
| 类别 | 示例产品 | 推荐样式 | 颜色基调 |
|---|---|---|---|
| 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)
辅助色 (Secondary Color)
中性色 (Neutral Colors)
#FFFFFF (背景), #F8FAFC (surface), #E2E8F0 (border), #64748B (次要文本), #1E293B (主要文本)语义色 (Semantic Colors)
#10b981)#f59e0b)#ef4444)#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
行高:
使用 8px 基准网格:
xs: 4px | sm: 8px | md: 16px | lg: 24px | xl: 32px | 2xl: 48px | 3xl: 64px
Button (按钮)
Input (输入框)
Card (卡片)
bg-white/80 或更高不透明度| 规则 | 正确做法 | 错误做法 |
|---|---|---|
| 禁止 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 | 仅考虑一种尺寸 |
cursor-pointerprefers-reduced-motion生成的 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"
cursor-pointer；设计系统数据位于 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 最佳实践 | 可访问性和交互规则 |
遵循这些原则和工作流可以让界面设计既有专业美感又贴合产品目标，便于后续开发落地。