## Who Magic Patterns is for

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

## Getting Started

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