App Builder 技能
本技能提供从零构建全栈应用或增强现有项目的结构化知识，涵盖项目识别、技术栈选择、脚手架模式、实施规划与功能构建。
内容
项目识别 – 通过关键词矩阵判定项目类型
技术栈 – 2025 默认技术及备选方案
脚手架 – 目录结构与核心文件
实施规划 – 需求分析、任务拆解、计划格式
功能构建 – 分析与实现模式
协同 – 多阶段开发流程
关键词矩阵
关键词 → 项目类型 → 推荐栈
blog, post, article → Blog → Next.js Static
e-commerce, product, cart, payment → E-commerce → Next.js + Stripe
dashboard, panel, management → Admin Dashboard → Next.js + Supabase
api, backend, service, rest → API Service → Express 或 FastAPI
python, fastapi, django → Python API → FastAPI
mobile, android, ios, react native → Mobile App → React Native (Expo)
portfolio, personal, cv → Portfolio → Next.js Static
crm, customer, sales → CRM → Next.js + Supabase
saas, subscription, stripe → SaaS → Next.js + Stripe + Auth
landing, promotional, marketing → Landing Page → Next.js Static
extension, plugin, chrome → Browser Extension → Chrome MV3
cli, command line, terminal → CLI Tool → Node.js
识别流程
- 分词用户请求
- 提取关键词并匹配项目类型
- 发现缺失信息 → 追问
- 推荐合适技术栈
- 用户确认后继续
默认 Web 栈
前端
framework: Next.js 16 (Stable)
language: TypeScript 5.7+
styling: Tailwind CSS v4
state: React 19 Actions / Server Components
bundler: Turbopack (Dev Mode)
后端
runtime: Node.js 23
framework: Next.js API Routes
validation: Zod
数据库
primary: PostgreSQL
provider: Supabase
orm: Prisma
认证
provider: Supabase Auth 或 Clerk
部署
tool: 内置 deploy 命令
备选
需求 → 默认 → 备选
Real-time → Supabase Realtime → Socket.io
文件存储 → Supabase Storage → Cloudinary, S3
支付 → Stripe → LemonSqueezy, Paddle
邮件 → Resend → SendGrid
搜索 → — → Algolia, Typesense
Next.js 全栈结构
project-name/
├── src/
│ ├── app/ # 仅路由（薄层）
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── globals.css
│ │ ├── (auth)/ # 认证页面组
│ │ │ ├── login/page.tsx
│ │ │ └── register/page.tsx
│ │ ├── (dashboard)/ # 仪表盘组
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ └── api/
│ │ └── [resource]/route.ts
│ ├── features/ # 按功能模块
│ │ ├── auth/
│ │ │ ├── components/
│ │ │ ├── hooks/
│ │ │ ├── actions.ts # Server Actions
│ │ │ ├── queries.ts # 数据获取
│ │ │ └── types.ts
│ │ └── [other-features]/
│ ├── shared/ # 共享工具
│ │ ├── components/ui/ # 复用 UI
│ │ ├── lib/ # 工具函数
│ │ └── hooks/ # 全局 hooks
│ └── server/ # 仅服务器代码
│ ├── db/ # 数据库客户端
│ ├── auth/ # 认证配置
│ └── services/ # 外部 API 集成
├── prisma/
│ ├── schema.prisma
│ └── seed.ts
├── public/
├── .env.example
├── package.json
├── tailwind.config.ts
└── tsconfig.json
结构原则
原则 → 实现
功能隔离 → 每个功能置于 features/，含组件、hooks、actions
服务器/客户端分离 → server/ 目录防止意外客户端导入
薄路由 → app/ 仅负责路由，逻辑在 features/
路由组 → (groupName)/ 共享布局不影响 URL
共享代码 → shared/ 存放真正复用的 UI 与工具
路径别名（tsconfig.json）
{
"compilerOptions": {
"paths": {
"@/": ["./src/"],
"@/features/": ["./src/features/"],
"@/shared/": ["./src/shared/"],
"@/server/": ["./src/server/"]
}
}
}
新建项目或功能前，按以下结构化步骤执行。
需求分析
- 把用户请求拆成具体功能
- 确定数据模型及关系
- 列出所需 API 端点或 Server Actions
- 列出所需 UI 组件
- 提前识别潜在阻塞
任务拆解
- 按依赖顺序创建任务列表
- 估算各任务复杂度（简单/中等/复杂）
- 标记需用户决策或外部服务的任务
计划输出格式
# 实施计划：【项目名称】
概述
【简要描述将构建的内容】
数据模型
by