Cursor从小白到专家-第17课：Cursor生成UI太丑？四种方法减少UI拉扯

介绍通过指定UI风格、参考图、结合V0工具及设计稿转代码四种方法，优化Cursor生成的前端界面美观度。

UP主: Next蔡蔡 · 时长: 3:11 · 🔗 B站原视频

发布: 2025-01-20 · 收录: 2025-03-24

标签: Cursor · AI编程 · 前端开发 · UI设计 · V0

课程开场：为什么 Cursor 生成的 UI 容易丑、还会反复拉扯

哈喽各位精神股东们，今天是 Cursor 系列课程的第 17 课。

如果你不给 Cursor 做任何限定，它生成的前端大概率有点丑。后续任务就会变成和 Cursor 在 UI 上反复拉扯。为了减少这种低效的拉扯，大家可以尝试第 17 课的四种方法，实测有效。

这是之前第 12 课开发的小程序 UI，完全是由 Cursor 自己生成的，所以非常简陋。现在尝试用第一种方法对整体 UI 进行重构优化。

目前有很多常见的 UI 组件库，比如 React UI 组件库有 Material UI、Ant Design、View UI；Vue UI 组件库有 Element UI；通用 UI 组件库有 Bootstrap 等。但 UI 组件库需要根据项目类型选择，初学者选择起来有一定难度。

所以可以换个思路：直接给 AI 指定一些通用的 UI 风格，比如：

这是指定 Cursor 根据 Apple Design 重构优化后的界面；这是指定 Cursor 根据 Glassmorphism 重构优化后的界面。放在以前，我完全不敢想象没有设计和开发，一个非科班小白就能独立做出这类磨砂玻璃风格的小工具。

现在的证件照小程序没有底部 tabs 和更多功能。如果你想模仿竞品，增加一些页面和功能，最快捷的方法就是把参考图丢给 Cursor，并具体描述你想参考的方向。

大家注意这里的描述提示词，特别提到暂时不用考虑新页面的功能实现。这样就能实现前后端任务分离，让 Cursor 当下专注解决前端 UI 的实现；不然一下子要的太多，很容易出错。

由于没有提前给到 Cursor 关于 tabs 的 icon，中间运行报错过。之所以专门提到这点，是因为后面的方法三可以直接生成完整页面，包括页面上的各种 icon。

这就是 Cursor 根据参考图和提示词生成的新版本：包括三个页面共享的底部 tabs，以及两个全新页面。两个全新页面基本把参考图的布局和文案都复刻过来，唯一没复刻出来的就是各种 icon。

V0 对前端的审美很在线。我们只需要丢给它一张参考图，加上几句简单的描述，V0 就能将页面高度还原出来。

V0 生成的页面在 UI 细节上比方法二更好，其中就包括方法二做不到的各种 icon 实现。

比如用一张截图复刻豆瓣 App 的读书页面，整个过程我只丢给了 V0 一张截图和一本书籍封面。

V0 生成前端页面后，可以点击右上角的代码 icon，在弹出的 “Add to code base” 窗口中：

当然，V0 不仅复刻页面的能力很强，在没有参考图辅助的情况下，生成的页面 UI 也很在线。比如这是用 V0 生成的 MBTI 测试网站，审美上是 OK 的。

这种方法适合你已经有了 Figma 或 Pixso 设计稿。你可以用 Figma to Code 或 Pixso to Code 插件，把设计稿的页面模块转成对应的代码。

值得一提的是，Figma to Code 插件需要 Figma 会员才能用，而 Pixso to Code 插件是免费的。

有了设计稿转成的代码后，就可以告诉 Cursor 在哪个页面添加这块代码，然后附上前面复制好的代码。大家可以对比一下原来的设计稿，以及 Cursor 实际还原后的页面，还原度非常高。

Cursor 第 17 课的内容就到这里了，我们第 18 课见。