alpex-ai/ui-extractor

Overview

This skill extracts implementation specs, design systems, and component catalogs from websites, screen recordings, or an authenticated browser tab. It produces a machine-friendly design system (JSON), component inventory, user flows, and optional Figma exports. The outputs are ready for engineers and designers to implement or sync into design tools.

How this skill works

Resolve the input type (URL, local video, or open Chrome tab), capture frames by recording or extracting from the video, then analyze frames to identify screens, components, typography, colors, spacing, shadows, and flows. It assembles an implementation spec and design-system JSON, and can export CSS variables, Tailwind config, Figma Variables, or push directly to Figma when authorized. The pipeline validates video duration, applies quality presets, and warns about token/processing costs for long recordings.

When to use it

• Reverse-engineer a competitor UI to recover colors, typography, spacing, and components
• Document an existing app to auto-generate a component inventory and design tokens
• Extract design tokens and components from an authenticated internal dashboard or Figma file
• Compare your app against a reference site or recording to get prioritized implementation gaps
• Export a discovered design system to Figma or developer-friendly formats

Best practices

• Provide a short, focused recording (under 1 minute recommended) to limit processing time and costs
• Use mobile/dark-mode options explicitly when targeting alternate breakpoints or themes
• If analyzing an authenticated page, record the open Chrome tab so private states are captured
• Trim long videos to under 5 minutes to avoid errors and heavy token use
• Review the generated component catalog and adjust ambiguous matches before pushing to Figma

Example use cases

• Analyze stripe.com to generate a component catalog and Figma variables for rapid UI parity
• Analyze ./demo.mov to extract frames and produce a JSON design system and implementation spec
• Compare ./my-app.mov with a reference site to get a prioritized list of layout and token mismatches
• Record an authenticated Chrome tab to extract internal dashboard components and export as Tailwind config