AI 生成页面全是紫粉渐变？我用 ui-ux-pro-max-skill 重构了整个产品页

我用 Cursor 和 Claude Code 生成过不少页面，有个问题一直躲不掉，AI 生成 UI 的风格同质化。让模型"做一个好看的登录页"，出来的基本是同一个味道，紫色渐变背景、圆角卡片、差不多的排版。配色跟行业没关系，交互状态缺一半，可访问性基本靠运气。想让它贴近产品气质，得反复调 prompt，调十轮也未必对。

后来我试了个开源项目 ui-ux-pro-max-skill。它是一套设计推理引擎，把 UI 设计师的行业经验做成 AI 可调用的知识，让模型先想清楚"这个行业该长什么样"，再动手写代码。

以下是分享我这次完整实战，它是什么、怎么装、怎么用，以及用它重构一个产品登录页前后的真实差异。了解特性、实战重构、对比效果、踩坑总结。

一、先说我遇到什么问题

AI 写代码很强，AI 做设计很弱，弱在五个地方。

风格同质化。十个 AI 生成页面，八个是同一个模子，换个行业标签毫无违和感
配色不符合行业。金融产品给你紫粉渐变，医疗产品给你荧光绿。颜色压根没考虑行业，看着就像随手糊上去的
缺少可访问性。对比度不达标、键盘导航不可用
反模式泛滥。暗色模式配高饱和荧光色、无意义的大面积渐变、动效堆满，设计师看到会皱眉的用法，AI 全踩一遍
需要反复调 prompt。每次都要重新写"不要紫色、要专业、要像 XX 产品"，换个页面又得重来

问题出在大模型缺行业 UI 知识。模型见过很多页面，但不知道金融行业的配色禁忌，不知道 SaaS 后台该用哪套字体，也不知道键盘焦点的意义。于是它平均了所有样本，输出"最像网页"的页面，也就是那个紫粉渐变。

二、ui-ux-pro-max-skill 是什么

先交代定位。ui-ux-pro-max-skill 是面向 AI 编程助手的开源 UI/UX 智能技能 ，核心是一套设计推理引擎。组件库给控件，它给的是"这个行业该怎么设计"的推理结果。

项目基础信息

仓库在 github.com/nextlevelbu...，MIT 协议，v2.0 的核心亮点是 Design System Generator 设计系统生成器。

运行原理走三步。

5 路并行检索 → 推理引擎规则过滤 → 输出完整设计系统 + 交付检查清单

先并行检索行业规则、风格库、配色库、字体库、无障碍规范，再用推理引擎过滤掉不合适的组合，最后输出一套完整设计系统，附一份交付前的自检清单。

支持 Claude Code、Cursor、Windsurf、Copilot 等十余种 AI 编辑器。

核心能力

内置知识库是它最值钱的部分。

161 套行业推理规则，覆盖 SaaS、金融、医疗、电商等，内置行业反模式黑名单，比如金融行业直接禁掉 AI 紫粉渐变
67 种 UI 风格 、161 套行业配色 、57 套字体组合 、25 种图表方案 、99 条 UX 与无障碍规范

多技术栈适配。React、Next、Vue、Angular、Laravel、React Native、Flutter、Tailwind HTML 等，一套设计系统直接落到你用的框架。

设计系统持久化。MASTER 主设计文件 + 页面 override 文件，多页面保持视觉一致性，不用每个页面重新交代一遍风格。

交付前自检清单。对比度、hover 状态、键盘焦点、响应式断点、动画减动偏好（reduced-motion）逐项校验。

项目架构

CLI 安装（uipro-cli），本地 Python 检索脚本，模板动态生成
本地运行，无云端遥测，你的代码和设计数据不出本机
两种调用模式，自动激活（自然语言描述场景即触发）和斜杠命令（/ui-ux-pro-max xxx 显式调用）

适合什么、不适合什么

✅ 适合 落地页、产品页面、后台仪表盘、移动端原型、快速迭代 UI 方案。

❌ 不适合 高精度像素级 Figma 复刻（它输出的是工程落地原型，不是设计稿）、极度小众细分行业（内置规则可能覆盖不到）、完全自由的艺术向创意（它天生带规范约束）。

三、实战，重构一个产品登录页

环境准备与安装

前置条件就两样，Python3 环境加一个 AI 编辑器（Cursor / Claude Code 均可）。安装有两条路，一条在编辑器里跑命令，一条走命令行装。

方式一，Marketplace 命令安装。在编辑器里直接执行这条命令。

bash 复制代码

# 在编辑器内执行
/install ui-ux-pro-max-skill

方式二，uipro-cli 全局 CLI 安装 。开箱前先想清楚要装给当前项目还是全局，两条命令差一个 --global。

bash 复制代码

npm install -g uipro-cli
uipro setup          # 本地模式（当前项目）
uipro setup --global # 全局模式（所有项目）

装完务必重载索引，让 IDE 识别 skill 目录，否则调用会没反应。验证是否生效，在对话里输入一个带行业场景的 prompt，看是否有 skill 被激活的迹象。

原有界面现状

重构目标是一个金融 SaaS 的登录页。旧页面是 AI 默认生成的，背景紫粉渐变、圆角卡片、没有行业气质。重构前先截图留存作为基线，后面对比用得上。

旧界面的问题正好踩满前面说的五类。

配色是通用渐变，和金融行业毫无关系
没有行业风格，放在任何产品下都成立，也就任何产品都不成立
hover、focus 交互状态缺失，按钮悬停没反馈
无无障碍处理，对比度和键盘导航都没管
布局结构是"模板拼装"，不贴合登录页的业务重心

编写调用 prompt，发起重构

基础写法（自然语言自动激活）

arduino 复制代码

用 ui-ux-pro-max-skill 为我的金融 SaaS 产品重构登录页，
技术栈 React + Tailwind，要求符合金融行业的设计规范。

斜杠命令显式调用

arduino 复制代码

/ui-ux-pro-max 金融 SaaS 登录页，React + Tailwind

进阶。指定技术栈、行业、页面类型，直接调用设计系统脚本生成 md 规范文件。

arduino 复制代码

/ui-ux-pro-max 生成设计系统：行业=金融，技术栈=React，页面=登录页

持久化设计系统。生成 MASTER.md 作为全局设计基线，再为登录页生成 override 文件，后续所有页面共用这套基线。

AI 输出了什么

工具输出两部分，完整设计系统加完整业务页面代码。

设计系统包含这几块。

页面模式，登录页的信息层级与模块组织
风格定义，匹配金融行业的 UI 风格
色板，主色 #1E3A8A（深蓝）、辅助色 #3B82F6、CTA 色 #7C3AED，各司其职
字体，Inter + 思源黑体成套配对，符合产品气质
关键动效，200ms ease，同时给出禁用动效的提示
需规避的反模式，金融行业禁用紫粉渐变等
交付检查清单，对比度、hover、键盘焦点、响应式断点、reduced-motion

页面代码完整可跑，色板、字体、动效全部遵循设计系统约束。

工具自带的预交付校验做了这些检查，对比度是否达标、hover/focus 状态是否齐全、键盘可导航性、响应式断点、动画减动偏好。注意这是自检，校验通过也不等于能直接上线，真实浏览器里的业务逻辑还是要自己验证。

本地运行与微调迭代

代码生成后本地起服务预览。跑不起来先按顺序排查，依赖是否安装，端口是否被占用，构建是否报错。

二次迭代直接在生成结果的对话里继续微调，"间距再松一点""按钮改成圆角更小的样式"，上下文还在，设计系统约束就不会丢。不要新开会话微调，否则设计系统上下文丢失，风格会漂移。

复用 MASTER 做其他页面，新页面直接引用已持久化的 MASTER 设计系统，视觉基线与登录页保持一致。业务差异过大时不要生搬硬套，该重建就重建。

四、新旧界面效果对比

视觉层面

对比维度	旧界面（普通 AI 生成）	ui-ux-pro-max-skill 生成新界面
配色	通用 AI 渐变，和行业无关	金融行业匹配色板，主色 `#1E3A8A` / 辅助 `#3B82F6` / CTA `#7C3AED`
字体	随机字体组合	Inter + 思源黑体成套配对，匹配产品气质
UI 风格	千篇一律	按业务匹配 67 种内置 UI 风格之一
阴影/动效	简单粗暴	规范阴影（`0 24px 48px -16px rgba(30,58,138,.16)`）、过渡 200ms，给禁用动效提示

结构与 UX 层面

对比维度	旧界面	新界面
页面模块	简单堆砌	行业最佳页面结构（落地页如 Hero、服务、证言、CTA；登录页为品牌区 → 主标题 → 表单 → 社交登录 → 底部引导）
交互状态	hover、cursor 缺失	完整 hover、focus 状态，pointer 光标处理
响应式	简单适配	375 / 768 / 1024 / 1440 断点规范
可访问性	忽略对比度、键盘导航	WCAG AA 校验，尊重 reduced-motion 偏好

代码质量

旧界面样式零散，颜色、圆角、阴影散落在各处，没有统一规范，改一个按钮的样式要找半天。新界面遵循设计系统约束，颜色、间距、动效全部走 token，可导出 MASTER 文档，多页面复用一致。这是可维护性层面的差异，不只是好看。

实际效果

上面这些对比不是纸面描述。我用生成的设计系统 + 页面代码做了一个可交互的登录页原型，浅色深色主题都完整可用，表单校验、密码可见切换、focus 状态全部工作。

五、使用体验总结

优势

解决 AI 生成 UI 的"审美灾难"。内置 161 套行业经验，不用写超长 prompt 约束配色风格，一句话带行业，输出就对了
输出不止代码，还有完整可复用的设计系统文档。MASTER.md 可以直接收进团队规范
多技术栈、多 AI IDE 兼容，MIT 开源，本地运行无数据上传。注意这里的"无数据上传"指 skill 本体不把代码/设计数据传到云端，编辑器本身的联网行为不在此列
自带反模式黑名单 + 交付 checklist。行业常见 UI 错误提前规避，交付前自检减少人工审查成本
MASTER + override 持久化。大型项目多页面视觉统一，不用每页重复交代

局限与踩坑

首次生成会增加推理耗时。基于 v2.0 实测，带行业规则的首次生成比普通对话多花 30 秒到 1 分钟（视机器配置），后续同会话内再迭代会快很多；部分 IDE 装完要重载索引才能识别 skill 目录，不重载就"没反应"
极度小众垂类行业覆盖不足。内置 161 套规则覆盖主流行业，小众行业（比如某些 B2B 垂直场景）输出会退化到通用模板，需要自行扩展 CSV 规则文件补足
输出是"工程落地原型"，不等于 Figma 级精细像素设计。间距、圆角这些细节大概率还要人工微调
Python 环境依赖。Windows/macOS/Linux 会出现一些小安装问题，前置环境不齐装不上
生成结果仍需人工做业务逻辑校验。工具校验的是 UI 规范，你的业务，表单提交、权限、数据展示这些要自己测，不能直接无脑上线

我的最佳实践

优先用 CLI 方式安装，避免手动复制文件出错
复杂项目一定开 --persist 持久化设计系统，后续页面复用 MASTER（一次性原型可以不开，避免过度设计）
不要完全依赖生成，把它当"高级 UI 设计助手"，产出后做细节打磨
自定义扩展行业规则、配色 CSV，适配自己业务（内置规则覆盖不足时再扩，别一上来就全自定义）
上线前做真实的可访问性、兼容性复测，对比度实测、键盘走查、各断点、真实浏览器

六、总结

回到开头的问题。ui-ux-pro-max-skill 的价值在于，它把 UI 设计师的行业经验做成了 AI 可调用的推理知识库，弥补了普通大模型 UI 知识短板。它不是组件库，组件库给现成控件，它给判断。模型还是那个模型，但给它喂了"金融行业该用什么色、SaaS 后台该有什么状态"的经验，输出就从"像网页"变成"像某个行业的网页"。

适合人群，前端开发者、用 Cursor/Claude 做原型的开发者、快速做产品演示页面的人。

适用边界要拎清楚。它是原型、MVP、产品演示页面的加速器，不能替代专业设计师的深度 UI 工作。复杂交互、品牌系统、精细化视觉，该请设计师还是得请。局限和踩坑在上面一节也说了，所以不能指望它一步到位。

后续可以自己扩展行业规则、二次开发 skill 脚本，把它的知识库喂成你自己的。

七、参考链接

GitHub 上的 ui-ux-pro-max-skill（看 README 的能力列表和安装说明）
项目 README 文档（看 Design System Generator 的完整用法）
相关开源生态，AI 编程助手的 skill 生态项目（对比了解同类技能）

你在用 AI 生成页面时踩过哪些行业反模式？有没有被某个"看起来像 AI 做的"页面坑过？评论区聊聊。