← 目录
← → 翻页

Part 2: 用 MCP 获取需求

写 Prompt → AI 控制浏览器 → 自动抓取需求

这是端到端开发的第一步：搞清楚要做什么。
目标系统 kangke.xyz:9999 已经在运行，但你没有需求文档。
用 MCP 让 AI 自己打开浏览器，访问目标系统，截图、阅读页面，整理出需求。
写 Prompt
→
AI 调 MCP
→
打开浏览器
→
截图+读取
→
输出需求

什么是 MCP？

MCP = Model Context Protocol

模型上下文协议。让 AI 能调用外部工具——控制浏览器、读写文件、查数据库。

Chrome DevTools MCP

让 AI 能控制 Chrome 浏览器：打开网页、点击按钮、截图、读取页面内容。就像你手动操作一样，但 AI 自动完成。

Trae 中的 MCP

Trae 支持 MCP 协议。在 Trae 设置中添加 MCP 服务器，AI 就能使用这些工具。

工作原理

1
你在 Trae 中写 Prompt
⬇
2
AI 识别需要用浏览器工具
⬇
3
通过 MCP 调用 Chrome DevTools
⬇
4
自动打开网页、截图、读取内容
⬇
5
AI 分析整理后输出结果

实操：写 Prompt 控制浏览器

在 Trae 中输入以下 Prompt，AI 会自动控制浏览器访问目标系统

请通过 Chrome DevTools MCP 访问我们的统一身份认证系统： 目标地址：https://kangke.xyz:9999 操作步骤： 1. 打开浏览器，导航到目标地址 2. 登录页面已预填 admin 账号，点击「登录」按钮 3. 登录后，展开「统一认证管理」菜单，查看所有子模块 4. 再展开「系统管理」菜单，查看用户管理、角色管理、菜单管理、日志等 5. 依次点击每个子模块，截图并记录页面字段、按钮、搜索条件 6. 整理输出：系统有哪些功能模块？每个模块有哪些字段和操作？ 输出格式：按模块整理成表格，包含模块名、页面字段、操作按钮。
要点：你告诉 AI「做什么」（访问哪个网站、看哪些页面、输出什么格式），AI 负责「怎么做」（调用哪个 MCP 工具、怎么点击、怎么截图）。

AI 的执行过程

1
调用 navigate_page → 打开 kangke.xyz:9999
⬇
2
调用 take_snapshot → 发现登录页，识别预填账号
⬇
3
调用 click → 点击「登录」按钮进入系统
⬇
4
调用 click → 展开「统一认证管理」菜单，发现 7 个子模块
⬇
5
逐个点击子模块 → take_snapshot 记录每个页面的字段和按钮
⬇
6
整理分析 → 输出完整需求表格

AI 输出的需求分析

模块路径核心功能
自然人用户/uas/user列表 CRUD、搜索、批量操作、脱敏展示
企业用户/uas/corp企业管理员 CRUD、统一社会信用代码
应用管理/uas/app第三方应用注册、OAuth2 客户端配置
登录日志/uas/log登录记录查询、IP/时间筛选
数据统计/uas/stat登录统计、用户增长趋势图表
用户管理/system/user管理员账号 CRUD、角色分配
角色管理/system/role角色权限配置、菜单授权
操作日志/system/log系统操作审计、按模块/用户筛选
自然人用户页面发现的字段：
手机号、姓名、证件类型、证件号码（脱敏）、认证等级、状态、创建时间
操作：查看、编辑、删除、禁用、批量导入
下一步：拿着这份需求，让 AI 设计数据库表结构和接口方案。

Part 2 小结

你完成了什么

✓
理解了 MCP 的概念和用途
✓
写 Prompt 控制 AI 访问了目标系统
✓
AI 自动抓取了 7 个功能模块的需求
✓
获得了需求文档，作为后续开发的输入

下一节

Part 3: AI 初始化项目

需求有了，项目骨架也跑通了。接下来让 AI 根据需求设计数据库、生成实体类和接口，把空项目变成有内容的系统。

端到端进度：
获取需求 ✅ → 初始化项目 → 写代码 → 测试 → Review