企业官网建设流程全解析

UI UX Pro Max：把 AI 设计系统生成装进你的编码助手

【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill

UI UX Pro Max 是一个 AI 设计智能技能，可接入 Claude Code、Cursor 等编码助手，在你提出界面需求时自动检索并推理生成一整套 UI/UX 设计系统：风格、配色、字体、布局与需要避免的坑一次给齐。

UI UX Pro Max 安装与初始化

设计系统检索脚本依赖 Python 3.x（仅标准库，不安装额外依赖、不联网），Node 侧则通过 npm 提供 CLI：

npm install -g ui-ux-pro-max-cli cd /path/to/your/project uipro init --ai claude # 或 cursor / windsurf / copilot 等

--ai参数支持约 20 个平台（含 Gemini CLI、Codex、Trae、Kiro、OpenClaw 等），加--ai all一次写满所有平台；加--global则安装到用户目录，对全部项目生效。

装完之后无需改变工作方式：向助手自然提需求即可，例如"Build a landing page for my SaaS product"或"Create a dashboard for healthcare analytics"，技能被触发后会先检索、生成设计系统，再据此写代码。Kiro、Roo Code 等平台用斜杠命令/ui-ux-pro-max 你的需求触发。

AI 设计智能：检索库与推理引擎

它的底座不是静态资源包，而是一个 BM25 检索引擎加一套按产品类型细分的规则库。数据全部是 CSV，放在src/ui-ux-pro-max/data/，检索与推理逻辑在同级scripts/search.py与core.py。

收到需求后，引擎同时从 5 个维度检索——产品类型（192 类）、UI 风格、调色板、落地页模式、字体搭配——再叠加推理规则排序，输出推荐方案并排除行业禁忌。

资源规模如下：

• 79 种可检索 UI 风格（50 种活跃参与常规推荐，29 种作为变体按需返回，9 种已弃用并自动重定向到规范风格），覆盖玻璃拟态、黏土拟态、Bento 网格、Brutalism、Fluent 2、Shopify Polaris、Adobe Spectrum 等
• 192 套行业调色板，与 192 种产品类型一一对应
• 74 组字体搭配，直接附 Google Fonts 引入方式；底层字体库收录 1,934 个 Google 字体家族
• 25 种图表类型建议、34 种落地页结构、17 套动效预设、119 条 UX 规范（含无障碍与文本换行容错）

技术栈指南覆盖 22 种：React、Next.js、Vue、Nuxt UI、Angular、Svelte、Astro、Laravel、Three.js、React Native、Flutter、SwiftUI、Jetpack Compose、JavaFX、WPF、WinUI 3、Avalonia、Uno Platform、UWP 等，每栈约 57 条专属规范（共 1,271 条）。在提示词里提一句目标框架即可切换，默认 HTML + Tailwind。

设计系统生成器怎么用

v2.0 起的核心功能是设计系统生成器。直接调用：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

几秒后输出的完整设计系统包含：推荐页面结构（各区块顺序与 CTA 位置）、风格排名及关键词、完整色值（Primary/Secondary/CTA/背景/文本）、字体组合及气质说明、关键效果、该行业应避免的反模式，外加一份交付前检查清单——不用 emoji 当图标、可点击元素带cursor-pointer、浅色模式对比度不低于 4.5:1、键盘焦点可见、遵循prefers-reduced-motion、在 375/768/1024/1440px 断点下校验。

大项目建议把结果落盘，供跨会话分层检索：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"

生成的目录结构：

design-system/ └── myapp/ ├── MASTER.md # 全局规范：颜色、字体、间距、组件 └── pages/ └── dashboard.md # 页面级覆盖，只写与 MASTER 不同的部分

后续会话构建某个页面时，助手先查对应页面文件，存在则优先，不存在才退回 MASTER。加-f markdown可切换输出格式。

192 条行业推理规则

每个产品类别都有独立规则档案，涵盖推荐模式、风格优先级、色彩情绪、字体气质、关键效果与反模式六项。举几个例子：

• 银行 / 金融：明确列入应避免的是 AI 紫粉渐变——这类配色在该行业会削弱专业感与信任感
• SaaS：推荐 Hero 加社会认同的落地页结构，CTA 放在首屏并在客户证言之后重复出现
• 美容 SPA：Soft UI 风格，柔粉 #E8B4B8 配鼠尾草绿 #A8D5BA、金色 #D4AF37 点缀，暖白底、炭黑字，整体走低饱和的平静路线

规则库完整清单见src/ui-ux-pro-max/data/ui-reasoning.csv，覆盖医疗、电商、创意作品集、生活服务、Web3 等方向。

适合谁使用

独立开发者和小型团队用它补上设计位：一句需求换来一套自洽的配色、字体与布局方案，省去在几十种风格里反复试错的周末。

需要多端、多页一致性的项目，MASTER 加页面覆盖机制相当于给团队一份可执行的设计规范文档，新页面、新成员都对着它开发，减少口径不一致的返工。

对"为什么这样推荐"感到好奇的学习者，直接读生成结果里的反模式和行业规则部分，理解设计决策背后对应的行业约束。

常见问题

运行 search.py 提示找不到 Python：脚本需要 Python 3.x，用系统包管理器（Homebrew / apt / winget）安装后重试即可：

python3 --version

设计系统输出被截断：人读模式默认把长字段截断到 300 字符，加--json可拿完整数据：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --json

uipro提示 unknown command：CLI 版本过旧，更新后重试：

npm install -g ui-ux-pro-max-cli@latest

结语

把"选什么风格、配什么色、避什么坑"这三步交给规则化的推理，是你接入它的全部理由。

git clone https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill

【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill