当前位置:首页>java>用 AI 写代码,界面丑得像一个模子刻出来的?这个Skill治好了我的强迫症

用 AI 写代码,界面丑得像一个模子刻出来的?这个Skill治好了我的强迫症

  • 2026-10-21 13:28:24
用 AI 写代码,界面丑得像一个模子刻出来的?这个Skill治好了我的强迫症

今天分享一个专门解决 AI 编程"审美缺陷"的开源项目——UI/UX Pro Max Skill,GitHub 上 17k stars,几乎支持所有主流 AI 编程工具。

先说个扎心的事实:用 Cursor、Claude 这些工具写代码,最让人崩溃的不是代码质量,而是生成的界面千篇一律。

紫粉渐变、Inter 字体、白色卡片、圆角按钮,再加一个"AI助手"风格的渐变图标。你让它做 SaaS 官网是这样,做电商页面还是这样,做金融 App 依然是这样。

这就是圈子里说的"AI slop"——AI 生成物的审美趋同。

为什么会这样?因为 AI 模型在训练的时候,见得最多的就是这类"安全牌"设计。紫色代表科技感,Inter 是"设计师都在用的字体",白色背景不会出错。这些都是设计领域的"政治正确",AI 学得特别到位。

但问题是,客户要的不是"正确",是"独特"。一个美容SPA的官网,你给人家整紫色渐变,客户能满意才怪。

UI/UX Pro Max Skill 这个项目,本质上就是给 AI 装了一个"设计师大脑"。

它把专业设计师的知识体系整理成了一套数据库,里边有 57 种 UI 风格、95 套行业配色、56 组字体搭配、100 条行业设计规则。更关键的是,它还整理了每个行业的"反模式"——就是那些绝对不能踩的坑。

比如银行类 App,它会告诉 AI:千万别用紫粉渐变,别用花哨动效,要用深蓝色系,字体要稳重。美容SPA呢?用柔和阴影、粉色鼠尾草绿配色、优雅衬线字体,别整深色模式。

这才是真正有价值的东西。

很多人以为设计就是"好看",其实设计的本质是"合适"。一个金融产品用玻璃拟态,用户会觉得不靠谱。一个游戏官网用极简风,用户会觉得无聊。

这种行业经验,是设计师们用无数个被毙掉的方案换来的。现在这个项目把它们整理成了 AI 能理解的格式,直接注入到你的开发流程里。

这个项目最核心的功能叫"设计系统生成器"。

你只需要说"帮我做个美容SPA的官网",它会自动启动一套推理流程:先识别你的产品类型,然后从数据库里匹配最合适的风格、配色、字体,再结合行业反模式做排除,最后输出一套完整的设计规范。

输出的内容非常具体:用什么颜色、什么字体、什么动效、什么布局模式,甚至连"不要用深色模式""不要用霓虹色"这种负面清单都有。

AI 拿着这套规范去写代码,出来的东西就不是那种千篇一律的"AI味"了。

安装也很简单,一行命令:

# Install CLI globallynpm install -g uipro-cli# Go to your projectcd /path/to/your/project# Install for your AI assistantuipro init --ai claude      # Claude Codeuipro init --ai cursor      # Cursoruipro init --ai windsurf    # Windsurfuipro init --ai antigravity # Antigravity (.agent + .shared)uipro init --ai copilot     # GitHub Copilotuipro init --ai kiro        # Kirouipro init --ai codex       # Codex CLIuipro init --ai qoder       # Qoderuipro init --ai roocode     # Roo Codeuipro init --ai gemini      # Gemini CLIuipro init --ai trae        # Traeuipro init --ai all         # All assistants

然后在 Cursor / Windsurf / Antigravity 里用 /ui-ux-pro-max 帮我做个SaaS落地页 就能触发,其他AI工具的用法都差不多,可以看下文末的Github

支持的工具很全:Cursor、Claude Code、Windsurf、GitHub Copilot、Kiro、Codex CLI、Gemini CLI,基本上主流的都覆盖了。

说点更深层的思考。

这个项目其实揭示了 AI 编程的一个核心问题:AI 擅长"通用",但现实需要"专业"。

你让 AI 写一段排序算法,它能给你十种写法。但你让它做一个金融 App 的界面,它只会给你那套见过最多次的模板。因为算法是有明确标准的,而设计是需要行业经验的。

所以未来 AI 编程的进化方向,一定是"AI + 专业知识库"。通用模型提供基础能力,专业知识库提供垂直经验。

UI/UX Pro Max Skill 就是这个思路的典型实践。它不是要替代 AI,而是给 AI 补上那块"行业设计师"的短板。

当然,这个项目也有局限。

它整理的风格再多,也覆盖不了所有场景。有些客户就是要那种"从未见过的独特设计",这种情况还是得靠人。

但对于大多数标准化的项目来说,有这么一套知识库兜底,至少能保证出品不会太离谱。用互联网的话说,叫"提高下限"。

最后说一下这个项目的定位。

它不是给专业设计师用的,专业设计师有自己的设计系统。它是给那些"会写代码但不太懂设计"的开发者用的,或者给那些"用 AI 快速出原型"的场景用的。

在 Vibe Coding 时代,越来越多的人开始用 AI 写代码。但代码只是手段,最终呈现给用户的是界面。界面丑,用户体验就差,产品就失败。

这种"设计知识库"类的工具,可能会成为 AI 编程生态里非常重要的一环。

项目地址:github.com/nextlevelbuilder/ui-ux-pro-max-skill

全文完,👇如果觉得有用,欢迎点赞转发关注,把最新的技术变化掰碎了讲给你听。

往期文章:
1 个工具干翻 17 个:这个 MCP 让 AI 操作浏览器省 80% 的 Token
你大爷永远是你大爷,Google Antigravity 终于支持 Skills 了
都2026年了,你为什么依然觉得AI编程不好用?亚马逊工程师怒怼:别怪模型,是你太拉
西西弗斯式AI编程:永不放弃的Agent,干翻200刀的Claude Code
Claude Code 订阅费太贵?这个工具让你0成本用上 Claude 和 Gemini
同时开3个AI帮你写代码,一个人这回真能顶一个团队了
这三个Skill,让你的大模型从"能写代码"变成"编程专家"
Google Antigravity上手指南:让5个AI同时帮你写代码,还能自己测试

最新文章

随机文章