Skill: 15910701838/axure-prototype-generator (version 1.2.1)

--- name: axure-prototype-generator description: Axure 原型代码生成器 - 输出 JavaScript 格式 HTML 代码，支持内联框架直接加载可交互原型。 tags: ["axure", "prototype", "html", "javascript", "原型", "生成器", "UI", "设计"] status: stable version: 1.2.1 author: Jarvis-OC downloads: 172+ rating: 1 --- # Axure 原型生成器 🎨 **172+ 下载 | 持续更新中** **输入需求 → 输出 Axure 可用代码 → 1 分钟完成原型** --- ## 🎯 核心功能 ### 为什么选择 Axure 原型生成器？ | 特性 | 传统方式 | 使用本技能 | |------|----------|------------| | 时间成本 | 2-4 小时/页面 | 1 分钟/页面 | | 技术门槛 | 需要设计基础 | 会打字即可 | | 修改成本 | 重新绘制 | 重新生成 | | 交互实现 | 手动配置 | 自动生成 | ### 核心优势 - ✅ **Axure 兼容格式** - 输出 javascript:前缀 + document.writeln() 格式，完美适配 Axure 内联框架 - ✅ **20+ 种模板** - Dashboard/后台管理/股票监控/电商/表单/列表/图表等 - ✅ **完整交互支持** - 按钮点击/数据刷新/图表展示/表单验证/页面跳转 - ✅ **ECharts 集成** - 柱状图/折线图/饼图/雷达图等数据可视化 - ✅ **响应式布局** - 自适应桌面/平板/移动端 - ✅ **中国化设计** - 红涨绿跌/中文排版/本地化组件 --- ## 🚀 使用方法 ### 安装 ```bash clawhub install axure-prototype-generator ``` ### Axure 使用步骤（推荐） #### 步骤 1: 添加内联框架 1. 打开 Axure RP 10 或 11 2. 从左侧组件库拖入"内联框架"到画布 3. 调整大小（建议 1200x800 或更大） #### 步骤 2: 粘贴代码 1. 选中内联框架 2. 右侧属性面板 → "链接到 URL" 3. 选择"JavaScript"选项卡 4. 复制我生成的完整代码 → 粘贴 → 确定 #### 步骤 3: 预览 1. 按 F5 或点击"预览"按钮 2. 内联框架会显示可交互页面 3. 所有按钮、图表、数据都可以正常交互 ### 代码格式示例 ```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: 股票监控面板 **用户输入**: ``` 生成一个股票监控页面，包含持仓概览、实时价格、预警列表，Axure 用 ``` **AI 输出**: - 持仓概览卡片（总市值、盈亏、收益率） - 实时价格表格（代码、名称、现价、涨跌） - 预警列表（预警类型、触发时间、处理状态） - 红绿涨跌颜色（中国习惯） **效果预览**: ``` ┌─────────────────────────────────────────┐ │ 📊 股票监控面板 │ ├─────────────────────────────────────────┤ │ 持仓概览 │ │ 总市值：¥125,680 🔴 +2.3% │ │ 盈亏：+¥8,450 │ ├─────────────────────────────────────────┤ │ 实时价格 │ │ 代码 名称 现价 涨跌 │ │ 600362 江西铜业 65.50 🔴 +15.0% │ │ 601318 中国平安 70.50 🔴 +6.8% │ ├─────────────────────────────────────────┤ │ 预警列表 │ │ 🚨 江西铜业 盈利 15% 10:30 待处理 │ │ ⚠️ 恒生医疗 RSI 超卖 11:15 已查看 │ └─────────────────────────────────────────┘ ``` ### 示例 2: 后台管理系统 **用户输入**: ``` 生成后台管理系统，有用户列表、角色管理、权限设置，Axure 用 ``` **AI 输出**: - 左侧导航栏（用户管理、角色管理、系统设置） - 右侧内容区（表格 + 操作按钮） - 弹窗表单（新增/编辑用户） - 权限树形选择器 ### 示例 3: 数据可视化大屏 **用户输入**: ``` 生成数据可视化大屏，有柱状图、折线图、饼图，深色主题，Axure 用 ``` **AI 输出**: - 深色背景 (#0a1f3d) - ECharts 柱状图（月度销售数据） - ECharts 折线图（趋势分析） - ECharts 饼图（占比分布） - 响应式布局 ### 示例 4: 电商商品列表 **用户输入**: ``` 生成电商商品列表页，有筛选、排序、分页，Axure 用 ``` **AI 输出**: - 筛选栏（价格区间、品牌、分类） - 排序选项（销量、价格、新品） - 商品网格（图片、名称、价格、销量） - 分页组件 --- ## 🎨 支持模板（20+ 种） ### 📊 数据看板类 | 模板 | 适用场景 | 特点 | |------|----------|------| | Dashboard | 数据总览 | 多卡片布局 + 图表 | | 股票监控 | 金融交易 | 实时数据 + 预警 | | 销售大屏 | 业务展示 | ECharts 图表 + 动画 | | 运营后台 | 数据分析 | 多维度筛选 + 导出 | ### 🗂️ 管理系统类 | 模板 | 适用场景 | 特点 | |------|----------|------| | 后台管理 | 通用后台 | 侧边导航 + 表格 | | 用户管理 | 用户系统 | 增删改查 + 权限 | | 订单管理 | 电商系统 | 状态流转 + 筛选 | | 内容管理 | CMS 系统 | 富文本 + 分类 | ### 📱 页面组件类 | 模板 | 适用场景 | 特点 | |------|----------|------| | 登录页 | 用户认证 | 表单验证 + 记住我 | | 列表页 | 数据展示 | 分页 + 搜索 + 排序 | | 详情页 | 信息展示 | 标签页 + 操作按钮 | | 表单页 | 数据录入 | 多步骤 + 验证 | ### 🛒 电商类 | 模板 | 适用场景 | 特点 | |------|----------|------| | 商品列表 | 电商首页 | 网格布局 + 筛选 | | 商品详情 | 商品页 | 图片轮播 + 规格 | | 购物车 | 结算流程 | 数量调整 + 优惠 | | 订单确认 | 支付流程 | 地址选择 + 发票 | --- ## 💰 定价说明 ### 🔐 授权码验证 本技能已启用授权码验证系统。使用付费功能前需要先激活授权码。 **如何获取授权码：** 1. 联系 @jarvis-oc 或访问授权管理面板 2. 选择技能和付费套餐 3. 完成支付后获得授权码（格式：`JARVIS-XXXX-XXXX-XXXX-XXXX`） 4. 在技能中激活即可使用 **如何激活：** ``` 激活授权码：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. 🆓 免费生成 1 个基础页面 2. 📚 赠送《Axure 原型设计指南》PDF 3. 💬 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*


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (HIGH)