当前时间： 2026-01-10 23:43:37
分类：未分类
评论(0)
嫌 AI 写的界面太丑?装上这个开源插件,秒变资深设计师 (附保姆级教程)
最近在GitHub上一个很火的开源项目：ui-ux-pro-max-skill。
这个项目非常厉害，它整理了58种现代UI/UX设计风格，包含每种风格的专业数据、配色方案、使用场景等信息。
那为什么要安装这个开源插件（UI/UX Pro）？
安装后，相当于给你的 AI （Trae/Cursor/Claude code等）装了一个“资深设计师的脑子”或者“高级技能包”。
它的本质是什么？
你原本的 AI（Trae）就像一个刚毕业的实习生，虽然什么都会一点，但写出来的界面可能比较普通，或者有点土。
运行完命令后，电脑里多出来的那些文件夹，里面其实是一大堆 “规定” 和 “设计规范”。
它有什么用？
现在，当你再打开 Trae 让它写网页时，它会先读一遍这些“规定”，然后它的行为就会发生变化：
AI：好的。（然后给你写了一个 普普通通的风格、灰头土脸的图表）。
AI：收到。根据 UI/UX Pro 的规范，我会使用现代化配色、圆角设计、柔和的阴影，并且会自动适配手机端……（然后给你写出一个像苹果或 Airbnb 官网那样好看的界面）。
只要这些文件在你的项目文件夹里，Trae 就会自动变聪明。
中文版：https://ui.cod.ndjp.net/
英文版：https://ui-ux-pro-max-skill.nextlevelbuilder.io/
下面教大家如何安装这个插件、如何利用这个插件在Trae中生成UI界面。
这个教程是针对设计师的，程序员可以绕路走哈，对于程序员来说这个可能很基础了。
一、安装 UI/UX Pro
如果不知道怎么安装的跟着我一步步来，如果知道怎么安装的直接跳过下一步。
因为这个Node.js软件是没有桌面图标的，装完后它就融入到你的系统命令里了，如果你忘记安装过了没，可以先查一下：
如果你是 Windows 电脑：同时按键盘上的Win键 +R键，输入 cmd，然后按回车。
如果你是 Mac 苹果电脑：同时按Command+空格，搜索“终端” (或 Terminal)，打开它。
在打开的窗口里，输入下面这行只有 7 个字符的指令，然后按回车：
情况 A：你已经安装了 ✅如果回车后，屏幕上出现了一串类似 v18.16.0、v20.10.0 这样的数字。
结论： 恭喜，你已经装好了！你可以直接去按照上一条回复的教程操作了。
情况 B：你没有安装 ❌如果回车后，屏幕上出现了中文的“不是内部或外部命令”，或者英文的“command not found”。
去Node.js 官网(nodejs.org) 下载。
像安装普通软件一样，一路点 “Next” 安装完成。
现在把截图里的代码，一行行复制进去运行（注意：#开头的灰色文字是注释，不用输，只输彩色文字部分）。
-
这一步是把这个叫 uipro 的工具下载到你电脑里。
-
Mac 用户如果报错说没权限，在最前面加 sudo ，变成 sudo npm install -g uipro-cli，然后输入开机密码，下图就算安装成功了。
这一步最容易卡住。你需要告诉电脑你要把这个工具装在哪个文件夹里。
-
-
在终端里输入 cd (注意 cd 后面有个空格)。
-
不要回车，直接用鼠标把你刚建的那个文件夹拖拽到终端里，它会自动生成路径。
-
看截图中间那部分，你需要根据你正在使用的 AI 软件选择其中一行输入。
-
如果你用的是Claude，输入：uipro init –ai claude
-
如果你用的是Cursor，输入：uipro init –ai cursor
-
我用的是Trae所以输入：uipro init –ai all
我为什么用 Trae，因为它免费：https://www.trae.cn/
这是最关键的一步。Trae 必须打开这个特定的文件夹，才能读取到里面的配置。
-
-
点击左上角的File (文件)->Open Folder (打开文件夹)。
-
找到你刚才在桌面（或文档里）建的那个ai-project文件夹，选中它并点击“打开”。
打开文件夹后，Trae 会自动扫描目录下的配置文件（它通常能读懂 .cursor 或 .shared 里的规则）。
-
-
为了保险起见，建议你先关闭 Trae 再重新打开一次，这样能确保它加载了最新的规则。
-
二、生成 UI效果
现在，你可以直接去 Trae 里试着让它写个界面看它是不是变聪明了，看看是不是比以前好看多了！在对话框里输入提示词：
帮我设计一个 SaaS 产品的落地页，风格要现代简洁。
发出提示词后，它到下图这里一直会停住，用鼠标点击一下显示【YES/NO】 的那个黑框区域，直接按回车就可以了。
会显示这个页面，按 esc 按钮后，点一下刷新按钮。
如果出现这个报错，就点击【添加到对话】，对话框输入【请帮我修复这个报错】
我们可以看到，他生成的界面效果是这样的，右面空缺了一大块。
在 Hero 区域（首页最上面的部分）的右侧，也就是现在显示 'Dashboard Preview' 的那个大空白框里，请放置一张高质量的、现代化的 SaaS 仪表盘截图。截图要展示一些漂亮的数据图表、统计数字和侧边导航栏，让它看起来像是一个真实产品的界面。
你也可以直接在官网上面复制提示词，里面有39个网站的演示可供参考。
我感觉折腾了大半天，都不如直接使用 Gemini pro 生成更快，效果基本上是差不多的，而且Gemini 生成的内容更多更细致，看下图对比。
只不过Gemini Pro是收费的，用Trae的话是免费的，没怎么了解这个软件，但是我今天使用下来，用Trae用到后面需要排队挺久的。
当然，你也可以在Trae中直接封装成智能体，本来封装成智能体这个我想继续写教程的，但是无奈Trae一直在排队，不写了，大家可以自己研究一下哈~
点赞转发推荐，祝您年薪亿万！
夜雨聆风
