Menu
UI/UX 设计智能，在设计页面时必须使用
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
一套用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件 claude.ai HTML 工件的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂工件，不适用于简单的单文件 HTML/JSX 工件。
Multi-technique business analysis orchestration using BABOK. Coordinates 14 techniques across strategic analysis, problem solving, planning, and design into comprehensive analysis packages.
Benchmarking and competitive analysis techniques. Compares performance, processes, and practices against industry standards, competitors, and best-in-class organizations.
Business model design using Osterwalder's Business Model Canvas and Lean Canvas. Creates 9-block canvases with structured analysis for business model innovation and startup validation.
Business capability modeling using BABOK Business Capability Analysis. Creates hierarchical capability maps (L1-L3) linking strategy to architecture with Mermaid visualization.
Data modeling with Entity-Relationship Diagrams (ERDs), data dictionaries, and conceptual/logical/physical models. Documents data structures, relationships, and attributes.
| name | ui-ux-pro-max |
| description | UI/UX 设计智能，在设计页面时必须使用 |
一个可搜索的数据库，包含 UI 风格、配色方案、字体搭配、图表类型、产品推荐、UX 准则以及特定技术栈的最佳实践。
检查是否已安装 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 工作（设计、构建、创建、实现、审查、修复、改进）时，请遵循以下工作流程：
从用户请求中提取关键信息：
html-tailwind。多次使用 search.py 以收集全面的信息。持续搜索直到获得足够的上下文。
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --domain <领域> [-n <最大结果数>]
推荐搜索顺序：
如果用户未指定技术栈，**默认为 html-tailwind**。
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<关键词>" --stack html-tailwind
可用技术栈：html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn
领域 (domain) | 用途 | 关键词示例 |
|---|---|---|
product | 产品类型推荐 | SaaS, e-commerce (电商), portfolio (作品集), healthcare (医疗), beauty (美业), service (服务) |
style | UI 风格、颜色、特效 | glassmorphism (玻璃拟态), minimalism (极简), dark mode (暗黑), brutalism (粗野主义) |
typography | 字体搭配, Google Fonts | elegant (优雅), playful (俏皮), professional (专业), modern (现代) |
color | 按产品类型的配色方案 | saas, ecommerce, healthcare, beauty, fintech (金融), service |
landing | 页面结构, CTA 策略 | hero (首屏), hero-centric, testimonial (评价), pricing (定价), social-proof (社会证明) |
chart | 图表类型, 库推荐 | trend (趋势), comparison (对比), timeline (时间轴), funnel (漏斗), pie (饼图) |
ux | 最佳实践, 反模式 | animation (动画), accessibility (无障碍), z-index, loading (加载) |
prompt | AI 提示词, CSS 关键词 | (风格名称) |
技术栈 (stack) | 侧重点 |
|---|---|
html-tailwind | Tailwind 工具类, 响应式, 无障碍性 (默认) |
react | 状态管理, hooks, 性能, 模式 |
nextjs | SSR (服务端渲染), 路由, 图片优化, API 路由 |
vue | 组合式 API, Pinia, Vue Router |
svelte | Runes, stores, SvelteKit |
swiftui | 视图, 状态, 导航, 动画 |
react-native | 组件, 导航, 列表 |
flutter | Widgets, 状态, 布局, 主题 |
shadcn | shadcn/ui 组件, 主题定制, 表单, 模式 |
用户请求： "为专业护肤服务制作一个落地页 (Landing page)"
AI 应当执行：
# 1. 搜索产品类型
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. 搜索风格 (基于行业: 美业, 优雅)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
# 3. 搜索排版/字体
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. 搜索配色方案
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
# 5. 搜索落地页结构
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
# 6. 搜索 UX 准则
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
# 7. 搜索技术栈指南 (默认: html-tailwind)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
然后： 综合所有搜索结果并实现设计。
这些是经常被忽视的问题，它们会让 UI 看起来不专业：
| 规则 | 应做 (Do) | 不应做 (Don't) |
|---|---|---|
| 不要使用 Emoji 图标 | 使用 SVG 图标 (Heroicons, Lucide, Simple Icons) | 使用 🎨 🚀 ⚙️ 等 Emoji 作为 UI 图标 |
| 稳定的悬停状态 | 悬停时使用颜色/透明度过渡 | 使用会导致布局偏移的缩放变换 |
| 正确的品牌 Logo | 从 Simple Icons 查找官方 SVG | 猜测或使用错误的 Logo 路径 |
| 一致的图标尺寸 | 使用固定的 viewBox (24x24) 和 w-6 h-6 | 随意混合不同尺寸的图标 |
| 规则 | 应做 (Do) | 不应做 (Don't) |
|---|---|---|
| 指针光标 (Cursor pointer) | 给所有可点击/可悬停的卡片添加 cursor-pointer | 在交互元素上保留默认光标 |
| 悬停反馈 | 提供视觉反馈（颜色、阴影、边框） | 没有任何指示表明元素可交互 |
| 平滑过渡 | 使用 transition-colors duration-200 | 状态瞬间切换或过慢 (>500ms) |
| 规则 | 应做 (Do) | 不应做 (Don't) |
|---|---|---|
| 亮色模式下的玻璃卡片 | 使用 bg-white/80 或更高不透明度 | 使用 bg-white/10 (太透明) |
| 亮色文本对比度 | 文本使用 #0F172A (slate-900) | 正文使用 #94A3B8 (slate-400) |
| 柔和/次级文本 (亮色) | 最低使用 #475569 (slate-600) | 使用 gray-400 或更浅的颜色 |
| 边框可见性 | 亮色模式使用 border-gray-200 | 使用 border-white/10 (不可见) |
| 规则 | 应做 (Do) | 不应做 (Don't) |
|---|---|---|
| 悬浮导航栏 | 添加 top-4 left-4 right-4 间距 | 将导航栏紧贴 top-0 left-0 right-0 |
| 内容内边距 (Padding) | 考虑到固定导航栏的高度 | 让内容隐藏在固定元素后面 |
| 一致的最大宽度 | 使用统一的 max-w-6xl 或 max-w-7xl | 混合使用不同的容器宽度 |
在交付 UI 代码之前，请验证这些项目：
cursor-pointerprefers-reduced-motion（减少动态效果）设置