[JS/TS] ui-ux-pro-max-skill 开源免费：AI 编程工具秒出专业级 UI 设计

让 AI 写出专业 UI，ui-ux-pro-max-skill 值得拆开看。

用 Claude Code 或者 Cursor 写前端页面的朋友应该都有这个感受：AI 生成的代码能跑，逻辑也没问题，但界面就是差点意思。按钮颜色随意，间距不统一，卡片样式混搭，整个页面看起来像是拼凑出来的。

这不是模型能力的问题。它们生成的 HTML 质量都不低，但它们不是设计师，没有行业审美经验，不知道你做的是 SaaS 工具还是美容品牌，更不清楚针对不同行业有哪些设计套路和禁忌。

ui-ux-pro-max-skill 这个开源项目，就是专门来填这个坑的。

本文看点：

• 01 这个技能到底在解决什么问题
• 02 一句话进去，一套设计系统出来
• 03 规则这块，看的是它真在做行业区分

01 这个技能到底在解决什么问题

— 项目官网与整体面貌

它本质上是一个给 AI 编程工具准备的「设计智能」技能。你把它装进 Claude Code、Cursor、Windsurf 这类工具之后，AI 在帮你写 UI 代码之前，会先生成一套完整的设计系统，包括颜色方案、字体组合、排版规则、交互效果，还有一份页面骨架建议。

它内部的东西全是可检索的数据集，不是写死的提示词。按官方数据目录里那份 catalog-summary.json 的口径，当前有 88 种 UI 风格（其中可被检索的 79 种，活跃 50 种）、192 套配色方案、192 条行业推理规则、74 套字体组合、119 条 UX 规范、25 种图表类型，覆盖 22 个技术栈，配套的技术栈规范有 1271 条。

— 仓库页实时截图

项目现在十三万多 Star，MIT 协议，宽松到可以自己改了再分发。有一点要提前说明，这个仓库是基础版，官方 README 里有一份和高级版的对照表，也就是说这里的资产不是全部，高级版另有能力。装之前心里有数就行，基础版日常用基本够。

02 一句话进去，一套设计系统出来

这是它最值得说的部分，官方叫 Design System Generator。

你跟 AI 说「给我的美容 SPA 做一个落地页」，这个技能会在后台自动跑五个并行搜索。先匹配产品类型，在 192 个产品分类里找到「美容 / 水疗」这一项；然后按行业规则推荐合适的 UI 风格，比如 Soft UI Evolution；再取配色、字体与页面骨架。五个搜索分别是产品类型匹配、风格推荐、配色方案、字体组合和页面骨架，彼此并行，互不等待。搜索结果再经过一个推理引擎，用 BM25 算法按相关性排序，最后合成一份完整的设计系统描述。

这套做法的关键在于知识是被整理的。192 个产品类型、192 套配色、192 条行业规则是一一对应的，所以它推荐的配色有明确的行业出处，而不只是取一组看着顺眼的颜色。

整个过程在 AI 回复你之前就完成了，你基本感觉不到延迟。AI 拿到这份设计系统之后才开始写代码，效果和你什么都不说直接让它写，是两个档次。

它真正做的事，是把设计经验从模型的脑子里挪出来，做成一份可以检索的数据；界面好不好看，于是从靠运气变成了靠有没有查对表。

03 规则这块，看的是它真在做行业区分

很多工具说自己有多少条规则，其实就是凑文档字数。这个项目的 192 条行业推理规则，是真按行业在做区分的。

以金融为例，规则里明确写着要避免「AI 紫色与粉色渐变」。原因很直白，银行和保险产品需要传达稳定和可信，用那种当下最流行的网红 AI 配色，会让用户觉得不靠谱。医疗诊所和心理健康类产品也有类似限制，比如禁止使用高对比度的警告色调，因为这类场景需要让人放松，不是让人紧张。游戏和 NFT 类产品则反过来，赛博朋克、霓虹灯、高饱和度渐变都是推荐选项。教育类产品会被要求提高可读性，避免花哨的背景干扰文字；奢侈品电商则相反，规则会建议降低信息密度、留白给足，把注意力留给产品本身。

行业覆盖范围列出来是这些。

行业	覆盖示例
科技与 SaaS	微 SaaS、开发者工具、AI 平台、网络安全
金融	加密货币、银行、保险、个人财务
医疗	诊所、牙科、心理健康、宠物医院
电商	普通、奢侈品、订阅盒子、外卖平台
服务业	美容、餐饮、酒店、法律、家政
创意	作品集、摄影、音乐平台、游戏
生活方式	习惯追踪、冥想、食谱、日记
新兴技术	Web3、空间计算、量子计算

每条规则里包含五样东西：推荐的页面结构模板、首选 UI 风格、配色情绪、字体个性、关键交互效果，另外还有一份反向的「不要这样做」清单。这份清单其实是它最值钱的部分，因为正面推荐到处都能找到，明确的禁忌反而是经验。

04 风格这块，它能直接告诉你什么时候用哪种

88 种风格里，可检索的 79 种，当前活跃 50 种。挑几个有代表性的说。

Glassmorphism 也就是磨砂玻璃，适合现代 SaaS 和金融看板，背景模糊加半透明卡片，视觉层次感强。它的风险是滥用之后对比度不够，所以规则里配了对比度检查。

Claymorphism 也就是黏土风，适合教育类应用和面向儿童的产品，圆角、柔和阴影加饱和色，这两年也常出现在 SaaS 落地页上。

Neubrutalism 走的是厚边框、高对比度、平面阴影那一套，Gen Z 品牌和初创公司用得比较多，Figma 官网就是类似的路子。Bento Box Grid 适合产品功能展示和个人主页，各种大小不一的卡片拼在一起，Apple 和不少科技公司都在用。还有一类是专门给 AI 产品和聊天机器人定制的风格，强调信息流动感和状态反馈。

每种风格都标了「最适合什么场景」，你不用自己猜。告诉 AI 做什么产品，它会自动匹配。

05 装它只要几条命令

支持的 AI 编程工具很多，安装分两条路。

用 Claude Code 的话，走插件市场，两条命令。

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

其他工具走命令行，先全局装 CLI 工具。

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

然后在项目目录里初始化，告诉它你用哪个工具。

uipro init --ai claude # Claude Code
uipro init --ai cursor # Cursor
uipro init --ai windsurf # Windsurf
uipro init --ai copilot # GitHub Copilot
uipro init --ai codex # Codex CLI

想装一次所有项目都能用，加 --global 就行。

uipro init --ai claude --global

平台模板目前有 21 个，除了上面列的，还有 Kiro、Roo Code、OpenCode、Trae、Qoder、Continue、CodeBuddy 等等，基本覆盖了主流的 AI 编程工具。前提只有两条：能跑 npm，以及本机有 Python 3.x，没有别的特殊要求。

06 把设计系统存下来，跨对话复用

这是个很实用但很多人不知道的功能。

AI 默认没有记忆，你每次开新对话，上次生成的设计系统就没了，风格容易飘。这个项目提供了「Master 加覆盖」的持久化方案。

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

执行完之后，项目目录里会多出这样的结构。

design-system/
└── myapp/
　　├── MASTER.md # 全局设计系统（颜色、字体、间距、组件规范）
　　└── pages/
　　　　└── checkout.md # 结账页面的特殊覆盖规则

用法很直接。新开对话时告诉 AI 先读 design-system/myapp/MASTER.md，如果当前页面有对应的覆盖文件就优先用那个。这样不管开多少次新对话，整个项目的视觉风格都能保持一致。想给某个页面单独生成覆盖，在命令后面加 --page "checkout" 就行。

这个方案的好处是它把「全局规范」和「单页例外」分开了。全局那份是所有页面共用的底子，页面级的覆盖只写差异，改起来不会牵一发动全身。除了持久化，CLI 还能查目录、看某个风格或配色的详情，也能把设计系统按不同格式打印出来，比如直接输出成 Markdown 塞进项目文档。

07 几个现成的成品

第一张是金融仪表盘，整体压得非常克制，背景几乎全是中性色，颜色只留给数据本身。银行和保险要的正是这种不刺激的观感，让人第一眼先相信数字。

— 金融仪表盘

第二张是游戏平台，霓虹色和高饱和渐变被放开用了，暗底加发光边框，氛围和上一张完全换了一副样子。同一个技能，换个行业关键词就换一套语言。

— 游戏平台

第三张是音乐网站，视觉重心放在封面和播放控件上，其余的导航与文字被压到最低限度，全屏沉浸感是这类产品最在意的东西。

— 音乐网站

第四张是诊所门户，配色整体往柔和里收，看不到任何警示性的强对比色，连按钮都是低饱和的。医疗场景要的是放松，不是催促。

— 诊所门户

上面四张是官方给出的产出示例，依次是金融仪表盘、游戏平台、音乐网站和诊所门户。它们的共同点是都出自同一套规则，但配色、字体和版式差别一眼能看出来，这正是行业推理规则在起作用的地方。同样叫仪表盘，金融那边克制，游戏那边敢用高饱和。更多案例在官网的样式库里，按风格和行业都能筛。

08 谁该装，谁别装

最适合的是独立开发者和小团队，没有专职设计师，又不想让产品看起来太素；或者在用 AI 快速出原型，需要一个能直接用的视觉规范；以及前端代码写得不错、但对颜色和排版没什么感觉的人，这类人用起来收益最明显。

有几类场景不太适合。公司已经有完整设计规范，用自己那套更合适，没必要再引入外部预设；产品有很强的品牌识别需求，做深度定制靠预设模板不够用；对 UI 细节要求极高的场景，AI 出的结果还是要设计师再过一遍。

它替代不了设计师，但对很多开发者来说，有它和没它的区别，是「能上线」和「有点拿不出手」的区别。

GitHub 地址是 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill 。