> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Video Tutorials

> Watch how to use Magic Patterns to create designs

Subscribe on **[YouTube @magicpatterns](https://www.youtube.com/@magicpatterns)** for new walkthroughs and product updates. Follow us on **[LinkedIn](https://www.linkedin.com/company/magicpatterns)** and **[X @magicpatterns](https://x.com/magicpatterns)**.

## Introducing Magic Patterns

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/0siiA1_GkqQ?si=LnfXnL52dTdoJGMw" title="Introducing Magic Patterns - The AI Design Tool" alt="Introducing Magic Patterns - The AI Design Tool" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Building Your First Prototype

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/7vVcU17hUJ4?si=Pld9r8mwWo_d5g0d" title="Building Your First Prototype" alt="Building Your First Prototype" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Improving Your Prompts

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/cwKjnBqOttw?si=ggLxQuErfJUQwDmn" title="Improving Your Prompts" alt="Improving Your Prompts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Importing

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/v1lg-WHYwAc?si=NEFmEeCEyo5rhUEL" title="Importing" alt="Importing" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Design Systems

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/obZRvV-w_WQ?si=GBDXni7qZ6rnBZOu" title="Design Systems" alt="Design Systems" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Team Workflows and Sharing

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/KMd_1dNQLeI?si=9xAlg5KBE941_5sP" title="Team Workflows and Sharing" alt="Team Workflows and Sharing" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Engineering Handoff

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/8ht6sEo2iwU?si=-HxgPXdaYgkpQFs3" title="Engineering Handoff" alt="Engineering Handoff" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Build a Landing Page

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/41qt6I87_cQ?si=BaGQXgbR9Xy6D6sC" title="Build a Landing Page with Magic Patterns" alt="Build a Landing Page with Magic Patterns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Visual Edit

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/AU-up911buI" title="Visual Edit Tutorial" alt="Visual Edit Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## MCP Server

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/2QOc6vXftHo" title="Magic Patterns MCP Overview" alt="Magic Patterns MCP Overview" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Canvas

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/nB4FNx4hmLY" title="Introduction to the Canvas" alt="Introduction to the Canvas" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Commenting

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/L2FcQZsGJxc?si=YvumWJg88dYZ2Fam" title="Collecting Feedback Tutorial" alt="Collecting Feedback Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Internet Design to React Component

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/CO6plbLWuaU?si=EhfdGrbauGsMgt7S" title="Internet design to React component with Magic Patterns" alt="Internet design to React component with Magic Patterns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />