> ## 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.

# Welcome

> Magic Patterns is an AI design tool for product teams. Use it to create prototypes using your real design system, handoff to engineering, and speed up your software development lifecycle.

<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 />

## Who Magic Patterns is for

* **Product managers** — Keep work anchored to your [design system](/documentation/design-systems/overview) while you ship interactive prototypes quickly, gate previews with [password protection](/documentation/publishing/password-protection), and reuse flows from [templates](/documentation/editor/templates).
* **Designers** — Build on the [canvas](/documentation/projects/getting-started) with your [design system](/documentation/design-systems/overview), and [import from Figma](/documentation/importing/import-from-figma) to stay aligned with your design files.
* **Engineers** — Connect Magic Patterns to your toolchain with the [MCP server](/documentation/features/mcp-server/overview) and [our tools](/documentation/features/mcp-server/available_tools) for roundtrip design and code.
* **Marketing, sales, website builders** — [Share](/documentation/editor/sharing) polished previews with customers and stakeholders, including [published URLs](/documentation/publishing/publish-url) and [hosting on a custom domain](/documentation/get-started/custom-domain).

## Getting Started

Open [magicpatterns.com](https://www.magicpatterns.com/), describe the screen or flow you want, and refine from there. Upload a screenshot when you have one.

When you are ready to go deeper: read [how to prompt](/documentation/editor/how-to-prompt), using your real [design system](/documentation/design-systems/overview), [team workspaces](/documentation/collaboration/team-workspaces), and [engineering handoff with our MCP server](/documentation/features/mcp-server/overview) are all documented here.

<CardGroup cols={2}>
  <Card title="Credits and Plans" icon="credit-card" href="/documentation/get-started/credits-and-billing">
    Understand plans, credits, on-demand usage, and billing.
  </Card>

  <Card title="How to Prompt" icon="graduation-cap" href="/documentation/editor/how-to-prompt">
    Write prompts that produce clearer UI and fewer rework cycles.
  </Card>

  <Card title="Canvas" icon="rectangle-history-circle-plus" href="/documentation/projects/getting-started">
    Organize designs and collaborate in one place.
  </Card>

  <Card title="Video Tutorials" icon="circle-play" href="/documentation/tutorials/video-tutorials">
    Watch walkthroughs and short tutorials at your own pace.
  </Card>
</CardGroup>