前端工程数据抽取总结完整流程提示词

角色定义与任务定位

请以“资深前端架构师”或“项目复盘与知识沉淀专家”的身份，使用本组提示词。你的核心目标是：将“前端工程数据抽取”这一技术实践过程，进行系统性、视觉化的总结与提炼，生成可用于技术分享、项目文档、团队培训或知识库建设的高质量视觉内容，强调流程的完整性与实战应用价值。

适用场景

• 制作技术分享会或内部培训的演示文稿核心视觉图。
• 撰写项目复盘文档或技术博客的流程示意图与要点总结。
• 构建团队知识库中关于“数据抽取”标准化流程的视觉化条目。
• 为新成员提供快速理解复杂前端数据流处理流程的引导图。

核心提示词

可直接组合使用的提示词示例：

• “一张信息图表，清晰展示前端数据抽取的完整工作流：从需求分析、接口定义、数据获取（Ajax/Fetch）、数据解析与清洗、状态管理（Redux/Vuex/Pinia）、到最终的数据应用与性能监控。”
• “现代极简风格的技术流程图，聚焦前端工程中的数据抽取层，包含关键节点：API契约设计、错误处理与重试机制、数据缓存策略、安全性考量（XSS/CSRF）、以及数据格式化与类型校验。”
• “写实主义与数字艺术结合，将数据抽取流程比喻为一座精密的‘数据处理工厂’，可视化展示‘原始数据输入’、‘净化管道’、‘转换车间’、‘质量检验’和‘成品存储’等环节。”

风格方向

• 专业信息图风格：使用清晰的区块、连接线、图标系统，配色以蓝色、灰色、绿色系为主，体现科技感与逻辑性。
• 极简线稿与扁平化设计：突出核心节点与关系，去除冗余细节，采用单色或双色系，视觉焦点明确。
• 科技感暗黑主题：深色背景搭配霓虹蓝、荧光绿等高对比度色彩，突出数据流的光效与动感，适合呈现高性能、现代感。
• 手绘草图风格：模拟白板讲解的亲切感，体现头脑风暴与流程设计的过程性，增加注释与批注感。

构图建议

• 水平流程轴：从左至右线性展示流程阶段，适合表现时间或逻辑顺序。
• 垂直分层结构：从上至下展示“视图层-逻辑层-网络层-数据源”的分层抽象，体现架构清晰度。
• 中心辐射构图：以“核心数据存储（如Store）”为中心，四周辐射出不同的数据来源、处理模块与消费组件。
• 对比式构图：将“优化前”与“优化后”的抽取流程并置对比，突出流程改进的关键点与收益。

细节强化

• 关键代码片段：在相关节点旁，以优雅的代码框形式嵌入标志性的代码示例（如一个典型的API请求函数或数据选择器）。
• 数据状态可视化：用不同的图形（如圆点、方块）颜色与大小，直观表示数据的“加载中”、“成功”、“失败”、“缓存命中”等状态。
• 性能指标标注：在流程线上标注关键性能考量，如“延迟”、“包体积”、“缓存命中率”。
• 工具与库图标：融入Axios、GraphQL、WebSocket、Redux Toolkit、React Query等实际工具/库的标识性Logo或简化图形。
• 材质与光影：对数据流管道、处理节点使用轻微的玻璃质感、金属光泽或发光边缘，增强科技感和可读性。

使用建议

• 生成图像时，将“核心提示词”中的语句与“风格方向”、“构图建议”中的描述结合使用，例如：“[核心提示词] + ，采用[科技感暗黑主题]与[中心辐射构图]，并强化[数据状态可视化]和[关键代码片段]细节。”
• 根据输出平台调整复杂度：用于PPT可适当简化细节，突出主干；用于高清海报或文档则可增加技术细节密度。
• 在生成后，可基于此视觉框架，在对应节点补充具体的项目实战数据、遇到的典型问题及解决方案，使其更具个性化与参考价值。