Cursor 生成MG-Prophet1.0官网实战

38 阅读2分钟

作者:Penny Yang

每日一汤:长期持之以恒的去做你的想法,日子就会越过越有滋味。

摘要:使用Cursor 上传一张截图,生成项目的一个首页实战。

目标图片:

image.png

这张图片是市面一些AI网站制作原型生成的图片。现在需要前端利用AI工具生成这样的网站代码,同时也能看到使用Cursor对图片的还原度。

目标工具:Cursor

提示词问答及效果

提示词一:

image.png

生成效果:

image.png

第一轮的效果是基本把网页该有的框架都搭建完成,风格也一致。这里可以打50分了,基本我完成50%了。但是许多细节是没有处理的,还有就是不能将图片中的图片摘取出来用。没做到类似的智能,后续应该需要自动生成图片来使用,或者能解决一个UI的人天成本。接下来就是继续问答做细节的优化。此外,顺便聊一下,其实按照现在的AI发展速度,有许多AI网站已经能通过一张图片生成一个网站甚至搭建好数据库、做好了后端连接。

提示词二

分别让他去完善细节

第二轮

按照截图区块,分别拆分一次问答让cursor按照截图完善细节。最后经过6轮细节优化后,得到下面的效果。

image.png

image.png

image.png

image.png

image.png

到这里,基本的框架、页面、细节都出来了,就差需要自己上传图片,补充缺失图片的位置。还原度大致到85%了。这样完成大致耗时40分钟,大部分时间都是在等待优化生成页面过程。网速好点应该会更快,我是公司内网,偏慢。

到这就是一次使用Cursor生成截图的一次实际使用经验。

整个过程都是使用的聊天式引导工具进行辅助开发,实际没有手写一行代码。

image.png

效果也还行,得到产品经理的认可。