视频号：黄益贺
YouTube / Medium: huangyihe
用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社群。那咱们下期见！
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
