Pocket Stack ：AI友好的全栈开发解决方案

2026年，最好的技术方案就是最“AI友好”的技术方案。这是一套AI友好的前后端技术栈，结合规则提示词和MCP等技术，打造一个非专业人员可用的 Vibe Coding 开发环境。为“就缺一个程序员”的你提供一个阿拉丁神灯般的开发平台。

基于 React + shadcn/ui + PocketBase + MCP 等技术，实现完整、流畅的全栈 Vibe Coding 开发体验。

简体中文 | English

📄 更多信息

• 演示
• 文档

基于 PockeStack 的 Vibe Coding 图示

🎶 Vibe Coding 效果

经过在多个开发 Agent 测试，Pocket Stack 可以使用免费的 Trae 表现出几乎完美的 Vibe Coding。

IDE	大模型	打分	说明
Trae 国内版	Doubao-Seed-1.8	90分	可以实现vibe开发。一半功能一次成型，一半需要补充debug提示词
Trae 国际版	Ginimi-3-flash	95分	可以实现vibe开发。20%的情况需补充debug提示词

🌟 核心特性

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

🌐 技术栈

领域	技术方案
后端/认证	PocketBase
前端框架	React 19 + TypeScript
构建工具	Vite
UI 组件	shadcn/ui (@base-ui/react)
样式	Tailwind CSS v4 (Maia Style)
路由	React Router v7
图标	HeroIcons React

📁 目录结构

├── pb_schemas/          # PocketBase 集合配置 (JSON)
└── src/
    ├── components/
    │   ├── layout/          # 布局组件 (Sidebar, Header, MainLayout)
    │   ├── ui/              # shadcn/ui 组件库
    │   ├── auth-provider.tsx # 权限上下文逻辑
    │   └── protected-route.tsx # 路由守卫组件
    ├── pages/               # 业务页面
    │   ├── {module}/        # 业务模块 (如 task, crm)
    │   │   ├── components/  # 模块私有组件
    │   │   ├── routes.tsx   # 模块路由配置
    │   │   └── menu.ts      # 模块菜单配置
    │   └── login/           # 基础页面
    ├── lib/                 # 工具类 (pocketbase SDK, tailwind utils)
    ├── App.tsx              # 路由与 Provider 根配置
    └── main.tsx             # 应用入口

🚀 快速开始

1. 启动后端 (PocketBase)

1. 下载 PocketBase 二进制文件。
2. 运行 ./pocketbase serve。
3. 访问 http://127.0.0.1:8090/_/ 创建管理员账号并配置集合。

2. 运行前端

# 编辑 .env 文件，配置 PocketBase 后端地址
cp .env.example .env

# 安装依赖
npm install

# 启动开发服务器
npm run dev