extract-axure-data

Name: extract-axure-data
Author: lintendo

github.com/lintendo设计与 UI137194 次安装3 天前更新

代码仓库

关于 extract-axure-data

用于从 Axure 原型提取结构化数据的工具，适合页面重建、内容分析和设计审查。它可直接解析静态页面数据，并借助 Playwright 获取截图与设计令牌。

主要功能

01提取页面层级与站点地图
02导出截图和设计令牌
03采集交互、注释与页面文本
04按页面筛选导出内容
05支持复用已登录 Chrome 会话

适用场景

01将原型重建为网页
02检查原型页面结构与内容
03分析设计令牌与交互行为
04补充采集动态面板状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/lintendo/axhub-skills --skill extract-axure-data

安装后在 Claude Code 中输入/extract-axure-data确认已加载。

附带文件scripts/extract.mjsscripts/routing.mjs

详细介绍

提取 Axure 数据

从 Axure 原型中提取结构化数据，用于页面重建、内容分析或设计评审。脚本会自动安装依赖项——只需提供 URL。

适用场景

用户分享 Axure 原型 URL，并希望提取或重建原型
用户要求克隆、重建或分析线框图/原型
用户提到 AxShare、Axure Cloud，或包含 start.html#p= 或 start.html?id=...&p=... 的原型 URL
用户希望从原型中获取设计令牌、截图或交互数据

工作原理

Axure 会将页面数据存储在静态 JS 文件（data/document.js、files/{page}/data.js）中。脚本会直接在 Node.js 中解析这些文件，无需浏览器——速度快，适用于站点地图、交互和注释。截图和设计令牌需要渲染，因此 Playwright 会启动 Chromium 实例。对于通过 start.html?id=...&p=... 路由的 Axure 预览 URL，脚本会先解析渲染后的框架 URL，以便从正确的页面资源目录中提取页面数据、截图和文本。

快速开始

从此技能目录运行 scripts/extract.mjs 中的提取脚本。

# Basic extraction — screenshot + design tokens (default)
node scripts/extract.mjs <AXURE_URL> --all

# Full extraction — add interactions, annotations, page text
node scripts/extract.mjs <AXURE_URL> --all --advanced

# Specific pages only
node scripts/extract.mjs <AXURE_URL> --pages login,dashboard

首次运行时会自动将 Playwright + Chromium 安装到 ~/.cache/axure-extractor/。这需要 1-2 分钟，只会执行一次。

参数

标志	作用	默认值
`<url>`	Axure 原型 URL（必需）	—
`--all`	处理所有页面	仅第一页
`--advanced`	添加交互、注释和页面文本	关闭
`-o DIR`	输出目录	`./axure-export`
`--pages P1,P2`	仅处理指定页面	—
`--no-screenshot`	跳过截图	开启截图
`--no-headless`	显示浏览器窗口	无头模式
`--connect-cdp URL`	连接到正在运行的 Chrome（用于身份验证）	—
`--verbose`	输出详细日志	关闭

输出结构

axure-export/
├── sitemap.json           # Page tree and hierarchy (always produced)
└── pages/{pageName}/
    ├── screenshot.png      # Page screenshot
    ├── theme.json          # Design tokens (colors, fonts, spacing, radii)
    ├── data.json           # Page metadata and diagram        (--advanced)
    ├── notes.json          # Component annotations            (--advanced)
    ├── interactions.json   # Event map (clicks, navigations)  (--advanced)
    └── content.md          # Rendered page text as Markdown   (--advanced)

推荐工作流：页面重建

如果目标是将 Axure 原型重建为真实网页，请采用两步法。之所以拆分步骤，是因为截图 + 主题令牌足以实现约 80% 的视觉还原度，而其他数据只在微调细节时有帮助——如果基本结果已经足够好，一开始就提取全部数据会浪费时间。

步骤 1 — 基本提取：

node scripts/extract.mjs <URL> --pages <target>

使用 screenshot.png 作为视觉参考，并使用 theme.json 获取精确的颜色、字体和间距。构建页面。

步骤 2 — 按需优化：

node scripts/extract.mjs <URL> --pages <target> --advanced

如果缺少交互或注释有误，其他文件（interactions.json、notes.json、content.md）会提供修正所需的详细信息。

需要身份验证的原型

某些 Axure 原型需要登录（AxShare、企业 SSO）。有两种方式：

连接到现有 Chrome 会话（推荐——可复用 Cookie）：

macOS：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Windows：

start chrome --remote-debugging-port=9222

然后在该 Chrome 窗口中登录并运行：

node scripts/extract.mjs <URL> --all --connect-cdp http://localhost:9222

显示浏览器窗口（提取期间手动登录）：

node scripts/extract.mjs <URL> --all --no-headless

依赖项安装

脚本会在首次运行时自动安装依赖项。如果安装失败：

# Manual install
cd ~/.cache/axure-extractor   # macOS/Linux
# or: cd %USERPROFILE%\.cache\axure-extractor   (Windows)

npm install playwright
npx playwright install chromium

# If Chromium download is slow (e.g. behind GFW):
PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright install chromium

如果完全无法安装 Playwright，脚本会优雅降级——仍会提取站点地图、页面数据、注释和交互（所有不需要浏览器的内容），但会跳过截图和主题令牌。

输出数据格式

theme.json

从计算样式中提取的设计系统令牌：

{
  "colors": {
    "background": [{"value": "rgb(255,255,255)", "count": 42, "tags": ["div"]}],
    "text": [{"value": "rgb(51,51,51)", "count": 28, "tags": ["p","span"]}],
    "border": [{"value": "rgb(221,221,221)", "count": 12}]
  },
  "typography": {
    "families": [{"value": "\"PingFang SC\", sans-serif", "count": 56}],
    "textStyles": [{"size": "14px", "lineHeight": "22px", "weight": "400", "count": 20}]
  },
  "spacing": [{"value": "16px", "count": 15}],
  "radius": [{"value": "4px", "count": 8}]
}

notes.json

在 Axure 中编写的组件注释：

{
  "page": {"description": "User login page"},
  "id-username-input": {"description": "Username field", "placeholder": "Enter username"},
  "id-submit-btn": {"description": "Login button", "action": "Submit form"}
}

interactions.json

在 Axure 交互设计器中定义的事件映射：

{
  "onClick": {"targetPage": "dashboard", "action": "navigate"}
}

Playwright 查缺补漏

导出数据基于静态 JS 解析和快照采集，某些动态内容（交互状态、条件面板、动态面板切换等）可能不完整。可使用 Playwright CLI 回到原型页面补充采集。

# 打开 Axure 原型
playwright-cli open <AXURE_URL>
playwright-cli snapshot

# 点击交互元素查看动态面板切换
playwright-cli click e12
playwright-cli screenshot --filename=panel-state-2.png

# 获取元素的精确样式
playwright-cli eval "el => getComputedStyle(el).cssText" e5

playwright-cli close

完整命令参考：Playwright CLI 官方技能文档

典型补充场景

场景	Playwright 做什么
动态面板状态	点击触发切换后截图
条件显示/隐藏	触发条件后采集 DOM
交互动画	录制交互过程
需要登录的原型	复用已登录的 Chrome 会话
Axure 母版内容	进入页面后完整采集

Troubleshooting

Problem	Fix
`HTTP 404: .../data/document.js`	URL isn't an Axure prototype, or wrong base URL
`Sitemap 提取失败`	Check URL is reachable: `curl -I <url>`
Screenshots are blank	Page needs longer to render — try `--no-headless` to watch
Need login	Use `--connect-cdp` (see Authenticated prototypes above)
Playwright install fails	Manual install, or set `PLAYWRIGHT_DOWNLOAD_HOST` for mirror

支持 Markdown

登录后评论