More than 30,000 designers, developers, and founders use Magic Patterns every day to create mockups with AI. Startups and large enterprises use Magic Patterns to save money on designs and ship faster.

Generating your first design

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.

Adding a design to a 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. You can also use 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.

Other Magic Patterns Features

Chrome Extension: Get inspiration from any website, then edit with AI

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: Bring generations into 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