【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小白如何快速拥有一个产品原型

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

相关推荐
大熊猫侯佩13 小时前
无需自己写半行代码:让 AI 编程智能体(Agent)化身神笔马良为我们自动仿制 App 界面
swiftui·agent·cursor
全宝19 小时前
⚡我做了一个批量下载 VSCode 插件的小工具
前端·visual studio code·cursor
qiyue771 天前
如何选择AI IDE?对比Cursor分析功能差异
ai编程·cursor·trae
老纪的技术唠嗑局1 天前
Vibe Coding 时代的开源社区开发新体验
cursor·mcp·vibecoding
极客密码2 天前
Cursor再见,隔壁Augment赠送的免费一个月650额度会员我用上了!
aigc·ai编程·cursor
mCell2 天前
受够Cursor卡成蜗牛!我换用Argument,每月白嫖300次真香!
ai编程·visual studio code·cursor
龙萱坤诺3 天前
【教程】无需迁移IDE!Augment原生插件实现Cursor无缝平替 Claude-4无限用
cursor·cursor工具·augment code
人生都在赌3 天前
一个AI工作流如何让代码审查从手动到智能?实战拆解
ai编程·devops·cursor
qiyue773 天前
AI编程专栏(七)-什么是上下文工程,与提示工程区别
人工智能·ai编程·cursor
清沫4 天前
上下文工程(Context Engineering)
前端·claude·cursor