Agent Skills
返回列表
SCP 截图生成前端页面

SCP 截图生成前端页面

生活服务 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_d4891e98/ed666。

技能介绍

要解决的问题

在 aheadofcow_web 这类 React + Ant Design 管理端项目中，根据 UI 截图补页面容易踩坑：列结构不一致、按钮类型随意、路由漏配、列表没有 Mock，甚至误碰 backend_transaction/ 后端代码。这个技能把“截图到可编译前端页面”的规则收敛到固定流程里。

技能如何工作

它围绕 /home/admin/codespace/scp/aheadofcow_web 工作，只处理前端目录：

  • 图片分析：优先用视觉能力识别页面标题、表格列、筛选项、操作按钮；如果 image 工具不可用，则根据截图手动继续。
  • 代码生成：生成 src/views/ 页面和组件，按 Ant Design 的 Table、Button、Input、DatePicker 等规范落地。
  • 路由与 Mock：写入 src/router/index.js；列表页生成 15 条带唯一 id 的 mock，支持筛选和分页。
  • 编译检查：检查 webpack 编译，并输出新增/修改文件清单。

适用边界

该技能明确不生成 src/api/ 接口文件，不导入 @/api/ 模块，也不修改 backend_transaction/ 后端 Controller、Service、DAO 或数据库配置。权限码只生成前端用法，菜单和权限配置仍需后端系统处理。

使用场景

  • 拿到管理后台列表页截图，要在 aheadofcow_web 生成带表格、筛选和分页的 React 页面。
  • 现有页面列结构或按钮样式与 UI 稿不一致，需要修改 Ant Design 的 Table 列和 Button 类型。
  • 新增页面后需要补 src/router/index.js 路由，并检查 webpack 编译是否通过。
  • 列表页本地联调缺少数据，需要生成 15 条带唯一 id 的 Mock，并支持筛选和分页。

适合人员

  • 负责 aheadofcow_web 前端页面的工程师，需要按规范把截图落成 React + Ant Design 页面。
  • 维护管理端列表页的前端开发，需要统一表格列、筛选、分页和 Mock 数据。
  • 接手旧页面修改的前端工程师，需要避免误改 backend_transaction 后端代码和 API 文件。
  • 使用 Agent 做前端脚手架的工程师，需要生成页面、路由并检查编译结果。