前端工程API封装说明高阶版提示词

角色定义与任务定位
请以“资深前端架构师兼技术可视化专家”的身份进行创作。你的核心目标是：将抽象的API封装设计理念、代码结构与最佳实践，转化为一套逻辑严谨、视觉直观且可直接用于生成技术示意图、架构图或概念说明图的提示词方案。你的产出不是代码本身，而是指导图像生成工具精准描绘前端工程核心思想的“视觉蓝图”。

适用场景

技术博客或文档中，用于解释API封装层（如请求拦截器、响应处理器）的架构图。
团队内部技术分享，可视化展示从基础请求到高阶封装的演进过程。
项目说明中，呈现封装后API模块与业务组件、状态管理库之间的清晰调用关系。
设计系统的一部分，用于统一技术概念的视觉表达风格。


核心提示词
一组可直接使用或组合的核心提示词，用于生成图像：

基础架构图： 前端API封装层架构图，展示HTTP客户端、请求/响应拦截器、错误处理中心、数据转换层与业务模块的层级关系，干净的技术图示风格，使用箭头指示数据流。
代码与视觉对比： 一张对比图，左侧是未封装的冗余API调用代码片段，右侧是封装后简洁的调用示例，背景是抽象的电路板或管道网络隐喻连接。
实战应用流程： 一个用户点击按钮后，请求经过封装层（认证、加载、缓存、错误处理）最终返回UI组件的序列图或流程图，带有“重试机制”、“参数序列化”等标注。
行业应用场景： 微前端架构下的API网关封装示意图，展示不同子应用如何通过统一的封装层对接后端服务，采用模块化、隔离舱式的视觉设计。


风格方向

专业极简风： 使用清晰的线条、几何形状（矩形、圆角矩形、圆柱体代表数据存储）、低饱和度的科技蓝、灰、绿色系。强调结构感和秩序。
隐喻融合风： 将API封装比喻为“滤水系统”（拦截杂质）、“快递分拣中心”（路由与转换）或“电路板”（信号处理与路由）。将技术逻辑融入具象但不过于卡通化的隐喻中。
代码友好风： 背景呈现极细的、低透明度的代码行（如TypeScript接口定义），前景是色彩突出的架构组件，体现“文档即代码，视觉即文档”的感觉。


构图建议

采用从上至下的层级构图或从左至右的流程构图，明确区分“底层网络层”、“封装中间层”、“业务应用层”。
使用视觉重量（大小、颜色深度）来区分核心封装模块（如Axios实例、错误处理类）与辅助工具模块。
为“封装说明”的关键部分添加发光边缘或轻微投影，如“拦截器”、“适配器”，以引导视觉焦点。
考虑在角落或边缘加入图例，解释不同线条（实线代表请求流，虚线代表响应流，点线代表错误流）和形状的含义。


细节强化

色彩： 用不同颜色区分功能：蓝色代表请求发送与路由，绿色代表成功响应与数据处理，橙色代表警告与日志，红色代表错误与异常处理。
材质与光影： 主要模块表面可带有轻微的磨砂玻璃质感或金属光泽，增强科技感和实体感。连接线可带有流动的光点动画感（静态图中用渐变线条表示）。
文字标注： 使用等宽字体（如Monaco, Consolas）标注关键函数名或模块名，如 `createApiClient()`, `handleGlobalError()`。标注文字应简洁，字号小于标题。
氛围： 整体氛围应冷静、理性、高效。避免使用过于娱乐化或情感化的元素。


使用建议

生成时，将“核心提示词”中的任意一条与“风格方向”、“构图建议”中的描述结合，作为完整的生成提示词。
例如输入：“前端API封装层架构图，专业极简风，采用从上至下的层级构图，使用科技蓝与灰色系，关键模块带有磨砂玻璃质感，用箭头和颜色区分数据流与错误流。”
可根据具体框架（如Vue/React）或库（如Axios, RTK Query）调整核心提示词中的具体名称，使图像更具针对性。
本方案旨在提供结构化的视觉构思框架，实际生成时可根据输出结果微调细节描述，以迭代出最符合预期的技术图示。