Vibe Coding 实战:6小时开发辅助写周报的应用

49 阅读3分钟

大家好,我是 Pub

周五了,该写周报了。我上周花了6个小时,做了一个AI辅助写周报的应用。

🔗 在线体验地址iwali.cn

整个过程我几乎都借助了AI的能力,编辑器用的Trae ,模型是 gemini3 pro。

先申明这篇文章可不是AI写的。

技术栈

先说说技术栈:

  • 包管理:pnpm (Monorepo 架构)
  • 前端:Nuxt 4 + TailwindCSS
  • 后端:NestJS
  • 数据库:MySQL

我的开发过程和经验

1. 脚手架最好自己搭

虽然现在的 AI 很强,但在项目初始化阶段,我强烈建议 手动操作

首先使用pnpm搭建一个monorepo的项目

然后使用nuxt的脚手架创建好项目。再手动引入 tailwindcss ,经过我的Vibe coding的经验,这些最好是自己来,不然没办法保证版本是最新的,即使我用了 Context7 这个MCP也会出现版本问题,导致会一直走不下去

后端一样的也是要使用nestjs的脚手架去,能免去很多不必要的问题。

找到合适的工具

推荐两个工具:

数据库,用的mysql ,测试的环境下,我给大家推荐一个在线mysql数据库(免费的)Sqlhub 这样就不用自己去本地安装数据库了。

邮件发送, 因为有登录注册的功能需要发送邮件,我用了Resend , 不用担心这个是国外的saas, 发送邮件完全不影响。

一点经验

小步快走

不要想着一句话就能生成好所有的内容。至少现在我觉得是够呛的。这样的优点是什么?

  • 节省 Token:如果第一次描述太宏大且模糊,AI 理解一旦出现偏差,生成的一大堆废代码就是纯纯的 Token 浪费。
  • 即时纠错:每一步只做一件事,跑通了再做下一步。一旦出错,你能迅速定位问题,而不是在一堆新生成的代码里大海捞针。
  • 项目掌控感:将任务拆解后,每次代码变更都在你的理解范围内。你可以清晰地看到架构是如何一步步生长出来的,甚至能从 AI 的代码中学习到优秀的实现思路。

知道自己要什么

跟同事聊天的时候,他问我,为什么我用AI做的样式总是很难看,一看一股AI味。我总结了一下,大概率就是自己也不知道自己想要什么样式。

如果实在没有设计方向。

教大家一个简单的方法,去找一个你喜欢的任意网站,无论什么风格,把截图给他, 在 Prompt 中加入: “请参考这张截图的整体视觉风格、配色方案和间距感,为我的周报应用编写样式……”。 虽然这看起来很简单,但是确实能带来优化。

部署

再推荐一个zeabur, 这个网站可以从github仓库直接关联。快速部署上线,CICD

————————————————————————————————————————————————————————

最后推荐一下我的开源项目

一个快速搭建出海导航站的模板:

NuxtMkdirs

GITHUB地址

我的公众号:Pub的知识花园