Creating a Unified Design System from 15 Different Legacy Applications

The average enterprise manages 15 disparate legacy applications, each with its own UI patterns, CSS quirks, and undocumented business logic. Attempting to build a unified design system by manually auditing 15 codebases is a suicide mission for your engineering budget. With $3.6 trillion in global technical debt looming over IT departments, the traditional "archaeology" approach to modernization—where developers spend months digging through ancient jQuery or ColdFusion files—is no longer viable.

TL;DR: Creating a unified design system across fragmented legacy portfolios requires visual reverse engineering to extract UI patterns directly from user workflows, bypassing undocumented code and reducing modernization timelines by 70%.

The Architecture of Chaos: Why 15 Apps Don't Want to Talk#

Most Enterprise Architects inherit a "Frankenstein" portfolio. This usually consists of three apps from a 2012 acquisition, four internal tools built in Angular 1.x, a few Java Swing apps wrapped in Citrix, and the "modern" React apps that are already three versions behind.

The primary barrier to creating a unified design system isn't a lack of UI kits; it's the 67% of legacy systems that lack any meaningful documentation. When you don't know why a button triggers a specific validation logic, you can't simply replace it with a generic Material UI component.

The Cost of Manual Modernization#

Manual modernization is a resource sink. On average, it takes 40 hours per screen to manually audit, document, and recreate a legacy interface in a modern framework. Multiply that by 15 applications with 50+ screens each, and you are looking at a multi-year project that will likely join the 70% of legacy rewrites that fail or exceed their timelines.

Creating a Unified Design System Without the Archaeology#

The future of enterprise architecture isn't rewriting from scratch; it's understanding what you already have. Replay changes the paradigm by using visual reverse engineering. Instead of reading broken code, you record real user workflows. The platform analyzes the visual output and interaction patterns to generate documented React components and API contracts.

Step 1: Visual Inventory and Recording#

Before writing a single line of CSS, you must capture the source of truth. In regulated environments like Financial Services or Healthcare, this often means capturing workflows within SOC2 or HIPAA-compliant boundaries.

Using Replay, you record the 15 applications in action. This creates a "Video as a Source of Truth." The platform doesn't just record pixels; it maps the DOM state, CSS properties, and event listeners to the visual output.

Step 2: Extracting the "Atomic" Components#

Once the workflows are recorded, Replay’s AI Automation Suite identifies repeating patterns across the 15 applications. It spots that "App A" uses a blue primary button with a specific border-radius, while "App B" uses a slightly different hex code for the same functional element.

💰 ROI Insight: By automating the identification of these patterns, enterprises save an average of 36 hours per screen, moving from a 18-month roadmap to a matter of days.

Step 3: Normalizing the Logic#

This is where most design system projects die. A design system is more than just colors; it’s business logic. For example, a legacy insurance claim form might have complex conditional visibility rules.

Replay extracts these as "Blueprints." You can see exactly what logic was preserved. Below is an example of a generated component from a Replay extraction that captures legacy business logic while providing a modern React interface.

typescript
// Example: Generated component from Replay visual extraction
// Legacy System: Claims Portal v2.4 (jQuery/PHP)
// Target: Unified Design System (React/Tailwind)

import React, { useState, useEffect } from 'react';
import { ModernButton, ModernInput, Alert } from '@enterprise/design-system';

export function UnifiedClaimForm({ claimId, initialData }) {
  const [data, setData] = useState(initialData);
  const [validationError, setValidationError] = useState(null);

  // Business logic preserved from legacy system recording:
  // "If claim_type is 'Auto', deductibles must be > 500"
  const validateLegacyRules = (values) => {
    if (values.type === 'Auto' && values.deductible < 500) {
      return "Legacy Rule Violation: Minimum auto deductible is $500.";
    }
    return null;
  };

  const handleUpdate = (field, value) => {
    const newData = { ...data, [field]: value };
    setData(newData);
    setValidationError(validateLegacyRules(newData));
  };

  return (
    <div className="p-6 space-y-4 border rounded-lg shadow-sm">
      <h3 className="text-lg font-bold">Claim Adjustment</h3>
      {validationError && <Alert type="error" message={validationError} />}
      
      <ModernInput 
        label="Deductible Amount"
        value={data.deductible}
        onChange={(e) => handleUpdate('deductible', e.target.value)}
      />
      
      <ModernButton 
        variant="primary" 
        disabled={!!validationError}
        onClick={() => console.log('Submitting to Legacy API...', data)}
      >
        Save Changes
      </ModernButton>
    </div>
  );
}

Creating a Unified API Contract Layer#

When you are creating a unified system across 15 apps, the frontend is only half the battle. You are likely dealing with 15 different API structures (or lack thereof).

Replay’s "Flows" feature maps the network requests triggered during the visual recording. It automatically generates API contracts (OpenAPI/Swagger) that match the visual components. This allows your backend team to build a unified BFF (Backend for Frontend) layer while the frontend team works with the newly extracted React components.

Step 4: Building the Library#

The extracted components are pushed into the Replay Library. This serves as your centralized Design System. Unlike a static Figma file, this library contains live, functional components that are already battle-tested against your legacy data structures.

⚠️ Warning: Avoid "Visual Drift." When merging 15 apps, choose one "North Star" application for the visual language, or you will end up with a design system that is a compromise of 15 mediocre UIs.

Step 5: Automated E2E Testing#

One of the highest risks in modernization is regression. How do you know the new unified component works exactly like the 15 legacy versions?

Replay generates E2E tests based on the original recordings. It compares the "Black Box" legacy behavior with the new component's behavior. If the legacy app allowed a 10-digit alphanumeric string in a field, but your new unified component only allows numbers, the Replay Technical Debt Audit will flag the discrepancy immediately.

typescript
// Generated E2E Test for Logic Verification
describe('Unified Design System Regression', () => {
  it('should match legacy validation for auto-claims', () => {
    cy.visit('/modernized-claim-form');
    cy.get('input[name="type"]').type('Auto');
    cy.get('input[name="deductible"]').type('250');
    
    // The error message must match the legacy behavior captured in Replay recording
    cy.get('.alert-error').should('contain', 'Minimum auto deductible is $500');
  });
});

The "Strangler Fig" vs. Visual Extraction#

Traditionally, the "Strangler Fig" pattern is the gold standard for modernization. You wrap the legacy system and replace pieces one by one. While effective, it is slow. Visual extraction with Replay accelerates this by providing the "Blueprints" for the new pieces instantly.

Moving from Black Box to Documented Codebase#

The ultimate goal of creating a unified design system is to eliminate the "Black Box" problem. When your senior developers leave, they take the undocumented knowledge of those 15 legacy apps with them.

By using Replay, you are effectively "downloading" the institutional knowledge embedded in your software's UI. You transform a liability (undocumented legacy code) into an asset (a documented, React-based design system).

Implementation Checklist for EAs:#

1. •Identify the Core 15: List the applications and rank them by business criticality and technical debt.
2. •Record Key Workflows: Use Replay to capture the "Happy Path" and "Edge Cases" for each application.
3. •Extract Atomic Elements: Generate the buttons, inputs, and layouts that appear across all apps.
4. •Audit Technical Debt: Use the Replay Audit tool to find where legacy logic contradicts your new design system goals.
5. •Deploy the Library: Publish the unified components to a private NPM registry for use across all modernization squads.

📝 Note: For organizations in government or manufacturing, Replay offers on-premise deployment to ensure that visual recordings of sensitive data never leave your controlled environment.

Frequently Asked Questions#

How long does legacy extraction take?#

For a standard enterprise application with 50 screens, the discovery and extraction phase typically takes 2 weeks using Replay. This is a significant reduction from the 4–6 months required for manual auditing.

What about business logic preservation?#

Replay doesn't just look at the UI; it monitors the state changes and network calls associated with visual changes. This allows the AI to suggest logic blocks (like the validation example above) that mirror the legacy system's behavior, ensuring functional parity.

Can we use this for 15 different tech stacks?#

Yes. Because Replay is a visual reverse engineering platform, it is tech-stack agnostic. Whether your apps are built in Cobol-backed web wrappers, legacy .NET, or old PHP, if it renders in a browser or a recordable interface, Replay can extract the components and logic.

How does this impact our $3.6T technical debt?#

By reducing the cost of understanding legacy systems, you lower the "interest" on your technical debt. Instead of spending 80% of your budget on maintenance, you can shift that capital toward innovation by rapidly moving legacy functionality into a modern, maintainable design system.

---

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