原型设计步骤
-
根据业务人员提的需求对页面进行构思改造，然后让
gpt调用原生生图模型来生成改造后的原型设计图，直到原型改造图符合自己的要求； -
把原型改造图统一放到一个重命名好的文件夹当中，和
gpt对话，让gpt识别原型改造图，然后生成html、css、js生成可交互的前端代码，然后进行效果演示。具体指令如下：请详细读取 XXXX目录下的根据需求已经改造完成的页面原型图
png原型图片，仅生成一个可交互的单文件HTML原型。01. 页面布局、颜色、间距、表格和按钮样式尽量与最终原型图保持一致；字段名称，按钮图形等，确保完整、不遗漏、不擅自改名。
02. 请根据当前已经改造完成的页面原型图
png原型图片，来生成相关联需要演示实现的交互效果，和相关数据的展示。03. 没有后端接口的功能使用演示数据模拟，并明确属于交互演示。
HTML、CSS和JavaScript放在同一个文件中，不使用外部CDN，保证双击即可运行。04. 完成后使用工作区内置浏览器自动化组件检查交互效果和关键页面，并在目标分辨率下截图检查。发现问题后直接修改并复测，用同一工作区内置的 Chromium 自动化组件完成截图检查。
05. 输出到 XXXXXX目录，命名为：XXXX.html。如果同名文件已经存在，先询问是否允许覆盖。
06. 在你执行的过程当中，设计到的工具调用，技能调用等，请你优先使用你自己内置的工具或者技能，如果无法解决在考虑其他方式；
-
确定上述过程没什么问题之后，就可以让
gpt根据原型图的改造设计思路攥写PRD手册，在生成完毕之后查看手册，可以对手册进行优化； -
如果需要把设计好的页面html导入到Axure11当中，有这个需求需要进行页面元素的微调，那可以使用一个浏览器插件：Axhub，这个插件可以在浏览器页面打开的html，通过插件的复制功能复制Axure当中能粘贴进去的格式，个人试过效果非常不错。然后在根据你自身的需要进行页面元素的微调；但是我个人觉得其实把原型的html设计文件设计出来能在浏览器正常演示就好了，反而放到Axure当中还要手动去一个一个页面进行页面交互的操作调整个人觉得还是很麻烦的；