开发MuleRun如何生成产品使教程 MuleRun图文说明自动生成|Duuu笔记

基于真实项目经验的前端实战分享

可借助MuleRun内置图文生成器、运行日志反向生成、API批量生成多语言教程及Figma设计稿导入四种方式快速创建结构清晰、图文并茂的使用教程。

如果您希望为MuleRun平台上的产品快速生成结构清晰、图文并茂的使用教程，但缺乏手动编写时间或设计资源，则可借助其内置的图文说明自动生成能力。以下是实现该目标的具体操作路径与方法：

一、启用MuleRun内置图文生成器

MuleRun平台在任务配置界面集成了自动化图文说明生成模块，该模块基于当前工作流节点的操作逻辑、字段定义及用户交互行为实时提取内容要素，并自动匹配对应截图与标注文字。

1、登录MuleRun控制台，进入目标集成项目页面。

2、在左侧导航栏点击

“文档中心”

，确保当前项目已启用文档生成功能开关。

3、点击

“生成图文教程”

按钮，系统将自动扫描当前流程中所有已部署的连接器与转换步骤。

4、在弹出窗口中选择需覆盖的节点范围（支持全流程/仅选中节点），点击确认启动生成。

二、基于运行日志反向生成操作图解

该方法利用真实执行过程中的系统日志与界面快照，还原用户实际操作路径，确保图文内容与真实使用场景完全一致，避免理论化描述偏差。

1、在MuleRun调试模式下执行一次完整的产品使用流程（如创建订单、同步客户数据等）。

2、执行完成后，进入

“运行历史” → 选择最新记录 → 点击“导出操作轨迹”

。

3、勾选

“包含界面截图”和“自动添加步骤说明”

两项，ZIP包。

4、将ZIP包拖入MuleRun文档中心的

“日志驱动图文导入区”

，系统将逐帧解析并生成带序号标注的图文序列。

Action Figure AI

借助Action Figure AI的先进技术，瞬间将照片转化为定制动作人偶。

下载

三、调用MuleRun API批量生成多语言教程

适用于需要为同一产品输出中文、英文、日文等不同语言版本教程的场景，通过标准REST接口传入元数据与翻译映射表，由后端服务完成图文排版与本地化渲染。

1、在MuleRun开发者设置中获取

API Key与图文生成Endpoint地址

。

2、构造POST请求体，包含product_id、language_code、screenshot_base64数组及step_descriptions键值对。

3、使用curl或Postman发送请求，响应中将返回

PDF与HTML双格式教程下载链接

。

4、调用返回链接发起GET请求，保存生成文件至本地文档库。

四、导入Figma设计稿自动绑定交互说明

当产品UI已在Figma中完成高保真原型设计时，可直接将设计稿与MuleRun流程节点建立映射关系，系统将识别图层命名规则并自动生成带热区标注的交互式教程。

1、在Figma中为每个可操作组件添加命名前缀，例如“btn_submit”、“input_email”、“modal_success”。

2、导出Figma文件为

.fig JSON格式

，并确保已启用“导出带注释图层”选项。

3、进入MuleRun文档中心，点击

“从设计稿导入”

，上传JSON文件。

4、在映射面板中将Figma图层名与MuleRun流程中的action_id逐一关联，点击

“生成带热区教程”

完成输出。