【Cursor实战】0基础UI小白如何快速拥有一个产品原型

科技前沿 • 2026-04-02 12:59 • 阅读 0

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

开发时还在为没有设计稿烦恼吗，还在为自己的审美不足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，输入我们整理的提示词，该提示词是在前人基础上调整的，感兴趣的小伙伴可以查看看参考部分的原文。

你是一名精通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等平台通过上传设计稿的方式还是可以弥补这种方式的不足的。
https://mp.weixin..com/s?__biz=Mzk0NDI1NzI2Mw==&mid=&idx=1&sn=ba0473d9130d8898ede&scene=21#wechat_redirect
项目放到Github了，感兴趣的小伙伴可以自行玩耍
Github地址：https://github.com/MisterZhouZhou/cursor-uiux
见原文：【Cursor实战】0基础UI小白如何快速拥有一个产品原型

本文同步自微信公众号 “程序员小溪” ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。

【Cursor实战】0基础UI小白如何快速拥有一个产品原型

相关推荐