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

前言

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

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

原型开发

使用快捷键【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等平台通过上传设计稿的方式还是可以弥补这种方式的不足的。

参考

mp.weixin.qq.com/s?\\\\_\\\\...

项目地址

项目放到Github了,感兴趣的小伙伴可以自行玩耍

Github地址:github.com/MisterZhouZ...

友情提示

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

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

相关推荐
slowlybutsurely1 天前
Cursor核心功能及开发实战
ai编程·cursor
ζั͡山 ั͡有扶苏 ั͡✾1 天前
AI辅助编程工具对比分析:Cursor、Copilot及其他主流选择
人工智能·copilot·cursor
老A技术联盟2 天前
超实用的Cursor使用技巧之案列分析-教你基于Cursor零代码开发一个chrome插件
人工智能·cursor
slowlybutsurely2 天前
Cursor快速入门
java·ai编程·cursor
ZNineSun2 天前
MCP+Cursor入门
ai·cursor·mcp
鬼鬼鬼3 天前
从软件1.0到3.0:在这场AI浪潮中,我们如何面对?
aigc·ai编程·cursor
散步去海边3 天前
Cursor 进阶使用教程
前端·ai编程·cursor
极客密码12 天前
Cursor再见!简单两步,Augment真无限续杯,爽用Claude 4!
ai编程·cursor·trae
风生水气12 天前
关于AI Coding工具使用的一些经验分享
ai编程·cursor·vibecoding