AI 全流程研发实战

问题

AI 如何参与前端研发的全流程？从需求分析、技术方案设计、代码生成、代码审查、测试、调试、文档、部署、监控到效能度量，AI 在每个环节如何发挥作用？如何衡量 AI 在研发流程中的 ROI？

答案

AI 已经可以深度参与前端研发的每一个环节。掌握在各阶段高效使用 AI 的方法论，是现代前端工程师的核心竞争力。本文按照完整研发流程，结合实际案例、TypeScript 代码、Prompt 模板和 CI/CD 集成方案，全面讲解 AI 在每个环节的最佳实践。

一、全流程概览

二、需求分析阶段

AI 角色：需求理解、结构化拆解、工时评估、PRD 审查

1. 结构化需求拆解模板

需求分析是项目成败的起点。使用结构化的 Prompt 模板可以让 AI 输出更规范、更可执行的需求拆解：

prompt-templates/requirement-analysis.md

## 角色
你是一位资深前端技术负责人，擅长需求分析和任务拆解。

## 需求描述
[粘贴 PRD 或需求描述]

## 请按以下结构输出

### 1. 需求理解确认
- 用一句话总结核心需求
- 列出你理解的关键用户场景（User Story 格式：作为[角色]，我想要[功能]，以便[目的]）
- 列出你对需求的疑问和不明确之处

### 2. 技术可行性分析
对每个需求点评估：
| 需求点 | 技术难度(1-5) | 风险等级 | 依赖项 | 备注 |

### 3. 任务拆解（Story Points 估算）
按 Epic → Story → Task 三级拆解：
- Epic：大功能模块
  - Story：用户可感知的功能单元（标注 Story Points: 1/2/3/5/8/13）
    - Task：具体开发任务（标注预估工时：x 人天）

### 4. 技术选型建议
| 需求 | 推荐方案 | 备选方案 | 选择理由 |

### 5. MVP 范围建议
- P0（必须有）：上线的最小功能集
- P1（应该有）：下一迭代
- P2（可以有）：后续考虑

### 6. 风险清单
| 风险 | 影响 | 概率 | 缓解措施 |

2. AI 辅助 Story Points 估算

传统的 Planning Poker 依赖团队经验，AI 可以通过分析历史数据来辅助估算：

lib/ai-estimation.ts

interface StoryEstimation {
  story: string;
  description: string;
  storyPoints: 1 | 2 | 3 | 5 | 8 | 13;
  confidence: 'high' | 'medium' | 'low';
  reasoning: string;
  risks: string[];
  subtasks: Array<{
    task: string;
    estimatedHours: number;
    complexity: 'low' | 'medium' | 'high';
  }>;
}

// Prompt 模板：结合历史数据进行估算
const estimationPrompt = `
你是一个资深前端估算专家。请根据以下信息估算 Story Points。

## 参考基准
- 1 SP = 简单 UI 调整、文案修改（0.5 天）
- 2 SP = 基础组件开发、简单 API 对接（1 天）
- 3 SP = 中等复杂度功能、涉及状态管理（2 天）
- 5 SP = 复杂功能、需要多个组件协作（3-5 天）
- 8 SP = 高复杂度、涉及性能优化或架构改动（5-8 天）
- 13 SP = 极高复杂度、需要技术预研（8-13 天）

## 历史参考
以下是过去完成的类似 Story：
{historicalStories}

## 待估算 Story
{currentStory}

请输出 JSON 格式的 StoryEstimation。
`;

3. PRD 审查清单自动生成

prompt-templates/prd-review.md

## 角色
你是一位有 10 年经验的前端架构师，正在审查产品经理的 PRD。

## PRD 内容
[粘贴 PRD]

## 审查维度

### 功能完整性
- [ ] 主流程是否覆盖完整？
- [ ] 异常流程是否定义？（网络错误、超时、权限不足等）
- [ ] 边界条件是否考虑？（空状态、极端数据、并发操作）

### 交互细节
- [ ] 加载状态是否定义？
- [ ] 错误提示是否明确？
- [ ] 动画/过渡效果是否说明？
- [ ] 移动端/桌面端差异是否说明？

### 技术可行性
- [ ] 是否有技术上难以实现的需求？
- [ ] 性能要求是否合理？（数据量、响应时间）
- [ ] 是否涉及跨端兼容性问题？

### 对现有系统的影响
- [ ] 是否影响已有功能？
- [ ] 是否需要数据库迁移？
- [ ] 是否需要后端配合？

### 安全合规
- [ ] 是否涉及敏感数据？
- [ ] 是否需要权限控制？
- [ ] 是否符合无障碍要求（a11y）？

请对每个检查项给出"通过/不通过/需确认"的结论，不通过项给出具体问题描述。

需求阶段的关键原则

1. AI 拆解，人类决策：AI 擅长穷举和结构化，但优先级排序和业务判断需要人类
2. 提供历史参考：把过去的 Sprint 数据给 AI，估算准确度会大幅提升
3. 双向验证：让 AI 反问你，暴露需求中的模糊点

三、技术方案设计阶段

AI 角色：架构图生成、API 契约设计、数据库 Schema 设计、方案对比

1. AI 生成架构图（Mermaid）

prompt-templates/architecture-design.md

## Prompt

基于以下需求，生成前端技术架构。

### 项目信息
- 类型：AI 聊天应用
- 用户量：日活 10 万
- 核心功能：多轮对话、流式输出、文件上传、多模态
- 技术栈：Next.js 15 + React 19

### 请输出
1. 整体架构图（Mermaid graph TD）
2. 数据流图（Mermaid sequence diagram）
3. 目录结构
4. 关键模块设计
5. 状态管理方案
6. API 设计
7. 性能优化方案

AI 生成的 Mermaid 架构图示例：

2. API 契约生成（OpenAPI Spec）

AI 可以根据需求直接生成符合 OpenAPI 3.0 的 API 契约：

prompt-templates/api-contract.md

## Prompt

根据以下需求生成 OpenAPI 3.0 规范的 API 定义：

### 功能模块：对话管理
1. 创建对话（POST /api/conversations）
2. 获取对话列表（GET /api/conversations，支持分页和搜索）
3. 获取对话详情和消息（GET /api/conversations/:id）
4. 发送消息并获取 AI 流式回复（POST /api/conversations/:id/messages，SSE）
5. 删除对话（DELETE /api/conversations/:id）

### 要求
- 所有接口需要 Bearer Token 认证
- 请求和响应使用 TypeScript 类型定义
- 错误响应统一格式
- 支持国际化错误码

AI 可以同时输出 TypeScript 类型和 Zod Schema：

types/api.ts

import { z } from 'zod';

// 统一错误响应
const ApiErrorSchema = z.object({
  code: z.string(),
  message: z.string(),
  details: z.record(z.unknown()).optional(),
});

// 对话相关
const ConversationSchema = z.object({
  id: z.string().uuid(),
  title: z.string(),
  model: z.enum(['gpt-4o', 'claude-sonnet-4', 'claude-opus-4']),
  messageCount: z.number().int(),
  createdAt: z.string().datetime(),
  updatedAt: z.string().datetime(),
});

const CreateConversationSchema = z.object({
  title: z.string().min(1).max(200).optional(),
  model: z.enum(['gpt-4o', 'claude-sonnet-4', 'claude-opus-4']).default('claude-sonnet-4'),
  systemPrompt: z.string().max(4000).optional(),
});

const MessageSchema = z.object({
  id: z.string().uuid(),
  role: z.enum(['user', 'assistant', 'system']),
  content: z.string(),
  attachments: z.array(z.object({
    type: z.enum(['image', 'file']),
    url: z.string().url(),
    name: z.string(),
    size: z.number(),
  })).optional(),
  tokens: z.number().int().optional(),
  createdAt: z.string().datetime(),
});

// 分页响应
const PaginatedResponseSchema = <T extends z.ZodType>(itemSchema: T) =>
  z.object({
    data: z.array(itemSchema),
    total: z.number().int(),
    page: z.number().int(),
    pageSize: z.number().int(),
    hasMore: z.boolean(),
  });

// 导出类型
type Conversation = z.infer<typeof ConversationSchema>;
type Message = z.infer<typeof MessageSchema>;
type CreateConversation = z.infer<typeof CreateConversationSchema>;
type ApiError = z.infer<typeof ApiErrorSchema>;

3. 数据库 Schema 设计

prompt-templates/db-schema.md

## Prompt

根据以下业务模型设计 Prisma Schema：

### 业务实体
- User：用户（支持 OAuth 和邮箱密码登录）
- Conversation：对话（属于某个用户）
- Message：消息（属于某个对话）
- Attachment：附件（属于某条消息）

### 约束
- 使用 PostgreSQL
- 所有 ID 使用 UUID
- 需要软删除支持
- 需要审计字段（createdAt, updatedAt, deletedAt）
- 需要适当的索引
- Message 需要支持全文搜索（PostgreSQL tsvector）

AI 生成的 Prisma Schema：

prisma/schema.prisma

model User {
  id            String         @id @default(uuid()) @db.Uuid
  email         String         @unique
  name          String?
  avatar        String?
  passwordHash  String?
  provider      String?        // oauth provider
  providerId    String?        // oauth provider id
  conversations Conversation[]
  createdAt     DateTime       @default(now())
  updatedAt     DateTime       @updatedAt
  deletedAt     DateTime?

  @@index([email])
  @@index([provider, providerId])
}

model Conversation {
  id           String    @id @default(uuid()) @db.Uuid
  title        String    @default("新对话")
  model        String    @default("claude-sonnet-4")
  systemPrompt String?   @db.Text
  userId       String    @db.Uuid
  user         User      @relation(fields: [userId], references: [id])
  messages     Message[]
  messageCount Int       @default(0)
  createdAt    DateTime  @default(now())
  updatedAt    DateTime  @updatedAt
  deletedAt    DateTime?

  @@index([userId, updatedAt(sort: Desc)])
  @@index([userId, deletedAt])
}

model Message {
  id             String       @id @default(uuid()) @db.Uuid
  role           String       // user | assistant | system
  content        String       @db.Text
  tokens         Int?
  conversationId String       @db.Uuid
  conversation   Conversation @relation(fields: [conversationId], references: [id])
  attachments    Attachment[]
  searchVector   Unsupported("tsvector")? // 全文搜索向量
  createdAt      DateTime     @default(now())

  @@index([conversationId, createdAt])
}

4. 方案对比

prompt-templates/solution-comparison.md

## Prompt

对比以下两个状态管理方案，给出表格对比和推荐：

方案A：Zustand + React Query
方案B：Redux Toolkit + RTK Query

项目类型：AI 聊天应用，频繁的流式数据更新 + 服务端数据缓存
团队规模：5 人前端团队

维度	Zustand + React Query	Redux Toolkit + RTK Query
学习曲线	低，API 简洁	中，概念多
Bundle 大小	~2KB + ~13KB	~12KB + ~15KB
流式数据	Zustand 直接 mutate，零开销	需要 dispatch，序列化开销
服务端缓存	React Query 专业级缓存	RTK Query 集成度好
DevTools	各自有 DevTools	统一 Redux DevTools
TypeScript	天然类型推断	需要手动类型较多
适合团队规模	小中团队	中大团队
推荐	AI 聊天应用首选	大型企业项目

四、代码生成阶段

AI 角色：脚手架生成、功能模块搭建、样板代码消除、数据库迁移

这是 AI 参与最深、效率提升最大的阶段。核心原则是分步迭代、持续验证。

1. 整体功能脚手架生成

prompt-templates/feature-scaffold.md

## Prompt（Claude Code / Cursor Composer）

为 AI 聊天应用创建"对话管理"功能的完整脚手架：

### 需要生成的文件
1. **API 路由**：app/api/conversations/ 下的 CRUD + 消息发送
2. **数据库操作**：lib/db/conversations.ts — Prisma 查询封装
3. **类型定义**：types/conversation.ts — 请求/响应类型
4. **Hooks**：hooks/use-conversations.ts — React Query + 自定义 Hook
5. **组件**：
   - components/chat/conversation-list.tsx — 对话列表
   - components/chat/chat-panel.tsx — 聊天面板
   - components/chat/message-list.tsx — 消息列表
   - components/chat/chat-input.tsx — 输入框
6. **页面**：app/chat/[id]/page.tsx — 聊天页面

### 约束
- 参考 @prisma/schema.prisma 的数据模型
- 参考 @types/api.ts 的类型定义
- 组件使用 shadcn/ui
- 状态管理使用 Zustand
- 服务端数据使用 React Query
- Server Components 优先，交互部分用 Client Components

2. 分步式功能开发

分步实现示例：流式聊天功能

### 第 1 步：流式 API 路由
"创建 app/api/conversations/[id]/messages/route.ts：
- POST 处理：接收消息，调用 LLM，返回 SSE 流
- 使用 TransformStream 转发 LLM 流式响应
- 保存用户消息和 AI 回复到数据库
- 错误处理：LLM 超时、token 超限、频率限制"

### 第 2 步：流式解析 Hook
"创建 hooks/use-chat-stream.ts：
- 使用 fetch + ReadableStream 接收 SSE
- 增量解析 data: 行
- 支持 AbortController 取消
- 暴露 isLoading / error / messages 状态"

### 第 3 步：消息列表组件
"创建 components/chat/message-list.tsx：
- 消息气泡（用户/AI 区分样式）
- Markdown 渲染（使用 react-markdown）
- 代码块语法高亮（使用 shiki）
- 自动滚动到底部
- 流式打字效果"

### 第 4 步：输入框组件
"创建 components/chat/chat-input.tsx：
- 自动增长的 Textarea
- Shift+Enter 换行，Enter 发送
- 中文 composition 事件处理
- 文件拖拽上传
- 发送中禁用状态"

3. 样板代码批量生成

AI 可以一次性生成大量重复性代码，比如 CRUD 操作：

lib/db/base-repository.ts

import { PrismaClient } from '@prisma/client';

// AI 生成的通用 Repository 基类
interface PaginationParams {
  page: number;
  pageSize: number;
}

interface PaginatedResult<T> {
  data: T[];
  total: number;
  page: number;
  pageSize: number;
  hasMore: boolean;
}

// 通用 CRUD 封装 — AI 生成后可复用于所有实体
export function createRepository<
  T,
  CreateInput,
  UpdateInput,
  WhereInput,
>(
  prisma: PrismaClient,
  modelName: string,
) {
  const model = (prisma as Record<string, unknown>)[modelName] as {
    findMany: (args: Record<string, unknown>) => Promise<T[]>;
    findUnique: (args: Record<string, unknown>) => Promise<T | null>;
    create: (args: Record<string, unknown>) => Promise<T>;
    update: (args: Record<string, unknown>) => Promise<T>;
    count: (args: Record<string, unknown>) => Promise<number>;
  };

  return {
    async findMany(
      where: WhereInput,
      pagination: PaginationParams,
      orderBy?: Record<string, 'asc' | 'desc'>,
    ): Promise<PaginatedResult<T>> {
      const { page, pageSize } = pagination;
      const skip = (page - 1) * pageSize;

      const [data, total] = await Promise.all([
        model.findMany({
          where,
          skip,
          take: pageSize,
          orderBy: orderBy ?? { createdAt: 'desc' },
        }),
        model.count({ where }),
      ]);

      return {
        data,
        total,
        page,
        pageSize,
        hasMore: skip + data.length < total,
      };
    },

    async findById(id: string): Promise<T | null> {
      return model.findUnique({ where: { id, deletedAt: null } });
    },

    async create(data: CreateInput): Promise<T> {
      return model.create({ data });
    },

    async update(id: string, data: UpdateInput): Promise<T> {
      return model.update({ where: { id }, data });
    },

    async softDelete(id: string): Promise<T> {
      return model.update({
        where: { id },
        data: { deletedAt: new Date() },
      });
    },
  };
}

4. 数据库迁移脚本生成

prompt-templates/migration.md

## Prompt

为 Message 表添加全文搜索功能，生成 Prisma migration SQL：

要求：
1. 在 Message 表添加 tsvector 列
2. 创建 GIN 索引
3. 创建触发器自动更新搜索向量
4. 支持中文分词（使用 pg_jieba 或 zhparser）
5. 生成可回滚的 migration（up + down）

prisma/migrations/add_fulltext_search/migration.sql

-- Up Migration
-- 添加全文搜索向量列
ALTER TABLE "Message"
ADD COLUMN "search_vector" tsvector;

-- 创建 GIN 索引
CREATE INDEX "Message_search_vector_idx"
ON "Message" USING GIN ("search_vector");

-- 创建更新触发器
CREATE OR REPLACE FUNCTION update_message_search_vector()
RETURNS TRIGGER AS $$
BEGIN
  NEW.search_vector :=
    setweight(to_tsvector('simple', COALESCE(NEW.content, '')), 'A');
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER message_search_vector_update
BEFORE INSERT OR UPDATE ON "Message"
FOR EACH ROW EXECUTE FUNCTION update_message_search_vector();

-- 回填已有数据
UPDATE "Message"
SET search_vector = setweight(to_tsvector('simple', COALESCE(content, '')), 'A');

-- Down Migration（回滚）
-- DROP TRIGGER IF EXISTS message_search_vector_update ON "Message";
-- DROP FUNCTION IF EXISTS update_message_search_vector();
-- DROP INDEX IF EXISTS "Message_search_vector_idx";
-- ALTER TABLE "Message" DROP COLUMN IF EXISTS "search_vector";

五、AI 代码审查与 CI/CD 集成

AI 角色：自动化 PR 审查、安全扫描、代码质量评估

1. GitHub Actions 集成 AI 代码审查

.github/workflows/ai-code-review.yml

name: AI Code Review

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  ai-review:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
      contents: read

    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Get PR Diff
        id: diff
        run: |
          DIFF=$(git diff origin/${{ github.base_ref }}...HEAD -- '*.ts' '*.tsx' ':!*.test.*')
          echo "diff<<EOF" >> $GITHUB_OUTPUT
          echo "$DIFF" >> $GITHUB_OUTPUT
          echo "EOF" >> $GITHUB_OUTPUT

      - name: AI Review with Claude
        uses: anthropics/claude-code-action@v1
        with:
          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
          prompt: |
            审查以下 PR 代码变更，按以下分类反馈：
            - MUST_FIX: 必须修复的问题（Bug、安全漏洞、数据丢失风险）
            - SHOULD_FIX: 建议修复的问题（性能、可维护性）
            - NICE_TO_HAVE: 优化建议
            - GOOD: 值得肯定的好实践

            重点关注：
            1. TypeScript 类型安全（是否有 any、类型断言滥用）
            2. React 性能（不必要的重渲染、缺少 key）
            3. 安全风险（XSS、注入、敏感信息泄露）
            4. 错误处理（是否吞掉错误、是否缺少 try-catch）
            5. 边界条件（空数据、并发、竞态）

      - name: Post Review Comment
        uses: actions/github-script@v7
        with:
          script: |
            const review = '${{ steps.ai-review.outputs.result }}';
            await github.rest.pulls.createReview({
              owner: context.repo.owner,
              repo: context.repo.repo,
              pull_number: context.issue.number,
              body: review,
              event: 'COMMENT',
            });

2. 自定义 AI 审查规则

为不同类型的文件配置不同的审查重点：

scripts/ai-review-rules.ts

interface ReviewRule {
  name: string;
  glob: string;
  prompt: string;
  severity: 'error' | 'warning' | 'info';
}

const reviewRules: ReviewRule[] = [
  {
    name: 'API 安全审查',
    glob: 'app/api/**/*.ts',
    severity: 'error',
    prompt: `审查 API 路由代码，重点检查：
1. 是否有认证检查（auth() 调用）
2. 输入是否经过 Zod 校验
3. 是否有 SQL 注入风险
4. 是否正确处理了错误
5. 是否有速率限制
6. 敏感数据是否脱敏`,
  },
  {
    name: 'React 组件审查',
    glob: 'components/**/*.tsx',
    severity: 'warning',
    prompt: `审查 React 组件，重点检查：
1. 是否需要 'use client' 但遗漏了
2. 是否可以用 Server Component 但错误地用了 Client Component
3. Props 类型定义是否完善
4. 是否有性能问题（缺少 memo、callback 依赖错误）
5. 可访问性（a11y）：alt、role、aria-*`,
  },
  {
    name: 'Hook 审查',
    glob: 'hooks/**/*.ts',
    severity: 'warning',
    prompt: `审查自定义 Hook，重点检查：
1. 依赖数组是否正确
2. 是否有内存泄漏（缺少 cleanup）
3. 是否有闭包陷阱
4. 是否正确处理了竞态条件`,
  },
  {
    name: 'Prisma 查询审查',
    glob: 'lib/db/**/*.ts',
    severity: 'error',
    prompt: `审查数据库查询代码，重点检查：
1. N+1 查询问题
2. 是否使用了 include/select 限制返回字段
3. 分页查询是否正确
4. 事务是否正确使用
5. 软删除条件是否遗漏`,
  },
];

3. CodeRabbit / AI 审查工具对比

工具	类型	优势	价格	适合
CodeRabbit	SaaS	零配置、自动学习团队风格	$12/用户/月	中小团队快速上手
Claude Code Action	GitHub Action	Anthropic 官方、高质量审查	API 计费	重度 Claude 用户
自建 AI 审查	自定义	完全控制、定制规则	模型 API 费用	企业定制需求
Copilot Code Review	GitHub 集成	GitHub 原生集成	Copilot 订阅内	GitHub 生态

4. 提交前 AI 自审

prompt-templates/pre-commit-review.md

## Prompt（Claude Code）

审查我最近的改动（git diff --staged），关注：

### 必查项
1. **类型安全**：是否有 any、as 断言滥用、类型不匹配
2. **安全风险**：XSS、注入、敏感信息、eval 使用
3. **错误处理**：catch 中是否吞掉错误、async 是否缺少 try-catch
4. **边界条件**：null/undefined、空数组、极端数据

### 建议项
5. **性能**：不必要的重渲染、大循环中的 await
6. **可读性**：命名、函数长度、注释
7. **测试**：关键逻辑是否有测试覆盖

### 输出格式
对每个问题给出：
- 文件名和行号
- 问题分类（MUST_FIX / SHOULD_FIX / NICE_TO_HAVE）
- 问题描述
- 修复建议（附代码）

六、AI 驱动的测试策略

AI 角色：测试用例生成、变异测试、视觉回归测试

更多测试基础知识参考 前端测试策略。

1. 从需求自动生成测试用例

最高效的 AI 测试方式是从需求文档直接生成测试，而非先写代码再补测试：

prompt-templates/test-from-requirements.md

## Prompt

根据以下需求文档，生成完整的测试用例（不需要先写实现代码）。

### 需求：文件上传功能
- 支持拖拽和点击上传
- 文件类型限制：图片（jpg/png/webp）和文档（pdf/docx）
- 单文件大小限制：10MB
- 最多同时上传 5 个文件
- 显示上传进度
- 上传失败可重试
- 支持取消正在上传的文件

### 请生成
1. 单元测试（Vitest）：核心逻辑
2. 组件测试（React Testing Library）：UI 交互
3. E2E 测试（Playwright）：完整流程
4. 边界条件测试清单

AI 生成的测试示例：

__tests__/file-upload.test.ts

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { FileUpload } from '../components/file-upload';

// 工具函数：创建模拟文件
function createMockFile(
  name: string,
  size: number,
  type: string,
): File {
  const buffer = new ArrayBuffer(size);
  return new File([buffer], name, { type });
}

describe('FileUpload', () => {
  const mockOnUpload = vi.fn();
  const user = userEvent.setup();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  // ===== 文件类型校验 =====
  describe('文件类型限制', () => {
    it('应该接受允许的图片类型（jpg/png/webp）', async () => {
      render(<FileUpload onUpload={mockOnUpload} />);

      const file = createMockFile('test.jpg', 1024, 'image/jpeg');
      const input = screen.getByTestId('file-input');
      await user.upload(input, file);

      expect(screen.queryByText(/不支持的文件类型/)).toBeNull();
    });

    it('应该拒绝不允许的文件类型并显示错误', async () => {
      render(<FileUpload onUpload={mockOnUpload} />);

      const file = createMockFile('test.exe', 1024, 'application/x-msdownload');
      const input = screen.getByTestId('file-input');
      await user.upload(input, file);

      expect(screen.getByText(/不支持的文件类型/)).toBeInTheDocument();
      expect(mockOnUpload).not.toHaveBeenCalled();
    });
  });

  // ===== 文件大小限制 =====
  describe('文件大小限制', () => {
    it('应该拒绝超过 10MB 的文件', async () => {
      render(<FileUpload onUpload={mockOnUpload} />);

      const file = createMockFile('large.jpg', 11 * 1024 * 1024, 'image/jpeg');
      const input = screen.getByTestId('file-input');
      await user.upload(input, file);

      expect(screen.getByText(/文件大小超过限制/)).toBeInTheDocument();
    });

    it('应该接受恰好 10MB 的文件（边界值）', async () => {
      render(<FileUpload onUpload={mockOnUpload} />);

      const file = createMockFile('exact.jpg', 10 * 1024 * 1024, 'image/jpeg');
      const input = screen.getByTestId('file-input');
      await user.upload(input, file);

      expect(screen.queryByText(/文件大小超过限制/)).toBeNull();
    });
  });

  // ===== 数量限制 =====
  describe('文件数量限制', () => {
    it('应该限制最多同时上传 5 个文件', async () => {
      render(<FileUpload onUpload={mockOnUpload} maxFiles={5} />);

      const files = Array.from({ length: 6 }, (_, i) =>
        createMockFile(`file${i}.jpg`, 1024, 'image/jpeg')
      );
      const input = screen.getByTestId('file-input');
      await user.upload(input, files);

      expect(screen.getByText(/最多上传 5 个文件/)).toBeInTheDocument();
    });
  });

  // ===== 取消上传 =====
  describe('取消上传', () => {
    it('应该支持取消正在上传的文件', async () => {
      // 模拟一个永远不会完成的上传
      mockOnUpload.mockReturnValue(new Promise(() => {}));

      render(<FileUpload onUpload={mockOnUpload} />);

      const file = createMockFile('test.jpg', 1024, 'image/jpeg');
      const input = screen.getByTestId('file-input');
      await user.upload(input, file);

      // 点击取消按钮
      const cancelButton = screen.getByTestId('cancel-upload-0');
      await user.click(cancelButton);

      expect(screen.getByText(/已取消/)).toBeInTheDocument();
    });
  });

  // ===== 拖拽上传 =====
  describe('拖拽上传', () => {
    it('应该支持拖拽文件到上传区域', () => {
      render(<FileUpload onUpload={mockOnUpload} />);

      const dropZone = screen.getByTestId('drop-zone');
      const file = createMockFile('test.jpg', 1024, 'image/jpeg');

      fireEvent.dragOver(dropZone, {
        dataTransfer: { files: [file], types: ['Files'] },
      });

      expect(dropZone).toHaveClass('drag-over');

      fireEvent.drop(dropZone, {
        dataTransfer: { files: [file] },
      });

      expect(mockOnUpload).toHaveBeenCalledWith(
        expect.arrayContaining([file])
      );
    });
  });
});

2. AI 变异测试（Mutation Testing）

变异测试通过修改代码来验证测试的有效性。AI 可以智能地生成变异体：

scripts/ai-mutation-testing.ts

interface Mutation {
  file: string;
  line: number;
  original: string;
  mutated: string;
  type: MutationType;
}

type MutationType =
  | 'boundary_change'       // > 改为 >=
  | 'condition_negate'      // if(x) 改为 if(!x)
  | 'return_value_change'   // return true 改为 return false
  | 'operator_swap'         // + 改为 -
  | 'null_return'           // return value 改为 return null
  | 'empty_body'            // 删除函数体
  | 'constant_replace';     // 替换常量值

// AI 生成的变异分析 Prompt
const mutationPrompt = `
分析以下代码，生成有效的变异测试用例。

要求：
1. 只生成"有意义"的变异（能暴露测试不足的变异）
2. 每个变异说明：如果测试仍然通过，意味着缺少什么测试
3. 按照风险等级排序（高风险的变异优先）

代码：
{sourceCode}

当前测试：
{testCode}

输出格式：
{
  "mutations": [
    {
      "line": 42,
      "original": "if (age >= 18)",
      "mutated": "if (age > 18)",
      "type": "boundary_change",
      "risk": "high",
      "missingTest": "缺少 age === 18 的边界值测试"
    }
  ],
  "coverageGaps": ["描述当前测试的盲区"]
}
`;

3. AI 视觉回归测试

tests/visual-regression.spec.ts

import { test, expect } from '@playwright/test';

// AI 辅助生成的视觉回归测试
test.describe('视觉回归测试', () => {
  test('聊天页面 - 桌面端', async ({ page }) => {
    await page.goto('/chat/test-conversation');
    await page.waitForSelector('[data-testid="message-list"]');

    // 等待所有图片加载完成
    await page.waitForFunction(() => {
      const images = document.querySelectorAll('img');
      return Array.from(images).every(img => img.complete);
    });

    await expect(page).toHaveScreenshot('chat-desktop.png', {
      maxDiffPixelRatio: 0.01, // 允许 1% 的像素差异
      animations: 'disabled',
    });
  });

  test('聊天页面 - 移动端', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 812 }); // iPhone X
    await page.goto('/chat/test-conversation');
    await page.waitForSelector('[data-testid="message-list"]');

    await expect(page).toHaveScreenshot('chat-mobile.png', {
      maxDiffPixelRatio: 0.01,
    });
  });

  // AI 分析视觉差异
  test('AI 分析截图差异', async ({ page }) => {
    // 截取当前页面
    const screenshot = await page.screenshot({ fullPage: true });

    // 将截图发送给多模态 AI 分析
    // 检查：布局是否正确、颜色是否符合设计稿、文字是否清晰
    // 这一步通常集成到 CI 中，通过 API 调用实现
  });
});

七、AI 辅助调试

AI 角色：错误分析、根因定位、修复建议

1. 提供完整错误上下文

调试的关键是给 AI 足够的上下文。以下是一个结构化的调试 Prompt 模板：

prompt-templates/debugging.md

## Prompt

我遇到了一个 Bug，请帮我分析根因并给出修复方案。

### 1. 现象描述
- 页面：聊天页面 /chat/[id]
- 操作：发送消息后，消息列表没有自动滚动到底部
- 频率：每次都出现
- 影响范围：所有浏览器

### 2. 期望行为
发送新消息后，消息列表自动滚动到最新消息

### 3. 实际行为
消息列表停留在原位，需要手动滚动

### 4. 已尝试的排查
- console.log 确认 scrollToBottom 被调用了
- scrollIntoView 确认执行了
- 怀疑是 DOM 更新时机问题

### 5. 相关代码
[粘贴代码或使用 @mention]

### 6. 环境信息
- Next.js 15.1、React 19
- 浏览器：Chrome 131、Safari 18
- 开发环境正常，生产环境出现

### 请输出
1. 可能的根因分析（按概率排序）
2. 验证方法（如何确认是哪个原因）
3. 修复方案（附代码）
4. 预防措施（如何避免类似问题）

2. 根因分析模式

lib/debug-patterns.ts

// AI 分析出的常见根因模式

// 模式1：React 状态更新 + DOM 操作时序问题
// 根因：scrollToBottom 在状态更新前执行
// 修复：使用 useEffect 监听消息变化后滚动
function useAutoScroll(messages: Message[]) {
  const bottomRef = useRef<HTMLDivElement>(null);
  const [shouldAutoScroll, setShouldAutoScroll] = useState(true);

  useEffect(() => {
    if (shouldAutoScroll && bottomRef.current) {
      // requestAnimationFrame 确保 DOM 已更新
      requestAnimationFrame(() => {
        bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
      });
    }
  }, [messages.length, shouldAutoScroll]);

  // 检测用户是否手动滚动（如果手动滚动了则不自动滚动）
  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    const target = e.currentTarget;
    const isAtBottom =
      target.scrollHeight - target.scrollTop - target.clientHeight < 100;
    setShouldAutoScroll(isAtBottom);
  }, []);

  return { bottomRef, handleScroll };
}

// 模式2：流式渲染频繁更新导致性能问题
// 根因：每个 token 都触发 setState + scrollIntoView
// 修复：节流滚动 + 批量更新
function useThrottledScroll(containerRef: RefObject<HTMLDivElement | null>) {
  const scrollToBottom = useMemo(
    () =>
      throttle(() => {
        const container = containerRef.current;
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      }, 100), // 每 100ms 最多滚动一次
    [containerRef],
  );

  return scrollToBottom;
}

3. 复杂问题复现

prompt-templates/reproduce-issue.md

## Prompt

帮我写一个最小复现用例来验证这个 Bug：

### Bug 描述
在 React 19 + Next.js 15 中，使用 useOptimistic 更新列表时，
如果在 transition 期间快速连续触发两次操作，第一次操作的乐观更新会丢失。

### 请生成
1. 一个最小化的 React 组件复现此问题（可以独立运行）
2. 复现步骤说明
3. 期望行为 vs 实际行为
4. 可能的 React 源码层面解释

八、AI 文档自动生成

AI 角色：API 文档、Changelog、README、代码注释

1. 从代码生成 API 文档

prompt-templates/api-docs.md

## Prompt（Claude Code）

扫描 app/api/ 目录下所有 route.ts 文件，为每个 API 端点生成文档：

### 要求
1. 从代码中提取：HTTP 方法、路径、请求参数、响应格式
2. 从 Zod Schema 中提取请求校验规则
3. 包含 curl 示例
4. 包含 TypeScript 调用示例
5. 标注认证要求
6. 输出 Markdown 格式

### 输出格式
## POST /api/conversations

创建新对话。

**认证**：需要 Bearer Token

**请求体**：
| 字段 | 类型 | 必填 | 说明 |
...

**响应**：
...

**示例**：
```bash
curl -X POST ...
```​

```typescript
const res = await fetch(...)
```​

2. 从 Git Commits 生成 Changelog

scripts/generate-changelog.ts

import { execSync } from 'child_process';

interface ChangelogEntry {
  type: 'feat' | 'fix' | 'perf' | 'refactor' | 'docs' | 'chore';
  scope?: string;
  description: string;
  breaking: boolean;
  pr?: string;
}

// 获取两个版本之间的 commits
function getCommitsSinceTag(tag: string): string {
  return execSync(
    `git log ${tag}..HEAD --pretty=format:"%h|%s|%b" --no-merges`,
    { encoding: 'utf-8' },
  );
}

// AI Prompt 模板
const changelogPrompt = `
将以下 Git commits 整理为用户友好的 Changelog。

## Commits
{commits}

## 要求
1. 按类别分组：新功能、Bug 修复、性能优化、重构、文档
2. 每条用一句话描述用户可感知的变化（不是代码变化）
3. 突出 Breaking Changes
4. 包含相关 PR 链接
5. 使用中文

## 输出格式
# v{version} ({date})

## 新功能
- 新增对话导出为 PDF 功能 (#123)
- 支持拖拽上传图片到聊天输入框 (#125)

## Bug 修复
- 修复移动端输入法导致消息重复发送的问题 (#130)

## 性能优化
- 优化消息列表虚拟滚动性能，减少 50% 内存占用 (#128)

## Breaking Changes
- API 响应格式从 { data } 改为 { data, meta } (#127)
`;

3. README 自动生成和更新

prompt-templates/readme-generation.md

## Prompt（Claude Code）

扫描项目结构并生成/更新 README.md：

### 需要包含
1. 项目简介（从 package.json description 提取）
2. 技术栈（从 dependencies 分析）
3. 项目结构（从目录结构生成树形图）
4. 快速开始（从 scripts 生成命令列表）
5. 环境变量（从 .env.example 提取并说明）
6. API 文档链接
7. 部署说明
8. 贡献指南

### 约束
- 不要暴露敏感信息
- 保留已有的自定义内容（用 <!-- custom --> 标记的区域）
- 从实际代码中提取信息，不要编造

九、AI 监控与事件响应

AI 角色：异常检测、事件分级、根因分析、复盘报告

1. AI 异常检测

lib/monitoring/ai-anomaly-detector.ts

interface MetricDataPoint {
  timestamp: number;
  value: number;
  labels: Record<string, string>;
}

interface AnomalyAlert {
  metric: string;
  severity: 'critical' | 'warning' | 'info';
  current: number;
  baseline: number;
  deviation: number;
  possibleCauses: string[];
  suggestedActions: string[];
}

// AI 辅助生成的异常检测配置
const anomalyRules = {
  // 错误率异常
  errorRate: {
    metric: 'js_error_count / page_view_count',
    // 基线：过去 7 天同时段平均值
    baselineWindow: '7d',
    // 偏差超过 3 个标准差则告警
    threshold: 3,
    severity: 'critical' as const,
  },

  // Core Web Vitals 退化
  lcpRegression: {
    metric: 'web_vitals_lcp_p75',
    baselineWindow: '7d',
    threshold: 2, // LCP P75 超出基线 2 个标准差
    severity: 'warning' as const,
  },

  // API 延迟异常
  apiLatencySpike: {
    metric: 'api_response_time_p99',
    baselineWindow: '24h',
    threshold: 3,
    severity: 'warning' as const,
  },

  // 流式响应中断率
  streamInterruptRate: {
    metric: 'stream_interrupt_count / stream_total_count',
    baselineWindow: '24h',
    threshold: 2,
    severity: 'critical' as const,
  },
};

2. AI 自动事件分级

lib/monitoring/incident-triage.ts

interface Incident {
  id: string;
  title: string;
  source: string;    // sentry | grafana | custom
  rawData: unknown;
  timestamp: Date;
}

interface TriageResult {
  severity: 'P0' | 'P1' | 'P2' | 'P3';
  category: string;
  affectedUsers: 'all' | 'partial' | 'minimal';
  suggestedOwner: string;
  summary: string;
  runbook: string[];  // AI 生成的处理步骤
}

// AI Prompt 模板：事件自动分级
const triagePrompt = `
你是一名前端 SRE，请对以下告警进行分级和分析。

## 告警信息
{incidentData}

## 分级标准
- P0（紧急）：核心功能完全不可用、全量用户受影响、数据丢失
- P1（严重）：核心功能部分不可用、大量用户受影响
- P2（一般）：非核心功能异常、少量用户受影响
- P3（轻微）：体验问题、不影响核心流程

## 请输出
1. 严重等级和理由
2. 影响范围评估
3. 初步根因猜测（按概率排序）
4. 建议的处理步骤（Runbook）
5. 需要通知的人
6. 临时缓解措施（如果有）
`;

3. AI 辅助 Postmortem

prompt-templates/postmortem.md

## Prompt

根据以下事件信息生成 Postmortem 报告：

### 事件概要
- 时间：2025-01-15 14:30 - 15:45（持续 75 分钟）
- 影响：聊天功能不可用，约 3 万用户受影响
- 根因：Redis 连接池耗尽导致会话查询超时

### 时间线
[粘贴事件时间线]

### 已采取的措施
[粘贴已执行的操作]

### 请生成标准 Postmortem 报告

## 报告模板

### 1. 事件概要
一句话总结事件

### 2. 影响范围
- 受影响用户数
- 受影响功能
- 持续时间
- 商业影响

### 3. 时间线
| 时间 | 事件 | 操作人 |

### 4. 根因分析（5 Whys）
- Why 1: 为什么聊天功能不可用？
  - 因为 API 请求超时
- Why 2: 为什么 API 请求超时？
  - 因为 Redis 连接池耗尽
- ...

### 5. 修复措施
| 措施 | 类型 | 负责人 | 截止时间 | 状态 |

### 6. 经验教训
- 做得好的
- 需要改进的
- 运气好的（本可以更严重）

### 7. 后续行动
| 优先级 | 行动项 | 负责人 | 截止日期 |

十、部署与 CI/CD

AI 角色：配置生成、部署问题排查

更多 CI/CD 知识参考 CI/CD 与自动化部署。

1. 完整 CI/CD 配置生成

.github/workflows/ci.yml

name: CI/CD Pipeline

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

jobs:
  # ===== 代码质量检查 =====
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'

      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm type-check
      - run: pnpm test -- --coverage --reporter=json --outputFile=coverage.json

      # Bundle 大小检查
      - name: Build and check bundle size
        run: |
          pnpm build
          # 检查总产物大小
          TOTAL_SIZE=$(du -sk .next/static | cut -f1)
          if [ "$TOTAL_SIZE" -gt 512 ]; then
            echo "::warning::Bundle size ${TOTAL_SIZE}KB exceeds 512KB budget"
          fi

  # ===== AI 代码审查（仅 PR）=====
  ai-review:
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: AI Code Review
        uses: anthropics/claude-code-action@v1
        with:
          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}

  # ===== E2E 测试 =====
  e2e:
    runs-on: ubuntu-latest
    needs: quality
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec playwright install --with-deps
      - run: pnpm build
      - run: pnpm test:e2e

  # ===== 部署（仅 main 分支）=====
  deploy:
    if: github.ref == 'refs/heads/main'
    needs: [quality, e2e]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

2. 部署问题排查

prompt-templates/deploy-debug.md

## Prompt

部署到生产环境后出现以下问题：

### 现象
- 页面白屏，控制台显示 "ChunkLoadError: Loading chunk xxx failed"
- 发生在 SPA 路由切换时
- 不是每次都出现，似乎和版本更新有关
- CDN 返回 200 但内容是 HTML（index.html）

### 环境
- Next.js 15 standalone 模式
- Docker + Nginx 反向代理
- CloudFront CDN

### 请分析
1. 根因（按概率排序）
2. 各原因的验证方法
3. 针对每个原因的修复方案
4. 长期预防措施

常见部署问题及 AI 分析思路

1. ChunkLoadError：通常是 CDN 缓存了旧版本的路由规则，导致新 chunk 的请求被回退到 index.html
2. 环境变量缺失：构建时 vs 运行时环境变量混淆
3. CORS 错误：API 域名和前端域名不一致
4. SSR Hydration 不匹配：Server 和 Client 渲染结果不一致

十一、度量 AI 研发效能

AI 角色：数据收集、指标计算、趋势分析

1. AI 效能度量指标体系

维度	指标	计算方式	目标
速度	AI 前后 PR 平均交付时间	从创建到合并的时间	减少 30%+
速度	Story Points 完成速率	SP / Sprint	提升 50%+
速度	首次代码提交时间	从任务分配到首次 push	减少 40%+
质量	缺陷密度	Bug 数 / 千行代码	不增加
质量	PR 审查通过率	首次审查通过的 PR / 总 PR	提升
质量	生产事件数	P0+P1 事件 / 月	不增加
满意度	开发者满意度	问卷调查（1-10）	> 7
满意度	AI 工具采用率	使用 AI 的开发者 / 总开发者	> 80%
成本	AI 工具花费	API 费用 + 订阅费 / 月	ROI > 3x
成本	代码 AI 生成占比	AI 生成代码行 / 总代码行	参考值 40-60%

2. AI 效能数据收集

lib/metrics/ai-effectiveness.ts

interface AIMetrics {
  // Sprint 维度
  sprintVelocity: {
    beforeAI: number;  // 引入 AI 前平均 velocity
    afterAI: number;   // 引入 AI 后平均 velocity
    improvement: number; // 提升百分比
  };

  // PR 维度
  prMetrics: {
    avgTimeToMerge: {
      beforeAI: number; // 小时
      afterAI: number;
    };
    avgReviewRounds: {
      beforeAI: number;
      afterAI: number;
    };
    firstPassRate: {
      beforeAI: number; // 首次审查通过率 %
      afterAI: number;
    };
  };

  // 质量维度
  qualityMetrics: {
    bugDensity: {
      beforeAI: number; // bugs / KLOC
      afterAI: number;
    };
    productionIncidents: {
      beforeAI: number; // P0+P1 per month
      afterAI: number;
    };
    testCoverage: {
      beforeAI: number; // %
      afterAI: number;
    };
  };

  // 成本维度
  costMetrics: {
    aiToolCostPerMonth: number;       // AI 工具月费用
    developerCostSaved: number;       // 节省的开发者人力成本
    roi: number;                      // 投资回报率 = 节省成本 / AI 工具成本
  };
}

// ROI 计算公式
function calculateAIROI(metrics: AIMetrics): number {
  const { costMetrics, sprintVelocity } = metrics;

  // 效率提升带来的人力成本节省
  const velocityImprovement = sprintVelocity.improvement / 100;
  const teamSize = 5;
  const avgMonthlySalary = 30000; // 元
  const effectiveSaving = teamSize * avgMonthlySalary * velocityImprovement;

  // ROI = 节省的等效人力成本 / AI 工具成本
  return effectiveSaving / costMetrics.aiToolCostPerMonth;
}

3. A/B 测试 AI 工具效果

lib/metrics/ab-test-ai-tools.ts

interface ABTestConfig {
  name: string;
  description: string;
  controlGroup: {
    developers: string[];
    tools: string[];    // 对照组：不用 AI 或用基础 AI
  };
  treatmentGroup: {
    developers: string[];
    tools: string[];    // 实验组：使用新 AI 工具/流程
  };
  duration: string;     // 测试周期
  metrics: string[];    // 要度量的指标
}

// A/B 测试示例
const aiToolABTest: ABTestConfig = {
  name: 'AI Code Review 效果测试',
  description: '测试在 CI 中引入 AI 代码审查是否减少生产 Bug',
  controlGroup: {
    developers: ['team-alpha'],
    tools: ['ESLint', '人工 Code Review'],
  },
  treatmentGroup: {
    developers: ['team-beta'],
    tools: ['ESLint', '人工 Code Review', 'AI Code Review'],
  },
  duration: '4 sprints',
  metrics: [
    'bug_count_per_sprint',
    'pr_review_time',
    'pr_first_pass_rate',
    'developer_satisfaction',
  ],
};

十二、AI 研发全流程最佳实践总结

阶段	AI 工具	核心能力	效率提升	Prompt 关键点
需求分析	ChatGPT/Claude	需求拆解、Story Points 估算	30-50%	提供历史数据、结构化模板
技术设计	Claude/ChatGPT	架构图、API 契约、Schema	40-60%	明确技术栈约束
代码生成	Cursor/Claude Code	脚手架、功能模块、迁移脚本	200-400%	分步迭代、每步验证
代码审查	Claude Action/CodeRabbit	自动 PR 审查、安全扫描	50-100%	自定义审查规则
测试	Copilot/Cursor	从需求生成测试、变异测试	100-200%	需求先行、边界覆盖
调试	Claude Code	根因分析、复现方案	50-100%	完整上下文、环境信息
文档	Claude Code	API 文档、Changelog、README	80-150%	从代码提取、不编造
部署	Claude Code	CI/CD 配置、问题排查	30-50%	给出完整错误日志
监控	Claude/自建	异常检测、事件分级、Postmortem	30-50%	提供历史基线数据
效能度量	自建工具	数据分析、ROI 计算	—	对比 AI 前后数据

最重要的实践原则

1. AI 执行，人类决策：AI 擅长穷举和生成，人类负责审查和判断
2. 分步验证：不要让 AI 一次生成太多代码，每步验证后再继续
3. 上下文为王：AI 输出质量 = Prompt 质量 + 上下文质量
4. Rules 先行：项目初始化时就配好 AI 工具 Rules，后续事半功倍
5. 度量反馈：持续收集数据，优化 AI 使用方式
6. 安全底线：敏感代码必须人工审查，不要把密钥给 AI

过度依赖 AI 的风险

1. 能力退化：长期依赖 AI 生成代码，可能导致基础编码能力下降
2. 同质化：AI 倾向于生成"标准"方案，团队可能丧失创新思维
3. 安全盲区：AI 可能生成包含漏洞的代码，缺乏安全意识
4. 知识断层：不理解 AI 生成的代码原理，出问题时无法排查
5. 成本失控：不加节制使用 API，月费用可能超出预期

缓解措施：定期 Code Kata 训练、代码审查聚焦"为什么"而非"是什么"、安全培训

---

常见面试问题

Q1: 描述 AI 参与前端研发全流程的最佳实践

答案：

AI 参与前端研发全流程的核心原则是每个阶段都让 AI 参与，但人类做最终决策：

1. 需求阶段：AI 做结构化需求拆解（Epic/Story/Task）、Story Points 估算、PRD 审查清单生成。人类确认优先级和 MVP 范围
2. 设计阶段：AI 生成 Mermaid 架构图、OpenAPI 契约、Prisma Schema、方案对比表格。人类审核架构决策
3. 编码阶段：AI 生成脚手架、功能模块代码、迁移脚本。效率提升最大（3-5 倍），关键是分步迭代、每步验证
4. 审查阶段：AI 集成到 CI/CD 自动审查 PR（安全、类型、性能）。人类聚焦业务逻辑审查
5. 测试阶段：AI 从需求文档直接生成测试用例，覆盖边界条件。AI 还能做变异测试分析测试有效性
6. 调试阶段：给 AI 提供完整错误上下文（现象、代码、环境、已排查项），AI 按概率给出根因分析
7. 文档阶段：AI 从代码自动生成 API 文档、Changelog、README
8. 监控阶段：AI 辅助异常检测、事件自动分级（P0-P3）、Postmortem 报告生成
9. 度量阶段：收集 AI 使用前后的效能数据，计算 ROI

最大的效率提升在编码阶段（200-400%），但要注意：AI 生成的代码必须经过类型检查、Lint、测试和人工审查。

Q2: 如何为不同研发阶段设计 AI Prompt？

答案：

不同阶段的 Prompt 设计原则不同：

阶段	Prompt 特点	关键要素
需求分析	开放式、引导穷举	提供历史数据、要求输出结构化格式
技术设计	约束型、指定输出格式	明确技术栈、性能要求、团队规模
代码生成	具体型、分步下达	@mention 相关文件、明确约束条件
代码审查	清单型、分级输出	指定审查维度（安全/性能/类型）
测试	需求驱动型	从需求而非代码出发、要求边界覆盖
调试	上下文丰富型	完整的现象/代码/环境/已排查信息

Prompt 模板示例（代码审查阶段）：

审查以下代码变更，按分级输出反馈：
- MUST_FIX: 安全漏洞、数据丢失、崩溃风险
- SHOULD_FIX: 性能问题、类型不安全
- NICE_TO_HAVE: 命名优化、代码简化

重点检查：[根据文件类型指定]

更多 Prompt 技巧参考 Prompt Engineering。

Q3: 如何将 AI 代码审查集成到 CI/CD 流水线？

答案：

有三种主流集成方式：

方式 1：GitHub Action 集成

# 在 PR 触发时自动执行 AI 审查
- uses: anthropics/claude-code-action@v1
  with:
    anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}

方式 2：SaaS 服务（CodeRabbit）

直接在 GitHub/GitLab 安装 App，零配置即可使用，支持自动学习团队代码风格。

方式 3：自建审查服务

编写脚本获取 PR diff，调用 LLM API 审查，将结果作为 PR Comment 发布。优点是完全可控，可以自定义审查规则。

最佳实践：

1. 分层审查：不同文件类型配置不同审查规则（API 路由重点查安全，组件重点查性能）
2. 不阻塞合并：AI 审查作为建议，不应该阻塞 PR 合并（避免误报导致开发效率下降）
3. 持续调优：收集 AI 审查的误报率和漏报率，定期优化 Prompt
4. 成本控制：只对修改的文件进行审查，避免全量扫描

Q4: 如何用 AI 高效生成测试用例？

答案：

最高效的方式是从需求文档直接生成测试，而非先写代码再补测试：

1. 需求驱动：把 PRD 或 User Story 给 AI，让它生成测试用例。这比看代码生成测试更能覆盖业务场景
2. 边界值优先：明确要求 AI 生成边界值测试（空值、极大值、恰好等于阈值）
3. 分层生成：
   • 单元测试：核心工具函数、自定义 Hooks
   • 组件测试：用户交互流程
   • E2E 测试：完整业务流程
4. 变异测试：让 AI 分析已有测试，找出"即使代码有 Bug 测试仍然通过"的盲区
5. Mock 策略：让 AI 生成 Mock 数据和 Mock 函数，确保测试的隔离性

// AI 生成测试的 Prompt 关键点
// 1. 明确测试框架（Vitest + RTL）
// 2. 明确需要覆盖的场景
// 3. 明确边界条件
// 4. 要求每个 test case 有清晰的中文描述

更多测试策略参考 前端测试策略。

Q5: 如何衡量 AI 在研发流程中的 ROI？

答案：

衡量 AI ROI 需要从三个维度收集数据：

1. 效率维度（最容易量化）

效率 ROI = 节省的等效人力成本 / AI 工具总成本

具体指标：

• Sprint Velocity 提升比例（通常 30-80%）
• PR 平均交付时间缩短比例（通常 30-50%）
• 人均产出代码行数变化

2. 质量维度（防止"为了快而牺牲质量"）

• Bug 密度（Bug / KLOC）：引入 AI 后不应该增加
• 生产事件数：P0/P1 事件不应增加
• 测试覆盖率：应该提升（AI 帮助写测试）

3. 满意度维度（决定可持续性）

• 开发者满意度问卷（1-10 分）
• AI 工具采用率（自愿使用的比例）
• 开发者反馈的痛点

ROI 计算示例：

• 团队 5 人，平均月薪 3 万
• AI 工具月费用：5 人 * 200 元/人 = 1000 元
• Velocity 提升 50%，等效节省 2.5 个人力 = 7.5 万/月
• ROI = 75000 / 1000 = 75 倍

注意事项

ROI 计算容易被高估。要关注：代码行数不等于价值、Velocity 提升可能是技术债积累、短期效率不等于长期质量。建议至少跟踪 3 个月以上的数据。

Q6: 过度依赖 AI 开发有哪些风险？如何缓解？

答案：

风险	表现	缓解措施
能力退化	离开 AI 无法独立编码	定期 Code Kata 无 AI 训练、面试准备时关闭 AI
知识断层	不理解 AI 生成的代码原理	代码审查聚焦"为什么"、要求 AI 解释关键逻辑
安全盲区	AI 生成代码包含漏洞	安全审查不依赖 AI、定期安全培训、SAST 扫描
同质化	团队代码风格高度相似，缺乏创新	鼓励多种方案探索、技术分享
幻觉问题	AI 编造不存在的 API 或库	始终验证运行、检查 import 是否正确
成本失控	API 费用超出预算	设置费用上限、监控 token 使用量、按需选择模型
隐私风险	敏感代码发送给第三方 AI	使用本地部署模型、制定数据分级策略

最重要的缓解原则：

1. AI 是工具而非替代：理解原理比使用工具更重要
2. 信任但验证：AI 生成的每一行代码都要经过审查
3. 保持学习：AI 擅长的是执行，人类的价值在于判断和创新

Q7: 如何用 AI 进行事件响应和 Postmortem？

答案：

AI 在事件响应中可以发挥三个关键作用：

1. 自动分级（秒级响应）

将 Sentry/Grafana 告警推送给 AI，AI 根据预设规则自动判断严重等级（P0-P3），决定是否需要紧急通知。这比人工判断快 10 倍以上。

2. 辅助排查（提供思路）

将以下信息提供给 AI：
1. 告警内容和时间线
2. 最近的代码变更（git log）
3. 相关服务的监控数据
4. 错误日志

AI 输出：
1. 最可能的根因（按概率排序）
2. 验证每个猜测的命令/操作
3. 临时缓解措施

3. Postmortem 自动化

事件结束后，AI 根据时间线、操作记录和根因自动生成 Postmortem 报告（5 Whys 分析、影响范围、改进措施）。人类审核并补充商业影响和改进优先级。

注意：AI 不能替代人类做决策（比如是否回滚、是否通知客户），它的角色是加速信息收集和分析。

Q8: 如何设计 AI 辅助的新人 Onboarding？

答案：

AI 可以大幅加速新人上手效率，关键是建立可复用的知识体系：

1. 项目知识库

# CLAUDE.md（新人 AI 配置）

## 项目架构
[架构说明、目录结构、核心模块]

## 开发规范
[代码风格、Git 规范、PR 流程]

## 常见问题
- 本地环境配置问题 → 解决方案
- 数据库连接问题 → 排查步骤
- 构建报错 → 常见原因

## 核心业务
[核心业务流程、关键概念解释]

2. AI 引导式学习

新人可以通过 AI 快速了解项目：

# 新人可以问 AI 的问题
1. "这个项目的整体架构是什么？"
2. "用户登录的完整流程是怎样的？"
3. "这个文件的作用是什么？和哪些文件有关联？"
4. "这个 Bug 可能的原因是什么？我应该看哪些文件？"

3. 配对编程（AI 作为 Mentor）

新人的第一个任务可以这样使用 AI：
1. AI 帮助理解任务需求和相关代码
2. 新人自己设计方案，AI 审查方案
3. 新人自己写代码，AI 审查代码
4. AI 帮助写测试和文档

关键：新人必须自己理解和编写代码，AI 只做辅助和审查

效果：新人从入职到独立交付首个需求的时间通常可以从 2-4 周缩短到 1-2 周。

Q9: AI 辅助开发中，人的不可替代价值是什么？

答案：

1. 业务理解：AI 不了解产品逻辑、用户需求和商业目标。什么功能该做、优先级如何，完全依赖人类判断
2. 架构决策：复杂系统的技术选型需要权衡团队能力、项目周期、维护成本等多维度因素，AI 只能提供方案对比，不能做最终决策
3. 代码审查：安全性、业务正确性需要人类审查。AI 可能不理解"为什么这个 if 条件要这样写"（业务规则）
4. 用户体验：什么交互方式更好、什么设计更美观，需要人的直觉和美学
5. 团队协作：沟通、协调、冲突解决、技术培训是人的核心价值
6. 创新思维：AI 倾向于生成"最常见"的方案，而技术创新需要跳出常规

AI 让工程师从重复编码中解放出来，更多聚焦于设计、决策和创造。未来最有价值的工程师不是写代码最快的，而是判断力最强的——知道该做什么、为什么做、怎么做最优。

Q10: 分享一个你使用 AI 全流程提效的具体案例

答案：

案例：3 天内完成一个完整的 AI 聊天应用

Day 1 — 需求分析 + 技术设计 + 基础搭建：

• 用 Claude 做需求拆解，生成 Epic/Story/Task 清单和 Story Points
• 用 Claude 生成 Mermaid 架构图、Prisma Schema、API 契约（Zod Schema）
• 用 Claude Code 初始化 Next.js 项目、配置认证、数据库、ESLint、Rules 文件
• 用 Cursor Composer 批量生成 API Route（CRUD + 流式接口）

Day 2 — 功能开发 + 调试：

• 用 Cursor 分步实现聊天界面（消息列表、输入框、流式渲染、Markdown 渲染）
• 用 Claude Code 处理复杂的流式 SSE 解析和增量 Markdown 渲染
• AI 帮助调试 iOS Safari 的 composition 事件 Bug（提供完整上下文后 AI 一次定位根因）
• AI 辅助实现自动滚动、虚拟列表等性能优化

Day 3 — 测试 + 部署 + 文档：

• AI 从需求文档生成单元测试和 E2E 测试（覆盖率达到 80%+）
• AI 生成 Dockerfile（多阶段构建 + standalone）和 GitHub Actions CI/CD 配置
• AI 从代码自动生成 API 文档和 README
• AI 审查全部代码，修复 3 个安全问题和 5 个类型问题

如果不用 AI，同样的工作量估计需要 10-15 天。效率提升约 3-5 倍。关键不是 AI 写了所有代码，而是大量的样板代码、配置、测试和文档不再需要手写，工程师可以专注于核心业务逻辑和架构决策。

Q11: 如何在团队中推广 AI 辅助开发？

答案：

团队推广 AI 开发需要渐进式策略：

第 1 阶段：个人探索（1-2 周）

• 选定 1-2 个技术负责人先行试用
• 评估工具效果，选定团队统一工具（如 Copilot + Claude Code）
• 整理初步的使用心得和 Prompt 模板

第 2 阶段：制度建设（1-2 周）

• 建立项目 Rules 文件（CLAUDE.md、.cursor/rules/）
• 制定 AI 使用规范（哪些数据不能发给 AI、安全审查流程）
• 配置 CI/CD 集成（AI 代码审查作为可选步骤）

第 3 阶段：团队培训（1 周）

• 组织 AI 编程工作坊（Live Demo + 实操练习）
• 建立 Prompt 模板共享库（Notion/Wiki）
• 配对编程：老手带新手使用 AI

第 4 阶段：持续优化（持续）

• 定期分享 AI 使用技巧（每周 15 分钟闪电分享）
• 收集效能数据，量化 AI 带来的效率提升
• 根据团队反馈优化 Rules 和工作流
• 持续更新 Prompt 模板库

成功指标：团队采用率 > 80%、开发者满意度 > 7/10、Sprint Velocity 提升 > 30%。

Q12: 如何保证 AI 生成的代码质量？

答案：

多层防御策略：

1. 预防层（编码前）

• Rules 先行：通过 CLAUDE.md、.cursor/rules 约束 AI 的代码生成规范
• 类型约束：TypeScript strict mode 自动捕获类型错误

2. 生成层（编码中）

• 分步验证：每步完成后立即运行（pnpm build && pnpm test）
• 增量提交：小步快跑，每完成一个功能就提交

3. 检查层（编码后）

• 静态分析：ESLint + Prettier + Type Check 在 CI 中自动化
• AI 交叉审查：用不同的 AI 模型审查 AI 生成的代码（如用 Gemini 审查 Claude 生成的代码）
• 人工审查：关键逻辑（支付、权限、安全）必须人工确认
• 测试覆盖：AI 生成测试验证 AI 生成的代码

4. 运行层（上线后）

• 监控告警：错误率、性能指标实时监控
• 灰度发布：新功能先小流量验证

// 质量保证链
// Rules → AI 生成 → TypeCheck → Lint → 测试 → AI 审查 → 人工审查 → CI → 灰度

相关链接

• AI 辅助开发 - 工具选型和 Rules 配置详解
• MCP（Model Context Protocol） - AI 工具集成协议
• Prompt Engineering - Prompt 设计技巧
• 前端测试策略 - 测试方法论
• CI/CD 与自动化部署 - 部署流程
• 前端监控与埋点 - 监控方案