AI 也能做设计系统了:ui-ux-pro-max-skill 实测

AI 也能做设计系统了：一个开源项目，治好了 AI 写前端「差点意思」的病

实测时间：2026-06-06 17:11 · 阅读约 6 分钟

一句话结论

Claude / GPT 写前端，逻辑能跑，但视觉差点意思——不是模型问题，是「没有设计师脑子」。ui-ux-pro-max-skill 这个开源项目，给 AI 编程工具塞了 67 种 UI 风格、161 套配色、161 条行业推理规则，让 AI 在写代码前先给你搭一套完整的设计系统。

为什么 AI 写的前端总差点意思？

用 Claude Code 或 Cursor 写过前端页面的朋友应该都有这个感受：

• AI 生成的代码能跑，逻辑也对，但界面就是差点意思

• 按钮颜色随意，间距不统一，卡片样式混搭

• 整个页面看起来像是拼凑出来的

这不是模型能力的问题。Claude 4、GPT-4o 生成的 HTML 质量都不低，但它们不是设计师：

• 没有行业审美经验

• 不知道你做的是 SaaS 工具还是美容品牌

• 不清楚针对不同行业有哪些设计套路和禁忌

ui-ux-pro-max-skill 是什么？

简单说，这是一个给 AI 编程工具用的「设计智能」插件。你把它安装到 Claude Code、Cursor、Windsurf 这类工具里之后，AI 在帮你写 UI 代码之前，会先自动生成一套完整的设计系统——包括：

资产类别	数量	说明
UI 风格	67 种	Glassmorphism / Brutalism / Bento Grid / Cyberpunk …
配色方案	161 套	每套对应一个具体行业
字体组合	57 套	全部来自 Google Fonts，可直接导入
行业推理规则	161 条	v2.0 核心升级，含「不要这样做」清单
UX 规范	99 条	含无障碍设计标准（WCAG AA/AAA）
图表类型	25 种	主要用于数据看板场景

我们怎么测的

1) 装到本地沙箱：

# 7 个 skill 一次性装到 /workspace/.skills/ cp -r ui-ux-pro-max-repo/.claude/skills/* /workspace/.skills/

2) 修符号链接（仓库里 scripts/、data/ 是软链，要换实文件）：

cd /workspace/.skills/ui-ux-pro-max rm -f scripts data   # 删软链 mkdir scripts data cp /path/to/repo/src/ui-ux-pro-max/scripts/*.py scripts/ cp /path/to/repo/src/ui-ux-pro-max/data/*.csv data/

3) 跑搜索引擎，让它给「AI 工具评测」主题出设计系统：

python3 scripts/search.py \   "AI tool review tech blog professional minimalism" \   --design-system -p "AIToolReview"

✅ 实测通过：67 风格 / 161 配色 / 57 字体 / 数据 15 个 CSV 全部可检索，3-5 秒出结果。

给「AI 工具评测」出的设计系统（部分）

为了让 AI 写出来的 HTML 看着专业，搜索脚本自动匹配出 Swiss Modernism 2.0 风格 + Bento Grid 版式：

Token	值	用途
Primary	#1E3A5F	标题 / 重点
Secondary	#2563EB	链接 / 次要 CTA
Accent	#059669	数据 / 正向
Background	#F8FAFC	页面底色
Text	#0F172A	正文
Border	#E4E7EB	分隔线 / 表格边

字体方面，原推荐 Space Grotesk / DM Sans（Google Fonts），落到公众号时按约束降级为系统字体栈：

font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif

它做对了哪几件事

• BM25 排序引擎 + 行业推理：从 161 行业分类里精准匹配

• 并行 5 维度搜索：风格 / 配色 / 字体 / 版式 / 行业规则

• 输出 Token 化：颜色、字体、圆角、间距全部 CSS 变量

• Pre-delivery Checklist：交付前自动检查 7 项 UX 底线

「Master + 覆盖」的持久化方案：把设计系统存到 design-system/MASTER.md，每个页面单独 override，新开对话也不会丢风格。—— 项目 README

适合谁 / 不适合谁

适合

• 独立开发者 / 小团队：没专职设计师，又不想产品太素

• 用 AI 快速出原型：需要一套能直接用的视觉规范

• 前端代码 OK 但对配色/排版没感觉的人

不太适合

• 公司已有完整设计规范（Design Token / Figma 库）

• 品牌识别需求非常特殊，要深度定制

• 对 UI 细节要求极高、需要设计师再过一遍的场景

怎么装

方式 A：Claude Code Marketplace

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

方式 B：CLI 全平台（推荐）

# 全局装 CLI npm install -g uipro-cli  # 项目内初始化（按你用的 AI 工具选） 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 claude --global   # 全局装一次，所有项目通用

支持的平台目前有 17 个，覆盖主流 AI 编程工具。

结论

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

v2.0 新增的 Design System Generator 是个不小的升级：把「AI 写前端」从「能跑」拉到了「能看」。

MIT 协议，免费用。如果你也在用 Claude Code 或 Cursor 做前端，建议装一个，成本很低。

GitHub: github.com/nextlevelbuilder/ui-ux-pro-max-skill

更多案例: uupm.cc/#styles

声明

本文由 AI 辅助生成，所有观点仅代表作者本人，与所在机构无关。

文中所有数据、配色、代码均来自公开项目（github.com/nextlevelbuilder/ui-ux-pro-max-skill），已实测验证。