彬子：从 Demo 到产品，用 Trae 从 0 到 1 Vibe Coding 一个 NextJS 项目的新手教学

彬子：从 Demo 到产品，用 Trae 从 0 到 1 Vibe Coding 一个 NextJS 项目的新手教学 彬子：从 Demo 到产品，用 Trae 从 0 到 1 Vibe Coding 一个 NextJS 项目的新手教学 Modified June 27, 2025 就这样，一个 基于我们 Demo 设想的结构清晰，技术合理的 NextJS 项目就完成了。 项目美感提升 项目完成后，我们可能感觉页面还可以再美点就更好了。没问题，毕竟 NextJS 里有很多强大的动效库和美化技巧。 这里可以借助 Trae 的自定义智能体来实现一个一劳永逸的专门干这活的 Agent。 这里示例一个，Prompt 大家可以进一步优化： Prompt Markdown 你是超一流的水平的Apple Web端设计师和开发专家。 1. 以遵从项目框架和设计规范为前提，最大程度的优化和提升页面的美感。 2. 极其擅长多语言网页的适配，充分找到不同语言用户舒适的字体，字号，间距等细节选择上找到美的平衡。 3. 保持原有页面的配色和风格，专注在CSS的优化上。 然后新建一个会话，@网页之神优化页面就好了，Trae 自然懂该优化什么，不能改什么。 项目部署 接下来，就是将项目发布到线上去，让其他人可能通过公网链接访问到。 这里需要两个服务，可以提前注册好。 1. Github（https://github.com/），代码托管 2. Vercel（https://vercel.com/），编译部署 先去 Github 上新建一个 Repository 填写Repository name项目相关的名称， 如果代码想开源就选 Public （默认），如果不想就选 Private 直接点击 Create Repository 就完成新建。 你会看到 …or create a new repository on the command line，复制下面的命令行内容 比如我的是： Code block Markdown echo " wta tokyo web" README.md git init git add README.md git commit m "first commit" git branch M main git remote add origin https://github.com/binllm18/wta tokyo web.git git push u origin main 粘贴进 Trae 的对话框，让 Trae 完成项目的 Git 初始化和同步。 接着去 Vercel 上新建一个项目 在面板 Import Git Repository中选择你刚才在 Github 上完成代码托管的 Repository，点击后面的 Import 按钮（如果之前没关联 Github 的账号，这里 Vercel 会先提醒授权关联，按提示操作即可） 因为 Vercel 默认就是 NextJS 项目支持，所以直接点击 Deploy 按钮，等待编译，发布后就完成项目部署了。 最终，你将会看到这个部署成功的页面，上面有 Vercel 分配给这个项目的公网域名。 比如 wta tokyo web.vercel.app （可以点进去看看效果）就是 WaytoAGI 全球 AI 大会东京站的活动站点了。后续也可以绑定自己的域名。https://tokyo.waytoagi.com/zh 跟到这里的同学们，恭喜大家，你们完成了从 Demo 到产品这层壁障的突破，相信以后在 Vibe Coding 的路上会越走越宽～ 最新版本查看：https://tokyo.waytoagi.com/zh 微信公众号同步教学：https://mp.weixin.qq.com/s/bMqFQ9l yUa4oITOcxXxfA 欢迎关注我的微信公众号：AI Agent 新手村，精进 AI 不迷路 wta tokyo web.vercel.app 就这样，一个 基于我们 Demo 设想的结构清晰，技术合理的 NextJS 项目就完成了。 项目美感提升 项目完成后，我们可能感觉页面还可以再美点就更好了。没问题，毕竟 NextJS 里有很多强大的动效库和美化技巧。 这里可以借助 Trae 的自定义智能体来实现一个一劳永逸的专门干这活的 Agent。 这里示例一个，Prompt 大家可以进一步优化： 然后新建一个会话，@网页之神优化页面就好了，Trae 自然懂该优化什么，不能改什么。 项目部署 接下来，就是将项目发布到线上去，让其他人可能通过公网链接访问到。 这里需要两个服务，可以提前注册好。 1. Github（https://github.com/），代码托管 2. Vercel（https://vercel.com/），编译部署 先去 Github 上新建一个 Repository 填写Repository name项目相关的名称， 如果代码想开源就选 Public （默认），如果不想就选 Private 直接点击 Create Repository 就完成新建。 你会看到 …or create a new repository on the command line，复制下面的命令行内容 比如我的是： 粘贴进 Trae 的对话框，让 Trae 完成项目的 Git 初始化和同步。 接着去 Vercel 上新建一个项目 在面板 Import Git Repository中选择你刚才在 Github 上完成代码托管的 Repository，点击后面的 Import 按钮（如果之前没关联 Github 的账号，这里 Vercel 会先提醒授权关联，按提示操作即可） 因为 Vercel 默认就是 NextJS 项目支持，所以直接点击 Deploy 按钮，等待编译，发布后就完成项目部署了。 最终，你将会看到这个部署成功的页面，上面有 Vercel 分配给这个项目的公网域名。 比如 wta tokyo web.vercel.app （可以点进去看看效果）就是 WaytoAGI 全球 AI 大会东京站的活动站点了。后续也可以绑定自己的域名。https://tokyo.waytoagi.com/zh wta tokyo web.vercel.app 跟到这里的同学们，恭喜大家，你们完成了从 Demo 到产品这层壁障的突破，相信以后在 Vibe Coding 的路上会越走越宽～ 最新版本查看：https://tokyo.waytoagi.com/zh 微信公众号同步教学：https://mp.weixin.qq.com/s/bMqFQ9l yUa4oITOcxXxfA 欢迎关注我的微信公众号：AI Agent 新手村，精进 AI 不迷路 🧑‍💻 作者：彬子 小红书：AI Agent 新手村 AI Agent 新手村 作者：彬子 小红书：AI Agent 新手村 AI Agent 新手村 前言 最近 Vibe Coding 非常火，人人都能写代码。 借助 Trae 一类的 AI Coding 工具，只要会提问就能迅速的出一个想象中的 Demo，让很多编程新人非常有成就感。 这时候 AI 交给我们的项目大多是一个单 HTML 文件的网页。我们可以找一些静态网页托管的服务发布上去，就能给别人查看和使用了。 很多新手会卡在这无法再进一步，激情就会来的快去的快。今天我会带着大家突破这层壁障，向上的空间就会无限大。 Demo 阶段 我们仍从 Demo 阶段开始寻找灵感，毕竟 HTML 就足以可视化展示出我们想象中的画面。 以最近 WaytoAGI 将举办全球 AI 大会东京站的活动网站举例。AJ 脑海中有一个首页的画面，她通过 Trae 的 Builder 多轮对话生成一个 HTML 文件，发到群里我打开一看很哇塞。尤其是渐变配色的背景，又科技又迷幻。 如果只是作为一个活动宣传页，继续优化细节发布上线就可以了。 产品阶段 我们可能需要这个大会活动站点未来承载更多功能，比如关联的用户注册，邮件发送，号牌查看，身份验证等等。 这时候，单个 HTML 文件就有很大的扩展和维护的局限性。需要引入更优的前端框架来更好的构建线上产品。 这里我用 NextJS 的框架来举例，一方面 NextJS 的生态很丰富，想到和看到的网站功能基本上都有库支持了。另一方面部署也是新手头疼的事情，借助 Vercel 之类的免费服务，可以无痛上线。 那我们开始吧～ 前端项目模板准备 直接冲上来就让 Trae 参考 HTML 的内容来开发一个 NextJS 项目也不是不行，但缺乏稳定性，复杂度一下拔得太高，反复和 AI 拉扯会极速消耗热情。 我们需要先有一个打底的前端项目模板。 如果还没有，就可以先和 Trae 讨论整出一个通用的前端模板，以后开发类似站点就可以直接拿来用。 以 WaytoAGI 全球 AI 大会东京站需求来说，除了好看的落地页，这个模板需要支持多语言。所以先来搞定一个支持多语言的通用模板。 1. 先创建一个空的项目文件夹 wta tokyo，用 Trae 打开后，添加一个 project rules。约定技术规范对后续开发的稳定性很重要。 接下来，在项目文件夹下新建一个 wta tokyo web的子文件夹，在右侧对话面板中 @Builder 开始构建模板代码。 这个初始化任务的复杂度就比上来就写一个定制化高的项目要小很多，AI 做起来也不容易出错。 首轮 Trae 就跑通了模板，按照我们约定的 project rules 使用的技术栈和项目结构，同时按照我们初始化的要求来设计和编写代码。 打开本地预览页就能看到一个简单的落地页。有 Header，Footer，Page 三部分结构，Header 中有一个可以切换语言的下拉框。 试跑的时候可能会有一些报错，或者项目文件会出现标红的情况。都直接将错误日志添加或复制到对话框中让 Trae 来解决。而且 Trae 有很好的对话回退机制，所以尽管试，不满意可以撤回重新组织语言来继续改。 如果项目能跑起来但文件和代码中有标红提示，大概率是 ESlint 默认比较严格，我们可以告诉 Trae 来忽略一些无关紧要的审查。 这样，一个通用的多语言切换的 NextJS 项目模板就创建好了。可以保存下来，以后类似项目改个名直接用。 项目定制开发 这时候我们重新开一个会话，将之前对模板打磨的对话讨论抛之脑后，避免对定制化开发这部分有干扰。 先往项目根目录下添加在 Demo 阶段生成的 HTML 文件了。这样 Trae 能通过分析源码来充分捕捉页面截图所不能呈现出来的动效特征，更有利于完整的复刻。 将这个 HTML 文件添加到对话框中，仍旧@Builder开始干活。指令中进一步强调复刻过程中需要 Trae 注意的细节，比如这里希望重视渐变背景动效。 有模板打底之后的复刻效果就会相对比较稳定了，Trae 只需要专注在页面效果的呈现上。本轮对话执行完，一把就运行起来了。 然后就是看到哪要改就告诉 Trae 来改。绝大部分的对话如下： 我打开看到预览页，发现内容和元素都有，但没有布局和样式。那大概率是 CSS 没生效，让 Trae 检查 页面头部我希望是这个设计，但是右边的切换语言按钮希望收起来，那就截图让 Trae 改 这句完全是 PUA Trae，我也不知道当前的代码在布局上是不是已经多端正常，反正让 Trae 检查优化准没错 我把邀请函的英文内容贴进去，先优化排版和样式，再让 Trae 来翻译 Lucide React 上有丰富的图标，直接告诉 Trae 要换什么样的，这里我选中那两个要换的组件代码块添加到对话中，也是避免对话歧义一种常用的方式 改文案因为要同步翻译成三种语言，所以都交给 Trae 即可，Trae 会翻译好，并放入指定的多语言配置文件中 要更换图，就先将图片拖进项目的/public文件夹下，然后告诉 Trae 将图替换到哪里