AI 生成的界面太土？给 Coding Agent 装个设计脑子

最近很多人用 AI 写前端，速度是快了，问题也很明显：页面能跑，界面很像临时拼出来的后台模板。颜色靠感觉，间距靠默认值，按钮像按钮，但整体没有产品感。

日本账号 AI 駆動塾分享了一个专门解决这个问题的开源 Skill：UI UX Pro Max 。它的定位很直接：把设计规则、专业风格、产品类型判断标准交给 Coding Agent，让它在写界面前先做一次设计判断。

它解决的痛点

普通 AI 编码工具做 UI，常见失败点不在代码，而在设计决策。

它不知道金融产品该避免什么颜色，不知道医疗后台该优先可读性和无障碍，也不知道一个 SaaS 落地页应该先放产品利益点、社交证明，还是互动演示。

UI UX Pro Max 做的事，是把这些经验拆成可搜索的数据和规则：

84 种 UI 风格
161 套产品类型和配色规则
73 组字体搭配
99 条 UX 指南
25 种图表建议
17 种技术栈适配

仓库 README 里也列了早期版本的 67 种风格、 161 条行业推理规则。当前 skill.json 标注的版本是 2.6.2，数据范围已经扩到 84 种 UI 风格和 17 种技术栈。

用起来像给 Agent 加一层设计审稿

它的核心是一套可被 Agent 检索的设计知识库，和传统 UI 组件库走的是两条路线。

比如你让 Agent 做一个美容院落地页，它会先匹配产品类型，再给出页面模式、视觉风格、配色、字体、动效和交付前检查项。 README 里的示例会输出这样的结论：Hero 区优先、服务介绍、客户评价、预约入口；风格偏柔和 UI；配色用暖白、柔粉、鼠尾草绿和金色点缀；同时明确避开刺眼霓虹、生硬动画和不合适的深色模式。

这一步很有用。很多 AI 生成的页面看起来廉价，问题通常不在 Tailwind，而在提示词只写了“做得好看一点”。这类 Skill 把“好看一点”翻译成更具体的约束。

安装方式

如果用 Claude Code，可以走 Marketplace：

/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
cd /path/to/your/project
uipro init --ai claude

它支持的工具很多，README 里列了 Claude Code 、 Cursor 、 Windsurf 、 Codex CLI 、 GitHub Copilot 、 Kiro 、 Gemini CLI 、 OpenCode 、 Continue 、 Trae 、 Warp 、 Augment 等。

如果你想给 Codex 装：

uipro init --ai codex

想一次性给所有支持的助手生成配置：

uipro init --ai all

实际怎么用

安装后，不用背复杂命令。你可以直接让编码助手做 UI：

为我的 SaaS 产品做一个落地页，目标用户是中小企业老板，风格要专业、可信、移动端也要好看。

如果想直接跑设计系统生成器，也可以用仓库里的搜索脚本：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system -p "MyApp"

它会返回页面结构、推荐风格、配色变量、字体、效果和交付检查。你再让 Agent 按这份结果写代码，成品会比“随便给我做个漂亮页面”稳定得多。

它还支持按领域搜索：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind

我建议这样用

第一步，先让 Agent 只生成设计系统，不写代码。你看配色、字体、页面结构是否符合产品定位。

第二步，让它根据设计系统做首屏和核心页面。不要一次做完整站点，先把一个页面磨到顺眼。

第三步，用交付检查项卡一遍：点击元素有没有 hover，移动端 375px 是否可用，浅色模式文字对比度够不够，键盘焦点是否清楚，是否尊重 prefers-reduced-motion。

这套东西最适合两类人：一类是会写代码但设计感弱的独立开发者；另一类是已经在用 Claude Code 、 Cursor 、 Codex 的小团队。它不能替代设计师，但能把“AI 随手糊一个界面”的下限抬高不少。

来源链接: https://x.com/L_go_mrk/status/2072628095501426811?s=20
源地址: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

来源：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill