UI Extractor

Extract implementation specs, design systems, and component catalogs from any UI source.

What It Does

Input: A URL, screen recording, or authenticated browser tab Output: Implementation spec with components, design tokens, user flows, and Figma export

Use Cases

• Reverse engineer a competitor's UI → Get their exact colors, typography, spacing, components
• Document an existing app → Auto-generate component inventory and design tokens
• Match a reference design → Compare your app against a target and get prioritized changes
• Extract from authenticated sites → Analyze internal dashboards, Figma files, or logged-in apps

Supported Inputs

Example Commands

# Analyze any website (auto-records it)
Analyze linear.app

# Mobile or dark mode
Analyze stripe.com in mobile dark mode

# Just get the design system
Extract the design system from notion.com and export to Figma

# Compare your app to a reference
Compare ./my-app.mov with stripe.com

# Analyze an authenticated page you have open
Analyze my open Chrome tab

Output

Implementation Spec

• Screen inventory with frame references
• Component catalog (buttons, cards, modals, etc.)
• Design system tokens (colors, typography, spacing, shadows)
• User flows with triggers and transitions
• Implementation recommendations

Design System (JSON)

{
  "colors": { "primary": { "value": "#007AFF", "usage": "Primary actions" } },
  "typography": { "heading": { "size": "24px", "weight": "600" } },
  "spacing": { "sm": "8px", "md": "16px", "lg": "24px" }
}

Export Formats

• CSS custom properties
• Tailwind config
• Figma Variables (JSON)
• Direct Figma push via MCP

Agent Instructions

Workflow Overview

1. Resolve input → URL, local file, or browser tab
2. Capture frames → Record (if URL/tab) or extract from video
3. Analyze frames → Identify components, colors, typography, flows
4. Generate output → Implementation spec, design system, or comparison

Step 1: Resolve Input

URL detected (contains .com, .io, .app, www., or http):

./scripts/record-website.sh "https://example.com" --analyze --quality default

Options: --mobile, --dark-mode, --duration <secs>

Local file provided: Validate exists, check extension (.mov, .mp4, .webm)

Browser tab requested (mentions "tab", "browser", "Chrome", "open"): Use Chrome MCP to record the tab:

1. Get tab context
2. Start GIF recording
3. Scroll/hover while recording
4. Export to ./recordings/tab-recording.gif
5. Extract frames: ./scripts/extract-frames.sh ./recordings/tab-recording.gif ./frames

No path provided: Run ./scripts/detect-recording.sh to find recent recordings

Step 2: Validate Duration

ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 "$VIDEO_PATH"

• > 5 min: Error, ask user to trim
• > 1 min: Warn about token usage
• ≤ 1 min: Proceed

Step 3: Extract Frames

# Standard extraction
./scripts/extract-frames.sh "$VIDEO_PATH" "./frames" --quality default

# High quality for short videos (<15s)
./scripts/extract-frames.sh "$VIDEO_PATH" "./frames" --quality high

# With motion analysis
./scripts/extract-frames.sh "$VIDEO_PATH" "./frames" --include-metadata

Quality levels:

• low (0.5fps): Videos >60s
• default (1fps): Most recordings
• high (2fps): Short/complex videos

Step 4: Analyze Frames

Load frames and analyze using references/frame-analysis-prompt.md:

1. Screens: Identify distinct screens/states
2. Components: Catalog reusable UI elements
3. Design System: Colors, typography, spacing, shadows
4. User Flows: Screen transitions and triggers
5. Implementation: Component hierarchy, state hints

Step 5: Generate Output

Full Analysis (default): Output markdown implementation spec with all sections.

Design System Only: Output JSON following references/design-system-schema.md.

Export to Figma:

./scripts/figma-export.sh --design-system ./output/design-system.json --format figma-tokens

Comparison Mode:

1. Analyze reference first
2. Analyze user's app
3. Output gap analysis with prioritized changes

Error Handling

File access denied (macOS security):

I can't access ~/Desktop directly. Run this to copy your recording:
cp ~/Desktop/Screen\ Recording*.mov ./recording.mov
Then: "Analyze ./recording.mov"

FFmpeg missing:

Install ffmpeg: brew install ffmpeg

Video too long:

This video is X minutes. Please trim to under 5 minutes.

Trigger Phrases

Dependencies

Required:

• ffmpeg / ffprobe - Video processing
• node ≥18 - Website recording

Optional:

• jq - Figma export
• Chrome MCP - Browser tab recording
• Figma MCP or FIGMA_ACCESS_TOKEN - Direct Figma push

Reference Documents

• references/frame-analysis-prompt.md - Analysis prompt structure
• references/design-system-schema.md - Design system JSON schema
• references/comparison-guide.md - Comparison workflow
• references/figma-integration.md - Figma export details