Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.
1
Navigate to the 'Share' button
2
Select 'Agents' and connect Cursor or Claude Code
Was this page helpful?
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Magic Patterns","description":"Magic Patterns is an AI design tool for product teams. Create prototypes with your real design system, hand off to engineering, and speed up your software development lifecycle.","colors":{"primary":"#9784BF","light":"#FFFFFF","dark":"#001617"},"logo":{"light":"https://mintcdn.com/magicpatterns/owWJh7xQtXBlIJ16/logo/magicpatterns_logo_light.svg?fit=max\u0026auto=format\u0026n=owWJh7xQtXBlIJ16\u0026q=85\u0026s=2a7a773a8194091ebfe3e1c0104f2c92","dark":"https://mintcdn.com/magicpatterns/owWJh7xQtXBlIJ16/logo/magicpatterns_logo_dark.svg?fit=max\u0026auto=format\u0026n=owWJh7xQtXBlIJ16\u0026q=85\u0026s=20e5d64413256401004cd68c98e798d0"},"favicon":"https://mintcdn.com/magicpatterns/owWJh7xQtXBlIJ16/icon.svg?fit=max\u0026auto=format\u0026n=owWJh7xQtXBlIJ16\u0026q=85\u0026s=7854f15b01790c1d076cf1f1e10c61b0","api":{"openapi":["openapi-v3.yml","openapi.yml"]},"navbar":{"links":[{"href":"https://www.magicpatterns.com/customers","label":"Case Studies"}],"primary":{"type":"button","label":"Start designing","href":"https://www.magicpatterns.com"}},"footer":{"socials":{"twitter":"https://x.com/magicpatterns","github":"https://github.com/magicpatterns","linkedin":"https://www.linkedin.com/company/magicpatterns"}},"integrations":{"intercom":{"appId":"ftkg08cn"}},"contextual":{"options":["copy","view","chatgpt","claude","cursor"],"display":"header"},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"magicpatterns","hasAudioNarration":false,"actualSubdomain":"magicpatterns","customDomains":["www.magicpatterns.com"],"gitSource":{"type":"github","owner":"magicpatterns","repo":"patterns","deployBranch":"main","contentDirectory":"docs","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6aecbba141290b71c3828cbd","collectionId":"2e385020-b02a-471f-85a4-79efe7f6e8f4","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6aecbba141290b71c3828cbd"},"feedback":{"thumbs":true,"edits":false,"issues":false},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6aece1b3a84f97fba518a7c7","clientVersion":"0.0.4076","searchFilterCounts":[{"language":"default","tag":"Publish and Integrate","count":37},{"language":"default","tag":"Designs","count":18},{"language":"default","tag":"Introduction","count":15},{"language":"default","tag":"API","count":14},{"language":"default","tag":"Design Systems","count":14},{"language":"default","tag":"Integrations","count":11},{"language":"default","tag":"Teams and Enterprise","count":9},{"language":"default","tag":"Workflows and Video Guide","count":8},{"language":"default","tag":"Prompting and iterating","count":6},{"language":"default","tag":"Importing your Design System","count":6}]},"assistantConfig":{"deflection":{"enabled":true,"email":"support@magicpatterns.com","showHelpButton":true}},"basePath":"/docs","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[],"googleFontsInlined":false},"customCss":[{"filePath":"style.css","content":".nav-tabs-item[href^=\"/documentation/magic-os/\"]::after{content:\"NEW\";margin-left:0.375rem;padding:0.0625rem 0.375rem;border-radius:9999px;font-size:0.625rem;font-weight:600;line-height:1rem;color:rgb(var(--primary));background-color:rgb(var(--primary) / 0.1)}"}],"page":{"pagePath":"documentation/get-started/download-code","slug":"/documentation/get-started/download-code","pageMetadata":{"title":"Bring your designs into code","description":"Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.","icon":"code","href":"/documentation/get-started/download-code"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const{Frame,OptimizedImage,Step,Steps}={..._provideComponents(),...props.components};if(!Frame)_missingMdxReference(`Frame`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Step)_missingMdxReference(`Step`,true);if(!Steps)_missingMdxReference(`Steps`,true);return _jsxs(Steps,{children:[_jsx(Step,{title:`Navigate to the 'Share' button`,children:_jsx(Frame,{children:_jsx(OptimizedImage,{className:`mint-w-[90%]`,src:`https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/share-button-agents.png?fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=75b11cb4017241100b9d773e3169067c`,alt:`Share button in the top right of Magic Patterns`,\"data-og-width\":`982`,width:`982`,\"data-og-height\":`408`,height:`408`,\"data-path\":`documentation/exporting/images/share-button-agents.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/share-button-agents.png?w=280\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=762818f662deb3ea1b8a1b8336031938 280w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/share-button-agents.png?w=560\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=38b79e425481b1e4654edaf06122ed94 560w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/share-button-agents.png?w=840\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=b360b3c5cd6a168e4dd30b8425015af1 840w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/share-button-agents.png?w=1100\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=26e09a2ef20753ec8f23f5f15a836044 1100w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/share-button-agents.png?w=1650\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=5e94549ba4e1bf52ffe603691d4ec322 1650w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/share-button-agents.png?w=2500\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=c67d66f358fba0ba33fa7bdb111218cb 2500w`})})}),_jsxs(Step,{title:`Select 'Agents' and connect Cursor or Claude Code`,children:[_jsx(Frame,{children:_jsx(OptimizedImage,{className:`mint-w-[90%]`,src:`https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-cursor.png?fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=420a0a8b740887d6ab9aa35b34274e93`,alt:`Agents tab with Cursor selected`,\"data-og-width\":`814`,width:`814`,\"data-og-height\":`894`,height:`894`,\"data-path\":`documentation/exporting/images/agents-cursor.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-cursor.png?w=280\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=6d440d2eef8b640d74c9bb6aac4b3542 280w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-cursor.png?w=560\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=5df8a6a1db9eed9a7780f737f2404f0a 560w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-cursor.png?w=840\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=bac10dede7da1ae397b397f2ff5434ab 840w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-cursor.png?w=1100\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=9df9cae74ffd43f55a9235795245bd8f 1100w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-cursor.png?w=1650\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=985d247298698a5025e995c3bd7d4b63 1650w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-cursor.png?w=2500\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=eed441a71bf1f58a2486fc2008948de0 2500w`})}),_jsx(Frame,{children:_jsx(OptimizedImage,{className:`mint-w-[90%]`,src:`https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-claude-code.png?fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=0561d1362eafd2f0f3e6492756c93ff6`,alt:`Agents tab with Claude Code selected`,\"data-og-width\":`778`,width:`778`,\"data-og-height\":`844`,height:`844`,\"data-path\":`documentation/exporting/images/agents-claude-code.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-claude-code.png?w=280\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=56e73d8c7bf55245cdeaf66e04f53cea 280w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-claude-code.png?w=560\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=70a314bd711c00580e03bef6408ab46a 560w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-claude-code.png?w=840\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=c827497db41e549fcc74f68905fe2f64 840w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-claude-code.png?w=1100\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=5d69eb0e01fcda9b213de31435157dd0 1100w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-claude-code.png?w=1650\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=34af64976d25ab048e769c3561e5b3c5 1650w, https://mintcdn.com/magicpatterns/TEHAXOfbjecxbojR/documentation/exporting/images/agents-claude-code.png?w=2500\u0026fit=max\u0026auto=format\u0026n=TEHAXOfbjecxbojR\u0026q=85\u0026s=9d078a9399cf4eec99120bbe68a2b4af 2500w`})})]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Bring your designs into code","description":"Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.","icon":"code","href":"/documentation/get-started/download-code"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[],"codeExamples":{}},"jsLinks":[],"dynamicCss":".mint-w-\\[90\\%\\] {\n width: 90%\n}","subdomain":"magicpatterns","siteName":"Magic Patterns","title":"Bring your designs into code - Magic Patterns","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-11-05T17:25:17.165Z","originalFileLocation":"documentation/get-started/download-code.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Magic Patterns\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Bring your designs into code - Magic Patterns\">\u003cmeta data-mint-head property=\"og:description\" content=\"Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Magic Patterns\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://www.magicpatterns.com/docs/documentation/get-started/download-code\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://magicpatterns.mintlify.site/docs/_mintlify/api/og/v2?division=Export\u0026amp;title=Bring+your+designs+into+code\u0026amp;description=Connect+Magic+Patterns+to+Claude+Code%2C+Claude+or+Cursor+so+your+coding+agent+can+read+and+edit+every+design.\u0026amp;theme=58b3985732190453b80d7ef2\u0026amp;signature=187c472715a62613840691a313cc1f9eecd6eafd29227fc9d33e743e35ae3700\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Bring your designs into code - Magic Patterns\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://magicpatterns.mintlify.site/docs/_mintlify/api/og/v2?division=Export\u0026amp;title=Bring+your+designs+into+code\u0026amp;description=Connect+Magic+Patterns+to+Claude+Code%2C+Claude+or+Cursor+so+your+coding+agent+can+read+and+edit+every+design.\u0026amp;theme=58b3985732190453b80d7ef2\u0026amp;signature=187c472715a62613840691a313cc1f9eecd6eafd29227fc9d33e743e35ae3700\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/docs/mintlify-assets/_mintlify/favicons/magicpatterns/7ZqRXq6s1-Htf8k5/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Magic Patterns\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#9784BF\">\u003clink data-mint-head rel=\"canonical\" href=\"https://www.magicpatterns.com/docs/documentation/get-started/download-code\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/documentation/get-started/download-code.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://www.magicpatterns.com/#organization\",\"name\":\"Magic Patterns\",\"url\":\"https://www.magicpatterns.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/magicpatterns/owWJh7xQtXBlIJ16/logo/magicpatterns_logo_light.svg?fit=max\u0026auto=format\u0026n=owWJh7xQtXBlIJ16\u0026q=85\u0026s=2a7a773a8194091ebfe3e1c0104f2c92\"}},{\"@type\":\"WebSite\",\"@id\":\"https://www.magicpatterns.com/docs#website\",\"name\":\"Magic Patterns\",\"url\":\"https://www.magicpatterns.com/docs\",\"publisher\":{\"@id\":\"https://www.magicpatterns.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://www.magicpatterns.com/docs/documentation/get-started/download-code#webpage\",\"url\":\"https://www.magicpatterns.com/docs/documentation/get-started/download-code\",\"name\":\"Bring your designs into code\",\"description\":\"Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.\",\"dateModified\":\"2026-11-05T17:25:17.165Z\",\"isPartOf\":{\"@id\":\"https://www.magicpatterns.com/docs#website\"},\"breadcrumb\":{\"@id\":\"https://www.magicpatterns.com/docs/documentation/get-started/download-code#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://www.magicpatterns.com/docs/documentation/get-started/download-code#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Export\",\"item\":\"https://www.magicpatterns.com/docs/documentation/exporting/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bring your designs into code\",\"item\":\"https://www.magicpatterns.com/docs/documentation/get-started/download-code\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://www.magicpatterns.com/docs/documentation/get-started/download-code#article\",\"headline\":\"Bring your designs into code\",\"name\":\"Bring your designs into code\",\"description\":\"Connect Magic Patterns to Claude Code, Claude or Cursor so your coding agent can read and edit every design.\",\"url\":\"https://www.magicpatterns.com/docs/documentation/get-started/download-code\",\"mainEntityOfPage\":{\"@id\":\"https://www.magicpatterns.com/docs/documentation/get-started/download-code#webpage\"},\"dateModified\":\"2026-11-05T17:25:17.165Z\",\"publisher\":{\"@id\":\"https://www.magicpatterns.com/#organization\"},\"isPartOf\":{\"@id\":\"https://www.magicpatterns.com/docs#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Magic Patterns\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Magic Patterns","nav":{"global":null,"tabs":[{"tab":"Introduction","pages":[{"title":"Introduction","href":"/documentation/get-started/introduction"}]},{"tab":"Designs","pages":[{"title":"Designs","href":"/documentation/editor/what-is-a-design"}]},{"tab":"MagicOS","pages":[{"title":"MagicOS","href":"/documentation/magic-os/overview"}]},{"tab":"Design Systems","pages":[{"title":"Design Systems","href":"/documentation/design-systems/overview"}]},{"tab":"Publish and Integrate","groups":[{"group":"Publishing","pages":[{"title":"Custom Publish URL","icon":"link","href":"/documentation/publishing/publish-url"},{"title":"Host on a Custom Domain","icon":"cloud","href":"/documentation/get-started/custom-domain"},{"title":"Website Metadata","icon":"hashtag","href":"/documentation/publishing/metadata"},{"title":"Password Protection","icon":"lock","href":"/documentation/publishing/password-protection"}]},{"group":"Export","pages":[{"title":"Overview of exporting","icon":"share","href":"/documentation/exporting/overview"},{"title":"Copy Code as Prompt","icon":"file-lines","href":"/documentation/get-started/copy-code-as-prompt"},{"title":"Sync with Github","description":"Generate designs and then sync them with Github","icon":"github","href":"/documentation/get-started/sync-to-github"},{"title":"Bring your designs into code","icon":"code","href":"/documentation/get-started/download-code"},{"title":"Export to Figma","description":"Generate designs and then export them to Figma","icon":"figma","href":"/documentation/get-started/figma-plugin"},{"title":"Integration Skill for AI Agents","icon":"wand-magic-sparkles","href":"/documentation/exporting/integration-skill"}]},{"group":"MCP server","pages":[{"title":"Overview of MCP","icon":"server","href":"/documentation/features/mcp-server/overview"},{"title":"MCP Tools \u0026 Workflows","icon":"toolbox","href":"/documentation/features/mcp-server/available_tools"}]},{"group":"Integrations","pages":[{"title":"Overview","icon":"puzzle-piece","href":"/documentation/integrations/overview"},{"title":"OpenAI","icon":"openai","href":"/documentation/integrations/openai"},{"title":"Anthropic","icon":"microchip-ai","href":"/documentation/integrations/anthropic"},{"title":"Google Sheets","icon":"google","href":"/documentation/integrations/google-sheets"},{"title":"EmailJS","icon":"envelope","href":"/documentation/integrations/emailjs"},{"title":"Collecting Feedback","icon":"comment","href":"/documentation/integrations/collecting-feedback"},{"title":"Google Analytics","icon":"chart-mixed","href":"/documentation/integrations/google-analytics"},{"title":"PostHog","icon":"chart-area","href":"/documentation/integrations/posthog"},{"title":"Meta Pixel","icon":"meta","href":"/documentation/integrations/meta-pixel"},{"title":"Shopify","icon":"shop","href":"/documentation/integrations/shopify"},{"title":"LinkedIn","icon":"linkedin","href":"/documentation/integrations/linkedin"}]},{"group":"API","pages":[{"title":"Getting Started","icon":"terminal","href":"/api/getting-started"},{"openapi":"openapi-v3.yml get /v3/health","title":"Health check","href":"/api/health"},{"openapi":"openapi-v3.yml get /v3/design-systems","title":"List design systems","href":"/api/list-design-systems"},{"group":"Designs","pages":[{"openapi":"openapi-v3.yml post /v3/designs","title":"Create a design","href":"/api/create-design"},{"openapi":"openapi-v3.yml post /v3/designs/resolve-url","title":"Resolve a Magic Patterns URL to an editor ID","href":"/api/resolve-design-url"},{"openapi":"openapi-v3.yml get /v3/designs/{editorId}/status","title":"Get design status","href":"/api/get-design-status"},{"openapi":"openapi-v3.yml post /v3/designs/{editorId}/prompts","title":"Send a prompt","href":"/api/send-prompt"},{"openapi":"openapi-v3.yml get /v3/designs/{editorId}/messages","title":"Read recent message history","href":"/api/get-design-messages"},{"openapi":"openapi-v3.yml get /v3/designs/{editorId}/versions","title":"List version history","href":"/api/get-design-versions"}]},{"group":"Artifacts","pages":[{"openapi":"openapi-v3.yml get /v3/designs/{editorId}/active-artifact","title":"Get the active artifact","href":"/api/get-active-artifact"},{"openapi":"openapi-v3.yml post /v3/designs/{editorId}/artifacts","title":"Create a new artifact","href":"/api/create-artifact"},{"openapi":"openapi-v3.yml post /v3/designs/{editorId}/artifacts/{artifactId}/files/read","title":"Read artifact files","href":"/api/read-artifact-files"},{"openapi":"openapi-v3.yml patch /v3/designs/{editorId}/artifacts/{artifactId}/files","title":"Write artifact files","href":"/api/write-artifact-files"},{"openapi":"openapi-v3.yml post /v3/designs/{editorId}/artifacts/{artifactId}/publish","title":"Publish an artifact","href":"/api/publish-artifact"}]}]}]},{"tab":"Teams and Enterprise","pages":[{"title":"Teams and Enterprise","href":"/documentation/collaboration/team-workspaces"}]},{"tab":"Changelog","pages":[{"title":"Changelog","href":"/documentation/feature-releases/changelog"}]}]},"basePath":"","title":"Bring your designs into code - Magic Patterns","buildId":"dpl_ATnXPMW25DMPUr9VBw6kL6MfBt6T","deploymentId":"dpl_ATnXPMW25DMPUr9VBw6kL6MfBt6T","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-BDAj7nBh.js","DynamicMarkdown-Bq09mRwR.js","zoom-image-lightbox-CypZe82l.js","lightbox-handle-r17bVUz3.js"]}