The Magic Patterns Chrome Extension lets you convert any website into a React code and then edit with AI on the Magic Patterns platform. It is a great way to get your existing design context into a Magic Patterns project because you can use the extension on any website, even localhost. Install it now.

​
Converting the Extension’s output to your component library

Our Chrome Extension extracts the HTML from a given website 1:1. But that HTML code tends to not be human readable, and is not AI-friendly. So, you can convert it to a different “preset” on Magic Patterns to make it more easier for our AI to understand.

We highly recommend using our Convert feature after using our Chrome Extension. The convert features make the output more AI-friendly, so that you can chat with it to make your own edits.

​
Steps to Convert

1

After using the Chrome Extension to extract the HTML, in the menu bar, select 'Convert'

2

Choose which design system you want to use.

3

Our AI will then convert the HTML, so that you can now chat with it and make it your own!

​
Chrome Extension Examples

Here’s some real examples if you’re curious what the final output looks like:

Was this page helpful?

Export to FigmaHow to edit a design