前端工程RAG工作流设计清晰框架提示词

角色定义
你是一位技术架构可视化设计师，专门将复杂的前端工程流程转化为清晰、易读的结构化框架图。你的核心目标是通过图形语言，直观呈现RAG工作流中检索、增强、生成三大环节在前端工程中的衔接逻辑、数据流向和组件依赖关系。你需要确保最终产出物是一张可被直接用于技术文档、演讲PPT或白板讨论的高质量框架图，而非文字描述或代码片段。

适用场景

设计前端RAG（检索增强生成）应用的系统架构图，用于技术方案评审或团队对齐
为前端工程师、AI应用开发者提供工作流可视化的参考模板
生成用于技术博客、产品页面、开源项目README的架构示意图
帮助非技术角色（如产品经理、设计团队）快速理解前端RAG组件的协作关系


核心提示词
可直接复制以下提示词用于图像生成或视觉设计工具（如Midjourney、DALL·E、Stable Diffusion）：

“A clean, structured architectural diagram of a frontend engineering RAG workflow, showing three horizontal layers: Retrieval (vector database query, embedding pipeline), Augmentation (context assembly, prompt template), Generation (LLM call, response rendering). Each layer contains clean rectangular node boxes with subtle rounded corners, connected by directional arrows in a consistent color palette (blue-gray for data flow, teal for processing). Minimalist style, no text-heavy labels, using icons to represent database, model, and UI components. White background, a professional technical diagram suitable for a technical documentation page.”
“Top-down flowchart of a frontend RAG pipeline: user query → embedding → vector search → context retrieval → prompt construction → LLM inference → frontend rendering. Nodes are light gray with thin dark borders, arrows in dark teal, with subtle shadow depth. Grid layout, clear spacing, annotations on connections showing data format (JSON, vector). Exclude human figures, focus on system components and data flow direction.”


风格方向

极简技术风： 使用浅灰背景、深灰边框、单一强调色（如青蓝、珊瑚红），避免渐变或纹理，保持阅读焦点在流程逻辑上。
现代白板风： 手绘感线条、轻微圆角、无衬线字体（如Inter、SF Pro），配合低透明度阴影，适合演示或协作场景。
高对比度信息图： 深色底（如深蓝或炭灰），亮色高亮（如霓虹绿、亮橙）区分检索、增强、生成三大阶段，适合投影或大屏展示。


构图建议

采用自上而下垂直流（第一列用户查询 → 第二列检索层 → 第三列增强层 → 第四列生成层 → 底部前端界面），每个阶段用横向带状区块分隔，区块内以横向排列子节点。
若需展示循环（如反馈迭代），在右侧添加反向虚线回路，箭头标注“feedback loop”。
节点尺寸统一：宽高比3:2，内留白充足，文字或图标居中。连接线使用贝塞尔曲线，避免直角拐弯。
可添加一个侧边栏说明各层对应的技术栈（如Chroma、LangChain、Vercel AI SDK），用小型标签形式置于节点右上方。


细节强化

在检索层节点中增加“向量数据库图标”（如锥形立方体）和“embedding model”微标注。
增强层节点内展示“prompt模板”和“上下文窗口”两个子符号。
生成层节点添加“streaming”标记（一个小的闪电图标），表示实时输出。
所有箭头线末梢使用实心圆点而非箭头三角形，更符合现代UI图示习惯。
颜色命名：检索层用#4A90D9（静谧蓝），增强层用#7B68EE（紫罗兰），生成层用#2ECC71（翡翠绿），前端界面用#E67E22（活力橙）。


使用建议

在Midjourney中生成时，增加参数 --ar 16:9 或 --ar 3:2 以适应文档页面，并附加 --no text, labels, people, photo 避免干扰。
若使用DALL·E，可先以“technical diagram, flat vector, isometric view”为风格基底，再补充具体节点描述。
生成后建议在Figma或Draw.io中二次调整连线对齐、字体大小和间距，确保输出符合前端工程文档标准。
如果需要输出中文标注版本，可将核心提示词中的英文节点名替换为中文（如“检索层”“增强层”），保留图标和颜色方案，避免中文与西文字体混排造成的视觉杂乱。