高质量前端工程数据抽取总结提示词

角色定义与任务定位

请以“前端架构可视化设计师”的身份，运用你的技术理解与视觉表达能力，完成以下核心任务：将“高质量前端工程数据抽取”这一技术主题，转化为一套层次分明、重点突出、可直接用于生成技术图解或概念视觉稿的提示词方案。你的目标是产出不仅准确反映技术流程，更具备视觉表现力的创作蓝图。

适用场景

• 为技术博客或文档配图，解释前端数据抽取的完整流程。
• 制作团队内部分享或培训用的知识图谱幻灯片。
• 设计概括性技术海报或信息图，展示工程最佳实践。
• 构思项目文档中的架构概述图。

核心提示词

可直接用于图像生成平台的核心描述语句：

• “一张清晰的技术流程图，展示前端应用从发送API请求、处理响应、数据清洗、格式化到最终状态管理的完整数据抽取流水线。”
• “一个现代前端数据抽取层的抽象架构图，包含网络请求模块、拦截器、数据转换器、验证层与状态存储的核心组件及其关系。”
• “一个聚焦于数据抽取‘实战应用’的场景图，对比展示直接使用原生fetch、使用axios封装、以及使用React Query或SWR等现代库的不同代码结构与数据流。”

风格方向

• 专业极简风：使用干净的线条、几何形状、一致的色块（建议采用蓝、灰、绿作为主色调），营造严谨、清晰的科技感。
• 信息图表风：结合图标（如齿轮代表处理、数据库符号代表存储、箭头代表流动）、简要标签和分区，强调信息的可读性与结构化。
• 代码融合风：在视觉元素中巧妙嵌入简化的、高亮显示的伪代码片段（如async/await、.then()链、解构赋值），体现实战感。

构图建议

• 采用从左到右或自上而下的线性流程图构图，明确展示数据流转的“输入-处理-输出”阶段。
• 考虑使用同心圆或分层结构，从内到外依次展示“核心逻辑层”、“工具封装层”、“外部依赖层”。
• 对于“总结提炼”，可采用中心主题（“高质量数据抽取”）放射出多个关键实践分支（如错误处理、缓存策略、性能监控）的思维导图形式。

细节强化

• 流程节点：为每个关键步骤（如“请求构造”、“响应拦截”、“类型转换”、“异常捕获”、“缓存更新”）设计具有区分度的视觉标识。
• 数据流：使用不同粗细或色彩的箭头与虚线，区分主数据流、错误流、缓存回退流。
• 氛围描述：整体画面应整洁、有序，背景可为浅色渐变或极细的网格线，突出前景的技术元素。可添加微弱的光晕或连接线高光，象征数据的活跃与传递。
• 扩展词：在提示中可加入如“干净利落的线条”，“扁平化设计”，“带有轻微科技光泽”，“等距透视”，“信息密度高但布局平衡”等描述，以控制最终视觉风格。

使用建议

• 将“核心提示词”与“风格方向”、“构图建议”中的描述组合使用，例如：“一张专业极简风格的技术流程图，采用从左到右的线性布局，展示前端数据抽取的完整流程，包含请求、拦截、转换、验证与存储节点，使用蓝灰色调，带有轻微的科技光泽。”
• 根据具体侧重点（如强调“完整流程”或“实战应用”），选择对应的核心提示词作为生成基础，再叠加其他模块的细节要求。
• 在生成后，可依据此方案检查视觉成果是否涵盖了关键阶段、组件关系是否清晰、风格是否符合技术文档的专业调性。