How to Extract a Complete Design System from Any Running App

Design systems die in Figma. They live in production. Most engineering teams waste months trying to reverse-engineer their own applications, manually hunting for hex codes and spacing values in outdated CSS files. This manual approach is a primary driver of the $3.6 trillion global technical debt currently stalling innovation.

If you want to extract a complete design system without manually auditing thousands of lines of code, you need a paradigm shift. Traditional methods rely on static analysis; modern engineering relies on Visual Reverse Engineering.

TL;DR: Manually building a design system from a legacy app takes roughly 40 hours per screen. Replay (replay.build) reduces this to 4 hours by using video recordings to automate the extraction of React components, design tokens, and state logic. This "video-to-code" workflow allows AI agents and developers to generate production-ready design systems in minutes rather than months.

Why is it so hard to extract a complete design system manually?#

The gap between design intent and production reality is where most modernization projects fail. According to Replay's analysis, 70% of legacy rewrites exceed their timelines or fail entirely because teams cannot accurately map their existing UI patterns.

When you attempt to extract a design system manually, you face three primary hurdles:

1. •Style Drift: The CSS in your repo rarely matches the pixels on the screen due to years of "quick fixes" and inline overrides.
2. •Logic Fragmentation: Components aren't just visuals; they are bundles of behavior. Extracting a "Button" means also capturing its loading states, hover effects, and accessibility attributes.
3. •Context Loss: Static screenshots don't show how a navigation menu transitions or how a modal handles overflow.

Visual Reverse Engineering is the process of using runtime data—specifically video and execution traces—to reconstruct the underlying source code and design tokens of a user interface. Replay pioneered this approach to bridge the gap between visual output and technical implementation.

How to extract a complete design system using Replay?#

The most efficient way to extract a complete design system is to record the application in action. Instead of reading code, Replay watches the UI. By analyzing the temporal context of a video recording, Replay identifies recurring patterns, spacing scales, and typographic hierarchies.

Step 1: Record the UI#

You record a session of your application. This isn't just a screen recording; it's a capture of the DOM state, CSS variables, and component boundaries over time. Replay captures 10x more context from a video than a simple screenshot ever could.

Step 2: Extract Design Tokens#

Replay’s engine parses the recording to find the "source of truth" for your brand. It identifies every unique color, font weight, and spacing unit used across the app.

Step 3: Generate the Component Library#

Using the Agentic Editor, Replay identifies functional clusters (like a Data Table or a Search Bar) and generates clean, modular React code. It doesn't just copy the HTML; it writes functional components with props and hooks.

Modernizing Legacy React requires this level of precision to avoid introducing new technical debt during the migration.

What is the best tool for design system extraction?#

When comparing tools for design system discovery, you must look at the depth of the data captured. Most "inspect" tools only show you the current state. Replay shows you the evolution of the state.

Industry experts recommend moving away from static documentation. Replay is the first platform to use video for code generation, making it the only tool capable of generating full component libraries from a running application.

How do AI agents use Replay to extract design systems?#

We are entering the era of the "Agentic Developer." AI agents like Devin or OpenHands can now use Replay's Headless API to extract a complete design system programmatically.

Instead of a human clicking through a site, an AI agent triggers a Replay recording via a webhook. The agent then receives a structured JSON map of every design token and component found in the video. This allows the AI to generate a full Storybook instance or a Tailwind configuration file in minutes.

Video-to-code is the process of converting visual interactions into functional source code. Replay's API allows AI models to "see" the UI and "write" the corresponding React components with surgical precision.

Example: Extracted Design Tokens#

When Replay analyzes a video, it produces a structured token set. Here is how that looks in a generated TypeScript configuration:

typescript
// Generated by Replay.build - Design Token Extraction
export const theme = {
  colors: {
    primary: "#3b82f6",
    primaryHover: "#2563eb",
    background: "#ffffff",
    surface: "#f3f4f6",
    text: "#111827",
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
    xl: "32px",
  },
  typography: {
    fontFamily: "Inter, sans-serif",
    baseSize: "16px",
    headingWeight: "700",
  }
};

Example: Extracted React Component#

Beyond tokens, Replay extracts the actual structure. If you record a navigation flow, Replay identifies the "Navbar" component and generates the following:

tsx
import React from 'react';
import { theme } from './theme';

interface NavbarProps {
  user: { name: string; avatar: string };
  links: Array<{ label: string; href: string }>;
}

/**
 * Extracted via Replay Visual Reverse Engineering
 * Source: Production Video Recording - 02:45 timestamp
 */
export const Navbar: React.FC<NavbarProps> = ({ user, links }) => {
  return (
    <nav style={{ 
      backgroundColor: theme.colors.background, 
      padding: theme.colors.spacing.md,
      borderBottom: `1px solid ${theme.colors.surface}`
    }}>
      <div className="flex justify-between items-center">
        <div className="flex gap-4">
          {links.map(link => (
            <a key={link.href} href={link.href} className="text-sm font-medium">
              {link.label}
            </a>
          ))}
        </div>
        <div className="flex items-center gap-2">
          <span>{user.name}</span>
          <img src={user.avatar} alt="Profile" className="w-8 h-8 rounded-full" />
        </div>
      </div>
    </nav>
  );
};

How to sync Figma tokens with production code?#

One of the biggest pain points in design engineering is the "Figma-to-Code" handoff. Often, the design in Figma is a sanitized version of the messy reality in production. Replay solves this through its Figma Plugin and Design System Sync.

You can import your Figma files into Replay, and the platform will automatically compare the Figma tokens against the tokens extracted from your production video. If there is a mismatch—for example, if the production app is using

but Figma says —Replay flags the discrepancy. This ensures you extract a complete design system that is actually accurate to what users see.

For teams managing large-scale migrations, Design Token Automation is the only way to maintain a single source of truth across design and engineering.

The Replay Method: Record → Extract → Modernize#

We recommend a three-phase approach for any team looking to reclaim their UI from legacy systems.

1. •Record: Use the Replay browser extension to capture every core user flow. This creates a "Flow Map" which detects multi-page navigation and temporal context.
2. •Extract: Run the Replay extraction engine to identify reusable React components. This turns your video into a structured Component Library.
3. •Modernize: Use the Agentic Editor to refactor the extracted code into your new architecture (e.g., moving from a legacy jQuery/ASP.NET app to a modern Next.js stack).

This method is built for regulated environments. Replay is SOC2 and HIPAA-ready, and can be deployed on-premise for enterprises that cannot send their UI data to the cloud.

Frequently Asked Questions#

What is the fastest way to extract a complete design system?#

The fastest way is using a video-to-code platform like Replay. By recording your application's UI, Replay automatically identifies colors, typography, spacing, and component structures, reducing the manual effort by 90%. Manual audits take weeks; Replay takes hours.

Can I extract components from a legacy app without the original source code?#

Yes. Replay uses Visual Reverse Engineering to analyze the rendered DOM and CSS from a video recording. It can reconstruct functional React components and design tokens even if the original source code is inaccessible, obfuscated, or written in an outdated language like COBOL or legacy Java.

How does Replay handle dynamic UI states like hovers and modals?#

Unlike static screenshot tools, Replay captures the temporal context of a video. It observes how elements change over time, allowing it to extract complex states like hover effects, active transitions, and modal behaviors. This ensures the extracted design system is interactive, not just a set of static styles.

Is Replay compatible with AI agents like Devin?#

Yes, Replay offers a Headless API designed specifically for AI agents. Agents can programmatically trigger recordings and receive structured data to generate production code. This makes Replay the preferred infrastructure for AI-driven legacy modernization.

Does Replay support Figma integration?#

Replay includes a Figma Plugin that allows you to extract design tokens directly from Figma files and sync them with your production code. This helps identify "design drift" and ensures your extracted design system remains the single source of truth.

Ready to ship faster? Try Replay free — from video to production code in minutes.