{"name":"UXMagic Help Center","description":"Official product documentation for UXMagic — an AI UI/UX design tool that turns prompts, screenshots, sketches, website URLs and Figma files into editable, high-fidelity UI designs and production-ready code.","url":"https://uxmagic.ai/help","generatedAt":"2026-09-02T13:03:49.223Z","version":1,"categories":[{"id":"getting-started","title":"Get started","description":"Everything you need to go from a blank canvas to your first designed screen — and the handful of concepts that make the rest of UXMagic make sense.","url":"https://uxmagic.ai/help/getting-started","articleSlugs":["what-is-uxmagic","create-your-first-project","the-canvas","writing-a-good-prompt","keyboard-shortcuts","account-and-profile"]},{"id":"generate","title":"Generate designs","description":"Six ways to get a screen onto the canvas: a prompt, a screenshot, a sketch, a URL, a Figma file, or a document.","url":"https://uxmagic.ai/help/generate","articleSlugs":["ways-to-generate-a-screen","text-to-ui","screenshot-to-ui","sketch-to-ui","clone-a-website","import-from-figma","design-from-a-document","wireframe-mode","flow-mode-and-screen-plans"]},{"id":"design-and-edit","title":"Design & edit","description":"Refine what the AI produced: targeted edits, themes, typography, images, versions and responsive variants.","url":"https://uxmagic.ai/help/design-and-edit","articleSlugs":["editing-a-screen","chat-editing","themes-and-style-guides","fonts-and-typography","images-in-your-designs","versions-and-history","responsive-variants","component-libraries"]},{"id":"export-and-handoff","title":"Export & handoff","description":"Get your designs out: Figma, HTML/React/Tailwind, GitHub, Framer, Webflow, WordPress, and PDF.","url":"https://uxmagic.ai/help/export-and-handoff","articleSlugs":["export-to-figma","export-code","export-to-framer-and-webflow","wordpress-publish","export-pdf-and-images","export-to-canva"]},{"id":"publish","title":"Publish a live site","description":"Turn a project into a real website on a uxmagic.io subdomain or your own domain — with previews, rollbacks and unpublishing.","url":"https://uxmagic.ai/help/publish","articleSlugs":["publish-your-first-site","subdomains-and-urls","custom-domains","redeploy-and-rollback"]},{"id":"collaborate","title":"Share & collaborate","description":"Share projects, invite collaborators, run a team with shared credits, and collect feedback with comments.","url":"https://uxmagic.ai/help/collaborate","articleSlugs":["share-a-project","share-a-preview","teams-and-seats","comments-and-feedback","community-and-inspiration"]},{"id":"integrations","title":"Integrations & developers","description":"Connect UXMagic to your IDE, your repo, your CMS and your AI assistant — MCP server, API keys, Figma plugin and GitHub.","url":"https://uxmagic.ai/help/integrations","articleSlugs":["mcp-server","api-keys","figma-plugin","github-sync","connect-uxmagic-to-ai-assistants"]},{"id":"account-and-billing","title":"Plans, credits & billing","description":"What each action costs, what each plan includes, and how upgrades, invoices, cancellation and referrals work.","url":"https://uxmagic.ai/help/account-and-billing","articleSlugs":["how-credits-work","plans-and-limits","upgrade-or-downgrade","billing-and-invoices","refunds","cancel-your-subscription","referral-program","delete-your-account"]},{"id":"troubleshooting","title":"Troubleshooting","description":"Fixes for the problems people actually hit: blank screens, missing styles, broken images, failed exports and stuck generations.","url":"https://uxmagic.ai/help/troubleshooting","articleSlugs":["i-ran-out-of-credits","blank-or-empty-screens","style-guide-did-not-apply","images-are-broken-or-missing","clone-came-out-blank-or-partial","figma-export-failed","my-changes-reverted","the-ai-is-not-following-my-brief","generation-is-slow-or-stuck","charts-or-animations-not-rendering","contact-support"]}],"articles":[{"slug":"what-is-uxmagic","category":"getting-started","categoryTitle":"Get started","title":"What is UXMagic?","description":"UXMagic turns a prompt, screenshot, sketch, URL or Figma file into editable, high-fidelity UI screens you can export to Figma or code.","url":"https://uxmagic.ai/help/getting-started/what-is-uxmagic","type":"guide","keywords":["overview","what does uxmagic do","ai ui generator","intro"],"headings":["What makes it different from a chatbot that writes HTML","The shape of a typical session","Who it is for","What it is not","Where to go next"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","the-canvas","how-credits-work"],"markdown":"UXMagic is an AI UI/UX design tool. You describe what you want — or hand it a screenshot, a hand-drawn sketch, a website URL, or an existing Figma file — and it produces **real, editable interface screens**: proper layout, a coherent colour and type system, and markup you can export to Figma or to production code.\n\n## What makes it different from a chatbot that writes HTML\n\nThree things:\n\n1. **It designs on a canvas, not in a chat window.** Screens live side by side on an infinite canvas, so a checkout flow is five screens you can see together, not five separate replies.\n2. **It keeps a theme.** Colours, fonts, radii and spacing are stored as design tokens on the project. Ask for \"make it dark\" and every screen moves together instead of one screen drifting away from the rest.\n3. **It exports somewhere useful.** Figma with real auto-layout, or HTML/React/Tailwind, or a published site on your own domain — not a screenshot.\n\n## The shape of a typical session\n\nYou start a project, type what you want, and the AI proposes a set of screens. You approve or edit that plan, and it designs them one at a time while you watch. From there you iterate in chat (\"make the hero taller\", \"use our brand blue\"), or click into a screen and edit text and images directly.\n\nWhen you like it, you export — or you publish it as a live site.\n\n## Who it is for\n\n- **Founders and PMs** who need a credible interface to put in front of users, investors or engineers before a designer is hired.\n- **Designers** who want the first 80% of a screen generated so they can spend their time on the last 20%.\n- **Developers** who want a real front end without hand-writing five landing pages.\n- **Agencies** producing client concepts at speed.\n\n## What it is not\n\nIt is not a full design tool replacement for pixel-level illustration work, and it is not a code IDE. It gets you to a high-fidelity, structured starting point extremely fast, and then hands off cleanly to Figma, to your repo, or to the web.\n\n## Where to go next\n\n- [Create your first project](/help/getting-started/create-your-first-project) — the five-minute version.\n- [How credits work](/help/account-and-billing/how-credits-work) — what each action costs, so nothing surprises you.\n- [Ways to generate a screen](/help/generate/ways-to-generate-a-screen) — all six starting points.","text":"UXMagic is an AI UI/UX design tool. You describe what you want — or hand it a screenshot, a hand-drawn sketch, a website URL, or an existing Figma file — and it produces real, editable interface screens: proper layout, a coherent colour and type system, and markup you can export to Figma or to production code. What makes it different from a chatbot that writes HTML Three things: 1. It designs on a canvas, not in a chat window. Screens live side by side on an infinite canvas, so a checkout flow is five screens you can see together, not five separate replies. 2. It keeps a theme. Colours, fonts, radii and spacing are stored as design tokens on the project. Ask for \"make it dark\" and every screen moves together instead of one screen drifting away from the rest. 3. It exports somewhere useful. Figma with real auto-layout, or HTML/React/Tailwind, or a published site on your own domain — not a screenshot. The shape of a typical session You start a project, type what you want, and the AI proposes a set of screens. You approve or edit that plan, and it designs them one at a time while you watch. From there you iterate in chat (\"make the hero taller\", \"use our brand blue\"), or click into a screen and edit text and images directly. When you like it, you export — or you publish it as a live site. Who it is for - Founders and PMs who need a credible interface to put in front of users, investors or engineers before a designer is hired. - Designers who want the first 80% of a screen generated so they can spend their time on the last 20%. - Developers who want a real front end without hand-writing five landing pages. - Agencies producing client concepts at speed. What it is not It is not a full design tool replacement for pixel-level illustration work, and it is not a code IDE. It gets you to a high-fidelity, structured starting point extremely fast, and then hands off cleanly to Figma, to your repo, or to the web. Where to go next - Create your first project — the five-minute version. - How credits work — what each action costs, so nothing surprises you. - Ways to generate a screen — all six starting points."},{"slug":"create-your-first-project","category":"getting-started","categoryTitle":"Get started","title":"Create your first project","description":"Go from signup to a designed, editable screen in about five minutes.","url":"https://uxmagic.ai/help/getting-started/create-your-first-project","type":"howto","keywords":["first project","quickstart","getting started","new project","begin"],"headings":["1. Sign in","2. Start a project","3. Describe what you want","4. Approve the plan","5. Watch it design","6. Iterate","7. Get it out","Common first-session mistakes"],"updated":"2026-08-27","faqs":[{"question":"Do I need a credit card to start?","answer":"No. The Free plan gives you one-time credits and up to five screens with no card on file."},{"question":"How long does the first screen take?","answer":"A single screen usually finishes in under a minute. A full multi-screen plan takes proportionally longer because screens are designed one at a time."}],"related":["the-canvas","writing-a-good-prompt","ways-to-generate-a-screen"],"markdown":"This walks you from a fresh account to a screen you can edit and export.\n\n![The UXMagic dashboard, with a prompt box reading “Describe what you want to create” and suggested starting ideas beneath it.](/help/dashboard-prompt.webp)\n\n## 1. Sign in\n\nGo to [uxmagic.ai](https://uxmagic.ai) and sign up with Google or email. No credit card is required — the Free plan includes one-time credits and up to five screens.\n\n## 2. Start a project\n\nFrom the dashboard, click **New project**. A project is a container for a set of screens that share a theme — one product, one site, one flow. Keep unrelated work in separate projects so their design systems don't collide.\n\n## 3. Describe what you want\n\nType your request into the prompt box. Be specific about the **product**, the **screens** and the **audience**:\n\n> A project management SaaS for small agencies. I need a marketing landing page, a pricing page, and a dashboard showing active projects. Clean and modern, deep blue and white, friendly but professional.\n\nIf you have a brand, a reference site, or a PRD, attach it now — see [Ways to generate a screen](/help/generate/ways-to-generate-a-screen).\n\n## 4. Approve the plan\n\nFor a new project the AI usually proposes a screen list before designing anything. You can add screens, rename them, remove ones you don't need, then approve. This step is cheap on purpose — it is far better to fix the plan than to redesign five finished screens.\n\n## 5. Watch it design\n\nScreens are designed one at a time and appear on the canvas as they finish. You can keep working while this runs.\n\n## 6. Iterate\n\nTwo ways to change things:\n\n- **Chat** — for anything structural or thematic: \"add testimonials under the hero\", \"make the whole thing dark\", \"swap the CTA copy\".\n- **Edit mode** — click into a screen to change text and swap images directly, without spending a generation.\n\nSee [Editing a screen](/help/design-and-edit/editing-a-screen).\n\n## 7. Get it out\n\nWhen you're happy: [export to Figma](/help/export-and-handoff/export-to-figma), [export code](/help/export-and-handoff/export-code), or [publish it as a live site](/help/publish/publish-your-first-site).\n\n## Common first-session mistakes\n\n- **Prompting one screen at a time when you want a flow.** Ask for the whole flow up front so the screens share a theme and a navigation structure.\n- **Fixing the theme screen by screen.** Change the theme once and it applies project-wide. See [Themes and style guides](/help/design-and-edit/themes-and-style-guides).\n- **Regenerating for a typo.** Use edit mode. Regeneration costs credits; editing text does not.","text":"This walks you from a fresh account to a screen you can edit and export. 1. Sign in Go to uxmagic.ai and sign up with Google or email. No credit card is required — the Free plan includes one-time credits and up to five screens. 2. Start a project From the dashboard, click New project. A project is a container for a set of screens that share a theme — one product, one site, one flow. Keep unrelated work in separate projects so their design systems don't collide. 3. Describe what you want Type your request into the prompt box. Be specific about the product, the screens and the audience: A project management SaaS for small agencies. I need a marketing landing page, a pricing page, and a dashboard showing active projects. Clean and modern, deep blue and white, friendly but professional. If you have a brand, a reference site, or a PRD, attach it now — see Ways to generate a screen. 4. Approve the plan For a new project the AI usually proposes a screen list before designing anything. You can add screens, rename them, remove ones you don't need, then approve. This step is cheap on purpose — it is far better to fix the plan than to redesign five finished screens. 5. Watch it design Screens are designed one at a time and appear on the canvas as they finish. You can keep working while this runs. 6. Iterate Two ways to change things: - Chat — for anything structural or thematic: \"add testimonials under the hero\", \"make the whole thing dark\", \"swap the CTA copy\". - Edit mode — click into a screen to change text and swap images directly, without spending a generation. See Editing a screen. 7. Get it out When you're happy: export to Figma, export code, or publish it as a live site. Common first-session mistakes - Prompting one screen at a time when you want a flow. Ask for the whole flow up front so the screens share a theme and a navigation structure. - Fixing the theme screen by screen. Change the theme once and it applies project-wide. See Themes and style guides. - Regenerating for a typo. Use edit mode. Regeneration costs credits; editing text does not."},{"slug":"the-canvas","category":"getting-started","categoryTitle":"Get started","title":"The canvas, projects and screens","description":"How projects, screens, versions and the infinite canvas fit together.","url":"https://uxmagic.ai/help/getting-started/the-canvas","type":"guide","keywords":["canvas","frames","screens","project structure","zoom","navigate"],"headings":["Projects","Screens","The canvas","Versions","Assets and documents","Trash"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","versions-and-history","editing-a-screen"],"markdown":"![A UXMagic project on the canvas: three generated onboarding screens beside the agent chat panel listing the steps it took.](/help/canvas.webp)\n\n## Projects\n\nA **project** holds screens, a theme, uploaded assets and documents, its chat history, and its collaborators. Everything in a project shares one design system, which is what keeps twenty screens looking like one product.\n\nRule of thumb: one project per product or site. If you are designing two unrelated things, use two projects — otherwise a theme change intended for one will move the other.\n\n## Screens\n\nA **screen** (sometimes called a frame) is one artboard on the canvas. Each screen has a name, a device size, HTML content, and a version history.\n\nScreens can be:\n\n- generated by the AI from your prompt,\n- added empty and filled in later,\n- duplicated from an existing screen,\n- created as a responsive variant of another screen.\n\n## The canvas\n\nThe canvas is infinite and zoomable.\n\n- **Pan** — space + drag, or two-finger scroll.\n- **Zoom** — ⌘/Ctrl + scroll, or the zoom control.\n- **Fit to screen** — zooms out to show every screen in the project.\n- **Focus mode** — opens a single screen full-width for close work.\n\nScreens are positioned from their centre point, so newly generated screens are laid out in a row beside the existing ones rather than stacking on top of them.\n\n## Versions\n\nEvery AI change to a screen creates a **new version** rather than overwriting the old one. You can step back through versions and restore any of them. See [Versions and history](/help/design-and-edit/versions-and-history).\n\n## Assets and documents\n\nEach project has an **asset library** for images you upload or the AI generates, and a **document** area where you can attach a PRD, brief or spec that the AI will read before designing. See [Design from a PRD or brief](/help/generate/design-from-a-document).\n\n## Trash\n\nDeleted projects go to **Trash** and can be restored from the dashboard.","text":"Projects A project holds screens, a theme, uploaded assets and documents, its chat history, and its collaborators. Everything in a project shares one design system, which is what keeps twenty screens looking like one product. Rule of thumb: one project per product or site. If you are designing two unrelated things, use two projects — otherwise a theme change intended for one will move the other. Screens A screen (sometimes called a frame) is one artboard on the canvas. Each screen has a name, a device size, HTML content, and a version history. Screens can be: - generated by the AI from your prompt, - added empty and filled in later, - duplicated from an existing screen, - created as a responsive variant of another screen. The canvas The canvas is infinite and zoomable. - Pan — space + drag, or two-finger scroll. - Zoom — ⌘/Ctrl + scroll, or the zoom control. - Fit to screen — zooms out to show every screen in the project. - Focus mode — opens a single screen full-width for close work. Screens are positioned from their centre point, so newly generated screens are laid out in a row beside the existing ones rather than stacking on top of them. Versions Every AI change to a screen creates a new version rather than overwriting the old one. You can step back through versions and restore any of them. See Versions and history. Assets and documents Each project has an asset library for images you upload or the AI generates, and a document area where you can attach a PRD, brief or spec that the AI will read before designing. See Design from a PRD or brief. Trash Deleted projects go to Trash and can be restored from the dashboard."},{"slug":"writing-a-good-prompt","category":"getting-started","categoryTitle":"Get started","title":"Writing a prompt that gets what you want","description":"The five things to include in a prompt, and the phrasings that reliably go wrong.","url":"https://uxmagic.ai/help/getting-started/writing-a-good-prompt","type":"guide","keywords":["prompt","prompting","better results","bad output","how to ask"],"headings":["Include these five things","A prompt that works","Phrasings that reliably disappoint","Be explicit when you mean it","Iterating","When the result is close but not right"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","ways-to-generate-a-screen","the-ai-is-not-following-my-brief"],"markdown":"The single biggest driver of output quality is the prompt. Here is what actually moves the needle.\n\n## Include these five things\n\n1. **What the product is.** \"A booking tool for dog groomers\" tells the AI what content belongs on the page. \"A landing page\" does not.\n2. **Which screens you want.** Name them. \"Landing, pricing, sign-up, and an empty dashboard state.\"\n3. **Who it is for.** B2B enterprise and consumer mobile produce very different layouts.\n4. **The visual direction.** A brand colour, a font feel, a reference: \"warm, editorial, lots of whitespace, serif headings.\"\n5. **Anything non-negotiable.** Legal text, a specific CTA, a required section, a hard constraint.\n\n## A prompt that works\n\n> A B2B invoicing tool for freelancers called Ledgerly. Design a marketing landing page, a pricing page with three tiers, and a dashboard listing recent invoices. Audience is solo freelancers, not enterprises. Visual direction: calm and trustworthy, deep green as the primary colour, generous whitespace, sans-serif. The landing page must have a \"Start free\" CTA in the nav and a section on getting paid faster.\n\n## Phrasings that reliably disappoint\n\n- **\"Make it better.\"** The AI has no idea which axis you mean. Say what is wrong: \"the hero is too tall and the CTA is hard to find.\"\n- **\"Make it pop.\"** Give a concrete direction: more contrast, larger type, a bolder accent colour.\n- **\"Like Stripe.\"** Better: paste the URL and ask for a clone, or describe the specific quality you mean (\"Stripe's density and gradient treatment\").\n- **Ten changes in one message.** They interact. Two or three at a time lands more reliably.\n\n## Be explicit when you mean it\n\nIf you have a brand and you want it respected exactly, say so in strong terms: \"Use exactly these colours: #0F3D2E and #F5F1E8. Do not introduce other colours.\" The AI will otherwise apply its own judgement about what looks good together.\n\nThe same applies to content: if the copy matters, provide it. Otherwise you will get plausible placeholder copy.\n\n## Iterating\n\nChat keeps the project context, so follow-ups can be short: \"make the nav sticky\", \"swap sections two and three\", \"the pricing cards need a most-popular badge\". You do not need to restate the brief every time.\n\n## When the result is close but not right\n\nDo not regenerate — that spends credits and throws away the parts that were good. Instead:\n\n- targeted chat edit for one section,\n- [edit mode](/help/design-and-edit/editing-a-screen) for copy and images,\n- [theme change](/help/design-and-edit/themes-and-style-guides) for anything colour or type related.","text":"The single biggest driver of output quality is the prompt. Here is what actually moves the needle. Include these five things 1. What the product is. \"A booking tool for dog groomers\" tells the AI what content belongs on the page. \"A landing page\" does not. 2. Which screens you want. Name them. \"Landing, pricing, sign-up, and an empty dashboard state.\" 3. Who it is for. B2B enterprise and consumer mobile produce very different layouts. 4. The visual direction. A brand colour, a font feel, a reference: \"warm, editorial, lots of whitespace, serif headings.\" 5. Anything non-negotiable. Legal text, a specific CTA, a required section, a hard constraint. A prompt that works A B2B invoicing tool for freelancers called Ledgerly. Design a marketing landing page, a pricing page with three tiers, and a dashboard listing recent invoices. Audience is solo freelancers, not enterprises. Visual direction: calm and trustworthy, deep green as the primary colour, generous whitespace, sans-serif. The landing page must have a \"Start free\" CTA in the nav and a section on getting paid faster. Phrasings that reliably disappoint - \"Make it better.\" The AI has no idea which axis you mean. Say what is wrong: \"the hero is too tall and the CTA is hard to find.\" - \"Make it pop.\" Give a concrete direction: more contrast, larger type, a bolder accent colour. - \"Like Stripe.\" Better: paste the URL and ask for a clone, or describe the specific quality you mean (\"Stripe's density and gradient treatment\"). - Ten changes in one message. They interact. Two or three at a time lands more reliably. Be explicit when you mean it If you have a brand and you want it respected exactly, say so in strong terms: \"Use exactly these colours: #0F3D2E and #F5F1E8. Do not introduce other colours.\" The AI will otherwise apply its own judgement about what looks good together. The same applies to content: if the copy matters, provide it. Otherwise you will get plausible placeholder copy. Iterating Chat keeps the project context, so follow-ups can be short: \"make the nav sticky\", \"swap sections two and three\", \"the pricing cards need a most-popular badge\". You do not need to restate the brief every time. When the result is close but not right Do not regenerate — that spends credits and throws away the parts that were good. Instead: - targeted chat edit for one section, - edit mode for copy and images, - theme change for anything colour or type related."},{"slug":"keyboard-shortcuts","category":"getting-started","categoryTitle":"Get started","title":"Keyboard shortcuts","description":"Canvas, editing and navigation shortcuts.","url":"https://uxmagic.ai/help/getting-started/keyboard-shortcuts","type":"reference","keywords":["shortcuts","hotkeys","keyboard","undo","delete"],"headings":["Canvas","Screens","Chat"],"updated":"2026-08-27","faqs":[],"related":["the-canvas","editing-a-screen"],"markdown":"## Canvas\n\n| Action | Shortcut |\n| --- | --- |\n| Pan | Space + drag, or two-finger scroll |\n| Zoom in / out | ⌘/Ctrl + scroll, or ⌘/Ctrl + \\= / \\- |\n| Fit all screens | Shift + 1 |\n| Zoom to 100% | ⌘/Ctrl + 0 |\n\n## Screens\n\n| Action | Shortcut |\n| --- | --- |\n| Duplicate selected screen | ⌘/Ctrl + D |\n| Delete selected screen | Delete / Backspace |\n| Undo | ⌘/Ctrl + Z |\n| Redo | ⌘/Ctrl + Shift + Z |\n\n## Chat\n\n| Action | Shortcut |\n| --- | --- |\n| Send | Enter |\n| New line | Shift + Enter |\n\n> **If Delete or Undo seem dead:** click on empty canvas first. When the cursor is inside the prompt box, those keys belong to the text field, not the canvas.","text":"Canvas Action Shortcut --- --- Pan Space + drag, or two-finger scroll Zoom in / out ⌘/Ctrl + scroll, or ⌘/Ctrl + \\= / \\- Fit all screens Shift + 1 Zoom to 100% ⌘/Ctrl + 0 Screens Action Shortcut --- --- Duplicate selected screen ⌘/Ctrl + D Delete selected screen Delete / Backspace Undo ⌘/Ctrl + Z Redo ⌘/Ctrl + Shift + Z Chat Action Shortcut --- --- Send Enter New line Shift + Enter If Delete or Undo seem dead: click on empty canvas first. When the cursor is inside the prompt box, those keys belong to the text field, not the canvas."},{"slug":"account-and-profile","category":"getting-started","categoryTitle":"Get started","title":"Your account and profile","description":"Sign-in methods, changing your email or password, and account settings.","url":"https://uxmagic.ai/help/getting-started/account-and-profile","type":"howto","keywords":["account","profile","password","email","sign in","login","sso"],"headings":["Signing in","Changing your details","Changing your email","Forgot your password","Deleting your account"],"updated":"2026-08-27","faqs":[],"related":["plans-and-limits","delete-your-account","teams-and-seats"],"markdown":"## Signing in\n\nUXMagic supports:\n\n- **Google** — one click, no password to manage.\n- **Email and password** — with email verification.\n- **SSO / SAML** — on Enterprise plans.\n\n## Changing your details\n\nOpen **Manage account** from the avatar menu in the dashboard. From there you can update your name, avatar and password.\n\n## Changing your email\n\nIf you signed up with email and password, you can change your email from **Manage account**; the new address has to be verified before it becomes active.\n\nIf you signed up with Google, your email comes from your Google account. To move to a different address, contact support so we can migrate your projects rather than leaving you with two accounts.\n\n## Forgot your password\n\nUse **Forgot password** on the login screen. If nothing arrives, check spam, and confirm you originally signed up with a password rather than with Google — Google accounts have no UXMagic password to reset.\n\n## Deleting your account\n\nSee [Delete your account](/help/account-and-billing/delete-your-account). Deletion is permanent and removes your projects.","text":"Signing in UXMagic supports: - Google — one click, no password to manage. - Email and password — with email verification. - SSO / SAML — on Enterprise plans. Changing your details Open Manage account from the avatar menu in the dashboard. From there you can update your name, avatar and password. Changing your email If you signed up with email and password, you can change your email from Manage account; the new address has to be verified before it becomes active. If you signed up with Google, your email comes from your Google account. To move to a different address, contact support so we can migrate your projects rather than leaving you with two accounts. Forgot your password Use Forgot password on the login screen. If nothing arrives, check spam, and confirm you originally signed up with a password rather than with Google — Google accounts have no UXMagic password to reset. Deleting your account See Delete your account. Deletion is permanent and removes your projects."},{"slug":"ways-to-generate-a-screen","category":"generate","categoryTitle":"Generate designs","title":"Every way to generate a screen","description":"Prompt, screenshot, sketch, website URL, Figma import, or a PRD — and which one to reach for.","url":"https://uxmagic.ai/help/generate/ways-to-generate-a-screen","type":"guide","keywords":["generate","create screen","input","starting point","options"],"headings":["Two fidelities","One screen or a whole flow","Combining inputs"],"updated":"2026-08-27","faqs":[],"related":["text-to-ui","screenshot-to-ui","clone-a-website","import-from-figma"],"markdown":"UXMagic accepts six kinds of starting point. They all land in the same place — an editable screen on the canvas with a project theme — so you can mix them freely inside one project.\n\n| Start from | Best when | Guide |\n| --- | --- | --- |\n| A text prompt | You're starting fresh and know roughly what you want | [Text to UI](/help/generate/text-to-ui) |\n| A screenshot | You want to rebuild or restyle an interface you can see | [Screenshot to UI](/help/generate/screenshot-to-ui) |\n| A hand-drawn sketch | You've whiteboarded the layout and want it made real | [Sketch to UI](/help/generate/sketch-to-ui) |\n| A website URL | You want a real site's structure as a starting point | [Clone a website](/help/generate/clone-a-website) |\n| A Figma file | You already have designs and want to iterate with AI | [Import from Figma](/help/generate/import-from-figma) |\n| A PRD or brief | The requirements are already written down | [Design from a document](/help/generate/design-from-a-document) |\n\n## Two fidelities\n\nAnything above can be produced as a **high-fidelity screen** or as a **wireframe**. Wireframes are for arguing about structure before anyone falls in love with a colour. See [Wireframe mode](/help/generate/wireframe-mode).\n\n## One screen or a whole flow\n\n- **One screen** — ask for it directly.\n- **A whole flow** — describe the journey and the AI plans and designs each screen in sequence, sharing one theme and navigation. See [Flow mode and screen plans](/help/generate/flow-mode-and-screen-plans).\n\n## Combining inputs\n\nThe strongest results usually come from combining: a screenshot of a competitor **plus** your brand colours, or a PRD **plus** a reference URL. Attach everything relevant to the same message — the AI reads all of it before designing.","text":"UXMagic accepts six kinds of starting point. They all land in the same place — an editable screen on the canvas with a project theme — so you can mix them freely inside one project. Start from Best when Guide --- --- --- A text prompt You're starting fresh and know roughly what you want Text to UI A screenshot You want to rebuild or restyle an interface you can see Screenshot to UI A hand-drawn sketch You've whiteboarded the layout and want it made real Sketch to UI A website URL You want a real site's structure as a starting point Clone a website A Figma file You already have designs and want to iterate with AI Import from Figma A PRD or brief The requirements are already written down Design from a document Two fidelities Anything above can be produced as a high-fidelity screen or as a wireframe. Wireframes are for arguing about structure before anyone falls in love with a colour. See Wireframe mode. One screen or a whole flow - One screen — ask for it directly. - A whole flow — describe the journey and the AI plans and designs each screen in sequence, sharing one theme and navigation. See Flow mode and screen plans. Combining inputs The strongest results usually come from combining: a screenshot of a competitor plus your brand colours, or a PRD plus a reference URL. Attach everything relevant to the same message — the AI reads all of it before designing."},{"slug":"text-to-ui","category":"generate","categoryTitle":"Generate designs","title":"Text to UI","description":"Turn a written description into a high-fidelity, editable screen.","url":"https://uxmagic.ai/help/generate/text-to-ui","type":"howto","keywords":["text to ui","prompt to design","ai ui generator","describe"],"headings":["Steps","Controlling the output","What it costs","If the result misses"],"updated":"2026-08-27","faqs":[],"related":["writing-a-good-prompt","flow-mode-and-screen-plans","themes-and-style-guides"],"markdown":"The default path: describe the interface, get the interface.\n\n## Steps\n\n1. Open a project and click into the prompt box.\n2. Describe the product, the screen(s), the audience and the visual direction. See [Writing a prompt that gets what you want](/help/getting-started/writing-a-good-prompt).\n3. Send. For a new project you'll usually be shown a **screen plan** to approve first.\n4. Screens are designed one at a time and appear on the canvas as they complete.\n\n## Controlling the output\n\n**Device size.** Say it in the prompt — \"a mobile checkout screen\" — or set the screen size before generating. Existing screens can be converted to another device later; see [Responsive and device variants](/help/design-and-edit/responsive-variants).\n\n**Brand.** If you have colours and fonts, state them explicitly and forcefully. A soft mention (\"bluish\") gets interpreted; an exact instruction (\"primary #1B4DFF, headings in Inter, no other accent colours\") gets followed.\n\n**Content.** Supply real copy if the copy matters. Otherwise you get well-formed placeholder copy, which is fine for structure but not for a demo.\n\n**Images.** The AI generates images where a design needs them. You can also upload your own and ask for them to be used. See [Images in your designs](/help/design-and-edit/images-in-your-designs).\n\n## What it costs\n\nDesigning a new screen from scratch costs credits; refining one costs much less. See [How credits work](/help/account-and-billing/how-credits-work) for the exact table.\n\n## If the result misses\n\nDon't regenerate the whole screen for a partial miss — say what's wrong and let it patch. Regeneration is one of the most expensive actions available and it discards the parts that were already right.","text":"The default path: describe the interface, get the interface. Steps 1. Open a project and click into the prompt box. 2. Describe the product, the screen(s), the audience and the visual direction. See Writing a prompt that gets what you want. 3. Send. For a new project you'll usually be shown a screen plan to approve first. 4. Screens are designed one at a time and appear on the canvas as they complete. Controlling the output Device size. Say it in the prompt — \"a mobile checkout screen\" — or set the screen size before generating. Existing screens can be converted to another device later; see Responsive and device variants. Brand. If you have colours and fonts, state them explicitly and forcefully. A soft mention (\"bluish\") gets interpreted; an exact instruction (\"primary #1B4DFF, headings in Inter, no other accent colours\") gets followed. Content. Supply real copy if the copy matters. Otherwise you get well-formed placeholder copy, which is fine for structure but not for a demo. Images. The AI generates images where a design needs them. You can also upload your own and ask for them to be used. See Images in your designs. What it costs Designing a new screen from scratch costs credits; refining one costs much less. See How credits work for the exact table. If the result misses Don't regenerate the whole screen for a partial miss — say what's wrong and let it patch. Regeneration is one of the most expensive actions available and it discards the parts that were already right."},{"slug":"screenshot-to-ui","category":"generate","categoryTitle":"Generate designs","title":"Screenshot to UI","description":"Upload a screenshot and get an editable, restyleable version of that interface.","url":"https://uxmagic.ai/help/generate/screenshot-to-ui","type":"howto","keywords":["screenshot","image to ui","upload image","recreate","png","jpg"],"headings":["Steps","Getting a faithful reproduction","Multiple screenshots","A known trap","Cost"],"updated":"2026-08-27","faqs":[{"question":"What image formats can I upload?","answer":"JPEG, PNG and WebP. Very large images are resized before the AI reads them."},{"question":"Will it copy the screenshot exactly?","answer":"It reproduces layout, hierarchy and component structure faithfully. Say so explicitly if you also want the exact colours and copy — otherwise the project theme is applied."}],"related":["sketch-to-ui","clone-a-website","images-in-your-designs"],"markdown":"Give UXMagic a picture of an interface and it rebuilds it as a real, editable screen.\n\n## Steps\n\n1. Click the attachment button in the prompt box and upload your image (JPEG, PNG or WebP).\n2. Say what you want done with it. This matters more than people expect:\n   - *\"Rebuild this screen exactly\"* — faithful reproduction.\n   - *\"Rebuild this layout but in our brand colours\"* — structure kept, theme applied.\n   - *\"This is our competitor's pricing page — design ours in the same structure\"* — structure as inspiration.\n3. Send.\n\n## Getting a faithful reproduction\n\n- Upload the **full screen**, not a crop, if you want the whole layout.\n- Upload at a **readable resolution** — if you can't read the labels, neither can the AI.\n- If exact colours matter, say *\"match the colours in the screenshot exactly\"*. By default an existing project's theme wins, because in most projects consistency is what people actually want.\n\n## Multiple screenshots\n\nUpload several at once for a multi-screen flow, and the AI will treat them as a set and keep them consistent with each other.\n\n## A known trap\n\nIn an existing project, a screenshot alone does **not** override the project's theme — the new screen inherits the palette already in use. If you want the reference's palette instead, ask for it in words: *\"use the colours from this image, not the current theme.\"*\n\n## Cost\n\nReading an image is free; designing the screen from it costs the usual screen-creation credits.","text":"Give UXMagic a picture of an interface and it rebuilds it as a real, editable screen. Steps 1. Click the attachment button in the prompt box and upload your image (JPEG, PNG or WebP). 2. Say what you want done with it. This matters more than people expect: - \"Rebuild this screen exactly\" — faithful reproduction. - \"Rebuild this layout but in our brand colours\" — structure kept, theme applied. - \"This is our competitor's pricing page — design ours in the same structure\" — structure as inspiration. 3. Send. Getting a faithful reproduction - Upload the full screen, not a crop, if you want the whole layout. - Upload at a readable resolution — if you can't read the labels, neither can the AI. - If exact colours matter, say \"match the colours in the screenshot exactly\". By default an existing project's theme wins, because in most projects consistency is what people actually want. Multiple screenshots Upload several at once for a multi-screen flow, and the AI will treat them as a set and keep them consistent with each other. A known trap In an existing project, a screenshot alone does not override the project's theme — the new screen inherits the palette already in use. If you want the reference's palette instead, ask for it in words: \"use the colours from this image, not the current theme.\" Cost Reading an image is free; designing the screen from it costs the usual screen-creation credits."},{"slug":"sketch-to-ui","category":"generate","categoryTitle":"Generate designs","title":"Sketch to UI","description":"Turn a whiteboard photo or paper wireframe into a polished digital interface.","url":"https://uxmagic.ai/help/generate/sketch-to-ui","type":"howto","keywords":["sketch","wireframe photo","whiteboard","drawing","paper","napkin"],"headings":["Steps","Making sketches read well","Sketch to wireframe instead"],"updated":"2026-08-27","faqs":[],"related":["screenshot-to-ui","wireframe-mode","text-to-ui"],"markdown":"Photograph your sketch, upload it, and get a real screen.\n\n## Steps\n\n1. Photograph the sketch straight on, in even light, with the whole drawing in frame.\n2. Upload it in the prompt box.\n3. Add the context the drawing can't carry: what the product is, what the boxes mean, the visual direction.\n\n> A sketch of our onboarding screen. The big box top-left is a video, the three stacked boxes are setup steps with checkmarks. Modern SaaS look, purple accent.\n\n## Making sketches read well\n\n- **Label your boxes.** \"hero\", \"nav\", \"chart\" — written labels are read and used.\n- **Draw the hierarchy.** Bigger boxes become bigger elements.\n- **Avoid heavy shading.** Line drawings read more reliably than shaded ones.\n- **One screen per photo**, unless you're deliberately handing over a flow.\n\n## Sketch to wireframe instead\n\nIf you want to stay low-fidelity — clean up the sketch without committing to a visual style — ask for a wireframe. See [Wireframe mode](/help/generate/wireframe-mode).","text":"Photograph your sketch, upload it, and get a real screen. Steps 1. Photograph the sketch straight on, in even light, with the whole drawing in frame. 2. Upload it in the prompt box. 3. Add the context the drawing can't carry: what the product is, what the boxes mean, the visual direction. A sketch of our onboarding screen. The big box top-left is a video, the three stacked boxes are setup steps with checkmarks. Modern SaaS look, purple accent. Making sketches read well - Label your boxes. \"hero\", \"nav\", \"chart\" — written labels are read and used. - Draw the hierarchy. Bigger boxes become bigger elements. - Avoid heavy shading. Line drawings read more reliably than shaded ones. - One screen per photo, unless you're deliberately handing over a flow. Sketch to wireframe instead If you want to stay low-fidelity — clean up the sketch without committing to a visual style — ask for a wireframe. See Wireframe mode."},{"slug":"clone-a-website","category":"generate","categoryTitle":"Generate designs","title":"Clone a website from a URL","description":"Capture a real, public web page and rebuild it as an editable UXMagic screen.","url":"https://uxmagic.ai/help/generate/clone-a-website","type":"howto","keywords":["clone","url","website to ui","copy site","import website","scrape"],"headings":["Steps","What comes back","Partial clones","What won't clone","Cost"],"updated":"2026-08-27","faqs":[{"question":"Can I clone any website?","answer":"Any public page. Pages behind a login, a paywall or aggressive bot protection cannot be captured."},{"question":"Is cloning a site legal?","answer":"Use it for structure, layout research and as a starting point for your own work. Copying a site’s branding, copy and imagery wholesale for a live product is a legal problem regardless of the tool used."}],"related":["screenshot-to-ui","clone-came-out-blank-or-partial","import-from-figma"],"markdown":"Paste a URL and UXMagic captures the live page — real layout, sections, colours, fonts and image assets — then rebuilds it as an editable screen and derives a matching theme.\n\n## Steps\n\n1. Paste the full URL, including `https://`, into the prompt box.\n2. Say what you want: a straight clone, or a clone restyled to your brand.\n3. Wait. Cloning is heavier than a normal generation — it loads the real page before any design work starts.\n\n## What comes back\n\n- The page's **section structure**, in order.\n- Its **colours and fonts**, captured into a project theme.\n- Its **images**, copied into your project's asset library.\n- Everything **editable** — this is a real screen, not a screenshot.\n\n## Partial clones\n\nVery long or very complex pages sometimes come back with some sections rebuilt and others left on the canvas as **labelled placeholders**. That is deliberate: a partial page with honest gaps beats a page with silently missing sections.\n\nTo finish it, ask the AI to complete the clone. It re-captures the original and rebuilds only the missing sections, at a fraction of the cost of a fresh clone. See [My clone came out blank or partial](/help/troubleshooting/clone-came-out-blank-or-partial).\n\n## What won't clone\n\n- Pages requiring a **login**.\n- Pages behind **bot protection** (Cloudflare challenges and similar).\n- Content that only exists after **user interaction** — a menu that opens on click, a modal, a carousel's later slides.\n- **Video and animation** — captured as a still.\n\n## Cost\n\nCloning is the most credit-intensive single action in UXMagic, because it runs a real browser against the target page before designing. Finishing a partial clone costs far less. See [How credits work](/help/account-and-billing/how-credits-work).","text":"Paste a URL and UXMagic captures the live page — real layout, sections, colours, fonts and image assets — then rebuilds it as an editable screen and derives a matching theme. Steps 1. Paste the full URL, including https://, into the prompt box. 2. Say what you want: a straight clone, or a clone restyled to your brand. 3. Wait. Cloning is heavier than a normal generation — it loads the real page before any design work starts. What comes back - The page's section structure, in order. - Its colours and fonts, captured into a project theme. - Its images, copied into your project's asset library. - Everything editable — this is a real screen, not a screenshot. Partial clones Very long or very complex pages sometimes come back with some sections rebuilt and others left on the canvas as labelled placeholders. That is deliberate: a partial page with honest gaps beats a page with silently missing sections. To finish it, ask the AI to complete the clone. It re-captures the original and rebuilds only the missing sections, at a fraction of the cost of a fresh clone. See My clone came out blank or partial. What won't clone - Pages requiring a login. - Pages behind bot protection (Cloudflare challenges and similar). - Content that only exists after user interaction — a menu that opens on click, a modal, a carousel's later slides. - Video and animation — captured as a still. Cost Cloning is the most credit-intensive single action in UXMagic, because it runs a real browser against the target page before designing. Finishing a partial clone costs far less. See How credits work."},{"slug":"import-from-figma","category":"generate","categoryTitle":"Generate designs","title":"Import from Figma","description":"Bring an existing Figma frame into UXMagic and keep editing it with AI.","url":"https://uxmagic.ai/help/generate/import-from-figma","type":"howto","keywords":["figma import","figma to uxmagic","existing designs","figma file","design system"],"headings":["Steps","What comes across","What to expect","Getting the URL right","After importing","Design systems and component libraries"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","figma-plugin","themes-and-style-guides"],"markdown":"Import works in the opposite direction to export: an existing Figma frame becomes an editable UXMagic screen you can then iterate on with AI.\n\n## Steps\n\n1. Connect Figma from **Integrations** (an OAuth connection — you authorise UXMagic once).\n2. Paste the Figma frame URL, or pick the file and frame from the picker.\n3. Choose whether to import the frame's own styles as your project theme, or map it onto the theme you already have.\n4. Import.\n\n## What comes across\n\n- **Layout and hierarchy**, including auto-layout structure.\n- **Text**, with its type styles.\n- **Colours and effects**, including gradients and shadows.\n- **Images**, copied into your project's assets.\n- **Vectors and icons**, rebuilt as markup.\n\n## What to expect\n\nFigma is a vector canvas and the web is a box model, so the import is a faithful *translation*, not a byte-identical copy. Expect very close structure and spacing, with small differences in text rendering and in effects that have no direct web equivalent.\n\nImports are most accurate when the Figma frame uses **auto-layout**. Absolutely-positioned free-form layouts import, but with less structural fidelity.\n\n## Getting the URL right\n\nSelect the frame in Figma, then **right-click → Copy link to selection**. A link to the file without a selected node imports the wrong thing, or nothing.\n\n## After importing\n\nThe imported screen behaves like any other: chat edits, edit mode, theming, versions, export. This is the fastest route to \"we have designs already, but we want to move faster now.\"\n\n## Design systems and component libraries\n\nYou can also import a component library or design system so generated screens use your components. See [Component libraries](/help/design-and-edit/component-libraries).","text":"Import works in the opposite direction to export: an existing Figma frame becomes an editable UXMagic screen you can then iterate on with AI. Steps 1. Connect Figma from Integrations (an OAuth connection — you authorise UXMagic once). 2. Paste the Figma frame URL, or pick the file and frame from the picker. 3. Choose whether to import the frame's own styles as your project theme, or map it onto the theme you already have. 4. Import. What comes across - Layout and hierarchy, including auto-layout structure. - Text, with its type styles. - Colours and effects, including gradients and shadows. - Images, copied into your project's assets. - Vectors and icons, rebuilt as markup. What to expect Figma is a vector canvas and the web is a box model, so the import is a faithful translation, not a byte-identical copy. Expect very close structure and spacing, with small differences in text rendering and in effects that have no direct web equivalent. Imports are most accurate when the Figma frame uses auto-layout. Absolutely-positioned free-form layouts import, but with less structural fidelity. Getting the URL right Select the frame in Figma, then right-click → Copy link to selection. A link to the file without a selected node imports the wrong thing, or nothing. After importing The imported screen behaves like any other: chat edits, edit mode, theming, versions, export. This is the fastest route to \"we have designs already, but we want to move faster now.\" Design systems and component libraries You can also import a component library or design system so generated screens use your components. See Component libraries."},{"slug":"design-from-a-document","category":"generate","categoryTitle":"Generate designs","title":"Design from a PRD or brief","description":"Upload requirements and have the AI read them before it designs anything.","url":"https://uxmagic.ai/help/generate/design-from-a-document","type":"howto","keywords":["prd","document","brief","spec","requirements","upload pdf","docx"],"headings":["Steps","Supported documents","Getting the most out of it","Cost"],"updated":"2026-08-27","faqs":[],"related":["flow-mode-and-screen-plans","writing-a-good-prompt","text-to-ui"],"markdown":"If the thinking already exists in a document, don't retype it into a prompt.\n\n## Steps\n\n1. Open your project and upload the document to the project's **documents** area (or attach it in the prompt box).\n2. Ask for what you want built from it:\n\n> Read the PRD and design the screens it describes. Start with the plan.\n\n3. The AI lists the project's documents, reads the relevant one, and uses it as the source of truth for screens, content and terminology.\n\n## Supported documents\n\nPRDs, design briefs, specs and similar text documents. What matters is that the text is extractable — a scanned image of a document is a picture, not a document, and should be uploaded as an image instead.\n\n## Getting the most out of it\n\n- **Name your screens in the document.** A PRD with an explicit screen list produces a far better plan than one that only describes behaviour.\n- **Point at the section you mean.** \"Design the screens in section 4 only\" beats asking it to design the whole document at once.\n- **Keep the document in the project.** It stays available for later turns, so months-later follow-ups still have the original requirements.\n\n## Cost\n\nListing and reading documents is free. Only the screens designed from them cost credits.","text":"If the thinking already exists in a document, don't retype it into a prompt. Steps 1. Open your project and upload the document to the project's documents area (or attach it in the prompt box). 2. Ask for what you want built from it: Read the PRD and design the screens it describes. Start with the plan. 3. The AI lists the project's documents, reads the relevant one, and uses it as the source of truth for screens, content and terminology. Supported documents PRDs, design briefs, specs and similar text documents. What matters is that the text is extractable — a scanned image of a document is a picture, not a document, and should be uploaded as an image instead. Getting the most out of it - Name your screens in the document. A PRD with an explicit screen list produces a far better plan than one that only describes behaviour. - Point at the section you mean. \"Design the screens in section 4 only\" beats asking it to design the whole document at once. - Keep the document in the project. It stays available for later turns, so months-later follow-ups still have the original requirements. Cost Listing and reading documents is free. Only the screens designed from them cost credits."},{"slug":"wireframe-mode","category":"generate","categoryTitle":"Generate designs","title":"Wireframe mode","description":"Generate low-fidelity wireframes to settle structure before visual design.","url":"https://uxmagic.ai/help/generate/wireframe-mode","type":"guide","keywords":["wireframe","low fidelity","lo-fi","structure","greyscale"],"headings":["Why bother","How to use it","Going from wireframe to high fidelity","When to skip it"],"updated":"2026-08-27","faqs":[],"related":["ways-to-generate-a-screen","sketch-to-ui","flow-mode-and-screen-plans"],"markdown":"Wireframe mode produces deliberately plain, greyscale screens: boxes, labels and hierarchy, with no brand, no imagery and no styling opinions.\n\n## Why bother\n\nBecause a beautiful screen ends the conversation. Stakeholders react to the colour instead of the flow. A wireframe keeps the argument on structure, where it belongs early on.\n\n## How to use it\n\nAsk for it explicitly:\n\n> Wireframe the checkout flow: cart, shipping, payment, confirmation.\n\nOr convert an existing screenshot into a clean wireframe:\n\n> Turn this screenshot into a wireframe so we can restructure it.\n\n## Going from wireframe to high fidelity\n\nOnce the structure is agreed, ask the AI to design the high-fidelity version of the approved wireframes. Structure carries over; the theme is applied on top.\n\n## When to skip it\n\nIf you're producing a concept for a pitch tomorrow, skip straight to high fidelity. Wireframes earn their keep when several people have to agree on structure first.","text":"Wireframe mode produces deliberately plain, greyscale screens: boxes, labels and hierarchy, with no brand, no imagery and no styling opinions. Why bother Because a beautiful screen ends the conversation. Stakeholders react to the colour instead of the flow. A wireframe keeps the argument on structure, where it belongs early on. How to use it Ask for it explicitly: Wireframe the checkout flow: cart, shipping, payment, confirmation. Or convert an existing screenshot into a clean wireframe: Turn this screenshot into a wireframe so we can restructure it. Going from wireframe to high fidelity Once the structure is agreed, ask the AI to design the high-fidelity version of the approved wireframes. Structure carries over; the theme is applied on top. When to skip it If you're producing a concept for a pitch tomorrow, skip straight to high fidelity. Wireframes earn their keep when several people have to agree on structure first."},{"slug":"flow-mode-and-screen-plans","category":"generate","categoryTitle":"Generate designs","title":"Flow mode and screen plans","description":"Generate an entire multi-screen journey from one prompt, and edit the plan before anything is designed.","url":"https://uxmagic.ai/help/generate/flow-mode-and-screen-plans","type":"guide","keywords":["flow","multi screen","user flow","plan","journey","approve plan"],"headings":["The screen plan","Flow mode","Cost","Adding to an existing flow"],"updated":"2026-08-27","faqs":[],"related":["text-to-ui","wireframe-mode","how-credits-work"],"markdown":"## The screen plan\n\nFor a new project, the AI proposes a **plan** — a named list of screens with a one-line purpose each — before designing anything. You can:\n\n- **Approve** it as-is,\n- **Edit** it: rename, reorder, add or remove screens,\n- **Reject** it and re-describe what you want.\n\nOnly after approval does it start designing.\n\nTake this step seriously. Planning is cheap; designing is not. Fixing a wrong screen list here costs one round-trip. Fixing it after eight screens are designed costs eight regenerations.\n\n## Flow mode\n\nFlow mode designs the whole journey in one go, sharing a theme and a navigation structure across screens. Describe the journey, not the screens:\n\n> A food delivery app: browse restaurants, restaurant detail, cart, checkout, order tracking.\n\nScreens are designed one at a time and appear on the canvas as they complete, so you can start reviewing before the run finishes.\n\n## Cost\n\nFlow and other multi-screen operations are charged **per screen**, so a five-screen flow costs five times a single screen. The exact figures are in [How credits work](/help/account-and-billing/how-credits-work). Check your balance before kicking off a large flow — a run that stops halfway leaves you with half a flow.\n\n## Adding to an existing flow\n\nYou don't have to plan everything up front. Ask for more screens later and they'll be designed into the existing theme and navigation:\n\n> Add a \"forgot password\" screen and an empty-state for the order list.","text":"The screen plan For a new project, the AI proposes a plan — a named list of screens with a one-line purpose each — before designing anything. You can: - Approve it as-is, - Edit it: rename, reorder, add or remove screens, - Reject it and re-describe what you want. Only after approval does it start designing. Take this step seriously. Planning is cheap; designing is not. Fixing a wrong screen list here costs one round-trip. Fixing it after eight screens are designed costs eight regenerations. Flow mode Flow mode designs the whole journey in one go, sharing a theme and a navigation structure across screens. Describe the journey, not the screens: A food delivery app: browse restaurants, restaurant detail, cart, checkout, order tracking. Screens are designed one at a time and appear on the canvas as they complete, so you can start reviewing before the run finishes. Cost Flow and other multi-screen operations are charged per screen, so a five-screen flow costs five times a single screen. The exact figures are in How credits work. Check your balance before kicking off a large flow — a run that stops halfway leaves you with half a flow. Adding to an existing flow You don't have to plan everything up front. Ask for more screens later and they'll be designed into the existing theme and navigation: Add a \"forgot password\" screen and an empty-state for the order list."},{"slug":"editing-a-screen","category":"design-and-edit","categoryTitle":"Design & edit","title":"Editing a screen","description":"The three ways to change a design — chat, edit mode and theming — and when each is the right tool.","url":"https://uxmagic.ai/help/design-and-edit/editing-a-screen","type":"guide","keywords":["edit","change design","edit mode","modify","tweak","update"],"headings":["1. Edit mode — for content","2. Chat — for structure","3. Theme — for anything visual and global","What not to do","Versions","Keyboard focus gotcha"],"updated":"2026-08-27","faqs":[],"related":["chat-editing","themes-and-style-guides","versions-and-history"],"markdown":"There are three ways to change a screen, and picking the right one saves both time and credits.\n\n## 1. Edit mode — for content\n\nClick into a screen to enter edit mode. Here you can:\n\n- **Edit text directly.** Click a heading or paragraph and type.\n- **Swap images.** Replace a generated image with your own upload.\n- **Adjust simple properties** on the element you selected.\n\nEdit mode does not call the AI, so it is instant and free. Use it for copy, names, prices, and image swaps.\n\n## 2. Chat — for structure\n\nAnything that changes the *shape* of the page goes through chat:\n\n> Add a testimonials section between the features and the pricing.\n> Make the hero shorter and move the CTA above the fold.\n> Turn the three feature blocks into a two-column layout.\n\nTargeted chat edits are much cheaper than regenerating a screen. See [Editing with chat](/help/design-and-edit/chat-editing).\n\n## 3. Theme — for anything visual and global\n\nColours, fonts, corner radii and spacing live in the project's theme. Change them there and every screen moves together. Editing a colour on one screen instead is how projects end up inconsistent. See [Themes and style guides](/help/design-and-edit/themes-and-style-guides).\n\n## What not to do\n\n**Don't regenerate for a small change.** Regeneration is among the most expensive operations available, and it throws away the parts of the screen that were already right. Ask for the specific change instead.\n\n## Versions\n\nEvery AI edit creates a new version. Nothing is destroyed and you can always step back. See [Versions and history](/help/design-and-edit/versions-and-history).\n\n## Keyboard focus gotcha\n\nIf Delete or ⌘Z appear to do nothing, click on empty canvas first. While the cursor is in the prompt box, those keystrokes belong to the text field.","text":"There are three ways to change a screen, and picking the right one saves both time and credits. 1. Edit mode — for content Click into a screen to enter edit mode. Here you can: - Edit text directly. Click a heading or paragraph and type. - Swap images. Replace a generated image with your own upload. - Adjust simple properties on the element you selected. Edit mode does not call the AI, so it is instant and free. Use it for copy, names, prices, and image swaps. 2. Chat — for structure Anything that changes the shape of the page goes through chat: Add a testimonials section between the features and the pricing. Make the hero shorter and move the CTA above the fold. Turn the three feature blocks into a two-column layout. Targeted chat edits are much cheaper than regenerating a screen. See Editing with chat. 3. Theme — for anything visual and global Colours, fonts, corner radii and spacing live in the project's theme. Change them there and every screen moves together. Editing a colour on one screen instead is how projects end up inconsistent. See Themes and style guides. What not to do Don't regenerate for a small change. Regeneration is among the most expensive operations available, and it throws away the parts of the screen that were already right. Ask for the specific change instead. Versions Every AI edit creates a new version. Nothing is destroyed and you can always step back. See Versions and history. Keyboard focus gotcha If Delete or ⌘Z appear to do nothing, click on empty canvas first. While the cursor is in the prompt box, those keystrokes belong to the text field."},{"slug":"chat-editing","category":"design-and-edit","categoryTitle":"Design & edit","title":"Editing with chat","description":"How to phrase AI edit requests so you get the change you meant, on the screens you meant.","url":"https://uxmagic.ai/help/design-and-edit/chat-editing","type":"guide","keywords":["chat","ai edit","instruct","ask ai","refine","iterate"],"headings":["Say which screen","Say what is wrong, not that it is wrong","Two or three changes at a time","Applying a change everywhere","Replacing an image everywhere","Recolouring","When it does something you didn't ask for","Asking questions"],"updated":"2026-08-27","faqs":[],"related":["editing-a-screen","writing-a-good-prompt","the-ai-is-not-following-my-brief"],"markdown":"![The agent chat panel, listing each step the agent took: analysing the request, reading the theme, planning screens, then designing each one.](/help/agent-chat.webp)\n\n## Say which screen\n\nIf several screens are on the canvas, name the one you mean, or select it first:\n\n> On the pricing page, make the middle tier the highlighted one.\n\nWithout a target, the AI has to guess, and it will sometimes guess the screen you were last looking at rather than the one you meant.\n\n## Say what is wrong, not that it is wrong\n\n- ❌ \"The hero is bad.\"\n- ✅ \"The hero is too tall and the headline competes with the subhead. Halve the vertical padding and drop the subhead one size.\"\n\n## Two or three changes at a time\n\nLong lists interact in ways that are hard to predict, and if one item lands badly you can't tell which instruction caused it. Small batches are faster overall.\n\n## Applying a change everywhere\n\nSay so explicitly:\n\n> On **every** screen, change the nav CTA to \"Start free\".\n\nProject-wide operations exist precisely for this. Doing it screen by screen wastes credits and eventually drifts.\n\n## Replacing an image everywhere\n\nSwapping a logo or product shot across all screens has a dedicated, deterministic path — ask for the asset to be replaced everywhere rather than editing each screen:\n\n> Replace the logo on all screens with the one I just uploaded.\n\nSee [Images in your designs](/help/design-and-edit/images-in-your-designs).\n\n## Recolouring\n\nColour changes should go through the theme, not through class edits on individual elements:\n\n> Make the primary colour a warmer blue.\n\nThat is one operation, it is free, and it moves every screen consistently. See [Themes and style guides](/help/design-and-edit/themes-and-style-guides).\n\n## When it does something you didn't ask for\n\nSay so plainly and specifically: *\"You changed the palette — I only asked for the button. Put the previous colours back.\"* If it happens repeatedly on the same brief, state the constraint in absolute terms (\"Do not change any colours\") — and see [The AI is not following my brief](/help/troubleshooting/the-ai-is-not-following-my-brief).\n\n## Asking questions\n\nThe AI will occasionally ask you a multiple-choice question before acting, when there's a genuine ambiguity it can't resolve. Answering is cheaper than getting five screens built on the wrong assumption.","text":"Say which screen If several screens are on the canvas, name the one you mean, or select it first: On the pricing page, make the middle tier the highlighted one. Without a target, the AI has to guess, and it will sometimes guess the screen you were last looking at rather than the one you meant. Say what is wrong, not that it is wrong - ❌ \"The hero is bad.\" - ✅ \"The hero is too tall and the headline competes with the subhead. Halve the vertical padding and drop the subhead one size.\" Two or three changes at a time Long lists interact in ways that are hard to predict, and if one item lands badly you can't tell which instruction caused it. Small batches are faster overall. Applying a change everywhere Say so explicitly: On every screen, change the nav CTA to \"Start free\". Project-wide operations exist precisely for this. Doing it screen by screen wastes credits and eventually drifts. Replacing an image everywhere Swapping a logo or product shot across all screens has a dedicated, deterministic path — ask for the asset to be replaced everywhere rather than editing each screen: Replace the logo on all screens with the one I just uploaded. See Images in your designs. Recolouring Colour changes should go through the theme, not through class edits on individual elements: Make the primary colour a warmer blue. That is one operation, it is free, and it moves every screen consistently. See Themes and style guides. When it does something you didn't ask for Say so plainly and specifically: \"You changed the palette — I only asked for the button. Put the previous colours back.\" If it happens repeatedly on the same brief, state the constraint in absolute terms (\"Do not change any colours\") — and see The AI is not following my brief. Asking questions The AI will occasionally ask you a multiple-choice question before acting, when there's a genuine ambiguity it can't resolve. Answering is cheaper than getting five screens built on the wrong assumption."},{"slug":"themes-and-style-guides","category":"design-and-edit","categoryTitle":"Design & edit","title":"Themes and style guides","description":"How the project theme works, how to change it safely, and why colours should never be edited screen by screen.","url":"https://uxmagic.ai/help/design-and-edit/themes-and-style-guides","type":"guide","keywords":["theme","style guide","colors","colours","brand","dark mode","palette","tokens"],"headings":["Changing a few colours","Building a whole new look","Scoping a change","Contrast is enforced","Generating a style guide","Common mistakes"],"updated":"2026-08-27","faqs":[{"question":"Does changing the theme cost credits?","answer":"No. Building or updating a theme is free. Only the screens themselves cost credits to generate."},{"question":"Can one screen have a different theme?","answer":"Yes — ask for the change to be scoped to that screen. By default a theme change applies to the whole project, which is usually what you want."}],"related":["fonts-and-typography","editing-a-screen","style-guide-did-not-apply"],"markdown":"Every project has a **theme**: a set of design tokens for colours, typography, radii and spacing. Screens reference those tokens rather than hard-coded values, which is what keeps twenty screens looking like one product.\n\n## Changing a few colours\n\nJust ask:\n\n> Make the primary colour #1B4DFF.\n> The background is too cold — warm it up.\n\nThis merges a small change into the existing theme and leaves everything else alone. It's free and it applies everywhere at once.\n\n## Building a whole new look\n\nFor a wholesale change — a redesign, a switch to dark, a new brand — ask for exactly that:\n\n> Give the whole project a dark theme.\n> Redesign this with our new brand: deep green primary, cream background, serif headings.\n\nThat builds a complete new token set rather than patching the old one.\n\n## Scoping a change\n\nBy default, theme changes are **project-wide**. To limit one to a single screen, say so:\n\n> Only on the landing page, make the header background black.\n\n## Contrast is enforced\n\nThemes are validated for readable colour pairings before they're applied, so you shouldn't end up with dark text on a dark background. If you deliberately want a low-contrast treatment, say so — but expect the system to push back toward legibility.\n\n## Generating a style guide\n\nAsk for a style guide and you'll get a rendered screen showing the palette, type scale and core components — useful as a handoff artifact and as a check that the system is coherent.\n\n## Common mistakes\n\n- **Editing a colour on one screen.** It works, and then the next generated screen doesn't match. Use the theme.\n- **Asking for \"dark mode\" while in edit mode on one element.** That path can hard-code colours instead of re-theming. Ask in chat, at the project level.\n- **Assuming the theme tool reported success means it rendered.** Look at the canvas. If the screens didn't move, see [My style guide didn't apply](/help/troubleshooting/style-guide-did-not-apply).","text":"Every project has a theme: a set of design tokens for colours, typography, radii and spacing. Screens reference those tokens rather than hard-coded values, which is what keeps twenty screens looking like one product. Changing a few colours Just ask: Make the primary colour #1B4DFF. The background is too cold — warm it up. This merges a small change into the existing theme and leaves everything else alone. It's free and it applies everywhere at once. Building a whole new look For a wholesale change — a redesign, a switch to dark, a new brand — ask for exactly that: Give the whole project a dark theme. Redesign this with our new brand: deep green primary, cream background, serif headings. That builds a complete new token set rather than patching the old one. Scoping a change By default, theme changes are project-wide. To limit one to a single screen, say so: Only on the landing page, make the header background black. Contrast is enforced Themes are validated for readable colour pairings before they're applied, so you shouldn't end up with dark text on a dark background. If you deliberately want a low-contrast treatment, say so — but expect the system to push back toward legibility. Generating a style guide Ask for a style guide and you'll get a rendered screen showing the palette, type scale and core components — useful as a handoff artifact and as a check that the system is coherent. Common mistakes - Editing a colour on one screen. It works, and then the next generated screen doesn't match. Use the theme. - Asking for \"dark mode\" while in edit mode on one element. That path can hard-code colours instead of re-theming. Ask in chat, at the project level. - Assuming the theme tool reported success means it rendered. Look at the canvas. If the screens didn't move, see My style guide didn't apply."},{"slug":"fonts-and-typography","category":"design-and-edit","categoryTitle":"Design & edit","title":"Fonts and typography","description":"Choosing fonts, using Google Fonts, and what to do when a font change does not show up.","url":"https://uxmagic.ai/help/design-and-edit/fonts-and-typography","type":"howto","keywords":["font","typography","typeface","google fonts","heading font","text size"],"headings":["Setting fonts","The type scale","If a font change doesn't appear","Custom and licensed fonts"],"updated":"2026-08-27","faqs":[],"related":["themes-and-style-guides","style-guide-did-not-apply"],"markdown":"## Setting fonts\n\nFonts are part of the theme. Ask for them by name:\n\n> Use Inter for body text and Playfair Display for headings.\n\nGoogle Fonts are supported by name. If you name a font that isn't available, you'll get the closest reasonable match rather than a broken screen — so if precision matters, confirm what actually got applied.\n\n## The type scale\n\nYou can steer the scale in words:\n\n> Make the headings a size larger and tighten the line height.\n> The body copy is too small — bump it to 17px.\n\n## If a font change doesn't appear\n\nThis is a known class of problem worth checking deliberately: the theme can update while the stylesheet that loads the font doesn't. Symptom: the design *says* it's using a font that clearly isn't rendering.\n\n1. Reload the project.\n2. Re-apply the font change in chat and watch the canvas, not the tool result.\n3. If it still doesn't render, [contact support](/help/troubleshooting/contact-support) with the project link and the font name.\n\n## Custom and licensed fonts\n\nSelf-hosted and licensed fonts aren't uploaded directly today. The practical route is to pick the nearest Google Font while designing, then swap to your licensed face after export — in Figma, in your codebase, or in the published site's CSS.","text":"Setting fonts Fonts are part of the theme. Ask for them by name: Use Inter for body text and Playfair Display for headings. Google Fonts are supported by name. If you name a font that isn't available, you'll get the closest reasonable match rather than a broken screen — so if precision matters, confirm what actually got applied. The type scale You can steer the scale in words: Make the headings a size larger and tighten the line height. The body copy is too small — bump it to 17px. If a font change doesn't appear This is a known class of problem worth checking deliberately: the theme can update while the stylesheet that loads the font doesn't. Symptom: the design says it's using a font that clearly isn't rendering. 1. Reload the project. 2. Re-apply the font change in chat and watch the canvas, not the tool result. 3. If it still doesn't render, contact support with the project link and the font name. Custom and licensed fonts Self-hosted and licensed fonts aren't uploaded directly today. The practical route is to pick the nearest Google Font while designing, then swap to your licensed face after export — in Figma, in your codebase, or in the published site's CSS."},{"slug":"images-in-your-designs","category":"design-and-edit","categoryTitle":"Design & edit","title":"Images in your designs","description":"Generating images, editing them in place, uploading your own, and replacing an asset across every screen.","url":"https://uxmagic.ai/help/design-and-edit/images-in-your-designs","type":"guide","keywords":["images","generate image","ai image","upload","logo","replace image","photos"],"headings":["Generated images","Editing an existing image","Uploading your own","Replacing an asset everywhere","Aspect ratio","If images are broken or stuck loading"],"updated":"2026-08-27","faqs":[],"related":["chat-editing","editing-a-screen","images-are-broken-or-missing"],"markdown":"![The Assets page, holding the images and logos a project reuses.](/help/assets.webp)\n\n## Generated images\n\nWhen a design needs imagery, the AI generates it. You can steer it:\n\n> Regenerate the hero image: a sunlit open-plan office, wide shot, warm tones, no people.\n\nDescribe subject, setting, composition, lighting and mood. A bare noun (\"a laptop\") produces a bare result.\n\nImage generation is charged per image, at a fraction of the cost of a screen. See [How credits work](/help/account-and-billing/how-credits-work).\n\n## Editing an existing image\n\nYou can change an image **in place**, keeping everything else pixel-identical:\n\n> In the hero image, change the text on the sign to \"Ledgerly\".\n> Recolour this illustration to match the new theme.\n\nThis is the right tool for changing text inside an image, recolouring, restyling, or adding and removing a single element. Regenerating from scratch would change everything else too.\n\n## Uploading your own\n\nUpload through the prompt box or the project's asset library, then reference it:\n\n> Use the photo I just uploaded as the hero image on the landing page.\n\n## Replacing an asset everywhere\n\nTo swap a logo or product shot across the entire project, ask for exactly that:\n\n> Replace the old logo with the new one on every screen.\n\nThis runs as a single deterministic operation across all screens rather than a per-screen edit — it's the only reliable way to be sure you didn't miss one.\n\n## Aspect ratio\n\nState it if it matters — \"16:9 hero\", \"square avatar\". Otherwise you may get a shape that doesn't fit the slot.\n\n## If images are broken or stuck loading\n\nSee [Images are broken or missing](/help/troubleshooting/images-are-broken-or-missing).","text":"Generated images When a design needs imagery, the AI generates it. You can steer it: Regenerate the hero image: a sunlit open-plan office, wide shot, warm tones, no people. Describe subject, setting, composition, lighting and mood. A bare noun (\"a laptop\") produces a bare result. Image generation is charged per image, at a fraction of the cost of a screen. See How credits work. Editing an existing image You can change an image in place, keeping everything else pixel-identical: In the hero image, change the text on the sign to \"Ledgerly\". Recolour this illustration to match the new theme. This is the right tool for changing text inside an image, recolouring, restyling, or adding and removing a single element. Regenerating from scratch would change everything else too. Uploading your own Upload through the prompt box or the project's asset library, then reference it: Use the photo I just uploaded as the hero image on the landing page. Replacing an asset everywhere To swap a logo or product shot across the entire project, ask for exactly that: Replace the old logo with the new one on every screen. This runs as a single deterministic operation across all screens rather than a per-screen edit — it's the only reliable way to be sure you didn't miss one. Aspect ratio State it if it matters — \"16:9 hero\", \"square avatar\". Otherwise you may get a shape that doesn't fit the slot. If images are broken or stuck loading See Images are broken or missing."},{"slug":"versions-and-history","category":"design-and-edit","categoryTitle":"Design & edit","title":"Versions and history","description":"Every AI change makes a new version. How to compare, restore and keep variants.","url":"https://uxmagic.ai/help/design-and-edit/versions-and-history","type":"guide","keywords":["version","history","undo","restore","revert","previous","rollback"],"headings":["How versioning works","Switching versions","Variants","Undo vs versions","If a change seems to disappear","Duplicating instead"],"updated":"2026-08-27","faqs":[],"related":["editing-a-screen","my-changes-reverted"],"markdown":"## How versioning works\n\nEach AI change to a screen creates a **new version** rather than overwriting the previous one. The screen on the canvas shows the active version; earlier ones stay available.\n\nThis means you can experiment freely. If a direction doesn't work, go back a version.\n\n## Switching versions\n\nOpen a screen's version list, pick a version, and the canvas updates. Switching is instant and free.\n\n## Variants\n\nVersions double as variants: ask for two treatments of the same screen and keep both, switching between them for a review.\n\n## Undo vs versions\n\n- **⌘Z / Ctrl+Z** — undoes canvas actions (moving, deleting, direct edits).\n- **Versions** — step back through AI-generated states of a screen.\n\nThey are separate systems. Undo will not walk you back through AI generations.\n\n## If a change seems to disappear\n\nIf a version you selected reverts when you click away, that's a bug, not a feature — see [My changes reverted](/help/troubleshooting/my-changes-reverted).\n\n## Duplicating instead\n\nIf you want to explore a direction without touching the original, duplicate the screen first and experiment on the copy.","text":"How versioning works Each AI change to a screen creates a new version rather than overwriting the previous one. The screen on the canvas shows the active version; earlier ones stay available. This means you can experiment freely. If a direction doesn't work, go back a version. Switching versions Open a screen's version list, pick a version, and the canvas updates. Switching is instant and free. Variants Versions double as variants: ask for two treatments of the same screen and keep both, switching between them for a review. Undo vs versions - ⌘Z / Ctrl+Z — undoes canvas actions (moving, deleting, direct edits). - Versions — step back through AI-generated states of a screen. They are separate systems. Undo will not walk you back through AI generations. If a change seems to disappear If a version you selected reverts when you click away, that's a bug, not a feature — see My changes reverted. Duplicating instead If you want to explore a direction without touching the original, duplicate the screen first and experiment on the copy."},{"slug":"responsive-variants","category":"design-and-edit","categoryTitle":"Design & edit","title":"Responsive and device variants","description":"Create mobile and desktop versions of a screen and keep them in step.","url":"https://uxmagic.ai/help/design-and-edit/responsive-variants","type":"howto","keywords":["responsive","mobile","desktop","tablet","device","breakpoint","mobile version"],"headings":["Creating a variant","Cost","Keeping variants in step","Theme is shared","Exported code"],"updated":"2026-08-27","faqs":[],"related":["editing-a-screen","themes-and-style-guides","export-code"],"markdown":"## Creating a variant\n\nAsk for it, or use the device control on the screen:\n\n> Make a mobile version of the landing page.\n\nThe variant is a **new screen** on the canvas, adapted to the target width — not a fluid resize. Layouts are genuinely rearranged: multi-column sections stack, navigation collapses, type scales down.\n\n## Cost\n\nConverting a screen to another device size is charged per screen at the same rate as a regeneration, because it is one. Converting eight screens costs eight times that — worth checking your balance first.\n\n## Keeping variants in step\n\nVariants are separate screens, so a later edit to the desktop version does not automatically flow into the mobile one. Two options:\n\n- Ask for the change on both explicitly: *\"On both the desktop and mobile landing pages, change the CTA to 'Start free'.\"*\n- Or finish the desktop design first, then generate the variants once at the end. This is usually the cheaper order of operations.\n\n## Theme is shared\n\nBoth variants use the project theme, so colour and font changes apply to both automatically. Only layout is per-variant.\n\n## Exported code\n\nExported code reflects the screen you exported. If you need one genuinely responsive implementation rather than two fixed layouts, export the desktop screen and adapt, or export both and merge at the breakpoint — see [Export code](/help/export-and-handoff/export-code).","text":"Creating a variant Ask for it, or use the device control on the screen: Make a mobile version of the landing page. The variant is a new screen on the canvas, adapted to the target width — not a fluid resize. Layouts are genuinely rearranged: multi-column sections stack, navigation collapses, type scales down. Cost Converting a screen to another device size is charged per screen at the same rate as a regeneration, because it is one. Converting eight screens costs eight times that — worth checking your balance first. Keeping variants in step Variants are separate screens, so a later edit to the desktop version does not automatically flow into the mobile one. Two options: - Ask for the change on both explicitly: \"On both the desktop and mobile landing pages, change the CTA to 'Start free'.\" - Or finish the desktop design first, then generate the variants once at the end. This is usually the cheaper order of operations. Theme is shared Both variants use the project theme, so colour and font changes apply to both automatically. Only layout is per-variant. Exported code Exported code reflects the screen you exported. If you need one genuinely responsive implementation rather than two fixed layouts, export the desktop screen and adapt, or export both and merge at the breakpoint — see Export code."},{"slug":"component-libraries","category":"design-and-edit","categoryTitle":"Design & edit","title":"Component libraries and design systems","description":"Use the built-in Figma and React libraries, or bring your own components into a project.","url":"https://uxmagic.ai/help/design-and-edit/component-libraries","type":"guide","keywords":["components","design system","library","react components","figma components","reuse"],"headings":["Built-in libraries","Bringing your own design system","Keeping generated screens on-system","On Enterprise"],"updated":"2026-08-27","faqs":[],"related":["import-from-figma","themes-and-style-guides","export-code"],"markdown":"![The built-in Figma component library, showing categories of ready-made components.](/help/figma-library.webp)\n\n## Built-in libraries\n\nUXMagic ships two browsable libraries you can pull from while designing:\n\n- **[Figma component library](/figma-component-library)** — components ready to drop into a Figma file.\n- **[React component library](/react-component-library)** — code components matching the same patterns.\n\nBoth are organised by category, and each component has variants.\n\n## Bringing your own design system\n\nImport your Figma components or design system into a project so generated screens use *your* components rather than generic ones. See [Import from Figma](/help/generate/import-from-figma).\n\nOnce imported, mention them by name:\n\n> Use our Button and Card components for the pricing tiers.\n\n## Keeping generated screens on-system\n\nTwo things do most of the work:\n\n1. **A theme that matches your brand**, so colours and type are right by default. See [Themes and style guides](/help/design-and-edit/themes-and-style-guides).\n2. **Explicit instructions** when the AI starts improvising: *\"Use only components from our imported library.\"*\n\n## On Enterprise\n\nEnterprise plans include a shared design system and component library across the team, so everyone's generated screens start from the same components.","text":"Built-in libraries UXMagic ships two browsable libraries you can pull from while designing: - Figma component library — components ready to drop into a Figma file. - React component library — code components matching the same patterns. Both are organised by category, and each component has variants. Bringing your own design system Import your Figma components or design system into a project so generated screens use your components rather than generic ones. See Import from Figma. Once imported, mention them by name: Use our Button and Card components for the pricing tiers. Keeping generated screens on-system Two things do most of the work: 1. A theme that matches your brand, so colours and type are right by default. See Themes and style guides. 2. Explicit instructions when the AI starts improvising: \"Use only components from our imported library.\" On Enterprise Enterprise plans include a shared design system and component library across the team, so everyone's generated screens start from the same components."},{"slug":"export-to-figma","category":"export-and-handoff","categoryTitle":"Export & handoff","title":"Export to Figma","description":"Send screens to Figma as editable, auto-layout, dev-ready frames.","url":"https://uxmagic.ai/help/export-and-handoff/export-to-figma","type":"howto","keywords":["figma export","export to figma","auto layout","handoff","designer"],"headings":["Steps","What you get","Export allowance","Getting the cleanest result","Round-tripping","If export fails"],"updated":"2026-08-27","faqs":[{"question":"Is the exported Figma file editable?","answer":"Yes. You get real Figma layers with auto-layout, editable text and real fills — not a flattened image."},{"question":"How many Figma exports do I get?","answer":"The Free plan includes a small fixed number; paid plans include a much larger monthly allowance. Your remaining exports are shown in your account."}],"related":["figma-plugin","import-from-figma","export-code","figma-export-failed"],"markdown":"Figma export produces **real, editable Figma frames** — auto-layout structure, live text layers, real fills and effects — not a flattened screenshot.\n\n![The Bulk Export menu open over a UXMagic project, offering export of the selected screens.](/help/export-menu.webp)\n\n## Steps\n\n1. Select the screen (or screens) you want to export.\n2. Choose **Export → Figma**.\n3. Follow the handoff into Figma: either through the connected Figma account, or via the [UXMagic Figma plugin](/help/integrations/figma-plugin).\n\n## What you get\n\n- **Auto-layout frames** that respond correctly when resized.\n- **Editable text layers** with their type styles.\n- **Real fills, gradients and shadows.**\n- **Images** brought across as fills.\n- **Named layers** grouped by section, so the file is navigable rather than a soup of rectangles.\n\n## Export allowance\n\nFigma exports are metered. The Free plan includes a small fixed number; paid plans include a large monthly allowance. You can see what's left in your account. See [Plans and limits](/help/account-and-billing/plans-and-limits).\n\n## Getting the cleanest result\n\n- **Finish the theme first.** Exporting, restyling in Figma, then re-exporting means doing the Figma work twice.\n- **Export the flow together** rather than screen by screen, so the frames land side by side in one file.\n- **Name your screens** before exporting — names carry through and unnamed frames are miserable to work with later.\n\n## Round-tripping\n\nYou can also go the other way and bring Figma frames back in — see [Import from Figma](/help/generate/import-from-figma). A common workflow is: generate in UXMagic → export to Figma → a designer refines → import back to keep iterating with AI.\n\n## If export fails\n\nSee [My Figma export failed](/help/troubleshooting/figma-export-failed).","text":"Figma export produces real, editable Figma frames — auto-layout structure, live text layers, real fills and effects — not a flattened screenshot. Steps 1. Select the screen (or screens) you want to export. 2. Choose Export → Figma. 3. Follow the handoff into Figma: either through the connected Figma account, or via the UXMagic Figma plugin. What you get - Auto-layout frames that respond correctly when resized. - Editable text layers with their type styles. - Real fills, gradients and shadows. - Images brought across as fills. - Named layers grouped by section, so the file is navigable rather than a soup of rectangles. Export allowance Figma exports are metered. The Free plan includes a small fixed number; paid plans include a large monthly allowance. You can see what's left in your account. See Plans and limits. Getting the cleanest result - Finish the theme first. Exporting, restyling in Figma, then re-exporting means doing the Figma work twice. - Export the flow together rather than screen by screen, so the frames land side by side in one file. - Name your screens before exporting — names carry through and unnamed frames are miserable to work with later. Round-tripping You can also go the other way and bring Figma frames back in — see Import from Figma. A common workflow is: generate in UXMagic → export to Figma → a designer refines → import back to keep iterating with AI. If export fails See My Figma export failed."},{"slug":"export-code","category":"export-and-handoff","categoryTitle":"Export & handoff","title":"Export code (HTML, React, Tailwind)","description":"Export a single screen or a whole project as production-ready front-end code.","url":"https://uxmagic.ai/help/export-and-handoff/export-code","type":"howto","keywords":["export code","react","html","tailwind","developer","download code","jsx"],"headings":["What you can export","Exporting one screen","Exporting a whole project","What the code is like","Responsive","Straight into a repo"],"updated":"2026-08-27","faqs":[],"related":["github-sync","export-to-figma","component-libraries"],"markdown":"![The React component library, showing components ready to copy into a codebase.](/help/react-library.webp)\n\n## What you can export\n\n- **A single screen** as HTML or as a React component.\n- **A whole project** as a multi-screen React project, assembled and downloadable as an archive.\n\nStyling is Tailwind CSS, with your project theme expressed as design tokens so the code carries the same system the canvas does.\n\n## Exporting one screen\n\n1. Select the screen.\n2. **Export → Code**.\n3. Choose HTML or React.\n4. Copy it, or download it.\n\n## Exporting a whole project\n\nProject export runs as a background job — it generates every screen, then assembles them into one project structure. Larger projects take longer; you can watch progress and download when it finishes.\n\n## What the code is like\n\nIt is real, readable front-end code: semantic markup, Tailwind utility classes, theme tokens for colours and type, and images referenced by URL from your project's asset storage.\n\nTwo things to plan for:\n\n- **Assets are remote by default.** Download them into your repo before shipping, so your production site doesn't depend on UXMagic's asset URLs.\n- **It's a front end.** There's no data layer, routing or state management — you wire it into your app.\n\n## Responsive\n\nExported code reflects the screen you exported, at that screen's width. If you generated separate mobile and desktop variants, export both and merge them at your breakpoint. See [Responsive and device variants](/help/design-and-edit/responsive-variants).\n\n## Straight into a repo\n\nYou can push exported code directly to GitHub instead of downloading it — see [GitHub sync](/help/integrations/github-sync).","text":"What you can export - A single screen as HTML or as a React component. - A whole project as a multi-screen React project, assembled and downloadable as an archive. Styling is Tailwind CSS, with your project theme expressed as design tokens so the code carries the same system the canvas does. Exporting one screen 1. Select the screen. 2. Export → Code. 3. Choose HTML or React. 4. Copy it, or download it. Exporting a whole project Project export runs as a background job — it generates every screen, then assembles them into one project structure. Larger projects take longer; you can watch progress and download when it finishes. What the code is like It is real, readable front-end code: semantic markup, Tailwind utility classes, theme tokens for colours and type, and images referenced by URL from your project's asset storage. Two things to plan for: - Assets are remote by default. Download them into your repo before shipping, so your production site doesn't depend on UXMagic's asset URLs. - It's a front end. There's no data layer, routing or state management — you wire it into your app. Responsive Exported code reflects the screen you exported, at that screen's width. If you generated separate mobile and desktop variants, export both and merge them at your breakpoint. See Responsive and device variants. Straight into a repo You can push exported code directly to GitHub instead of downloading it — see GitHub sync."},{"slug":"export-to-framer-and-webflow","category":"export-and-handoff","categoryTitle":"Export & handoff","title":"Export to Framer and Webflow","description":"Copy a screen into Framer or Webflow with a paste, preserving structure and styling.","url":"https://uxmagic.ai/help/export-and-handoff/export-to-framer-and-webflow","type":"howto","keywords":["framer","webflow","no code","paste","clipboard","export framer"],"headings":["Framer","Webflow","What to check after pasting","When to use this instead of code export"],"updated":"2026-08-27","faqs":[],"related":["export-code","wordpress-publish","publish-your-first-site"],"markdown":"Framer and Webflow exports work through the clipboard: UXMagic produces the payload each tool understands, and you paste it onto their canvas.\n\n## Framer\n\n1. Select the screen.\n2. **Export → Framer.**\n3. Copy the generated payload.\n4. Open your Framer project and paste onto the canvas.\n\nLayout structure, text and styling come across as native Framer layers you can keep editing.\n\n## Webflow\n\n1. Select the screen.\n2. **Export → Webflow.**\n3. Copy the generated payload.\n4. In the Webflow Designer, paste onto the canvas.\n\nYou get real Webflow elements with classes, not an embed block.\n\n## What to check after pasting\n\n- **Fonts** — make sure the typefaces used are available in the destination project.\n- **Images** — they arrive by URL; upload them into the destination's asset manager before going live.\n- **Interactions** — animations and interactions are set up in Framer or Webflow, not carried over.\n\n## When to use this instead of code export\n\nIf the site is going to be maintained by a team that lives in Framer or Webflow, paste it in. If engineers own it, [export code](/help/export-and-handoff/export-code) instead.","text":"Framer and Webflow exports work through the clipboard: UXMagic produces the payload each tool understands, and you paste it onto their canvas. Framer 1. Select the screen. 2. Export → Framer. 3. Copy the generated payload. 4. Open your Framer project and paste onto the canvas. Layout structure, text and styling come across as native Framer layers you can keep editing. Webflow 1. Select the screen. 2. Export → Webflow. 3. Copy the generated payload. 4. In the Webflow Designer, paste onto the canvas. You get real Webflow elements with classes, not an embed block. What to check after pasting - Fonts — make sure the typefaces used are available in the destination project. - Images — they arrive by URL; upload them into the destination's asset manager before going live. - Interactions — animations and interactions are set up in Framer or Webflow, not carried over. When to use this instead of code export If the site is going to be maintained by a team that lives in Framer or Webflow, paste it in. If engineers own it, export code instead."},{"slug":"wordpress-publish","category":"export-and-handoff","categoryTitle":"Export & handoff","title":"Push a design to WordPress","description":"Connect a WordPress site and publish generated screens to it as pages.","url":"https://uxmagic.ai/help/export-and-handoff/wordpress-publish","type":"howto","keywords":["wordpress","wp","publish page","cms","application password"],"headings":["Connecting your site","Publishing a screen","Things to know","Troubleshooting"],"updated":"2026-08-27","faqs":[],"related":["publish-your-first-site","export-to-framer-and-webflow","export-code"],"markdown":"## Connecting your site\n\nTwo ways to connect from **Integrations → WordPress**:\n\n- **Application password** — create one in your WordPress user profile and paste it in with your site URL. Nothing to install.\n- **UXMagic plugin** — install the plugin on your site and complete the connection handshake. Slightly more setup, smoother afterwards.\n\n## Publishing a screen\n\n1. Select the screen.\n2. **Export → WordPress.**\n3. Choose whether to create a new page or replace an existing one.\n4. Push.\n\nYou can also push several screens at once to create multiple pages in one go.\n\n## Things to know\n\n- Pages are created in your WordPress install as normal pages — you can edit them there afterwards.\n- Your **theme's** header and footer may wrap the pushed content. Preview before publishing, and use a full-width or blank page template if you want the design to own the whole viewport.\n- **Images** are transferred to the WordPress media library.\n\n## Troubleshooting\n\n- **Connection refused** — check the site URL includes the protocol, and that the REST API isn't blocked by a security plugin.\n- **Application password rejected** — they're generated per user in WordPress; make sure it's copied whole, including the spaces.\n- **Content appears unstyled** — a plugin or theme is stripping inline styles. The plugin connection generally handles this better than the application-password route.","text":"Connecting your site Two ways to connect from Integrations → WordPress: - Application password — create one in your WordPress user profile and paste it in with your site URL. Nothing to install. - UXMagic plugin — install the plugin on your site and complete the connection handshake. Slightly more setup, smoother afterwards. Publishing a screen 1. Select the screen. 2. Export → WordPress. 3. Choose whether to create a new page or replace an existing one. 4. Push. You can also push several screens at once to create multiple pages in one go. Things to know - Pages are created in your WordPress install as normal pages — you can edit them there afterwards. - Your theme's header and footer may wrap the pushed content. Preview before publishing, and use a full-width or blank page template if you want the design to own the whole viewport. - Images are transferred to the WordPress media library. Troubleshooting - Connection refused — check the site URL includes the protocol, and that the REST API isn't blocked by a security plugin. - Application password rejected — they're generated per user in WordPress; make sure it's copied whole, including the spaces. - Content appears unstyled — a plugin or theme is stripping inline styles. The plugin connection generally handles this better than the application-password route."},{"slug":"export-pdf-and-images","category":"export-and-handoff","categoryTitle":"Export & handoff","title":"Export as PDF or image","description":"Produce a PDF, PNG, JPEG or WebP of a screen for decks, review and sign-off.","url":"https://uxmagic.ai/help/export-and-handoff/export-pdf-and-images","type":"howto","keywords":["pdf","png","jpeg","webp","download image","print","deck","presentation"],"headings":["Formats","Steps","Tips"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","share-a-project"],"markdown":"For decks, review packs and sign-off, export a screen as a document or an image.\n\n## Formats\n\n- **PDF** — paper sizes (A4, A3, Letter, Legal, Tabloid), or a single page rendered at an exact pixel width so a tall design isn't chopped across pages.\n- **PNG** — lossless, best for interface screenshots.\n- **JPEG** — smaller, adjustable quality, best for photo-heavy designs.\n- **WebP** — smallest at equivalent quality, for the web.\n\n## Steps\n\n1. Select the screen.\n2. **Export → PDF / Image.**\n3. Pick the format and options (paper size or exact width, and quality for JPEG).\n4. Larger exports run as a background job — you'll get the file when rendering completes.\n\n## Tips\n\n- For a **tall landing page**, use the exact-width PDF mode rather than A4. It renders one continuous page instead of slicing the design into fragments.\n- For **client review**, a share link beats a PDF: it stays current and people can comment. See [Share a project](/help/collaborate/share-a-project).","text":"For decks, review packs and sign-off, export a screen as a document or an image. Formats - PDF — paper sizes (A4, A3, Letter, Legal, Tabloid), or a single page rendered at an exact pixel width so a tall design isn't chopped across pages. - PNG — lossless, best for interface screenshots. - JPEG — smaller, adjustable quality, best for photo-heavy designs. - WebP — smallest at equivalent quality, for the web. Steps 1. Select the screen. 2. Export → PDF / Image. 3. Pick the format and options (paper size or exact width, and quality for JPEG). 4. Larger exports run as a background job — you'll get the file when rendering completes. Tips - For a tall landing page, use the exact-width PDF mode rather than A4. It renders one continuous page instead of slicing the design into fragments. - For client review, a share link beats a PDF: it stays current and people can comment. See Share a project."},{"slug":"export-to-canva","category":"export-and-handoff","categoryTitle":"Export & handoff","title":"Export to Canva","description":"Move a UXMagic design into Canva for marketing and social work.","url":"https://uxmagic.ai/help/export-and-handoff/export-to-canva","type":"howto","keywords":["canva","social","marketing","graphics"],"headings":["Steps","When to use it"],"updated":"2026-08-27","faqs":[],"related":["export-pdf-and-images","export-to-figma"],"markdown":"Canva is supported for the marketing side of the workflow — turning a designed screen into assets your marketing team can adapt.\n\n## Steps\n\n1. Connect Canva from **Integrations**.\n2. Select the design you want to move across.\n3. **Export → Canva**, then open it in Canva to keep editing.\n\n## When to use it\n\nUse Canva for social cutdowns, ads and one-off marketing collateral. For anything that a designer or engineer will pick up, use [Figma](/help/export-and-handoff/export-to-figma) or [code](/help/export-and-handoff/export-code) instead — those preserve structure, Canva preserves appearance.","text":"Canva is supported for the marketing side of the workflow — turning a designed screen into assets your marketing team can adapt. Steps 1. Connect Canva from Integrations. 2. Select the design you want to move across. 3. Export → Canva, then open it in Canva to keep editing. When to use it Use Canva for social cutdowns, ads and one-off marketing collateral. For anything that a designer or engineer will pick up, use Figma or code instead — those preserve structure, Canva preserves appearance."},{"slug":"publish-your-first-site","category":"publish","categoryTitle":"Publish a live site","title":"Publish your first site","description":"Take a project live on a uxmagic.io subdomain in a couple of minutes.","url":"https://uxmagic.ai/help/publish/publish-your-first-site","type":"howto","keywords":["publish","go live","website","deploy","hosting","launch"],"headings":["Steps","What you get","Paid-plan features","Updating a published site","Your own domain"],"updated":"2026-08-27","faqs":[{"question":"Is hosting included?","answer":"Yes. Published sites are hosted by UXMagic on a uxmagic.io subdomain, with HTTPS, at no extra cost beyond your plan."},{"question":"Can I publish on the Free plan?","answer":"Yes, within your plan’s published-site limit. Removing the UX Magic badge and password-protecting a site require a paid plan."}],"related":["subdomains-and-urls","custom-domains","redeploy-and-rollback"],"markdown":"Publishing turns the screens in a project into a real, hosted website with HTTPS.\n\n## Steps\n\n1. Open the project and click **Publish**.\n2. **Pick which screens** become pages, and set the home page. Screens you leave out stay in the project but aren't part of the site.\n3. **Choose a subdomain.** You'll get `your-name.uxmagic.io`. Availability is checked as you type. See [Subdomains and URLs](/help/publish/subdomains-and-urls).\n4. **Run the preflight check.** It flags problems that would make a bad live site — missing links, empty pages, placeholder content.\n5. **Publish.** The build runs in the background; you'll get the live URL when it finishes.\n\n## What you get\n\n- A hosted site on `*.uxmagic.io` with automatic HTTPS.\n- A **per-deployment preview URL**, so you can review a build before pointing anyone at it.\n- **Deployment history** with one-click rollback.\n\n## Paid-plan features\n\n- **Removing the UX Magic badge** requires a paid plan.\n- **Private and password-protected sites** require a paid plan.\n- **Published-site limits** vary by plan — see [Plans and limits](/help/account-and-billing/plans-and-limits).\n\n## Updating a published site\n\nEditing screens does not change the live site. Publish again to deploy your changes. See [Redeploy and rollback](/help/publish/redeploy-and-rollback).\n\n## Your own domain\n\nPublished sites can move to your own domain — see [Custom domains](/help/publish/custom-domains).","text":"Publishing turns the screens in a project into a real, hosted website with HTTPS. Steps 1. Open the project and click Publish. 2. Pick which screens become pages, and set the home page. Screens you leave out stay in the project but aren't part of the site. 3. Choose a subdomain. You'll get your-name.uxmagic.io. Availability is checked as you type. See Subdomains and URLs. 4. Run the preflight check. It flags problems that would make a bad live site — missing links, empty pages, placeholder content. 5. Publish. The build runs in the background; you'll get the live URL when it finishes. What you get - A hosted site on .uxmagic.io with automatic HTTPS. - A per-deployment preview URL, so you can review a build before pointing anyone at it. - Deployment history with one-click rollback. Paid-plan features - Removing the UX Magic badge requires a paid plan. - Private and password-protected sites require a paid plan. - Published-site limits vary by plan — see Plans and limits. Updating a published site Editing screens does not change the live site. Publish again to deploy your changes. See Redeploy and rollback. Your own domain Published sites can move to your own domain — see Custom domains."},{"slug":"subdomains-and-urls","category":"publish","categoryTitle":"Publish a live site","title":"Subdomains, page URLs and previews","description":"Choosing a subdomain, how page paths are derived, and what the preview URL is for.","url":"https://uxmagic.ai/help/publish/subdomains-and-urls","type":"reference","keywords":["subdomain","url","slug","preview link","reserved","address"],"headings":["Subdomain rules","Page URLs","Preview URLs","Changing your subdomain","HTTPS"],"updated":"2026-08-27","faqs":[],"related":["publish-your-first-site","custom-domains","redeploy-and-rollback"],"markdown":"## Subdomain rules\n\nYour site lives at `<subdomain>.uxmagic.io`.\n\n- Between **3 and 63 characters**.\n- **Letters, numbers and hyphens** only; no leading or trailing hyphen.\n- **Case-insensitive** — everything normalises to lowercase.\n- Must be **unique** across all UXMagic sites.\n- Some names are **reserved** (system and infrastructure names). Reserved names are rejected, and UXMagic won't suggest a near-variant of one either — a suggestion you can't actually claim is worse than no suggestion.\n\nIf your first choice is taken, alternatives are suggested as you type, and only ones that are genuinely available.\n\n## Page URLs\n\nThe home page you choose is served at `/`. Every other published screen becomes a path derived from its name — so name your screens before publishing. \"Pricing\" becomes `/pricing`; \"Screen 4\" becomes `/screen-4`, which is not what you want in a share link.\n\n## Preview URLs\n\nEvery deployment gets its own preview host, distinct from the live site. Use it to check a build before it becomes the version everyone sees, and to share a proposed change without touching production.\n\n## Changing your subdomain\n\nYou can change it later. The old address stops working, so update any links you've already shared.\n\n## HTTPS\n\nCertificates are handled for you on both `*.uxmagic.io` and connected custom domains. There is nothing to configure and nothing to renew.","text":"Subdomain rules Your site lives at <subdomain>.uxmagic.io. - Between 3 and 63 characters. - Letters, numbers and hyphens only; no leading or trailing hyphen. - Case-insensitive — everything normalises to lowercase. - Must be unique across all UXMagic sites. - Some names are reserved (system and infrastructure names). Reserved names are rejected, and UXMagic won't suggest a near-variant of one either — a suggestion you can't actually claim is worse than no suggestion. If your first choice is taken, alternatives are suggested as you type, and only ones that are genuinely available. Page URLs The home page you choose is served at /. Every other published screen becomes a path derived from its name — so name your screens before publishing. \"Pricing\" becomes /pricing; \"Screen 4\" becomes /screen-4, which is not what you want in a share link. Preview URLs Every deployment gets its own preview host, distinct from the live site. Use it to check a build before it becomes the version everyone sees, and to share a proposed change without touching production. Changing your subdomain You can change it later. The old address stops working, so update any links you've already shared. HTTPS Certificates are handled for you on both .uxmagic.io and connected custom domains. There is nothing to configure and nothing to renew."},{"slug":"custom-domains","category":"publish","categoryTitle":"Publish a live site","title":"Custom domains","description":"Serve a published site from your own domain, and how to request one.","url":"https://uxmagic.ai/help/publish/custom-domains","type":"howto","keywords":["custom domain","own domain","dns","cname","domain name","brand"],"headings":["How it works today","Requesting a domain","What you'll need","Apex vs www","HTTPS","Timing"],"updated":"2026-08-27","faqs":[],"related":["subdomains-and-urls","publish-your-first-site","plans-and-limits"],"markdown":"## How it works today\n\nCustom domains are available to paid plans and are set up **by request** rather than self-serve. That's deliberate: pointing a real domain at a new host is the step where an unattended mistake takes a live site down, so a person checks it with you.\n\n## Requesting a domain\n\n1. Open your published site's **Publish settings**.\n2. Choose **Use a custom domain**.\n3. Enter the domain you want to use (for example `www.yourcompany.com`) and submit the request.\n4. The team follows up with the exact DNS records to add, and confirms once the domain is live.\n\nYou'll be able to see the status of your request in the same place.\n\n## What you'll need\n\n- **A domain you control**, with access to its DNS settings.\n- **The ability to add a CNAME** (or an A/ALIAS record for an apex domain).\n\n## Apex vs www\n\nBoth work. `www.yourcompany.com` is the simpler case — a plain CNAME. An apex domain (`yourcompany.com`, no www) needs a provider that supports ALIAS/ANAME flattening; most modern registrars do, and the setup instructions will cover your provider.\n\n## HTTPS\n\nCertificates are issued and renewed automatically once the domain is verified. Nothing to buy, nothing to install.\n\n## Timing\n\nDNS changes propagate on their own schedule — usually minutes, occasionally hours. Don't announce the new address until you've loaded it yourself.","text":"How it works today Custom domains are available to paid plans and are set up by request rather than self-serve. That's deliberate: pointing a real domain at a new host is the step where an unattended mistake takes a live site down, so a person checks it with you. Requesting a domain 1. Open your published site's Publish settings. 2. Choose Use a custom domain. 3. Enter the domain you want to use (for example www.yourcompany.com) and submit the request. 4. The team follows up with the exact DNS records to add, and confirms once the domain is live. You'll be able to see the status of your request in the same place. What you'll need - A domain you control, with access to its DNS settings. - The ability to add a CNAME (or an A/ALIAS record for an apex domain). Apex vs www Both work. www.yourcompany.com is the simpler case — a plain CNAME. An apex domain (yourcompany.com, no www) needs a provider that supports ALIAS/ANAME flattening; most modern registrars do, and the setup instructions will cover your provider. HTTPS Certificates are issued and renewed automatically once the domain is verified. Nothing to buy, nothing to install. Timing DNS changes propagate on their own schedule — usually minutes, occasionally hours. Don't announce the new address until you've loaded it yourself."},{"slug":"redeploy-and-rollback","category":"publish","categoryTitle":"Publish a live site","title":"Redeploy, roll back and unpublish","description":"Ship changes to a live site, revert a bad deployment, and take a site down.","url":"https://uxmagic.ai/help/publish/redeploy-and-rollback","type":"howto","keywords":["redeploy","rollback","unpublish","take down","revert","deployment","update site"],"headings":["Publishing changes","Deployment history","Rolling back","Unpublishing","Site limits"],"updated":"2026-08-27","faqs":[],"related":["publish-your-first-site","subdomains-and-urls"],"markdown":"## Publishing changes\n\nEdits to your screens are **not** live automatically. When you're ready, publish again — a new deployment is built and swapped in when it's ready. Visitors keep seeing the old build until the new one is complete, so there's no broken window mid-deploy.\n\n## Deployment history\n\nEvery publish is kept as a deployment, with its own preview URL. This gives you two useful things: a record of what was live when, and a way to show a proposed build to someone without making it the live site.\n\n## Rolling back\n\nPick an earlier deployment and roll back to it. The site returns to that exact build immediately — there's no rebuild, because the old build still exists.\n\nRoll back first, debug second. It takes seconds and it stops the bleeding.\n\n## Unpublishing\n\n**Unpublish** takes the site offline but keeps the site record, its subdomain and its deployment history — so you can bring it back later on the same address.\n\n**Delete** removes the site entirely and releases the subdomain for anyone to claim. That one is not reversible.\n\n## Site limits\n\nUnpublishing frees the slot the site was occupying against your plan's published-site limit. Deleting does too. See [Plans and limits](/help/account-and-billing/plans-and-limits).","text":"Publishing changes Edits to your screens are not live automatically. When you're ready, publish again — a new deployment is built and swapped in when it's ready. Visitors keep seeing the old build until the new one is complete, so there's no broken window mid-deploy. Deployment history Every publish is kept as a deployment, with its own preview URL. This gives you two useful things: a record of what was live when, and a way to show a proposed build to someone without making it the live site. Rolling back Pick an earlier deployment and roll back to it. The site returns to that exact build immediately — there's no rebuild, because the old build still exists. Roll back first, debug second. It takes seconds and it stops the bleeding. Unpublishing Unpublish takes the site offline but keeps the site record, its subdomain and its deployment history — so you can bring it back later on the same address. Delete removes the site entirely and releases the subdomain for anyone to claim. That one is not reversible. Site limits Unpublishing frees the slot the site was occupying against your plan's published-site limit. Deleting does too. See Plans and limits."},{"slug":"share-a-project","category":"collaborate","categoryTitle":"Share & collaborate","title":"Share a project","description":"Invite specific people, or share a link that lets anyone who opens it join.","url":"https://uxmagic.ai/help/collaborate/share-a-project","type":"howto","keywords":["share","invite","collaborator","link","client review","access"],"headings":["Two ways to share","Steps","What collaborators can do","Whose credits get spent","Sharing for review only","Removing access"],"updated":"2026-08-27","faqs":[],"related":["teams-and-seats","comments-and-feedback","share-a-preview"],"markdown":"![The Share this project dialog, with Access set to Private and the note “This project is visible only to you.”](/help/share-dialog.webp)\n\n## Two ways to share\n\n**Invite by email.** Add specific people to a specific project. They get an email, and the project appears in their dashboard when they accept. Use this for people who will actually work on the design.\n\n**Anyone-with-link.** Generate a link that adds whoever opens it to the project. Use it for a team channel or a client thread where chasing individual email addresses isn't worth it — but be aware that anyone who gets forwarded the link gets access too.\n\n## Steps\n\n1. Open the project.\n2. Click **Share**.\n3. Either enter email addresses, or turn on link sharing and copy the link.\n\n## What collaborators can do\n\nCollaborators work in the project like you do: chat with the AI, edit screens, export. Whose credits get spent depends on how the project is shared — see below.\n\n## Whose credits get spent\n\nThis is the part that surprises people. When a project is shared with a **team**, AI work in that project is charged to the **team's pool** or to the acting member's allocation from it — not to their personal balance. On a project shared person-to-person outside a team, each person's own balance pays for the work they trigger.\n\nSee [Teams and seats](/help/collaborate/teams-and-seats).\n\n## Sharing for review only\n\nIf you want feedback rather than collaborators, share a **preview** instead — it shows the design without giving people the ability to edit it. See [Share a preview for review](/help/collaborate/share-a-preview).\n\n## Removing access\n\nRemove someone from the project's share settings, or turn link sharing off. Turning off the link doesn't remove people who already joined through it — remove them individually.","text":"Two ways to share Invite by email. Add specific people to a specific project. They get an email, and the project appears in their dashboard when they accept. Use this for people who will actually work on the design. Anyone-with-link. Generate a link that adds whoever opens it to the project. Use it for a team channel or a client thread where chasing individual email addresses isn't worth it — but be aware that anyone who gets forwarded the link gets access too. Steps 1. Open the project. 2. Click Share. 3. Either enter email addresses, or turn on link sharing and copy the link. What collaborators can do Collaborators work in the project like you do: chat with the AI, edit screens, export. Whose credits get spent depends on how the project is shared — see below. Whose credits get spent This is the part that surprises people. When a project is shared with a team, AI work in that project is charged to the team's pool or to the acting member's allocation from it — not to their personal balance. On a project shared person-to-person outside a team, each person's own balance pays for the work they trigger. See Teams and seats. Sharing for review only If you want feedback rather than collaborators, share a preview instead — it shows the design without giving people the ability to edit it. See Share a preview for review. Removing access Remove someone from the project's share settings, or turn link sharing off. Turning off the link doesn't remove people who already joined through it — remove them individually."},{"slug":"share-a-preview","category":"collaborate","categoryTitle":"Share & collaborate","title":"Share a preview for review","description":"Send a read-only link so stakeholders can see the design without editing it.","url":"https://uxmagic.ai/help/collaborate/share-a-preview","type":"howto","keywords":["preview","review link","read only","stakeholder","client","present"],"headings":["When to use a preview","Steps","Preview vs published site","Preview vs PDF"],"updated":"2026-08-27","faqs":[],"related":["share-a-project","comments-and-feedback","publish-your-first-site"],"markdown":"![The Prototype menu open on the canvas, offering “Create prototype” and listing an existing three-screen prototype.](/help/prototype-menu.webp)\n\n## When to use a preview\n\nPreview links are for people who need to **look**, not build: clients, execs, engineers scoping work. They see the screens as designed, without the canvas, the chat or the ability to change anything.\n\n## Steps\n\n1. Open the project or the screen.\n2. **Share → Preview link.**\n3. Send the link.\n\n## Preview vs published site\n\n- **Preview** — a review artifact. Fast, disposable, tied to the project.\n- **[Published site](/help/publish/publish-your-first-site)** — a real website on its own address, with pages, hosting and deployment history.\n\nFor a client sign-off, preview. For something the client will show *their* customers, publish.\n\n## Preview vs PDF\n\nA preview stays current as you iterate; a PDF is frozen the moment you export it. Send previews for live review, PDFs for a record of what was approved. See [Export as PDF or image](/help/export-and-handoff/export-pdf-and-images).","text":"When to use a preview Preview links are for people who need to look, not build: clients, execs, engineers scoping work. They see the screens as designed, without the canvas, the chat or the ability to change anything. Steps 1. Open the project or the screen. 2. Share → Preview link. 3. Send the link. Preview vs published site - Preview — a review artifact. Fast, disposable, tied to the project. - Published site — a real website on its own address, with pages, hosting and deployment history. For a client sign-off, preview. For something the client will show their customers, publish. Preview vs PDF A preview stays current as you iterate; a PDF is frozen the moment you export it. Send previews for live review, PDFs for a record of what was approved. See Export as PDF or image."},{"slug":"teams-and-seats","category":"collaborate","categoryTitle":"Share & collaborate","title":"Teams, seats and shared credits","description":"Create a team, invite members, assign roles, and allocate credits from a shared pool.","url":"https://uxmagic.ai/help/collaborate/teams-and-seats","type":"guide","keywords":["team","seats","members","roles","shared credits","organisation","workspace"],"headings":["Creating a team","Seats","Roles","Shared credits","Removing a member","Enterprise"],"updated":"2026-08-27","faqs":[{"question":"Do team members need their own subscription?","answer":"No. Members work against the team’s seats and credit pool. The team owner manages both."},{"question":"Can I cap how many credits one member can spend?","answer":"Yes. The owner can set a per-member credit allocation, so one person cannot drain the shared pool."}],"related":["share-a-project","how-credits-work","plans-and-limits"],"markdown":"## Creating a team\n\nFrom your account, create a team and invite members by email. Invitations appear in the invitee's dashboard and by email; they join once they accept.\n\n## Seats\n\nA team has a number of **seats**, which caps how many members can be active. Owners can adjust the seat count as the team grows. Enterprise plans include unlimited seats.\n\n## Roles\n\nMembers have roles that determine what they can administer — who can invite, who can change billing, who can only design. The owner can transfer ownership to another member.\n\n## Shared credits\n\nThe important part. A team has a **shared credit pool**:\n\n- AI work in a team project draws from the team's pool, not the individual's personal balance.\n- The owner can set a **per-member allocation**, so one enthusiastic user running big flows can't spend the month's credits in an afternoon.\n- Members without an allocation draw from the general pool.\n\nSee [How credits work](/help/account-and-billing/how-credits-work).\n\n## Removing a member\n\nRemoving someone revokes their access to team projects. Work they created stays in the team.\n\n## Enterprise\n\nEnterprise adds SSO/SAML, an admin dashboard, a shared design system and component library, custom credit allocation and priority support. See [Plans and limits](/help/account-and-billing/plans-and-limits).","text":"Creating a team From your account, create a team and invite members by email. Invitations appear in the invitee's dashboard and by email; they join once they accept. Seats A team has a number of seats, which caps how many members can be active. Owners can adjust the seat count as the team grows. Enterprise plans include unlimited seats. Roles Members have roles that determine what they can administer — who can invite, who can change billing, who can only design. The owner can transfer ownership to another member. Shared credits The important part. A team has a shared credit pool: - AI work in a team project draws from the team's pool, not the individual's personal balance. - The owner can set a per-member allocation, so one enthusiastic user running big flows can't spend the month's credits in an afternoon. - Members without an allocation draw from the general pool. See How credits work. Removing a member Removing someone revokes their access to team projects. Work they created stays in the team. Enterprise Enterprise adds SSO/SAML, an admin dashboard, a shared design system and component library, custom credit allocation and priority support. See Plans and limits."},{"slug":"comments-and-feedback","category":"collaborate","categoryTitle":"Share & collaborate","title":"Comments and feedback","description":"Leave comments on a design and resolve them as you work through them.","url":"https://uxmagic.ai/help/collaborate/comments-and-feedback","type":"howto","keywords":["comments","feedback","annotate","review","notes","threads"],"headings":["Commenting","Resolving","Working through feedback with the AI","Who can comment"],"updated":"2026-08-27","faqs":[],"related":["share-a-preview","share-a-project"],"markdown":"## Commenting\n\nComments attach to a design and thread, so a conversation about the hero stays with the hero instead of scattering across Slack.\n\n1. Open the project or preview.\n2. Add a comment where the feedback belongs.\n3. Reply in the thread to keep the discussion together.\n\n## Resolving\n\nResolve a thread once you've acted on it. Resolved threads stay available, so the record of *why* something changed isn't lost.\n\n## Working through feedback with the AI\n\nComments are for humans; the chat is for the AI. The efficient loop is: collect comments, then translate a batch into a couple of specific chat instructions. Two or three changes at a time lands more reliably than a list of twelve. See [Editing with chat](/help/design-and-edit/chat-editing).\n\n## Who can comment\n\nAnyone with access to the project — and, for review links, anyone you send the preview to.","text":"Commenting Comments attach to a design and thread, so a conversation about the hero stays with the hero instead of scattering across Slack. 1. Open the project or preview. 2. Add a comment where the feedback belongs. 3. Reply in the thread to keep the discussion together. Resolving Resolve a thread once you've acted on it. Resolved threads stay available, so the record of why something changed isn't lost. Working through feedback with the AI Comments are for humans; the chat is for the AI. The efficient loop is: collect comments, then translate a batch into a couple of specific chat instructions. Two or three changes at a time lands more reliably than a list of twelve. See Editing with chat. Who can comment Anyone with access to the project — and, for review links, anyone you send the preview to."},{"slug":"community-and-inspiration","category":"collaborate","categoryTitle":"Share & collaborate","title":"Community and inspiration","description":"Browse designs the community has shared, and publish your own.","url":"https://uxmagic.ai/help/collaborate/community-and-inspiration","type":"guide","keywords":["community","inspiration","showcase","examples","templates","gallery"],"headings":["Browse the community","Using a community design","Sharing your own","Inspiration inside the product"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","ways-to-generate-a-screen"],"markdown":"![The Community page, showing published projects that can be opened and remixed.](/help/community.webp)\n\n## Browse the community\n\nThe [community gallery](/community) collects designs made with UXMagic, organised by category. It's the fastest way to see what good prompts produce, and to find a starting point close to what you need.\n\n## Using a community design\n\nOpen one you like and use it as a reference: start from it, or describe what you want by pointing at it. Community designs are inspiration, not licensed assets — treat imagery and copy as placeholders.\n\n## Sharing your own\n\nYou can publish a project to the community from its share settings. Check the content first: community designs are public, so client names, real customer data and unreleased branding should come out before you post.\n\n## Inspiration inside the product\n\nThe dashboard also surfaces inspirations and examples while you work, so you can pull a layout idea in without leaving the canvas.","text":"Browse the community The community gallery collects designs made with UXMagic, organised by category. It's the fastest way to see what good prompts produce, and to find a starting point close to what you need. Using a community design Open one you like and use it as a reference: start from it, or describe what you want by pointing at it. Community designs are inspiration, not licensed assets — treat imagery and copy as placeholders. Sharing your own You can publish a project to the community from its share settings. Check the content first: community designs are public, so client names, real customer data and unreleased branding should come out before you post. Inspiration inside the product The dashboard also surfaces inspirations and examples while you work, so you can pull a layout idea in without leaving the canvas."},{"slug":"mcp-server","category":"integrations","categoryTitle":"Integrations & developers","title":"UXMagic MCP server","description":"Connect Claude, Cursor, VS Code, Windsurf, Codex or Antigravity to your UXMagic projects.","url":"https://uxmagic.ai/help/integrations/mcp-server","type":"howto","keywords":["mcp","model context protocol","cursor","claude","vscode","windsurf","ide","codex"],"headings":["Setup","What your assistant can do once connected","A typical workflow","Credits","Security"],"updated":"2026-08-27","faqs":[{"question":"Which IDEs are supported?","answer":"Claude, Cursor, VS Code, Windsurf, Codex and Antigravity — and any other MCP-compatible client."},{"question":"Do I need to install anything?","answer":"No. UXMagic generates the configuration for your IDE; you paste it into the IDE’s MCP settings."}],"related":["api-keys","export-code","github-sync"],"markdown":"The Model Context Protocol (MCP) is an open standard that lets AI assistants talk directly to external tools. The UXMagic MCP server connects your AI coding assistant to your actual UXMagic projects — so instead of copying screenshots into a chat, your assistant reads the real design.\n\n![The Connect MCP dialog, showing the supported IDEs: Antigravity, Cursor, Codex, VS Code, Windsurf and Claude.](/help/mcp-dialog.webp)\n\n## Setup\n\n1. Go to the [MCP page](/mcp) and choose your IDE.\n2. **Generate an API key** — see [API keys](/help/integrations/api-keys).\n3. **Copy the generated configuration** and paste it into your IDE's MCP settings.\n4. Restart the IDE if it doesn't pick up the new server immediately.\n\nSupported out of the box: **Claude, Cursor, VS Code, Windsurf, Codex and Antigravity**. Any MCP-compatible client works with the same configuration.\n\n## What your assistant can do once connected\n\n**Read your work**\n\n- List your projects, and get a project's details.\n- List the screens in a project, and get a screen's details.\n- Read a screen's HTML, and read the project's theme.\n- List and read the project's documents (PRDs, briefs).\n\n**Change your work**\n\n- Create a project, create a screen, duplicate a screen.\n- Make a targeted find/replace edit to a screen, or replace a screen's whole body.\n- Replace an image.\n- Export a screen to Figma.\n\n**Generate**\n\n- Kick off a design generation, check its status, then confirm or cancel it.\n\nGeneration is deliberately a three-step handshake rather than one call: your assistant starts it, watches it, and you decide whether to keep the result — so an agent loop can't quietly burn your credits.\n\n## A typical workflow\n\n> \"Read the Pricing screen from my Ledgerly project and implement it as a React component using our design tokens.\"\n\nYour assistant pulls the real markup and theme, then writes code against them. No screenshots, no drift, no re-describing the design.\n\n## Credits\n\nRead operations are free. Generation through MCP costs the same credits as generation in the app — it's the same engine.\n\n## Security\n\nYour API key authenticates the connection to your account. Keep it out of committed files, and rotate or revoke it any time from your account settings.","text":"The Model Context Protocol (MCP) is an open standard that lets AI assistants talk directly to external tools. The UXMagic MCP server connects your AI coding assistant to your actual UXMagic projects — so instead of copying screenshots into a chat, your assistant reads the real design. Setup 1. Go to the MCP page and choose your IDE. 2. Generate an API key — see API keys. 3. Copy the generated configuration and paste it into your IDE's MCP settings. 4. Restart the IDE if it doesn't pick up the new server immediately. Supported out of the box: Claude, Cursor, VS Code, Windsurf, Codex and Antigravity. Any MCP-compatible client works with the same configuration. What your assistant can do once connected Read your work - List your projects, and get a project's details. - List the screens in a project, and get a screen's details. - Read a screen's HTML, and read the project's theme. - List and read the project's documents (PRDs, briefs). Change your work - Create a project, create a screen, duplicate a screen. - Make a targeted find/replace edit to a screen, or replace a screen's whole body. - Replace an image. - Export a screen to Figma. Generate - Kick off a design generation, check its status, then confirm or cancel it. Generation is deliberately a three-step handshake rather than one call: your assistant starts it, watches it, and you decide whether to keep the result — so an agent loop can't quietly burn your credits. A typical workflow \"Read the Pricing screen from my Ledgerly project and implement it as a React component using our design tokens.\" Your assistant pulls the real markup and theme, then writes code against them. No screenshots, no drift, no re-describing the design. Credits Read operations are free. Generation through MCP costs the same credits as generation in the app — it's the same engine. Security Your API key authenticates the connection to your account. Keep it out of committed files, and rotate or revoke it any time from your account settings."},{"slug":"api-keys","category":"integrations","categoryTitle":"Integrations & developers","title":"API keys","description":"Create, rotate and revoke keys for the MCP server and API access.","url":"https://uxmagic.ai/help/integrations/api-keys","type":"howto","keywords":["api key","token","authentication","rotate","revoke","secret"],"headings":["Creating a key","Rotating","Revoking","Keeping keys safe","If a key stops working"],"updated":"2026-08-27","faqs":[],"related":["mcp-server","github-sync"],"markdown":"## Creating a key\n\n1. Open **Manage account → API keys**.\n2. Create a key and give it a name that says where it's used (\"Cursor — laptop\", \"CI\").\n3. **Copy it immediately.** The full key is shown once.\n\n## Rotating\n\nRotating issues a new secret for the same key. Anything using the old value stops working the moment you rotate, so update your configuration in the same sitting.\n\n## Revoking\n\nDeleting a key is immediate and permanent. Any IDE or script using it starts failing right away — which is exactly what you want if a key has leaked.\n\n## Keeping keys safe\n\n- **Never commit a key.** Use your IDE's MCP settings or an environment variable.\n- **One key per place.** A shared key can only be revoked by breaking every consumer at once.\n- **Rotate when someone leaves**, or when a key has been anywhere it shouldn't.\n\n## If a key stops working\n\nCheck, in this order: the key wasn't rotated or revoked; it was pasted whole; and you're pointing at the right account. Keys are per-user, so a key from a colleague's account won't see your projects.","text":"Creating a key 1. Open Manage account → API keys. 2. Create a key and give it a name that says where it's used (\"Cursor — laptop\", \"CI\"). 3. Copy it immediately. The full key is shown once. Rotating Rotating issues a new secret for the same key. Anything using the old value stops working the moment you rotate, so update your configuration in the same sitting. Revoking Deleting a key is immediate and permanent. Any IDE or script using it starts failing right away — which is exactly what you want if a key has leaked. Keeping keys safe - Never commit a key. Use your IDE's MCP settings or an environment variable. - One key per place. A shared key can only be revoked by breaking every consumer at once. - Rotate when someone leaves, or when a key has been anywhere it shouldn't. If a key stops working Check, in this order: the key wasn't rotated or revoked; it was pasted whole; and you're pointing at the right account. Keys are per-user, so a key from a colleague's account won't see your projects."},{"slug":"figma-plugin","category":"integrations","categoryTitle":"Integrations & developers","title":"The UXMagic Figma plugin","description":"Generate UI and bring websites and screenshots into Figma without leaving Figma.","url":"https://uxmagic.ai/help/integrations/figma-plugin","type":"howto","keywords":["figma plugin","plugin","website to figma","screenshot to ui","figma"],"headings":["Installing","What it does","Plugin vs the web app","Credits"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","import-from-figma","mcp-server"],"markdown":"The plugin — **UXMagic AI UI Generator (Website to Figma, Screenshot to UI)** — puts generation inside Figma, for people whose work already lives there.\n\n## Installing\n\n1. Open the [plugin page on Figma Community](https://www.figma.com/community/plugin/1374402598280022366/uxmagic-ai-ui-generator-website-to-figma-screenshot-to-ui).\n2. Click **Open in Figma**.\n3. Sign in with your UXMagic account when prompted.\n\n## What it does\n\n- **Generate UI from a prompt**, straight onto the Figma canvas.\n- **Website to Figma** — paste a URL and get the page as editable Figma layers.\n- **Screenshot to UI** — drop in an image and get real layers back.\n\nEverything arrives as proper Figma frames with auto-layout, not as flattened images.\n\n## Plugin vs the web app\n\n- **Plugin** — best when Figma is your working surface and you want output there directly.\n- **[Web app](/dashboard)** — best for multi-screen projects, themes, versions, publishing and collaboration.\n\nThey share your account and your credit balance, so you can move between them.\n\n## Credits\n\nPlugin generations and exports draw on the same balance as the web app. See [How credits work](/help/account-and-billing/how-credits-work).","text":"The plugin — UXMagic AI UI Generator (Website to Figma, Screenshot to UI) — puts generation inside Figma, for people whose work already lives there. Installing 1. Open the plugin page on Figma Community. 2. Click Open in Figma. 3. Sign in with your UXMagic account when prompted. What it does - Generate UI from a prompt, straight onto the Figma canvas. - Website to Figma — paste a URL and get the page as editable Figma layers. - Screenshot to UI — drop in an image and get real layers back. Everything arrives as proper Figma frames with auto-layout, not as flattened images. Plugin vs the web app - Plugin — best when Figma is your working surface and you want output there directly. - Web app — best for multi-screen projects, themes, versions, publishing and collaboration. They share your account and your credit balance, so you can move between them. Credits Plugin generations and exports draw on the same balance as the web app. See How credits work."},{"slug":"github-sync","category":"integrations","categoryTitle":"Integrations & developers","title":"GitHub sync","description":"Push exported code straight into a repository, and deploy with GitHub Pages.","url":"https://uxmagic.ai/help/integrations/github-sync","type":"howto","keywords":["github","repo","git","push code","pages","sync","commit"],"headings":["Connecting GitHub","Pushing code","GitHub Pages","Good practice","Disconnecting"],"updated":"2026-08-27","faqs":[],"related":["export-code","api-keys","publish-your-first-site"],"markdown":"## Connecting GitHub\n\n1. Go to **Integrations → GitHub**.\n2. Authorise UXMagic (OAuth).\n3. Pick an existing repository, or have UXMagic create one.\n\n## Pushing code\n\n1. Select the screens you want.\n2. **Export → GitHub.**\n3. Choose the repository and branch.\n4. Push. The exported code is committed for you.\n\nPushing again updates the same files, so the repo stays in step with the design as it evolves.\n\n## GitHub Pages\n\nYou can deploy the pushed code with GitHub Pages directly from the integration — useful for a quick public preview when you want the artifact to live in your own GitHub org rather than on UXMagic's hosting.\n\nFor a site you actually intend to run, [publishing](/help/publish/publish-your-first-site) gives you a proper address, deployment history and rollback.\n\n## Good practice\n\n- **Push to a branch**, not to `main`, and review the diff.\n- **Bring assets into the repo.** Exported code references images by URL; download them before you ship.\n- **Expect a front end.** There's no data layer or routing — wire it into your app.\n\n## Disconnecting\n\nDisconnect from **Integrations**. That revokes UXMagic's access; anything already pushed stays in your repo.","text":"Connecting GitHub 1. Go to Integrations → GitHub. 2. Authorise UXMagic (OAuth). 3. Pick an existing repository, or have UXMagic create one. Pushing code 1. Select the screens you want. 2. Export → GitHub. 3. Choose the repository and branch. 4. Push. The exported code is committed for you. Pushing again updates the same files, so the repo stays in step with the design as it evolves. GitHub Pages You can deploy the pushed code with GitHub Pages directly from the integration — useful for a quick public preview when you want the artifact to live in your own GitHub org rather than on UXMagic's hosting. For a site you actually intend to run, publishing gives you a proper address, deployment history and rollback. Good practice - Push to a branch, not to main, and review the diff. - Bring assets into the repo. Exported code references images by URL; download them before you ship. - Expect a front end. There's no data layer or routing — wire it into your app. Disconnecting Disconnect from Integrations. That revokes UXMagic's access; anything already pushed stays in your repo."},{"slug":"connect-uxmagic-to-ai-assistants","category":"integrations","categoryTitle":"Integrations & developers","title":"Use UXMagic from ChatGPT, Claude and other assistants","description":"How AI assistants can read UXMagic’s documentation and drive your projects.","url":"https://uxmagic.ai/help/integrations/connect-uxmagic-to-ai-assistants","type":"guide","keywords":["chatgpt","claude","perplexity","ai assistant","llms.txt","ai support","ai info"],"headings":["1. Asking an assistant *about* UXMagic","2. Having an assistant *operate* UXMagic","Which to use"],"updated":"2026-08-27","faqs":[],"related":["mcp-server","api-keys","contact-support"],"markdown":"There are two different things people mean by \"use UXMagic with AI\", and they need different setups.\n\n## 1. Asking an assistant *about* UXMagic\n\nAssistants answer from what they can read. UXMagic publishes machine-readable surfaces specifically so those answers are accurate rather than invented:\n\n- **[/ai-info](/ai-info)** — the official, structured brief about the product: what it is, what it does, who it's for, what it costs, and what it does *not* do.\n- **[/llms.txt](/llms.txt)** — a curated index of the public site for AI answer engines.\n- **[/llms-full.txt](/llms-full.txt)** — a single self-contained document covering capabilities, exports, pricing and FAQs.\n- **[/llms-help.txt](/llms-help.txt)** — this entire help center as one plain-text document.\n- **[/help.json](/help.json)** — the help corpus as structured JSON.\n\nIf an assistant tells you something about UXMagic that turns out to be wrong, pointing it at `uxmagic.ai/ai-info` is usually the fastest fix.\n\n## 2. Having an assistant *operate* UXMagic\n\nThat's the MCP server: your assistant reads your real projects and screens, and can create and edit them. See [UXMagic MCP server](/help/integrations/mcp-server).\n\n## Which to use\n\n- Writing code from a design → **MCP**.\n- Asking \"what does UXMagic cost\" → **the published surfaces above**; no setup needed.\n- Building an automation on top of UXMagic → **MCP with an [API key](/help/integrations/api-keys)**.","text":"There are two different things people mean by \"use UXMagic with AI\", and they need different setups. 1. Asking an assistant about UXMagic Assistants answer from what they can read. UXMagic publishes machine-readable surfaces specifically so those answers are accurate rather than invented: - /ai-info — the official, structured brief about the product: what it is, what it does, who it's for, what it costs, and what it does not do. - /llms.txt — a curated index of the public site for AI answer engines. - /llms-full.txt — a single self-contained document covering capabilities, exports, pricing and FAQs. - /llms-help.txt — this entire help center as one plain-text document. - /help.json — the help corpus as structured JSON. If an assistant tells you something about UXMagic that turns out to be wrong, pointing it at uxmagic.ai/ai-info is usually the fastest fix. 2. Having an assistant operate UXMagic That's the MCP server: your assistant reads your real projects and screens, and can create and edit them. See UXMagic MCP server. Which to use - Writing code from a design → MCP. - Asking \"what does UXMagic cost\" → the published surfaces above; no setup needed. - Building an automation on top of UXMagic → MCP with an API key."},{"slug":"how-credits-work","category":"account-and-billing","categoryTitle":"Plans, credits & billing","title":"How credits work","description":"Exactly what each AI action costs, which actions are free, and how to make a balance go further.","url":"https://uxmagic.ai/help/account-and-billing/how-credits-work","type":"reference","keywords":["credits","cost","pricing","usage","out of credits","balance","how much"],"headings":["What each action costs","Starting a session","The economics, in one line","Making a balance go further","Team credits","Running out"],"updated":"2026-08-27","faqs":[{"question":"Do credits roll over?","answer":"Monthly plan credits reset each billing cycle and do not roll over. Free-plan credits are a one-time grant."},{"question":"Do I get charged if a generation fails?","answer":"Work that produced nothing should not be charged. If you were billed for a failed run, contact support with the project link and we will correct it."},{"question":"Are reading and theming free?","answer":"Yes. Reading screens, reading the theme, reading images and documents, and building or updating a theme all cost zero credits."}],"related":["plans-and-limits","i-ran-out-of-credits","teams-and-seats"],"markdown":"Credits are the unit of AI work. Reading and theming are free; generating and rebuilding cost, in proportion to how much compute the action actually takes.\n\n## What each action costs\n\n| Action | Credits |\n| --- | --- |\n| Design a new screen | 3 |\n| Rewrite a whole screen | 2 |\n| Targeted edit (find and replace) | 0.2 |\n| Propose a screen plan | 1 |\n| Clone a website from a URL | 10 |\n| Finish an incomplete clone | 2 |\n| Generate an image | 0.5 |\n| Edit an existing image | 0.5 |\n| Replace an asset across every screen | 1 |\n| Read a screen, theme, image or document | 0 |\n| Build or update a theme | 0 |\n| Answer a clarifying question | 0 |\n\n**Per-screen operations** are charged for each screen they touch, at **6 credits per screen**:\n\n- Regenerate a screen\n- Generate variations\n- Generate a flow\n- Convert a screen to a mobile version\n- Convert a screen to a desktop version\n\nSo converting eight screens to mobile costs 48 credits, not 6.\n\n## Starting a session\n\nA chat session needs at least **4 credits** to start — enough to cover a plan plus one full screen, so a session can't begin, plan, and then run dry before producing anything.\n\n## The economics, in one line\n\n**Editing is roughly fifteen times cheaper than rewriting, and rewriting is cheaper than regenerating.** The single biggest saving available to you is to ask for the specific change instead of asking for the screen again.\n\n## Making a balance go further\n\n1. **Ask for targeted changes.** \"Make the hero shorter\" costs a fraction of \"redo this page\".\n2. **Get the theme right early.** Theme changes are free and apply everywhere; recolouring screens one by one is neither.\n3. **Take the screen plan seriously.** Fixing the plan costs 1 credit. Fixing eight wrong screens costs 24 to 48.\n4. **Do device variants last.** Convert once, at the end, rather than re-converting after every change.\n5. **Use edit mode for copy.** Text and image swaps in edit mode are free.\n6. **Check your balance before a big flow.** A run that stops halfway leaves you with half a flow.\n\n## Team credits\n\nIn a team project, AI work is charged to the **team's shared pool** or to your allocation from it — not to your personal balance. Owners can cap per-member spend. See [Teams and seats](/help/collaborate/teams-and-seats).\n\n## Running out\n\nYou'll get a clear message rather than a silent failure. See [I ran out of credits](/help/troubleshooting/i-ran-out-of-credits).","text":"Credits are the unit of AI work. Reading and theming are free; generating and rebuilding cost, in proportion to how much compute the action actually takes. What each action costs Action Credits --- --- Design a new screen 3 Rewrite a whole screen 2 Targeted edit (find and replace) 0.2 Propose a screen plan 1 Clone a website from a URL 10 Finish an incomplete clone 2 Generate an image 0.5 Edit an existing image 0.5 Replace an asset across every screen 1 Read a screen, theme, image or document 0 Build or update a theme 0 Answer a clarifying question 0 Per-screen operations are charged for each screen they touch, at 6 credits per screen: - Regenerate a screen - Generate variations - Generate a flow - Convert a screen to a mobile version - Convert a screen to a desktop version So converting eight screens to mobile costs 48 credits, not 6. Starting a session A chat session needs at least 4 credits to start — enough to cover a plan plus one full screen, so a session can't begin, plan, and then run dry before producing anything. The economics, in one line Editing is roughly fifteen times cheaper than rewriting, and rewriting is cheaper than regenerating. The single biggest saving available to you is to ask for the specific change instead of asking for the screen again. Making a balance go further 1. Ask for targeted changes. \"Make the hero shorter\" costs a fraction of \"redo this page\". 2. Get the theme right early. Theme changes are free and apply everywhere; recolouring screens one by one is neither. 3. Take the screen plan seriously. Fixing the plan costs 1 credit. Fixing eight wrong screens costs 24 to 48. 4. Do device variants last. Convert once, at the end, rather than re-converting after every change. 5. Use edit mode for copy. Text and image swaps in edit mode are free. 6. Check your balance before a big flow. A run that stops halfway leaves you with half a flow. Team credits In a team project, AI work is charged to the team's shared pool or to your allocation from it — not to your personal balance. Owners can cap per-member spend. See Teams and seats. Running out You'll get a clear message rather than a silent failure. See I ran out of credits."},{"slug":"plans-and-limits","category":"account-and-billing","categoryTitle":"Plans, credits & billing","title":"Plans and limits","description":"What Free, Pro and Enterprise include, and which limits apply to what.","url":"https://uxmagic.ai/help/account-and-billing/plans-and-limits","type":"reference","keywords":["plans","pricing","free","pro","enterprise","limits","upgrade","tiers"],"headings":["Free","Pro","Enterprise","Which limits apply where","Billing cadence"],"updated":"2026-08-27","faqs":[],"related":["how-credits-work","upgrade-or-downgrade","teams-and-seats"],"markdown":"Live prices and the full feature matrix are on the [pricing page](/pricing). This is the shape of it.\n\n## Free\n\n- A **one-time** grant of credits — not a monthly refill.\n- A small number of screens and projects.\n- A small fixed number of Figma exports.\n- Core capabilities: UI design, wireframes, flow mode, screenshot and sketch to UI, clone a site, style guide, Figma import, code export.\n- **No credit card required.**\n\n## Pro\n\n- A **monthly** credit allowance, resetting each billing cycle.\n- Unlimited projects, a much larger screen allowance, and a large monthly Figma export allowance.\n- Everything on Free, without the ceilings.\n- Removing the UX Magic badge from published sites, and private/password-protected sites.\n\n## Enterprise\n\nEverything in Pro, plus:\n\n- Unlimited AI-generated screens and unlimited seats\n- Custom credit allocation\n- SSO / SAML authentication\n- Team admin dashboard\n- Shared design system and component library\n- Priority support with a guaranteed response time\n- Dedicated onboarding and training\n- Custom contract and invoicing\n- Early access to new features\n\n[Talk to us](/support) about Enterprise.\n\n## Which limits apply where\n\n| Limit | Applies to |\n| --- | --- |\n| Credits | All AI generation, in-app and via MCP and the Figma plugin |\n| Screens | Screens created in projects |\n| Projects | Concurrent projects on your account |\n| Figma exports | Each export operation |\n| Published sites | Live sites at once; unpublishing frees the slot |\n| Seats | Active members of a team |\n\n## Billing cadence\n\nMonthly or annual. Annual is substantially cheaper per month. You can switch cadence any time from billing settings. See [Upgrade or downgrade](/help/account-and-billing/upgrade-or-downgrade).","text":"Live prices and the full feature matrix are on the pricing page. This is the shape of it. Free - A one-time grant of credits — not a monthly refill. - A small number of screens and projects. - A small fixed number of Figma exports. - Core capabilities: UI design, wireframes, flow mode, screenshot and sketch to UI, clone a site, style guide, Figma import, code export. - No credit card required. Pro - A monthly credit allowance, resetting each billing cycle. - Unlimited projects, a much larger screen allowance, and a large monthly Figma export allowance. - Everything on Free, without the ceilings. - Removing the UX Magic badge from published sites, and private/password-protected sites. Enterprise Everything in Pro, plus: - Unlimited AI-generated screens and unlimited seats - Custom credit allocation - SSO / SAML authentication - Team admin dashboard - Shared design system and component library - Priority support with a guaranteed response time - Dedicated onboarding and training - Custom contract and invoicing - Early access to new features Talk to us about Enterprise. Which limits apply where Limit Applies to --- --- Credits All AI generation, in-app and via MCP and the Figma plugin Screens Screens created in projects Projects Concurrent projects on your account Figma exports Each export operation Published sites Live sites at once; unpublishing frees the slot Seats Active members of a team Billing cadence Monthly or annual. Annual is substantially cheaper per month. You can switch cadence any time from billing settings. See Upgrade or downgrade."},{"slug":"upgrade-or-downgrade","category":"account-and-billing","categoryTitle":"Plans, credits & billing","title":"Upgrade, downgrade or switch billing cadence","description":"Change plan or move between monthly and annual, and what happens to your credits.","url":"https://uxmagic.ai/help/account-and-billing/upgrade-or-downgrade","type":"howto","keywords":["upgrade","downgrade","annual","monthly","change plan","switch"],"headings":["Upgrading","Downgrading","Monthly ↔ annual","What happens to credits","Team plans"],"updated":"2026-08-27","faqs":[],"related":["plans-and-limits","billing-and-invoices","cancel-your-subscription"],"markdown":"## Upgrading\n\nFrom **Manage account → Billing**, pick the plan you want. Upgrades take effect **immediately** — the new allowance is available straight away.\n\n## Downgrading\n\nDowngrades take effect from the **next billing cycle**. You keep your current plan and its allowance until then, so you're never cut off mid-month for a change you made on the 3rd.\n\nAfter a downgrade, plan limits apply going forward. Projects and screens beyond the new limit aren't deleted, but you may not be able to create more until you're back under it.\n\n## Monthly ↔ annual\n\nYou can switch cadence any time from billing settings. Annual is priced at a substantial discount to twelve months of monthly.\n\nOne thing to know: switching **mid-cycle** can produce a proration charge from the payment provider as well as the new plan's charge. If you'd rather avoid two charges close together, switch at the start of a cycle — or [talk to us](/support) first and we'll walk it through with you.\n\n## What happens to credits\n\n- **Upgrade** — the new allowance becomes available immediately.\n- **Downgrade** — the new allowance applies from the next cycle.\n- Monthly credits **do not roll over** between cycles.\n\n## Team plans\n\nFor teams, the owner manages the plan and seats. Members don't need their own subscriptions. See [Teams and seats](/help/collaborate/teams-and-seats).","text":"Upgrading From Manage account → Billing, pick the plan you want. Upgrades take effect immediately — the new allowance is available straight away. Downgrading Downgrades take effect from the next billing cycle. You keep your current plan and its allowance until then, so you're never cut off mid-month for a change you made on the 3rd. After a downgrade, plan limits apply going forward. Projects and screens beyond the new limit aren't deleted, but you may not be able to create more until you're back under it. Monthly ↔ annual You can switch cadence any time from billing settings. Annual is priced at a substantial discount to twelve months of monthly. One thing to know: switching mid-cycle can produce a proration charge from the payment provider as well as the new plan's charge. If you'd rather avoid two charges close together, switch at the start of a cycle — or talk to us first and we'll walk it through with you. What happens to credits - Upgrade — the new allowance becomes available immediately. - Downgrade — the new allowance applies from the next cycle. - Monthly credits do not roll over between cycles. Team plans For teams, the owner manages the plan and seats. Members don't need their own subscriptions. See Teams and seats."},{"slug":"billing-and-invoices","category":"account-and-billing","categoryTitle":"Plans, credits & billing","title":"Billing, invoices and payment methods","description":"Payment methods, where to find invoices, and what to do about an unexpected charge.","url":"https://uxmagic.ai/help/account-and-billing/billing-and-invoices","type":"howto","keywords":["invoice","receipt","billing","card","payment","charged","vat","stripe"],"headings":["Payment methods","Invoices","An unexpected charge","Failed payments","Currency"],"updated":"2026-08-27","faqs":[],"related":["upgrade-or-downgrade","refunds","cancel-your-subscription"],"markdown":"## Payment methods\n\nPayments are processed by Stripe. Major credit and debit cards are accepted; available local methods depend on your country. UXMagic never sees or stores your full card details.\n\n## Invoices\n\nInvoices and receipts are in **Manage account → Billing**. Each charge has a downloadable invoice, and you can add your company details and VAT/tax ID so they appear on it.\n\nSet your billing details **before** you need the invoice — reissuing after the fact is more painful than filling in a form now.\n\n## An unexpected charge\n\nContact us at **hello@uxmagic.ai** before disputing with your bank or with Stripe. Most billing questions are resolved the same day when you come to us first.\n\nFiling a dispute triggers an automated process on the payment provider's side that can suspend your account while the case is reviewed — which helps nobody, least of all you. We'd much rather just fix it.\n\n## Failed payments\n\nIf a payment fails, you'll be notified and given time to update your card before anything changes on your account. Update it in **Manage account → Billing**.\n\n## Currency\n\nPrices are in USD. Your bank may apply its own conversion and fees.","text":"Payment methods Payments are processed by Stripe. Major credit and debit cards are accepted; available local methods depend on your country. UXMagic never sees or stores your full card details. Invoices Invoices and receipts are in Manage account → Billing. Each charge has a downloadable invoice, and you can add your company details and VAT/tax ID so they appear on it. Set your billing details before you need the invoice — reissuing after the fact is more painful than filling in a form now. An unexpected charge Contact us at hello@uxmagic.ai before disputing with your bank or with Stripe. Most billing questions are resolved the same day when you come to us first. Filing a dispute triggers an automated process on the payment provider's side that can suspend your account while the case is reviewed — which helps nobody, least of all you. We'd much rather just fix it. Failed payments If a payment fails, you'll be notified and given time to update your card before anything changes on your account. Update it in Manage account → Billing. Currency Prices are in USD. Your bank may apply its own conversion and fees."},{"slug":"refunds","category":"account-and-billing","categoryTitle":"Plans, credits & billing","title":"Refunds","description":"The refund policy, and what to do if something went wrong.","url":"https://uxmagic.ai/help/account-and-billing/refunds","type":"reference","keywords":["refund","money back","cancel charge","reimburse"],"headings":["The policy","If you're unsure which plan you need","If something actually went wrong","Before you dispute"],"updated":"2026-08-27","faqs":[],"related":["billing-and-invoices","cancel-your-subscription","contact-support"],"markdown":"## The policy\n\nUXMagic does not offer refunds on subscriptions or credit purchases. We recommend trying the Free plan first — it exists precisely so you can judge the output before paying.\n\n## If you're unsure which plan you need\n\n[Ask us](/support) before you buy. We'd rather spend five minutes helping you pick than have you buy the wrong thing.\n\n## If something actually went wrong\n\nThe policy is about buyer's remorse, not about our mistakes. If you were double-charged, charged after cancelling, or billed for work that failed and produced nothing, that is a billing error — write to **hello@uxmagic.ai** with the invoice and we'll sort it out.\n\n## Before you dispute\n\nCome to us first. A bank dispute can suspend your account while it's reviewed, and it takes far longer than an email would have. See [Billing, invoices and payment methods](/help/account-and-billing/billing-and-invoices).","text":"The policy UXMagic does not offer refunds on subscriptions or credit purchases. We recommend trying the Free plan first — it exists precisely so you can judge the output before paying. If you're unsure which plan you need Ask us before you buy. We'd rather spend five minutes helping you pick than have you buy the wrong thing. If something actually went wrong The policy is about buyer's remorse, not about our mistakes. If you were double-charged, charged after cancelling, or billed for work that failed and produced nothing, that is a billing error — write to hello@uxmagic.ai with the invoice and we'll sort it out. Before you dispute Come to us first. A bank dispute can suspend your account while it's reviewed, and it takes far longer than an email would have. See Billing, invoices and payment methods."},{"slug":"cancel-your-subscription","category":"account-and-billing","categoryTitle":"Plans, credits & billing","title":"Cancel your subscription","description":"How to cancel, when access ends, and what happens to your work.","url":"https://uxmagic.ai/help/account-and-billing/cancel-your-subscription","type":"howto","keywords":["cancel","unsubscribe","end subscription","stop billing","downgrade to free"],"headings":["Cancelling","What happens","Cancelling is not deleting","Changing your mind","Before you go"],"updated":"2026-08-27","faqs":[],"related":["refunds","delete-your-account","upgrade-or-downgrade"],"markdown":"## Cancelling\n\n**Manage account → Billing → Cancel subscription.** You'll be asked a couple of questions about why — genuinely useful to us, and skippable.\n\n## What happens\n\n- Your plan stays **active until the end of the current billing cycle**. You keep the allowance you've paid for.\n- After that, your account moves to the Free plan.\n- **Your projects are not deleted.** They stay in your account, subject to Free-plan limits on what you can create going forward.\n- Published sites beyond the Free limit may be taken offline. Check before you cancel if a live site matters.\n\n## Cancelling is not deleting\n\nCancelling stops billing. Your account and work remain. If you want the account and its data gone, that's [Delete your account](/help/account-and-billing/delete-your-account) — and it's permanent.\n\n## Changing your mind\n\nResubscribe any time from billing settings. If you resubscribe before the cycle ends, nothing lapses.\n\n## Before you go\n\nIf you're leaving because of a specific problem — output quality, a missing feature, cost — [tell us](/support). Some of it we can fix, and some of it we've already fixed and failed to tell you about.","text":"Cancelling Manage account → Billing → Cancel subscription. You'll be asked a couple of questions about why — genuinely useful to us, and skippable. What happens - Your plan stays active until the end of the current billing cycle. You keep the allowance you've paid for. - After that, your account moves to the Free plan. - Your projects are not deleted. They stay in your account, subject to Free-plan limits on what you can create going forward. - Published sites beyond the Free limit may be taken offline. Check before you cancel if a live site matters. Cancelling is not deleting Cancelling stops billing. Your account and work remain. If you want the account and its data gone, that's Delete your account — and it's permanent. Changing your mind Resubscribe any time from billing settings. If you resubscribe before the cycle ends, nothing lapses. Before you go If you're leaving because of a specific problem — output quality, a missing feature, cost — tell us. Some of it we can fix, and some of it we've already fixed and failed to tell you about."},{"slug":"referral-program","category":"account-and-billing","categoryTitle":"Plans, credits & billing","title":"Refer and earn","description":"Invite people to UXMagic and earn credits when they upgrade.","url":"https://uxmagic.ai/help/account-and-billing/referral-program","type":"guide","keywords":["referral","refer a friend","invite","earn credits","affiliate","reward"],"headings":["How it works","The reward","The cap","Rules","Affiliate program"],"updated":"2026-08-27","faqs":[{"question":"When do I get the credits?","answer":"When the person you referred upgrades to a paid plan for the first time — not when they sign up."},{"question":"Is there a limit?","answer":"You earn on up to five referrals. Later referrals still show in your total but no longer pay out."}],"related":["how-credits-work","plans-and-limits"],"markdown":"## How it works\n\n1. Get your referral link from **Refer and earn** in your account.\n2. Share it.\n3. When someone signs up through it and **upgrades to a paid plan for the first time**, you both get credits.\n\n## The reward\n\n**250 credits each** — framed as \"$10 worth of credits\" — to the referrer and to the person referred.\n\nFor scale: 250 credits is around 80 new screens, or a great many edits. See [How credits work](/help/account-and-billing/how-credits-work).\n\n## The cap\n\nYou earn on up to **five** referrals. Beyond that, referrals still appear in your total but stop paying out.\n\n## Rules\n\n- The reward triggers on the referee's **first paid upgrade**, not on signup.\n- Self-referrals and duplicate accounts don't qualify.\n- Credits land on both accounts automatically; there's nothing to claim.\n\n## Affiliate program\n\nIf you're referring at volume — a newsletter, a course, an agency's client base — the [affiliate program](/affiliate) pays commission rather than credits, and is the better fit.","text":"How it works 1. Get your referral link from Refer and earn in your account. 2. Share it. 3. When someone signs up through it and upgrades to a paid plan for the first time, you both get credits. The reward 250 credits each — framed as \"$10 worth of credits\" — to the referrer and to the person referred. For scale: 250 credits is around 80 new screens, or a great many edits. See How credits work. The cap You earn on up to five referrals. Beyond that, referrals still appear in your total but stop paying out. Rules - The reward triggers on the referee's first paid upgrade, not on signup. - Self-referrals and duplicate accounts don't qualify. - Credits land on both accounts automatically; there's nothing to claim. Affiliate program If you're referring at volume — a newsletter, a course, an agency's client base — the affiliate program pays commission rather than credits, and is the better fit."},{"slug":"delete-your-account","category":"account-and-billing","categoryTitle":"Plans, credits & billing","title":"Delete your account","description":"Permanently delete your UXMagic account and everything in it.","url":"https://uxmagic.ai/help/account-and-billing/delete-your-account","type":"howto","keywords":["delete account","remove account","gdpr","erase","close account","privacy"],"headings":["Before you delete","Export first","Deleting","Active subscription","Published sites","Teams"],"updated":"2026-08-27","faqs":[],"related":["cancel-your-subscription","account-and-profile"],"markdown":"## Before you delete\n\nDeletion is **permanent**. It removes your projects, screens, themes, assets and history. There is no undo and no recovery.\n\nIf you only want to stop paying, [cancel your subscription](/help/account-and-billing/cancel-your-subscription) instead — your work stays.\n\n## Export first\n\nOnce it's gone, it's gone. Take what you need:\n\n- [Export to Figma](/help/export-and-handoff/export-to-figma)\n- [Export code](/help/export-and-handoff/export-code)\n- [Export as PDF or image](/help/export-and-handoff/export-pdf-and-images)\n\n## Deleting\n\n1. **Manage account → Delete account.**\n2. Confirm — there's a two-step confirmation, deliberately.\n3. Optionally tell us why. It's read by people, and it's the most useful feedback we get.\n\n## Active subscription\n\nCancel your subscription first so billing stops cleanly. Deleting an account does not by itself resolve an open billing question — sort that out first if you have one.\n\n## Published sites\n\nDeleting your account takes your published sites offline and releases their subdomains. If a live site matters, move it before you delete.\n\n## Teams\n\nIf you own a team, transfer ownership before deleting, or the team's projects go with you.","text":"Before you delete Deletion is permanent. It removes your projects, screens, themes, assets and history. There is no undo and no recovery. If you only want to stop paying, cancel your subscription instead — your work stays. Export first Once it's gone, it's gone. Take what you need: - Export to Figma - Export code - Export as PDF or image Deleting 1. Manage account → Delete account. 2. Confirm — there's a two-step confirmation, deliberately. 3. Optionally tell us why. It's read by people, and it's the most useful feedback we get. Active subscription Cancel your subscription first so billing stops cleanly. Deleting an account does not by itself resolve an open billing question — sort that out first if you have one. Published sites Deleting your account takes your published sites offline and releases their subdomains. If a live site matters, move it before you delete. Teams If you own a team, transfer ownership before deleting, or the team's projects go with you."},{"slug":"i-ran-out-of-credits","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"I ran out of credits","description":"What happens when a balance runs out mid-run, and how to get going again.","url":"https://uxmagic.ai/help/troubleshooting/i-ran-out-of-credits","type":"troubleshooting","keywords":["out of credits","no credits","insufficient","balance","blocked","402"],"headings":["What you'll see","If it happened mid-run","Getting more credits","Making the next batch last","Team pools","Charged for something that failed?"],"updated":"2026-08-27","faqs":[],"related":["how-credits-work","plans-and-limits","upgrade-or-downgrade"],"markdown":"## What you'll see\n\nA clear message that you're out of credits, either when you try to start a session or partway through a run. Sessions need at least **4 credits** to start.\n\n## If it happened mid-run\n\nScreens already designed are **kept**. You haven't lost the work that completed — you just don't have the rest of the flow yet.\n\nTop up or upgrade, then ask for the remaining screens. They'll be designed into the same theme, so the flow stays consistent.\n\n## Getting more credits\n\n- **[Upgrade](/help/account-and-billing/upgrade-or-downgrade)** — a paid plan refreshes credits every billing cycle.\n- **[Refer someone](/help/account-and-billing/referral-program)** — 250 credits when they upgrade.\n- **Wait for the cycle** — monthly credits reset on your billing date. They don't roll over, so there's nothing to save.\n\n## Making the next batch last\n\nThe big win is not regenerating. A targeted edit costs 0.2 credits; regenerating a screen costs 6. See [How credits work](/help/account-and-billing/how-credits-work) for the full table and the specific habits that save the most.\n\n## Team pools\n\nIn a team project, the charge goes to the **team's** pool or your allocation from it. \"Out of credits\" there may mean your personal allocation is exhausted while the team pool isn't — ask your team owner to raise it. See [Teams and seats](/help/collaborate/teams-and-seats).\n\n## Charged for something that failed?\n\nWork that produced nothing shouldn't be billed. If it was, [contact support](/help/troubleshooting/contact-support) with the project link and roughly when it happened.","text":"What you'll see A clear message that you're out of credits, either when you try to start a session or partway through a run. Sessions need at least 4 credits to start. If it happened mid-run Screens already designed are kept. You haven't lost the work that completed — you just don't have the rest of the flow yet. Top up or upgrade, then ask for the remaining screens. They'll be designed into the same theme, so the flow stays consistent. Getting more credits - Upgrade — a paid plan refreshes credits every billing cycle. - Refer someone — 250 credits when they upgrade. - Wait for the cycle — monthly credits reset on your billing date. They don't roll over, so there's nothing to save. Making the next batch last The big win is not regenerating. A targeted edit costs 0.2 credits; regenerating a screen costs 6. See How credits work for the full table and the specific habits that save the most. Team pools In a team project, the charge goes to the team's pool or your allocation from it. \"Out of credits\" there may mean your personal allocation is exhausted while the team pool isn't — ask your team owner to raise it. See Teams and seats. Charged for something that failed? Work that produced nothing shouldn't be billed. If it was, contact support with the project link and roughly when it happened."},{"slug":"blank-or-empty-screens","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"A screen is blank or empty","description":"Empty frames after a plan, blank canvas on open, and screens that render nothing.","url":"https://uxmagic.ai/help/troubleshooting/blank-or-empty-screens","type":"troubleshooting","keywords":["blank","empty","nothing","white screen","not rendering","missing screen"],"headings":["1. The frame was planned but never designed","2. The canvas is blank but the screens exist","3. The screen has content but renders nothing","Still blank"],"updated":"2026-08-27","faqs":[],"related":["flow-mode-and-screen-plans","style-guide-did-not-apply","contact-support"],"markdown":"Blank screens have three distinct causes. Work through them in order.\n\n## 1. The frame was planned but never designed\n\nThe most common one. A screen plan creates named, **empty** frames on the canvas, and then designs them one at a time. If the run stopped early — out of credits, an error, a cancelled turn — you're left with correctly-named frames that contain nothing.\n\n**Fix:** ask for the empty screens to be designed:\n\n> Design the Pricing and Settings screens — they're still empty.\n\nCheck your credit balance first, so the same thing doesn't happen again.\n\n## 2. The canvas is blank but the screens exist\n\nIf the project opens with nothing visible but you know screens are there:\n\n1. **Fit to screen** (Shift+1). Screens may be outside the viewport.\n2. **Reload the page.**\n3. **Try a wider browser window.** A very narrow window can collapse the canvas area to almost nothing.\n4. **Try another browser** to rule out an extension.\n\n## 3. The screen has content but renders nothing\n\nUsually a styling problem, not a content one — see [My style guide didn't apply](/help/troubleshooting/style-guide-did-not-apply). If the screen contains a chart or an animation, see [Charts or animations aren't rendering](/help/troubleshooting/charts-or-animations-not-rendering).\n\n## Still blank\n\n[Contact support](/help/troubleshooting/contact-support) with the project link and the screen name. Please don't delete the blank screen first — it's the evidence.","text":"Blank screens have three distinct causes. Work through them in order. 1. The frame was planned but never designed The most common one. A screen plan creates named, empty frames on the canvas, and then designs them one at a time. If the run stopped early — out of credits, an error, a cancelled turn — you're left with correctly-named frames that contain nothing. Fix: ask for the empty screens to be designed: Design the Pricing and Settings screens — they're still empty. Check your credit balance first, so the same thing doesn't happen again. 2. The canvas is blank but the screens exist If the project opens with nothing visible but you know screens are there: 1. Fit to screen (Shift+1). Screens may be outside the viewport. 2. Reload the page. 3. Try a wider browser window. A very narrow window can collapse the canvas area to almost nothing. 4. Try another browser to rule out an extension. 3. The screen has content but renders nothing Usually a styling problem, not a content one — see My style guide didn't apply. If the screen contains a chart or an animation, see Charts or animations aren't rendering. Still blank Contact support with the project link and the screen name. Please don't delete the blank screen first — it's the evidence."},{"slug":"style-guide-did-not-apply","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"My style guide or theme didn't apply","description":"Screens render unstyled or ignore a theme change — what to check and what to send us.","url":"https://uxmagic.ai/help/troubleshooting/style-guide-did-not-apply","type":"troubleshooting","keywords":["unstyled","theme not applied","no styles","style guide","colors missing","plain"],"headings":["Check the canvas, not the reply","Fixes, in order","Fonts specifically","Don't fix it screen by screen","Reporting it"],"updated":"2026-08-27","faqs":[],"related":["themes-and-style-guides","fonts-and-typography","blank-or-empty-screens"],"markdown":"Symptoms: a screen renders as plain unstyled content, or a theme change visibly lands on some screens but not others.\n\n## Check the canvas, not the reply\n\nImportant habit: the chat may report a theme change as done while the canvas hasn't moved. **Trust the canvas.** If the screens didn't change, the change didn't land, regardless of what the message said.\n\n## Fixes, in order\n\n1. **Reload the project.** A stale render is the cheapest possible explanation.\n2. **Re-apply the theme change in chat** — and watch the screens.\n3. **Re-apply at project scope.** If you asked for a change while focused on one screen, ask again explicitly: *\"Apply this theme to every screen in the project.\"*\n4. **Check the screen's origin.** Screens created as responsive variants, or through some import paths, have historically been the ones most likely to miss the project theme. If one specific screen is the odd one out, that's the likely cause — ask for the theme to be applied to that screen by name.\n\n## Fonts specifically\n\nA font can be set in the theme while the stylesheet that loads it isn't refreshed, so the design claims a font it isn't rendering. See [Fonts and typography](/help/design-and-edit/fonts-and-typography).\n\n## Don't fix it screen by screen\n\nHand-recolouring each screen makes the symptom go away and guarantees drift later. Get the theme applied properly instead.\n\n## Reporting it\n\n[Contact support](/help/troubleshooting/contact-support) with the project link, the screen name, and what you asked for. This one is fixable on our side, and specific reports are what make that possible.","text":"Symptoms: a screen renders as plain unstyled content, or a theme change visibly lands on some screens but not others. Check the canvas, not the reply Important habit: the chat may report a theme change as done while the canvas hasn't moved. Trust the canvas. If the screens didn't change, the change didn't land, regardless of what the message said. Fixes, in order 1. Reload the project. A stale render is the cheapest possible explanation. 2. Re-apply the theme change in chat — and watch the screens. 3. Re-apply at project scope. If you asked for a change while focused on one screen, ask again explicitly: \"Apply this theme to every screen in the project.\" 4. Check the screen's origin. Screens created as responsive variants, or through some import paths, have historically been the ones most likely to miss the project theme. If one specific screen is the odd one out, that's the likely cause — ask for the theme to be applied to that screen by name. Fonts specifically A font can be set in the theme while the stylesheet that loads it isn't refreshed, so the design claims a font it isn't rendering. See Fonts and typography. Don't fix it screen by screen Hand-recolouring each screen makes the symptom go away and guarantees drift later. Get the theme applied properly instead. Reporting it Contact support with the project link, the screen name, and what you asked for. This one is fixable on our side, and specific reports are what make that possible."},{"slug":"images-are-broken-or-missing","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"Images are broken, missing or stuck loading","description":"Placeholder boxes, permanently loading images and images that vanish after export.","url":"https://uxmagic.ai/help/troubleshooting/images-are-broken-or-missing","type":"troubleshooting","keywords":["broken image","image not loading","placeholder","missing image","spinner","stuck"],"headings":["An image sits on a loading placeholder forever","A broken-image icon","An uploaded image won't read","Images disappear after exporting code","Images look wrong after a theme change","The same wrong logo everywhere"],"updated":"2026-08-27","faqs":[],"related":["images-in-your-designs","export-code","contact-support"],"markdown":"## An image sits on a loading placeholder forever\n\nSometimes an image finishes generating but the card keeps showing a placeholder. The image itself is usually fine.\n\n**Fix:** reload the project. If the image appears, it was a display problem, not a generation one. If it's still a placeholder after a reload, ask for it to be regenerated.\n\n## A broken-image icon\n\nThe image reference exists but the file doesn't resolve. Ask for it to be regenerated:\n\n> The hero image on the landing page is broken — regenerate it.\n\n## An uploaded image won't read\n\nIf you gave the AI an image URL and it says it can't read it, the URL must be **publicly accessible**. Links behind a login, in a private bucket, or expired share links can't be fetched. Upload the file directly instead of pasting a link.\n\n## Images disappear after exporting code\n\nExpected, and important to plan for: exported code references images by URL from your project's asset storage. Download the assets into your repo before you ship — otherwise your production site depends on URLs you don't control. See [Export code](/help/export-and-handoff/export-code).\n\n## Images look wrong after a theme change\n\nGenerated imagery doesn't automatically follow a new palette. Ask for it to be recoloured in place rather than regenerated — that keeps everything else about the image identical. See [Images in your designs](/help/design-and-edit/images-in-your-designs).\n\n## The same wrong logo everywhere\n\nUse the replace-everywhere path rather than editing screens one at a time:\n\n> Replace the logo on every screen with the one I just uploaded.","text":"An image sits on a loading placeholder forever Sometimes an image finishes generating but the card keeps showing a placeholder. The image itself is usually fine. Fix: reload the project. If the image appears, it was a display problem, not a generation one. If it's still a placeholder after a reload, ask for it to be regenerated. A broken-image icon The image reference exists but the file doesn't resolve. Ask for it to be regenerated: The hero image on the landing page is broken — regenerate it. An uploaded image won't read If you gave the AI an image URL and it says it can't read it, the URL must be publicly accessible. Links behind a login, in a private bucket, or expired share links can't be fetched. Upload the file directly instead of pasting a link. Images disappear after exporting code Expected, and important to plan for: exported code references images by URL from your project's asset storage. Download the assets into your repo before you ship — otherwise your production site depends on URLs you don't control. See Export code. Images look wrong after a theme change Generated imagery doesn't automatically follow a new palette. Ask for it to be recoloured in place rather than regenerated — that keeps everything else about the image identical. See Images in your designs. The same wrong logo everywhere Use the replace-everywhere path rather than editing screens one at a time: Replace the logo on every screen with the one I just uploaded."},{"slug":"clone-came-out-blank-or-partial","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"My clone came out blank or partial","description":"Why a website clone can come back incomplete, and how to finish it.","url":"https://uxmagic.ai/help/troubleshooting/clone-came-out-blank-or-partial","type":"troubleshooting","keywords":["clone failed","partial clone","blank clone","website clone","missing sections"],"headings":["Placeholders where sections should be","Nothing came back at all","The clone is missing the parts I cared about","Text runs together or looks wrong"],"updated":"2026-08-27","faqs":[],"related":["clone-a-website","blank-or-empty-screens","how-credits-work"],"markdown":"## Placeholders where sections should be\n\nThis is by design. When a page is too long or too complex to rebuild in one pass, the sections that couldn't be rebuilt are left on the canvas as **labelled placeholders** — an honest gap rather than a silently shortened page.\n\n**Fix:** ask the AI to finish the clone.\n\n> Complete the clone — the placeholder sections are still empty.\n\nIt re-captures the original page and rebuilds only the missing sections. That costs a fraction of a fresh clone (2 credits versus 10), so don't re-run the whole clone.\n\n## Nothing came back at all\n\nUsually the page couldn't be captured:\n\n- **It needs a login.** Not clonable. Screenshot the page instead and use [Screenshot to UI](/help/generate/screenshot-to-ui).\n- **Bot protection.** Cloudflare challenges and similar block automated capture.\n- **The URL was wrong.** Include the protocol, and check it loads in a private browser window.\n- **The content is behind interaction.** Menus, modals and later carousel slides don't exist until someone clicks.\n\n## The clone is missing the parts I cared about\n\nLong pages lose their tail first. If what you need is far down the page, clone it and then ask specifically:\n\n> Rebuild the FAQ and footer sections from that page.\n\n## Text runs together or looks wrong\n\nReport it. Clone output quality is something we actively work on and specific examples are what drive it — [contact support](/help/troubleshooting/contact-support) with the source URL and the project link.","text":"Placeholders where sections should be This is by design. When a page is too long or too complex to rebuild in one pass, the sections that couldn't be rebuilt are left on the canvas as labelled placeholders — an honest gap rather than a silently shortened page. Fix: ask the AI to finish the clone. Complete the clone — the placeholder sections are still empty. It re-captures the original page and rebuilds only the missing sections. That costs a fraction of a fresh clone (2 credits versus 10), so don't re-run the whole clone. Nothing came back at all Usually the page couldn't be captured: - It needs a login. Not clonable. Screenshot the page instead and use Screenshot to UI. - Bot protection. Cloudflare challenges and similar block automated capture. - The URL was wrong. Include the protocol, and check it loads in a private browser window. - The content is behind interaction. Menus, modals and later carousel slides don't exist until someone clicks. The clone is missing the parts I cared about Long pages lose their tail first. If what you need is far down the page, clone it and then ask specifically: Rebuild the FAQ and footer sections from that page. Text runs together or looks wrong Report it. Clone output quality is something we actively work on and specific examples are what drive it — contact support with the source URL and the project link."},{"slug":"figma-export-failed","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"My Figma export failed","description":"Export errors, empty Figma files and exports that use up an allowance.","url":"https://uxmagic.ai/help/troubleshooting/figma-export-failed","type":"troubleshooting","keywords":["figma export failed","export error","figma empty","export not working"],"headings":["Check your export allowance","The export ran but Figma is empty","The export errored","Reconnecting","A failed export shouldn't cost an export","The file is fine but the layout is off"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","figma-plugin","plans-and-limits"],"markdown":"## Check your export allowance\n\nFigma exports are metered per plan. If you've used your allowance, exports stop until the next cycle or an upgrade. Your remaining exports are shown in your account. See [Plans and limits](/help/account-and-billing/plans-and-limits).\n\n## The export ran but Figma is empty\n\n- Check you're in the **right Figma file and page** — frames land where the export targeted, which may not be where you're looking.\n- Try **zoom to fit** in Figma; frames can be off-viewport.\n- If you exported through the plugin, make sure the plugin is signed into the **same UXMagic account**.\n\n## The export errored\n\n1. **Try one screen** rather than the whole project. That isolates a single problematic screen.\n2. **Reconnect Figma** from Integrations — OAuth tokens do expire.\n3. **Check Figma's own status** if everything is failing at once.\n\n## Reconnecting\n\n**Integrations → Figma → disconnect, then connect again.** This resolves most authorisation failures.\n\n## A failed export shouldn't cost an export\n\nIf a failed attempt consumed part of your allowance, [contact support](/help/troubleshooting/contact-support) with the timestamp and we'll restore it.\n\n## The file is fine but the layout is off\n\nStructure translates faithfully, but Figma and the web lay text out differently, so expect small differences in wrapping and in effects with no direct equivalent. If a whole section is wrong rather than slightly different, that's worth reporting.","text":"Check your export allowance Figma exports are metered per plan. If you've used your allowance, exports stop until the next cycle or an upgrade. Your remaining exports are shown in your account. See Plans and limits. The export ran but Figma is empty - Check you're in the right Figma file and page — frames land where the export targeted, which may not be where you're looking. - Try zoom to fit in Figma; frames can be off-viewport. - If you exported through the plugin, make sure the plugin is signed into the same UXMagic account. The export errored 1. Try one screen rather than the whole project. That isolates a single problematic screen. 2. Reconnect Figma from Integrations — OAuth tokens do expire. 3. Check Figma's own status if everything is failing at once. Reconnecting Integrations → Figma → disconnect, then connect again. This resolves most authorisation failures. A failed export shouldn't cost an export If a failed attempt consumed part of your allowance, contact support with the timestamp and we'll restore it. The file is fine but the layout is off Structure translates faithfully, but Figma and the web lay text out differently, so expect small differences in wrapping and in effects with no direct equivalent. If a whole section is wrong rather than slightly different, that's worth reporting."},{"slug":"my-changes-reverted","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"My changes reverted or disappeared","description":"A version switch that snaps back, or edits that seem not to save.","url":"https://uxmagic.ai/help/troubleshooting/my-changes-reverted","type":"troubleshooting","keywords":["reverted","lost changes","not saving","undo itself","disappeared","rollback"],"headings":["A selected version snaps back when you click away","Edit-mode changes don't stick","An AI edit went the wrong way","⌘Z does nothing","A whole screen is gone"],"updated":"2026-08-27","faqs":[],"related":["versions-and-history","editing-a-screen","contact-support"],"markdown":"## A selected version snaps back when you click away\n\nIf you pick an earlier version and the screen reverts as soon as you click elsewhere, the selection wasn't persisted. Try:\n\n1. Select the version and **wait for the canvas to settle** before clicking away.\n2. **Reload** and check which version is active.\n3. If it still reverts, [contact support](/help/troubleshooting/contact-support) with the project link and the screen name — this is a bug, not a setting.\n\n## Edit-mode changes don't stick\n\nClick outside the element you edited to commit the change, then reload to confirm it saved. If text you typed is gone after a reload, tell us — with the screen name and what you typed.\n\n## An AI edit went the wrong way\n\nNothing is destroyed. Every AI change makes a **new version** and the previous one is still there — step back to it. See [Versions and history](/help/design-and-edit/versions-and-history).\n\n## ⌘Z does nothing\n\nClick on empty canvas first. While the cursor is in the prompt box, undo belongs to the text field. Also note that undo covers canvas actions, not AI generations — use versions for those.\n\n## A whole screen is gone\n\nCheck the project's **trash** and the version history. If a screen genuinely vanished, contact support quickly and don't keep working in that project — it's easier to recover before more changes land on top.","text":"A selected version snaps back when you click away If you pick an earlier version and the screen reverts as soon as you click elsewhere, the selection wasn't persisted. Try: 1. Select the version and wait for the canvas to settle before clicking away. 2. Reload and check which version is active. 3. If it still reverts, contact support with the project link and the screen name — this is a bug, not a setting. Edit-mode changes don't stick Click outside the element you edited to commit the change, then reload to confirm it saved. If text you typed is gone after a reload, tell us — with the screen name and what you typed. An AI edit went the wrong way Nothing is destroyed. Every AI change makes a new version and the previous one is still there — step back to it. See Versions and history. ⌘Z does nothing Click on empty canvas first. While the cursor is in the prompt box, undo belongs to the text field. Also note that undo covers canvas actions, not AI generations — use versions for those. A whole screen is gone Check the project's trash and the version history. If a screen genuinely vanished, contact support quickly and don't keep working in that project — it's easier to recover before more changes land on top."},{"slug":"the-ai-is-not-following-my-brief","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"The AI isn't following my brief","description":"When output ignores your brand, changes things you didn’t ask about, or claims success it didn’t achieve.","url":"https://uxmagic.ai/help/troubleshooting/the-ai-is-not-following-my-brief","type":"troubleshooting","keywords":["not following","ignoring instructions","wrong colors","brand","override","wrong output"],"headings":["Be absolute about non-negotiables","Watch for palette override","Verify, don't trust the summary","Scope your instruction","Fewer changes per message","Reference images don't override an existing theme","When it keeps happening"],"updated":"2026-08-27","faqs":[],"related":["writing-a-good-prompt","chat-editing","themes-and-style-guides"],"markdown":"This is the most frustrating failure mode, and mostly it's fixable from your side. Here's what actually works.\n\n## Be absolute about non-negotiables\n\nSoft phrasing gets treated as a preference. If something is fixed, say so in those terms:\n\n> Use exactly #0F3D2E and #F5F1E8. Do not introduce any other colours.\n> Keep the existing copy exactly as written. Change layout only.\n\n## Watch for palette override\n\nA common pattern: you specify brand colours, and a theme operation replaces them with a palette the model considers more harmonious. If your colours vanish, say so directly:\n\n> You replaced my brand colours. Set the primary back to #0F3D2E and don't change it again.\n\n## Verify, don't trust the summary\n\nThe chat sometimes reports a change as done when the canvas disagrees. **Look at the screens.** If they didn't move, the change didn't land — say so and ask again. See [My style guide didn't apply](/help/troubleshooting/style-guide-did-not-apply).\n\n## Scope your instruction\n\n\"Make it dark\" while focused on one element can hard-code colours into that element instead of re-theming the project. For anything global, ask at project level in chat, not inside edit mode.\n\n## Fewer changes per message\n\nTwo or three at a time. Long lists interact, and when something goes wrong you can't tell which instruction caused it.\n\n## Reference images don't override an existing theme\n\nAttaching a reference image to a project that already has a theme will not repaint the project in the reference's colours. Ask for it in words: *\"Use the palette from this image instead of the current theme.\"*\n\n## When it keeps happening\n\nTell us, with the project link and what you asked for. Repeated cases of the model ignoring an explicit brief are treated as bugs — they're the single most damaging thing the product can do — and specific examples are what let us fix them. [Contact support](/help/troubleshooting/contact-support).","text":"This is the most frustrating failure mode, and mostly it's fixable from your side. Here's what actually works. Be absolute about non-negotiables Soft phrasing gets treated as a preference. If something is fixed, say so in those terms: Use exactly #0F3D2E and #F5F1E8. Do not introduce any other colours. Keep the existing copy exactly as written. Change layout only. Watch for palette override A common pattern: you specify brand colours, and a theme operation replaces them with a palette the model considers more harmonious. If your colours vanish, say so directly: You replaced my brand colours. Set the primary back to #0F3D2E and don't change it again. Verify, don't trust the summary The chat sometimes reports a change as done when the canvas disagrees. Look at the screens. If they didn't move, the change didn't land — say so and ask again. See My style guide didn't apply. Scope your instruction \"Make it dark\" while focused on one element can hard-code colours into that element instead of re-theming the project. For anything global, ask at project level in chat, not inside edit mode. Fewer changes per message Two or three at a time. Long lists interact, and when something goes wrong you can't tell which instruction caused it. Reference images don't override an existing theme Attaching a reference image to a project that already has a theme will not repaint the project in the reference's colours. Ask for it in words: \"Use the palette from this image instead of the current theme.\" When it keeps happening Tell us, with the project link and what you asked for. Repeated cases of the model ignoring an explicit brief are treated as bugs — they're the single most damaging thing the product can do — and specific examples are what let us fix them. Contact support."},{"slug":"generation-is-slow-or-stuck","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"Generation is slow or stuck","description":"What is normal, what is not, and what to do about a run that has stalled.","url":"https://uxmagic.ai/help/troubleshooting/generation-is-slow-or-stuck","type":"troubleshooting","keywords":["slow","stuck","hanging","timeout","loading forever","frozen","not responding"],"headings":["What's normal","What's not normal","What to do","Making runs faster"],"updated":"2026-08-27","faqs":[],"related":["flow-mode-and-screen-plans","clone-a-website","contact-support"],"markdown":"## What's normal\n\n- **A single screen** — usually under a minute.\n- **A multi-screen flow** — screens are designed one at a time, so a five-screen flow takes roughly five times a single screen.\n- **A website clone** — noticeably longer, because a real browser loads the target page before any design work begins.\n- **A whole-project code export** — runs as a background job; larger projects take longer.\n\nIf screens are appearing on the canvas one after another, it's working. Let it run.\n\n## What's not normal\n\n- No progress at all for several minutes.\n- The chat stops mid-turn with no message and no error.\n- A background job that never reports completion.\n\n## What to do\n\n1. **Reload the page.** The run continues server-side; you're just reconnecting to it.\n2. **Check the canvas.** Screens completed before the stall are there.\n3. **Ask for what's missing**, rather than restarting the whole request — that avoids paying twice for work already done.\n4. If it's reproducible, [contact support](/help/troubleshooting/contact-support) with the project link and the time.\n\n## Making runs faster\n\n- **Smaller batches.** Three screens then three more beats ten in one go, and you can course-correct in between.\n- **Targeted edits over regeneration** — faster as well as cheaper.\n- **Settle the theme first**, so you're not rebuilding screens to fix colour.","text":"What's normal - A single screen — usually under a minute. - A multi-screen flow — screens are designed one at a time, so a five-screen flow takes roughly five times a single screen. - A website clone — noticeably longer, because a real browser loads the target page before any design work begins. - A whole-project code export — runs as a background job; larger projects take longer. If screens are appearing on the canvas one after another, it's working. Let it run. What's not normal - No progress at all for several minutes. - The chat stops mid-turn with no message and no error. - A background job that never reports completion. What to do 1. Reload the page. The run continues server-side; you're just reconnecting to it. 2. Check the canvas. Screens completed before the stall are there. 3. Ask for what's missing, rather than restarting the whole request — that avoids paying twice for work already done. 4. If it's reproducible, contact support with the project link and the time. Making runs faster - Smaller batches. Three screens then three more beats ten in one go, and you can course-correct in between. - Targeted edits over regeneration — faster as well as cheaper. - Settle the theme first, so you're not rebuilding screens to fix colour."},{"slug":"charts-or-animations-not-rendering","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"Charts or animations aren't rendering","description":"Why a chart shows an empty box, and what to do about interactive elements.","url":"https://uxmagic.ai/help/troubleshooting/charts-or-animations-not-rendering","type":"troubleshooting","keywords":["chart","graph","animation","canvas element","blank chart","interactive","script"],"headings":["Empty box where a chart should be","Animations don't play","After exporting","Reporting it"],"updated":"2026-08-27","faqs":[],"related":["blank-or-empty-screens","export-code","contact-support"],"markdown":"## Empty box where a chart should be\n\nCharts are drawn by a script into a canvas element. If the screen is re-rendered without re-running that script — after a reload, a version switch, or a save — the element survives but the drawing doesn't, and you get an empty box.\n\n**What to try**\n\n1. **Reload the project.** Often enough.\n2. **Ask for the chart to be rebuilt** on that screen.\n3. **Ask for a static chart instead** if it just needs to look right in a design: *\"Replace the chart with a static SVG version.\"* Static charts survive every save and export, which for a design deliverable is usually what you want.\n\n## Animations don't play\n\nSame root cause. Designs are stored as markup, and behaviour that depends on scripts running at the right moment doesn't always survive a round trip. For anything motion-heavy, design the static frames here and implement the motion after export.\n\n## After exporting\n\nExported code contains what was on the screen. If a chart was blank on the canvas, it's blank in the export. Fix it before exporting, or wire the real chart library up in your own codebase — which you'll want to do anyway once it's showing real data.\n\n## Reporting it\n\nIf a chart is reliably blank on a specific screen, [contact support](/help/troubleshooting/contact-support) with the project link and screen name.","text":"Empty box where a chart should be Charts are drawn by a script into a canvas element. If the screen is re-rendered without re-running that script — after a reload, a version switch, or a save — the element survives but the drawing doesn't, and you get an empty box. What to try 1. Reload the project. Often enough. 2. Ask for the chart to be rebuilt on that screen. 3. Ask for a static chart instead if it just needs to look right in a design: \"Replace the chart with a static SVG version.\" Static charts survive every save and export, which for a design deliverable is usually what you want. Animations don't play Same root cause. Designs are stored as markup, and behaviour that depends on scripts running at the right moment doesn't always survive a round trip. For anything motion-heavy, design the static frames here and implement the motion after export. After exporting Exported code contains what was on the screen. If a chart was blank on the canvas, it's blank in the export. Fix it before exporting, or wire the real chart library up in your own codebase — which you'll want to do anyway once it's showing real data. Reporting it If a chart is reliably blank on a specific screen, contact support with the project link and screen name."},{"slug":"contact-support","category":"troubleshooting","categoryTitle":"Troubleshooting","title":"Contact support","description":"How to reach us, and what to include so we can fix it on the first reply.","url":"https://uxmagic.ai/help/troubleshooting/contact-support","type":"guide","keywords":["support","help","contact","email","chat","bug report","talk to human"],"headings":["How to reach us","What to include","Please don't delete the evidence","Billing","Feature requests"],"updated":"2026-08-27","faqs":[],"related":["i-ran-out-of-credits","the-ai-is-not-following-my-brief","refunds"],"markdown":"## How to reach us\n\n- **In-app chat** — the fastest route. Open the messenger from the dashboard or from the [support page](/support).\n- **Email** — **hello@uxmagic.ai**.\n- **Enterprise** — priority support with a guaranteed response time is part of the plan.\n\n## What to include\n\nThe difference between a fix in one reply and a week of back-and-forth:\n\n1. **The project link.** Copy it from the address bar.\n2. **The screen name**, if it's about one screen.\n3. **What you asked for** — paste the prompt.\n4. **What happened instead**, and what you expected.\n5. **Roughly when.** Time and timezone.\n6. **A screenshot**, if it's visual.\n\n## Please don't delete the evidence\n\nIf a screen is blank, broken or wrong, leave it in place until we've looked. Deleting it removes the only record of what went wrong.\n\n## Billing\n\nFor anything billing-related, write to **hello@uxmagic.ai** before disputing with your bank — a dispute can suspend your account while it's reviewed. See [Billing, invoices and payment methods](/help/account-and-billing/billing-and-invoices).\n\n## Feature requests\n\nGenuinely welcome. Tell us the problem you're trying to solve rather than the feature you've designed — we can often solve it a way you hadn't considered, or tell you it already exists.","text":"How to reach us - In-app chat — the fastest route. Open the messenger from the dashboard or from the support page. - Email — hello@uxmagic.ai. - Enterprise — priority support with a guaranteed response time is part of the plan. What to include The difference between a fix in one reply and a week of back-and-forth: 1. The project link. Copy it from the address bar. 2. The screen name, if it's about one screen. 3. What you asked for — paste the prompt. 4. What happened instead, and what you expected. 5. Roughly when. Time and timezone. 6. A screenshot, if it's visual. Please don't delete the evidence If a screen is blank, broken or wrong, leave it in place until we've looked. Deleting it removes the only record of what went wrong. Billing For anything billing-related, write to hello@uxmagic.ai before disputing with your bank — a dispute can suspend your account while it's reviewed. See Billing, invoices and payment methods. Feature requests Genuinely welcome. Tell us the problem you're trying to solve rather than the feature you've designed — we can often solve it a way you hadn't considered, or tell you it already exists."}]}