随着AI编程工具逐渐受到开发者的关注，Axhub Make作为一款集成了Vibe Coding能力的开源项目，为产品经理提供了全新的工作方式。本文将手把手教你如何部署并使用这套系统，以提升产品设计的效率。
--91likeyou---
AI 很早以前就有了写代码的能力，但我一直都没有真正在工作中使用它，甚至自媒体的各大博主都在炒 Vibe Coding 的热度，我却依旧很清醒地知道，那是为研发人员准备的东西，而不是产品经理。
最近，我接触到 Axhub Make 这个项目，我觉得这个项目再加上 Vibe Coding 才能真正服务于产品经理的工作。
是一篇纯粹的内容分享文章，文中提到的任何产品或项目与本人没有任何商业合作，各位可以放心阅读，不用担心我会在文中“夹带私货”。
本文是从一名用户的角度分享作为一名产品经理如何在工作中使用，想更深入了解 Axhub Make 请关注官方的信息，整个安装过程对于一些人来说可能有点复杂，各位一定要按照我写的步骤一步一步跟着操作。
提到 Axhub，最早接触过的产品经理应该都知道，这是一个 Axure 原型的在线托管平台，这个团队目前除了原型托管之外，还针对产品经理的工作做了不少的产品，本文分享的 Axhub Make 也是其免费开源的项目之一。
其实很早以前，Axhub Make 就发布过一个版本，当时的版本我用过之后，觉得离让产品经理在工作中使用还有一点差距，而最近新发布的这个版本，完全颠覆了之前的那个设计逻辑，让我觉得，它真的有可能让产品经理在工作中用到它，虽然这个项目中做了不少导出到 Axure 的相关功能，不过我认为，使用熟练之后，可以完全使用这个项目来替代 Axure。
接下来，我将从0开始，分享产品经理怎么在自己的电脑里将这个项目运行起来，并用它来进行产品设计和需求文档的编写。
一、安装 IDE
IDE 对于产品经来说是一个陌生的词汇，哪怕我知道他的中文叫做“集成开发环境”，依旧不知道是个啥，换个说法更易于产品经理理解，叫做“编程工具”。
为什么需要安装 IDE？虽然 Axhub Make 的项目集成了各大产品的 CLI 能力，可以通过项目在网页中直接调用 AI 能力编辑原型和文档，但是经过我的使用，目前该功能还不是特别完善，所以实际操作时，还是得通过 Axhub Make + IDE 的方式来进行。
今天我将以 VS Code 为例进行说明，各位也可以下载国内几家公司开发的 IDE 进行操作，使用方法基本相同，只是 VS Code 需要通过插件形式来调用 AI 能力，而国内几家公司开发的 IDE 本身已经集成了 AI 能力。
以下是各个 IDE 的官网地址，各位可以选择自己感兴趣的 IDE 进行下载。
- VS Code：
- Buddy：
- Qoder：
本文的原型和文档生成都是基于 VS Code + Code Buddy 插件的组合来实现。
安装好 IDE 之后，如果你用的是 VS Code，需要先安装对应的 AI 插件才能够使用。
二、安装 AI 插件
打开安装好的 VS Code，点击左侧的“扩展”图标进入扩展安装界面（需要汉化的可以在这里搜索安装简体中文汉化包，重启之后就可以看到中文界面），下图圈选的3个插件分别是 BAT 研发的 AI 编程插件，各位可以按需安装，各大厂商都有提供一定的免费的额度以供尝鲜。
安装好插件后，左侧可以看到插件的图标，首次点击图标会要求用户进行登录，登录成功即可与 AI 进行对话。
三、安装 Axhub Make
打开 Axhub Make 官网，地址如下：
进入网站后看到如下页面：
点击“立即安装”，可以看到如下界面：
建议选择“AI 安装”，点击“复制安装指令给 AI”，然后到 IDE 的 AI 对话界面，把复制的内容发给 AI 就可以。
安装过程可能需要安装一些配套环境，根据 AI 提示操作就可以，主要就是需要安装 Node.js，你也可以打开下方地址先行下载和安装，这样 AI 执行过程当中会顺畅很多。
四、启动 Axhub Make
AI 执行完成之后，你会在电脑桌面看到如下程序：
双击打开，程序会通过终端运行，首次打开需要下载一些东西，所以时间长一点。
运行完成之后，会自动打开浏览器进入项目，如果浏览器没有正常打开，可以复制终端中的地址在浏览器中打开，项目打开后，会在浏览器中看到如下界面：
至此，Axhub Make 项目就启动完成了。
五、创建项目
在看到上图的界面之后，就可以开始用 Axhub Make 来创建你的原型项目了，你可以选择“新建项目”，但这种方式需要下载客户端包和各种依赖，时间比较久，我比较推荐“选择已有项目”，但首先你得先下载客户端包，建议点击“备用下载”，速度比较快。
下载完成之后，你会得到如下压缩包：
这个就是 Axhub Make 的客户端包，也可以理解为项目模板，接下来将该压缩包解压到你想存放原型的目录位置，比如我这里将我的项目放在如下目录中：D:\Projects\Hello World
解压完成之后，回到 Axhub Make 网页，点击“选择已有项目”：
在弹出的弹窗中进入到项目目录（D:\Projects\Hello World），然后点击“添加项目”：
项目打开之后，会看到如下页面：
左上角双击项目名称可以重新命名项目，然后点击页面中的“启动客户端”，首次启动需要安装依赖，所以需要一点时间，启动完成之后，就可以看到如下页面：
作者在这里面放了一个教程，不过在我看来更多是项目能力的介绍，很多人看了还是不知道怎么用，所以你也可以选择不看，这里我就先删掉。
六、画原型
前面花了相当长的步骤完成了安装和部署，到这里才真正能够使用 Axhub Make 进行作业，不过前面都是一次性工作，后续有新的项目，就按照以上第五步进行操作即可。
很多人到了这一步会无从下手，不知道怎么弄，接下来还是跟我一步一步来操作。
首先鼠标悬停到左上角的“打开 AI”按钮，点击下拉箭头，选择“在本地应用打开”，其实这里就是打开 IDE，你用哪个 IDE 就选择哪个。
打开 IDE 会自动加载该项目：
接下来打开 AI 对话界面，然后输入你的需求发送给 AI：
AI 执行完成之后，回到 Axhub Make 页面刷新一下，就可以看到页面原型：
七、改原型
传统用 AI 改原型，需要告诉 AI 要改哪里，怎么改，很麻烦，Axhub Make 提供了一种更方便的方法。
点击顶部“批注”，进入批注页面：
在批注页面中，鼠标悬停在任意的页面元素点击后，可以在此填写需要修改成什么样子，然后ctrl+回车确认。
这个时候可以看到页面有一个标注点：
此时点击顶部的“复制提示词”，到 IDE 中发送给 AI，提示词中自动生成好了需要修改的位置以及修改的内容：
AI 执行完成后，页面会自动刷新。
八、写标注
这个页面太简单了，我生成一个登录页面来演示这个功能。
一个一个写标注，效率太低，我们可以直接让 AI 根据理解对页面的各个元素进行标注，再对不符合的标注进行修改或删除。
先进入“批注”页面，不要选择具体元素，而是在整体页面上点击，在弹窗中输入“/”，在弹出的列表中选择“原型标注”，这是 Axhub Make 提供的技能，你可以告诉 AI 先对页面元素进行整体标注。
确认后“复制提示词”发送给 AI：
AI 执行完成之后，回到页面就可以看到各个元素的标注信息：
怎么样，跟 Axure 很相似吧，加了标注信息之后，页面右侧会出现一个小工具栏，点击第一个图标可以看到需求说明文档。
如果你想修改标注和需求文档，可以参考第七步对标注或文档内容进行标注后发给 AI 修改。
九、标注状态
Axhub Make 的标注功能可以对某个元素的区块设置不同的状态，点击状态切换到对应的元素样式，与 Axure 的动态面板有点相似。
接下来我给登录按钮添加一个标注状态演示一下效果，让 AI 修改完成之后，点开登录按钮的标注，可以看到多了一个状态选项，点击不同状态可以看到登录按钮的不同场景下的样式：
好了，看到这里，你应该就掌握了怎么用 Axhub Make 画原型、改原型、写标注、写文档，我觉得掌握这几个用法，就可以让 Axhub Make 更好服务于产品经理的日常工作，其他功能各位可以自行探索，也可以在本文留言区相互沟通。
以上便是本文的全部内容，感谢各位阅读。
题图来自Unsplash，基于 CC0 协议。
🔥 热词：#Axhub · #Vibe · #Coding · #AI · #Make · #画原型照进现实 · #我已经打算完全放弃 · #Axure