原型设计步骤
-
根据需求对页面进行构思改造，然后让
gpt调用原生生图模型来生成改造后的原型设计图，直到原型改造图符合自己的要求； -
把原型改造图丢给
gpt，让gpt识别原型改造图，然后生成html、css、js生成可交互的前端代码，然后进行效果演示。具体步骤如下：请详细读取【原型图目录】中的全部页面已经设计好的
png原型图片，并结合【业务数据或需求文档】生成一个可交互的单文件HTML原型。01. 页面布局、颜色、间距、表格和按钮样式尽量与最终原型图保持一致；业务分类、字段、标准名称和状态以数据文件为准，确保完整、不遗漏、不擅自改名。
02. 请实现主页面、菜单展开收起、分类与子分类筛选、查询条件搜索和多选、字段联动、组合查询、重置、表格单选与全选、批量操作、预览、下载、分页、加载、无结果、异常提示和确认弹窗。（待定：具体参考原型改造交互需求，不一样的需求提示词不一样，这个只是一个实例）
03. 没有后端接口的功能使用演示数据模拟，并明确属于交互演示。
HTML、CSS和JavaScript放在同一个文件中，不使用外部CDN，保证双击即可运行。04. 完成后使用工作区内置浏览器自动化组件检查全部分类、查询、选择、弹窗和关键页面，并在【目标分辨率】下截图检查。发现问题后直接修改并复测。（用同一工作区内置的 Chromium 自动化组件完成截图检查）
05. 输出到【输出目录】，命名为【文件名称.html】。如果同名文件已经存在，先询问是否允许覆盖。
-
确定上述过程没什么问题之后，就可以让
gpt根据原型图的改造设计思路攥写PRD手册，在查看手册可以对手册进行优化；