夜雨聆风
花50美元做了个AI工具,免费送你,职场人一定用得上!
周末在家，Vibe Coding了一个工具，免费分享给大家。我相信只要你在职场上班用，应该都能用得上。
一句话说清楚它是干嘛的：帮你自动生成美观、统一的操作流程文档，不管是内部工具教程，还是产品说明书，都能用上。
文末有领取方式，我也写好了安装文档，直接照着来就行。
为啥要做这个产品呢？
想问下各位，在公司里写流程文档这件事，你是不是也头大过？
手动截图、手动标注，搞完一份文档半小时没了，截图还丑得自己都不想看。尤其是每次有新的业务，都需要写一份具体的操作文档，给所有同事来看。
给大家看一份我们公司内部的一份流程文档，截图巨丑，关键还贼麻烦：
开发过程，这里就不说了，接下来按使用环节，带大家走一遍。
第一个环节，开始录制，它帮你自动截图记步骤
打开任意的一个网页，启动插件，插件会出现在页面右侧：
你会看到一个「开始录制」的按钮：
点下去之后，接下来，你在页面上的每一次点击，它都会自动记录下来，包含操作动作 + 对应截图。
比如我这里记录了一个[如何新建一个商品]的文档，就会显示这样的步骤：
全部点完之后，点「结束录制」就可以了：
如果你有多份文档要管理，也可以提前，在底部创建好分组，方便后期归档。
第二个环节，文档的编辑
结束录制后，会自动跳转到编辑界面，分左中右三栏：
左侧是步骤列表
可以直接拖拽调整顺序，序号会自动跟着变：
中间是文档预览区
如果某一步需要额外备注，比如在写流程文档时，你需要增加额外备注，那么，你就可以手动备注，直接在该步骤底部添加说明就行：
添加备注后，显示就是这样：
还有一个容易漏掉的功能：如果某个步骤，不需要截图，也可以在这里，手动新增一个纯文字步骤：
右侧是样式调整区
你可以更改点击按钮的形状、颜色、大小：
也就是这个红色按钮的样式：
截图裁切这里，我默认设定了 16:9 的比例，聚焦按钮附近的区域，而且，加了阴影和描边，便于别人能看清图片的边界：
如果你希望看文档的人，能看到完整页面，切换到「完整显示」就好：
另外，如果某张截图的聚焦区域不对，直接在预览区，滚动鼠标滚轮，放大缩小调整图片要显示的画面，最终导出的，就是你调好的样子：
第3个环节，导出分享
PDF、Word 这些格式大家都熟，不多说。
我觉得最有意思的，是「交互引导页」：
这是干嘛的呢？它会把你整个操作流程，生成一个网页文件。
你可以直接打开，就像很多 App 的新手引导一样，一步步高亮，告诉你该点哪里、顺序是什么：
比静态文档直观太多，尤其适合发给完全不熟悉这个流程的人。
最后，说下怎么下载以及安装
下载的话呢，就太简单了，可以点击下方公众号卡片：
点击发消息，在公众号对话界面，发送关键词【流程文档记录】，就可以获取完整的插件压缩安装包。
下载后先解压，你会看到文件夹和使用教程：
在使用的时候呢，你只需要，打开你的谷歌浏览器，点击扩展程序，选择管理扩展程序：
勾选右上角的开发者模式，然后，点击加载未打包的扩展程序：
选择文件夹即可安装成功：
