高质量前端工程API文档生成提示词

角色定义与任务定位

请以“前端架构师兼技术文档可视化专家”的身份，执行以下任务：你的核心目标是生成用于解释、展示或构思“高质量前端工程API文档”的视觉内容。这并非撰写实际文档，而是创作能清晰传达其结构、逻辑、工具链与最佳实践的概念图、示意图或风格化界面展示，服务于技术分享、项目规划或开发流程说明等场景。

适用场景

• 技术博客或文章配图，用于解释现代前端API文档的生成流程。
• 项目内部技术方案宣讲PPT中的视觉素材。
• 开发工具或平台的功能介绍页面，展示其文档自动化能力。
• 前端工程化教程或课程中，用于说明文档集成环节。

核心提示词

可直接用于图像生成的核心描述组合：

• 基础组合：A clean, modern dashboard interface showing real-time API documentation generation, with code files on one side and a formatted, interactive API docs preview on the other.
• 流程可视化：An architectural diagram illustrating the pipeline: Source Code (TypeScript) -> Static Analysis Tool (like Swagger/OpenAPI) -> Documentation Generator (like Docusaurus/VuePress) -> Hosted API Docs with live testing panel.
• 工具集成：A developer's IDE screen, with focus on a plugin or sidebar that automatically generates and updates API documentation from JSDoc/TSDoc comments, featuring version control sync status.

风格方向

• 极客现代风：深色主题（深蓝/深灰），搭配霓虹蓝绿（Neon Cyan）或活力橙（Vibrant Orange）作为高亮色，线条干净利落，充满科技感。
• 清新明亮风：纯白或浅灰背景，使用柔和蓝色（Soft Blue）、绿色（Mint Green）作为主色调，图标简洁扁平，营造清晰、开放的开发氛围。
• 手绘草图风：采用白板或笔记本手绘效果，用不同颜色的线条和便签表示代码模块、工具和文档部分，体现构思和规划过程。

构图建议

• 左右对比构图：左侧为源代码编辑器（显示带有清晰注释的TypeScript函数），右侧为自动生成的、排版精美的API文档界面，中间用箭头或数据流线条连接。
• 中心放射构图：将“高质量API文档”置于视觉中心，向外延伸出多个节点，分别代表“代码注释规范”、“类型定义”、“自动化构建”、“交互式示例”、“版本管理”等关键要素。
• 分层递进构图：从上至下展示三层：顶层为“开发阶段（编码与注释）”，中层为“构建阶段（静态分析与生成）”，底层为“交付阶段（部署与访问）”，形成清晰的流程纵深感。

细节强化

• 添加关键元素：在画面中融入代表性工具图标，如Swagger、OpenAPI、TypeScript、JSDoc、Git、CI/CD（如Jenkins或GitHub Actions）的Logo或抽象符号。
• 突出“高质量”特征：在生成的文档预览区，展示细节如：清晰的参数表格（含类型、必填、说明）、可折叠的代码示例框（支持多种语言）、以及一个“在线测试”按钮或沙盒环境小窗口。
• 氛围与质感：使用轻微的弥散阴影（Diffused Shadow）和渐变（Subtle Gradient）增强立体感。对于科技风格，可添加低饱和度的光晕（Glow）或微小的数据点流动效果，暗示自动化过程。

使用建议

• 将上述“核心提示词”与“风格方向”、“构图建议”中的描述进行组合，例如：“[极客现代风] + [左右对比构图] + [基础组合提示词]”，以生成风格统一的图像。
• 在向AI绘画工具描述时，优先明确主体（是什么），再描述关系（如何连接），最后指定风格（看起来怎样）。可加入“isometric”（等距视图）、“infographic”（信息图）、“detailed UI wireframe”（详细UI线框图）等词汇控制输出类型。
• 本方案侧重于文档“生成”的流程与结果展示。若需强调文档“内容”本身，请强化“核心提示词”中关于文档预览界面细节的部分，并加入“mocked user interface of API documentation”等描述。