SuperAPI AI 工具集

pm-frontend-prototype

前端与建站

查看项目

更新于 10-16 06:48

技能介绍

用途:当用户明确要求在已有前端项目中生成、制作、构建或完善原型(高保真原型、可点击演示、评审 Demo)时使用。默认基于现有源码复用组件、设计变量与技术栈,创建与正式业务入口隔离的原型页面或路由,用页面级模拟数据完成可点击演示;除非用户明确要求,不改动正在使用的业务页面,不接入后端或生产数据。

主要能力:先检查项目再设计,识别技术栈、路由、组件库、样式方案与状态管理;查找相似列表页、详情页、表单、看板、弹窗抽屉作为参考;复用按钮、表格、表单、Tab、分页、状态标签、Hook、设计 Token 等已有能力;默认隔离原型入口(如独立原型路由 /__prototype/<feature>、独立原型页面或功能目录、查询参数或开发菜单入口);用本地状态模拟新增、编辑、删除、搜索、筛选、排序、Tab 切换、抽屉弹窗、表单提交、二次确认与成功/错误提示;补充空、加载、校验、禁用、成功、错误、无权限等状态;保证核心流程可完整跳转。

使用方式:先读取项目结构与相似页面,明确原型入口、隔离方式与范围,再沿用现有框架、组件系统、样式、路由、图标与状态管理习惯实现独立原型,增加模拟数据与交互,实际运行本地开发服务并做视觉与交互检查。模拟数据应使用真实业务语言,覆盖不同状态、长文本、缺失值、边界数据与空结果。

适用场景:在已有 React、Vue、HTML 等项目中增加后台管理、CRM、SaaS、运营后台或业务工作台页面;把静态页面改成可点击原型;按现有风格扩展新功能;不开发后端先完成评审用高保真 Demo。

限制:不适用于从空目录创建全新产品、营销官网或落地页、后端接口与数据库开发、技术架构文档、纯视觉图片或静态截图、需求分析与 PRD 编写。不得擅自补充新业务状态、角色权限、审批规则、计算方式、管理模块或产品范围;必要假设需在最终回复集中说明。原型阶段不伪造工程工件,不擅自实现生产代码。