经常用 AI 写前端的兄弟，大概率都干过这种事——对着 AI 不停地输出：
太丑了，再改一版！
这个按钮往左移一点！
这个圆角风格不统一，统一一下！
……
AI 写代码的效率很高，能跑，逻辑也对，能快速搞定 80% 的需求。但剩下那 20% 却特别磨人：界面总是差点意思，按钮颜色随意，间距不统一，卡片样式混搭。整个页面拼在一起，总感觉像是从几个不同项目里各抄了一块。你说它丑吧，每个元素单看都还凑合；说它行吧，放一起就是不舒服。而这恰恰是最影响产品观感的部分，让人第一眼就知道——这界面又是 AI 写出来的。
其实，模型也挺冤的。它生成的 HTML 质量并不低，问题在于它不是设计师，没有行业审美经验。它并不知道你做的是 SaaS 工具还是美容品牌，更不了解不同行业的设计套路和禁忌。AI 学过无数代码、无数样式，一旦放它自由发挥，就难免出现这种「拼凑感」。
后来，我在 GitHub 上发现了一个叫 ui-ux-pro-max-skill 的项目，正是专门来填这个坑的。目前已经有 13.8 万 Star，更新也比较频繁。
地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
官网：https://www.uupm.cc
这是个什么工具？
简单来说，这是一个给 AI 编程工具用的设计智能技能。把它装进 Claude Code、Cursor 这类工具之后，AI 在写 UI 代码之前，会先生成一套完整的设计系统，提前确定好配色方案、字体组合、排版规则、交互效果，以及页面骨架建议。有了约束之后，它就不会再随心所欲地发挥了。
这个项目内部并不是写死的提示词，而是一套可检索的数据集。AI 动手之前会先查表：88 种 UI 风格、192 套配色方案、192 条行业推理规则，再加上 74 套字体组合、119 条 UX 规范，覆盖 22 个技术栈，配套规范共 1271 条。这样组合下来，基本能覆盖现实中的大多数场景，生成统一、规范化的 UI 效果和交互逻辑。
比如你告诉它想做一个教育类官网，后台就会并行执行五次搜索，匹配产品类型、选择风格、抓取配色字体和页面骨架，几秒内合成一套完整的设计系统。AI 拿着这套方案才动笔。配置内容也不是随便生成的，它包含 192 条真实的行业规则。比如：金融行业通常不用 AI 紫粉渐变，因为这种色调看起来可信度不足；健康类产品禁用高对比警告色，避免让患者更焦虑紧张。
风格库
88 种风格里，可检索的有 79 种，活跃的有 50 种。挑几个有代表性的说说。
磨砂玻璃（Glassmorphism）：适合现代 SaaS 和金融看板。背景模糊加上半透明卡片，视觉层次感强。风险是容易滥用过度，导致对比度不足，所以规则里配了对比度检查。
黏土风（Claymorphism）：适合教育类和儿童产品。圆角、柔和阴影加饱和色，这两年也常出现在 SaaS 落地页上。
新粗野主义（Neubrutalism）：厚边框加高对比度、平面阴影那一套。Gen Z 品牌和初创公司用得比较多，Figma 官网就是类似的风格。
Bento Box Grid：大小不一的卡片拼在一起，适合产品功能展示和个人主页。Apple 和不少科技公司都在用。
每种风格都标注了最适合的场景。如果你和我一样没有很强的设计感，可以直接告诉 AI 你目前在做什么类型的产品，让它自动匹配，并用更专业的角度帮你选出最合适的风格。
怎么装
最简单的装法，是把 GitHub 仓库地址直接丢给你的 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 codex # Codex CLI
设计系统存下来，跨对话复用
这是个很实用却容易被忽略的功能，值得单独说说。
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 先读 MASTER.md；当前页面有覆盖文件就优先用那个。这样不管开多少次对话，整个项目的视觉风格都能保持一致。想给某个页面单独生成覆盖规则，命令后面加上 --page "checkout" 就行。
这个方案的好处是把全局规范和单页例外分开了。全局那份是所有页面共用的底子，页面级覆盖只写差异，改起来不会牵一发动全身。
适合谁
如果你属于这几类情况，这个工具带来的提升会很明显：独立开发者或小团队，没有专职设计师，又不想让产品看起来太素；需要快速出原型，并希望有一套能直接用的视觉规范；前端代码写得不错，但对颜色和排版完全没感觉。
但如果你们已经有专业的设计团队，并且有明确、独有的设计规范和产品风格，那就没必要画蛇添足了。AI 再强，它的最终目的也只是提效。整个产品的核心，还是人。
它也替代不了设计师，但能帮程序员快速交出可用的产品。有兴趣的话可以试一试，效果大概率会让你眼前一亮。
GitHub 地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
对这类开发者工具感兴趣的同学，也可以在 云栈社区 上找到更多交流与分享。
发表于 6 小时前
|
查看: 11|
回复: 0
