UI/UX Pro Max 是一个 UI/UX 设计智能技能,核心是一个可搜索的数据库,涵盖 UI 风格、配色方案、字体搭配、图表类型、产品推荐、UX 指南以及针对具体技术栈的最佳实践。
用途 当用户提出 UI/UX 相关请求(设计、构建、创建、实现、审查、修复、改进)时,该技能提供一套工作流程:先分析需求,再检索相关领域知识,最后综合结果进行设计与实现。
主要能力
- 可搜索的设计知识库,覆盖多个领域:product(产品类型推荐)、style(UI 风格、颜色、效果)、typography(字体搭配、Google Fonts)、color(按产品类型的配色)、landing(页面结构、CTA 策略)、chart(图表类型与库推荐)、ux(最佳实践与反模式)、prompt(AI 提示、CSS 关键词)。
- 支持 8 种技术栈的针对性指南:html-tailwind(默认)、react、nextjs、vue、svelte、swiftui、react-native、flutter。
- 资料描述其包含 50 种风格、21 套配色、50 组字体搭配、20 种图表。
使用方式 前置条件:检查是否安装 Python(python3 --version || python --version),未安装则按操作系统安装(macOS 用 brew install python3;Ubuntu/Debian 用 sudo apt update && sudo apt install python3;Windows 用 winget install Python.Python.3.12)。
工作流程:
- 分析用户需求,提取产品类型、风格关键词、行业、技术栈(未指定则默认 html-tailwind)。
- 使用 search.py 多次检索相关领域,推荐检索顺序为 Product、Style、Typography、Color、Landing、Chart、UX、Stack。
- 检索技术栈指南。
检索命令格式: python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>] 技术栈检索: python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
资料还给出一个示例工作流(为专业护肤服务制作落地页),依次检索 product、style、typography、color、landing、ux、stack,然后综合所有检索结果实现设计。
适用场景 适用于需要 UI/UX 设计建议与实现指导的场景,例如落地页、仪表盘、SaaS、电商、作品集等界面设计,以及需要按技术栈获取实现最佳实践的情况。
限制与注意事项 资料未提供该技能的收费、价格、平台限制等信息。使用前需确保已安装 Python。资料强调了一些专业 UI 的常见规则,包括:不使用 emoji 作为图标(改用 SVG 图标如 Heroicons、Lucide、Simple Icons);悬停状态不应导致布局位移;可点击元素应加 cursor-pointer;过渡时长建议 150-300ms;浅色/深色模式需保证对比度(正文文字最低 4.5:1);玻璃卡片浅色模式使用 bg-white/80 或更高不透明度;边框在两种模式下均可见;浮动导航栏需留出边距;内容不应被固定导航栏遮挡;在 320px、768px、1024px、1440px 下响应式;移动端无横向滚动;图片有 alt 文本;表单输入有标签;颜色不是唯一指示;尊重 prefers-reduced-motion。交付前需按视觉质量、交互、浅色/深色模式、布局、无障碍等清单逐项检查。