PRD 到代码生成

┌──────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐
│ 手动开发  │ → │ 低代码   │ → │ Copilot  │ → │ Agent    │ → │ PRD→Code │
│ (2010)   │   │ (2018)   │   │ (2021)   │   │ (2024)   │   │ (2025+)  │
└──────────┘   └──────────┘   └──────────┘   └──────────┘   └──────────┘
  全手写         拖拽+配置      行级补全       对话式生成      端到端自动化

问题：传统开发流程中，PRD → 设计稿 → 前端代码 → 测试 → 部署

每个环节都需要人工介入，沟通成本高、开发周期长

PRD 理解偏差 → 返工 → 延期 → 超预算

解决：AI 端到端自动化

PRD → AI 解析 → 自动生成架构 + 代码 + 测试 → 人工审查 → 部署

开发周期从周级缩短到天级，沟通成本显著下降

┌───────────────────────────────────────────────────────────────┐
│                    PRD → Code 完整管线                        │
├───────────────────────────────────────────────────────────────┤
│                                                               │
│  ┌─────────┐   ┌─────────┐   ┌─────────┐   ┌─────────┐      │
│  │ PRD 解析 │ → │ 架构设计 │ → │ 代码生成 │ → │ 测试生成 │      │
│  └─────────┘   └─────────┘   └─────────┘   └─────────┘      │
│       │                                              │        │
│       │            ┌─────────┐                       │        │
│       └──────────→ │ 人工审查 │ ←─────────────────────┘        │
│                    └────┬────┘                                │
│                         ▼                                     │
│                    ┌─────────┐                                │
│                    │ CI/CD   │                                │
│                    │ 部署上线 │                                │
│                    └─────────┘                                │
└───────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────┐
│                  PRD 文档（非结构化）              │
│  "用户可以在购物车中修改商品数量，                  │
│   数量不能超过库存，修改后实时更新总价..."          │
└────────────────────┬─────────────────────────────┘
                     │ AI 解析
                     ▼
┌──────────────────────────────────────────────────┐
│              结构化需求 JSON                       │
│  {                                               │
│    "feature": "购物车数量修改",                    │
│    "functional": [...],                          │
│    "nonFunctional": [...],                       │
│    "businessRules": [...]                        │
│  }                                               │
└──────────────────────────────────────────────────┘

// PRD 解析的 Prompt 模板
const prdParsingPrompt = `
## 角色
你是资深前端架构师，擅长从 PRD 中提取可执行的技术需求。

## 任务
解析以下 PRD 文档，提取结构化的需求描述。

## 输出格式（JSON Schema）
{
  "features": [
    {
      "name": "功能名称",
      "description": "功能描述",
      "userStories": ["作为XX，我希望XX，以便XX"],
      "acceptanceCriteria": ["验收条件1", "验收条件2"],
      "priority": "P0|P1|P2",
      "complexity": "low|medium|high"
    }
  ],
  "nonFunctionalRequirements": {
    "performance": ["首屏加载 < 2s"],
    "security": ["XSS 防护"],
    "accessibility": ["WCAG 2.1 AA"]
  },
  "technicalConstraints": ["必须兼容 IE11", "使用 React 18"],
  "apiContracts": [
    {
      "endpoint": "/api/cart",
      "method": "PUT",
      "request": { "productId": "string", "quantity": "number" },
      "response": { "totalPrice": "number", "inStock": "boolean" }
    }
  ]
}

## 约束
- 不要编造 PRD 中没有提到的功能
- 如果 PRD 描述模糊，在 "assumptions" 字段列出你的假设
- 每个功能必须有明确的验收条件

## PRD 文档
${prdContent}
`;

// 解析后的技术方案生成
const techDesignPrompt = `
## 角色
你是资深前端架构师。

## 任务
根据以下结构化需求，生成前端技术方案。

## 输出格式
{
  "architecture": {
    "framework": "React 18",
    "stateManagement": "Zustand",
    "routing": "React Router v6",
    "styling": "Tailwind CSS"
  },
  "componentTree": [
    {
      "name": "CartPage",
      "children": ["CartHeader", "CartItemList", "CartSummary"],
      "state": ["cartItems", "totalPrice"],
      "apiCalls": ["GET /api/cart", "PUT /api/cart/:id"]
    }
  ],
  "fileStructure": [
    "src/pages/CartPage/index.tsx",
    "src/pages/CartPage/CartHeader.tsx",
    "src/pages/CartPage/CartItemList.tsx",
    "src/pages/CartPage/CartSummary.tsx",
    "src/stores/cartStore.ts",
    "src/api/cart.ts"
  ]
}

## 需求 JSON
${structuredRequirements}
`;

// ❌ 低质量 PRD → AI 无法生成准确代码
const badPRD = "做一个购物车页面";

// ✅ 高质量 PRD → AI 能生成高质量代码
const goodPRD = `
购物车页面需求：
1. 展示商品列表（商品图片、名称、单价、数量）
2. 数量可通过 +/- 按钮修改，支持手动输入
3. 数量不能超过库存，不能小于 1
4. 修改数量后实时更新小计和总价
5. 支持删除商品（二次确认弹窗）
6. 空购物车展示引导页面
7. 性能要求：100 个商品时渲染流畅
`;

┌─────────────┐      ┌─────────────┐      ┌─────────────┐
│  Figma 设计  │  →   │  结构化数据  │  →   │  前端代码    │
│  (图层/样式) │      │  (JSON/AST) │      │  (React/Vue) │
└─────────────┘      └─────────────┘      └─────────────┘
       │                                        │
       │           Figma MCP / V0               │
       └────────────────────────────────────────┘

// Figma MCP 的工作原理（简化）
// 1. AI Agent 通过 MCP 协议调用 Figma API
const figmaData = await mcp.call("figma.getFile", {
  fileKey: "abc123",
  nodeIds: ["1:2"], // 指定页面或组件的节点 ID
});

// 2. 返回的结构化数据包含完整的图层树
// {
//   "name": "CartPage",
//   "type": "FRAME",
//   "layoutMode": "VERTICAL",
//   "children": [
//     { "name": "Header", "type": "FRAME", "children": [...] },
//     { "name": "CartList", "type": "FRAME", "children": [...] },
//     { "name": "Footer", "type": "FRAME", "children": [...] }
//   ],
//   "styles": { "padding": 16, "gap": 12 }
// }

// 3. AI 根据结构化数据生成代码
function generateComponent(figmaNode) {
  const layout = figmaNode.layoutMode === "VERTICAL" ? "flex-col" : "flex-row";
  const children = figmaNode.children.map(generateComponent);
  return `
    <div className="${layout} p-${figmaNode.styles.padding / 4}">
      ${children.join("\n")}
    </div>
  `;
}

// V0 的工作流程：
// 1. 用户输入（文本描述或截图）
const userInput = "一个电商购物车页面，左侧商品列表，右侧订单摘要";

// 2. AI 生成组件树
// CartPage
// ├── CartHeader (标题 + 商品数量)
// ├── CartItemList (商品卡片列表)
// │   └── CartItem × N (图片 + 名称 + 价格 + 数量控件)
// └── OrderSummary (小计 + 运费 + 优惠 + 总价 + 结算按钮)

// 3. 生成的代码（React + Tailwind CSS + shadcn/ui）
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

function CartPage({ items }) {
  const totalPrice = items.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0,
  );

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <div className="lg:col-span-2 space-y-4">
        <h2 className="text-2xl font-bold">购物车 ({items.length} 件商品)</h2>
        {items.map((item) => (
          <Card key={item.id} className="flex gap-4 p-4">
            <img
              src={item.image}
              alt={item.name}
              className="w-24 h-24 object-cover rounded"
            />
            <div className="flex-1">
              <h3 className="font-medium">{item.name}</h3>
              <p className="text-lg font-bold">¥{item.price}</p>
            </div>
          </Card>
        ))}
      </div>
      <div>
        <Card className="p-6 sticky top-4">
          <h3 className="text-lg font-bold mb-4">订单摘要</h3>
          <div className="flex justify-between mb-2">
            <span>商品总价</span>
            <span>¥{totalPrice}</span>
          </div>
          <Button className="w-full mt-4">去结算</Button>
        </Card>
      </div>
    </div>
  );
}

┌──────────────────────────────────────────────────────┐
│                   源代码                               │
│  function add(a, b) { return a + b; }                │
└────────────────────┬─────────────────────────────────┘
                     │ AI 分析
          ┌──────────┼──────────┐
          ▼          ▼          ▼
    正常路径测试   边界条件测试   异常场景测试
    add(1,2)=3    add(0,0)=0   add(null,1)=?
    add(5,3)=8    add(-1,1)=0  add("1",2)=?

// AI 生成单元测试（Jest）的 Prompt
const testGenerationPrompt = `
## 角色
你是资深测试工程师，精通 Jest 和 React Testing Library。

## 任务
为以下代码生成完整的单元测试。

## 要求
- 覆盖正常路径、边界条件、异常场景
- 每个公开函数至少 3 个测试用例
- 使用 describe/it 结构组织测试
- Mock 外部依赖（API 调用、localStorage 等）

## 源代码
${sourceCode}
`;

// 生成的测试代码示例
import { render, screen, fireEvent } from "@testing-library/react";
import { CartItem } from "./CartItem";

describe("CartItem", () => {
  const mockItem = {
    id: "1",
    name: "React 实战",
    price: 99,
    quantity: 2,
    image: "/book.jpg",
    stock: 10,
  };

  it("should render item name and price", () => {
    render(
      <CartItem item={mockItem} onUpdate={() => {}} onDelete={() => {}} />,
    );
    expect(screen.getByText("React 实战")).toBeInTheDocument();
    expect(screen.getByText("¥99")).toBeInTheDocument();
  });

  it("should disable minus button when quantity is 1", () => {
    const item = { ...mockItem, quantity: 1 };
    render(<CartItem item={item} onUpdate={() => {}} onDelete={() => {}} />);
    expect(screen.getByLabelText("减少数量")).toBeDisabled();
  });

  it("should disable plus button when quantity equals stock", () => {
    const item = { ...mockItem, quantity: 10 };
    render(<CartItem item={item} onUpdate={() => {}} onDelete={() => {}} />);
    expect(screen.getByLabelText("增加数量")).toBeDisabled();
  });

  it("should call onUpdate with new quantity when plus clicked", () => {
    const onUpdate = jest.fn();
    render(
      <CartItem item={mockItem} onUpdate={onUpdate} onDelete={() => {}} />,
    );
    fireEvent.click(screen.getByLabelText("增加数量"));
    expect(onUpdate).toHaveBeenCalledWith("1", 3);
  });
});

// AI 生成的 Playwright E2E 测试
import { test, expect } from "@playwright/test";

test.describe("购物车功能", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/cart");
  });

  test("应该展示购物车商品列表", async ({ page }) => {
    const items = page.locator("[data-testid='cart-item']");
    await expect(items).toHaveCount(3); // 假设有 3 个商品
  });

  test("点击增加按钮应该更新数量和总价", async ({ page }) => {
    const firstItem = page.locator("[data-testid='cart-item']").first();
    const quantityBefore = await firstItem
      .locator("[data-testid='quantity']")
      .textContent();

    await firstItem.locator("[data-testid='increase-btn']").click();

    const quantityAfter = await firstItem
      .locator("[data-testid='quantity']")
      .textContent();
    expect(Number(quantityAfter)).toBe(Number(quantityBefore) + 1);

    // 验证总价更新
    const totalPrice = await page
      .locator("[data-testid='total-price']")
      .textContent();
    expect(totalPrice).toBeTruthy();
  });

  test("数量不能超过库存", async ({ page }) => {
    const firstItem = page.locator("[data-testid='cart-item']").first();
    const stock = Number(
      await firstItem.locator("[data-testid='stock']").textContent(),
    );

    // 连续点击增加按钮直到达到库存上限
    for (let i = 0; i < stock + 5; i++) {
      const btn = firstItem.locator("[data-testid='increase-btn']");
      if (await btn.isEnabled()) await btn.click();
    }

    const quantity = Number(
      await firstItem.locator("[data-testid='quantity']").textContent(),
    );
    expect(quantity).toBeLessThanOrEqual(stock);
  });

  test("删除商品应该显示确认弹窗", async ({ page }) => {
    await page
      .locator("[data-testid='cart-item']")
      .first()
      .locator("[data-testid='delete-btn']")
      .click();
    await expect(page.locator("[data-testid='confirm-dialog']")).toBeVisible();
    await expect(page.locator("[data-testid='confirm-dialog']")).toContainText(
      "确定要删除",
    );
  });
});

// AI 分析覆盖率并补充测试
const coverageAnalysisPrompt = `
## 任务
分析以下测试覆盖率报告，找出未覆盖的代码路径，补充测试用例。

## 覆盖率报告
${coverageReport}

## 未覆盖的分支
- CartItem: line 45 (quantity > stock 的边界情况)
- CartSummary: line 23 (优惠券过期的处理)
- useCart: line 67 (API 请求失败的错误处理)

## 要求
只为未覆盖的分支补充测试用例，不要重复已有的测试。
`;

┌───────────────────────────────────────────────────────────────┐
│                 端到端 PRD→Code 工作流                         │
│                                                               │
│  ┌──────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐  │
│  │ PRD 文档  │ → │ Claude   │ → │ V0 /     │ → │ Cursor / │  │
│  │ (Markdown)│   │ 解析 PRD │   │ Figma    │   │ Claude   │  │
│  └──────────┘   └──────────┘   │ 设计稿   │   │ Code     │  │
│                                └──────────┘   └────┬─────┘  │
│                                                    │        │
│                                                    ▼        │
│  ┌──────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐ │
│  │ Vercel   │ ← │ GitHub   │ ← │ Qodo /   │ ← │ 生成的   │ │
│  │ 部署     │   │ Actions  │   │ Playwright│   │ 代码     │ │
│  └──────────┘   └──────────┘   │ 测试生成  │   └──────────┘ │
│                                └──────────┘                  │
└───────────────────────────────────────────────────────────────┘

// 端到端工作流的自动化脚本（简化版）
// 使用 Claude Code + V0 + Playwright 的工具链

// Step 1: 解析 PRD
async function parsePRD(prdPath) {
  const prdContent = await readFile(prdPath);
  const requirements = await claude.chat({
    system: "你是前端架构师，从 PRD 中提取结构化需求",
    message: `解析以下 PRD：\n${prdContent}`,
    responseFormat: { type: "json_object" },
  });
  return JSON.parse(requirements);
}

// Step 2: 生成设计稿（通过 V0 API 或 Figma MCP）
async function generateDesign(requirements) {
  const design = await v0.generate({
    prompt: `根据以下需求生成 UI 设计：${JSON.stringify(requirements.features)}`,
    framework: "react",
    style: "tailwind",
  });
  return design; // 返回设计稿 URL 或组件代码
}

// Step 3: 生成代码（通过 Cursor / Claude Code）
async function generateCode(design, requirements) {
  const code = await claude.chat({
    system: `你是资深前端工程师。根据设计稿和需求生成生产级代码。
    技术栈：${requirements.technicalConstraints.join(", ")}`,
    message: `设计稿：${design}\n需求：${JSON.stringify(requirements)}`,
  });
  return code;
}

// Step 4: 生成测试
async function generateTests(sourceCode) {
  const tests = await claude.chat({
    system:
      "你是测试工程师。为以下代码生成 Jest 单元测试和 Playwright E2E 测试。",
    message: sourceCode,
  });
  return tests;
}

// Step 5: 运行测试 + 部署
async function runTestsAndDeploy() {
  await exec("npm run test");
  await exec("npm run test:e2e");
  await exec("git push origin main"); // 触发 CI/CD
}

// 完整管线
async function prdToCode(prdPath) {
  const requirements = await parsePRD(prdPath);
  const design = await generateDesign(requirements);
  const code = await generateCode(design, requirements);
  const tests = await generateTests(code);

  await writeFiles(code, tests);
  await runTestsAndDeploy();
}

# LangGraph 编排 PRD→Code 管线（简化版）
from langgraph.graph import StateGraph

# 定义状态
class PipelineState(TypedDict):
    prd_content: str
    requirements: dict
    design: str
    code: str
    tests: str
    review_feedback: str

# 定义节点
async def parse_prd(state: PipelineState) -> dict:
    requirements = await llm.invoke(PARSE_PROMPT.format(prd=state["prd_content"]))
    return {"requirements": requirements}

async def generate_code(state: PipelineState) -> dict:
    code = await llm.invoke(CODE_PROMPT.format(req=state["requirements"]))
    return {"code": code}

async def generate_tests(state: PipelineState) -> dict:
    tests = await llm.invoke(TEST_PROMPT.format(code=state["code"]))
    return {"tests": tests}

async def human_review(state: PipelineState) -> dict:
    # 人工审查节点——管线暂停，等待人工反馈
    return {"review_feedback": await get_human_feedback(state)}

# 构建图
graph = StateGraph(PipelineState)
graph.add_node("parse_prd", parse_prd)
graph.add_node("generate_code", generate_code)
graph.add_node("generate_tests", generate_tests)
graph.add_node("human_review", human_review)

# 定义边（数据流转）
graph.add_edge("parse_prd", "generate_code")
graph.add_edge("generate_code", "generate_tests")
graph.add_edge("generate_tests", "human_review")
graph.add_conditional_edges("human_review", route_review)

# 运行管线
pipeline = graph.compile()
result = await pipeline.invoke({"prd_content": prd_content})