进阶版前端工程API封装说明提示词
这是一份为前端工程师与架构师设计的结构化提示词方案,旨在生成一份专业、清晰、可落地的“进阶...
提示词内容
复制角色定义与任务定位
请以资深前端架构师兼技术文档可视化专家的身份,进行视觉创作。你的核心目标是:将“进阶版API封装”这一抽象、复杂的技术概念,转化为一套逻辑清晰、视觉直观、可直接用于团队知识传递或项目文档的说明性图示或信息图表。你的产出不是基础教程,而是聚焦于封装策略、设计模式与工程化实践的高级解读。
适用场景
- 技术团队内部知识分享与培训材料
- 项目文档中的架构设计说明章节
- 技术博客或社区文章的配图与可视化摘要
- 前端工程化建设方案的演示与汇报
核心提示词
可直接用于图像生成或视觉设计的关键词组合:
- 基础描述:Advanced front-end API encapsulation architecture diagram, clean and professional tech documentation style
- 核心元素:modular design, request interceptors, response transformers, error handling layers, type safety with TypeScript, mock service integration, automated testing suite
- 视觉化关键词:flowchart, layered architecture diagram, node connections, code snippets overlay, clean UI components interacting with API layer, glowing data streams
- 氛围与质感:minimalist tech aesthetic, dark/light theme with accent colors (blue for logic, green for success, orange for warnings), glassmorphism or neumorphism elements, subtle grid background
风格方向
- 整体风格:现代极简技术风,兼具专业性与视觉亲和力。避免过于卡通或娱乐化。
- 色彩方案:主色调采用深空灰或纯白背景,搭配科技蓝(主逻辑)、生态绿(成功/数据)、琥珀橙(警告/错误)作为功能色区分。色彩用于区分不同封装层与数据流状态。
- 材质与效果:可运用轻微的毛玻璃效果区分层次,关键节点使用微光或柔和的阴影突出。线条清晰流畅,箭头指示明确。
构图建议
- 中心辐射构图:以“统一封装入口”或“核心封装类”为中心,向外辐射出拦截器层、适配器层、数据转换层、错误处理层等模块。
- 分层递进构图:从上至下或从左至右,展示“用户界面 -> 封装层 -> 原生Fetch/Axios -> 服务器”的数据流与调用链,清晰体现每一层的职责。
- 对比构图:左侧展示“封装前”分散、重复的API调用代码块,右侧展示“封装后”统一、简洁的调用示例,形成强烈对比。
细节强化
- 代码表示:在相关模块旁嵌入高亮、简洁的真实TypeScript/JavaScript代码片段,例如展示一个配置了拦截器和类型泛型的请求函数。
- 图标化抽象:使用公认的技术图标(如齿轮代表配置、盾牌代表拦截、循环箭头代表转换、闪电代表性能)来象征不同封装功能。
- 动态示意:用不同颜色和粗细的箭头、流动的光点或虚线,表示请求、响应、错误等不同状态的数据流向。
- 标注与图例:在图表一侧或底部添加简洁的图例,解释颜色、线型和图标含义,确保信息自解释。
使用建议
- 生成图像时,将“核心提示词”部分的关键词组合作为主要描述,并从中选取2-3个“构图建议”作为画面结构指导。
- 在AI绘画工具中,可通过调整权重(如
(layered architecture diagram:1.3))来强调主体结构,加入technical illustration, infographic, isometric view等词进一步限定风格。 - 本方案生成的视觉内容,可直接嵌入Keynote/PPT、Confluence文档或Markdown文件中,作为技术概念的权威可视化补充。
- 可根据实际项目使用的具体技术栈(如Vue/React、Axios/ky),在“核心元素”中替换或添加关键词,使图示更具针对性。