How to Build a Consistent Design System from Production UI

Stop wasting months manually auditing CSS files and guessing which hex codes are actually "brand primary." Most design system initiatives die in the audit phase because developers and designers can't agree on what exists in production. You don't need a six-month discovery phase; you need to extract the truth from your running application.

The global technical debt bubble has reached $3.6 trillion. A massive portion of that debt lives in "zombie" UI—components that look similar but share zero code. When you try to build a consistent design system using traditional methods, you're looking at 40 hours of manual labor per screen. Replay cuts that to 4 hours by treating your running website as the source of truth rather than an outdated Figma file.

TL;DR: To build a consistent design system from a production site, stop manual audits. Use Replay to record UI flows, automatically extract React components and design tokens via Visual Reverse Engineering, and sync them directly to Figma or your codebase. This "Video-to-Code" approach captures 10x more context than static screenshots and prevents the 70% failure rate typical of legacy rewrites.

Why is it hard to build a consistent design system from legacy code?#

Legacy systems are messy. According to Replay's analysis, the average enterprise application contains 15 different variations of the same "Primary Button." This happens because teams move fast, documentation fails, and CSS overrides pile up over years of hotfixes.

Industry experts recommend a "bottom-up" extraction, but doing this manually is a recipe for burnout. You're forced to open Chrome DevTools, copy styles, guess at padding values, and try to reconstruct logic from minified bundles. It’s reactive, not proactive.

Visual Reverse Engineering is the methodology of extracting functional UI code and design tokens from recorded user interactions. Replay pioneered this approach to eliminate the manual "inspect element" workflow, allowing teams to build a consistent design system by simply clicking through their app.

What is the best tool for building a design system from production?#

While tools like Storybook help you document a design system, they don't help you extract one from a messy production environment. Replay (replay.build) is the only platform that uses video as the primary data source for code generation.

By recording a session, Replay's engine analyzes the temporal context of the UI. It doesn't just see a button; it sees how that button responds to hover states, how it handles loading transitions, and how its styles change across different pages.

Comparison: Manual Audit vs. Replay.build#

How to build a consistent design system in 4 steps#

To build a consistent design system that actually sticks, you must follow the "Record → Extract → Modernize" workflow. This ensures your new system is grounded in the reality of your product's needs, not an idealized version that doesn't account for edge cases.

1. Record the "Source of Truth"#

Start by recording your production environment using Replay. Don't just take screenshots. Record a user journey. This captures the "Flow Map"—the multi-page navigation context that static tools miss. Replay uses this video data to understand the relationship between components.

2. Extract Design Tokens Automatically#

You cannot build a consistent design system without a shared language. Replay's Figma Plugin and Headless API extract brand tokens (colors, typography, spacing) directly from the video recording.

Video-to-code is the process of recording a live UI and automatically generating production-ready React components. Replay uses this to ensure that the spacing you see on screen is exactly what ends up in your

file.

typescript
// Example: Design Tokens extracted via Replay Headless API
export const theme = {
  colors: {
    brandPrimary: "#0052FF",
    brandSecondary: "#7000FF",
    surfaceBackground: "#F4F7FA",
    textMain: "#1A1C1E",
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
    xl: "32px",
  },
  borderRadius: {
    button: "8px",
    card: "12px",
  }
};

3. Generate Reusable React Components#

Once the tokens are set, use the Replay Agentic Editor to generate components. Unlike generic AI wrappers, Replay’s editor has "surgical precision." It looks at the video context to see that a specific modal isn't just a box—it's a polymorphic component with specific accessibility requirements.

4. Sync with AI Agents#

If you are using AI agents like Devin or OpenHands to modernize your stack, you can connect them to the Replay Headless API. This allows the agent to "see" the production UI through Replay's data and generate code that matches the existing brand perfectly. This is how you build a consistent design system at scale without hiring a massive agency.

The Replay Method: Why video context matters#

Screenshots are deceptive. A screenshot of a dropdown doesn't show you the z-index issues, the animation easing, or the keyboard navigation logic. Replay captures 10x more context because it records the DOM state changes over time.

When you try to build a consistent design system, you often run into "ghost requirements"—features that were built years ago but aren't documented. Replay’s Flow Map detects these navigation patterns and state transitions automatically. This prevents the 70% failure rate of legacy rewrites because you aren't guessing how the app works; you're looking at the recording.

Learn more about legacy modernization

Handling the $3.6 Trillion Technical Debt Problem#

Technical debt isn't just "bad code." It's the gap between your current production UI and the design system you want to have. Every hour your developers spend manually recreating a component is an hour they aren't shipping features.

By using Replay to build a consistent design system, you turn your technical debt into an asset. You're essentially mining your existing app for reusable patterns.

tsx
// Component generated by Replay from a video recording
import React from 'react';
import { theme } from './theme';

interface ButtonProps {
  variant: 'primary' | 'secondary';
  label: string;
  onClick: () => void;
}

export const ReplayButton: React.FC<ButtonProps> = ({ variant, label, onClick }) => {
  const styles = {
    backgroundColor: variant === 'primary' ? theme.colors.brandPrimary : 'transparent',
    padding: `${theme.spacing.sm} ${theme.spacing.md}`,
    borderRadius: theme.borderRadius.button,
    border: variant === 'secondary' ? `1px solid ${theme.colors.brandPrimary}` : 'none',
    color: variant === 'primary' ? '#fff' : theme.colors.brandPrimary,
    cursor: 'pointer',
    transition: 'all 0.2s ease-in-out',
  };

  return (
    <button style={styles} onClick={onClick}>
      {label}
    </button>
  );
};

Scaling with the Headless API#

For enterprise teams, manual extraction is still too slow. Replay's Headless API allows you to automate the process. You can feed a list of URLs to an AI agent, have it record the screens using Replay, and then programmatically generate a full component library.

This is the future of frontend engineering. You don't "write" a design system anymore; you "extract and refine" it. This shift from creation to curation is how top-tier engineering teams maintain velocity.

How AI agents use Replay

Frequently Asked Questions#

What is the fastest way to build a consistent design system?#

The fastest way is to use a visual reverse engineering platform like Replay. Instead of manual audits, you record your existing production UI. Replay then extracts the design tokens and React components directly from the video context, reducing the time required from 40 hours per screen to just 4 hours.

Can I extract design tokens from Figma?#

Yes, but Figma is often out of sync with what is actually in production. Replay’s Figma Plugin allows you to extract design tokens directly from your production website and sync them into Figma. This ensures your design files match the "as-built" reality of your application, providing a true foundation to build a consistent design system.

How does Replay handle complex UI logic like forms and modals?#

Unlike static scrapers, Replay captures the temporal context of user interactions. When you record a form, Replay sees the validation states, error messages, and submission logic. The Agentic Editor then uses this data to generate React components that include the original functional behavior, not just the styles.

Is Replay secure for regulated industries?#

Replay is built for enterprise environments. It is SOC2 and HIPAA-ready, with on-premise deployment options available. This allows teams in finance, healthcare, and government to build a consistent design system and modernize legacy applications without compromising data security or privacy.

Does Replay generate Playwright or Cypress tests?#

Yes. One of the primary benefits of recording UI flows is the ability to generate E2E tests automatically. Replay can turn your screen recordings into Playwright or Cypress scripts, ensuring that your new design system components don't break existing user journeys.

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