前端自动化工作流 — 产品说明文档

效果展示

无需写代码，飞书机器人对话复制figma对应URL 改项目样式并且部署，进行自动化测试

agent完成效果展示

实测这种简单的样式需求改动，agent已经能自动化完成，并且给出测试报告。

agent能干什么目前

> 通过@飞书机器人对话将prompt自动生成代码，自动部署，自动测试

> 第一版目标：

> - 产品通过agent对话实现10%的需求开发

> - UI通过agent对话实现30%的UI开发还原

> - 测试通过agent对话完成10%测试用例

> - 前端通过agent对话完成40%UI开发，30%的后台接口开发

一、系统概述

本工作流让产品经理无需工程师介入，即可独立完成以下操作：

操作	说明
🔍 读取 Figma 设计稿	给机器人一个 Figma URL，自动解析最新设计
✏️ 修改前端页面	机器人根据设计稿更新线上页面代码
🧩 添加新组件	机器人从组件库拉取/注册新组件
🔗 接入后端接口	后端 Swagger 更新后，机器人自动生成前端类型和接口调用代码
🧪 自动化测试	机器人用真实浏览器跑功能测试
📤 上报告告	测试报告自动上传 COS 并通知产品确认

二、技术架构

2.1 核心技术选型

技术层	选型	作用
Agent 引擎	Hermes Agent（MiniMax-M2.7 模型）	统一调度所有工具和 Skill
MCP 协议	Model Context Protocol	连接 Figma、GitHub 等外部服务
前端框架	Next.js（当前已有项目）	React 组件化前端
UI 组件库	Vite + React + Storybook	组件管理 + 预览
后端	FastAPI（当前已有项目）	Python 接口服务
接口文档	Swagger/OpenAPI	后端接口规范
代码生成	openapi-typescript + swagger-typescript-api	自动生成 TypeScript 类型和请求函数
自动化测试	Playwright（Node.js 内置）	浏览器级 E2E 测试
截图+对象存储	Xvfb + scrot → 腾讯云 COS	测试截图永久存储 + 公开访问
消息通知	飞书（Feishu）	测试结果推送
代码托管	GitHub	代码版本管理与部署触发
服务器	腾讯云 81.71.29.84（IP 直连，绕过备案）	前端 + 后端 + Nginx 部署

2.2 系统架构图

┌─────────────────────────────────────────────────────────────┐
│                     Hermes Agent (大脑)                      │
│                   MiniMax-M2.7 模型驱动                       │
└──────┬──────────┬──────────┬──────────┬──────────┬──────────┘
       │          │          │          │          │
       ▼          ▼          ▼          ▼          ▼
  ┌─────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌──────────┐
  │  Figma  │ │ GitHub  │ │Component│ │ Swagger │ │ 浏览器    │
  │  MCP    │ │  MCP    │ │ Deploy  │ │  解析   │ │ (Playwright)│
  │ Server  │ │ Server  │ │ Skill   │ │ + TS生成 │ │           │
  └────┬────┘ └────┬───┘ └────┬────┘ └────┬────┘ └────┬──────┘
       │           │          │           │            │
       ▼           ▼          ▼           ▼            ▼
  读取设计稿   推送代码     部署组件    生成接口      截图测试
       │           │          │           │            │
       └───────────┴───────────┴───────────┴────────────┘
                           │
                    ┌──────▼──────────────────┐
                    │    腾讯云 COS 存储       │
                    │  (截图 + 报告公开链接)    │
                    └──────────┬─────────────┘
                               │
                    ┌──────────▼─────────────┐
                    │      飞书机器人通知     │
                    │   (测试结果 + 链接)     │
                    └───────────────────────┘

三、Skill 清单（核心能力模块）

每个 Skill 是独立的功能块，Agent 按需调用。

3.1 代码管理 + 部署

Skill	用途
`repo-management`	仓库清单，记录所有 GitHub 仓库的本地路径、部署方式、服务器信息
`github-push`	一键推送代码到 GitHub，然后 SSH 到服务器部署

3.2 设计稿读取

Skill	用途
`native-mcp`	MCP 协议客户端，连接外部 MCP 服务器
Figma MCP Server（需配置）	`@modelcontextprotocol/server-figma` 读取 Figma URL，解析设计稿内容

3.3 接口自动生成

Skill	用途
`openapi-typescript`（工具）	读取 Swagger JSON → 生成 TypeScript 接口类型
`swagger-typescript-api`（工具）	读取 Swagger → 生成 API 请求函数
`Outlines`（Skill）	结构化生成，保证 JSON 输出格式正确

Swagger 自动生成流程：

后端 Swagger UI 更新
       │
       ▼
Agent 请求 GET /api/docs（Swagger JSON）
       │
       ▼
openapi-typescript 生成 *.types.ts
       │
       ▼
swagger-typescript-api 生成 *.api.ts
       │
       ▼
代码写入仓库 → GitHub Push → 自动部署

3.4 自动化测试

Skill	用途
`agent-browser`	读取设计稿要求，对已部署网站进行逐项测试，截图取证，生成报告上传 COS
`dogfood`	深度探索式 QA 测试，覆盖更多边界情况
`cos-screenshot-upload`	无头服务器截图 + 上传腾讯云 COS 生成公开链接

测试能力覆盖：

✅ 页面加载（HTTP 状态码）
✅ 控制台 JavaScript 错误检测
✅ 资源完整性（JS/CSS/图片 200 检查）
✅ 用户交互流程（点击、表单填写、提交）
✅ 响应式布局（截图取证）
✅ 滚动渲染检查
✅ 空状态 / 错误状态边界测试

3.5 消息通知

Skill	用途
飞书机器人（内置）	测试完成后推送结果 + COS 报告链接给产品负责人

七、技术指标

指标	数值
服务器	腾讯云 81.71.29.84（IP 直连，绕过备案）
前端部署方式	Docker + Nginx（多容器 Docker Compose）
后端部署方式	Docker + FastAPI
组件库地址	`https://mclarenai.cn/component/`
存储	腾讯云 COS（`yanghao-1303848059`），公开读写
测试浏览器	Playwright（Node.js 内置，headless）
Agent 模型	MiniMax-M2.7（经 MiniMax 中转）
通知渠道	飞书私聊 + 群聊

八、限制与说明

限制	说明
⚠️ 样式微调需人工 Review	Agent 修改 CSS/样式后，前端做一次目视检查
⚠️ 新页面/路由需要前端介入	路由配置属于架构层面，暂不支持全自动
⚠️ Figma Token	需要产品提供 Figma Personal Access Token，存储在服务端配置中
⚠️ 接口生成质量	生成的 TypeScript 类型和 API 函数需要前端确认边界情况处理是否正确
⚠️ 复杂交互	高度自定义的交互动画（如拖拽、复杂手势）暂不支持全自动，需人工评估

九、Roadmap

阶段	功能	状态
Phase 1（当前）	Agent Browser 测试 + COS 上传 + 飞书通知	✅ 已实现
Phase 2	Figma MCP 接入 + 设计稿读取	🔧 配置中
Phase 3	Swagger 自动解析 + TypeScript 接口生成	📋 待开发 Skill
Phase 4	产品自助 UI 修改（全链路）	📋 待开发
Phase 5	代码自动 Review 报告生成	📋 待规划

*文档由 Hermes Agent 自动生成 | 如有疑问，找前端负责人 Andy*