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

# 创建仓库结构
mkdir -p docs/{planning,design,development}
mkdir -p .claude/{commands,skills}

# 生成基础文件
# - README.md: 项目介绍
# - CLAUDE.md: AI 编码指南
# - .env.example: 环境变量模板

# [产品名] 产品规划

## 产品定位
一句话描述：**[用 XX 技术解决 XX 问题]**

## 核心价值
| 传统方式 | 本产品 |
|----------|--------|
| 痛点 1   | 解决方案 1 |
| 痛点 2   | 解决方案 2 |

## 目标用户
| 用户群 | 核心需求 | 使用场景 |
|--------|----------|----------|
| 主要用户 1 | ... | ... |
| 主要用户 2 | ... | ... |

## 核心功能
### MVP (Phase 1) - 必须有
| 功能 | 描述 | 优先级 |
|------|------|--------|
| 功能 1 | ... | P0 |

### 进阶 (Phase 2) - 应该有
| 功能 | 描述 | 优先级 |
|------|------|--------|
| 功能 2 | ... | P1 |

## 商业模式
- 定价策略
- 目标 MRR
- 竞品分析

# [产品名] 设计总览

## 系统架构
[ASCII 架构图]

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

## 核心流程
[主要业务流程图]

## 技术预研
| 问题 | 方案 A | 方案 B | 选择 |
|------|--------|--------|------|
| 问题 1 | ... | ... | A |

## 前端技术栈
| 技术 | 选择 | 替代方案 | 选择理由 |
|------|------|----------|----------|
| 框架 | React | Vue, Svelte | 生态成熟 |
| 语言 | TypeScript | JavaScript | 类型安全 |
| 样式 | Tailwind | CSS Modules | 开发效率 |
| 状态 | Zustand | Redux, Jotai | 简单轻量 |

## 后端技术栈
| 技术 | 选择 | 替代方案 | 选择理由 |
|------|------|----------|----------|
| 运行时 | Cloudflare Workers | Vercel, AWS Lambda | 边缘部署 |
| 框架 | Hono | Express | 轻量高性能 |
| 数据库 | D1 (SQLite) | PostgreSQL | Serverless |
| 存储 | R2 | S3 | 成本低 |

## 第三方服务
| 服务 | 选择 | 成本 | 选择理由 |
|------|------|------|----------|
| 认证 | Clerk | $0-25/mo | 开箱即用 |
| 支付 | Stripe | 2.9%+0.3 | 国际化 |
| AI | OpenAI | 按量付费 | 质量最佳 |

## ER 图
[ASCII ER 图]

## 表结构
### users 表
| 字段 | 类型 | 说明 |
|------|------|------|
| id | TEXT | 主键 |
| email | TEXT | 邮箱 |
| created_at | DATETIME | 创建时间 |

## 索引设计
[索引列表]

## 查询示例
[常用查询 SQL]

## 设计系统

### 色彩
| 名称 | 色值 | 用途 |
|------|------|------|
| Primary | #1A6BA0 | 主要按钮、链接 |
| Secondary | #10B981 | 成功状态 |
| Error | #EF4444 | 错误提示 |

### 字体
| 级别 | 大小 | 行高 | 用途 |
|------|------|------|------|
| H1 | 36px | 1.2 | 页面标题 |
| Body | 16px | 1.5 | 正文 |

### 间距
| 名称 | 值 | 用途 |
|------|-----|------|
| xs | 4px | 紧凑元素 |
| sm | 8px | 小间距 |
| md | 16px | 标准间距 |

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

## 页面列表
| 页面 | 路径 | 状态 | 说明 |
|------|------|------|------|
| 登录 | /login | 设计中 | Clerk 托管 |
| 主页 | / | 设计中 | Landing Page |
| 应用 | /app | 设计中 | 核心功能 |

## 页面线框图
### [页面名]
[ASCII 线框图]

### 组件说明
| 组件 | 功能 | 交互 |
|------|------|------|
| 组件 1 | ... | ... |

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

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

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

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

## 部署架构

### 生产环境
| 服务 | 平台 | 配置 |
|------|------|------|
| 前端 | Vercel | 自动部署 |
| 后端 | Cloudflare Workers | 边缘部署 |
| 数据库 | Cloudflare D1 | SQLite |
| 存储 | Cloudflare R2 | 对象存储 |

### 备用方案
| 服务 | 主方案 | 备用方案 |
|------|--------|----------|
| 前端 | Vercel | Cloudflare Pages |
| 后端 | Workers | AWS Lambda |

### CI/CD
[GitHub Actions 配置]

## 功能自测
- [ ] 所有 MVP 功能正常工作
- [ ] 边界情况处理
- [ ] 错误提示友好
- [ ] 加载状态正确

## 兼容性测试
- [ ] Chrome / Firefox / Safari
- [ ] 移动端响应式
- [ ] 不同屏幕尺寸

## 性能检查
- [ ] Lighthouse 评分 > 90
- [ ] 首屏加载 < 3s
- [ ] API 响应 < 500ms
- [ ] 无内存泄漏

## 安全检查
- [ ] XSS 防护
- [ ] CSRF 防护
- [ ] SQL 注入防护
- [ ] 敏感信息不暴露

## 代码质量
- [ ] ESLint 无警告
- [ ] TypeScript 无错误
- [ ] 测试覆盖率 > 80%

| 维度 | 满分 | 自评 | 说明 |
|------|------|------|------|
| 功能完整性 | 20 | ? | MVP 功能是否全部实现 |
| 用户体验 | 20 | ? | 交互是否流畅 |
| 代码质量 | 20 | ? | 可维护性、可读性 |
| 性能 | 20 | ? | 加载速度、响应速度 |
| 安全性 | 20 | ? | 安全防护措施 |
| **总分** | 100 | ? | |

## 测试金字塔

        /\
       /  \      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();
});

## 部署前检查
- [ ] 所有测试通过
- [ ] 环境变量已配置
- [ ] 数据库迁移已执行
- [ ] CDN 缓存策略正确

## 冒烟测试
- [ ] 首页加载正常
- [ ] 登录流程正常
- [ ] 核心功能正常
- [ ] 支付流程正常（如适用）

## 监控配置
- [ ] 错误监控 (Sentry)
- [ ] 性能监控 (Web Vitals)
- [ ] 业务指标监控
- [ ] 告警通知渠道

## 回滚计划
- [ ] 回滚脚本准备
- [ ] 回滚触发条件定义
- [ ] 回滚通知机制

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

## 监控指标
- 错误率 < 0.1%
- P99 延迟 < 1s
- 用户投诉 = 0

# .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 版本

# [项目名] 设计文档索引

> 最后更新: YYYY-MM-DD

## 一、产品与规划
| 文档 | 说明 |
|------|------|
| product-plan.md | 产品规划 |

## 二、技术设计
### 2.1 系统设计
| 文档 | 说明 |
|------|------|
| design-research.md | 设计总览 |

### 2.2 后端设计
| 文档 | 说明 |
|------|------|
| api-design.md | API 设计 |
| database-schema.md | 数据库设计 |

### 2.3 前端设计
| 文档 | 说明 |
|------|------|
| ui-ux-design.md | UI/UX 规范 |
| pages-design.md | 页面设计 |

## 三、开发与运维
| 文档 | 说明 |
|------|------|
| env-config.md | 环境配置 |
| deployment-architecture.md | 部署架构 |