作者:Penny Yang
每日一汤:长期持之以恒的去做你的想法,日子就会越过越有滋味。
摘要:使用Cursor 上传一张截图,生成项目的一个首页实战。
目标图片:
这张图片是市面一些AI网站制作原型生成的图片。现在需要前端利用AI工具生成这样的网站代码,同时也能看到使用Cursor对图片的还原度。
目标工具:Cursor
提示词问答及效果
提示词一:
生成效果:
第一轮的效果是基本把网页该有的框架都搭建完成,风格也一致。这里可以打50分了,基本我完成50%了。但是许多细节是没有处理的,还有就是不能将图片中的图片摘取出来用。没做到类似的智能,后续应该需要自动生成图片来使用,或者能解决一个UI的人天成本。接下来就是继续问答做细节的优化。此外,顺便聊一下,其实按照现在的AI发展速度,有许多AI网站已经能通过一张图片生成一个网站甚至搭建好数据库、做好了后端连接。
提示词二
分别让他去完善细节
第二轮
按照截图区块,分别拆分一次问答让cursor按照截图完善细节。最后经过6轮细节优化后,得到下面的效果。
到这里,基本的框架、页面、细节都出来了,就差需要自己上传图片,补充缺失图片的位置。还原度大致到85%了。这样完成大致耗时40分钟,大部分时间都是在等待优化生成页面过程。网速好点应该会更快,我是公司内网,偏慢。
到这就是一次使用Cursor生成截图的一次实际使用经验。
整个过程都是使用的聊天式引导工具进行辅助开发,实际没有手写一行代码。
效果也还行,得到产品经理的认可。