design.md 4.2 KB

设计方案:项目初始化

架构决策

1. Monorepo 结构

使用 pnpm workspace 管理前后端分离的应用:

ajy/
├── apps/
│   ├── web/          # React SPA
│   └── api/          # Express API
├── packages/
│   └── shared/       # 共享类型定义
└── openspec/         # 规范管理

决策理由:

  • 代码复用(共享类型)
  • 统一依赖管理
  • 原子化提交

2. 技术选型

层级 技术 理由
前端框架 React 18 生态成熟,团队熟悉
构建工具 Vite 快速 HMR,配置简单
状态管理 Zustand 轻量,TypeScript 友好
UI 框架 Tailwind CSS 原子化样式,开发效率高
后端框架 Express 轻量,中间件生态丰富
ORM Prisma 类型安全,迁移管理
数据库 SQLite → PostgreSQL 开发便捷,生产可扩展

3. OpenCode 铁三角集成

┌─────────────────────────────────────────┐
│           OpenCode IDE                  │
└─────────────────────────────────────────┘
                    │
    ┌───────────────┼───────────────┐
    │               │               │
    ▼               ▼               ▼
┌─────────┐   ┌──────────┐   ┌──────────┐
│OpenSpec │   │Superpowers│   │   OMO    │
│规范层   │   │  流程层   │   │ 执行层   │
└─────────┘   └──────────┘   └──────────┘
    │               │               │
    │  specs/       │ 技能强制      │ 多智能体
    │  changes/     │ TDD/审查      │ 并行执行
    │               │               │
    └───────────────┴───────────────┘
                    │
            ┌───────┴───────┐
            ▼               ▼
    ┌──────────────┐ ┌──────────────┐
    │   AGENTS.md  │ │   实际代码   │
    │  知识库指南   │ │  规范+灵活   │
    └──────────────┘ └──────────────┘

4. Superpowers 技能映射

开发阶段 触发技能 作用
需求澄清 brainstorming 苏格拉底式提问,明确需求
任务规划 writing-plans 拆解为 2-5 分钟小任务
代码隔离 using-git-worktrees 创建隔离工作空间
并行开发 subagent-driven-development 多子代理并行执行
测试驱动 test-driven-development RED-GREEN-REFACTOR
代码审查 requesting-code-review 强制审查阻塞
分支完成 finishing-a-development-branch 合并选项

5. AGENTS.md 层级设计

ajy/AGENTS.md                    # 根级:全局约定
├── apps/web/AGENTS.md           # 前端:React/Vite 特定
├── apps/api/AGENTS.md           # 后端:Express/Prisma 特定
└── packages/shared/AGENTS.md    # 共享包:类型约定

评分标准:

  • 根目录 (.):必须创建(全局配置)
  • 应用目录 (>15 分):独立技术栈,需要 AGENTS.md
  • 工具目录 (<8 分):父级覆盖即可

实施步骤

Wave 1: 基础架构

  1. 初始化 pnpm workspace
  2. 配置 ESLint + Prettier
  3. 创建 TypeScript 基础配置

Wave 2: 前端应用

  1. 创建 Vite + React 项目
  2. 配置 Tailwind CSS
  3. 添加 Zustand 状态管理
  4. 创建基础页面结构

Wave 3: 后端应用

  1. 创建 Express 项目
  2. 配置 Prisma ORM
  3. 创建基础 API 路由
  4. 添加错误处理中间件

Wave 4: 共享包

  1. 创建 shared 包
  2. 定义 API 类型
  3. 定义数据库模型类型

Wave 5: 集成与测试

  1. 配置开发脚本
  2. 创建端到端测试
  3. 验证完整工作流

回滚策略

每个 Wave 完成后提交 Git,可随时回退到上一稳定状态。