mcpField
U
ui_ux_pro_max

ui_ux_pro_max

github.com/krishnakanthb13设计与 UI6647 次安装17 周前更新
代码仓库

关于 ui_ux_pro_max

ui_ux_pro_max 是面向 Web 和移动应用 UI/UX 工作的设计技能，通过可搜索的数据集提供设计系统建议和技术栈指南。它涵盖样式、配色、字体、UX 指南和图表类型，并按优先级给出推荐。

主要功能

  1. 01提供设计系统建议与理由
  2. 02可搜索样式、配色和字体数据
  3. 03涵盖 UX 指南与图表类型
  4. 04提供多种技术栈实施指南
  5. 05支持保存设计系统以供后续检索

适用场景

  1. 01为 SaaS 产品制定界面设计系统
  2. 02按行业与风格需求查找配色和字体
  3. 03为图表或落地页选择设计方案
  4. 04获取 React、Vue 等技术栈指南

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/krishnakanthb13/antigravity_global_skills --skill ui_ux_pro_max

安装后在 Claude Code 中输入/ui_ux_pro_max确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

data/
charts.csv
react-performance.csv
products.csv
colors.csv
icons.csv
landing.csv
styles.csv
web-interface.csv
typography.csv
ux-guidelines.csv
ui-reasoning.csv
data/stacks/
flutter.csv
jetpack-compose.csv
html-tailwind.csv
astro.csv
react-native.csv
nuxt-ui.csv
nextjs.csv
react.csv
nuxtjs.csv
shadcn.csv
svelte.csv
swiftui.csv
vue.csv
scripts/
core.py
design_system.py
search.py
test_solid.py

详细介绍

UI/UX Pro Max

一款面向 Web 和移动应用的综合设计智能技能。包含 67 种风格、96 套配色方案、57 组字体搭配、99 条 UX 指南，以及涵盖 13 种技术栈的 25 种图表类型。配备可搜索数据库，并提供基于优先级的建议。

前置条件

检查是否已安装 Python：

python --version

如果尚未安装 Python，请安装：

winget install Python.Python.3.12

如何使用此技能

当用户请求 UI/UX 相关工作（设计、构建、创建、实现、审查、修复、改进）时，请遵循以下工作流：

步骤 1：分析用户需求

从用户请求中提取关键信息：

  • 产品类型：SaaS、电商、作品集、仪表板、落地页等
  • 风格关键词：简约、活泼、专业、优雅、深色模式等
  • 行业：医疗保健、金融科技、游戏、教育等
  • 技术栈：React、Vue、Next.js，或默认使用 html-tailwind
步骤 2：生成设计系统（必需）

始终从 --design-system 开始，以获取包含推理过程的全面建议：

python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<product_type> <industry> <keywords>" --design-system

如果已知项目名称，也可以添加 -p "Project Name"。

此命令会：

  1. 并行搜索 5 个领域（产品、风格、颜色、落地页、排版）
  2. 应用推理规则，选出最合适的选项
  3. 返回完整的设计系统：模式、风格、颜色、排版、效果
  4. 包含需要避免的反模式

示例：

python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "beauty spa wellness service" --design-system -p "Serenity Spa"
步骤 2b：持久化设计系统（主系统 + 覆盖项模式）

如需保存设计系统，以便在不同会话中进行分层检索，请添加 --persist。 注意：这需要对当前工作目录具有写入权限。

python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<query>" --design-system --persist -p "Project Name"
步骤 3：根据需要补充详细搜索

获取设计系统后，可通过领域搜索获取更多细节：

python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<keyword>" --domain <domain>

何时使用详细搜索：

需求领域示例
更多风格选项style--domain style "glassmorphism dark"
图表建议chart--domain chart "real-time dashboard"
UX 最佳实践ux--domain ux "animation accessibility"
其他字体typography--domain typography "elegant luxury"
落地页结构landing--domain landing "hero social-proof"
步骤 4：技术栈指南（默认：html-tailwind）

获取针对具体实现的最佳实践。如果用户未指定技术栈，默认使用 html-tailwind。

python "C:\Users\ADMIN\.gemini\antigravity\skills\ui_ux_pro_max\scripts\search.py" "<keyword>" --stack html-tailwind

可用技术栈：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose

搜索参考

可用领域
领域用途示例关键词
product产品类型建议SaaS、电商、作品集、医疗保健、美妆、服务
styleUI 风格、颜色、效果玻璃拟态、极简主义、深色模式、粗野主义
typography字体搭配、Google Fonts优雅、活泼、专业、现代
color按产品类型分类的配色方案saas、ecommerce、healthcare、beauty、fintech、service
landing页面结构、CTA 策略主视觉区、以主视觉区为核心、用户评价、定价、社会认同
chart图表类型、库建议趋势、比较、时间线、漏斗、饼图
ux最佳实践、反模式动画、无障碍性、z-index、加载
reactReact/Next.js 性能瀑布流、包、suspense、memo、重新渲染、缓存
webWeb 界面指南aria、焦点、键盘、语义化、虚拟化
promptAI 提示词、CSS 关键词（风格名称）
可用技术栈（部分列表）

html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose

获得更好结果的提示

  1. 明确关键词 — “医疗保健 SaaS 仪表板” > “应用”
  2. 多次搜索 — 使用不同关键词可以发现不同见解
  3. 结合不同领域 — 风格 + 字体排印 + 颜色 = 完整的设计系统
  4. 始终检查 UX — 搜索“动画”“z-index”“无障碍”，发现常见问题
  5. 使用 stack 标志 — 获取针对具体实现的最佳实践

交接与集成（高级）

生成完整的设计系统后：

  1. CSS 变量：立即将调色板和字体排印转换为标准 CSS 自定义属性（例如，:root { --primary: #3B82F6; }），并添加到项目的全局样式表中。
  2. 组件抽象：识别反复出现的模式（例如，“玻璃拟态卡片”），并构建可复用组件，而不是在多个文件中反复应用实用类。
  3. 主题覆盖：如果用户的项目支持深色模式，请确保在 @media (prefers-color-scheme: dark) 或 .dark 类块中明确生成反转后的调色板。

评论

支持 Markdown