上一节我们系统梳理了Vibe Coding的完整研发流程，从项目立项、需求分析到架构设计与功能拆分，勾勒出一条清晰可行的实施路径。本节将正式进入实战开发环节，以企业级AI驱动的测试平台为落地项目，使用Claude Code作为核心AI编程工具，驱动整个项目的编码实现。

在模型选型方面，我们采用双模型协同的策略——使用Claude Code（Sonnet）作为主力编码模型，负责核心业务逻辑的代码生成与重构；搭配GLM-5.2作为辅助模型，在特定场景（如中文语义理解、测试用例分析等）中发挥其语言优势。两者在Claude Code工具链中协同工作，共同完成从后端接口到前端页面的全栈开发任务。

构建项目工程和添加辅助skill和MCP

安装的三方skill和MCP

superpowers AI 编程工作流：https://github.com/obra/superpowers
- 定位：AI 编程方法论，规范 AI 从需求分析 → 设计 → 编码 → Review → 测试的完整开发流程，而不是直接开始写代码。
- 作用：
  - 需求澄清（Brainstorm）
  - PRD 输出
  - Architecture Design
  - Task Breakdown
  - Code Review
  - Bug Analysis
  - Refactor
  - ADR（Architecture Decision Record）
- 价值：避免 AI 一上来直接 Coding，形成规范的软件工程流程，是整个项目的基础 Skill。
stitch-skills AI 产品设计：https://github.com/google-labs-code/stitch-skills
- 定位：Google Stitch 官方 Design Skill，用于产品需求分析、页面原型设计及持续迭代。
- 作用：
  - PRD → 页面原型
  - 页面 Layout
  - UX Flow
  - Design System
  - Design Review
  - Design Iteration
  - 前端页面生成
- 价值：非常适合作为产品经理 + UI Designer 的 Agent，让 AI 先完成页面设计，再进入开发阶段。
docs-langchain MCP：https://docs.langchain.com/use-these-docs
- 定位：LangChain 官方文档 MCP，为 AI Agent 提供最新的 LangChain API、Agent、Tool、Memory、Graph 等能力参考。
- 作用：
  - 查询官方 API
  - LangGraph 开发
  - Agent Framework
  - MCP Tool
  - Memory
  - Retrieval
  - RAG
- 价值：避免模型引用过期知识，以官方文档作为实时知识源。
frontend-design：https://github.com/anthropics/skills/tree/main/skills/frontend-design
- 定位：Anthropic 官方前端设计 Skill，用于生成具有设计感、符合现代 UI/UX 规范的页面。
- 作用：
  - Landing Page
  - Dashboard
  - SaaS 后台
  - 数据可视化
  - Typography
  - Color System
  - Animation
  - Spacing
  - Responsive Design
- 价值：避免 AI 输出千篇一律的「紫色渐变 + Card」页面，而是生成更具设计感和品牌风格的界面。
ui-ux-pro-max-skill：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
- 定位：社区优秀 UI/UX Skill，增强 AI 在视觉设计、交互体验和页面一致性方面的能力
- 作用：
  - UI Review
  - UX Review
  - Component Design
  - Interaction Design
  - Design System
  - Accessibility
- 价值：适合作为 Frontend Design 的补充，让页面更加符合真实产品设计规范。
React Best Practices（Vercel）：https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices
- 定位：Vercel 官方推出的 React 最佳实践 Skill，将 React、Next.js 的开发规范和性能优化经验沉淀为 AI 可直接遵循的工程规范，帮助 AI 在编码过程中生成高质量、可维护、高性能的前端代码。
- 作用：
  - React Component Design
  - React Hooks Best Practices
  - Next.js Development
  - Performance Optimization
  - Data Fetching Patterns
  - Bundle Optimization
  - Code Refactoring
  - Code Review
- 价值：适合作为 React/Next.js 项目的核心开发规范，为 AI 提供统一的编码标准，减少性能问题和反模式，提升代码质量、可维护性及运行效率，尤其适合企业级前端项目
Shadcn/UI Skill：https://github.com/shadcn-ui/ui/tree/main/skills/shadcn
- Shadcn 官方推出的 UI 开发 Skill，帮助 AI 理解并遵循 shadcn/ui 的设计理念、组件规范及最佳实践，快速构建统一、美观且易维护的现代化界面。
- 作用：
  - Component Composition
  - Design System
  - UI Component Generation
  - Form Design
  - Layout Design
  - Tailwind CSS Best Practices
  - Component Reuse
  - Responsive Design
- 价值：适合作为 Frontend Design 的实现层能力，使 AI 优先复用官方组件而非重复造轮子，保证页面风格一致、组件可维护，并符合 shadcn/ui 与 Tailwind CSS 的最佳实践。

构建工程

后端工程

开发语言：Python 3.13
包管理工具：uv（替代传统pip + venv，速度更快、依赖管理更规范）
IDE：PyCharm
工程名称：backend
端口号：9529
创建方式：在PyCharm中新建Python项目，选择Python 3.13.4解释器，使用uv作为包管理工具，项目命名为backend

说明：uv是Astral团队推出的高性能Python包管理工具，兼容pip和pyproject.toml，推荐在项目中使用uv init初始化工程结构。

前端工程

开发语言：TypeScript 5.x（类型安全，与React 19深度集成）
UI框架：React 19
构建工具：Next.js 16.x（基于最新create-next-app脚手架），npx create-next-app@latest
Node.js版本：v24.14.0（建议使用nvm管理Node版本）
工程名称：frontend
端口号：9528

需求分析和产品原型

接下来，我们将基于前期已确认的需求内容，整理核心目标与功能清单，识别其中不明确之处，同步输入DeepSeek、ChatGPT、Qwen等多款主流大模型进行多轮对话与调研，综合各方输出生成PRD初稿。完成后逐条评审，对不清晰处继续与大模型澄清确认，直至形成一份细节到位、可直接指导开发的高质量需求文档。

需求文档定稿后，下一步便是产品原型设计。与传统流程不同，在AI辅助开发模式下，我们不需要等待设计师完成视觉稿后再开发——而是通过与AI模型的协同对话，快速生成高保真、可直接指导前端开发的产品原型。

第一步：明确视觉与交互规范：原型生成前，需先确定产品的视觉风格与交互规范。基于项目定位（企业级AI测试平台）和前期需求（轻快明亮、富有科技感），我们将以下信息整理为结构化输入：
- 品牌调性：专业、清晰、高效（契合测试工程师的使用场景）
- 色彩体系：主色、辅色、功能色（成功/警告/错误）的色值定义
- 字体与排版：字体族、字号层级、行高规范
- 组件样式：按钮、表单、表格、卡片、弹窗等基础组件的默认状态与交互态
- 页面布局：侧边导航 + 顶部操作栏 + 内容区域的标准布局
第二步：与大模型多轮对话，完善设计规格：将上述设计输入与业务功能模块一同提交给大模型（如DeepSeek、ChatGPT等），围绕以下方向进行多轮对话：
- 页面结构确认：基于六大功能模块，梳理完整的页面清单与层级关系
- 交互逻辑细化：关键操作（如用例生成、接口测试执行、知识库检索）的交互流程与反馈设计
- 异常场景覆盖：空状态、加载状态、错误提示、权限拦截等边界情况的视觉呈现
- 通过多轮迭代对话，最终形成一份包含页面清单、布局结构、交互说明和视觉规范的产品设计规格文档。
第三步：使用Stitch生成高保真原型：将前述的产品设计规格文档输入Google Stitch（Google Labs推出的AI原生设计平台），即可：
- 自动生成符合视觉规范的多屏高保真UI设计
- 产出可直接使用的前端代码（React/TSX组件）
- 支持通过自然语言对话式调整布局、颜色、间距等细节