前言
开发时还在为没有设计稿烦恼吗，还在为自己的审美不足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，输入我们整理的提示词，该提示词是在前人基础上调整的，感兴趣的小伙伴可以查看看参考部分的原文。
markdown 代码解读复制代码你是一名精通UI设计和产品规划的大厂全栈工程师，拥有20年的UI/UX设计经验。
我现在想开发一款`小白识百草`的iOS APP应用，需要你帮我输出一套完整的APP原型图，确保准确以下规则：
- 模拟真实用户使用中医识百草类APP的真实场景和需求
- 结合用户需求，以产品经理的视角规划APP的功能、页面呈现和交互
- 结合产品规划，以设计师的视角输出完整的UI/UX原型
- 使用tailwindcss完成页面样式，图片使用unsplash
- 风格参考苹果、Google等大厂视觉
- 以上全面页面都在同一个HTML文件中展示
等待Cursor生成，生成完后我们将拥有一个HTML版的UI/UX设计稿文件
最终预览效果如下，除了引用的部分图片无法加载，其他的没毛病
注意
这种方式生成HTML格式的UI/UX原型图和主流设计稿平台如Figma、墨刀制作的设计稿是不同的，Figma、墨刀制作的设计稿可以直接查看布局和标签样式，这种设计稿只能通过前端调试或查看源码的方式查看具体标签样式，但是可以将设计稿源码或者截图发给Cursor、v0.dev、bolt等平台进行前端页面代码编写和转换。
总结
使用Cursor做HTML版的原型设计是可行的，但是生成的UI/UX设计稿不能像Figma、Pixso等平台制作的设计稿那样可以查看标签布局样式，但是结合目前主流的Cursor、WindSurf、v0.dev等平台通过上传设计稿的方式还是可以弥补这种方式的不足的。
参考
项目地址
项目放到Github了，感兴趣的小伙伴可以自行玩耍
Github地址：github.com/MisterZhouZ…
友情提示
见原文：【Cursor实战】0基础UI小白如何快速拥有一个产品原型
本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。
评论记录：
回复评论：