axure-prototype-generator
Axure 原型代码生成器 - 输出 JavaScript 格式 HTML 代码，支持内联框架直接加载可交互原型。
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/15910701838/axure-prototype-generatorAxure 原型生成器 🎨
172+ 下载 | 持续更新中
输入需求 → 输出 Axure 可用代码 → 1 分钟完成原型
🎯 核心功能
为什么选择 Axure 原型生成器？
| 特性 | 传统方式 | 使用本技能 |
|---|---|---|
| 时间成本 | 2-4 小时/页面 | 1 分钟/页面 |
| 技术门槛 | 需要设计基础 | 会打字即可 |
| 修改成本 | 重新绘制 | 重新生成 |
| 交互实现 | 手动配置 | 自动生成 |
核心优势
- ✅ Axure 兼容格式 - 输出 javascript:前缀 + document.writeln() 格式，完美适配 Axure 内联框架
- ✅ 20+ 种模板 - Dashboard/后台管理/股票监控/电商/表单/列表/图表等
- ✅ 完整交互支持 - 按钮点击/数据刷新/图表展示/表单验证/页面跳转
- ✅ ECharts 集成 - 柱状图/折线图/饼图/雷达图等数据可视化
- ✅ 响应式布局 - 自适应桌面/平板/移动端
- ✅ 中国化设计 - 红涨绿跌/中文排版/本地化组件
🚀 使用方法
安装
clawhub install axure-prototype-generator
Axure 使用步骤（推荐）
步骤 1: 添加内联框架
- 打开 Axure RP 10 或 11
- 从左侧组件库拖入"内联框架"到画布
- 调整大小（建议 1200x800 或更大）
步骤 2: 粘贴代码
- 选中内联框架
- 右侧属性面板 → "链接到 URL"
- 选择"JavaScript"选项卡
- 复制我生成的完整代码 → 粘贴 → 确定
步骤 3: 预览
- 按 F5 或点击"预览"按钮
- 内联框架会显示可交互页面
- 所有按钮、图表、数据都可以正常交互
代码格式示例
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+ 种）
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-15910701838-axure-prototype-generator": {
"enabled": true,
"auto_update": true
}
}
}Tags
Related Skills
opentangl
Not a code generator — an entire dev team. You write the vision, it ships the code. Autonomous builds, PRs, reviews, and merges across multiple repos. Point it at any JS/TS project and a product vision. It plans features, writes code, verifies builds, creates PRs, reviews diffs, and merges — autonomously. Manages multiple repos as one product. Use when you want to ship code without writing it. AI code generation, autonomous development, workflow automation, multi-repo orchestration, TypeScript, JavaScript, GitHub, OpenAI, Anthropic, Claude, GPT, LLM, devtools, CI/CD, pull requests, code review.
SeedFlip Dashboard Theme
Re-theme your OpenClaw dashboard with 104 curated design seeds from SeedFlip. Fonts, colors, shadows, radii. One command, instant transformation.
DeadLink
Scan websites and files for broken links with HTTP status details. Use when auditing links, finding broken URLs, validating references.
Regexr
Create, test, and learn regular expressions with live matching. Use when validating patterns, checking groups, generating regex, linting syntax.
header
Header design reference — navigation patterns, sticky headers, responsive menus, accessibility. Use when designing website headers or implementing navigation components.