App Builder - 全栈应用开发技能

# App Builder - 全栈应用开发技能

**功能**: 自动完成从页面设计、数据库构建到代码生成与部署的全流程，支持可视化调试

**版本**: 1.0.0

**作者**: OpenClaw Workspace

**创建日期**: 2026-03-16

---

🎯 核心能力

| 阶段 | 功能 | 输出 |

|------|------|------|

| 1. 需求分析 | 理解用户需求，生成 PRD | 需求文档、用户故事 |

| 2. 页面设计 | UI/UX 设计，原型生成 | Figma 链接、组件树 |

| 3. 数据库设计 | Schema 设计，ER 图 | SQL/NoSQL Schema、ER 图 |

| 4. 代码生成 | 前后端代码自动生成 | 完整项目代码 |

| 5. 可视化调试 | 实时预览，断点调试 | 预览链接、调试报告 |

| 6. 部署发布 | 一键部署到云平台 | 生产环境 URL |

---

🤖 多模型配置

模型优先级

1. **Claude Code** (首选) - 代码生成质量最佳

2. **通义千问** - 中文理解好，适合国内部署

3. **Gemini** - 多模态能力强

4. **智谱 GLM** - 代码生成能力优秀

配置文件

创建 `~/.config/app-maker/models.json`:

{
  "default": "claude-code",
  "models": {
    "claude-code": {
      "provider": "anthropic",
      "model": "claude-sonnet-4-20250514",
      "apiKey": "sk-ant-...",
      "priority": 1,
      "capabilities": ["code", "design", "debug"]
    },
    "qwen": {
      "provider": "aliyun",
      "model": "qwen-max",
      "apiKey": "sk-...",
      "priority": 2,
      "capabilities": ["code", "design"]
    },
    "gemini": {
      "provider": "google",
      "model": "gemini-2.0-pro",
      "apiKey": "AIza...",
      "priority": 3,
      "capabilities": ["code", "multimodal"]
    },
    "glm": {
      "provider": "zhipu",
      "model": "glm-4-plus",
      "apiKey": "sk-...",
      "priority": 4,
      "capabilities": ["code"]
    }
  },
  "fallback": true,
  "maxRetries": 3
}

---

📋 工作流程

阶段 1: 需求分析

输入：用户自然语言描述
输出:
  - prd.md: 产品需求文档
  - user_stories.md: 用户故事地图
  - features.json: 功能列表 (优先级排序)

步骤:
  1. 提取核心功能需求
  2. 识别目标用户群体
  3. 定义 MVP 范围
  4. 生成验收标准

阶段 2: 页面设计

输入：PRD 文档
输出:
  - wireframes/: 线框图
  - components.json: 组件树
  - design_system.json: 设计规范

步骤:
  1. 生成用户流程图
  2. 创建页面线框图
  3. 设计组件层次结构
  4. 定义设计规范 (颜色、字体、间距)

阶段 3: 数据库设计

输入：功能列表、数据需求
输出:
  - schema.sql / schema.prisma: 数据库 Schema
  - er_diagram.png: ER 图
  - migrations/: 迁移文件

步骤:
  1. 识别实体和关系
  2. 设计表结构
  3. 定义索引和约束
  4. 生成迁移脚本

阶段 4: 代码生成

输入：设计文档、Schema
输出:
  - src/frontend/: 前端代码 (React/Vue/Flutter)
  - src/backend/: 后端代码 (Node.js/Python/Go)
  - src/api/: API 定义 (OpenAPI/GraphQL)
  - tests/: 测试文件

步骤:
  1. 初始化项目结构
  2. 生成数据模型层
  3. 生成 API 层
  4. 生成 UI 组件
  5. 生成业务逻辑
  6. 生成单元测试

阶段 5: 可视化调试

输入：生成的代码
输出:
  - preview_url: 实时预览链接
  - debug_report.md: 调试报告
  - hot_reload: 热重载支持

步骤:
  1. 启动开发服务器
  2. 生成预览环境
  3. 运行自动化测试
  4. 捕获并修复错误
  5. 生成调试报告

阶段 6: 部署发布

输入：通过测试的代码
输出:
  - production_url: 生产环境 URL
  - deploy_log.md: 部署日志
  - monitoring_dashboard: 监控面板

步骤:
  1. 构建生产版本
  2. 配置 CI/CD 流水线
  3. 部署到云平台
  4. 配置域名和 SSL
  5. 设置监控和告警

---

🛠️ 技术栈选择

前端框架

| 场景 | 推荐 | 备选 |

|------|------|------|

| Web 应用 | React + TypeScript | Vue 3 / Next.js |

| 移动应用 | Flutter | React Native |

| 桌面应用 | Electron | Tauri |

| 小程序 | 原生 | Uni-app |

后端框架

| 场景 | 推荐 | 备选 |

|------|------|------|

| API 服务 | Node.js (Express/Nest) | Python (FastAPI) |

| 实时应用 | Go + WebSocket | Node.js + Socket.io |

| 数据密集 | Python + Django | Java + Spring |

| 高并发 | Go | Rust |

数据库

| 场景 | 推荐 | 备选 |

|------|------|------|

| 关系型 | PostgreSQL | MySQL |

| 文档型 | MongoDB | Firestore |

| 缓存 | Redis | Memcached |

| 搜索 | Elasticsearch | Meilisearch |

部署平台

| 场景 | 推荐 | 备选 |

|------|------|------|

| Web 托管 | Vercel / Netlify | Cloudflare Pages |

| 容器部署 | Docker + K8s | ECS / Fargate |

| Serverless | AWS Lambda | Cloud Functions |

| 国内部署 | 阿里云 / 腾讯云 | 华为云 |

---

📁 项目结构模板

my-app/
├── .clawhub/
│   └── app-config.json      # 应用配置
├── docs/
│   ├── prd.md               # 产品需求文档
│   ├── user_stories.md      # 用户故事
│   ├── api_docs.md          # API 文档
│   └── deploy_guide.md      # 部署指南
├── design/
│   ├── wireframes/          # 线框图
│   ├── components.json      # 组件树
│   └── design_system.json   # 设计规范
├── database/
│   ├── schema.prisma        # 数据库 Schema
│   ├── er_diagram.png       # ER 图
│   └── migrations/          # 迁移文件
├── src/
│   ├── frontend/            # 前端代码
│   │   ├── components/
│   │   ├── pages/
│   │   ├── hooks/
│   │   └── styles/
│   ├── backend/             # 后端代码
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── routes/
│   │   └── middleware/
│   └── shared/              # 共享代码
│       ├── types/
│       └── utils/
├── tests/
│   ├── unit/                # 单元测试
│   ├── integration/         # 集成测试
│   └── e2e/                 # 端到端测试
├── infra/
│   ├── docker/              # Docker 配置
│   ├── k8s/                 # K8s 配置
│   └── terraform/           # IaC 配置
├── .env.example             # 环境变量示例
├── package.json
├── tsconfig.json
└── README.md

---

🚀 快速开始

1. 初始化新项目

# 创建新项目
npx app-builder init my-app

# 或使用交互式向导
npx app-builder create

2. 配置模型

# 设置首选模型
npx app-builder config set model claude-code

# 配置 API Key
npx app-builder config set claude-api-key sk-ant-...

3. 生成应用

# 从自然语言描述生成
npx app-builder generate "创建一个任务管理应用，支持团队协作、看板视图、截止日期提醒"

# 或从 PRD 文件生成
npx app-builder generate --from docs/prd.md

4. 预览和调试

# 启动预览服务器
npx app-builder preview

# 运行测试
npx app-builder test

# 可视化调试
npx app-builder debug --visual

5. 部署

# 部署到 Vercel
npx app-builder deploy vercel

# 部署到阿里云
npx app-builder deploy aliyun

# 自定义部署
npx app-builder deploy --config infra/deploy.json

---

🔧 命令行参考

核心命令

| 命令 | 描述 | 示例 |

|------|------|------|

| `init` | 初始化新项目 | `app-builder init my-app` |

| `generate` | 生成应用代码 | `app-builder generate "描述"` |

| `preview` | 启动预览服务器 | `app-builder preview --port 3000` |

| `debug` | 可视化调试 | `app-builder debug --visual` |

| `deploy` | 部署应用 | `app-builder deploy vercel` |

| `config` | 配置管理 | `app-builder config set model claude-code` |

生成选项

app-builder generate <description> [options]

选项:
  --framework <name>     指定框架 (react/vue/flutter)
  --backend <name>       指定后端 (node/python/go)
  --database <name>      指定数据库 (postgres/mongo)
  --template <name>      使用模板 (saas/ecommerce/social)
  --from <file>          从文件生成 (PRD/设计稿)
  --output <dir>         输出目录
  --dry-run              预览生成内容，不写入文件

调试选项

app-builder debug [options]

选项:
  --visual               启用可视化调试界面
  --hot-reload           启用热重载
  --breakpoints <file>   设置断点文件
  --logs                 实时日志输出
  --performance          性能分析

---

📊 可视化调试界面

功能特性

1. **实时预览**: 查看应用运行效果

2. **组件树**: 可视化组件层次结构

3. **状态检查**: 检查应用状态和数据流

4. **网络监控**: 查看 API 请求和响应

5. **性能分析**: 识别性能瓶颈

6. **错误追踪**: 捕获和定位错误

界面布局

┌─────────────────────────────────────────────────────────┐
│  🔍 App Builder Debug Console                           │
├─────────────┬─────────────────────┬─────────────────────┤
│             │                     │                     │
│  组件树     │    实时预览         │   属性面板          │
│             │                     │                     │
│  - App      │   ┌───────────┐     │  选中组件：        │
│  - Layout   │   │           │     │  - 名称            │
│  - Header   │   │  Preview  │     │  - Props           │
│  - Main     │   │           │     │  - State           │
│  - Footer   │   │           │     │  - Events          │
│             │   └───────────┘     │                     │
│  数据流     │                     │                     │
│  - Store    ├─────────────────────┴─────────────────────┤
│  - API      │  📊 性能  │  🌐 网络  │  ⚠️ 错误  │  📝 日志 │
│             │                                             │
└─────────────┴─────────────────────────────────────────────┘

---

🔐 安全最佳实践

代码安全

数据安全

部署安全

---

📈 性能优化

前端优化

{
  "codeSplitting": true,
  "lazyLoading": true,
  "imageOptimization": true,
  "caching": {
    "strategy": "stale-while-revalidate",
    "maxAge": 3600
  },
  "bundleAnalysis": true
}

后端优化

{
  "databaseIndexing": true,
  "queryOptimization": true,
  "caching": {
    "redis": true,
    "ttl": 300
  },
  "connectionPooling": true,
  "rateLimiting": {
    "enabled": true,
    "requests": 100,
    "window": 60
  }
}

---

🧩 插件系统

内置插件

| 插件 | 功能 | 状态 |

|------|------|------|

| `@app-builder/react` | React 代码生成 | ✅ |

| `@app-builder/vue` | Vue 代码生成 | ✅ |

| `@app-builder/flutter` | Flutter 代码生成 | ✅ |

| `@app-builder/prisma` | Prisma ORM 支持 | ✅ |

| `@app-builder/vercel` | Vercel 部署 | ✅ |

| `@app-builder/aliyun` | 阿里云部署 | ✅ |

开发自定义插件

# 创建插件模板
npx app-builder plugin create my-plugin

# 插件结构
my-plugin/
├── src/
│   ├── generator.ts    # 代码生成器
│   ├── templates/      # 模板文件
│   └── index.ts        # 插件入口
├── package.json
└── plugin.json         # 插件配置

---

📝 示例项目

示例 1: 任务管理应用

npx app-builder generate "创建一个任务管理应用，包含以下功能：
- 用户认证 (登录/注册)
- 项目管理 (创建、编辑、删除)
- 任务看板 (待办、进行中、已完成)
- 团队协作 (邀请成员、分配任务)
- 截止日期提醒
- 文件附件
- 活动日志

技术栈：React + Node.js + PostgreSQL
部署目标：Vercel + Supabase"

示例 2: 电商应用

npx app-builder generate "创建一个电商应用：
- 商品展示和搜索
- 购物车和结算
- 用户评价
- 订单管理
- 支付集成 (支付宝/微信)
- 物流追踪
- 后台管理

技术栈：Next.js + Python + MongoDB
部署目标：阿里云"

---

🆘 常见问题

Q: 如何切换模型？

# 查看可用模型
npx app-builder config list

# 切换默认模型
npx app-builder config set default-model qwen

# 临时使用其他模型
npx app-builder generate "..." --model gemini

Q: 如何自定义生成的代码风格？

创建 `.apprc` 配置文件：

{
  "codeStyle": {
    "language": "typescript",
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "architecture": {
    "pattern": "mvvm",
    "stateManagement": "zustand"
  }
}

Q: 如何集成现有项目？

# 导入现有项目
npx app-builder import ./existing-project

# 增强现有代码
npx app-builder enhance --target ./src

---

📚 资源链接

---

*最后更新：2026-03-16*