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的平台,作品如下:

https://www.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 构建,确保跨端兼容性(网页 + 小程序)后端: Python(Django)+PostgreSQL前端设计要求:简约背景色系 #fafbf8附件是网站 LOGO🎯 MVP 核心功能用户系统用户注册 / 登录 (手机验证码)个人资料管理 (用户名、头像、简介)积分钱包 (余额显示、充值记录)项目上传与展示代码上传 (支持 HTML/Python 文件,最大 10MB)项目信息填写 (标题、描述、标签、价格、截图)项目预览 (在线运行 HTML 项目)项目搜索与筛选 (按标签、价格、发布时间)交易系统积分充值 (微信支付 / 支付宝集成)项目购买 (API 调用权限 / 源码下载)交易记录 (购买历史、收入记录)基础管理项目审核 (管理员审核机制)用户反馈 (简单的评价系统)数据统计 (项目数量、交易总额)产品形态:Web 网站产品名称:VicroCode

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

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

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

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

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

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

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

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

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

https://v0.app/

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

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

https://www.toolify.ai/zh/

同样,网络!

第二步:导入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伙伴就能在几天内跑通闭环。

相关推荐
宇余12 分钟前
从 useState 到 URLState:前端状态管理的另一种思路
前端·vue.js
白兰地空瓶19 分钟前
🚀 10 分钟吃透 CSS position 定位!从底层原理到避坑实战,搞定所有布局难题
前端·css
onthewaying38 分钟前
在Android平台上使用Three.js优雅的加载3D模型
android·前端·three.js
冴羽44 分钟前
能让 GitHub 删除泄露的苹果源码还有 8000 多个相关仓库的 DMCA 是什么?
前端·javascript·react.js
悟能不能悟1 小时前
jsp怎么拿到url参数
java·前端·javascript
程序猿小蒜1 小时前
基于SpringBoot的企业资产管理系统开发与设计
java·前端·spring boot·后端·spring
Mapmost1 小时前
零代码+三维仿真!实现自然灾害的可视化模拟与精准预警
前端
程序猿_极客1 小时前
JavaScript 的 Web APIs 入门到实战全总结(day7):从数据处理到交互落地的全链路实战(附实战案例代码)
开发语言·前端·javascript·交互·web apis 入门到实战
suzumiyahr1 小时前
用awesome-digital-human-live2d创建属于自己的数字人
前端·人工智能·后端
萧曵 丶1 小时前
Python 字符串、列表、元组、字典、集合常用函数
开发语言·前端·python