这篇记一次很小的尝试：用 WorkBuddy 一句话生成一个政务系统的手机登录页，再用 Axhub 这个免费浏览器插件一键“复制到 Figma”。说在前面——我连一个小方向都算不上完整跑通：Figma 里拉了几个 Tab 切换的 prototype 连线算一步，再往下（Figma 里改色/改文案/复杂动效、Figma 回 HTML、闭环）全都没试。这篇就是把“触发 → 看到结果”这一小段如实记下来。

做了十年 B 端产品，原型这一段一直是重复劳动的重灾区。正常流程是：需求理清楚 → 我在 Axure 里拖组件画原型 → 把原型丢给设计 → 设计在 Figma 里照着重画一版高保真 → 开发再照着设计稿写代码实现一遍。同一条登录页，来回倒三遍。

我心里一直有个念头：这中间“需求到可交互原型”那一段，AI 能不能替我做了？如果 AI 一句话能吐出接近上线质感的高保真页面，设计同学在它底子上改就行，不用从零画。再进一步，如果这个 HTML 能直接进 Figma、改完还能回得来，那当然更好——但那是后面的事，这次先试第一步。

这次拿一个政务系统的手机登录页开刀。选这个有两个原因：一是政务、内部系统这类页面标准化程度高，登录页的套路相对固定，AI 生成质量稳；二是我正好在梳理这类页面的设计规范，想顺手验证 AI 能不能当个起手。

注意，这段不是我自己写的需求，是当时从一门网上公开课里学的，我原样复制进去的

WorkBuddy 接住这句话，一分多钟（1m41s）出活，吐出来一个 

，35KB、七百多行，单文件纯前端，浏览器打开就能跑。它还顺手把“功能说明”列了出来：三种登录通道（统一认证/账号登录/短信登录），多种安全验证（滑块拖拽、图形验证码、短信 60s 倒计时、登录 loading + 成功弹窗），视觉风格走腾讯系蓝色调（#0A5ED6 主色）+ 扁平圆角卡片 + 手机外框预览。我第一反应是“这玩意儿真能用”——不是方框线框图，是真的能点的。

默认进来是“统一认证”页。政务蓝渐变顶栏 + 居中手机外框，按钮一点会弹“正在连接认证中心”的握手流程，再进到选核验方式的步骤。

点顶部三个 Tab 能切换登录方式，切换时有淡入动画。账号登录这页最让我意外：

账号 + 密码 + 图形验证码 + 滑块安全验证，全套。这些交互我以前在 Axure 里得拖半天组件、调半天条件逻辑。

图形验证码点一下会刷新换字符、带随机倾斜角；滑块按住拖到最右边，松手后整条变绿、提示“验证通过”，没拖到底会抖一下弹回去。这些细节它都写出来了，不是我事后补的。

滑块拖到头变绿。短信登录页还有 60 秒倒计时、协议勾选校验，“其他方式”里还能跳扫码。

扫码登录弹窗，画了个 SVG 二维码占位，配“政务通 App 扫码登录”的引导文案。

整个页面状态栏、品牌徽标、底部 ICP 备案位、Toast 提示、登录成功弹窗都有。我盯着翻了几遍的体感是：这类标准化程度高的页面，AI 生成的成品已经够拿去跟业务对需求、给设计打底了——当然，这是这次小尝试的直观感受，没做系统对比，不敢说“到线”那么满。

三、用 Axhub 把 HTML 复制到 Figma：试了一下

触发方式很简单：浏览器打开这个 HTML，点 Axhub 浏览器插件（免费版，Ashuh V2.5.12）的“设计页面”标签，里头有个“复制到 Figma”按钮：

Axhub 浏览器插件的“设计页面”面板，“复制到 Figma”按钮（红框里）就是触发点。一键把当前网页的 DOM 推到 Figma。

用这个“复制到 Figma”，我把这个 HTML 复制进了 Figma。复制完看到的是可编辑的图层，不是一张扁平的截图——这第一步是通的。

用 Axhub “复制到 Figma” 之后，在 Figma 里的画面（Prototype 模式）。三个手机视图并排（统一认证/账号登录/短信登录），可编辑图层。我试着给三个手机拉了 Tab 切换的 prototype 交互连线（蓝色贝塞尔线），Layers 面板能看到完整的 DOM 还原（status-bar、card、Toast、Container 等节点都在）。

导进去拿到可编辑图层。我也试着在 Figma 里给三个手机视图拉了 prototype 切换连线——三个 Tab 之间连起来做交互演示（截图里能看到那几条蓝色贝塞尔线）。至于改文案、调颜色这些更细的设计调整，这次没专门试，下一步再说。

顺便补一句对比：html.to.design 我也顺手试了一下，效果基本一样——都是对当前可见页面的转换，没试出一键把 HTML 所有页面转过去。它会多出一个 component 页面；Figma 装了 html.to.design 插件能贴链接把 HTML 复刻进去。但用下来还是觉得 Axhub 一键复制更顺手、更免费好用。

四、还没往下试的部分（下一步打算做啥）

这次只跑到“用 Axhub 复制到 Figma + 拉了几个 prototype 连线”就停了。再往下其实有好几程，我都还没动手，如实列出来，不装已经验过：

这些留到下一步一项一项试，试出什么再说。小尝试阶段先把“做过的”讲清楚，比硬凑一个“闭环”的漂亮结论实在。

一句话需求→可交互政务登录页HTML

HTML→用Axhub复制到Figma，得到可编辑图层

Figma里建了prototypeTab切换连线（改色/改文案/复杂动效没做）

小尝试环境：WorkBuddy · Figma · Axhub 浏览器插件（Ashuh V2.5.12）

文中政务登录页为浏览器实际渲染，Axhub 触发方式与 Figma 导入后画面已配图。

AI × Figma 联动的一次小尝试：用 Axhub 把一句话生成的政务登录页复制到 Figma

这篇记一次很小的尝试：用 WorkBuddy 一句话生成一个政务系统的手机登录页，再用 Axhub 这个免费浏览器插件一键“复制到 Figma”。说在前面——我连一个小方向都算不上完整跑通：Figma 里拉了几个 Tab 切换的 prototype 连线算一步，再往下（Figma 里改色/改文案/复杂动效、Figma 回 HTML、闭环）全都没试。这篇就是把“触发 → 看到结果”这一小段如实记下来

产品经理 / 需求分析师

人工智能

开发工具

前端

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

2026上云采购 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

这篇记一次很小的尝试：用 WorkBuddy 一句话生成一个政务系统的手机登录页，再用 Axhub 这个免费浏览器插件一键“复制到 Figma”。说在前面——我连一个小方向都算不上完整跑通：Figma 里拉了几个 Tab 切换的 prototype 连线算一步，再往下（Figma 里改色/改文案/复杂动效、Figma ...

AI × Figma 联动的一次小尝试：用 Axhub 把一句话生成的政务登录页复制到 Figma

AI × Figma 联动的一次小尝试：用 Axhub 把一句话生成的政务登录页复制到 Figma

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐