Claude Code Axure Reader Skill

一键安装，Claude Code 直接读取 Axure 原型 — 支持 macOS / Windows / Linux

快速安装

| 平台 | 命令 | |------|------| | macOS | npm install -g @panda_neo/axure-reader | | Linux | npm install -g @panda_neo/axure-reader | | Windows | npm install -g @panda_neo/axure-reader |

安装后自动完成 skill 注册，在 Claude Code 中直接使用 /axure-reader。

无需全局安装也可以一键运行：

npx @panda_neo/axure-reader

更新

npm update -g @panda_neo/axure-reader

前置条件

| 软件 | 版本 | 说明 | |------|------|------| | Node.js | ≥ 16 | 运行安装脚本 | | Google Chrome | 近两年版本 | 读取已登录的 AxShare 页面 | | Claude Code | 最新版 | AI 编程工具 |

Chrome Setup (one-time)

⚠️ Required for the skill to read prototypes. Only needs to be done once.

macOS (Recommended — JXA, no Chrome restart needed)

| Step | Action | |------|--------| | Step 1 | Press ⌘ Cmd + ⌥ Option + I in Chrome (opens DevTools, makes Developer menu visible) | | Step 2 | Menu bar: View → Developer → ✅ Check "Allow JavaScript from Apple Events" |

💡 Set once, works forever — even after Chrome restarts.

Windows / Linux (CDP)

1. Fully close Chrome (all windows)
2. Restart with debugging port:

| OS | Command | |----|---------| | macOS | open -a "Google Chrome" --args --remote-debugging-port=9222 | | Linux | google-chrome --remote-debugging-port=9222 | | Windows | "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 |

Usage

⚠️ Prerequisite: The prototype must be open in Chrome

The skill reads from your local Chrome session. If the prototype isn't open, Claude will open it for you (macOS) or ask you to open it manually.

1. Open your AxShare prototype in Chrome (make sure you're logged in)
2. In Claude Code, type:

/axure-reader

Or just say:

Read this prototype: https://your-project.axshare.com/#id=example&p=demo_page

Claude will automatically:

• ✅ Check Chrome setup (Developer menu + JXA/CDP)
• ✅ Open the prototype if it's not already in Chrome
• ✅ Extract page DOM with the best available method
• ✅ Fetch Axure project structure (document.js)
• ✅ Analyze all screens, components, interaction logic
• ✅ Output: page structure, component list, interaction rules, design tokens, state flow

原理

┌─────────────────────────────────────────────────────┐
│  用户 Chrome (已登录 Axure)                          │
│  ┌─────────────────────────────────────────────┐    │
│  │  AxShare Shell                               │    │
│  │  ┌── mainFrame iframe ──────────────────┐   │    │
│  │  │  Axure rendered prototype             │   │    │
│  │  │  • DOM elements with positions        │   │    │
│  │  │  • Annotation blocks (交互逻辑)        │   │    │
│  │  │  • document.js + data.js sources      │   │    │
│  │  └──────────────────────────────────────┘   │    │
│  └─────────────────────────────────────────────┘    │
│         ↓                                            │
│  macOS: JXA (osascript)  ─── execute JS ──────┐     │
│  Win/Linux: CDP (chrome-cdp.mjs) ── WebSocket ─┘     │
└─────────────────────────────────────────────────────┘
                    ↓
        Claude Code 解析 & 输出
                    ↓
     ┌──────────────────────────────┐
     │  📱 页面结构 & 组件清单       │
     │  🔄 交互逻辑 & 状态流转       │
     │  📐 设计规范 & 样式 Token     │
     │  💡 关键业务逻辑摘要          │
     └──────────────────────────────┘

• macOS: 通过 JXA (JavaScript for Automation) 在 Chrome 当前标签执行 JS
• Windows/Linux: 通过 Chrome DevTools Protocol (CDP) 连接并执行 JS
• 读取 #mainFrame iframe 中的 Axure 渲染 DOM
• 抓取 AxShare CDN 上的 document.js 获取项目结构

项目结构

claude-code-axure-reader/
├── package.json          # npm 包
├── cli.js                # npm bin 入口
├── install.js            # 跨平台 Node.js 安装器
├── install.sh            # macOS/Linux 一键安装脚本
├── install.ps1           # Windows PowerShell 安装脚本
├── SKILL.md              # Claude Code Skill 定义
├── README.md             # 本文件
├── scripts/
│   └── chrome-cdp.mjs    # 跨平台 CDP 提取脚本 (零依赖)
└── .gitlab-ci.yml        # CI/CD 配置

卸载

rm -rf ~/.claude/skills/axure-reader

Windows:

Remove-Item -Recurse -Force $env:USERPROFILE\.claude\skills\axure-reader

License

MIT