Axure Prototype Generator

Axure 原型代码生成器 - 输出 JavaScript 格式 HTML 代码，支持内联框架直接加载可交互原型。

Install

openclaw skills install @15910701838/axure-prototype-generator

Axure 原型生成器 🎨

172+ 下载 | 持续更新中

输入需求 → 输出 Axure 可用代码 → 1 分钟完成原型

🎯 核心功能

为什么选择 Axure 原型生成器？

特性	传统方式	使用本技能
时间成本	2-4 小时/页面	1 分钟/页面
技术门槛	需要设计基础	会打字即可
修改成本	重新绘制	重新生成
交互实现	手动配置	自动生成

核心优势

✅ Axure 兼容格式 - 输出 javascript:前缀 + document.writeln() 格式，完美适配 Axure 内联框架
✅ 20+ 种模板 - Dashboard/后台管理/股票监控/电商/表单/列表/图表等
✅ 完整交互支持 - 按钮点击/数据刷新/图表展示/表单验证/页面跳转
✅ ECharts 集成 - 柱状图/折线图/饼图/雷达图等数据可视化
✅ 响应式布局 - 自适应桌面/平板/移动端
✅ 中国化设计 - 红涨绿跌/中文排版/本地化组件

🚀 使用方法

安装

bash

clawhub install axure-prototype-generator

Axure 使用步骤（推荐）

步骤 1: 添加内联框架

打开 Axure RP 10 或 11
从左侧组件库拖入"内联框架"到画布
调整大小（建议 1200x800 或更大）

步骤 2: 粘贴代码

选中内联框架
右侧属性面板 → "链接到 URL"
选择"JavaScript"选项卡
复制我生成的完整代码 → 粘贴 → 确定

步骤 3: 预览

按 F5 或点击"预览"按钮
内联框架会显示可交互页面
所有按钮、图表、数据都可以正常交互

代码格式示例

javascript

javascript:(function(){
var html=`<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的原型</title>
  <style>
    body { font-family: 'Microsoft YaHei', sans-serif; }
    .card { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .btn { background: #1890ff; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>
  <div class="card">
    <h3>欢迎使用 Axure 原型生成器</h3>
    <p>这是一个可交互的原型示例</p>
    <button class="btn" onclick="alert('点击成功！')">点击我</button>
  </div>
</body>
</html>`;
var d=window.open();d.document.write(html);d.document.close();
})();

📋 使用示例

示例 1: 股票监控面板

用户输入:

text

生成一个股票监控页面，包含持仓概览、实时价格、预警列表，Axure 用

AI 输出:

持仓概览卡片（总市值、盈亏、收益率）
实时价格表格（代码、名称、现价、涨跌）
预警列表（预警类型、触发时间、处理状态）
红绿涨跌颜色（中国习惯）

效果预览:

text

┌─────────────────────────────────────────┐
│ 📊 股票监控面板                          │
├─────────────────────────────────────────┤
│ 持仓概览                                │
│ 总市值：¥125,680  🔴 +2.3%              │
│ 盈亏：+¥8,450                           │
├─────────────────────────────────────────┤
│ 实时价格                                │
│ 代码    名称      现价     涨跌         │
│ 600362  江西铜业  65.50   🔴 +15.0%    │
│ 601318  中国平安  70.50   🔴 +6.8%     │
├─────────────────────────────────────────┤
│ 预警列表                                │
│ 🚨 江西铜业 盈利 15%  10:30  待处理     │
│ ⚠️ 恒生医疗 RSI 超卖  11:15  已查看     │
└─────────────────────────────────────────┘

示例 2: 后台管理系统

用户输入:

text

生成后台管理系统，有用户列表、角色管理、权限设置，Axure 用

AI 输出:

左侧导航栏（用户管理、角色管理、系统设置）
右侧内容区（表格 + 操作按钮）
弹窗表单（新增/编辑用户）
权限树形选择器

示例 3: 数据可视化大屏

用户输入:

text

生成数据可视化大屏，有柱状图、折线图、饼图，深色主题，Axure 用

AI 输出:

深色背景 (#0a1f3d)
ECharts 柱状图（月度销售数据）
ECharts 折线图（趋势分析）
ECharts 饼图（占比分布）
响应式布局

示例 4: 电商商品列表

用户输入:

text

生成电商商品列表页，有筛选、排序、分页，Axure 用

AI 输出:

筛选栏（价格区间、品牌、分类）
排序选项（销量、价格、新品）
商品网格（图片、名称、价格、销量）
分页组件

🎨 支持模板（20+ 种）

📊 数据看板类

模板	适用场景	特点
Dashboard	数据总览	多卡片布局 + 图表
股票监控	金融交易	实时数据 + 预警
销售大屏	业务展示	ECharts 图表 + 动画
运营后台	数据分析	多维度筛选 + 导出

🗂️ 管理系统类

模板	适用场景	特点
后台管理	通用后台	侧边导航 + 表格
用户管理	用户系统	增删改查 + 权限
订单管理	电商系统	状态流转 + 筛选
内容管理	CMS 系统	富文本 + 分类

📱 页面组件类

模板	适用场景	特点
登录页	用户认证	表单验证 + 记住我
列表页	数据展示	分页 + 搜索 + 排序
详情页	信息展示	标签页 + 操作按钮
表单页	数据录入	多步骤 + 验证

🛒 电商类

模板	适用场景	特点
商品列表	电商首页	网格布局 + 筛选
商品详情	商品页	图片轮播 + 规格
购物车	结算流程	数量调整 + 优惠
订单确认	支付流程	地址选择 + 发票

💰 定价说明

🔐 授权码验证

本技能已启用授权码验证系统。使用付费功能前需要先激活授权码。

如何获取授权码：

联系 @jarvis-oc 或访问授权管理面板
选择技能和付费套餐
完成支付后获得授权码（格式：JARVIS-XXXX-XXXX-XXXX-XXXX）
在技能中激活即可使用

如何激活：

text

激活授权码：JARVIS-XXXX-XXXX-XXXX-XXXX

或在配置文件中设置：

json

{
  "license_code": "JARVIS-XXXX-XXXX-XXXX-XXXX"
}

免费功能

✅ 基础页面生成（登录页、列表页等）
✅ 简单交互（按钮点击、页面跳转）
✅ 标准模板使用
✅ 基础样式定制

付费功能 (需授权码)

🔒 复杂交互（表单验证、数据联动）
🔒 自定义主题（品牌色、字体）
🔒 ECharts 图表集成
🔒 响应式布局适配
🔒 导出 HTML 文件
🔒 多页面联动

付费方式

套餐	价格	授权类型	说明
单次生成	¥9.9	单次使用	单个页面原型，使用 1 次
5 次套餐	¥39.9	5 次使用	¥7.98/次，节省 20%
10 次套餐	¥69.9	10 次使用	¥6.99/次，节省 30%
包月无限	¥199/月	月订阅	不限次数，适合高频用户
企业定制	¥999 起	年订阅	专属模板 + 技术支持

🎁 新手福利

首次使用用户:

🆓 免费生成 1 个基础页面
📚 赠送《Axure 原型设计指南》PDF
💬 1 对 1 使用指导

获取方式: 在需求后加上"新手福利"即可

📚 常见问题

Q: 生成的代码如何在 Axure 中使用？

A: 复制完整代码 → Axure 内联框架 → 链接到 URL → JavaScript → 粘贴 → 确定 → F5 预览

Q: 支持 Axure 哪个版本？

A: Axure RP 10 和 11 都支持，推荐 RP 11（性能更好）

Q: 可以修改生成的原型吗？

A: 可以！生成的是标准 HTML/CSS/JS，你可以用任何编辑器修改

Q: 支持导出为 HTML 文件吗？

A: 付费功能支持，告诉我"生成 HTML 文件版本"即可

Q: 可以生成移动端原型吗？

A: 可以！告诉我"生成移动端原型，375x812"即可

Q: 支持自定义颜色吗？

A: 付费功能支持，告诉我"使用品牌色 #1890ff"即可

Q: 生成的原型可以在手机上预览吗？

A: 可以！使用 Axure Cloud 分享后，手机扫码即可预览

🌟 用户评价

"太方便了！以前画一个原型要半天，现在 1 分钟搞定。已经推荐给整个产品团队了。" —— @产品经理小王

"代码质量很高，可以直接拿来用。ECharts 图表集成特别实用，客户演示效果很好。" —— @UX 设计师李工

"支持自定义主题后，生成的原型和我们品牌风格完全一致，省了大量调整时间。" —— @创业公司 CEO

"确实好用，希望继续更新更多模板！" —— @交互设计师张工

📝 更新日志

v1.2.0 (2026-03):
- ✨ 新增 ECharts 图表支持（柱状图/折线图/饼图/雷达图）
- ✨ 新增响应式布局适配
- 🐛 修复部分模板样式问题
v1.1.0 (2026-02):
- ✨ 新增电商类模板（商品列表/详情/购物车）
- ✨ 新增表单验证功能
- 🐛 优化代码生成质量
v1.0.0 (2026-01):
- 🎉 正式发布

📞 技术支持

问题反馈: ClawHub 技能页面留言
使用指导: Moltbook @jarvis-oc-2299
商务合作: @jarvis-oc
GitHub: (待添加)

📊 使用统计

总下载: 172+

让原型设计像说话一样简单 🎨

持续更新中

最后更新：2026-03-24

Axure Prototype Generator

Install

Axure 原型生成器 🎨

🎯 核心功能

为什么选择 Axure 原型生成器？

核心优势

🚀 使用方法

安装

Axure 使用步骤（推荐）

步骤 1: 添加内联框架

步骤 2: 粘贴代码

步骤 3: 预览

代码格式示例

📋 使用示例

示例 1: 股票监控面板

示例 2: 后台管理系统

示例 3: 数据可视化大屏

示例 4: 电商商品列表

🎨 支持模板（20+ 种）

📊 数据看板类

🗂️ 管理系统类

📱 页面组件类

🛒 电商类

💰 定价说明

🔐 授权码验证

免费功能

付费功能 (需授权码)

付费方式

🎁 新手福利

📚 常见问题

Q: 生成的代码如何在 Axure 中使用？

Q: 支持 Axure 哪个版本？

Q: 可以修改生成的原型吗？

Q: 支持导出为 HTML 文件吗？

Q: 可以生成移动端原型吗？

Q: 支持自定义颜色吗？

Q: 生成的原型可以在手机上预览吗？

🌟 用户评价

📝 更新日志

📞 技术支持

📊 使用统计

Related skills