以下是关于使用 Trae 生成产品 UI 的相关信息:
先开发一个基础版本,包括选择文字,可以自定义生成图片,图片底部包含文章标题和链接二维码。[heading3]使用AI Rules[heading3]使用Chat模式,完善产品需求(PRD)[content]Trae运行后,我们可以直接点“应用”:Trae会直接创建一个readme文档,我们可以在其中直接进行修改,包括带有章节选择,很方便:[heading3]使用Builder模式开发产品[content]刚才我们已经在AI Rules里面指定了技术方案,在readme里指定了产品需求,接下来我们可以换到Builder模式里让Trae来自动化的开发了:Trae跑完后,生成了所有代码,接下来,我们需要在Chrome浏览器内加载这个扩展程序,进行调试,保证它做出来的是我们想要的。然后会进入扩展程序的管理页面,先打开右上角的“开发者模式”,然后在左上角选择“加载已解压的扩展程序”,然后选择这个产品代码所在的文件夹。第一次报错:这个其实是没有创建浏览器插件的图标导致。照例,我们把截图发给Trae,让它来搞定。很快Trae就跑完了,然后我们重新点“加载已解压的扩展程序”,会发现这次OK了。但我们需要提醒大家,Claude 3.5模型其实并不具备直接生成图片的能力,所以事实上生成的几个icon是无法打开的,不过Chrome对图标的要求不严,所以仍旧可以加载,只是实际上图标并不能真的显示出的,如果真的希望有更美观的图标,可以用其他AI生成图片的软件来生成图标。
-控制按钮(开始、暂停、重新开始)-游戏说明2、生成一个任务清单应用输入框中输入:使用Web技术开发一个任务清单应用过程如上,直接看效果:一个很朴素但功能俱全的任务清单应用3、根据UI设计图自动生成项目代码从站酷上找一张设计图,如下(侵删):输入提示:使用html技术实现如图大屏页面看一下效果:页面不是很完美,图表挤一块儿了,中间地图没有实现。不过,我们可以接着让Trae调整:“调整一下,给图表设置合适的宽高比例,自适应页面大小”还不错,图表大小都正常了。虽然缺了中间的地图、图表排列也有点问题,但大致的布局和局部的功能都已经实现了。六、总结从实际体验来看,Trae的表现可圈可点。高效代码生成能力:无论是贪吃蛇游戏还是任务清单应用,Trae都能在几分钟内生成完整框架,代码结构清晰且功能齐全,甚至能自动处理依赖项和运行命令。多技术栈支持:从HTML5、响应式CSS布局、到Echarts图表实现,Trae对Web技术的掌握远超预期,案例中生成的代码可直接运行且无明显语法错误。动态调整潜力:在UI设计图生成案例中,Trae虽未完美复现设计图,但能根据用户反馈快速调整样式,自适应布局的实现展现了AI的迭代能力。对此,爽哥表示:现在的AI越来越强大了,小白不需要懂代码也能用AI编程工具进行程序开发了,程序员感到深深的危机感!
基于Tree的海关归类项目及商业化探讨随机种子固定结果:通过Tree固定随机种子,保证每次生成结果相同,以满足实操要求。开发记忆大模型:用Cherry开发记忆大模型,解决新窗口无记忆问题,方便垂类模型应用。搭建爬虫工作流:用code和Tree联合开发小爬虫,自动爬取海关总署官网数据并整理反馈。实现全参量归类:大模型可判断性质性问题,完成全参量的海关归类,拓展业务。解决技术问题:遇到接口和API等问题,Tree帮助解决,完成网址搭建和API调用。项目成果展示:相关成果在Hub和Verse整理,已申请国家发明专利并完成学校立项。商业化探讨:项目参加路演,有外包公司寻求合作,考虑完善后落地,提供更多解决方案以降本增效。利用AI实现工作流封装并面向C端的项目介绍工作流封装需求:Comfy UI的核心功能开发后,只有少数开发者懂用,需封装以面向广大C端用户。前端开发尝试:利用AI编程工具Trae,基于提示词生成前端原型,包括APP和网页的原型设计。小程序落地实现:让Trae基于原型设计代码生成微信小程序代码,并放入开发界面实现使用。后端接入处理:将工作流封装托管到云平台,获取API钥匙并接入小程序,不会接API时让Trae帮忙。