69万星、263万安装：一个「让 AI 别画得那么丑」的技能，怎么成了 Claude Code 设计类第一？
AI 画出来的页面一股"AI 味"？69 万星的开源技能，60 秒让它变专业
你让 AI 帮你生成一个页面。它生成了。紫色渐变背景，圆角卡片，白色大字，配上几个毫无灵魂的 emoji 图标。
你看着它，想起了 2023 年 Midjourney V4 刚出来时那种"一眼 AI"的廉价感。
这时候你需要的东西，叫 UI/UX Pro Max。
一、它是什么？
说白了就一句话：给 AI 编程助手装上一套设计系统。
UI/UX Pro Max 是 Google Antigravity 团队开源的一个 Claude Code 技能包。MIT 协议，免费商用。
它只干一件事：去掉 AI 生成页面的"AI 味"。
截至 2026 年 7 月，GitHub 上 69 万+ 星，263 万+ 安装——整个 Claude Code Skills 生态里，设计类排名第一。
仓库地址：nextlevelbuilder/ui-ux-pro-max-skill
二、60 秒安装
方法一：Claude Code 一句话安装（最快）
在 Claude Code 对话框里直接说：
Install this skill for me: https://github.com/tenfoldmarc/website-builder-setup
或者用插件市场：
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
方法二：CLI 命令行
# 全局安装 CLI 工具 npm install -g ui-ux-pro-max-cli
# 安装到 Claude Code uipro init --ai claude --global
装完之后，你的 .claude/skills/ 目录下会多一个 ui-ux-pro-max-skill 文件夹。里面装了 67 种设计风格的知识库、161 套配色方案、57 组字体配对，还有 161 条设计推理规则。
关于 API Key：不需要
如果你用的是 website-builder-setup 这个打包方案，它里面除了 UI/UX Pro Max 还捆了 21st.dev（一个 React 组件市场）。21st.dev 需要去官网申请一个免费 Key——但那是给组件库用的，不是 UI/UX Pro Max 本身要的。
UI/UX Pro Max 本身零 API Key，零额外费用，MIT 协议。 你只做设计提升、不调 21st.dev 组件的话，那个 Key 根本不用管。
三、它怎么用？
装完就能用，不需要任何特殊操作。直接用大白话描述你要做什么页面，Skill 自动激活。
最简单的用法
"帮我做一个 SaaS 产品的落地页" "给我一个医疗数据分析仪表盘" "设计一个暗黑模式的作品集网站"
AI 会自动：
-
从你的话里提取产品类型（SaaS / 医疗 / 个人作品集）
-
匹配最合适的视觉风格
-
套用行业对应的配色方案
-
选择字体配对
-
给你一个专业的、有设计感的页面
进阶：精确控制设计方向
"做一个美容 SPA 的预约页面，莫兰迪色系，日式极简风格，大量留白"
你描述得越具体，Skill 匹配得越精准。
把你的产品类型、风格关键词、行业、技术栈说清楚就行了。
四、它肚子里装了什么
这是一个"推理引擎 + 知识库 + 输出模板"三层架构的设计系统：
| 资源类型 | 数量 | 做什么用的 |
|---|---|---|
| UI 设计风格 | 67 种 | 毛玻璃、新粗野主义、粘土风、AI-Native UI、空间 UI…… |
| 配色方案 | 161 种 | 按产品类型对齐的行业专属调色板 |
| 字体配对 | 57 组 | 精选 Google Fonts 排版组合 |
| 图表类型 | 25 种 | 仪表盘和数据可视化建议 |
| 技术栈 | 22 种 | React、Vue、Svelte、Flutter、SwiftUI、Tailwind…… |
| UX 准则 | 99 条 | 最佳实践、反模式、无障碍规则 |
| 推理规则 | 161 条 | 行业专属设计系统智能生成策略 |
| 落地页模式 | 24 种 | 转化优化的页面结构模板 |
内部怎么运转的
你提需求的时候，Skill 走三步：
第一步：需求结构化。 从你的话里抠出四个关键信息——产品类型、风格关键词、行业、技术栈。
第二步：本地检索。 按优先级挨个翻知识库，找到最匹配的设计规则。
第三步：兜底保护。 你没说技术栈？默认 HTML + Tailwind。你没说风格？根据产品类型推断。你没说配色？行业专属调色板自动上车。
五、它是怎么"去 AI 味"的？
AI 生成的页面有个通病：看起来都是同一个模型画的。 紫色渐变、超大圆角、空洞的 emoji 图标、颜色毫无章法。
UI/UX Pro Max 用一套硬规则把这些毛病全堵死了：
必须用 SVG 图标，禁止 emoji hover 状态必须完整实现 对比度达到 WCAG AA 4.5:1 标准 触控区域最小 44x44px 动画时长 150-300ms，不拖不闪 最大宽度统一、间距一致、边框可见 响应式断点：375 / 768 / 1024 / 1440px
更厉害的是它的五维质量检查清单——每次生成完自动从视觉质量、交互动效、亮暗模式、布局一致性、可访问性五个维度挨个审查。AI 画完的每一笔都要被这条流水线过一遍。
装了它之后，AI 生成的页面突然有了"人味"——不是因为它变聪明了，是它在输出之前被规则拦了一道。
六、三个实战技巧
技巧一：先跑通，再美化
别一上来就"用最好的设计给我做"。先让 AI 生成一个基础可用的版本，跑通了功能，再加 Skill 优化外观。
# 第一步：拿到能跑的页面 "给我做一个简单的任务管理页面" # 第二步：用 Skill 深加工 "用 UI/UX Pro Max 风格优化这个页面，目标用户是每天打开三次的打工人， 信息密度中等、颜色克制、操作效率优先"
技巧二：场景化指令远胜"美化一下"
错误示范："美化一下这个页面"
正确示范：
"这是一个 B2B SaaS 的管理后台，用户是 30-45 岁的运营经理。他们每天在这里花 4-6 小时。要求：数据密度高但不拥挤、主操作按钮高对比度、信息层级清晰、长时间使用不疲劳。"
Skill 会从"B2B SaaS""管理后台""高密度""长时间使用"四个关键词分别拉出匹配的设计规则，叠在一起变成一个专属方案。
技巧三：生成后持续追问
AI 第一次给你的东西通常还行，但不是最好的。追问这几句能再上一个台阶：
-
"移动端横向溢出检查一下，把溢出的组件改掉"
-
"装饰性元素太多了，砍掉一半，信息密度不够的地方用数据补"
-
"所有 hover 和 focus 状态走一遍，缺的补上"
-
"对比度全部过一遍 WCAG AA，不达标的改"
七、它跟其他设计 Skills 怎么组合
Claude Code 现在的设计 Skill 生态已经形成了三层协作：
Fast iteration → Frontend Design（Anthropic 官方）
快速原型，非通用 UI 方向 深度设计 → UI/UX Pro Max
工业级设计系统，五维质量关卡 创意方向 → taste-skill / hallmark 设计品味调校，反同质化风格
三者不冲突，可以一起装。一个典型的工作流：
-
用 Frontend Design 快速出原型（30 秒）
-
用 UI/UX Pro Max 上设计系统（1 分钟）
-
用 taste-skill 微调视觉调性（10 秒）
三刀走完，从"一眼 AI"到"这谁做的设计"，不超过两分钟。
八、小结
2026 年上半年 GitHub 涨星最快的 Skills 里，有一半都在干同一件事：让 AI 的输出变得可控。
caveman 让它少说话。
ponytail 让它少写代码。
hallmark 让它别画得千篇一律。
UI/UX Pro Max 让它画得专业。
说到底：AI 的能力已经够了，缺的是刹车和方向。
想让 AI 画得好看？装它。
仓库地址：nextlevelbuilder/ui-ux-pro-max-skill
中文教程：bbylw/ui-ux-pro-max-skill-cn
插件市场：Claude Code 内搜索
ui-ux-pro-max
关于作者
钉子之家 — 关注 AI 编程、设计系统和开发者工具。每周更新深度技术解读和实操指南。
如果这篇文章对你有帮助，欢迎点赞、在看、转发。你的支持是我继续写作的最大动力。
浙公网安备 33010602011771号