现在位置: 首页 / 工具收集 / 正文

嫌 AI 写的界面太丑？装上 ui-ux-pro-max-skill 这个开源插件，秒变资深设计师 (附保姆级教程)

最近在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 就会自动变聪明。
好，来，直接上链接！
Github开源：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
UI UX Pro Max官网：https://ui-ux-pro-max-skill.nextlevelbuilder.io/
下面教大家如何安装这个插件、如何利用这个插件在Trae中生成UI界面。
这个教程是针对设计师的，程序员可以绕路走哈，对于程序员来说这个可能很基础了。

 一、安装 UI/UX Pro

在中文版的页面里，找到安装的按钮，根据步骤安装。
如果不知道怎么安装的跟着我一步步来，如果知道怎么安装的直接跳过下一步。

第一步：安装基础环境 (如果你没装过)
因为这个Node.js软件是没有桌面图标的，装完后它就融入到你的系统命令里了，如果你忘记安装过了没，可以先查一下：
1、打开终端
如果你是 Windows 电脑：同时按键盘上的Win键 +R键，输入 cmd，然后按回车。
如果你是 Mac 苹果电脑：同时按Command+空格，搜索“终端” (或 Terminal)，打开它。
2、输入检查指令
在打开的窗口里，输入下面这行只有 7 个字符的指令，然后按回车：
(注意：node和-v中间有一个空格)
3、看结果
情况 A：你已经安装了 ✅如果回车后，屏幕上出现了一串类似 v18.16.0、v20.10.0 这样的数字。

结论： 恭喜，你已经装好了！你可以直接去按照上一条回复的教程操作了。


情况 B：你没有安装 ❌如果回车后，屏幕上出现了中文的“不是内部或外部命令”，或者英文的“command not found”。

第二步：安装Node.js

去Node.js 官网(nodejs.org) 下载。
像安装普通软件一样，一路点 "Next" 安装完成。

第三步：打开终端

第四步：输入安装指南中的指令

现在把截图里的代码，一行行复制进去运行（注意：#开头的灰色文字是注释，不用输，只输彩色文字部分）。

1. 安装这个工具
在终端里输入第一行，然后按回车（Enter）：

  • 这一步是把这个叫 uipro 的工具下载到你电脑里。
  • Mac 用户如果报错说没权限，在最前面加 sudo ，变成 sudo npm install -g uipro-cli，然后输入开机密码，下图就算安装成功了。


2. 进入你的项目文件夹
这一步最容易卡住。你需要告诉电脑你要把这个工具装在哪个文件夹里。

  • 在桌面建一个文件夹命名为【ai-project】
  • 在终端里输入 cd  (注意 cd 后面有个空格)。
  • 不要回车，直接用鼠标把你刚建的那个文件夹拖拽到终端里，它会自动生成路径。
  • 现在按回车。

3. 选择你的 AI 助手进行安装
看截图中间那部分，你需要根据你正在使用的 AI 软件选择其中一行输入。

  • 如果你用的是Claude，输入：uipro init --ai claude
  • 如果你用的是Cursor，输入：uipro init --ai cursor
  • 我用的是Trae所以输入：uipro init --ai all

下图这么多软件都可以，你下载了哪个就用哪个。
我为什么用 Trae，因为它免费：https://www.trae.cn/

看到下面这张图说明安装成功了！

第五步：在 Trae 中打开这个文件夹

1、在 Trae 中打开这个文件夹
这是最关键的一步。Trae 必须打开这个特定的文件夹，才能读取到里面的配置。

  • 打开你的Trae或其他软件。
  • 点击左上角的File (文件)->Open Folder (打开文件夹)。
  • 找到你刚才在桌面（或文档里）建的那个ai-project文件夹，选中它并点击“打开”。


2、唤醒 AI 助手
打开文件夹后，Trae 会自动扫描目录下的配置文件（它通常能读懂 .cursor 或 .shared 里的规则）。

  • 在 Trae 里打开右侧的Chat（对话框）。
  • 为了保险起见，建议你先关闭 Trae 再重新打开一次，这样能确保它加载了最新的规则。
  • 看到下图这些文件，说明全部安装成功了！

 二、生成 UI效果

现在，你可以直接去 Trae 里试着让它写个界面看它是不是变聪明了，看看是不是比以前好看多了！在对话框里输入提示词：

帮我设计一个 SaaS 产品的落地页，风格要现代简洁。

发出提示词后，它到下图这里一直会停住，用鼠标点击一下显示【YES/NO】 的那个黑框区域，直接按回车就可以了。

然后再点击删除，点击 ✅

会显示这个页面，按 esc 按钮后，点一下刷新按钮。

如果出现这个报错，就点击【添加到对话】，对话框输入【请帮我修复这个报错】

然后复制下图里面的地址就可以看到页面效果了！

我们可以看到，他生成的界面效果是这样的，右面空缺了一大块。

所以我让它修改一下，提示词：

在 Hero 区域（首页最上面的部分）的右侧，也就是现在显示 'Dashboard Preview' 的那个大空白框里，请放置一张高质量的、现代化的 SaaS 仪表盘截图。截图要展示一些漂亮的数据图表、统计数字和侧边导航栏，让它看起来像是一个真实产品的界面。

 

下图就是修改后的最终效果～

你也可以直接在官网上面复制提示词，里面有39个网站的演示可供参考。
我上面的案例是随便写的提示词用来测试一下的~

我感觉折腾了大半天，都不如直接使用 Gemini pro 生成更快，效果基本上是差不多的，而且Gemini 生成的内容更多更细致，看下图对比。

只不过Gemini Pro是收费的，用Trae的话是免费的，没怎么了解这个软件，但是我今天使用下来，用Trae用到后面需要排队挺久的。

转自：https://mp.weixin.qq.com/s/QuHNnxlOFSDWtlXgopoMjA