Agent Skills
返回列表
SCP 图片转页面生成器

SCP 图片转页面生成器

AI Agent 更新于 2026.08.30

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

请根据 https://skillhub.cn/install/skillhub.md，将 @user_d4891e98/eeeee 安装到 AI 助手中。

技能介绍

解决什么问题

scp-img-to-page 面向 aheadofcow_web 这类 React + Ant Design 前端项目，解决从 UI 截图到可编译页面代码之间缺少稳定流程的问题。它限定在 aheadofcow_web/ 目录内工作，不碰 backend_transaction/，也不生成 src/api/ 接口文件，适合需要快速补齐列表页、表单页、路由和基础交互的场景。

技能如何工作

技能以截图作为输入，先识别页面标题、表格列、筛选项、操作按钮、对话框等结构，再生成 React 组件。核心能力包括：

  • 图片分析：提取列名、顺序、类型和按钮位置；服务不可用时按截图内容继续分析
  • 代码生成：输出 src/views/xxx/index.jsx、子组件和 src/router/index.js 路由
  • Mock 数据：列表页生成 15 条含唯一 id 的数据，支持筛选、分页和 300ms 模拟 loading
  • 组件规范：导入用 UploadRender，导出和下载优先用 Download，权限按钮遵循 模块名_功能名_操作名
  • 编译检查：启动前端服务后等待 webpack 编译，修复语法问题并输出文件清单

适用边界

该技能不是通用前端代码助手，而是绑定 aheadofcow_web 的项目规范工具。它只处理前端页面、路由、Mock 数据和组件样式；不生成后端 Controller、Service、DAO、数据库配置，也不导入 @/api/xxx。非列表页不生成 Mock 数据，新增路由和权限码仍需在后端权限系统中配置。适合前端开发在已有项目框架内生成原型页、联调页和基础 CRUD 页面。

使用场景

  • 前端收到产品截图，要补一个带筛选、分页和导出按钮的列表页。
  • 已有页面表格列、状态标签或操作列不符合 Ant Design 规范，需要统一 render。
  • 要新增前端路由并配置权限按钮，但不想改动 backend_transaction 后端代码。
  • 列表页先要用 15 条 Mock 数据跑通筛选、分页和 loading 效果。

适合人员

  • 维护 aheadofcow_web 的前端工程师：根据 UI 截图生成可编译的 React 页面。
  • 负责 SCP 模块迭代的 React 开发：补列表页、路由、Mock 数据和导出导入组件。
  • 需要快速搭联调原型的前端：先用写死的 Mock 数据跑通页面交互。
  • 熟悉 Ant Design 的界面开发：统一表格列、按钮、分页和权限按钮规范。