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

前言

开发时还在为没有设计稿烦恼吗，还在为自己的审美不足UI不好看苦恼吗，学会这项技能，0基础UI小白也可以快速拥有自己的产品原型。使用Cursor这么久，我们应该都知道了，Claude 3.7拥有不错的编程和审美能力，一直都在使用Claude 3.7的编程能力，今天来试试Claude 3.7的原型设计能力。

对以往实战案例感兴趣的小伙伴也可以看往期：

原型开发

使用快捷键【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等平台进行前端页面代码编写和转换。