AI 驱动的全栈项目开发工作流

从 0 到 1 的完整项目开发流程模板 适用于：SaaS 产品、Web 应用、AI 应用开发

工作流概览

┌─────────────────────────────────────────────────────────────────────────────┐ │ AI 驱动的全栈项目开发流程 │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ 1 │──▶│ 2 │──▶│ 3 │──▶│ 4 │──▶│ 5 │──▶│ 6 │ │ │ │ 建仓库 │ │ Idea │ │ 调研 │ │ 技术 │ │ UI/UX │ │ 开发 │ │ │ └──────┘ └──────┘ │ 设计 │ │ 选型 │ │ 设计 │ │ 部署 │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ 7 │──▶│ 8 │──▶│ 9 │──▶│ 10 │ ◀─────────────────┐ │ │ │ 自测 │ │ 测试 │ │ 上线 │ │CI/CD │ │ │ │ │ 优化 │ │ │ │ 测试 │ │ 迭代 │───────────────────┘ │ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘

Phase 1: 建仓库 (Repository Setup)

目标

初始化项目仓库，建立基础结构

输出物

• GitHub/GitLab 仓库

• README.md

• LICENSE

• .gitignore

• CLAUDE.md (AI Coding 指南)

• 基础目录结构

AI 可自动化

创建仓库结构

mkdir -p docs/{planning,design,development} mkdir -p .claude/{commands,skills}

生成基础文件

- README.md: 项目介绍

- CLAUDE.md: AI 编码指南

- .env.example: 环境变量模板

检查清单

• 仓库命名规范（小写、连字符）

• 分支保护规则配置

• Collaborators 权限设置

• Issue/PR 模板创建

Phase 2: Idea (创意构思)

目标

明确产品定位、目标用户、核心价值

输出物

• docs/planning/product-plan.md

• 产品规划

• docs/planning/content-generation-directions.md

• 方向探索（可选）

产品规划模板

[产品名] 产品规划

产品定位

一句话描述：[用 XX 技术解决 XX 问题]

核心价值

目标用户

核心功能

MVP (Phase 1) - 必须有

进阶 (Phase 2) - 应该有

商业模式

• 定价策略
• 目标 MRR
• 竞品分析

AI 辅助

• 使用 AI 进行市场调研

• 竞品分析和功能对比

• 用户画像生成

Phase 3: 调研设计 (Research & System Design)

目标

完成系统架构设计、流程图、技术预研

输出物

• docs/design/design-research.md

• 设计总览

• 系统架构图

• 用户旅程图

• 核心流程图

• 数据流图

设计总览模板

[产品名] 设计总览

系统架构

[ASCII 架构图]

用户旅程

[用户从注册到核心功能的完整流程]

核心流程

[主要业务流程图]

技术预研

AI 辅助

• 生成 ASCII 架构图

• 生成 Mermaid 流程图

• 技术方案对比分析

Phase 4: 技术选型 (Technology Selection)

目标

确定技术栈、数据库、第三方服务

输出物

• docs/design/backend-architecture.md

• 后端架构

• docs/design/frontend-architecture.md

• 前端架构

• docs/design/database-schema.md

• 数据库设计

• docs/design/api-design.md

• API 设计

• docs/planning/[service]-providers.md

• 第三方服务选型

技术选型决策表

前端技术栈

后端技术栈

第三方服务

数据库设计模板

ER 图

[ASCII ER 图]

表结构

users 表

索引设计

[索引列表]

查询示例

[常用查询 SQL]

Phase 5: UI/UX 设计 (User Interface Design)

目标

完成界面设计、交互规范、组件库

输出物

• docs/design/ui-ux-design.md

• UI/UX 规范

• docs/design/pages-design.md

• 页面设计

• docs/design/landing-page-design.md

• 主页设计

• docs/design/user-guide-pages.md

• 用户导向页面

• docs/design/figma-integration.md

• 设计工具集成（可选）

UI/UX 规范模板

设计系统

色彩

字体

间距

组件规范

[Button, Input, Card, Modal 等组件规范]

页面设计模板

页面列表

页面线框图

[页面名]

[ASCII 线框图]

组件说明

AI 辅助

• 根据设计文档生成组件代码

• 使用 v0.dev 生成 UI

• Figma MCP 读取设计稿

Phase 6: 开发部署 (Development & Deployment)

目标

完成代码开发、本地调试、部署上线

输出物

• docs/development/env-config.md

• 环境配置

• docs/development/deployment-architecture.md

• 部署架构

• 前端代码 (/src 或 /apps/web )

• 后端代码 (/api 或 /apps/api )

• 配置文件 (package.json, wrangler.toml, etc.)

开发流程

1. 项目初始化 ├── 前端脚手架 (Vite + React + TypeScript) ├── 后端脚手架 (Cloudflare Workers + Hono) └── 依赖安装

2. 基础搭建 ├── 路由配置 ├── 状态管理 ├── API 客户端 └── 认证集成

3. 功能开发 ├── 按 MVP 功能列表逐个实现 ├── 先后端 API，再前端页面 └── 单元测试同步编写

4. 部署配置 ├── 环境变量配置 ├── CI/CD 流水线 └── 域名和 SSL

部署架构模板

部署架构

生产环境

备用方案

CI/CD

[GitHub Actions 配置]

AI 可自动化

• 脚手架代码生成

• 组件代码生成

• API 路由生成

• 测试代码生成

• 配置文件生成

Phase 7: 自测优化 (Self-Testing & Optimization)

目标

开发者自测、代码审查、性能优化

输出物

• 自测报告

• 性能优化记录

• 代码质量报告

自测检查清单

功能自测

• 所有 MVP 功能正常工作
• 边界情况处理
• 错误提示友好
• 加载状态正确

兼容性测试

• Chrome / Firefox / Safari
• 移动端响应式
• 不同屏幕尺寸

性能检查

• Lighthouse 评分 > 90
• 首屏加载 < 3s
• API 响应 < 500ms
• 无内存泄漏

安全检查

• XSS 防护
• CSRF 防护
• SQL 注入防护
• 敏感信息不暴露

代码质量

• ESLint 无警告
• TypeScript 无错误
• 测试覆盖率 > 80%

自评打分表

Phase 8: 测试 (Testing)

目标

完成单元测试、集成测试、E2E 测试

输出物

• docs/development/automation-plan.md

• 测试计划

• 单元测试代码

• E2E 测试代码

• 测试覆盖率报告

测试策略

测试金字塔

    /\
   /  \      E2E 测试 (10%)
  /----\     关键用户流程
 /      \
/--------\   集成测试 (20%)

/ \ API 接口测试 /------------\ 单元测试 (70%) / \ 组件、函数、工具

测试代码模板

// 单元测试 - Vitest describe('formatDuration', () => { it('formats seconds to mm:ss', () => { expect(formatDuration(65)).toBe('01:05'); }); });

// E2E 测试 - Playwright test('user can create audio', async ({ page }) => { await page.goto('/create'); await page.fill('[name="text"]', 'Hello World'); await page.click('button[type="submit"]'); await expect(page.locator('.audio-player')).toBeVisible(); });

AI 辅助

• 生成测试用例

• 生成测试代码

• 分析测试覆盖率缺口

Phase 9: 线上测试 (Production Testing)

目标

生产环境验证、冒烟测试、监控配置

输出物

• docs/development/release-verification.md

• 上线验证

• 监控告警配置

• 回滚计划

上线验证检查清单

部署前检查

• 所有测试通过
• 环境变量已配置
• 数据库迁移已执行
• CDN 缓存策略正确

冒烟测试

• 首页加载正常
• 登录流程正常
• 核心功能正常
• 支付流程正常（如适用）

监控配置

• 错误监控 (Sentry)
• 性能监控 (Web Vitals)
• 业务指标监控
• 告警通知渠道

回滚计划

• 回滚脚本准备
• 回滚触发条件定义
• 回滚通知机制

灰度发布策略

发布阶段

1. 内部测试 (1% 流量)
2. Beta 用户 (5% 流量)
3. 逐步放量 (25% → 50% → 100%)

监控指标

• 错误率 < 0.1%
• P99 延迟 < 1s
• 用户投诉 = 0

Phase 10: CI/CD 持续迭代 (Continuous Integration/Deployment)

目标

建立持续集成、持续部署、持续迭代机制

输出物

• .github/workflows/ci.yml

• CI 配置

• .github/workflows/deploy.yml

• CD 配置

• 版本发布流程

• 迭代计划

CI/CD 流水线

.github/workflows/ci.yml

name: CI

on: push: branches: [main, develop] pull_request: branches: [main]

jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 - run: npm ci - run: npm run lint - run: npm run typecheck - run: npm run test - run: npm run build

deploy: needs: test if: github.ref == 'refs/heads/main' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: npm ci - run: npm run deploy

迭代流程

┌─────────────────────────────────────────────────────────────┐ │ 持续迭代循环 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────┐ │ │ │ 用户反馈 │◀─────────────────────────────────┐ │ │ └────┬─────┘ │ │ │ ▼ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ 需求整理 │───▶│ 开发实现 │───▶│ 测试验证 │──┤ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ │ ▼ │ │ │ ┌──────────┐ │ │ │ │ 发布上线 │──┘ │ │ └──────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘

版本管理

版本号规则

• MAJOR.MINOR.PATCH (语义化版本)
• MAJOR: 不兼容的 API 变更
• MINOR: 向下兼容的功能新增
• PATCH: 向下兼容的问题修复

发布节奏

• 每周发布 1 次 Minor 版本
• 紧急修复随时发布 Patch 版本
• 每季度评估 Major 版本

文档索引模板

在项目中维护一个 docs/README.md 作为文档索引：

[项目名] 设计文档索引

最后更新: YYYY-MM-DD

一、产品与规划

二、技术设计

2.1 系统设计

2.2 后端设计

2.3 前端设计

三、开发与运维

AI 自动化程度总结

阶段 AI 自动化 需人工操作

1. 建仓库 90% GitHub 创建仓库

2. Idea 70% 产品决策

3. 调研设计 80% 方案选择

4. 技术选型 85% 最终决策

5. UI/UX 85% 设计审核

6. 开发部署 90% 外部服务配置

7. 自测优化 75% 问题判断

8. 测试 85% 测试策略

9. 线上测试 60% 监控告警

10. CI/CD 90% 流程定义

整体：约 80% 可由 AI 自动完成

使用方式

• 复制此 skill 到新项目的 .claude/skills/ 目录

• 按照阶段顺序执行

• 每个阶段完成后检查输出物

• 使用检查清单确保质量

相关资源

• AIMake 项目 - 使用此工作流的实际案例

• docs/README.md - 文档索引示例