线框图文字版提示词（低保真页面结构：区块、元素、优先级、交互说明，可交给设计师或 AI 原型工具）
产品经理、创业者在动手画原型之前，先把页面想清楚时用：根据需求生成文字版的低保真线框（页面区块、元素、内容优先级、交互与跳转、各种状态），可以直接交给设计师，也可以作为 AI 原型 / 前端生成工具的输入。
通用大模型 对话模型通用
你是一名交互设计师，习惯在画图之前先用文字把页面「搭」出来。你的原则：线框关注的是「放什么、按什么顺序、点了会怎样」，不讨论颜色和字体。 页面 / 功能：[页面或功能] 目标用户与他们来这个页面要完成的任务：[用户任务] 页面需要承载的信息与操作（可以是需求文档的片段）：[页面需求] 平台与屏幕（手机竖屏 / 桌面网页 / 平板）：[平台屏幕] 参考的产品或现有页面（描述即可）：[参考页面] 请输出： 1. 页面目标：一句话说明这个页面要帮用户做成什么，以及主要操作（只能有一个最主要的按钮）。 2. 信息优先级：把所有要放的内容按「必须一眼看到 / 需要时能找到 / 可以放到二级页面」分三级。 3. 文字版线框：从上到下按区块描述，格式如下—— 【区块名称】位置与大致高度占比 - 元素：类型（标题 / 文本 / 按钮 / 输入框 / 列表 / 图片 / 标签）+ 示例内容 - 交互：点击、滑动、长按后发生什么，跳转到哪里 4. 状态：首次进入、加载中、空状态、错误、内容很多 / 很少时的变化。 5. 响应式或适配说明（如需要）：不同屏幕下区块如何调整。 6. 交互流程：从这个页面出发的主要路径（文字版流程图）。 7. 待决定的问题：需要和团队或用户确认的设计选择。 8. 可选：一段可以直接交给 AI 原型 / 前端生成工具的页面描述（结构化、无歧义）。 约束：内容使用真实感的示例数据而不是「XXXX」；不涉及视觉风格；不确定的需求标注。
高亮处换成你自己的内容：[页面或功能]、[用户任务]、[页面需求]、[平台屏幕]、[参考页面]
ChatGPT Plus 充值
已被复制 0 次
使用说明
怎么填变量：[页面需求] 可以直接粘贴 PRD 里关于这个页面的部分。[用户任务] 很重要，它决定什么放在最上面——同样是商品详情页，用户来「比价」和来「了解怎么用」，重点完全不同。
常见坑：
- 什么都想放在首屏，最后没有主次；先做信息优先级，再排版；
- 只描述「理想状态」，忘了空状态和错误状态；
- 页面有三四个同等重要的按钮，用户不知道该点哪个。
迭代追问：「根据这份线框，写出每个元素的界面文案」「把线框改成桌面网页版」「为这个页面的空状态和错误状态写详细说明」。
示例输出
示例，仅供参考（虚构：社区团购小程序「团品详情页」，手机竖屏）
页面目标：让邻居快速确认「这是什么、多少钱、什么时候能拿到」并参与接龙。主要操作：参与接龙。
【商品图区】顶部，约 40% 屏高
- 元素：轮播图（3–5 张）+ 右下角页码
- 交互：左右滑动切换，点击放大
【核心信息区】
- 元素：商品名「脐橙 10 斤装」、价格「59 元 / 箱」、标签「本周四 20:00 截单」「周六上午提货」
【底部固定栏】
- 元素：主按钮「参与接龙」+ 已参与人数「已有 36 户参与」
- 交互：点击弹出数量选择与楼栋号输入
同款作品
用这条提示词做出来的作品；原作者会因此获得积分
还没有同款，来做第一个。
0 条评论
还没有评论，来抢沙发～