开发时还在为没有设计稿烦恼吗，还在为自己的审美不足UI不好看苦恼吗，学会这项技能，0基础UI小白也可以快速拥有自己的产品原型。使用Cursor这么久，我们应该都知道了，Claude 3.7拥有不错的编程和审美能力，一直都在使用Claude 3.7的编程能力，今天来试试Claude 3.7的原型设计能力。
对以往实战案例感兴趣的小伙伴也可以看往期：
- 【Cursor实战】浏览器Tab自动分组插件
- 【Cursor实战】实现一个浏览器截图插件
- 【Cursor实战】从0开发一个小程序到被拒
- 【Cursor实战】零代码开发一个Dify工作流
- 【Cursor实战】Cursor+Figma MCP UI设计稿一键转前端代码
使用快捷键【Cmd+I】唤起Composer，输入我们整理的提示词，该提示词是在前人基础上调整的，感兴趣的小伙伴可以查看看参考部分的原文。
等待Cursor生成，生成完后我们将拥有一个HTML版的UI/UX设计稿文件
cursor 教程
最终预览效果如下，除了引用的部分图片无法加载，其他的没毛病
这种方式生成HTML格式的UI/UX原型图和主流设计稿平台如Figma、墨刀制作的设计稿是不同的，Figma、墨刀制作的设计稿可以直接查看布局和标签样式，这种设计稿只能通过前端调试或查看源码的方式查看具体标签样式，但是可以将设计稿源码或者截图发给Cursor、v0.dev、bolt等平台进行前端页面代码编写和转换。
使用Cursor做HTML版的原型设计是可行的，但是生成的UI/UX设计稿不能像Figma、Pixso等平台制作的设计稿那样可以查看标签布局样式，但是结合目前主流的Cursor、WindSurf、v0.dev等平台通过上传设计稿的方式还是可以弥补这种方式的不足的。
mp.weixin..com/s?\\_\\…
项目放到Github了，感兴趣的小伙伴可以自行玩耍
Github地址：github.com/MisterZhouZ…
见原文：【Cursor实战】0基础UI小白如何快速拥有一个产品原型
本文同步自微信公众号 “程序员小溪” ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/241060.html原文链接：https://javaforall.net
