98% 的全栈、全免费的 Vibe Coding 解决方案

PocketStack
86 阅读2分钟

经过了一年和各种Agent、大模型、技术栈的斗智斗勇，我终于总结出Vibe Coding的最佳实践。那就是 BAAS+前端+MCP

BAAS是后端作为服务（Backend as a service）。简单说，就是不用开发，通过配置完成后端数据库+API的生成。那么BAAS+前端，可以看作是纯前端的技术栈。

真正实践过Vibe Coding的同学一定会感受过前后端分离项目带来的巨大的上下文陷阱和地狱级的调试难度。使用BAAS则避免了这些问题，因为BAAS先天具备三个巨大的优势：

  1. API标准统一，绝对不会出现AI随机性带来的一个项目中风格爆炸的问题。
  2. 可以封装SDK。有了标准的API，就可以封装前端SDK，不用再针对API写一堆类型文件
  3. 可以封装MCP，通过大模型进行后端建模，节省设计时间。

除了大模型和AI Agent，MCP是另一个必须重视的工具。技术AI友好度的一个重要维度就是有没有好用的MCP能够辅助开发。

基于以上认知，我个人建议的技术栈是：

  • 后端：Pocketbase：有前端SDK，有MCP。
  • 前端：React、Shadcn/ui（有组件管理MCP）、HugeIcons（有图标搜索MCP）

我又基于以上技术栈开发了一个Vibe Coding脚手架PocketStack，该脚手架包括以下特性：

  • 前端特性：基于 shadcn/ui (Maia 风格) 与 Tailwind CSS v4，内置深色模式。全站采用 HugeIcons 图标库。自适应 Desktop、Tablet 及 Mobile 布局。
  • 后端特性：原生集成 PocketBase，覆盖身份验证及数据存储。
  • 模块化架构：支持业务模块解耦开发，每个模块独立配置路由 (routes.tsx) 与菜单 (menu.ts)，实现即插即用。
  • 业务示例：内置个人任务管理系统，支持多状态流转、优先级设定及用户数据隔离。
  • 身份认证：支持“超级管理员”与“普通管理员”登录模式。
  • 权限控制：
    • 路由级保护 (ProtectedRoute, AdminOnlyRoute)。
    • 侧边栏菜单根据角色动态过滤。
    • UI 自动根据权限进行降级或隐藏。
    • 后端 API Rules 确保租户/用户级数据物理隔离。

该脚手架已经开源，欢迎各位使用和参与开发。

另外我在b站发布了一个用PocketStack开发的视频，演示了如何用10多分钟开发一个完善的记账系统（SAAS）。 真正的Vibe Coding，十分钟开发一个记账系统_哔哩哔哩_bilibili

非常推荐大家看一下这个视频，用Trae免费版，十分钟时间开发一个带仪表板、分类账单管理功能的SAAS系统，放在两个月以前，我自己都不敢相信！

image.png

avatar
文章
阅读
粉丝