Trae + Claude-3.7-Sonnet一步快速生成App原型图

925 阅读2分钟

我正在参加Trae「超级体验官」创意实践征文,本文所使用的 Trae 免费下载链接:

www.trae.ai/?utm_source…

下载到最新的1.0.9版本,可以如愿的看到集成我们自己的DeepSeek R1了:

image.png

右侧直接切换到## Trae-Builder模式,我们这次要直接快速开发一个App原型,需求如下:

我想开发一个ai农作物管理app,现在需要输出原型图,请通过以下方式帮我完成app所有原型图片的设计:

  • 1、思考用户需要ai农作物管理app实现哪些功能
  • 2、作为产品经理规划这些界面
  • 3、作为设计师思考这些原型界面的设计
  • 4、使用html在一个界面上生成所有的原型界面,要高级有质感,遵守设计规范,注重UI细节。请引入 tailwindcss CDN 来完成,可以使用FontAwesome等开源图标库,界面中不要有滚动条出现。
  • 5、让原型显得更精美和接近真实我希望这些界面是需要能直接拿去进行开发的

选择Claude-3.7-Sonnet,晚上大家都在看球赛看两会,所以不用排队,白天一般会出现偶尔的排队,不过提示前面有67人,但是很快就排到了:

image.png

点击“全部接受”2次:

image.png

~WOW,aha moment来了,基本的html出来了,不过发现到488行就截断了,超过了最大输出Token:

image.png

不要慌,我们使用万能咒语:

继续

image.png

等待大约20几秒,就继续生成html了:

中途卡了好一会儿,点击结束,重新开始:继续

image.png

等不及了,晚上排队的人比较多,总是超时。

刚好想起来POE,有免费的 Sonnet 3.7额度,输入上面同样的提示词:

image.png

有条件的可以直接访问:poe.com/preview/3f9… 样式看起来可以,就是这个上一页,下一页比较讨厌。

再去看看Trae,还在排队。。。。