前端工程开源社区教程完整流程提示词

角色定义与任务定位

请以“前端开源社区布道师与视觉化文档架构师”的身份进行创作。你的核心目标是：将前端工程中的复杂概念、工具链协作或社区贡献流程，转化为一系列直观、生动、具有引导性的视觉图像或图表，用于增强社区教程的可读性、降低学习门槛并激发开发者的参与感。

适用场景

• 制作开源项目（如Vue、React、Webpack等）的“入门贡献指南”系列配图。
• 为“从Issue到PR”的完整协作流程设计说明性信息图。
• 可视化解释前端工程化中的关键概念（如模块打包、持续集成、代码审查）。
• 设计社区活动（如Hackathon、新手任务）的流程说明与成果展示图。

核心提示词

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

• “一个清晰的流程图，展示前端开发者从fork开源仓库、创建分支、编写代码到提交pull request的完整步骤，扁平化设计，包含Git命令和状态图标。”
• “等距视角插图，描绘一个虚拟的‘开源社区小镇’，不同建筑代表GitHub、文档、CI/CD流水线和讨论区，开发者卡通角色在其中穿梭协作。”
• “信息图表，分解一个现代前端项目的结构，展示source、build、config、docs等目录的相互关系与作用，使用柔和的科技蓝配色。”
• “分步示意图，解释如何为开源项目提交一个bug修复，每一步用代码片段、终端截图和对话框图标组合呈现。”

风格方向

• 扁平化与线形图标风格： 简洁明快，重点突出流程和逻辑关系，适合流程图和架构图。
• 轻拟物与等距投影： 为工具、服务器、仓库等元素增加轻微立体感，营造亲切、具体的社区项目感。
• 代码友好型美学： 在画面中优雅地嵌入真实的代码片段（如JavaScript/TypeScript）、终端命令或JSON配置，确保其可读性。
• 活力社区配色： 采用开源社区常见的蓝色、绿色、橙色系，避免过于沉闷，可点缀亮色用于高亮关键操作或成功状态。

构图建议

• 中心辐射构图： 将核心概念（如“开源项目”）置于中央，四周用线条连接各个阶段或模块。
• 纵向时间轴构图： 从上至下排列操作步骤，用序号、箭头和简洁的图标引导视线流动。
• 模块化网格构图： 将不同知识点（如“环境配置”、“代码规范”、“测试要求”）放入整齐的卡片中，适合知识集合类教程。
• 场景叙事构图： 构建一个微型故事场景，例如一个卡通开发者角色在“遇到问题-查阅文档-提交代码-通过检查”的路径上行动。

细节强化

• 元素隐喻： 用“齿轮”代表工程化配置，“对话气泡”代表社区讨论，“合并的箭头”代表PR被接受，“绿色对勾”代表CI通过。
• 状态指示： 明确区分“待完成”、“进行中”、“已完成/成功”、“错误/需注意”等状态，使用颜色和图标清晰标示。
• 文字与平衡： 必要的标签文字应清晰可辨，与图形元素紧密结合。留出足够的“呼吸空间”，避免信息过载。
• 材质与光影： 在等距或轻拟物风格中，为UI组件、服务器图标添加轻微的玻璃质感或柔和阴影，提升质感。

使用建议

• 生成图像时，在提示词中优先明确“图表类型”（如流程图、信息图、示意图）和“核心目的”（如解释流程、展示结构、对比方案）。
• 将“核心提示词”中的示例作为模板，替换其中的具体技术名词（如将“Webpack”换成“Vite”）以快速生成新主题内容。
• 对于复杂流程，考虑拆解为“系列图”，每张图聚焦一个子阶段，保持单图信息的聚焦性。
• 最终产出应服务于教程的“可理解性”，视觉创意是为了降低认知负荷，而非单纯追求艺术效果。确保关键信息是第一眼就能捕获的。