App Builder - 全栈应用开发技能

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

版本: 1.0.0
作者: OpenClaw Workspace
创建日期: 2026-03-16

🎯 核心能力

🤖 多模型配置

模型优先级

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. 设置监控和告警

🛠️ 技术栈选择

前端框架

后端框架