Vibe Coding手搓项目记录
Vibe Coding,或者说一种“人出主意,AI搬砖”的编程方式,尤其是在JavaScript/TypeScript一众前端编程中颇为流行。虽然本人就该问题持保留态度,但最近整理今年工作时,发现年初有一个和老同学闲聊时挖的坑还没填,正好借此机会今天基于Vibe Coding的思想一把梭哈了🤩
需求分析与整理
老同学描述的应该是这样一个场景:
通过非中文媒体,让海外中国公民及时收到有关安全方面的信息
对此我的思路是:用RSS/爬虫抓取页面,交给大模型判断,然后显示到前端页面上
技术栈如下
- 数据库:Supabase——通过API key直接TypeScript API访问
- 前端框架:NextJS + Shadcn UI——使用量大,AI的训练量足,代码质量应该不会太差
- 后端的主要工作就是处理AI信息,抓取RSS,干脆也和前端统一用TypeScript(实际情况是:一开始是RAG平台,后面改为了LM-Studio + TypeScript)
踩坑
AI判断模型问题
一开始想的是调用DeepSeek API,反正便宜量大管饱,10块钱运行上一个月应该不是问题
可问题也就出在这里:使用公共API,一旦检测到“中国人”“安全”这些关键字,就拒绝提供服务
一开始想的是,后端上RAG可视化框架(忘记是Dify还是RagFlow了),想办法改Prompt,将单个问题分解成多个问题,使其能绕过这些限制。但服务器本体在美国,而DeepSeek也不能完全保证能输出(说白了就是Prompt写的还是不够好),而且将单个拆解成多个问题,整个判断流程的速度会慢很多。正因如此,年初尝试了下就没再做了。
直到这几天,在给Mac找模型运行的时候,发现了mlx-community/Qwen3-8B-abliterated-v2-mxfp4,这类无审查的模型应该不会拒绝回答,而且模型大小只有8B,用LM-Studio在MacMini M4的输出速度在22 token/s,而实际部署的话,8B模型用x86 CPU跑应该也不是问题。所以后端就顺理成章的用LM-Studio + TypeScript的组合
AI编程模型问题
我是先动手写的后端,用的是VSCode内置的Github Copilot(学生有免费额度,而这个月还没用完),模型最选择的是CPT5.1-Codex-Max
一开始模型写的还行:RSS正常获取,也能正确将数据写入SupaBase
可处理到LM Studio输出的时候就抽风了——问题主要出在,模型自以为是的限制代码的Token数在4个以内(因为主要返回的就是True和False),然而Qwen3是带有Think的,4个Token不可能把Think完整输出出来并过滤。而最让我不能接受的是,每次修改完代码都要让我手动运行,而相比之下,Claude的模型在修改完代码后,都会询问是否自动运行。
我尝试切换成Claude的模型继续修改。Claude Sonnet 4.5还是没发现问题所在,直到换成Claude Opus 4.5才算得到了令人满意的结果
Claude Opus 4.5虽然好用,但相对应的额度消耗也大——应该是今年唯一一个3倍消耗的Github Copilot模型

基于CPT5.1-Codex-Max的表现实在无法让人满意,Nextjs的部分我选择用Claude Sonnet 4.5完成初始化,然后遇到处理不是很好的问题再用Claude Opus 4.5完成。生成的内容包括UI界面,SupaBase读取。
部署
其实这本不应该是一个问题😂Cloudflare和Vercel都能一键部署NextJS,使用起来不要太简单
但老同学人在国内,这两个Serverless因为众所周知的问题,国内访问的效果都不是很好,所以我还是让Claude写了Docker file和Docker Compose用于部署。
这里面还出现了,因为环境变量而报错的问题,直到使用Opus 4.5才最终完成修复
最终成果
在事先没有复习TypeScript的情况下,项目总耗时4小时,Github Copilot月额度消耗25%,效果如图:

访问地址:https://africa.mocusez.site/该服务已停用,源码等有空随缘挂Github
看看老同学愿不愿意找人接手这个项目,如果没人的话,下个月可能会把源码挂Github(应该不会有人需要这种代码吧doge🤔)
结语
- 现在想搓一个前后端一体的项目真的很简单,但还是需要人监督就是了
- 目前这个需求只能算是写出来了,但离好用还差得远:Prompt还需要调整,应该要有主动Push信息的手段
- OpenAI家的模型是真不行,而Claude Opus 4.5的体验是真的舒服,已经准备好明年给Claude充钱的准备了
