前端工程PRD需求文档专业版提示词

角色定义与任务定位
请以“资深前端架构师兼产品需求视觉化顾问”的身份，运用这份提示词。你的核心目标是：将一份文字性的、功能性的PRD（产品需求文档）需求，转化为一套具体、可落地、具备视觉指导意义的“设计实施蓝图”，用于指导界面原型设计、技术方案评审或与UI/UX设计师进行高效沟通。
适用场景

根据PRD文字描述，快速生成界面布局的视觉化参考图。
在技术评审前，为复杂交互逻辑（如状态流转、数据加载）制作说明示意图。
将非功能性需求（如性能要求、适配规范）转化为直观的视觉约束描述。
为设计系统组件库的更新或新建提供基于需求文档的输入依据。

核心提示词
可直接复制使用的提示词组合示例：

基础生成： 专业、清晰的产品需求文档（PRD）界面示意图，展示 [具体功能模块，如：用户仪表盘数据看板] 的布局，包含 [核心组件1，如：图表区]、[核心组件2，如：筛选控件]、[核心组件3，如：数据摘要卡片]，采用模块化设计，标注主要交互区域。
交互流程： 用户操作状态流程图，展示从 [初始状态，如：列表页] 到 [触发动作，如：点击“新建”按钮] 再到 [多个结果状态，如：成功弹窗、错误提示、加载中] 的完整视觉化流程，使用箭头和状态标签进行连接。
响应式示意： 同一功能模块在桌面端（1440px）、平板端（768px）和移动端（375px）三种视口下的布局对比图，清晰展示组件重组、导航变化和内容优先级调整。
细节标注： 高保真线框图，聚焦于 [特定组件，如：表单提交按钮] 的多种状态：默认态、悬停态、点击态、禁用态、加载态，并附有简短的样式标注（颜色、圆角、内边距）。

风格方向

专业线稿风： 使用低饱和度的单色（如蓝灰、黑灰），清晰的线条和形状，专注于信息结构和布局，而非视觉装饰。
轻量级色彩标注： 在单色线稿基础上，使用1-2种强调色（如蓝色代表可点击、红色代表警告/错误）高亮关键交互元素或状态。
极简主义UI套件： 模拟现代设计工具（如Figma, Sketch）中的组件样式，干净、无纹理、带有细微阴影或描边以区分层级。
技术图表感： 借鉴架构图或流程图的绘制风格，元素规整，连接线明确，注重逻辑关系的表达。

构图建议

全景布局图： 采用从上到下的平铺构图，完整展示一个页面或模块的所有区域，使用网格线或参考线体现对齐关系。
焦点放大图： 采用“主图+局部放大插图”的构图，主图展示整体，插图聚焦于复杂交互细节或组件状态。
多状态并列： 将同一组件的不同状态（如按钮五态）或同一界面在不同尺寸下的表现并排排列，便于对比。
流程轴视图： 从左到右或循环式的构图，清晰展示用户操作路径与系统反馈的先后顺序。

细节强化

标注与注释： 使用引线和非遮挡式的标签，注明组件名称、交互行为、数据字段来源或特殊的业务规则。
间距与尺寸： 通过元素间的留白和比例，隐含地传达设计系统的间距规范（如8px基准网格）。
数据模拟： 在图表、表格等组件中使用有意义的模拟数据（如“月活跃用户：1,234,567”），而非“Lorem ipsum”。
真实感阴影与层次： 为模态框、悬浮卡片等元素添加轻微、多层的阴影，明确界面元素的层级（Z轴）关系。

使用建议

将PRD中的“用户故事”或“功能描述”逐句拆解，转化为核心提示词中的具体对象和操作。
优先生成“线稿风”示意图以确定布局和流程，再使用“轻量级色彩标注”版本来定义交互和状态。
在提示词中明确指定“不要装饰性元素”、“不要真实图片”、“背景纯白”，以确保输出专注于结构和功能。
生成的图像可作为附件插入PRD文档，或直接用于设计协作工具的讨论，实现需求传递的“零信息损耗”。