WorkBuddy（Claw）原型设计之Axhub实战篇

了解Axhub更多信息，点击此处跳转详情页

前期准备

Codebuddy_CN与WorkBuddy（Claw）工具：这是国内用户可使用的版本，用户可以通过参与官方活动免费获取积分，也支持直接充值购买，使用方式非常便捷灵活。

浏览器选择：推荐使用Chrome、Edge或Quark等基于Chromium内核的浏览器，确保兼容性。

安装Axhub插件：请务必从官方地址 https://axhub.im/chrome/ 下载并安装插件。

接入飞书平台

这是实现高效协同的关键一步。您需要按照官方指南，在飞书中配置好WorkBuddy机器人。配置成功后，最便捷的功能便得以实现：您可以直接在飞书聊天窗口中下达指令。机器人会自动调用WorkBuddy（特别是其Claw智能模式）来解析您的需求，拆解任务步骤，并最终生成一个可直接在浏览器中预览的交互式网页。

关于如何在飞书客户端中集成WorkBuddy的完整教程，请参考官方文档：https://www.codebuddy.cn/docs/workbuddy/Feishu-Guide。

核心使用教程

方式一：通过WorkBuddy直接生成HTML网页

在飞书中找到已添加的WorkBuddy机器人，像与同事沟通一样，用自然语言描述您的需求。例如，您可以输入：

“请创建一个手机端登录页面，需集成多种安全验证交互功能，最终生成一个可交互的HTML网页并自动打开预览。”

发送指令后，对话框会快速返回文字确认，并立即开始网页生成。具体效果可参考下方对比图：

若想使生成结果更精准，建议从“行业属性、目标用户、核心功能、视觉风格”四个维度提供更详细的描述。例如，您可以进一步补充：

“请创建一个用于ToG政务系统的手机登录页面，支持政务网统一身份认证一键登录，采用腾讯系设计风格，集成多种安全验证交互功能，最终生成可交互的HTML网页并自动打开。”

经过细化后的指令，生成的页面将更具业务针对性，效果对比如下：

生成的网页，产品经理可直接交付给前端工程师进行二次开发，或应用于实际项目的前端构建。您也可以将网页导出至Figma或通过Axhub托管到Axure中，从而方便地进行团队评审与协作修改。

方式二：使用Axhub插件将网页转为Figma/Axure原型

此功能非常适合快速获取设计灵感。首先，请在浏览器的扩展管理页面安装好Axhub的CRX插件。当您浏览到任何设计出色的网页时，只需点击浏览器工具栏中的Axhub插件图标，选择“复制到Figma”或“复制到Axure”。随后，切换至对应的设计软件中粘贴，即可获得一个高保真的页面原型，您可以基于此继续进行其他页面的延伸设计。

操作前请确保完成以下准备：

使用Figma：请提前安装Figma桌面客户端，并在执行复制操作前保持客户端处于开启状态。

使用Axure：请确保已安装Axure RP 11（版本号3743或以上），同样，在执行操作前需先行打开Axure客户端。

1. 复制网页到Axure

具体操作步骤如下：

完成后，所有页面元素将被精准复制到Axure画布中，过程十分高效：

2. 复制网页到Figma

操作流程与上述类似：

在Figma中粘贴后的呈现效果：

3. 从Figma直接复制到Axure

更进一步，您还可以实现Figma与Axure之间的元素直接迁移。只需在Figma中安装Axure官方插件，选中需要复制的图层或画板，通过插件复制到剪贴板，再切换到Axure中粘贴即可。

方式三：CodeBuddy与Figma深度联动生成代码

此模式实现了设计与开发的无缝衔接。CodeBuddy能够根据您上传的“设计截图+文字需求说明”，或者直接读取已打开的Figma设计稿文件，来生成对应的前端HTML代码。

首先，上传图片或直接在CodeBuddy中打开Figma设计稿链接：

随后，CodeBuddy将基于设计内容智能生成代码，右侧面板会实时显示代码生成进度：

关键技巧：在CodeBuddy中打开Figma页面后，您可以右键点击画布中的特定元素，选择“添加到对话”。这样，CodeBuddy在生成代码时就能更精确地理解该元素的意图，右侧的生成进度也会同步更新。