10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线

在以前,我们开发一个网站,动辄几千上万元,历时1-3个月+

再后来,开发一个APP,动辄5位数,历时3-6个月+

作为不懂代码的小白,要是想从零开始学习到开发一个APP,那不得学个一年半载?

在2024年初,我用ChatGPT-4开发了pluglink系统,那时全用的是对话框说需求,然后生成代码,自己思考整个架构,一个功能一个功能地与GPT对话后生成。

一年多后的今天,我用Trae IDE+Claude Code CLI仅用10天完成了VicroCode的平台,作品如下:

vicrocode.com支持代码快速在线部署与发布,无需复杂配置,一键上线应用。同时搭建代码交易生态,让开发者的优质代码直接转化为收益,助力个人与企业高效实现技术价值,让每一段代码都能创造商业与实用价值。

以前学编程,买一大堆书,或者去搜索引擎搜答案,想报班都不知道去哪报,只能自学,现在不懂就截图问AI,一步步教你怎么做。

告诉它想要构建一个什么样的产品,它给你出PRD、结构图、生成文件......前后不过几分钟。

这是Trae的IDE界面

除了Trae,还有Cursor/Qoder/VScode等IDE工具。

整个开发过程你不需要懂代码,但是你得懂得怎么跟AI沟通。

接下来我分享一下我完成VicroCode平台的过程:

第一步:前端

前端的界面我用的是coze的AI生成应用功能,如下图:

进去之后,是这样的一个界面:

可以生成APP或是网页的前端,coze个人用户每月可以生成2个,团队用户可以生成10个。tonken量为1000万。

反正是够用了。

如果你是接客户单不够用的话,往下看还有其它办法。

在文本框中输入你的需求,下面是VicroCode早期的需求模板(这个也是AI生成的):项目概述项目名称 :VicroCode网站定位 :连接开发者与使用者的轻量工具交易平台技术栈 :

复制代码
前端:React + TypeScript 构建,确保跨端兼容性(网页 + 小程序)

我先有一些构思之后,告诉豆包,让豆包给我生成简单的需求文档,把这个提示词再给coze。

接着,它就会一步步引导你完成任务:

它会先跟你确认PRD(需求文档),这个你要认真看,不然后面生成出来不是你想要的。

接下它就会跟你确认首页风格:

其实风格定下来之后就差不多了,不用在这个页面耗太长时间,因为后面你到IDE之后你还会再改的。

确认首页风格之后就生成原型图:

最后生成网站后,点右上角下载源码:

前端就这样完成了,大概十来分钟吧。

前端生成除了coze之外,也可以用v0,网址:

v0.app

这个需要网络,可以复刻网站什么的。

如果你想要做产品去变现,可以到下面这个网站的飙升版找:

toolify.ai

同样,网络!

第二步:导入IDE工具

下载后导入IDE工具,我个人习惯用Trae,你也可以用别的IDE,下面是我常用的IDE:

这些IDE你记住名字去搜索后下载吧,这里不再复述。

安装好IDE之后,导入文件夹:

然后,你就可以在右边开始输入你的程序实现要求了:

简单说一下,上面这个有多个功能:

点击后有三个内置智能体:

Chat就是只聊天不修改;

Builder就是既聊天同时也帮你执行任务;

最后一个是MCP任务。

你也可以自定义智能体。

下面是选择模型:

这是国内版默认的几个模型,我常用的是GLM和Qwen

但事实上嘛,国内的这些模型因为能在这个IDE上用,所以操作体验感很好,改完代码会给你标注,可撤回等等人性化的功能,但是不足之处就是有点傻,我曾经有一次的体验就是:

用他们这几个模型(中途换了好几个)要解决一个问题,他们花了5个小时搞不定,我用Claude Code(sonnet4.5)只需要3分钟就搞定!

要不是它太贵,我真心不会用别的了。Claude Code只有CLI界面:

它是在命令行输入的。

对小白来说不太友好。

本身Trae不带这个功能,这个是自己在CMD中安装的,可以找我拿手册。

接下来我会逐步创建共学营,大家一起互相学习,一起变现。

有人问我,他是小白,想学点有前景的AI技术,该往哪个方向走?

我给了两点建议:1.智能体;2.AI编程。

为什么选这两门?

AI变数很大,相比两年多以前,它现在的振幅相对小了很多,以前每周一变,现在一两个月一变,前面大模型碾压了一批初创公司,大家开始变得小心。

行业也在渐渐走向成熟。

那么从长远发展来看,智能体会继续演变,因为机器人需要这个;AI编程也会继续演变,因为超级人工智能(ASI)时代的超级智能体(Super Agents)需要其部件驱动,以后你一句话就能开发自己想要的东西,并投入到超级智能体中去运算。

你现在学这两门,机会很多,从短期上看,一方面有足够的信息差,不同渠道的价格相去千里,而且其实很多中小企业还并不具备AI开发能力,就业也相对机会更多。

从长期上看,不管AI怎么演变,智能体开发和AI开发都能为你的未来奠定基础,就像以前你学编程,短期内你能找到一份好工作或副业做自己产品,而20年后的今天,有了AI编程,你立马丢掉过去的手搓开发模式转为智能开发,你可以迅速降维打击。

你正好踩在从专业玩家向大众普及的关键节点上------就像移动互联网爆发前夜学习APP开发的那批人,他们后来成了第一批吃到红利的人。

你现在看到的自动客服、智能导购只是冰山一角,未来每个行业都会需要专属的智能体来打通服务闭环。而AI编程则是给每个人配了一个"全栈工程师搭档",从此代码不再是用键盘敲出来的,而是用逻辑思维编织出来的。

这两项技能会形成互补飞轮,当别人还在纠结该学什么时,你已经建立了完整的AI应用能力矩阵。

现在的开发模式正在裂变成"前后端分离"的全新形态:

前端:AI编程作为"总建筑师" 不再是手写每一行代码,而是用自然语言向AI描述需求------"做一个能智能推荐穿搭的小程序,界面要清新,能根据用户库存自动搭配"。AI瞬间生成前端页面、交互逻辑,甚至自动优化用户体验。你从"码农"变成了"产品导演",专注在创意和逻辑层面把关。

后端:智能体军团作为"执行引擎" 这里不再是笨重的单体程序,而是一个个专业智能体组成的"特种部队":

  • 一个用户画像智能体实时分析用户偏好
  • 一个穿搭规则智能体理解时尚搭配逻辑
  • 一个库存管理智能体追踪用户已有衣物
  • 一个反馈学习智能体从每次推荐中自我优化

它们各司其职又协同作战,你作为"指挥官",用AI编程快速构建作战指挥部(前端界面和调度逻辑),然后调度后端的智能体军团(专业能力模块)去执行具体任务。

以前需要组建团队、分工协作数月才能完成的项目,现在一个人配上AI伙伴就能在几天内跑通闭环。

相关推荐
00后程序员3 小时前
开发代码的前端工具全流程分享 从编辑、构建到调试的实战经验
后端
东东2334 小时前
前端开发中如何取消Promise操作
前端·javascript·promise
用户68545375977694 小时前
🎴 Card Table & Remember Set:GC的超级加速器!
后端
Json_4 小时前
学习springBoot框架-开发一个酒店管理系统,熟悉springboot框架语法~
java·spring boot·后端
用户68545375977694 小时前
⚡ ZGC:Java界的"闪电侠"!但是...这些坑你得注意!🕳️
后端
用户68545375977694 小时前
🏦 TLAB:每个线程的专属小金库,对象分配So Easy!
后端
掘金安东尼4 小时前
官方:什么是 Vite+?
前端·javascript·vue.js
Yimin4 小时前
1. 了解 系统调用 与 C标准库
后端
用户68545375977694 小时前
🔍 CPU不高但响应慢:性能排查的福尔摩斯式推理!
后端