# Magic Patterns

## Docs

- [API Product Overview](https://magicpatterns.mintlify.dev/docs/documentation/api/getting-started.md): How to get started with the Magic Patterns API
- [Inline Comments](https://magicpatterns.mintlify.dev/docs/documentation/collaboration/inline-comments.md): Leave feedback directly on specific elements in a design
- [Team Workspaces](https://magicpatterns.mintlify.dev/docs/documentation/collaboration/team-workspaces.md): Invite team members, manage your brand context, and configure workspace settings.
- [Connectors](https://magicpatterns.mintlify.dev/docs/documentation/connectors/connectors.md): Connect your tools, databases, and apps to Magic Patterns for more relevant AI responses.
- [Detaching Components](https://magicpatterns.mintlify.dev/docs/documentation/custom-components/detach-components.md): Detach components from your Design System to create one-off customizations
- [Components](https://magicpatterns.mintlify.dev/docs/documentation/custom-components/using-components.md): Reuse your custom components in your designs
- [Overview](https://magicpatterns.mintlify.dev/docs/documentation/design-systems/overview.md): Quickly set up your design system in Magic Patterns
- [Colors](https://magicpatterns.mintlify.dev/docs/documentation/design-systems/self-serve/colors.md): Define your color palette for AI generation and Visual Edit
- [Converting Design Systems](https://magicpatterns.mintlify.dev/docs/documentation/design-systems/self-serve/converting-design-systems.md): Switch a design from one Design System to another
- [Getting Started](https://magicpatterns.mintlify.dev/docs/documentation/design-systems/self-serve/overview.md): Self-serve Design System setup in Magic Patterns
- [Rules](https://magicpatterns.mintlify.dev/docs/documentation/design-systems/self-serve/rules.md): Define default styling rules for consistent designs
- [Best Practices](https://magicpatterns.mintlify.dev/docs/documentation/design-systems/using-your-real-design-system/best-practices.md): Document components so the AI chooses the right APIs and variants
- [Component Code](https://magicpatterns.mintlify.dev/docs/documentation/design-systems/using-your-real-design-system/component-code.md): How to share component source for rendering and handoff import paths
- [Multiple Packages](https://magicpatterns.mintlify.dev/docs/documentation/design-systems/using-your-real-design-system/multiple-packages.md): Monorepos, tokens, and how we sync across related packages
- [Getting Started](https://magicpatterns.mintlify.dev/docs/documentation/design-systems/using-your-real-design-system/overview.md): Connect your React component library so the AI uses your real code
- [Forking](https://magicpatterns.mintlify.dev/docs/documentation/editor/forking.md): Use forking for debugging, collaboration, and to explore new ideas
- [How to Prompt](https://magicpatterns.mintlify.dev/docs/documentation/editor/how-to-prompt.md): Prompt like a pro with Magic Patterns.
- [Merging Designs](https://magicpatterns.mintlify.dev/docs/documentation/editor/merging-designs.md): Combine multiple designs into one by copying code or linking URLs
- [Sharing Designs](https://magicpatterns.mintlify.dev/docs/documentation/editor/sharing.md): How to share Magic Patterns designs
- [Templates](https://magicpatterns.mintlify.dev/docs/documentation/editor/templates.md): Organize and reuse your designs with Templates
- [Enterprises](https://magicpatterns.mintlify.dev/docs/documentation/enterprise/overview.md): Overview of Magic Patterns for Enterprises
- [Security](https://magicpatterns.mintlify.dev/docs/documentation/enterprise/security.md): Magic Patterns' security model includes many considerations and initiatives
- [SSO, SCIM & Domain Setup](https://magicpatterns.mintlify.dev/docs/documentation/enterprise/sso-scim-setup.md): Learn how to set up Single Sign-On (SSO), SCIM directory sync, and domain capture for your workspace
- [Overview of exporting](https://magicpatterns.mintlify.dev/docs/documentation/exporting/overview.md): Export your designs to Figma, sync back and forth with Github, or download your code.
- [Changelog](https://magicpatterns.mintlify.dev/docs/documentation/feature-releases/changelog.md): View the latest updates and releases on Magic Patterns
- [MCP Tools & Workflows](https://magicpatterns.mintlify.dev/docs/documentation/features/mcp-server/available_tools.md): Tools available from the Magic Patterns MCP server and how to use them
- [Overview of MCP](https://magicpatterns.mintlify.dev/docs/documentation/features/mcp-server/overview.md): Workflow to go roundtrip between design and code
- [Features](https://magicpatterns.mintlify.dev/docs/documentation/features/overview.md): Explore all the features Magic Patterns has to offer
- [Adding Multiple Pages](https://magicpatterns.mintlify.dev/docs/documentation/get-started/adding-pages.md): Build multi-page designs with real routes and dynamic navigation
- [Import from Website](https://magicpatterns.mintlify.dev/docs/documentation/get-started/chrome-extension.md): Get inspiration from any website, then edit with AI
- [Copy Code as Prompt](https://magicpatterns.mintlify.dev/docs/documentation/get-started/copy-code-as-prompt.md): Take your Magic Patterns design from idea to production using AI code editors
- [Credits and Plans](https://magicpatterns.mintlify.dev/docs/documentation/get-started/credits-and-billing.md): Learn how plans, credits, on-demand usage, and billing work in Magic Patterns.
- [Host on a Custom Domain](https://magicpatterns.mintlify.dev/docs/documentation/get-started/custom-domain.md): Connect your own domain to your Magic Patterns design
- [Download Design as Code](https://magicpatterns.mintlify.dev/docs/documentation/get-started/download-code.md): To download a `.zip` of all the code, click the Export button in the top right corner of the screen
- [Common Questions](https://magicpatterns.mintlify.dev/docs/documentation/get-started/faq.md): Frequently Asked Questions about Magic Patterns
- [Export to Figma](https://magicpatterns.mintlify.dev/docs/documentation/get-started/figma-plugin.md): Generate designs and then export them to Figma
- [Typography and Icons](https://magicpatterns.mintlify.dev/docs/documentation/get-started/fonts.md): Learn how to use custom fonts in your Magic Patterns designs
- [Welcome](https://magicpatterns.mintlify.dev/docs/documentation/get-started/introduction.md): 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.
- [Support](https://magicpatterns.mintlify.dev/docs/documentation/get-started/support.md): How to get help with Magic Patterns
- [Sync with Github](https://magicpatterns.mintlify.dev/docs/documentation/get-started/sync-to-github.md): Generate designs and then sync them with Github
- [Building Your First Prototype](https://magicpatterns.mintlify.dev/docs/documentation/guide/building-your-first-prototype.md): Visual edit, prompting, and the /Inspiration command
- [Design Systems](https://magicpatterns.mintlify.dev/docs/documentation/guide/design-systems.md): Overview of rules, typography, colors, components, and leveraging your real design system.
- [Engineering Handoff](https://magicpatterns.mintlify.dev/docs/documentation/guide/engineering-handoff.md): Export, sync, and MCP for IDE and agent workflows
- [Importing from Figma](https://magicpatterns.mintlify.dev/docs/documentation/guide/figma-imports.md): Bring in existing UI
- [Improving Your Prompts](https://magicpatterns.mintlify.dev/docs/documentation/guide/improving-your-prompts.md): Troubleshooting, routes, merging designs, and Rules for context
- [Introduction](https://magicpatterns.mintlify.dev/docs/documentation/guide/introduction.md): AI prototyping with Magic Patterns
- [Team Workflows and Sharing](https://magicpatterns.mintlify.dev/docs/documentation/guide/team-workflows-and-sharing.md): Sharing, inline comments, and templates
- [Import from Figma](https://magicpatterns.mintlify.dev/docs/documentation/importing/import-from-figma.md): Import designs from Figma to Magic Patterns
- [Anthropic](https://magicpatterns.mintlify.dev/docs/documentation/integrations/anthropic.md): Learn how to integrate Anthropic into your Magic Patterns design
- [Collecting Feedback](https://magicpatterns.mintlify.dev/docs/documentation/integrations/collecting-feedback.md): Gather structured feedback from external users on your prototypes
- [EmailJS](https://magicpatterns.mintlify.dev/docs/documentation/integrations/emailjs.md): Learn how to integrate EmailJS to send emails directly from your Magic Patterns design
- [Google Analytics](https://magicpatterns.mintlify.dev/docs/documentation/integrations/google-analytics.md): Learn how to integrate Google Analytics into your Magic Patterns design
- [Google Sheets](https://magicpatterns.mintlify.dev/docs/documentation/integrations/google-sheets.md): Learn how to save submissions to Google Sheets from your Magic Patterns design
- [Meta Pixel](https://magicpatterns.mintlify.dev/docs/documentation/integrations/meta-pixel.md): Learn how to integrate a Meta Pixel into your Magic Patterns design
- [OpenAI](https://magicpatterns.mintlify.dev/docs/documentation/integrations/openai.md): Learn how to integrate OpenAI into your Magic Patterns design
- [Overview](https://magicpatterns.mintlify.dev/docs/documentation/integrations/overview.md): Every third-party service Magic Patterns connects to
- [PostHog](https://magicpatterns.mintlify.dev/docs/documentation/integrations/posthog.md): Learn how to integrate PostHog into your Magic Patterns design
- [Shopify](https://magicpatterns.mintlify.dev/docs/documentation/integrations/shopify.md): Create a landing page in Magic Patterns that links directly to your Shopify store
- [Creating your first screen](https://magicpatterns.mintlify.dev/docs/documentation/projects/creating-new-screens.md): Start from scratch or import an existing design
- [Using the Canvas](https://magicpatterns.mintlify.dev/docs/documentation/projects/getting-started.md): Use the Canvas to organize your designs
- [Sharing designs](https://magicpatterns.mintlify.dev/docs/documentation/projects/how-to-share.md): How to share designs created in Magic Patterns canvases
- [Navigating](https://magicpatterns.mintlify.dev/docs/documentation/projects/navigating.md): Getting around the Magic Patterns canvas
- [Using Prompt Templates](https://magicpatterns.mintlify.dev/docs/documentation/projects/prompt-templates.md): Example prompts within the canvas
- [Linking Screens Together](https://magicpatterns.mintlify.dev/docs/documentation/projects/prototyping.md): Link together screens and get an embeddable prototype
- [Using References](https://magicpatterns.mintlify.dev/docs/documentation/projects/using-references.md): References are a way to add context to your prompts
- [Website Metadata](https://magicpatterns.mintlify.dev/docs/documentation/publishing/metadata.md): Customize your website metadata, such as your favicon and description
- [Password Protection](https://magicpatterns.mintlify.dev/docs/documentation/publishing/password-protection.md): Restrict access to your published designs with password protection
- [Custom Publish URL](https://magicpatterns.mintlify.dev/docs/documentation/publishing/publish-url.md): Publish your design to a custom Magic Patterns URL
- [Troubleshooting](https://magicpatterns.mintlify.dev/docs/documentation/troubleshooting/overview.md): Helpful tips for resolving issues
- [Video Tutorials](https://magicpatterns.mintlify.dev/docs/documentation/tutorials/video-tutorials.md): Watch how to use Magic Patterns to create designs
- [Create a new design (V2)](https://magicpatterns.mintlify.dev/docs/patterns/v2-create-a-new-design.md): Creates a new design based on the provided prompt and optional images. This version supports custom design systems.

## OpenAPI Specs

- [openapi](https://magicpatterns.mintlify.dev/docs/openapi.yml)