TailwindCSS

Key Takeaway

用Cursor做UI，我这边有两个最简单、最有效的方法——一个免费，一个付费。不管你是做网页的UI还是应用程序的UI，都可以。

为什么不直接用Cursor里的模型？因为那些模型画UI都太差了，即使是Claude 4也不太行。

举个例子，这是我用Keynote为第二款产品画的UI。我把图片导出来，贴进Cursor里，使用MAX模式，选择目前最牛逼的模型Claude Opus 4，让它照着生成。

你看，这是它最终的成品，真挺拉跨的。比如，大标题分成了两行；Submit按钮没有居中；How It Works部分明明有三个容器，结果有一个跑到下边去了。

我做上一款产品Prompt House的时候，就遇到了模型怎么都画不好UI情况。非常恼火。后来实在没办法，只能让它告诉我具体的代码位置，我手动调整。

那今天要分享的方法，是这几天我新学到的。先说免费的。

当你有了一张UI的图片，不要直接放到Cursor里。你可以打开Gemini、ChatGPT或者Claude——不管哪个都行。比如我这边用的是Gemini，并且打开了Canvas功能。

我把图片贴进去，让它根据图片的样子生成一份JSON格式的设计系统配置文件。这份JSON输出包含了整体设计风格、结构元素和布局原则等等。

然后，再把这份JSON配置贴到Cursor里边，让模型完全按照它来输出。你看，这个结果是不是好多了？基本是一模一样。

那么，为什么这套方法有效？

因为，虽然模型理解自然语言完全没问题，但是一旦涉及需要精确、结构化、无歧义的数据输入场景，JSON这样的结构化数据格式，能让模型的理解更准确、处理更高效、输出更稳定。

OK，这是第一种方法，完全免费，但是略微麻烦一点。如果你做UI的需求比较强，比如需要来回修改什么的，那我推荐，直接通过API调用v0的模型。

v0模型是Vercel推出的，专门针对UI和前端开发做了训练。所以在处理这个类型的工作上，v0会比Claude之类的通用大模型更擅长、更适合。

我之前经常用v0.dev这个网页来生成UI。那如果要用API调用模型的话，就需要订阅，一个月20美金。我一般需要的时候就开一个月，集中把前端的工作都搞定了。

订阅之后，来到后台，可以生成一个API Key。回到Cursor，在模型设置里，选择API Keys选项，在这边我们可以使用自己的Key。

因为v0的API符合OpenAI的规范，所以我们把Override OpenAI Base URL选项打开。把URL中间部分改成v0.dev。填入v0的API Key，再选择Verify就搞定了。

当我们要使用的时候，可以选择一个OpenAI的模型，比如GPT-4o。虽然它显示的是GPT-4o，但其实走的是v0的通道，所以调用的是v0的模型。这样一来，我们就可以直接在Cursor里完成所有工作啦。

最后，one more thing。完成基础的UI之后，我们可以添加一些动画效果来提升用户体验。比如，可以让Cursor添加Framer Motion。我在Prompt House就用上了，网页版和Mac版都有，整体会流畅许多。

或者，你也可以使用Reactbits之类的网站，把动画的代码复制粘贴到Cursor里，让模型去集成。

就像我在社群里说的，整个前端UI会涉及到这四个部分：React是项目经理和架构师；Radix UI是功能工程师；Tailwind CSS是视觉设计师；Framer Motion是动效设计师。它们共同构成了一个非常现代和强大的前端UI开发工具箱。大家在开发的时候可以组合使用。

OK，以上就是本期内容。想交流AI，想成为超级个体，想找到志同道合的人，就来我们newtype社群。那咱们下期见！