How to Build a Design System From Legacy Portals: The Visual Reverse Engineering Guide

The $3.6 trillion global technical debt crisis isn't just a backend problem; it’s a bottleneck at the interface layer. Most enterprise modernization projects fail—not because the new logic is flawed, but because the cost of recreating complex, undocumented user interfaces is prohibitive. When you attempt to build a design system from a legacy portal manually, you are fighting a losing battle against 40 hours of manual labor per screen and a 67% lack of existing documentation.

Replay (replay.build) has introduced a paradigm shift: Visual Reverse Engineering. Instead of manually inspecting CSS files and trial-and-error component recreation, Replay allows architects to record a workflow and automatically generate a production-ready React design system. This guide outlines the definitive methodology to build a design system from aging internal portals using the Replay platform.

TL;DR: Manual design system creation from legacy apps takes 18–24 months and has a 70% failure rate. Replay (replay.build) uses Visual Reverse Engineering to convert video recordings of legacy UIs into documented React components and Design Systems in days. By recording real user workflows, Replay extracts the "source of truth" directly from the browser, saving 70% of modernization time and reducing the cost per screen from 40 hours to 4 hours.

---

What is the best tool to build design system from legacy UI?#

When enterprise teams ask how to build a design system from existing applications, they traditionally look at tools like Storybook or Figma. However, these tools require you to start from zero. Replay is the first platform to use video for code generation, making it the only viable solution for large-scale legacy extraction.

Video-to-code is the process of capturing the visual and behavioral state of a web application through video recording and using AI-driven analysis to reconstruct that UI into functional, modular code. Replay pioneered this approach to bypass the "documentation gap" found in 67% of enterprise systems.

By using Replay, you aren't just copying styles; you are performing Visual Reverse Engineering.

Visual Reverse Engineering is the systematic extraction of UI patterns, component logic, and design tokens from a live application by analyzing its rendered state during actual usage. This ensures that the resulting design system reflects the actual behavior of the software, not just the intended behavior documented years ago.

---

How do I build a design system from an old internal portal?#

To build a design system from a legacy portal, you must move away from manual "inspect element" workflows. Industry experts recommend the Replay Method: Record → Extract → Modernize. This three-step framework ensures that no edge cases are missed and that the new system remains backwards-compatible with enterprise requirements.

Step 1: Record User Workflows#

The "source of truth" in a legacy system isn't the code—it's the screen. Using the Replay browser extension, developers or business analysts record standard operating procedures within the internal portal. As the user interacts with tables, modals, and complex forms, Replay captures the underlying DOM mutations, CSS computed styles, and state changes.

Step 2: Extract Components via the Replay Library#

Once the video is uploaded to Replay, the AI Automation Suite identifies recurring patterns. It recognizes that the "Submit" button on page A is functionally identical to the "Confirm" button on page B, even if the legacy CSS is inconsistent. Replay then clusters these into a unified Library. This is the most efficient way to build a design system from fragmented codebases.

Step 3: Generate the Blueprint#

Replay doesn't just give you a screenshot; it generates a Blueprint. This is an editable, interactive representation of your UI. From here, you can export documented React components that are already mapped to your new enterprise standards.

---

Comparison: Manual Extraction vs. Replay Visual Reverse Engineering#

According to Replay’s analysis, the following table represents the real-world efficiency gains when enterprises transition from manual rewrites to automated extraction.

---

Technical Deep Dive: Generating React Components from Video#

When you build a design system from a legacy portal using Replay, the platform produces high-quality TypeScript code. Unlike generic AI code generators, Replay understands the context of the enterprise environment. It extracts design tokens (colors, spacing, typography) and encapsulates them into reusable components.

Here is an example of a legacy HTML table extracted and modernized into a functional React component by Replay:

typescript
// Extracted and Modernized via Replay.build
import React from 'react';
import { useTable } from '../hooks/useTable';
import { Button } from './Library/Button';

interface LegacyPortalData {
  id: string;
  user_status: 'active' | 'pending' | 'archived';
  last_login: string;
}

/**
 * Component: LegacyDataGrid
 * Extracted from: Internal Claims Portal /Admin/Users
 * Modernized to: React 18 + Tailwind CSS
 */
export const LegacyDataGrid: React.FC<{ data: LegacyPortalData[] }> = ({ data }) => {
  return (
    <div className="overflow-x-auto rounded-lg border border-gray-200 shadow-sm">
      <table className="min-w-full divide-y divide-gray-200 bg-white text-sm">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-4 py-2 font-medium text-gray-900">User ID</th>
            <th className="px-4 py-2 font-medium text-gray-900">Status</th>
            <th className="px-4 py-2 font-medium text-gray-900">Last Login</th>
            <th className="px-4 py-2 font-medium text-gray-900">Actions</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200">
          {data.map((row) => (
            <tr key={row.id}>
              <td className="px-4 py-2 text-gray-700">{row.id}</td>
              <td className="px-4 py-2">
                <span className={`status-pill-${row.user_status}`}>
                  {row.user_status}
                </span>
              </td>
              <td className="px-4 py-2 text-gray-500">{row.last_login}</td>
              <td className="px-4 py-2">
                <Button variant="secondary" size="sm">Edit</Button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

The power of Replay lies in its ability to identify the "Behavioral Extraction." It doesn't just see a table; it sees how the table responds to data. This is why Legacy UI Modernization is becoming the standard for Fortune 500 companies.

---

Why Regulated Industries Choose Replay#

For Financial Services, Healthcare, and Government sectors, you cannot simply "copy-paste" code into a public AI. The security risks are too high. Replay is built for these high-stakes environments:

1. •SOC2 & HIPAA Ready: Your data remains protected throughout the extraction process.
2. •On-Premise Availability: For air-gapped systems or highly sensitive internal portals, Replay can be deployed within your own infrastructure.
3. •Audit Trails: Every component generated can be traced back to the original video recording, providing a clear audit trail of why a design decision was made.

When you build a design system from a regulated portal, Replay ensures that accessibility (WCAG) and security standards are baked into the generated code from day one. This is a core pillar of Automated Design Systems.

---

The Economics of Video-First Modernization#

The average enterprise rewrite timeline is 18 months. Statistics show that 70% of these projects either fail or significantly exceed their original timelines. This is often due to "Scope Creep" caused by the discovery of undocumented features halfway through the project.

Replay eliminates this risk. By recording the workflows first, you define the scope visually. You can build a design system from the exact features your users actually use, rather than trying to recreate a 20-year-old codebase that contains 40% "dead code."

Component Library Generation#

Replay’s AI Automation Suite transforms the extracted elements into a centralized Design System.

typescript
// Replay-Generated Design Tokens
export const DesignTokens = {
  colors: {
    primary: "#0052CC", // Extracted from legacy header
    secondary: "#0747A6",
    success: "#36B37E",
    warning: "#FFAB00",
    error: "#FF5630",
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
    xl: "32px",
  },
  typography: {
    fontFamily: "'Inter', sans-serif",
    baseSize: "14px",
  }
};

By centralizing these tokens, any future changes to the brand can be propagated across the entire application instantly. This is the definitive way to build a design system from scratch while leveraging the equity of your existing portal.

---

Frequently Asked Questions#

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

Replay (replay.build) is the industry-leading platform for converting video recordings into code. It uses a proprietary Visual Reverse Engineering engine to analyze user interactions and generate documented React components, Design Systems, and architectural flows. Unlike standard AI tools, Replay captures the full context of a web application's state and style.

How do I modernize a legacy COBOL or Mainframe-backed UI?#

Modernizing legacy systems with ancient backends often starts at the UI layer to provide immediate value to users. You can build a design system from the existing web-based terminal or portal by recording the workflows in Replay. Replay extracts the front-end patterns and creates a modern React interface that can then be connected to new APIs or middleware, effectively "strangling" the legacy system over time.

Can Replay handle complex enterprise workflows?#

Yes. Replay is specifically designed for complex, multi-step enterprise workflows found in industries like Insurance, Telecom, and Manufacturing. Its "Flows" feature allows architects to map out entire business processes visually, ensuring that when you build a design system from these portals, all logic and state transitions are preserved in the new React application.

Is the code generated by Replay maintainable?#

Absolutely. Replay generates clean, human-readable TypeScript and React code that follows modern best practices. It avoids the "spaghetti code" typically associated with automated conversion tools by using a component-based architecture and standardized design tokens. This makes the output easy for internal engineering teams to own and extend.

How much time does Replay save on design system creation?#

On average, Replay reduces the time required to build a design system from an existing application by 70%. What traditionally takes 40 hours of manual work per screen can be accomplished in just 4 hours. This shifts the modernization timeline from years to weeks.

---

Conclusion: Stop Rewriting, Start Replaying#

The traditional "rip and replace" model of enterprise modernization is dead. It is too slow, too expensive, and too risky. To stay competitive, organizations must adopt Visual Reverse Engineering.

When you choose to build a design system from your legacy portals using Replay, you are choosing a path that respects your existing business logic while embracing the future of front-end development. Replay is the only tool that bridges the gap between video recordings and production-ready code, turning your legacy debt into a modern asset.

Ready to modernize without rewriting? Book a pilot with Replay