1. 提示词工程
以下针对不同场景,编写适合的提示词,用于WorkBuddy自动生成相应的html原型,可利用不同AI客户端加工润色,以下模板可直接复制使用:
固定格式:目标描述、结果描述、需求描述、详细要求
1.1 移动端原型(APP/小程序)
请制作一套高保真可交互移动端原型,页面完整、交互逻辑正常,纯前端实现,无后端接口依赖。
输出完整的HTML站点文件夹,包含html、css、js、静态资源,确保解压后直接打开index.html就能正常浏览和触发所有交互。
需求:【在这里替换你的页面/功能描述】
要求:布局规范、样式统一,资源路径全部使用相对路径。
1.2 电脑端原型(后台/官网/管理系统)
制作PC端可交互网页原型,纯前端实现,所有点击、弹窗、切换、菜单交互正常,无需后端支持。
输出完整HTML文件夹,主文件为index.html,所有资源采用相对路径,保证解压后直接打开即可使用。
需求:【在这里替换你的页面/功能描述】
1.3 多页面整套原型
制作多页面整套交互原型,包含页面跳转、弹窗、选项卡等常规交互,纯前端、无后端依赖。
导出完整HTML站点包,主入口为index.html,全部资源相对路径,文件夹结构规整。
页面清单&需求:【填写所有页面名称+功能要求】
1.4 测试样例
请制作一套高保真可交互移动端原型,页面完整、交互逻辑正常,纯前端实现,无后端接口依赖。
输出完整的HTML站点文件夹,包含html、css、js、静态资源,确保解压后直接打开index.html就能正常浏览和触发所有交互。
需求:设计1个可交互的多入口登录的碳普惠APP登录页面
要求:布局规范、样式统一,资源路径全部使用相对路径,部署到云端预览。
测试效果(本地html文件)

2. 在线预览
想要在线预览的,在提示词工程要求的最后加一句话"部署到云端预览"

3. 更新说明
为便于后期追溯更新内容及问题,可参考如下提示生成每次版本更新说明update.md
3.1 更新说明提示词
在工作空间本地生成1个update.md,记录每次更新的内容概要,要求简单明了,每次更新后在最上面追加新的更新记录,每个更新之间空2行,格式参考如下:
第n次更新
更新时间:yyyy-mm-dd HH:MM:SS
更新内容:
(1)将本次更新的内容按不同端侧总结提炼成1段话
(2)同上
...
(n)同上
- 原型地址(如有):将本地更新的预览地址贴到这儿
...
第2次更新
更新时间:yyyy-mm-dd HH:MM:SS
更新内容:
(1)将本次更新的内容按不同端侧总结提炼成1段话
(2)同上
...
(n)同上
- 原型地址(如有):将本地更新的预览地址贴到这儿
第1次更新
更新时间:yyyy-mm-dd HH:MM:SS
更新内容:
(1)将本次更新的内容按不同端侧总结提炼成1段话
(2)同上
...
(n)同上
- 原型地址(如有):将本地更新的预览地址贴到这儿
3.2 更新说明效果

4. 生成PRD
4.1 PRD技能
PRD Generator - 专业产品需求文档生成器
4.2 PRD提示词
按照如下章节要求,输出一份满足研发实施与客户交付的PRD文档,最终输出1个prd.md文件
背景与目标
术语定义
角色与权限
业务流程
功能需求(按模块)
业务规则(强约束)
状态流转
异常与边界
非功能需求(性能/安全/审计)
验收标准(Given/When/Then)
待确认项(Open Questions)
变更记录(每轮更新摘要)
4.3 PRD结果

5. 结语
诚然,原型及PRD提示词不一定适合所有人,不同场景要根据实际情况调整提示词框架及内容,慢慢调教出适合自己的提示词,然后快速出效果,希望早日能满足当前快节奏的工作要求
多说一句,产品经理有产品思维很重要,但基础的原型设计古法手搓能力不能丢,万一哪天断网了呢