> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Converting Design Systems

> Switch a design from one Design System to another

## Overview

Converting Design Systems allows you to take any existing design and convert it to use a different [Design System](/documentation/design-systems/overview). The AI attempts to rewrite your code to match the new Design System's styling and components while keeping the same views and functionality.

## When to Convert

This feature is helpful when you want to:

* Switch [Design Systems](/documentation/design-systems/overview): move a design from one Design System to another
* Apply a new brand: update an existing design to match a newly created [Design System](/documentation/design-systems/overview)
* Explore variations: see how your design looks with different styling rules
* Standardize old designs: bring legacy designs up to date with your current [Design System](/documentation/design-systems/overview)

## How to Convert

<Frame>
  <img src="https://cdn.magicpatterns.com/static/docs/convert.gif" />
</Frame>

<Steps>
  <Step title="Open the design you want to convert">
    Navigate to the design you want to change the Design System for in the
    editor.
  </Step>

  <Step title="Click Convert in the dropdown">
    Click the **Convert** button in the top bar of the editor. This opens the
    [Design System](/documentation/design-systems/overview) conversion dialog.
  </Step>

  <Step title="Choose your target Design System">
    Select the [Design System](/documentation/design-systems/overview) you want
    to convert to from the dropdown menu.
  </Step>

  <Step title="Review the conversion">
    A new design will be generated in a separate tab with your design migrated
    to the new [Design System](/documentation/design-systems/overview). The
    original design remains unchanged.
  </Step>
</Steps>