Build a Landing Page

Internet Design to React Component

How to Collaborate and Use Projects in Magic Patterns

Platform Overview

Watch how we use Magic Patterns to create designs

Basic Video Tutorials

Magic Patterns

The AI prototyping platform for product teams. Use your existing components, build interactive designs, and collaborate with your team

Welcome to Magic Patterns

Frequently Asked Questions about Magic Patterns

View the latest updates and releases on Magic Patterns

Changelog

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

Prompting Dos and Don'ts

Use presets to create a default prompt for the AI

Presets - Consistent Styles

Troubleshooting

Watch how we use Magic Patterns to create a landing page

Build a Landing Page (16 mins)

Watch how we use Magic Patterns to recreate an existing design

Build an Existing Design (6 mins)

Watch an overview of features and how to use Magic Patterns

How to Use (11 mins)

How to build prototypes that actually look like your product

Building Prototypes (12 mins)

Case Studies

Community

YouTube

Start designing

Talk to us

Idea to functional frontend with nothing but words

How to Prompt

Build multi-page designs with real routes and dynamic navigation

Adding Pages

Using the Canvas

Navigating

Start from scratch or import an existing design

Create your first screen

References are a way to add context to your prompts

References

Link together screens and get an embeddable prototype

Linking Screens Together

Prompt templates

How to share designs created in Magic Patterns canvases

Sharing designs

Collaborate with your team, manage brand assets, and control access from one central workspace

Team Workspaces

How to share Magic Patterns chats and canvases

Sharing with Teammates

Bring your custom branding and design system into Magic Patterns

Overview

Get inspiration from any website, then edit with AI

Import existing designs

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 fork Magic Patterns chats and canvases

Forking

Learn how to integrate user analytics into your Magic Patterns design

Integration with User Analytics

Learn how to integrate EmailJS to send emails directly from your Magic Patterns design

Integration with EmailJS

Introduction

Learn how to replicate an existing product

Your First Prototype

Improving Your Design

Prompting Techniques

Collect customer and stakeholder feedback directly in Magic Patterns

Collecting Feedback

Leverage these workflows to prototype 5x faster

Team Workflows

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.

Overview

Tips and Tricks

Features

Exports & Integrations

Learn: Magic Patterns University

Security & Legal

API

Basic Video Tutorials

Build a Landing Page

Internet Design to React Component

How to Collaborate and Use Projects in Magic Patterns

Platform Overview

Overview

Tips and Tricks

Features

Exports & Integrations

Learn: Magic Patterns University

Security & Legal

API

​Build a Landing Page

​Internet Design to React Component

​How to Collaborate and Use Projects in Magic Patterns

​Platform Overview

Build a Landing Page

Internet Design to React Component

How to Collaborate and Use Projects in Magic Patterns

Platform Overview