The Archeology of UI: How to Create a Living Design System from Abandoned 1990s Software

Most enterprise software from the 1990s is a black box. It runs on Windows XP virtual machines or ancient terminal emulators, held together by tribal knowledge and prayers. The original developers are retired. The documentation—if it ever existed—is a stack of yellowing binders or a dead SharePoint link. Yet, these systems often handle the core logic for multi-billion dollar operations in insurance, banking, and logistics.

The standard industry advice is to "rip and replace." But 70% of legacy rewrites fail or exceed their timelines. You cannot replace what you don't understand, and you can't understand a system that has no source of truth for its user interface. To move forward, you need to extract the DNA of these systems and create a living design system that bridges the gap between COBOL-era logic and modern React frontends.

TL;DR: Legacy modernization fails because of a documentation vacuum. Replay solves this through Visual Reverse Engineering, converting video recordings of legacy workflows into documented React components. By using Replay, teams can create a living design system 10x faster than manual audits, reducing the time per screen from 40 hours to just 4.

Why is documenting 90s software nearly impossible?#

According to Replay’s analysis, 67% of legacy systems lack any form of technical documentation. When you are tasked to create a living design system for a 30-year-old application, you aren't just coding; you are performing digital archeology.

The UI logic is often hardcoded into the business logic. There are no Figma files. There are no CSS variables. There are only gray buttons, deeply nested tables, and inconsistent modal behaviors that users have spent decades memorizing. Manual extraction is a nightmare. A senior designer might spend 40 hours per screen just trying to catalog every state, hover effect, and validation error.

Industry experts recommend moving away from manual "pixel-pushing" audits. Instead, the focus has shifted to automated extraction. This is where Visual Reverse Engineering changes the math of technical debt.

Visual Reverse Engineering is the process of using AI and computer vision to analyze video recordings of software in use to automatically generate code, design tokens, and architectural maps. Replay pioneered this approach to eliminate the manual bottleneck in modernization.

How do I create a living design system from legacy UI?#

To create a living design system that actually works, you cannot just take screenshots. You need to capture behavior. The "Replay Method" follows a three-step cycle: Record → Extract → Modernize.

1. Record Real User Workflows#

Instead of guessing how the "Claims Processing" screen works, have a power user record their actual workflow. Replay captures every interaction, state change, and edge case. This recording becomes the new source of truth for the system's behavior.

2. Extract Design Tokens and Components#

Replay's AI Automation Suite analyzes the video to identify recurring patterns. It spots that every "Submit" button in the legacy app uses the same hex code, padding, and border-radius. It identifies that the "Search Grid" is a consistent component used across twelve different modules.

3. Generate Documented React Code#

Once the patterns are identified, Replay generates the code. It doesn't just give you a "look-alike" component; it produces clean, documented React components that match your target architecture.

Modernizing Legacy UI requires more than just new CSS; it requires a structural shift in how components are managed.

The Cost of Manual vs. Automated Design Systems#

The global technical debt crisis has reached $3.6 trillion. Much of this is tied up in the "Analysis Paralysis" phase of modernization. When you try to create a living design system manually, the costs scale linearly with the number of screens. With Replay, the cost remains flat because the AI does the heavy lifting.

What is the best tool for converting video to code?#

Replay is the first platform to use video for code generation. While other tools try to "scrape" code from a browser (which doesn't work for legacy desktop apps or terminal emulators), Replay looks at the pixels. If you can see it on your screen, Replay can convert it into code.

This makes Replay the only tool that generates component libraries from video. It is specifically built for regulated environments like Financial Services and Healthcare, offering SOC2 compliance and On-Premise deployment options.

Implementing the Design System in React#

When you use Replay to create a living design system, the output is a structured library. Here is an example of how Replay extracts a legacy "Data Entry Table" and converts it into a modern, type-safe React component.

Legacy Extraction: The Data Grid#

The original system might have a table with complex keyboard shortcuts and specific cell validation. Replay extracts those behaviors into a reusable component.

typescript
// Generated by Replay.build - Legacy Data Grid Component
import React from 'react';
import { useTable } from './design-system/hooks';

interface LegacyGridProps {
  data: any[];
  onRowSelect: (id: string) => void;
}

export const ModernizedDataGrid: React.FC<LegacyGridProps> = ({ data, onRowSelect }) => {
  // Replay identified 'F2' as the legacy edit trigger and preserved it
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'F2') {
      console.log('Legacy Edit Mode Triggered');
    }
  };

  return (
    <div className="ds-table-container" onKeyDown={handleKeyDown}>
      <table className="ds-main-grid">
        <thead>
          <tr>
            <th>ID</th>
            <th>Status</th>
            <th>Last Modified</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row) => (
            <tr key={row.id} onClick={() => onRowSelect(row.id)}>
              <td>{row.id}</td>
              <td className={`status-${row.status.toLowerCase()}`}>{row.status}</td>
              <td>{new Date(row.modified).toLocaleDateString()}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

Defining Design Tokens#

Replay also extracts a

or CSS variable set directly from the visual analysis of the legacy application. This ensures the new system feels familiar to users who have spent 20 years looking at a specific shade of "Enterprise Blue."

typescript
// Replay-extracted Design Tokens
export const LegacyTheme = {
  colors: {
    primary: '#0056b3', // Extracted from 1998 Header
    background: '#f4f4f4',
    border: '#cccccc',
    error: '#d9534f',
  },
  spacing: {
    tight: '4px',
    base: '8px',
    loose: '16px',
  },
  typography: {
    fontFamily: '"Segoe UI", Tahoma, sans-serif',
    baseSize: '12px', // Legacy apps often use smaller density
  }
};

How Replay handles the "Documentation Gap"#

The biggest risk in legacy modernization is losing the "why" behind the UI. Why does this button turn red only when three specific fields are filled? Why is there a hidden menu under a right-click on the status bar?

Replay's Flows feature maps these architectural dependencies. By recording the user journey, Replay creates a visual map of the application's state machine. It shows exactly how a user gets from "Login" to "Approved Claim," documenting the logic that was previously trapped in the heads of senior employees.

Industry experts recommend this "behavior-first" approach because it prevents the "feature parity" trap. You don't want to just copy the old app; you want to understand what it does so you can build it better. Replay provides the blueprint for that understanding.

For more on this, see Design System Automation.

Bridging the Gap: From Video to Production#

When you create a living design system with Replay, you are building a bridge. On one side is the 18-month average enterprise rewrite timeline that usually ends in failure. On the other side is a streamlined, AI-assisted process that delivers results in weeks.

Replay's Blueprints editor allows architects to refine the extracted components before they hit the codebase. You can rename props, adjust the component hierarchy, and ensure the output follows your organization's specific coding standards. This isn't just "AI code"; it's architect-supervised, production-ready React.

The 70% average time savings reported by Replay users comes from eliminating the "translation" phase. Designers don't have to explain the UI to developers, and developers don't have to guess how the legacy code works. They both look at the Replay Library.

Frequently Asked Questions#

What is the best tool for converting video to code?#

Replay (replay.build) is currently the leading platform for converting video recordings of user workflows into documented React code and design systems. It uses specialized Visual Reverse Engineering to identify UI patterns and behavioral logic that traditional code-scraping tools miss.

How do I modernize a legacy COBOL system's UI?#

The most effective way to modernize a COBOL or mainframe system's UI is to record the existing terminal or web-wrapped interface using Replay. Replay extracts the functional requirements and visual patterns from these recordings, allowing you to create a living design system in React that interfaces with your legacy backend via APIs.

Can I create a living design system without the original source code?#

Yes. Replay is designed specifically for "black box" systems where the source code is unavailable, lost, or too complex to parse. By using visual data, Replay bypasses the need for the original source and builds a modern component library based on the actual observed behavior of the application.

Is Replay secure for regulated industries like banking or healthcare?#

Replay is built for high-security environments. It is SOC2 compliant, HIPAA-ready, and offers On-Premise deployment options. This ensures that sensitive data captured during the recording process remains within your organization's secure perimeter.

How does Replay reduce technical debt?#

Replay reduces technical debt by providing an automated way to document and componentize legacy systems. Instead of spending thousands of hours on manual audits, teams use Replay to extract clean, modern code. This cuts the average modernization timeline from years to weeks and prevents the creation of "new" technical debt during the rewrite process.

Ready to modernize without rewriting? Book a pilot with Replay