SuperAPI AI 工具集

ui-ux-pro-max-v2

设计与创作

查看项目

更新于 10-27 02:41

技能介绍

UI/UX Pro Max - Design Intelligence 是一个设计智能工作流技能,用于为网页和移动应用提供综合设计指导。该技能从上游仓库的 ui-ux-pro-max 技能包导入,并以保留来源信息(metadata.json 的 external_source 块与 ORIGIN.md)的方式打包,便于审查与追溯。

用途 当需要设计新的 UI 组件或页面、选择配色方案与字体搭配、审查代码中的 UX 问题、构建落地页或仪表盘、实现无障碍要求时,可启用该技能。它适合在 UI/UX 相关请求(设计、构建、创建、实现、审查、修复、改进)中作为设计决策的起点。

主要能力 技能内置可搜索数据库,包含 50+ 种 UI 风格、97 套配色方案、57 组字体搭配、99 条 UX 准则和 25 种图表类型,覆盖 9 种技术栈,并按优先级给出推荐。搜索域包括 product(产品类型推荐)、style(UI 风格、颜色、效果)、typography(字体搭配)、color(按产品类型的配色)、landing(页面结构与 CTA 策略)、chart(图表类型与库推荐)、ux(最佳实践与反模式)、react(React/Next.js 性能)、web(Web 界面准则)、prompt(AI 提示与 CSS 关键词)。支持的技术栈包括 html-tailwind(默认)、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn。

使用方式 使用前需确认已安装 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);第二步运行设计系统生成命令,例如:python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"],该命令会并行搜索 product、style、color、landing、typography 五个域,应用 ui-reasoning.csv 中的推理规则,返回包含模式、风格、颜色、字体、效果及反模式的完整设计系统;第三步按需补充域搜索,例如:python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux,或 python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography;第四步获取技术栈指南,例如:python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind,最后综合设计系统与各项搜索结果实施设计。

指导内容 技能按优先级组织规则:无障碍与触控交互为关键级,性能与布局响应式为高优先级,排版配色、动画、风格选择为中优先级,图表与数据为低优先级。快速参考涵盖对比度至少 4.5:1、可见焦点状态、替代文本、aria-label、键盘导航、表单标签、44x44px 触控目标、异步操作时禁用按钮、错误提示、cursor-pointer、图片优化、prefers-reduced-motion、预留异步内容空间、viewport 元标签、移动端正文至少 16px、z-index 分级、行高 1.5-1.75、每行 65-75 字符、字体搭配、150-300ms 微交互、使用 transform/opacity 动画、骨架屏加载状态、风格与产品类型匹配、用 SVG 图标而非 emoji、图表类型与数据类型匹配、为数据表提供可访问替代等。此外还列出常见非专业 UI 问题,如不要用 emoji 作为 UI 图标、悬停使用颜色/透明度过渡而非会移动布局的缩放、使用正确的品牌 SVG、固定图标尺寸、可点击元素加 cursor-pointer、浅色模式玻璃卡片使用 bg-white/80 或更高不透明度、正文使用 #0F172A、次要文本至少 #475569、浅色模式边框使用 border-gray-200、浮动导航栏添加 top-4 left-4 right-4 间距、内容留出固定导航高度、统一最大宽度等。

适用场景与限制 该技能适用于从需求分析到设计系统生成再到技术栈落地的完整设计流程,也可用于生成审查包、追溯来源与筛选需要加载的上游文件。其工作流示例中给出了美妆/水疗服务落地页的演示(产品类型 Beauty/Spa service,风格关键词 elegant、professional、soft,行业 Beauty/Wellness,技术栈 html-tailwind),并配有 scripts/core.py、scripts/design_system.py、search.py 及 charts.csv、colors.csv、icons.csv 等支撑文件。使用时应只加载对当前任务真正有影响的参考、示例或脚本,避免默认加载整个包;当任务转向调试、架构、安全或发布编排等更适合其他专门技能时,可通过相关技能(如 production-audit-v2、react-best-practices-v3)进行交接。资料未提供该技能的收费、价格、效果承诺或平台兼容性等进一步信息。