> ## Documentation Index
> Fetch the complete documentation index at: https://www.magicpatterns.com/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](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md). 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](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md): move a design from one Design System to another
* Apply a new brand: update an existing design to match a newly created [Design System](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md)
* 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](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md)

## How to Convert

![](https://cdn.magicpatterns.com/static/docs/convert.gif)

**1. Open the design you want to convert**

Navigate to the design you want to change the Design System for in the
editor.

**2. Click Convert in the dropdown**

Click the **Convert** button in the top bar of the editor. This opens the
[Design System](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md) conversion dialog.

**3. Choose your target Design System**

Select the [Design System](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md) you want
to convert to from the dropdown menu.

**4. Review the conversion**

A new design will be generated in a separate tab with your design migrated
to the new [Design System](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md). The
original design remains unchanged.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.