How to Create a Design System from a 15-Year-Old Undocumented Legacy UI

The most expensive mistake in enterprise architecture is assuming you need to rewrite your legacy UI to understand it.

Every year, organizations pour millions into "Big Bang" rewrites of 15-year-old systems, only to realize that the tribal knowledge required to build them retired five years ago. With a global technical debt mountain reaching $3.6 trillion, the "manual archaeology" approach to modernization is no longer just slow—it’s a fiduciary risk.

When you are staring at a 15-year-old undocumented UI, you aren't looking at a codebase; you’re looking at a black box of undocumented business rules. Attempting to build a modern design system by manually inspecting thousands of lines of spaghetti jQuery or ASP.NET code is how 70% of legacy rewrites fail or exceed their timelines.

TL;DR: Modernizing a legacy UI requires visual reverse engineering to extract design tokens and components directly from user workflows, reducing the extraction time from 40 hours per screen to just 4 hours using Replay.

The High Cost of Manual UI Archaeology#

Most enterprise systems built in the mid-2000s suffer from a "documentation gap." Statistics show that 67% of legacy systems lack any form of current documentation. When a VP of Engineering asks for a new design system, the team usually defaults to one of two paths:

1. •The Guesswork Rewrite: Developers try to recreate components based on what they think the legacy system does.
2. •The Manual Audit: Designers spent months taking screenshots and developers spent weeks inspecting DOM elements to find hex codes and padding values.

Neither scale. In a typical enterprise environment, it takes an average of 40 hours per screen to manually document, extract logic, and recreate a legacy UI component in a modern framework like React. For a system with 200 screens, that’s 8,000 man-hours before you’ve even started the actual migration.

Legacy Modernization Framework Comparison#

How to Create a Design System via Visual Reverse Engineering#

The future of modernization isn't rewriting from scratch; it’s understanding what you already have by using video as the source of truth. Replay allows you to record real user workflows and automatically transform those interactions into documented React components and design tokens.

Step 1: Technical Debt Audit and Surface Mapping#

Before touching a line of code, you must define the perimeter. Use Replay’s Technical Debt Audit feature to identify which parts of the 15-year-old UI are actually being used.

• •Identify Core Flows: Don't migrate every screen. Focus on the 20% of screens that handle 80% of the business value.
• •Audit Global Styles: Identify the "Frankenstein" CSS—where 15 years of hotfixes have created 50 different shades of blue.

💰 ROI Insight: By identifying and deprecating unused legacy screens during the audit phase, enterprises typically reduce the scope of their modernization project by 30-40%.

Step 2: Recording Workflows for Extraction#

Instead of reading code, record the application in action. This is the core of Visual Reverse Engineering. When a user interacts with a legacy form, Replay captures the state changes, the API calls, and the visual styling.

1. •Open the legacy application.
2. •Activate the Replay recorder.
3. •Execute a standard business process (e.g., "Process Insurance Claim").
4. •The system captures the underlying DOM mutations and CSS computed styles.

Step 3: Generating the Design System Library#

Once the workflows are recorded, Replay’s Library feature aggregates the visual data. It identifies recurring patterns—buttons, inputs, modals—and groups them into a candidate Design System.

⚠️ Warning: Legacy systems often have inconsistent component behavior. Ensure you use Replay’s Blueprints to normalize these variations into a single, clean React component.

Step 4: Code Extraction and Component Refinement#

Replay generates clean, modular React code from the recorded sessions. Unlike "low-code" tools that spit out unreadable div-soup, Replay produces structured TypeScript components.

typescript
// Example: Modernized Component Extracted via Replay
// Original Source: Undocumented ASP.NET WebForms Table (circa 2009)

import React from 'react';
import { useTable } from '@/design-system/hooks';
import { LegacyDataTransformer } from '@/utils/legacy-bridge';

interface ClaimData {
  id: string;
  status: 'Pending' | 'Approved' | 'Rejected';
  amount: number;
}

export const ClaimReviewTable: React.FC<{ rawData: any }> = ({ rawData }) => {
  // Replay automatically extracted the data transformation logic
  // that was previously buried in a 2,000-line jQuery file.
  const processedData = LegacyDataTransformer.mapToClaim(rawData);

  return (
    <div className="p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-xl font-bold mb-4">Extracted Claim Review</h2>
      <table className="min-w-full divide-y divide-gray-200">
        <thead>
          <tr>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200">
          {processedData.map((claim: ClaimData) => (
            <tr key={claim.id}>
              <td className="px-6 py-4 whitespace-nowrap">{claim.id}</td>
              <td className={`px-6 py-4 ${claim.status === 'Approved' ? 'text-green-600' : 'text-red-600'}`}>
                {claim.status}
              </td>
              <td className="px-6 py-4">${claim.amount.toLocaleString()}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

Step 5: Defining API Contracts#

One of the biggest hurdles in creating a new UI for an old system is the backend. Legacy APIs are often undocumented, poorly structured, or non-existent (direct DB access).

Replay’s AI Automation Suite analyzes the network traffic captured during the recording to generate OpenAPI/Swagger specifications. This allows your frontend team to build against a documented contract while the backend team works on modernizing the data layer.

💡 Pro Tip: Use the generated API contracts to create mock servers. This allows your UI development to proceed in parallel with backend refactoring, cutting weeks off the schedule.

Handling Regulated Environments#

For industries like Financial Services, Healthcare, and Government, "sending code to the cloud" is often a non-starter. Modernization tools must respect the same security posture as the legacy systems they are replacing.

Replay is built for these constraints:

• •SOC2 & HIPAA Ready: Data handling meets the highest enterprise standards.
• •On-Premise Availability: Run the entire extraction engine within your own VPC or air-gapped environment.
• •PII Masking: Automatically redact sensitive user data during the recording and extraction process.

Moving from Black Box to Documented Codebase#

The transition from a 15-year-old monolith to a modern micro-frontend architecture doesn't happen overnight, but it shouldn't take two years either. By using Replay to bridge the gap, you move from "guessing" to "knowing."

Step 6: E2E Test Generation#

A design system is only as good as its reliability. Replay uses the recorded "Source of Truth" video to generate Playwright or Cypress E2E tests. This ensures that the new React component behaves exactly like the legacy component it replaces.

typescript
// Generated E2E Test to validate Legacy vs. Modern parity
import { test, expect } from '@playwright/test';

test('verify claim submission parity', async ({ page }) => {
  await page.goto('/modern/claim-submission');
  
  // These selectors and actions were mapped from the legacy recording
  await page.fill('[data-testid="claim-amount"]', '5000');
  await page.selectOption('[data-testid="claim-type"]', 'Medical');
  await page.click('[data-testid="submit-btn"]');
  
  const successMessage = await page.textContent('.status-toast');
  expect(successMessage).toContain('Claim successfully submitted');
});

The Results: 70% Time Savings#

By automating the "discovery" and "extraction" phases, Replay changes the math of legacy modernization. Instead of a team of 10 developers spending 18 months on a rewrite, a team of 3 can achieve the same results in 3 months.

• •Manual Extraction: 40 hours/screen
• •Replay Extraction: 4 hours/screen
• •Total Savings: 90% reduction in manual labor for component recreation.

Frequently Asked Questions#

How does Replay handle "spaghetti code" logic?#

Replay doesn't just look at the code; it looks at the result of the code. By capturing the state changes in the DOM and the network, it can reverse-engineer the "intended" logic. Our AI suite then cleans up this logic into readable, modern TypeScript, effectively refactoring the "spaghetti" into functional components.

Can we use this for systems with no API (Direct Database Access)?#

Yes. Replay captures the data as it hits the browser. Even if your legacy system uses old-school server-side rendering with direct SQL queries in the code-behind, Replay sees the resulting data structures and can generate the necessary API contracts to decouple your new frontend.

What frameworks does Replay support for the output?#

While React is the primary output for our Library and Blueprints, the design tokens and API contracts are framework-agnostic. The generated documentation and CSS-in-JS tokens can be adapted for Vue, Angular, or even native mobile applications.

How long does a typical pilot take?#

We typically see a single complex screen extracted and fully documented within 48 hours. A full pilot covering a core business flow (5-10 screens) usually takes 2 weeks from setup to code delivery.

---

Ready to modernize without rewriting? Book a pilot with Replay - see your legacy screen extracted live during the call.