WorkBuddy（Claw）原型设计之Axhub实战篇
Axhub布道篇，单击此处跳转
准备工作
Codebuddy_CN、WorkBuddy（Claw）：国内版本，积分可以通过官方平台的活动领取，也支持直接购买，非常灵活。
谷歌系浏览器：Chrome、Quark、Edge（只要是基于Chromium开源项目的浏览器都能兼容）。
Axhub插件：获取地址是 https://axhub.im/chrome/，记得从这里下载。
集成飞书
这一步是关键。你需要参考官方文档，配置好飞书的机器人。完成之后，最爽的部分来了：你可以直接在飞书聊天窗口里发起任务。机器人会自动调用WorkBuddy（特别是它的Claw模式）来分析你的需求，拆解任务，并最终生成一个可以直接在网页里预览的结果。
飞书客户端集成WorkBuddy的详细步骤，可以参考官方传送门：https://www.codebuddy.cn/docs/workbuddy/Feishu-Guide。
使用方式
WorkBuddy直接生成HTML网页
在飞书里找到你集成的WorkBuddy机器人，然后就像跟同事聊天一样，用自然语言提需求就行。比如，你可以这么说：
“创建1个手机登录页面，实现多种安全验证的功能交互，最终生成1个可交互的html网页并自动打开”
消息发送后，对话框里很快就会返回文字处理结果，紧接着就会开始生成网页。效果可以看下面两张图：
想让生成的结果更贴合你的心意？有个小技巧：从“行业、受众、功能、风格”这四个维度把需求描述得更具体一些。比如，你可以继续在飞书或WorkBuddy里补充提问：
“创建1个手机登录页面，toG业务的政务系统使用，支持政务网统一身份认证一键进入，腾讯系风格，实现多种安全验证的功能交互，最终生成1个可交互的html网页并自动打开”
这样一来，生成的页面就会更有针对性了，看下图的效果：
网页生成之后，产品经理可以直接把它交给前端工程师进行修改，或者干脆就用在项目的前端工程里。当然，你也可以把网页复制到Figma或Axure（通过Axhub托管），然后分享给团队进行协作评审和修改。
Axhub插件网页转Figma或Axure
这个功能特别适合“拿来主义”。首先，在浏览器的开发者模式下安装好Axhub的crx插件。然后，当你看到一个设计不错的网页时，直接打开它，点击浏览器工具栏的Axhub插件，选择“复制到Figma”或“复制到Axure”。之后，切换到对应的设计工具里直接粘贴，一个高保真的页面原型就出来了，你可以在其基础上进一步设计其他页面。
这里需要注意两点准备工作：
Figma：需要提前安装好Figma桌面客户端，并且在复制操作前，确保客户端已经打开。
Axure：需要安装RP11 3743或以上版本，同样，执行复制前也要先打开Axure客户端。
复制到Axure
来看看具体操作步骤：
页面元素就成功复制到Axure画布中了，非常方便：
复制到Figma
操作流程基本一致：
在Figma中粘贴后的效果：
Figma复制到Axure
更厉害的是，你甚至可以在Figma和Axure之间直接搬运。只需要在Figma客户端安装好Axure插件，然后选中你想复制的元素（或者全选），点击插件复制到剪切板，再切换到Axure的画布中直接粘贴就行。
CodeBuddy与Figma直接联动
这种方式把设计和开发更紧密地结合了起来。CodeBuddy可以根据你上传的“图片+文字需求描述”，或者直接根据打开的Figma设计稿页面，来生成对应的HTML网页代码。
首先上传图片或打开Figma页面：
然后CodeBuddy就会根据内容生成代码，右侧会实时显示进度：
这里有个关键操作：提前在CodeBuddy中打开Figma页面后，你可以右键点击页面中的具体元素，选择“添加到对话”。这样一来，CodeBuddy在生成代码时就能更准确地理解你的意图了，右侧的进度显示也会实时更新。