extract-axure-data

Files (2)

• SKILL.md
• extract.mjs · scripts/

SKILL.md (first lines)

# Extract Axure Data

Extract structured data from Axure prototypes for page reconstruction, content analysis, or design review. The script handles dependency installation automatically — just point it at a URL.

## When to use this

- User shares an Axure prototype URL and wants to extract or rebuild it
- User asks to clone, reconstruct, or analyze a wireframe/prototype
- User mentions AxShare, Axure Cloud, or prototype URLs with `start.html#p=`
- User wants design tokens, screenshots, or interaction data from a prototype

## How it works

Axure stores page data in static JS files (`data/document.js`, `files/{page}/data.js`). The script parses these directly in Node.js without needing a browser — this is fast and works for sitemap, interactions, and annotations. Screenshots and design tokens require rendering, so Playwright launches a Chromium instance for those.

## Quick start

Run the extraction script from `scripts/extract.mjs` relative to this skill directory.

```bash
# 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
```

First run auto-installs Playwright + Chromium to `~/.cache/axure-extractor/`. This takes 1-2 minutes and happens once.

## Parameters

| Flag | What it does | Default |
|---|---|---|
| `<url>` | Axure prototype URL (required) | — |
| `--all` | Process all pages | first page only |
| `--advanced` | Add interactions, annotations, page text | off |
| `-o DIR` | Output directory | `./axure-export` |
| `--pages P1,P2` | Process only named pages | — |
| `--no-screenshot` | Skip screenshots | screenshots on |
| `--no-headless` | Show browser window | headless |
| `--connect-cdp URL` | Attach to running Chrome (for auth) | — |
| `--verbose` | Detailed logging | off |

## Output structure

```
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)
```

## Recommended workflow: page reconstruction

When the goal is to rebuild an Axure prototype as a real web page, use a two-step approach. The reason for splitting is that screenshots + theme tokens are enough for ~80% visual fidelity, and the additional data only helps when fine-tuning details — so extracting everything upfront wastes time if the basic result is already good.

**Step 1 — Basic extraction:**
```bash
node scripts/extract.mjs <URL> --pages <target>
```
Use `screenshot.png` as the visual reference and `theme.json` for exact colors, fonts, and spacing. Build the page.

**Step 2 — Refine if needed:**
```bash
node scripts/extract.mjs <URL> --pages <target> --advanced
```
If interactions are missing or annotations are wrong, the additional files (`interactions.json`, `notes.json`, `content.md`) provide the detail to fix them.

## Authenticated prototypes

Some Axure prototypes require login (AxShare, corporate SSO). Two approaches:

**Connect to an existing Chrome session** (recommended — reuses cookies):

macOS:
```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
```

Windows:
```powershell
start chrome --remote-debugging-port=9222
```

Then log in via that Chrome window and run:
```bash
node scripts/extract.mjs <URL> --all --connect-cdp http://localhost:9222
```

**Show the browser window** (manual login during extraction):
```bash
node scripts/extract.mjs <URL> --all --no-headless
```

## Dependency installation

The script auto-installs on first run. If it fails:

```bash
# 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
```

If Playwright can't be installed at all, the script degrades gracefully — it still extracts sitemap, page data, annotations, and interactions (everything that doesn't need a browser), but skips screenshots and theme tokens.

From fern-ok/prototype-demo, Apache-2.0.

More from fern-ok/prototype-demo