Build a Landing Page

Internet Design to React Component

Watch how we use Magic Patterns to create designs.

Video Tutorials

Magic Patterns

Go from idea to app with our AI-powered design tool.

Welcome to Magic Patterns

Frequently Asked Questions about Magic Patterns

The best language to use when writing your prompt on Magic Patterns

Prompting Dos and Don'ts

Use presets to create your own saved custom theme or style.

Consistent Styles

Idea to functional frontend with nothing but words.

Editing with Context

Case Studies

Community

YouTube

Start designing

Talk to us

Export your designs to Figma, sync back and forth with Github, or host on a custom domain.

Overview of Exporting

Generate designs and then export them to Figma.

Export to Figma

Generate designs and then sync them to Github.

Sync to Github

Host on a Custom Domain

To download a `.zip` of all the code, click the Export button in the top right corner of the screen.

Download Code

How to share Magic Patterns chats and projects

Sharing with Teammates

Projects in Magic Patterns are an infinite canvas, like Figma.

Getting Started

Getting around the Magic Patterns canvas.

Navigating

Start from scratch or import an existing design.

Create your first screen

References are a powerful way to add context to your prompts.

References

Link together screens and get an embeddable prototype.

Prototyping

Prompt templates

How to share designs created in Magic Patterns projects

Sharing designs in projects

Get inspiration from any website, then edit with AI

Import existing designs

Acceptable Use Policy

Privacy Policy

Terms of Service

Overview of Magic Patterns for Enterprises

Enterprises

Magic Patterns' security model includes many considerations and initiatives

Security

How to get started with the Magic Patterns API

API Product Overview

Creates a new design based on the provided prompt and optional images. This version supports both default and custom preset configurations.

Create a new design (V2)

This endpoint will be deprecated. Please use v2. This endpoint creates a new design based on the provided prompt, design system, and styling preferences. Optionally, an image can be included in the request to influence the design.

Overview

Tips and Tricks

User Guides

Security & Legal

API

Video Tutorials

Build a Landing Page

Internet Design to React Component

Overview

Tips and Tricks

User Guides

Security & Legal

API

​Build a Landing Page

​Internet Design to React Component

Build a Landing Page

Internet Design to React Component