axure-prototype-generator
Axure 原型代码生成器 - 输出 JavaScript 格式 HTML 代码，支持内联框架直接加载可交互原型。
About this skill
The Axure Prototype Generator is an AI agent skill designed to dramatically accelerate the UI/UX design process. By taking natural language descriptions as input, it outputs Axure-compatible JavaScript code embedded with HTML, CSS, and interactive elements. This code can be directly pasted into an Axure RP inline frame, instantly rendering a functional and interactive prototype. This skill is ideal for designers, product managers, and developers who need to quickly visualize concepts, test user flows, or create detailed mockups without spending hours on manual design or coding. It supports a variety of common UI patterns, including dashboards, admin panels, e-commerce layouts, forms, lists, and integrates ECharts for complex data visualizations. The generated prototypes are responsive, complete with interactive buttons, data refreshes, and form validations. The primary use case is rapid prototyping and concept validation within Axure RP. It significantly reduces the time and technical expertise traditionally required to build complex interactive prototypes, enabling teams to iterate faster and bring ideas to life with minimal effort. Its 'Chinese design' features, such as red-up/green-down for stock charts and localized components, cater specifically to an Asian market context.
Best use case
This skill is primarily for UI/UX designers, product managers, and front-end developers who need to rapidly create interactive Axure prototypes without extensive manual design work or coding. It significantly accelerates the ideation and validation phases of product development by automating the generation of complex UI mockups based on simple text prompts.
Axure 原型代码生成器 - 输出 JavaScript 格式 HTML 代码，支持内联框架直接加载可交互原型。
A JavaScript-formatted HTML code snippet that, when pasted into an Axure inline frame, displays a fully interactive and responsive UI prototype matching the user's requirements.
Practical example
Example input
生成一个股票监控页面，包含持仓概览、实时价格、预警列表，Axure 用
Example output
JavaScript code containing HTML for a stock monitoring panel with portfolio overview, real-time price table, and an alert list, ready for Axure RP integration.
When to use this skill
- When you need to quickly generate interactive Axure prototypes from text descriptions.
- To create UI/UX mockups for dashboards, admin panels, e-commerce, or data visualization.
- To reduce design time and technical barriers for prototyping complex user interfaces.
- When requiring Axure-compatible JavaScript HTML code for embedded prototypes with full interactivity.
When not to use this skill
- When high-fidelity, production-ready front-end code is required (this is for prototypes, not final code).
- If you are not using Axure RP for your prototyping needs.
- For backend development or non-UI related tasks.
- When a completely custom, pixel-perfect design beyond the scope of available templates is needed.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/axure-prototype-generator/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How axure-prototype-generator Compares
| Feature / Agent | axure-prototype-generator | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
Axure 原型代码生成器 - 输出 JavaScript 格式 HTML 代码，支持内联框架直接加载可交互原型。
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
AI Agent for Product Research
Browse AI agent skills for product research, competitive analysis, customer discovery, and structured product decision support.
AI Agent for SaaS Idea Validation
Use AI agent skills for SaaS idea validation, market research, customer discovery, competitor analysis, and documenting startup hypotheses.
SKILL.md Source
# 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*Related Skills
ui-designer
Design beautiful interfaces using 16+ design systems including Material You, Fluent Design, Apple HIG, Ant Design, Carbon Design, Shopify Polaris, Minimalism, Glassmorphism, Neo-Brutalism, Neumorphism, Skeuomorphism, Claymorphism, Swiss Design, and Atlassian Design. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG).
Invoice Generator
Creates professional invoices in markdown and HTML
Incident Postmortem Generator
Generate blameless incident postmortems from raw notes, Slack threads, or bullet points.
Partnership Agreement Generator
Generate comprehensive partnership agreements, joint venture frameworks, and strategic alliance documents for B2B relationships.
Employee Onboarding Generator
Build a structured 90-day onboarding plan for any role. Covers pre-boarding, Day 1, Week 1, 30/60/90-day milestones, buddy assignments, and success metrics.
Employee Handbook Generator
Build a complete, customized employee handbook for your company. Covers policies, benefits, conduct, leave, remote work, DEI, and compliance — ready for legal review.
IT Disaster Recovery Plan Generator
Build production-ready disaster recovery plans that actually get followed when things break.
Compliance Audit Generator
Run internal compliance audits against major frameworks without hiring a consultant.
API Documentation Generator
Generate production-ready API documentation from endpoint descriptions. Outputs OpenAPI 3.0, markdown reference docs, and SDK quickstart guides.
Annual Report Generator
Build a complete annual business report from raw data. Covers financial performance, operational metrics, strategic highlights, and forward-looking guidance.
daily-report-generator
Automatically generate daily/weekly work reports from git commits, calendar events, and task lists. Use when you need to quickly create professional work reports without manual effort.
hr-policy-generator
Comprehensive HR policy development covering attendance, time-off, overtime, remote work, and compliance. Generates structured policy documents, legal checklists, exception handling frameworks, and employee communication plans tailored to company size, work arrangement, and jurisdiction.