Caution
This is an AI-developed project still under heavy refinement and the author cautions that it is not production ready, free of bugs, or unexpected behaviour. Use at your own risk.
Capture a user's navigation through a 3rd-party iOS app and produce a visual journey map in Figma — including stitched scroll views, labelled screens, and inferred interaction flows.
iOS Device (USB)
↓
[Capture Agent] — streams H.264 from device via QuickTime USB protocol
↓ (or reads a pre-recorded .mp4 file)
[Event Detector] — detects screen transitions, modals, and scroll sequences
↓ using SSIM, frame diff, and optical flow
[Scroll Stitcher] — composites scroll sequences into full-height images
↓ using template-matched pixel-row alignment
[LLM Analyser] — sends each screen to a local vision model (LM Studio)
↓ extracting app name, screen name, UI elements, actions
[Flow Graph] — builds a directed tree of screens and transitions
↓
[Figma MCP Server] — publishes the tree map to a Figma file via MCP
↓
[Markdown Report] — writes journey-report.md with timestamped event log
- Python 3.11+
- macOS (for iOS USB capture)
- LM Studio with a vision-capable model loaded (e.g. LLaVA-Next)
- Figma desktop app — publishing runs as a local Figma Plugin inside your own session (see Figma publishing below)
- For live USB capture:
pip install 'autojourney[capture]'
# Install
pip install -e .
# Copy and fill in your configuration
cp .env.example .envEdit .env:
LM_STUDIO_BASE_URL=http://localhost:1234/v1
LM_STUDIO_MODEL=llava-llama-3-v-vision # model name as shown in LM Studio
FIGMA_FILE_KEY=your_file_key # from the URL: figma.com/design/<FILE_KEY>/If you've enabled LM Studio's optional "require API key" server setting, also set
LM_STUDIO_API_KEY in .env — leave it unset for the default unauthenticated
local server.
Figma's remote MCP server only accepts clients listed in its MCP Catalog, and its local desktop MCP server doesn't expose the tools needed to create nodes — so publishing runs as an actual Figma Plugin inside your own session instead. No token, no OAuth.
One-time setup:
- Open the Figma desktop app.
- Plugins → Development → Import plugin from manifest…
- Select the manifest AutoJourney prints on first publish (or find it yourself
at
<path-to-your-venv>/lib/python*/site-packages/autojourney/figma_plugin/manifest.json, orautojourney/figma_plugin/manifest.jsonin an editable install).
Each publish:
- Run
autojourney runorautojourney publish(below) — it starts a small local server and opens the target file in your browser. - In the Figma desktop app, open that file and run Plugins → Development → AutoJourney.
- The CLI finishes automatically once the plugin reports it's done.
autojourney run --source recording.mp4Connect your iPhone via USB, trust the computer, then:
autojourney run --usbPress Ctrl+C when done navigating.
autojourney run --source recording.mp4 --no-publishautojourney publish output/session.jsonautojourney report output/session.jsonAfter a run, ./output/ contains:
| File | Description |
|---|---|
frames/ |
Extracted JPEG frames |
frames/manifest.json |
Frame index with timestamps |
events.json |
Detected events (transitions, scrolls, etc.) |
screens/ |
Per-screen PNGs (including stitched scroll images) |
session.json |
Full session data (screens, edges, LLM analysis) |
journey-report.md |
Human-readable timestamped event log |
See .env.example for all tunable parameters including:
TRANSITION_SSIM_THRESHOLD— sensitivity for detecting screen transitionsSCROLL_FLOW_THRESHOLD— optical flow magnitude to classify as scrollingLLM_PROVIDER— override toopenaioranthropicfor cloud LLMsLM_STUDIO_API_KEY— optional bearer token for LM Studio, only needed if its "require API key" server setting is enabled
pip install -e '.[dev]'
pytest