Jean's Blog

一个专注软件测试开发技术的个人博客

0%

Vibe Coding 实战：AI 测试平台开发

发表于 更新于 分类于
记录 AI 测试平台从工程初始化、原型设计到协同开发的实践过程。

上一节梳理了 Vibe Coding 的研发流程。本节进入实战开发：以企业级 AI 测试平台为目标，选用智谱 ZCode 作为主要编码助手。原计划使用 Claude Code，但综合本地环境、账号可用性和权限风险后，本次改用 ZCode；这属于项目选型，不代表对 Claude Code 安全性的普遍结论。

模型方面，本项目选用 GLM-5.2 处理前后端文本与代码任务。模型选择主要考虑可用性、成本、上下文能力、工具兼容性和任务效果，最终仍需用项目测试结果验证。

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

在项目启动之初，我并没有急着写第一行代码，而是先花时间搭建工程骨架，并接入一批经过筛选的 Skill 和 MCP（Model Context Protocol）工具。这些辅助能力并非可有可无的“外挂”，而是贯穿需求分析、设计决策和开发执行的核心助手——它们的价值在于让 AI 从“会写代码”进化为“会做产品”。

已接入的三方 Skill（辅助设计侧）

1. stitch-skills —— AI 产品设计（Google Stitch 官方）

  • 仓库：google-labs-code/stitch-skills
  • 定位：Google Stitch 官方出品的 Design Skill，主打产品需求分析、原型设计及持续迭代。
  • 核心能力：
    • 从 PRD 直达页面原型
    • 页面 Layout 规划
    • UX Flow 梳理
    • Design System 构建
    • Design Review 与迭代
    • 前端页面生成
  • 价值：它相当于一个“产品经理 + UI 设计师”合体的 Agent。在设计阶段先由它完成页面层面的推演，再进入开发，能显著减少返工和认知偏差。

2. frontend-design（Anthropic 官方前端设计 Skill）

  • 仓库：anthropics/skills/frontend-design
  • 定位：Anthropic 官方出品，专用于生成具有设计感、符合现代 UI/UX 规范的页面。
  • 核心能力：
    • Landing Page、Dashboard、SaaS 后台
    • 数据可视化布局
    • 字体排印（Typography）与色彩系统（Color System）
    • 动效与间距（Animation & Spacing）
    • 响应式设计（Responsive Design）
  • 价值：这是对抗“AI 审美疲劳”的利器。没有它时，AI 容易产出千篇一律的“紫色渐变 + 圆角卡片”风格；而有了它，生成的界面能真正具备品牌气质和视觉差异化。

3.ui-ux-pro-max-skill（社区优秀 UI/UX 增强 Skill）

  • 仓库：nextlevelbuilder/ui-ux-pro-max-skill
  • 定位：社区高赞 UI/UX Skill，旨在强化 AI 在视觉细节、交互体验和整体一致性上的把控力。
  • 核心能力：
    • UI Review 与 UX Review
    • 组件设计（Component Design）
    • 交互设计（Interaction Design）
    • 设计系统补充
    • 可访问性（Accessibility）检查
  • 价值：它更像是 Frontend Design 的“专业补充教练”，让最终页面不仅看起来漂亮，而且在实际产品层面经得起推敲。

已接入的 MCP（协作与工程化）

除了上述 Skill，我还接入了两个关键的 MCP 服务，用于串联工程协作和任务流转：

  • GitHub MCP —— 代码托管与版本管理，让 AI 能直接感知仓库状态、提交历史和分支结构。
  • Linear MCP —— 任务管理与进度跟踪，将设计需求和开发任务以结构化方式同步给 AI，使每一步迭代都有迹可循。

构建工程

在完成辅助工具与 MCP 的配置之后，下一步自然是搭建项目的主体工程。考虑到前后端分离的架构，我分别初始化了后端和前端两个独立工程，并统一通过 GitHub 进行远程托管。

后端工程

后端采用 Python 技术栈，具体选型如下：

  • 开发语言：Python 3.13
  • 包管理工具：uv（替代传统的 pip + venv，由 Astral 团队打造，速度更快且原生支持 pyproject.toml 规范）
  • IDE：PyCharm
  • 工程名称：backend
  • 端口号：9529
  • 创建方式：在 PyCharm 中新建 Python 项目，选择 Python 3.13.4 解释器，并将包管理工具指定为 uv，项目命名为 backend。

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

前端工程

前端则选择了当下主流的 React 生态，并结合 Next.js 提供完整的服务端渲染能力：

  • 开发语言：TypeScript 5.x
  • UI 框架：React 19
  • 应用框架：Next.js 16.x
  • 初始化命令：npx create-next-app@latest
  • Node.js 版本：v24.14.0（本文项目版本，建议使用版本管理工具固定）
  • 工程名称：frontend
  • 端口号：9528

两个本地工程初始化完成后，我分别在 GitHub 上创建了对应的仓库（backend 与 frontend），并将本地代码推送至远程，便于后续的版本协作与部署触发。至此，项目的工程骨架已经搭建完毕，可以进入下一阶段的开发工作。

需求分析和产品原型

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

产出物：

  • 需求文档，例如文档：PRD-河图智弈-产品需求文档-v1.0.0.md
  • 数据模型设计，例如文档：河图智弈-数据模型设计文档-v1.0.0.md
  • 接口设计，例如文档：河图智弈-接口设计参考文档-v1.0.0.md

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

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

如果使用支持 Skill 的编码 Agent，可以将 Stitch 能力接入开发工作流：

Stitch Skills：遵循Agent Skills开放标准，可在Claude Code中调用，快速生成符合规范的UI原型组件

Stitch MCP：通过MCP协议将设计能力直接嵌入开发环境，实现"对话式设计→代码产出"的实时联动
  1. 第四步：迭代评审与确认：原型生成后，需进行团队评审：
    • 对照需求文档，逐页确认功能覆盖是否完整
    • 走查交互流程，验证操作路径是否顺畅
    • 检查视觉一致性，确保各页面风格统一

对于评审中发现的偏差或待优化点，继续通过自然语言向Stitch或大模型提出调整指令，快速迭代直至原型满足本轮验收标准。

产出物：一套高保真、可交互的产品原型，包含所有核心页面、交互流程与视觉设计规范，同时附带可直接用于前端开发的基础代码骨架。

以下便是使用Stitch Skills生成的部分产品原型页面。在实际操作中发现，Stitch生成的各个页面之间相互独立，缺乏统一的视觉风格和布局一致性，导致不同页面的设计语言差异明显。

要解决这一问题，需要我们在与Stitch的对话过程中持续补充更详细的约束条件——包括但不限于：

  • 统一的色彩体系和字体规范
  • 标准化的组件样式（按钮、表单、表格等）
  • 一致的页面布局结构（导航位置、内容区域划分）
  • 元素间距与对齐规则

通过明确设计系统并进行多轮评审，可以提高 Stitch 输出的一致性；生成结果仍需人工检查可用性、响应式布局和可访问性。

河图智弈登录页原型

河图智弈首页数据看板原型

测试项目列表页原型

测试用例列表页原型

测试分析详情页原型

接口测试列表页原型

产出物：

任务管理和功能开发

完成上述基础配置、技术栈确认，以及产品与设计文档的定稿后，项目已具备进入开发的条件。下一步的核心思路是：让 AI 深度参与前后端功能开发，同时将任务拆解、进度管理、测试、代码提交和托管部署等环节，也一并纳入 AI 协同的研发闭环中。

使用 ZCode 开发时，可以采用下面的任务提示模板：

1
2
3
4
5
6
7
8
9
项目基础配置已完成，前后端工程分别位于 ./frontend/ 和 ./backend/，第一版需求与原型设计文档见 ./docs/ht-ai-test/。
请按以下步骤执行本次开发任务：
1.需求梳理：先阅读文档，列出本次第一版需要实现的功能清单，并逐条与我确认；
2.后端开发：基于 Python + uv 实现核心 API（如 XXX 接口），并编写对应的单元测试；
3.前端开发：基于 Next.js + React 实现对应页面，对接上述 API；
4.联调测试：前后端联调，确保核心流程跑通；
5.代码提交：测试通过后，使用 GitHub MCP 将代码分批提交并推送至远程仓库；
6.任务管理：使用 Linear MCP 为本轮开发创建/更新对应的任务状态。
每完成一个步骤请及时反馈，确认后再继续下一步。

ZCode 拆解开发任务的执行界面

在执行的过程中拆分的任务列表会同步到Linear，查看任务执行状态和内容

Linear 中的开发任务列表

Linear 任务详情与执行状态

从以上看到团队协作开发的各类管理需求，助力大型项目的任务拆解、进度追踪与团队协同。

任务完成后，分别启动前后端并执行核心流程验证，再根据功能逻辑、接口返回和页面展示中的问题进行针对性修复。

在项目开发过程中，我根据实际需求灵活选用了不同的AI模型来协作完成工作。起初，我尝试使用GLM-5.2 模型——这是一款纯文本模型，不具备图像识别能力。因此，在前端开发环节，它的表现并不理想：既无法通过截图来理解页面问题，也难以精确描述复杂的UI布局，导致页面调试和代码调整效率较低。

随后，我切换至 Cursor 的 Auto 模式进行前端代码的调整，效果显著提升。这一转变让我深刻体会到：没有“万能”的模型，只有“合适”的工具。不同模型各有擅长，文本处理、逻辑推理、代码生成、前端可视化等场景，往往需要搭配不同的模型来发挥最佳效果。

在实际开发中，不必拘泥于某个固定工具，而应根据任务特性动态调整——前端用视觉能力强的模型，后端逻辑用推理能力深的模型，文本处理用纯语言模型。这种“组合式”的AI协作方式，不仅能提高开发效率，也能让每个模型发挥其最大价值。

最终，这次经历也让我更加确信：掌握多种模型的特性，并善于在适当时机切换，是当前AI辅助开发中一项重要的实践能力。