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

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

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

一句话结论

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

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

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

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

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

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

• 没有行业审美经验

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

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

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

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

我们怎么测的

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"

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

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

字体方面，原推荐 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 底线

适合谁 / 不适合谁

适合

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

• 用 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   # 全局装一次，所有项目通用

结论

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

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

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

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

更多案例: uupm.cc/#styles