📦 App Builder — 应用构建器

App Builder 技能 该技能提供构建全栈应用程序从头开始或增强现有项目的结构化知识。它涵盖项目检测、技术栈选择、脚手架模式、实现规划和功能构建。

内容 项目检测 - 关键字矩阵用于识别项目类型 技术栈 - 2025 默认技术和替代方案 脚手架 - 目录结构和核心文件 实现规划 - 需求分析、任务分解和计划格式 功能构建 - 分析和实现模式 协调 - 多阶段开发工作流

• 项目检测关键字矩阵

关键字 项目类型 推荐技术栈 blog, post, article 博客 Next.js 静态电子商务、产品、购物车、支付 电子商务 Next.js + Stripe 仪表盘、面板、管理 管理仪表盘 Next.js + Supabase api、后端、服务、rest API 服务 Express 或 FastAPI python、fastapi、django Python API FastAPI 移动、安卓、ios、react native 移动应用 React Native (Expo) 作品集、个人、简历 作品集 Next.js 静态 crm、客户、销售 CRM Next.js + Supabase saas、订阅、stripe SaaS Next.js + Stripe + Auth 登陆、促销、营销 登陆页面 Next.js 静态 扩展、插件、chrome 浏览器扩展 Chrome MV3 cli、命令行、终端 CLI 工具 Node.js

检测过程

• 分词用户请求
• 提取关键字并匹配项目类型
• 确定缺失信息 → 提出澄清问题
• 建议合适的技术栈
• 在继续之前与用户确认

• 技术栈选择（2025）

默认 Web 应用程序栈 前端： 框架：Next.js 16（稳定） 语言：TypeScript 5.7+ 样式：Tailwind CSS v4 状态：React 19 Actions / 服务器组件 打包工具：Turbopack（开发模式） 后端： 运行时：Node.js 23 框架：Next.js API 路由 验证：Zod 数据库： 主要：PostgreSQL 提供者：Supabase ORM：Prisma 身份验证： 提供者：Supabase Auth 或 Clerk 部署： 工具：内置部署命令

替代选项 需要 默认 替代 实时 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 # 服务器操作 │ │ │ ├── queries.ts # 数据获取 │ │ │ └── types.ts │ │ └── [other-features]/ │ │ │ ├── shared/ # 共享实用程序 │ │ ├── components/ui/ # 可重用 UI 组件 │ │ ├── lib/ # Utils, 帮助程序 │ │ └── hooks/ # 全局钩子 │ │ │ └── server/ # 服务器仅代码 │ ├── db/ # 数据库客户端 │ ├── auth/ # 身份验证配置 │ └── services/ # 外部 API 集成 │ ├── prisma/ │ ├── schema.prisma │ └── seed.ts │ ├── public/ │ ├── .env.example │ ├── package.json │ ├── tailwind.config.ts │ └── tsconfig.json

结构原则 原则 实现 功能隔离 每个功能在 features/ 中都有自己的组件、钩子、操作 服务器/客户端分离 服务器仅代码在 server/ 中，防止意外客户端导入 薄路由 app/ 仅用于路由，逻辑生活在功能中 路由组（groupName）/ 用于布局共享而不影响 URL 的路由组 共享代码 shared/ 用于真正可重用的 UI 和实用程序 路径别名（tsconfig.json） { "compilerOptions": { "paths": { "@/": ["./src/"], "@/features/": ["./src/features/"], "@/shared/": ["./src/shared/"], "@/server/": ["./src/server/"] } } }

• 实现规划

在编写任何代码之前，规划新项目或功能时，请遵循此结构化方法。 需求分析 将用户请求分解为具体功能 确定数据模型及其关系 确定所需的 API 端点或服务器操作 列出所需的 UI 组件 提前确定潜在的阻塞点 任务分解 创建带有依赖关系的有序任务列表 估计每个任务的复杂性（简单/中等/复杂） 标记需要用户决策或外部服务的任务 计划输出格式 在向用户呈现计划时，请使用此结构： # 实现计划：[项目名称]

概述

[简要描述要构建的内容]

数据模型

• 模型