【Cursor设计师2.0】 Cursor 让普通人也能轻松设计一套 APP 精美 UI

视频介绍了利用 Cursor 配合 Claude 3.7 模型，通过优化提示词和引入 Tailwind CSS 快速生成精美 APP UI 的实操方法。

UP主: 是魔王哒-流光卡片 · 时长: 5:15 · 🔗 B站原视频

发布: 2025-03-02 · 收录: 2025-03-24

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

2.0 版本：用 Claude 生成 APP UI 的进化效果

现在来看一下进化版的，用 Claude 生成一个 APP 的 UI 效果。第一眼是不是有点儿惊艳？像这是我刚才用 AI 生成出来的一个设计效果。

在前面这个 1.0 的实践版本中，有一个问题：我们直接让它生成所有完整的代码，包括 HTML 结构和 CSS。它都是用原生来生成的。

在 2.0 版本中，我们引入了 Tailwind CSS，来简化 CSS 样式代码。这样它能够更快实现一些好看的样式，并且减少输出、消耗更少的 token。

改进后就是使用下面这个提示词生成，也不需要再添加什么优秀的 HTML 案例了，并且你也可以直接使用 A 键的模式，全部自动生成。

在 1.0 版本的时候，需要使用 ASK 模式才能保证正常不报错。不过我刚才试了一下，在一些特殊场景下使用 agent 模式还是会报错，最好还是使用 ASK，会稳一点。

这个提示词我会放到视频简介，你可以直接复制粘贴去使用。

这里我们接着修改一下产品需求，改成设计一个健康类的 APP。并且我把前面的提示词中要求的暗色模式、玻璃拟态等视觉效果给删掉了，想让 AI 稍微更自由发挥一下。

还是使用跟 1.0 版本一样的 ASK 模式，还有一样的模型。发送提示词之后，就等代码生成。会发现代码没生成完的话，就一直发“继续”，直到所有代码都生成完毕。

我给你看一下聊天记录：把前面的提示词发送出去之后，就一直等待生成。然后我这里就接着发“继续”，再等待生成，再发“继续”，直到最后没了，就这样。

最后生成的效果就是这样。相比于 1.0 版本，这个效果会更好，并且过程中你等待的时间也更少。

不过得说一下，如果你要生成比较复杂的 UI，比如看起来像 B 端的，或者考试学习这种 APP，它们的界面元素会比我们这种多很多。生成的效果可能会出现布局直接出问题，样式也可能有点小问题。

对于复杂元素比较多的 APP，生成第一版之后，都需要进一步引导调整。

引导调整也不会太麻烦，你只需要像个老板一样，把它做得不好的地方截图发给它，让它改善这个糟糕、错误的布局就可以了。

你也可以通过调整初始提示词来优化这个问题。

前面的实践中，有人专门找我帮忙生成 UI，他花了一点钱。第一版生成的效果是这样的，会发现有很多问题。后面让 AI 进行调整，把一些布局问题解决掉。

截图刚才放错了，应该是这个。看前面的一些布局问题、一些样式，就解决了。

这个提示词的作者是这位，也是一个很厉害的程序员。看一下他的 GitHub 就能知道。

演示到这里了，有什么问题欢迎留言，看到会回复的。