跳转到内容

Prompt 示例:修改一个操作流程里所有的页面内容并添加一个新步骤

我们已经把原始页面录制为一个 Demo,您可点击查看: https://app.demoway.cn/demo/d2f0f9a86f

在 Cursor 里,经过一系列的 Prompt 对话(完整 Prompt 在文本后面),要求

  1. 按照蒙牛牛奶的场景做内容调整,
  2. 在最后新增一个步骤,添加一个短信催付的弹框

最后的效果是这样的:

下载修改后的页面

如果需要导入到设计软件里继续调整,请参考:导入到设计软件里继续调整

完整 Prompt

你是一个专业的网页设计师和前端工程师,我需要你:
1. 把 https://app.demoway.cn/demo/d2f0f9a86f 的页面下载到 youzan-demo 目录,这些页面都是 HTML 静态页面,都可以直接打开访问
2. 我需要你把这几个页面里的订单列表里的所有商品名和商品图都调整为蒙牛牛奶相关的产品,对应的商品价格、订单价格也做相应调整。其中商品图你可以使用 milk-images 目录里的图片
同时要求:
1. 不要创建 nextjs 等工程
2. 只需要修改这些文件内容,并且保持 HTML 标签结构

此处略过 AI 处理过程和结果信息

很好,不过还是有一部分商品名为 “自动化收款码-勿删勿改” 的没有修改

此处略过 AI 处理过程和结果信息

页面左上角的圆形图案是公司 logo,帮我改成蒙牛牛奶的 logo,logo 地址:@https://img.mengniu.com.cn/Uploads/Mnnew/Picture/2023/08/21/u64e30d2d71c84.png

此处略过 AI 处理过程和结果信息

这四个页面对应四个步骤,最后一个步骤是点击菜单里的”短信 (计费发送)“,我需要你再增加一步,展示确认通过短信催付的弹框

此处略过 AI 处理过程和结果信息

有个小问题:弹框上面被蒙了一层蒙层。这个蒙层一般是作为弹框的背景铺满整个页面的。

此处略过 AI 处理过程和结果信息

第四步里出现的选择催付方式的弹框在第五步里应该隐藏掉才对

此处略过 AI 处理过程和结果信息