Introduction

​

Getting started with Magic Patterns:

​

Generating your first design in our chat editor

To get started, visit www.magicpatterns.com and type in the input box what you want to create. After the first generation, you can rapidly iterate in our chat editor. When you’re done, you can share the link with your colleagues, copy the code, export to Figma, or add it to a Magic Patterns project.

​

Linking designs together in a Magic Patterns project

Projects are our version of an infinite canvas, like Figma. Within a project, you can have many designs and use referencing to generate new designs using as a reference as a starting point or prototyping to link screens together.

You can add a design to a project by clicking on the three dots in the menu bar and then ‘Add to Project’.

Read more about Projects here.

​

Advanced Features

​

Chrome Extension

The Magic Patterns Chrome Extension lets you convert any website into a React code and then edit with AI. 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. Read more about the Chrome Extension here or install it now.

​

Export to Figma

The Magic Patterns Figma Plugin lets you export designs created within Magic Patterns into Figma. Read more about our Figma Plugin here.

​

More about Magic Patterns