前端工程本地RAG流程设计高阶版提示词

角色定义与任务定位

请以前端技术架构师或高级前端开发工程师的身份，使用本提示词方案。你的核心目标是：为“前端工程本地RAG（检索增强生成）流程”这一技术主题，生成一套用于技术方案展示、架构图绘制、流程说明或内部技术文档配图的专业视觉内容。生成结果应能清晰、美观地呈现技术逻辑、数据流与模块关系。

适用场景

• 技术方案PPT或设计文档中的架构图、流程图绘制。
• 团队内部技术分享与流程讲解的可视化素材制作。
• 个人技术博客或开源项目README中的流程示意图。
• 前端与AI结合（AI Engineering）领域的概念可视化表达。

核心提示词

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

• 基础组合：A detailed architecture diagram of a local RAG workflow for front-end engineering, showing modules like document loader, text splitter, vector embedding, local vector database (e.g., ChromaDB), retrieval, and front-end application integration.
• 流程强调：Flowchart of a local RAG process in front-end development, clean and professional, with clear directional arrows, data flow labels from “User Query” to “Generated Response”.
• 技术栈特写：Modern front-end local RAG system visualization, featuring technology icons or badges for Node.js, LangChain.js, Transformers.js, Ollama, WebLLM, and vector databases.

风格方向

• 专业技术图表风：采用扁平化设计（Flat Design）、简洁线条、低饱和度色块（科技蓝、高级灰、生态绿组合），确保信息层级分明。
• 等距轴测图：使用Isometric view展示系统各模块的立体空间关系，增强结构感和现代感。
• 极简线稿图：黑白或单色线条图，聚焦于流程与连接关系，适合学术或正式文档。
• 暗色主题：深色背景搭配霓虹蓝或青色高光，突出科技感与数据流动态。

构图建议

• 左右流式布局：左侧为“数据输入与处理”区（文档加载、分块、嵌入），右侧为“查询与响应”区（检索、生成、前端界面），中间用醒目的数据流箭头连接。
• 中心辐射布局：以“本地向量数据库”或“前端应用”为核心，周围环绕连接其他处理模块。
• 分层架构图：从上至下分为“应用层”、“AI处理层”、“数据存储层”，清晰展示技术栈层次。
• 添加标注：在关键模块旁使用简洁的文本框说明其技术选型（如：使用ChromaDB进行本地向量存储）。

细节强化

• 模块细节：为“文本分割器”模块添加示意性的文本碎片图标；为“嵌入模型”模块添加微小的神经网络节点图。
• 数据流表现：用渐变色的箭头或粒子流动效果表示向量数据从“嵌入”到“存储”再到“检索”的移动过程。
• 前端集成体现：在画面一角加入简约的浏览器窗口或代码编辑器（VSCode）界面，显示调用本地RAG服务的示例代码片段。
• 氛围与质感：添加轻微的科技光晕、干净的网格背景或极细的参考线，提升图纸的专业精度感。

使用建议

• 将上述“核心提示词”与“风格方向”、“构图建议”中的关键词进行组合，例如：“Isometric view, flat design, detailed architecture diagram of a local RAG workflow for front-end engineering, with clear data flow and technology labels, dark theme with neon blue accents”。
• 在图像生成工具中，可指定画幅比例（如16:9）以获得更适合幻灯片展示的图片。
• 若需生成流程中的某个特定环节（如“检索”环节），可将核心提示词聚焦于该细节，并添加“close-up view”、“detailed shot”等镜头控制词。
• 本方案生成的图像主要用于技术沟通，请确保关键文字标签清晰可读，必要时可在生成后添加补充标注。