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

# Welcome

> The AI-native workspace for designing your product. Start from your existing product & design system. <br/>Plan, explore & design variants quickly, hand off to code.

[Introducing Magic Patterns - The AI Design Tool](https://www.youtube.com/embed/ciDeKBsJsxM?si=Gwnat1zuSoP6jvsE)

## Who Magic Patterns is for

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

## 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](https://www.magicpatterns.com/docs/documentation/editor/how-to-prompt.md), using your real [design system](https://www.magicpatterns.com/docs/documentation/design-systems/overview.md), [team workspaces](https://www.magicpatterns.com/docs/documentation/collaboration/team-workspaces.md), and [engineering handoff with our MCP server](https://www.magicpatterns.com/docs/documentation/features/mcp-server/overview.md) are all documented here.

> [card] [MagicOS](https://www.magicpatterns.com/docs/documentation/magic-os/overview.md)
>
> An infinite design canvas where your ideas, inspiration, designs, and decisions live together.

> [card] [Credits and Plans](https://www.magicpatterns.com/docs/documentation/get-started/credits-and-billing.md)
>
> Understand plans, credits, on-demand usage, and billing.

> [card] [How to Prompt](https://www.magicpatterns.com/docs/documentation/editor/how-to-prompt.md)
>
> Write prompts that produce clearer UI and fewer rework cycles.

> [card] [Video Tutorials](https://www.magicpatterns.com/docs/documentation/tutorials/video-tutorials.md)
>
> Watch walkthroughs and short tutorials at your own pace.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.