再也不用求前端了！这个开源免费的skill让你一秒拥有专业级UI设计能力

阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/ui-ux-pro-max-skill/ 「芋道源码」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

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

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

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

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

项目官网与整体面貌

简单说，这是一个给 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 里有一份和高级版的对照表，也就是说这里的资产不是全部，高级版另有能力。装之前心里有数就行，基础版日常用基本够。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

装它只要几条命令

支持的 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，没有别的特殊要求。

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

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

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 塞进项目文档。

几个现成的成品

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

金融仪表盘

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

游戏平台

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

音乐网站

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

诊所门户

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

谁该装，谁别装

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

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

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

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