从设计到代码:如何利用 Calicat 和 Trae 实现全自动前端开发流程

79 阅读2分钟

一、背景

想必很多在小公司的程序员伙伴们都会或多或少遇到这样的问题:

  • 没有原型图,需求全靠口头沟通
  • 老板:这是一个同类型的产品,你拿去分析一下,我们就做成和他的类似就行

此刻接到任务的程序员们一脸懵逼,于是,程序员开始每天反复分析竞品,干起了产品经理的工作,最终废了好大一番功夫,终于梳理好项目的需求说明文档,而此时又发现光凭借需求说明文档,并没有办法跟老板讲清楚我们要做哪些东西出来,而今天,我将给一些在小公司工作的程序员提供一套基于AI生成原型图(Caalicat)和前端代码(Trae)的工具。

二、Calicat

官网:www.calicat.cn/team/200449…

image.png

使用步骤

初次使用,我们只需要在中间最下面的聊天内容,通过自然语言描述需求即可,之后就会打开下面的页面,AI开始帮助我们生成对应的原型图。

image.png 生成的原型图如果哪里觉得不太合适,还可以支持手动调整里面对应的元素内容;如果对整个生成的页面都不太满意,还可以通过右侧的聊天框,重新描述你的需求,同时还支持上传图片,让AI参考上传的图片进行生成

image.png 通过上面的方式,我想应该是可以帮助很多程序员快速生成一个想要的原型图作为参考

Trae前端开发工具

字节跳动推出的AI编程工具,和cursor类似,而这里我们会使用trae推出的solo模式,将开发任务托管给AI来进行。

下载地址:www.trae.ai/?utm_source…

这里面我提前已经测试过,通过描述需求,把通过Calicat生成的原型图给到trae让他来进行开发

image.png 生成的页面内容如下:

image.png

image.png

image.png

总结

使用Calicat设计原型图和Trae编写前端代码,我觉得可以非常方便的帮助程序员个人以及企业快速产出一个demo案例,低成本的验证需求的合理性都是具有很大的帮助的,系统这篇文章可以给大家带来一些帮助!

结束语

首次发布文章,有哪里需要改进欢迎大家指出!