{"name":"Central de Ajuda da UXMagic","description":"Documentação oficial do produto UXMagic — uma ferramenta de design de UI/UX com IA que transforma prompts, capturas de tela, rascunhos, URLs de sites e arquivos do Figma em designs de interface editáveis e de alta fidelidade, e em código pronto para produção.","url":"https://uxmagic.ai/pt/help","locale":"pt","sourceUrl":"https://uxmagic.ai/help.json","generatedAt":"2026-09-09T07:40:25.192Z","version":1,"categories":[{"id":"getting-started","title":"Primeiros passos","description":"Tudo o que você precisa para sair de um canvas em branco e chegar à sua primeira tela projetada — e o punhado de conceitos que fazem o resto da UXMagic fazer sentido.","url":"https://uxmagic.ai/pt/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":"Gerar designs","description":"Seis formas de colocar uma tela no canvas: um prompt, uma captura de tela, um rascunho, uma URL, um arquivo do Figma ou um documento.","url":"https://uxmagic.ai/pt/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":"Projetar e editar","description":"Refine o que a IA produziu: edições direcionadas, temas, tipografia, imagens, versões e variantes responsivas.","url":"https://uxmagic.ai/pt/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":"Exportar e entregar","description":"Tire seus designs daqui: Figma, HTML/React/Tailwind, GitHub, Framer, Webflow, WordPress e PDF.","url":"https://uxmagic.ai/pt/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":"Publicar um site no ar","description":"Transforme um projeto em um site de verdade em um subdomínio uxmagic.io ou no seu próprio domínio — com pré-visualizações, reversões e despublicação.","url":"https://uxmagic.ai/pt/help/publish","articleSlugs":["publish-your-first-site","subdomains-and-urls","custom-domains","redeploy-and-rollback"]},{"id":"collaborate","title":"Compartilhar e colaborar","description":"Compartilhe projetos, convide colaboradores, toque um time com créditos compartilhados e recolha opiniões com comentários.","url":"https://uxmagic.ai/pt/help/collaborate","articleSlugs":["share-a-project","share-a-preview","teams-and-seats","comments-and-feedback","community-and-inspiration"]},{"id":"integrations","title":"Integrações e desenvolvimento","description":"Conecte a UXMagic à sua IDE, ao seu repositório, ao seu CMS e ao seu assistente de IA — servidor MCP, chaves de API, plugin do Figma e GitHub.","url":"https://uxmagic.ai/pt/help/integrations","articleSlugs":["mcp-server","api-keys","figma-plugin","github-sync","connect-uxmagic-to-ai-assistants"]},{"id":"account-and-billing","title":"Planos, créditos e faturamento","description":"O que cada ação custa, o que cada plano inclui, e como funcionam mudanças de plano, faturas, cancelamento e indicações.","url":"https://uxmagic.ai/pt/help/account-and-billing","articleSlugs":["how-credits-work","plans-and-limits","upgrade-or-downgrade","billing-and-invoices","refunds","cancel-your-subscription","earn-free-credits","referral-program","delete-your-account"]},{"id":"troubleshooting","title":"Solução de problemas","description":"Soluções para os problemas que as pessoas realmente encontram: telas em branco, estilos faltando, imagens quebradas, exportações que falham e gerações travadas.","url":"https://uxmagic.ai/pt/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":"Primeiros passos","title":"O que é a UXMagic?","description":"A UXMagic transforma um prompt, captura de tela, rascunho, URL ou arquivo do Figma em telas de interface editáveis e de alta fidelidade, exportáveis para o Figma ou para código.","url":"https://uxmagic.ai/pt/help/getting-started/what-is-uxmagic","type":"guide","keywords":["visão geral","o que a uxmagic faz","gerador de ui com ia","introdução"],"headings":["O que a diferencia de um chatbot que escreve HTML","Como é uma sessão típica","Para quem é","O que não é","Para onde ir agora"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","the-canvas","how-credits-work"],"markdown":"A UXMagic é uma ferramenta de design de UI/UX com IA. Você descreve o que quer — ou entrega uma captura de tela, um rascunho feito à mão, a URL de um site ou um arquivo do Figma existente — e ela produz **telas de interface reais e editáveis**: layout bem resolvido, um sistema coerente de cor e tipografia, e marcação que você pode exportar para o Figma ou para código de produção.\n\n## O que a diferencia de um chatbot que escreve HTML\n\nTrês coisas:\n\n1. **Ela projeta em um canvas, não em uma janela de chat.** As telas ficam lado a lado em um canvas infinito, então um fluxo de checkout são cinco telas que você vê juntas, não cinco respostas separadas.\n2. **Ela mantém um tema.** Cores, fontes, raios e espaçamentos ficam guardados como design tokens no projeto. Peça “deixe escuro” e todas as telas se movem juntas, em vez de uma sair da linha.\n3. **Ela exporta para algum lugar útil.** Figma com auto layout de verdade, ou HTML/React/Tailwind, ou um site publicado no seu próprio domínio — não uma captura de tela.\n\n## Como é uma sessão típica\n\nVocê cria um projeto, digita o que quer, e a IA propõe um conjunto de telas. Você aprova ou edita esse plano, e ela projeta uma por vez enquanto você assiste. A partir daí você itera no chat (“deixe o hero mais alto”, “use o azul da nossa marca”), ou entra em uma tela e edita textos e imagens diretamente.\n\nQuando gostar, você exporta — ou publica como um site no ar.\n\n## Para quem é\n\n- **Fundadores e gerentes de produto** que precisam de uma interface convincente para mostrar a usuários, investidores ou engenharia antes de contratar alguém de design.\n- **Designers** que querem os primeiros 80% de uma tela gerados para dedicar seu tempo aos 20% finais.\n- **Desenvolvedores** que querem um front-end de verdade sem escrever cinco landing pages à mão.\n- **Agências** que produzem conceitos para clientes com velocidade.\n\n## O que não é\n\nNão substitui uma ferramenta de design completa para trabalho de ilustração no nível do pixel, e não é uma IDE. Ela leva você extremamente rápido a um ponto de partida estruturado e de alta fidelidade, e depois passa a bola de forma limpa para o Figma, para o seu repositório ou para a web.\n\n## Para onde ir agora\n\n- [Crie seu primeiro projeto](/help/getting-started/create-your-first-project) — a versão de cinco minutos.\n- [Como funcionam os créditos](/help/account-and-billing/how-credits-work) — o que cada ação custa, para nada te surpreender.\n- [Todas as formas de gerar uma tela](/help/generate/ways-to-generate-a-screen) — os seis pontos de partida.","text":"A UXMagic é uma ferramenta de design de UI/UX com IA. Você descreve o que quer — ou entrega uma captura de tela, um rascunho feito à mão, a URL de um site ou um arquivo do Figma existente — e ela produz telas de interface reais e editáveis: layout bem resolvido, um sistema coerente de cor e tipografia, e marcação que você pode exportar para o Figma ou para código de produção. O que a diferencia de um chatbot que escreve HTML Três coisas: 1. Ela projeta em um canvas, não em uma janela de chat. As telas ficam lado a lado em um canvas infinito, então um fluxo de checkout são cinco telas que você vê juntas, não cinco respostas separadas. 2. Ela mantém um tema. Cores, fontes, raios e espaçamentos ficam guardados como design tokens no projeto. Peça “deixe escuro” e todas as telas se movem juntas, em vez de uma sair da linha. 3. Ela exporta para algum lugar útil. Figma com auto layout de verdade, ou HTML/React/Tailwind, ou um site publicado no seu próprio domínio — não uma captura de tela. Como é uma sessão típica Você cria um projeto, digita o que quer, e a IA propõe um conjunto de telas. Você aprova ou edita esse plano, e ela projeta uma por vez enquanto você assiste. A partir daí você itera no chat (“deixe o hero mais alto”, “use o azul da nossa marca”), ou entra em uma tela e edita textos e imagens diretamente. Quando gostar, você exporta — ou publica como um site no ar. Para quem é - Fundadores e gerentes de produto que precisam de uma interface convincente para mostrar a usuários, investidores ou engenharia antes de contratar alguém de design. - Designers que querem os primeiros 80% de uma tela gerados para dedicar seu tempo aos 20% finais. - Desenvolvedores que querem um front-end de verdade sem escrever cinco landing pages à mão. - Agências que produzem conceitos para clientes com velocidade. O que não é Não substitui uma ferramenta de design completa para trabalho de ilustração no nível do pixel, e não é uma IDE. Ela leva você extremamente rápido a um ponto de partida estruturado e de alta fidelidade, e depois passa a bola de forma limpa para o Figma, para o seu repositório ou para a web. Para onde ir agora - Crie seu primeiro projeto — a versão de cinco minutos. - Como funcionam os créditos — o que cada ação custa, para nada te surpreender. - Todas as formas de gerar uma tela — os seis pontos de partida."},{"slug":"create-your-first-project","category":"getting-started","categoryTitle":"Primeiros passos","title":"Crie seu primeiro projeto","description":"Do cadastro a uma tela projetada e editável em cerca de cinco minutos.","url":"https://uxmagic.ai/pt/help/getting-started/create-your-first-project","type":"howto","keywords":["primeiro projeto","início rápido","começar","novo projeto","iniciar"],"headings":["1. Entre","2. Crie um projeto","3. Descreva o que você quer","4. Aprove o plano","5. Veja ela projetar","6. Itere","7. Tire daqui","Erros comuns da primeira sessão"],"updated":"2026-09-03","faqs":[{"question":"Preciso de cartão de crédito para começar?","answer":"Não. O plano Free dá 20 créditos por dia — o suficiente para cerca de 3 telas diárias — sem nenhum cartão cadastrado."},{"question":"Quanto tempo leva a primeira tela?","answer":"Uma tela sozinha costuma terminar em menos de um minuto. Um plano completo com várias telas leva proporcionalmente mais, porque as telas são projetadas uma por vez."}],"related":["the-canvas","writing-a-good-prompt","ways-to-generate-a-screen"],"markdown":"Isto leva você de uma conta recém-criada a uma tela que pode editar e exportar.\n\n![O painel da UXMagic, com um campo de prompt dizendo “Descreva o que você quer criar” e sugestões de ideias iniciais abaixo.](/help/dashboard-prompt.webp)\n\n## 1. Entre\n\nVá em [uxmagic.ai](https://uxmagic.ai) e cadastre-se com Google ou e-mail. Não é preciso cartão de crédito — o plano Free dá 20 créditos por dia, o suficiente para cerca de 3 telas diárias, em até 5 projetos.\n\n## 2. Crie um projeto\n\nNo painel, clique em **Novo projeto**. Um projeto é um contêiner para um conjunto de telas que compartilham um tema — um produto, um site, um fluxo. Mantenha trabalhos sem relação em projetos separados, para que seus sistemas de design não se atrapalhem.\n\n## 3. Descreva o que você quer\n\nDigite seu pedido no campo de prompt. Seja específico sobre o **produto**, as **telas** e o **público**:\n\n> Um SaaS de gestão de projetos para agências pequenas. Preciso de uma landing page de marketing, uma página de preços e um painel mostrando os projetos ativos. Limpo e moderno, azul profundo e branco, acolhedor mas profissional.\n\nSe você tem uma marca, um site de referência ou um PRD, anexe agora — veja [Todas as formas de gerar uma tela](/help/generate/ways-to-generate-a-screen).\n\n## 4. Aprove o plano\n\nEm um projeto novo, a IA costuma propor uma lista de telas antes de projetar qualquer coisa. Você pode acrescentar telas, renomeá-las, remover as que não precisa e então aprovar. Este passo é barato de propósito: sai muito melhor corrigir o plano do que refazer cinco telas prontas.\n\n## 5. Veja ela projetar\n\nAs telas são projetadas uma por vez e aparecem no canvas conforme terminam. Você pode continuar trabalhando enquanto isso.\n\n## 6. Itere\n\nDuas formas de mudar as coisas:\n\n- **Chat** — para qualquer coisa estrutural ou de tema: “adicione depoimentos abaixo do hero”, “deixe tudo escuro”, “troque o texto do CTA”.\n- **Modo edição** — clique em uma tela para mudar textos e trocar imagens diretamente, sem gastar uma geração.\n\nVeja [Editar uma tela](/help/design-and-edit/editing-a-screen).\n\n## 7. Tire daqui\n\nQuando estiver satisfeito: [exporte para o Figma](/help/export-and-handoff/export-to-figma), [exporte código](/help/export-and-handoff/export-code) ou [publique como site no ar](/help/publish/publish-your-first-site).\n\n## Erros comuns da primeira sessão\n\n- **Pedir uma tela por vez quando você quer um fluxo.** Peça o fluxo inteiro de cara, para que as telas compartilhem tema e estrutura de navegação.\n- **Corrigir o tema tela por tela.** Mude o tema uma vez e ele vale para o projeto inteiro. Veja [Temas e guias de estilo](/help/design-and-edit/themes-and-style-guides).\n- **Regenerar por causa de um erro de digitação.** Use o modo edição. Regenerar custa créditos; editar texto não.","text":"Isto leva você de uma conta recém-criada a uma tela que pode editar e exportar. 1. Entre Vá em uxmagic.ai e cadastre-se com Google ou e-mail. Não é preciso cartão de crédito — o plano Free dá 20 créditos por dia, o suficiente para cerca de 3 telas diárias, em até 5 projetos. 2. Crie um projeto No painel, clique em Novo projeto. Um projeto é um contêiner para um conjunto de telas que compartilham um tema — um produto, um site, um fluxo. Mantenha trabalhos sem relação em projetos separados, para que seus sistemas de design não se atrapalhem. 3. Descreva o que você quer Digite seu pedido no campo de prompt. Seja específico sobre o produto, as telas e o público: Um SaaS de gestão de projetos para agências pequenas. Preciso de uma landing page de marketing, uma página de preços e um painel mostrando os projetos ativos. Limpo e moderno, azul profundo e branco, acolhedor mas profissional. Se você tem uma marca, um site de referência ou um PRD, anexe agora — veja Todas as formas de gerar uma tela. 4. Aprove o plano Em um projeto novo, a IA costuma propor uma lista de telas antes de projetar qualquer coisa. Você pode acrescentar telas, renomeá-las, remover as que não precisa e então aprovar. Este passo é barato de propósito: sai muito melhor corrigir o plano do que refazer cinco telas prontas. 5. Veja ela projetar As telas são projetadas uma por vez e aparecem no canvas conforme terminam. Você pode continuar trabalhando enquanto isso. 6. Itere Duas formas de mudar as coisas: - Chat — para qualquer coisa estrutural ou de tema: “adicione depoimentos abaixo do hero”, “deixe tudo escuro”, “troque o texto do CTA”. - Modo edição — clique em uma tela para mudar textos e trocar imagens diretamente, sem gastar uma geração. Veja Editar uma tela. 7. Tire daqui Quando estiver satisfeito: exporte para o Figma, exporte código ou publique como site no ar. Erros comuns da primeira sessão - Pedir uma tela por vez quando você quer um fluxo. Peça o fluxo inteiro de cara, para que as telas compartilhem tema e estrutura de navegação. - Corrigir o tema tela por tela. Mude o tema uma vez e ele vale para o projeto inteiro. Veja Temas e guias de estilo. - Regenerar por causa de um erro de digitação. Use o modo edição. Regenerar custa créditos; editar texto não."},{"slug":"the-canvas","category":"getting-started","categoryTitle":"Primeiros passos","title":"O canvas, os projetos e as telas","description":"Como projetos, telas, versões e o canvas infinito se encaixam.","url":"https://uxmagic.ai/pt/help/getting-started/the-canvas","type":"guide","keywords":["canvas","frames","telas","estrutura do projeto","zoom","navegar"],"headings":["Projetos","Telas","O canvas","Versões","Recursos e documentos","Lixeira"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","versions-and-history","editing-a-screen"],"markdown":"![Um projeto da UXMagic no canvas: três telas de onboarding geradas ao lado do painel de chat do agente listando os passos executados.](/help/canvas.webp)\n\n## Projetos\n\nUm **projeto** contém telas, um tema, recursos e documentos enviados, seu histórico de chat e seus colaboradores. Tudo dentro de um projeto compartilha um sistema de design, e é isso que faz vinte telas parecerem um só produto.\n\nRegra prática: um projeto por produto ou site. Se estiver projetando duas coisas sem relação, use dois projetos — do contrário, uma mudança de tema pensada para uma vai mexer na outra.\n\n## Telas\n\nUma **tela** (às vezes chamada de frame) é uma prancheta no canvas. Cada tela tem nome, tamanho de dispositivo, conteúdo HTML e um histórico de versões.\n\nTelas podem ser:\n\n- geradas pela IA a partir do seu prompt,\n- adicionadas vazias e preenchidas depois,\n- duplicadas de uma tela existente,\n- criadas como variante responsiva de outra tela.\n\n## O canvas\n\nO canvas é infinito e ampliável.\n\n- **Mover** — espaço + arrastar, ou rolagem com dois dedos.\n- **Zoom** — ⌘/Ctrl + rolagem, ou o controle de zoom.\n- **Ajustar à tela** — reduz o zoom até mostrar todas as telas do projeto.\n- **Modo foco** — abre uma única tela em largura total para trabalho de detalhe.\n\nAs telas são posicionadas a partir do seu ponto central, então telas recém-geradas ficam em fila ao lado das existentes em vez de empilhadas sobre elas.\n\n## Versões\n\nToda mudança da IA em uma tela cria uma **nova versão** em vez de sobrescrever a anterior. Você pode voltar pelas versões e restaurar qualquer uma. Veja [Versões e histórico](/help/design-and-edit/versions-and-history).\n\n## Recursos e documentos\n\nCada projeto tem uma **biblioteca de recursos** para as imagens que você envia ou a IA gera, e uma área de **documentos** onde anexar um PRD, briefing ou especificação que a IA vai ler antes de projetar. Veja [Projetar a partir de um PRD ou briefing](/help/generate/design-from-a-document).\n\n## Lixeira\n\nProjetos excluídos vão para a **Lixeira** e podem ser restaurados no painel.","text":"Projetos Um projeto contém telas, um tema, recursos e documentos enviados, seu histórico de chat e seus colaboradores. Tudo dentro de um projeto compartilha um sistema de design, e é isso que faz vinte telas parecerem um só produto. Regra prática: um projeto por produto ou site. Se estiver projetando duas coisas sem relação, use dois projetos — do contrário, uma mudança de tema pensada para uma vai mexer na outra. Telas Uma tela (às vezes chamada de frame) é uma prancheta no canvas. Cada tela tem nome, tamanho de dispositivo, conteúdo HTML e um histórico de versões. Telas podem ser: - geradas pela IA a partir do seu prompt, - adicionadas vazias e preenchidas depois, - duplicadas de uma tela existente, - criadas como variante responsiva de outra tela. O canvas O canvas é infinito e ampliável. - Mover — espaço + arrastar, ou rolagem com dois dedos. - Zoom — ⌘/Ctrl + rolagem, ou o controle de zoom. - Ajustar à tela — reduz o zoom até mostrar todas as telas do projeto. - Modo foco — abre uma única tela em largura total para trabalho de detalhe. As telas são posicionadas a partir do seu ponto central, então telas recém-geradas ficam em fila ao lado das existentes em vez de empilhadas sobre elas. Versões Toda mudança da IA em uma tela cria uma nova versão em vez de sobrescrever a anterior. Você pode voltar pelas versões e restaurar qualquer uma. Veja Versões e histórico. Recursos e documentos Cada projeto tem uma biblioteca de recursos para as imagens que você envia ou a IA gera, e uma área de documentos onde anexar um PRD, briefing ou especificação que a IA vai ler antes de projetar. Veja Projetar a partir de um PRD ou briefing. Lixeira Projetos excluídos vão para a Lixeira e podem ser restaurados no painel."},{"slug":"writing-a-good-prompt","category":"getting-started","categoryTitle":"Primeiros passos","title":"Escrever um prompt que entrega o que você quer","description":"As cinco coisas que devem entrar em um prompt, e as formulações que dão errado sempre.","url":"https://uxmagic.ai/pt/help/getting-started/writing-a-good-prompt","type":"guide","keywords":["prompt","prompting","resultados melhores","resultado ruim","como pedir"],"headings":["Inclua estas cinco coisas","Um prompt que funciona","Formulações que decepcionam sempre","Seja explícito quando for sério","Iterar","Quando o resultado está perto mas não certo"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","ways-to-generate-a-screen","the-ai-is-not-following-my-brief"],"markdown":"O maior fator na qualidade do resultado é o prompt. Isto é o que realmente faz diferença.\n\n## Inclua estas cinco coisas\n\n1. **O que é o produto.** “Uma ferramenta de agendamento para pet shops” diz à IA que conteúdo pertence à página. “Uma landing page” não diz.\n2. **Quais telas você quer.** Nomeie-as. “Landing, preços, cadastro e um estado vazio do painel.”\n3. **Para quem é.** B2B corporativo e consumo em celular produzem layouts bem diferentes.\n4. **A direção visual.** Uma cor de marca, uma sensação tipográfica, uma referência: “quente, editorial, muito espaço em branco, títulos com serifa”.\n5. **Tudo o que é inegociável.** Textos legais, um CTA específico, uma seção obrigatória, uma restrição rígida.\n\n## Um prompt que funciona\n\n> Uma ferramenta B2B de faturamento para freelancers chamada Ledgerly. Projete uma landing page de marketing, uma página de preços com três níveis e um painel listando as faturas recentes. O público são freelancers sozinhos, não grandes empresas. Direção visual: calma e confiável, verde profundo como cor principal, espaço em branco generoso, sem serifa. A landing precisa de um CTA “Começar grátis” na navegação e uma seção sobre receber mais rápido.\n\n## Formulações que decepcionam sempre\n\n- **“Melhore.”** A IA não sabe em qual eixo. Diga o que está errado: “o hero está alto demais e o CTA é difícil de achar”.\n- **“Deixe chamativo.”** Dê uma direção concreta: mais contraste, tipografia maior, uma cor de destaque mais ousada.\n- **“Tipo a Stripe.”** Melhor: cole a URL e peça um clone, ou descreva a qualidade específica que você quer dizer (“a densidade e o tratamento de gradientes da Stripe”).\n- **Dez mudanças em uma mensagem.** Elas interagem. Duas ou três por vez aterrissam com mais confiabilidade.\n\n## Seja explícito quando for sério\n\nSe você tem uma marca e quer que ela seja respeitada exatamente, diga em termos firmes: “Use exatamente estas cores: #0F3D2E e #F5F1E8. Não introduza outras cores.” Caso contrário, a IA aplicará o próprio julgamento sobre o que combina.\n\nO mesmo vale para conteúdo: se o texto importa, forneça-o. Senão você vai receber um texto de preenchimento plausível.\n\n## Iterar\n\nO chat mantém o contexto do projeto, então as mensagens seguintes podem ser curtas: “deixe a navegação fixa”, “troque as seções dois e três”, “os cartões de preço precisam de um selo de mais escolhido”. Não é preciso repetir o briefing toda vez.\n\n## Quando o resultado está perto mas não certo\n\nNão regenere — isso gasta créditos e joga fora o que já estava bom. Em vez disso:\n\n- uma edição direcionada por chat para uma seção,\n- o [modo edição](/help/design-and-edit/editing-a-screen) para textos e imagens,\n- uma [mudança de tema](/help/design-and-edit/themes-and-style-guides) para qualquer coisa de cor ou tipografia.","text":"O maior fator na qualidade do resultado é o prompt. Isto é o que realmente faz diferença. Inclua estas cinco coisas 1. O que é o produto. “Uma ferramenta de agendamento para pet shops” diz à IA que conteúdo pertence à página. “Uma landing page” não diz. 2. Quais telas você quer. Nomeie-as. “Landing, preços, cadastro e um estado vazio do painel.” 3. Para quem é. B2B corporativo e consumo em celular produzem layouts bem diferentes. 4. A direção visual. Uma cor de marca, uma sensação tipográfica, uma referência: “quente, editorial, muito espaço em branco, títulos com serifa”. 5. Tudo o que é inegociável. Textos legais, um CTA específico, uma seção obrigatória, uma restrição rígida. Um prompt que funciona Uma ferramenta B2B de faturamento para freelancers chamada Ledgerly. Projete uma landing page de marketing, uma página de preços com três níveis e um painel listando as faturas recentes. O público são freelancers sozinhos, não grandes empresas. Direção visual: calma e confiável, verde profundo como cor principal, espaço em branco generoso, sem serifa. A landing precisa de um CTA “Começar grátis” na navegação e uma seção sobre receber mais rápido. Formulações que decepcionam sempre - “Melhore.” A IA não sabe em qual eixo. Diga o que está errado: “o hero está alto demais e o CTA é difícil de achar”. - “Deixe chamativo.” Dê uma direção concreta: mais contraste, tipografia maior, uma cor de destaque mais ousada. - “Tipo a Stripe.” Melhor: cole a URL e peça um clone, ou descreva a qualidade específica que você quer dizer (“a densidade e o tratamento de gradientes da Stripe”). - Dez mudanças em uma mensagem. Elas interagem. Duas ou três por vez aterrissam com mais confiabilidade. Seja explícito quando for sério Se você tem uma marca e quer que ela seja respeitada exatamente, diga em termos firmes: “Use exatamente estas cores: #0F3D2E e #F5F1E8. Não introduza outras cores.” Caso contrário, a IA aplicará o próprio julgamento sobre o que combina. O mesmo vale para conteúdo: se o texto importa, forneça-o. Senão você vai receber um texto de preenchimento plausível. Iterar O chat mantém o contexto do projeto, então as mensagens seguintes podem ser curtas: “deixe a navegação fixa”, “troque as seções dois e três”, “os cartões de preço precisam de um selo de mais escolhido”. Não é preciso repetir o briefing toda vez. Quando o resultado está perto mas não certo Não regenere — isso gasta créditos e joga fora o que já estava bom. Em vez disso: - uma edição direcionada por chat para uma seção, - o modo edição para textos e imagens, - uma mudança de tema para qualquer coisa de cor ou tipografia."},{"slug":"keyboard-shortcuts","category":"getting-started","categoryTitle":"Primeiros passos","title":"Atalhos de teclado","description":"Atalhos de canvas, edição e navegação.","url":"https://uxmagic.ai/pt/help/getting-started/keyboard-shortcuts","type":"reference","keywords":["atalhos","teclas","teclado","desfazer","excluir"],"headings":["Canvas","Telas","Chat"],"updated":"2026-08-27","faqs":[],"related":["the-canvas","editing-a-screen"],"markdown":"## Canvas\n\n| Ação | Atalho |\n| --- | --- |\n| Mover | Espaço + arrastar, ou rolagem com dois dedos |\n| Aproximar / afastar | ⌘/Ctrl + rolagem, ou ⌘/Ctrl + \\= / \\- |\n| Ajustar todas as telas | Shift + 1 |\n| Zoom em 100% | ⌘/Ctrl + 0 |\n\n## Telas\n\n| Ação | Atalho |\n| --- | --- |\n| Duplicar a tela selecionada | ⌘/Ctrl + D |\n| Excluir a tela selecionada | Delete / Backspace |\n| Desfazer | ⌘/Ctrl + Z |\n| Refazer | ⌘/Ctrl + Shift + Z |\n\n## Chat\n\n| Ação | Atalho |\n| --- | --- |\n| Enviar | Enter |\n| Nova linha | Shift + Enter |\n\n> **Se Excluir ou Desfazer parecerem mortos:** clique primeiro em uma área vazia do canvas. Enquanto o cursor está no campo de prompt, essas teclas pertencem ao campo de texto, não ao canvas.","text":"Canvas Ação Atalho --- --- Mover Espaço + arrastar, ou rolagem com dois dedos Aproximar / afastar ⌘/Ctrl + rolagem, ou ⌘/Ctrl + \\= / \\- Ajustar todas as telas Shift + 1 Zoom em 100% ⌘/Ctrl + 0 Telas Ação Atalho --- --- Duplicar a tela selecionada ⌘/Ctrl + D Excluir a tela selecionada Delete / Backspace Desfazer ⌘/Ctrl + Z Refazer ⌘/Ctrl + Shift + Z Chat Ação Atalho --- --- Enviar Enter Nova linha Shift + Enter Se Excluir ou Desfazer parecerem mortos: clique primeiro em uma área vazia do canvas. Enquanto o cursor está no campo de prompt, essas teclas pertencem ao campo de texto, não ao canvas."},{"slug":"account-and-profile","category":"getting-started","categoryTitle":"Primeiros passos","title":"Sua conta e seu perfil","description":"Métodos de login, mudar seu e-mail ou senha, e configurações da conta.","url":"https://uxmagic.ai/pt/help/getting-started/account-and-profile","type":"howto","keywords":["conta","perfil","senha","e-mail","entrar","login","sso"],"headings":["Entrar","Mudar seus dados","Mudar seu e-mail","Esqueceu a senha","Excluir sua conta"],"updated":"2026-08-27","faqs":[],"related":["plans-and-limits","delete-your-account","teams-and-seats"],"markdown":"## Entrar\n\nA UXMagic aceita:\n\n- **Google** — um clique, sem senha para administrar.\n- **E-mail e senha** — com verificação de e-mail.\n- **SSO / SAML** — nos planos Enterprise.\n\n## Mudar seus dados\n\nAbra **Gerenciar conta** no menu do avatar, no painel. Ali você pode atualizar nome, avatar e senha.\n\n## Mudar seu e-mail\n\nSe você se cadastrou com e-mail e senha, pode mudar o endereço em **Gerenciar conta**; o novo precisa ser verificado antes de entrar em vigor.\n\nSe você se cadastrou com o Google, seu e-mail vem da conta Google. Para mudar de endereço, fale com o suporte para que possamos migrar seus projetos em vez de deixar você com duas contas.\n\n## Esqueceu a senha\n\nUse **Esqueci a senha** na tela de login. Se nada chegar, confira o spam e verifique se você realmente se cadastrou com senha e não com o Google — contas Google não têm senha da UXMagic para redefinir.\n\n## Excluir sua conta\n\nVeja [Excluir sua conta](/help/account-and-billing/delete-your-account). A exclusão é permanente e remove seus projetos.","text":"Entrar A UXMagic aceita: - Google — um clique, sem senha para administrar. - E-mail e senha — com verificação de e-mail. - SSO / SAML — nos planos Enterprise. Mudar seus dados Abra Gerenciar conta no menu do avatar, no painel. Ali você pode atualizar nome, avatar e senha. Mudar seu e-mail Se você se cadastrou com e-mail e senha, pode mudar o endereço em Gerenciar conta; o novo precisa ser verificado antes de entrar em vigor. Se você se cadastrou com o Google, seu e-mail vem da conta Google. Para mudar de endereço, fale com o suporte para que possamos migrar seus projetos em vez de deixar você com duas contas. Esqueceu a senha Use Esqueci a senha na tela de login. Se nada chegar, confira o spam e verifique se você realmente se cadastrou com senha e não com o Google — contas Google não têm senha da UXMagic para redefinir. Excluir sua conta Veja Excluir sua conta. A exclusão é permanente e remove seus projetos."},{"slug":"ways-to-generate-a-screen","category":"generate","categoryTitle":"Gerar designs","title":"Todas as formas de gerar uma tela","description":"Prompt, captura de tela, rascunho, URL de site, importação do Figma ou um PRD — e qual escolher.","url":"https://uxmagic.ai/pt/help/generate/ways-to-generate-a-screen","type":"guide","keywords":["gerar","criar tela","entrada","ponto de partida","opções"],"headings":["Dois níveis de fidelidade","Uma tela ou um fluxo inteiro","Combinar entradas"],"updated":"2026-08-27","faqs":[],"related":["text-to-ui","screenshot-to-ui","clone-a-website","import-from-figma"],"markdown":"A UXMagic aceita seis tipos de ponto de partida. Todos chegam ao mesmo lugar — uma tela editável no canvas com o tema do projeto — então você pode misturá-los à vontade dentro de um projeto.\n\n| Partir de | Melhor quando | Guia |\n| --- | --- | --- |\n| Um prompt de texto | Você está começando do zero e sabe mais ou menos o que quer | [De texto para interface](/help/generate/text-to-ui) |\n| Uma captura de tela | Você quer reconstruir ou reestilizar uma interface que consegue ver | [De captura para interface](/help/generate/screenshot-to-ui) |\n| Um rascunho feito à mão | Vocês desenharam o layout no quadro e querem torná-lo real | [De rascunho para interface](/help/generate/sketch-to-ui) |\n| A URL de um site | Você quer a estrutura de um site real como ponto de partida | [Clonar um site](/help/generate/clone-a-website) |\n| Um arquivo do Figma | Você já tem designs e quer iterar com IA | [Importar do Figma](/help/generate/import-from-figma) |\n| Um PRD ou briefing | Os requisitos já estão escritos | [Projetar a partir de um documento](/help/generate/design-from-a-document) |\n\n## Dois níveis de fidelidade\n\nQualquer um dos itens acima pode sair como **tela de alta fidelidade** ou como **wireframe**. Wireframes servem para discutir estrutura antes que alguém se apaixone por uma cor. Veja [Modo wireframe](/help/generate/wireframe-mode).\n\n## Uma tela ou um fluxo inteiro\n\n- **Uma tela** — peça diretamente.\n- **Um fluxo inteiro** — descreva a jornada e a IA planeja e projeta cada tela em sequência, com um tema e uma navegação em comum. Veja [Modo fluxo e planos de telas](/help/generate/flow-mode-and-screen-plans).\n\n## Combinar entradas\n\nOs melhores resultados costumam vir de combinações: a captura de um concorrente **mais** as cores da sua marca, ou um PRD **mais** uma URL de referência. Anexe tudo o que for relevante na mesma mensagem — a IA lê tudo antes de projetar.","text":"A UXMagic aceita seis tipos de ponto de partida. Todos chegam ao mesmo lugar — uma tela editável no canvas com o tema do projeto — então você pode misturá-los à vontade dentro de um projeto. Partir de Melhor quando Guia --- --- --- Um prompt de texto Você está começando do zero e sabe mais ou menos o que quer De texto para interface Uma captura de tela Você quer reconstruir ou reestilizar uma interface que consegue ver De captura para interface Um rascunho feito à mão Vocês desenharam o layout no quadro e querem torná-lo real De rascunho para interface A URL de um site Você quer a estrutura de um site real como ponto de partida Clonar um site Um arquivo do Figma Você já tem designs e quer iterar com IA Importar do Figma Um PRD ou briefing Os requisitos já estão escritos Projetar a partir de um documento Dois níveis de fidelidade Qualquer um dos itens acima pode sair como tela de alta fidelidade ou como wireframe. Wireframes servem para discutir estrutura antes que alguém se apaixone por uma cor. Veja Modo wireframe. Uma tela ou um fluxo inteiro - Uma tela — peça diretamente. - Um fluxo inteiro — descreva a jornada e a IA planeja e projeta cada tela em sequência, com um tema e uma navegação em comum. Veja Modo fluxo e planos de telas. Combinar entradas Os melhores resultados costumam vir de combinações: a captura de um concorrente mais as cores da sua marca, ou um PRD mais uma URL de referência. Anexe tudo o que for relevante na mesma mensagem — a IA lê tudo antes de projetar."},{"slug":"text-to-ui","category":"generate","categoryTitle":"Gerar designs","title":"De texto para interface","description":"Transforme uma descrição escrita em uma tela editável e de alta fidelidade.","url":"https://uxmagic.ai/pt/help/generate/text-to-ui","type":"howto","keywords":["de texto para interface","de prompt para design","gerador de ui com ia","descrever"],"headings":["Passos","Controlar o resultado","Quanto custa","Se o resultado errar o alvo"],"updated":"2026-08-27","faqs":[],"related":["writing-a-good-prompt","flow-mode-and-screen-plans","themes-and-style-guides"],"markdown":"O caminho padrão: descreva a interface, receba a interface.\n\n## Passos\n\n1. Abra um projeto e clique no campo de prompt.\n2. Descreva o produto, a tela ou telas, o público e a direção visual. Veja [Escrever um prompt que entrega o que você quer](/help/getting-started/writing-a-good-prompt).\n3. Envie. Em um projeto novo, normalmente você verá antes um **plano de telas** para aprovar.\n4. As telas são projetadas uma por vez e aparecem no canvas conforme ficam prontas.\n\n## Controlar o resultado\n\n**Tamanho de dispositivo.** Diga no prompt — “uma tela de checkout para celular” — ou defina o tamanho antes de gerar. Telas existentes podem ser convertidas para outro dispositivo depois; veja [Variantes responsivas e por dispositivo](/help/design-and-edit/responsive-variants).\n\n**Marca.** Se você tem cores e fontes, informe de forma explícita e firme. Uma menção fraca (“azulado”) é interpretada; uma instrução exata (“principal #1B4DFF, títulos em Inter, nenhuma outra cor de destaque”) é seguida.\n\n**Conteúdo.** Forneça os textos reais se os textos importam. Senão você recebe um texto de preenchimento bem formado, ok para a estrutura mas não para uma demo.\n\n**Imagens.** A IA gera imagens onde o design precisa. Você também pode enviar as suas e pedir que sejam usadas. Veja [Imagens nos seus designs](/help/design-and-edit/images-in-your-designs).\n\n## Quanto custa\n\nProjetar uma tela nova do zero custa créditos; refiná-la custa muito menos. A tabela exata está em [Como funcionam os créditos](/help/account-and-billing/how-credits-work).\n\n## Se o resultado errar o alvo\n\nNão regenere a tela inteira por um erro parcial — diga o que está errado e deixe corrigir. Regenerar é uma das ações mais caras disponíveis e descarta as partes que já estavam certas.","text":"O caminho padrão: descreva a interface, receba a interface. Passos 1. Abra um projeto e clique no campo de prompt. 2. Descreva o produto, a tela ou telas, o público e a direção visual. Veja Escrever um prompt que entrega o que você quer. 3. Envie. Em um projeto novo, normalmente você verá antes um plano de telas para aprovar. 4. As telas são projetadas uma por vez e aparecem no canvas conforme ficam prontas. Controlar o resultado Tamanho de dispositivo. Diga no prompt — “uma tela de checkout para celular” — ou defina o tamanho antes de gerar. Telas existentes podem ser convertidas para outro dispositivo depois; veja Variantes responsivas e por dispositivo. Marca. Se você tem cores e fontes, informe de forma explícita e firme. Uma menção fraca (“azulado”) é interpretada; uma instrução exata (“principal #1B4DFF, títulos em Inter, nenhuma outra cor de destaque”) é seguida. Conteúdo. Forneça os textos reais se os textos importam. Senão você recebe um texto de preenchimento bem formado, ok para a estrutura mas não para uma demo. Imagens. A IA gera imagens onde o design precisa. Você também pode enviar as suas e pedir que sejam usadas. Veja Imagens nos seus designs. Quanto custa Projetar uma tela nova do zero custa créditos; refiná-la custa muito menos. A tabela exata está em Como funcionam os créditos. Se o resultado errar o alvo Não regenere a tela inteira por um erro parcial — diga o que está errado e deixe corrigir. Regenerar é uma das ações mais caras disponíveis e descarta as partes que já estavam certas."},{"slug":"screenshot-to-ui","category":"generate","categoryTitle":"Gerar designs","title":"De captura para interface","description":"Envie uma captura de tela e receba uma versão editável e reestilizável daquela interface.","url":"https://uxmagic.ai/pt/help/generate/screenshot-to-ui","type":"howto","keywords":["captura de tela","de imagem para interface","enviar imagem","recriar","png","jpg"],"headings":["Passos","Conseguir uma reprodução fiel","Várias capturas","Uma armadilha conhecida","Custo"],"updated":"2026-08-27","faqs":[{"question":"Quais formatos de imagem posso enviar?","answer":"JPEG, PNG e WebP. Imagens muito grandes são redimensionadas antes de a IA lê-las."},{"question":"Ela vai copiar a captura exatamente?","answer":"Layout, hierarquia e estrutura de componentes são reproduzidos fielmente. Diga explicitamente se você também quer as cores e os textos exatos — do contrário, o tema do projeto é aplicado."}],"related":["sketch-to-ui","clone-a-website","images-in-your-designs"],"markdown":"Dê à UXMagic uma imagem de uma interface e ela a reconstrói como uma tela real e editável.\n\n## Passos\n\n1. Clique no botão de anexo do campo de prompt e envie sua imagem (JPEG, PNG ou WebP).\n2. Diga o que deve ser feito com ela. Isso importa mais do que as pessoas esperam:\n   - *“Reconstrua esta tela exatamente”* — reprodução fiel.\n   - *“Reconstrua este layout mas nas cores da nossa marca”* — estrutura mantida, tema aplicado.\n   - *“Esta é a página de preços do nosso concorrente — projete a nossa na mesma estrutura”* — estrutura como inspiração.\n3. Envie.\n\n## Conseguir uma reprodução fiel\n\n- Envie a **tela inteira**, não um recorte, se quiser todo o layout.\n- Envie em **resolução legível** — se você não consegue ler os rótulos, a IA também não.\n- Se as cores exatas importam, diga *“reproduza exatamente as cores da captura”*. Por padrão o tema de um projeto existente vence, porque na maioria dos projetos o que as pessoas realmente querem é coerência.\n\n## Várias capturas\n\nEnvie várias de uma vez para um fluxo com várias telas, e a IA vai tratá-las como um conjunto, mantendo-as coerentes entre si.\n\n## Uma armadilha conhecida\n\nEm um projeto existente, uma captura sozinha **não** sobrepõe o tema do projeto: a nova tela herda a paleta já em uso. Se você prefere a paleta da referência, peça com palavras: *“use as cores desta imagem, não o tema atual.”*\n\n## Custo\n\nLer uma imagem é gratuito; projetar a tela a partir dela custa os créditos habituais de criação de tela.","text":"Dê à UXMagic uma imagem de uma interface e ela a reconstrói como uma tela real e editável. Passos 1. Clique no botão de anexo do campo de prompt e envie sua imagem (JPEG, PNG ou WebP). 2. Diga o que deve ser feito com ela. Isso importa mais do que as pessoas esperam: - “Reconstrua esta tela exatamente” — reprodução fiel. - “Reconstrua este layout mas nas cores da nossa marca” — estrutura mantida, tema aplicado. - “Esta é a página de preços do nosso concorrente — projete a nossa na mesma estrutura” — estrutura como inspiração. 3. Envie. Conseguir uma reprodução fiel - Envie a tela inteira, não um recorte, se quiser todo o layout. - Envie em resolução legível — se você não consegue ler os rótulos, a IA também não. - Se as cores exatas importam, diga “reproduza exatamente as cores da captura”. Por padrão o tema de um projeto existente vence, porque na maioria dos projetos o que as pessoas realmente querem é coerência. Várias capturas Envie várias de uma vez para um fluxo com várias telas, e a IA vai tratá-las como um conjunto, mantendo-as coerentes entre si. Uma armadilha conhecida Em um projeto existente, uma captura sozinha não sobrepõe o tema do projeto: a nova tela herda a paleta já em uso. Se você prefere a paleta da referência, peça com palavras: “use as cores desta imagem, não o tema atual.” Custo Ler uma imagem é gratuito; projetar a tela a partir dela custa os créditos habituais de criação de tela."},{"slug":"sketch-to-ui","category":"generate","categoryTitle":"Gerar designs","title":"De rascunho para interface","description":"Transforme a foto de um quadro branco ou um wireframe em papel em uma interface digital acabada.","url":"https://uxmagic.ai/pt/help/generate/sketch-to-ui","type":"howto","keywords":["rascunho","foto de wireframe","quadro branco","desenho","papel","guardanapo"],"headings":["Passos","Para os rascunhos serem bem lidos","De rascunho para wireframe"],"updated":"2026-08-27","faqs":[],"related":["screenshot-to-ui","wireframe-mode","text-to-ui"],"markdown":"Fotografe seu rascunho, envie e receba uma tela de verdade.\n\n## Passos\n\n1. Fotografe o rascunho de frente, com luz uniforme e o desenho todo no enquadramento.\n2. Envie no campo de prompt.\n3. Acrescente o contexto que o desenho não consegue carregar: o que é o produto, o que as caixas significam, a direção visual.\n\n> Um rascunho da nossa tela de onboarding. A caixa grande no canto superior esquerdo é um vídeo, as três caixas empilhadas são passos de configuração com marcas de conclusão. Visual de SaaS moderno, destaque roxo.\n\n## Para os rascunhos serem bem lidos\n\n- **Rotule suas caixas.** “hero”, “nav”, “gráfico” — rótulos escritos são lidos e usados.\n- **Desenhe a hierarquia.** Caixas maiores viram elementos maiores.\n- **Evite sombreado pesado.** Desenhos de linha são lidos com mais confiabilidade do que sombreados.\n- **Uma tela por foto**, a menos que você esteja entregando um fluxo de propósito.\n\n## De rascunho para wireframe\n\nSe quiser ficar na baixa fidelidade — limpar o rascunho sem se comprometer com um estilo visual — peça um wireframe. Veja [Modo wireframe](/help/generate/wireframe-mode).","text":"Fotografe seu rascunho, envie e receba uma tela de verdade. Passos 1. Fotografe o rascunho de frente, com luz uniforme e o desenho todo no enquadramento. 2. Envie no campo de prompt. 3. Acrescente o contexto que o desenho não consegue carregar: o que é o produto, o que as caixas significam, a direção visual. Um rascunho da nossa tela de onboarding. A caixa grande no canto superior esquerdo é um vídeo, as três caixas empilhadas são passos de configuração com marcas de conclusão. Visual de SaaS moderno, destaque roxo. Para os rascunhos serem bem lidos - Rotule suas caixas. “hero”, “nav”, “gráfico” — rótulos escritos são lidos e usados. - Desenhe a hierarquia. Caixas maiores viram elementos maiores. - Evite sombreado pesado. Desenhos de linha são lidos com mais confiabilidade do que sombreados. - Uma tela por foto, a menos que você esteja entregando um fluxo de propósito. De rascunho para wireframe Se quiser ficar na baixa fidelidade — limpar o rascunho sem se comprometer com um estilo visual — peça um wireframe. Veja Modo wireframe."},{"slug":"clone-a-website","category":"generate","categoryTitle":"Gerar designs","title":"Clonar um site a partir de uma URL","description":"Capture uma página web pública real e reconstrua-a como uma tela editável da UXMagic.","url":"https://uxmagic.ai/pt/help/generate/clone-a-website","type":"howto","keywords":["clonar","url","de site para interface","copiar site","importar site","scraping"],"headings":["Passos","O que volta","Clones parciais","O que não clona","Custo"],"updated":"2026-08-27","faqs":[{"question":"Posso clonar qualquer site?","answer":"Qualquer página pública. Páginas atrás de login, paywall ou proteção antibots agressiva não podem ser capturadas."},{"question":"Clonar um site é legal?","answer":"Use para estudar estrutura e layout e como ponto de partida do seu próprio trabalho. Copiar em bloco a marca, os textos e as imagens de um site para um produto em produção é um problema jurídico, seja qual for a ferramenta usada."}],"related":["screenshot-to-ui","clone-came-out-blank-or-partial","import-from-figma"],"markdown":"Cole uma URL e a UXMagic captura a página ao vivo — layout, seções, cores, fontes e recursos de imagem reais — e depois a reconstrói como tela editável e deriva um tema correspondente.\n\n## Passos\n\n1. Cole a URL completa, incluindo `https://`, no campo de prompt.\n2. Diga o que você quer: um clone direto, ou um clone reestilizado para a sua marca.\n3. Espere. Clonar é mais pesado que uma geração normal — a página real é carregada antes de qualquer trabalho de design.\n\n## O que volta\n\n- A **estrutura de seções** da página, na ordem.\n- Suas **cores e fontes**, capturadas em um tema do projeto.\n- Suas **imagens**, copiadas para a biblioteca de recursos do seu projeto.\n- Tudo **editável** — isto é uma tela de verdade, não uma captura.\n\n## Clones parciais\n\nPáginas muito longas ou muito complexas às vezes voltam com algumas seções reconstruídas e outras deixadas no canvas como **marcadores identificados**. É de propósito: uma página parcial com lacunas honestas é melhor que uma página com seções faltando em silêncio.\n\nPara terminar, peça à IA que conclua o clone. Ela recaptura o original e reconstrói apenas as seções que faltam, por uma fração do custo de um clone novo. Veja [Meu clone saiu vazio ou parcial](/help/troubleshooting/clone-came-out-blank-or-partial).\n\n## O que não clona\n\n- Páginas que exigem **login**.\n- Páginas atrás de **proteção antibots** (desafios do Cloudflare e afins).\n- Conteúdo que só existe após uma **interação do usuário** — um menu que abre no clique, um modal, os slides seguintes de um carrossel.\n- **Vídeo e animação** — capturados como imagem estática.\n\n## Custo\n\nClonar é a ação isolada que mais consome créditos na UXMagic, porque roda um navegador real contra a página de destino antes de projetar. Concluir um clone parcial custa bem menos. Veja [Como funcionam os créditos](/help/account-and-billing/how-credits-work).","text":"Cole uma URL e a UXMagic captura a página ao vivo — layout, seções, cores, fontes e recursos de imagem reais — e depois a reconstrói como tela editável e deriva um tema correspondente. Passos 1. Cole a URL completa, incluindo https://, no campo de prompt. 2. Diga o que você quer: um clone direto, ou um clone reestilizado para a sua marca. 3. Espere. Clonar é mais pesado que uma geração normal — a página real é carregada antes de qualquer trabalho de design. O que volta - A estrutura de seções da página, na ordem. - Suas cores e fontes, capturadas em um tema do projeto. - Suas imagens, copiadas para a biblioteca de recursos do seu projeto. - Tudo editável — isto é uma tela de verdade, não uma captura. Clones parciais Páginas muito longas ou muito complexas às vezes voltam com algumas seções reconstruídas e outras deixadas no canvas como marcadores identificados. É de propósito: uma página parcial com lacunas honestas é melhor que uma página com seções faltando em silêncio. Para terminar, peça à IA que conclua o clone. Ela recaptura o original e reconstrói apenas as seções que faltam, por uma fração do custo de um clone novo. Veja Meu clone saiu vazio ou parcial. O que não clona - Páginas que exigem login. - Páginas atrás de proteção antibots (desafios do Cloudflare e afins). - Conteúdo que só existe após uma interação do usuário — um menu que abre no clique, um modal, os slides seguintes de um carrossel. - Vídeo e animação — capturados como imagem estática. Custo Clonar é a ação isolada que mais consome créditos na UXMagic, porque roda um navegador real contra a página de destino antes de projetar. Concluir um clone parcial custa bem menos. Veja Como funcionam os créditos."},{"slug":"import-from-figma","category":"generate","categoryTitle":"Gerar designs","title":"Importar do Figma","description":"Traga um frame existente do Figma para a UXMagic e continue editando com IA.","url":"https://uxmagic.ai/pt/help/generate/import-from-figma","type":"howto","keywords":["importar figma","de figma para uxmagic","designs existentes","arquivo do figma","sistema de design"],"headings":["Passos","O que vem junto","O que esperar","Pegar a URL certa","Depois de importar","Sistemas de design e bibliotecas de componentes"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","figma-plugin","themes-and-style-guides"],"markdown":"A importação funciona no sentido oposto à exportação: um frame existente do Figma vira uma tela editável da UXMagic, sobre a qual você pode iterar com IA.\n\n## Passos\n\n1. Conecte o Figma em **Integrações** (uma conexão OAuth — você autoriza a UXMagic uma vez).\n2. Cole a URL do frame do Figma, ou escolha o arquivo e o frame no seletor.\n3. Escolha se quer importar os estilos do próprio frame como tema do projeto, ou mapeá-lo sobre o tema que você já tem.\n4. Importe.\n\n## O que vem junto\n\n- **Layout e hierarquia**, incluindo a estrutura de auto layout.\n- **Texto**, com seus estilos tipográficos.\n- **Cores e efeitos**, incluindo gradientes e sombras.\n- **Imagens**, copiadas para os recursos do seu projeto.\n- **Vetores e ícones**, reconstruídos como marcação.\n\n## O que esperar\n\nO Figma é um canvas vetorial e a web é um modelo de caixas, então a importação é uma *tradução* fiel, não uma cópia idêntica byte a byte. Espere estrutura e espaçamentos muito próximos, com pequenas diferenças na renderização do texto e em efeitos sem equivalente direto na web.\n\nImportações são mais precisas quando o frame do Figma usa **auto layout**. Layouts livres com posicionamento absoluto importam, mas com menos fidelidade estrutural.\n\n## Pegar a URL certa\n\nSelecione o frame no Figma e então **clique com o botão direito → Copiar link para a seleção**. Um link para o arquivo sem um nó selecionado importa a coisa errada, ou nada.\n\n## Depois de importar\n\nA tela importada se comporta como qualquer outra: edições por chat, modo edição, temas, versões, exportação. É o caminho mais rápido para “já temos designs, mas agora queremos andar mais rápido”.\n\n## Sistemas de design e bibliotecas de componentes\n\nVocê também pode importar uma biblioteca de componentes ou um sistema de design para que as telas geradas usem seus componentes. Veja [Bibliotecas de componentes](/help/design-and-edit/component-libraries).","text":"A importação funciona no sentido oposto à exportação: um frame existente do Figma vira uma tela editável da UXMagic, sobre a qual você pode iterar com IA. Passos 1. Conecte o Figma em Integrações (uma conexão OAuth — você autoriza a UXMagic uma vez). 2. Cole a URL do frame do Figma, ou escolha o arquivo e o frame no seletor. 3. Escolha se quer importar os estilos do próprio frame como tema do projeto, ou mapeá-lo sobre o tema que você já tem. 4. Importe. O que vem junto - Layout e hierarquia, incluindo a estrutura de auto layout. - Texto, com seus estilos tipográficos. - Cores e efeitos, incluindo gradientes e sombras. - Imagens, copiadas para os recursos do seu projeto. - Vetores e ícones, reconstruídos como marcação. O que esperar O Figma é um canvas vetorial e a web é um modelo de caixas, então a importação é uma tradução fiel, não uma cópia idêntica byte a byte. Espere estrutura e espaçamentos muito próximos, com pequenas diferenças na renderização do texto e em efeitos sem equivalente direto na web. Importações são mais precisas quando o frame do Figma usa auto layout. Layouts livres com posicionamento absoluto importam, mas com menos fidelidade estrutural. Pegar a URL certa Selecione o frame no Figma e então clique com o botão direito → Copiar link para a seleção. Um link para o arquivo sem um nó selecionado importa a coisa errada, ou nada. Depois de importar A tela importada se comporta como qualquer outra: edições por chat, modo edição, temas, versões, exportação. É o caminho mais rápido para “já temos designs, mas agora queremos andar mais rápido”. Sistemas de design e bibliotecas de componentes Você também pode importar uma biblioteca de componentes ou um sistema de design para que as telas geradas usem seus componentes. Veja Bibliotecas de componentes."},{"slug":"design-from-a-document","category":"generate","categoryTitle":"Gerar designs","title":"Projetar a partir de um PRD ou briefing","description":"Envie os requisitos e faça a IA lê-los antes de projetar qualquer coisa.","url":"https://uxmagic.ai/pt/help/generate/design-from-a-document","type":"howto","keywords":["prd","documento","briefing","especificação","requisitos","enviar pdf","docx"],"headings":["Passos","Documentos aceitos","Tirar o máximo proveito","Custo"],"updated":"2026-08-27","faqs":[],"related":["flow-mode-and-screen-plans","writing-a-good-prompt","text-to-ui"],"markdown":"Se o raciocínio já existe em um documento, não redigite tudo em um prompt.\n\n## Passos\n\n1. Abra seu projeto e envie o documento para a área de **documentos** do projeto (ou anexe no campo de prompt).\n2. Peça o que você quer construir a partir dele:\n\n> Leia o PRD e projete as telas que ele descreve. Comece pelo plano.\n\n3. A IA lista os documentos do projeto, lê o que interessa e o usa como fonte da verdade para telas, conteúdo e terminologia.\n\n## Documentos aceitos\n\nPRDs, briefings de design, especificações e documentos de texto semelhantes. O que importa é o texto ser extraível — a imagem escaneada de um documento é uma foto, não um documento, e deve ser enviada como imagem.\n\n## Tirar o máximo proveito\n\n- **Nomeie suas telas no documento.** Um PRD com uma lista explícita de telas produz um plano muito melhor do que um que só descreve comportamento.\n- **Aponte a seção que você quer.** “Projete só as telas da seção 4” funciona melhor do que pedir para projetar o documento inteiro de uma vez.\n- **Mantenha o documento no projeto.** Ele continua disponível para turnos posteriores, então uma retomada meses depois ainda conta com os requisitos originais.\n\n## Custo\n\nListar e ler documentos é gratuito. Só as telas projetadas a partir deles custam créditos.","text":"Se o raciocínio já existe em um documento, não redigite tudo em um prompt. Passos 1. Abra seu projeto e envie o documento para a área de documentos do projeto (ou anexe no campo de prompt). 2. Peça o que você quer construir a partir dele: Leia o PRD e projete as telas que ele descreve. Comece pelo plano. 3. A IA lista os documentos do projeto, lê o que interessa e o usa como fonte da verdade para telas, conteúdo e terminologia. Documentos aceitos PRDs, briefings de design, especificações e documentos de texto semelhantes. O que importa é o texto ser extraível — a imagem escaneada de um documento é uma foto, não um documento, e deve ser enviada como imagem. Tirar o máximo proveito - Nomeie suas telas no documento. Um PRD com uma lista explícita de telas produz um plano muito melhor do que um que só descreve comportamento. - Aponte a seção que você quer. “Projete só as telas da seção 4” funciona melhor do que pedir para projetar o documento inteiro de uma vez. - Mantenha o documento no projeto. Ele continua disponível para turnos posteriores, então uma retomada meses depois ainda conta com os requisitos originais. Custo Listar e ler documentos é gratuito. Só as telas projetadas a partir deles custam créditos."},{"slug":"wireframe-mode","category":"generate","categoryTitle":"Gerar designs","title":"Modo wireframe","description":"Gere wireframes de baixa fidelidade para fechar a estrutura antes do design visual.","url":"https://uxmagic.ai/pt/help/generate/wireframe-mode","type":"guide","keywords":["wireframe","baixa fidelidade","lo-fi","estrutura","escala de cinza"],"headings":["Por que se dar ao trabalho","Como usar","Do wireframe para a alta fidelidade","Quando pular"],"updated":"2026-08-27","faqs":[],"related":["ways-to-generate-a-screen","sketch-to-ui","flow-mode-and-screen-plans"],"markdown":"O modo wireframe produz telas deliberadamente sóbrias, em escala de cinza: caixas, rótulos e hierarquia, sem marca, sem imagens e sem opiniões de estilo.\n\n## Por que se dar ao trabalho\n\nPorque uma tela bonita encerra a conversa. As pessoas envolvidas reagem à cor em vez do fluxo. Um wireframe mantém a discussão na estrutura, que é onde ela deve estar no começo.\n\n## Como usar\n\nPeça explicitamente:\n\n> Faça o wireframe do fluxo de checkout: carrinho, entrega, pagamento, confirmação.\n\nOu converta uma captura existente em um wireframe limpo:\n\n> Transforme esta captura em um wireframe para podermos reestruturar.\n\n## Do wireframe para a alta fidelidade\n\nUma vez acordada a estrutura, peça à IA que projete a versão de alta fidelidade dos wireframes aprovados. A estrutura é mantida; o tema é aplicado por cima.\n\n## Quando pular\n\nSe você está preparando um conceito para uma apresentação amanhã, vá direto para a alta fidelidade. Wireframes valem a pena quando várias pessoas precisam concordar antes sobre a estrutura.","text":"O modo wireframe produz telas deliberadamente sóbrias, em escala de cinza: caixas, rótulos e hierarquia, sem marca, sem imagens e sem opiniões de estilo. Por que se dar ao trabalho Porque uma tela bonita encerra a conversa. As pessoas envolvidas reagem à cor em vez do fluxo. Um wireframe mantém a discussão na estrutura, que é onde ela deve estar no começo. Como usar Peça explicitamente: Faça o wireframe do fluxo de checkout: carrinho, entrega, pagamento, confirmação. Ou converta uma captura existente em um wireframe limpo: Transforme esta captura em um wireframe para podermos reestruturar. Do wireframe para a alta fidelidade Uma vez acordada a estrutura, peça à IA que projete a versão de alta fidelidade dos wireframes aprovados. A estrutura é mantida; o tema é aplicado por cima. Quando pular Se você está preparando um conceito para uma apresentação amanhã, vá direto para a alta fidelidade. Wireframes valem a pena quando várias pessoas precisam concordar antes sobre a estrutura."},{"slug":"flow-mode-and-screen-plans","category":"generate","categoryTitle":"Gerar designs","title":"Modo fluxo e planos de telas","description":"Gere uma jornada completa de várias telas a partir de um único prompt, e edite o plano antes que nada seja projetado.","url":"https://uxmagic.ai/pt/help/generate/flow-mode-and-screen-plans","type":"guide","keywords":["fluxo","várias telas","jornada do usuário","plano","journey","aprovar plano"],"headings":["O plano de telas","Modo fluxo","Custo","Acrescentar a um fluxo existente"],"updated":"2026-08-27","faqs":[],"related":["text-to-ui","wireframe-mode","how-credits-work"],"markdown":"## O plano de telas\n\nEm um projeto novo, a IA propõe um **plano** — uma lista de telas nomeadas, cada uma com uma linha de propósito — antes de projetar qualquer coisa. Você pode:\n\n- **aprová-lo** como está,\n- **editá-lo**: renomear, reordenar, acrescentar ou remover telas,\n- **rejeitá-lo** e descrever de novo o que você quer.\n\nSó depois da aprovação o design começa.\n\nLeve este passo a sério. Planejar é barato; projetar não. Corrigir aqui uma lista de telas errada custa uma ida e volta. Corrigi-la depois de oito telas prontas custa oito regenerações.\n\n## Modo fluxo\n\nO modo fluxo projeta a jornada inteira de uma vez, com um tema e uma estrutura de navegação em comum entre as telas. Descreva a jornada, não as telas:\n\n> Um app de entrega de comida: explorar restaurantes, detalhe do restaurante, carrinho, pagamento, acompanhamento do pedido.\n\nAs telas são projetadas uma por vez e aparecem no canvas conforme ficam prontas, então você pode começar a revisar antes de a rodada terminar.\n\n## Custo\n\nFluxo e outras operações de várias telas são cobradas **por tela**, então um fluxo de cinco telas custa cinco vezes uma tela sozinha. Os números exatos estão em [Como funcionam os créditos](/help/account-and-billing/how-credits-work). Confira seu saldo antes de disparar um fluxo grande — uma rodada que para no meio deixa você com meio fluxo.\n\n## Acrescentar a um fluxo existente\n\nVocê não precisa planejar tudo de antemão. Peça mais telas depois e elas serão projetadas dentro do tema e da navegação existentes:\n\n> Acrescente uma tela de “esqueci a senha” e um estado vazio para a lista de pedidos.","text":"O plano de telas Em um projeto novo, a IA propõe um plano — uma lista de telas nomeadas, cada uma com uma linha de propósito — antes de projetar qualquer coisa. Você pode: - aprová-lo como está, - editá-lo: renomear, reordenar, acrescentar ou remover telas, - rejeitá-lo e descrever de novo o que você quer. Só depois da aprovação o design começa. Leve este passo a sério. Planejar é barato; projetar não. Corrigir aqui uma lista de telas errada custa uma ida e volta. Corrigi-la depois de oito telas prontas custa oito regenerações. Modo fluxo O modo fluxo projeta a jornada inteira de uma vez, com um tema e uma estrutura de navegação em comum entre as telas. Descreva a jornada, não as telas: Um app de entrega de comida: explorar restaurantes, detalhe do restaurante, carrinho, pagamento, acompanhamento do pedido. As telas são projetadas uma por vez e aparecem no canvas conforme ficam prontas, então você pode começar a revisar antes de a rodada terminar. Custo Fluxo e outras operações de várias telas são cobradas por tela, então um fluxo de cinco telas custa cinco vezes uma tela sozinha. Os números exatos estão em Como funcionam os créditos. Confira seu saldo antes de disparar um fluxo grande — uma rodada que para no meio deixa você com meio fluxo. Acrescentar a um fluxo existente Você não precisa planejar tudo de antemão. Peça mais telas depois e elas serão projetadas dentro do tema e da navegação existentes: Acrescente uma tela de “esqueci a senha” e um estado vazio para a lista de pedidos."},{"slug":"editing-a-screen","category":"design-and-edit","categoryTitle":"Projetar e editar","title":"Editar uma tela","description":"As três formas de mudar um design — chat, modo edição e tema — e quando cada uma é a ferramenta certa.","url":"https://uxmagic.ai/pt/help/design-and-edit/editing-a-screen","type":"guide","keywords":["editar","mudar design","modo edição","modificar","ajustar","atualizar"],"headings":["1. Modo edição — para conteúdo","2. Chat — para estrutura","3. Tema — para tudo que é visual e global","O que não fazer","Versões","Pegadinha do foco do teclado"],"updated":"2026-08-27","faqs":[],"related":["chat-editing","themes-and-style-guides","versions-and-history"],"markdown":"Há três formas de mudar uma tela, e escolher a certa economiza tempo e créditos.\n\n## 1. Modo edição — para conteúdo\n\nClique em uma tela para entrar no modo edição. Ali você pode:\n\n- **Editar texto diretamente.** Clique em um título ou parágrafo e digite.\n- **Trocar imagens.** Substitua uma imagem gerada por um envio seu.\n- **Ajustar propriedades simples** do elemento selecionado.\n\nO modo edição não chama a IA, então é instantâneo e gratuito. Use para textos, nomes, preços e trocas de imagem.\n\n## 2. Chat — para estrutura\n\nTudo o que muda a *forma* da página passa pelo chat:\n\n> Adicione uma seção de depoimentos entre os recursos e os preços.\n> Deixe o hero mais curto e suba o CTA acima da dobra.\n> Transforme os três blocos de recursos em um layout de duas colunas.\n\nEdições direcionadas por chat são muito mais baratas do que regenerar uma tela. Veja [Editar pelo chat](/help/design-and-edit/chat-editing).\n\n## 3. Tema — para tudo que é visual e global\n\nCores, fontes, raios de canto e espaçamentos vivem no tema do projeto. Mude ali e todas as telas se movem juntas. Editar uma cor em uma tela só é exatamente como os projetos ficam incoerentes. Veja [Temas e guias de estilo](/help/design-and-edit/themes-and-style-guides).\n\n## O que não fazer\n\n**Não regenere por uma mudança pequena.** Regenerar está entre as operações mais caras disponíveis e joga fora as partes da tela que já estavam certas. Peça a mudança específica.\n\n## Versões\n\nCada edição da IA cria uma versão nova. Nada é destruído e você sempre pode voltar. Veja [Versões e histórico](/help/design-and-edit/versions-and-history).\n\n## Pegadinha do foco do teclado\n\nSe Delete ou ⌘Z parecerem não fazer nada, clique primeiro em uma área vazia do canvas. Enquanto o cursor está no campo de prompt, essas teclas pertencem ao campo de texto.","text":"Há três formas de mudar uma tela, e escolher a certa economiza tempo e créditos. 1. Modo edição — para conteúdo Clique em uma tela para entrar no modo edição. Ali você pode: - Editar texto diretamente. Clique em um título ou parágrafo e digite. - Trocar imagens. Substitua uma imagem gerada por um envio seu. - Ajustar propriedades simples do elemento selecionado. O modo edição não chama a IA, então é instantâneo e gratuito. Use para textos, nomes, preços e trocas de imagem. 2. Chat — para estrutura Tudo o que muda a forma da página passa pelo chat: Adicione uma seção de depoimentos entre os recursos e os preços. Deixe o hero mais curto e suba o CTA acima da dobra. Transforme os três blocos de recursos em um layout de duas colunas. Edições direcionadas por chat são muito mais baratas do que regenerar uma tela. Veja Editar pelo chat. 3. Tema — para tudo que é visual e global Cores, fontes, raios de canto e espaçamentos vivem no tema do projeto. Mude ali e todas as telas se movem juntas. Editar uma cor em uma tela só é exatamente como os projetos ficam incoerentes. Veja Temas e guias de estilo. O que não fazer Não regenere por uma mudança pequena. Regenerar está entre as operações mais caras disponíveis e joga fora as partes da tela que já estavam certas. Peça a mudança específica. Versões Cada edição da IA cria uma versão nova. Nada é destruído e você sempre pode voltar. Veja Versões e histórico. Pegadinha do foco do teclado Se Delete ou ⌘Z parecerem não fazer nada, clique primeiro em uma área vazia do canvas. Enquanto o cursor está no campo de prompt, essas teclas pertencem ao campo de texto."},{"slug":"chat-editing","category":"design-and-edit","categoryTitle":"Projetar e editar","title":"Editar pelo chat","description":"Como formular pedidos de edição à IA para conseguir a mudança que você queria, nas telas que você queria.","url":"https://uxmagic.ai/pt/help/design-and-edit/chat-editing","type":"guide","keywords":["chat","edição com ia","instruir","pedir para a ia","refinar","iterar"],"headings":["Diga qual tela","Diga o que está errado, não que está errado","Duas ou três mudanças por vez","Aplicar uma mudança em todo lugar","Substituir uma imagem em todo lugar","Recolorir","Quando ela faz o que você não pediu","Fazer perguntas"],"updated":"2026-08-27","faqs":[],"related":["editing-a-screen","writing-a-good-prompt","the-ai-is-not-following-my-brief"],"markdown":"![O painel de chat do agente, listando cada passo dado: analisar o pedido, ler o tema, planejar as telas e depois projetar cada uma.](/help/agent-chat.webp)\n\n## Diga qual tela\n\nSe há várias telas no canvas, nomeie a que você quer, ou selecione antes:\n\n> Na página de preços, deixe o nível do meio em destaque.\n\nSem um alvo, a IA precisa adivinhar, e às vezes vai adivinhar a tela que você olhou por último em vez da que você queria.\n\n## Diga o que está errado, não que está errado\n\n- ❌ “O hero está ruim.”\n- ✅ “O hero está alto demais e o título compete com o subtítulo. Reduza pela metade o preenchimento vertical e baixe um tamanho no subtítulo.”\n\n## Duas ou três mudanças por vez\n\nListas longas interagem de formas difíceis de prever, e se um item sair mal você não sabe qual instrução causou. Lotes pequenos são mais rápidos no total.\n\n## Aplicar uma mudança em todo lugar\n\nDiga explicitamente:\n\n> Em **todas** as telas, mude o CTA da navegação para “Começar grátis”.\n\nOperações para o projeto inteiro existem exatamente para isso. Fazer tela por tela gasta créditos e acaba desviando.\n\n## Substituir uma imagem em todo lugar\n\nTrocar um logotipo ou foto de produto em todas as telas tem um caminho próprio e determinístico — peça para substituir o recurso em todo lugar em vez de editar cada tela:\n\n> Substitua o logotipo em todas as telas pelo que acabei de enviar.\n\nVeja [Imagens nos seus designs](/help/design-and-edit/images-in-your-designs).\n\n## Recolorir\n\nMudanças de cor devem passar pelo tema, não por edições de classe em elementos isolados:\n\n> Deixe a cor principal um azul mais quente.\n\nIsso é uma operação só, é gratuita e move todas as telas de forma coerente. Veja [Temas e guias de estilo](/help/design-and-edit/themes-and-style-guides).\n\n## Quando ela faz o que você não pediu\n\nDiga com clareza e precisão: *“Você mudou a paleta — eu só pedi o botão. Devolva as cores anteriores.”* Se acontecer repetidamente no mesmo briefing, formule a restrição em termos absolutos (“Não mude nenhuma cor”) — e veja [A IA não está seguindo meu briefing](/help/troubleshooting/the-ai-is-not-following-my-brief).\n\n## Fazer perguntas\n\nDe vez em quando a IA vai fazer uma pergunta de múltipla escolha antes de agir, quando há uma ambiguidade real que ela não consegue resolver. Responder sai mais barato do que ver cinco telas construídas sobre uma suposição errada.","text":"Diga qual tela Se há várias telas no canvas, nomeie a que você quer, ou selecione antes: Na página de preços, deixe o nível do meio em destaque. Sem um alvo, a IA precisa adivinhar, e às vezes vai adivinhar a tela que você olhou por último em vez da que você queria. Diga o que está errado, não que está errado - ❌ “O hero está ruim.” - ✅ “O hero está alto demais e o título compete com o subtítulo. Reduza pela metade o preenchimento vertical e baixe um tamanho no subtítulo.” Duas ou três mudanças por vez Listas longas interagem de formas difíceis de prever, e se um item sair mal você não sabe qual instrução causou. Lotes pequenos são mais rápidos no total. Aplicar uma mudança em todo lugar Diga explicitamente: Em todas as telas, mude o CTA da navegação para “Começar grátis”. Operações para o projeto inteiro existem exatamente para isso. Fazer tela por tela gasta créditos e acaba desviando. Substituir uma imagem em todo lugar Trocar um logotipo ou foto de produto em todas as telas tem um caminho próprio e determinístico — peça para substituir o recurso em todo lugar em vez de editar cada tela: Substitua o logotipo em todas as telas pelo que acabei de enviar. Veja Imagens nos seus designs. Recolorir Mudanças de cor devem passar pelo tema, não por edições de classe em elementos isolados: Deixe a cor principal um azul mais quente. Isso é uma operação só, é gratuita e move todas as telas de forma coerente. Veja Temas e guias de estilo. Quando ela faz o que você não pediu Diga com clareza e precisão: “Você mudou a paleta — eu só pedi o botão. Devolva as cores anteriores.” Se acontecer repetidamente no mesmo briefing, formule a restrição em termos absolutos (“Não mude nenhuma cor”) — e veja A IA não está seguindo meu briefing. Fazer perguntas De vez em quando a IA vai fazer uma pergunta de múltipla escolha antes de agir, quando há uma ambiguidade real que ela não consegue resolver. Responder sai mais barato do que ver cinco telas construídas sobre uma suposição errada."},{"slug":"themes-and-style-guides","category":"design-and-edit","categoryTitle":"Projetar e editar","title":"Temas e guias de estilo","description":"Como funciona o tema do projeto, como mudá-lo com segurança, e por que cores nunca devem ser editadas tela por tela.","url":"https://uxmagic.ai/pt/help/design-and-edit/themes-and-style-guides","type":"guide","keywords":["tema","guia de estilo","cores","marca","modo escuro","paleta","tokens"],"headings":["Mudar algumas cores","Construir um visual completamente novo","Limitar uma mudança","O contraste é verificado","Gerar um guia de estilo","Erros comuns"],"updated":"2026-08-27","faqs":[{"question":"Mudar o tema custa créditos?","answer":"Não. Criar ou atualizar um tema é gratuito. Só as telas em si custam créditos para gerar."},{"question":"Uma tela pode ter um tema diferente?","answer":"Sim — peça para limitar a mudança àquela tela. Por padrão, uma mudança de tema vale para o projeto inteiro, que costuma ser o que você quer."}],"related":["fonts-and-typography","editing-a-screen","style-guide-did-not-apply"],"markdown":"Cada projeto tem um **tema**: um conjunto de design tokens para cores, tipografia, raios e espaçamentos. As telas referenciam esses tokens em vez de valores fixos, e é isso que faz vinte telas parecerem um só produto.\n\n## Mudar algumas cores\n\nÉ só pedir:\n\n> Deixe a cor principal #1B4DFF.\n> O fundo está frio demais — deixe mais quente.\n\nIsso mescla uma mudança pequena no tema existente e deixa o resto em paz. É gratuito e vale em todo lugar de uma vez.\n\n## Construir um visual completamente novo\n\nPara uma mudança de raiz — um redesign, mudar para escuro, uma marca nova — peça exatamente isso:\n\n> Dê ao projeto inteiro um tema escuro.\n> Redesenhe isto com nossa marca nova: verde profundo como principal, fundo creme, títulos com serifa.\n\nIsso constrói um conjunto de tokens totalmente novo em vez de remendar o antigo.\n\n## Limitar uma mudança\n\nPor padrão, mudanças de tema valem para o **projeto inteiro**. Para limitar uma a uma única tela, diga:\n\n> Só na landing page, deixe o fundo do cabeçalho preto.\n\n## O contraste é verificado\n\nOs temas são validados por pares de cores legíveis antes de serem aplicados, então você não deveria acabar com texto escuro sobre fundo escuro. Se quiser de propósito um tratamento de baixo contraste, diga — mas espere que o sistema empurre para a legibilidade.\n\n## Gerar um guia de estilo\n\nPeça um guia de estilo e você recebe uma tela renderizada com a paleta, a escala tipográfica e os componentes principais — útil como artefato de entrega e como conferência de que o sistema está coerente.\n\n## Erros comuns\n\n- **Editar uma cor em uma tela só.** Funciona, e aí a próxima tela gerada não combina. Use o tema.\n- **Pedir “modo escuro” estando no modo edição sobre um elemento.** Esse caminho pode fixar cores no código em vez de refazer o tema. Peça no chat, no nível do projeto.\n- **Achar que uma mensagem de sucesso da ferramenta de tema significa que renderizou.** Olhe o canvas. Se as telas não mudaram, veja [Meu guia de estilo não foi aplicado](/help/troubleshooting/style-guide-did-not-apply).","text":"Cada projeto tem um tema: um conjunto de design tokens para cores, tipografia, raios e espaçamentos. As telas referenciam esses tokens em vez de valores fixos, e é isso que faz vinte telas parecerem um só produto. Mudar algumas cores É só pedir: Deixe a cor principal #1B4DFF. O fundo está frio demais — deixe mais quente. Isso mescla uma mudança pequena no tema existente e deixa o resto em paz. É gratuito e vale em todo lugar de uma vez. Construir um visual completamente novo Para uma mudança de raiz — um redesign, mudar para escuro, uma marca nova — peça exatamente isso: Dê ao projeto inteiro um tema escuro. Redesenhe isto com nossa marca nova: verde profundo como principal, fundo creme, títulos com serifa. Isso constrói um conjunto de tokens totalmente novo em vez de remendar o antigo. Limitar uma mudança Por padrão, mudanças de tema valem para o projeto inteiro. Para limitar uma a uma única tela, diga: Só na landing page, deixe o fundo do cabeçalho preto. O contraste é verificado Os temas são validados por pares de cores legíveis antes de serem aplicados, então você não deveria acabar com texto escuro sobre fundo escuro. Se quiser de propósito um tratamento de baixo contraste, diga — mas espere que o sistema empurre para a legibilidade. Gerar um guia de estilo Peça um guia de estilo e você recebe uma tela renderizada com a paleta, a escala tipográfica e os componentes principais — útil como artefato de entrega e como conferência de que o sistema está coerente. Erros comuns - Editar uma cor em uma tela só. Funciona, e aí a próxima tela gerada não combina. Use o tema. - Pedir “modo escuro” estando no modo edição sobre um elemento. Esse caminho pode fixar cores no código em vez de refazer o tema. Peça no chat, no nível do projeto. - Achar que uma mensagem de sucesso da ferramenta de tema significa que renderizou. Olhe o canvas. Se as telas não mudaram, veja Meu guia de estilo não foi aplicado."},{"slug":"fonts-and-typography","category":"design-and-edit","categoryTitle":"Projetar e editar","title":"Fontes e tipografia","description":"Escolher fontes, usar o Google Fonts e o que fazer quando uma mudança de fonte não aparece.","url":"https://uxmagic.ai/pt/help/design-and-edit/fonts-and-typography","type":"howto","keywords":["fonte","tipografia","tipo","google fonts","fonte dos títulos","tamanho do texto"],"headings":["Definir as fontes","A escala tipográfica","Se uma mudança de fonte não aparecer","Fontes próprias e licenciadas"],"updated":"2026-08-27","faqs":[],"related":["themes-and-style-guides","style-guide-did-not-apply"],"markdown":"## Definir as fontes\n\nFontes fazem parte do tema. Peça pelo nome:\n\n> Use Inter no texto corrido e Playfair Display nos títulos.\n\nGoogle Fonts são aceitas pelo nome. Se você citar uma fonte indisponível, receberá a correspondência razoável mais próxima em vez de uma tela quebrada — então, se precisão importa, confirme o que de fato foi aplicado.\n\n## A escala tipográfica\n\nVocê pode guiar a escala com palavras:\n\n> Suba um tamanho nos títulos e aperte a entrelinha.\n> O texto corrido está pequeno demais — suba para 17 px.\n\n## Se uma mudança de fonte não aparecer\n\nÉ uma classe de problema conhecida que vale checar de propósito: o tema pode se atualizar enquanto a folha de estilo que carrega a fonte não. Sintoma: o design *diz* que usa uma fonte que claramente não está renderizando.\n\n1. Recarregue o projeto.\n2. Reaplique a mudança de fonte no chat e observe o canvas, não o resultado da ferramenta.\n3. Se ainda não renderizar, [fale com o suporte](/help/troubleshooting/contact-support) com o link do projeto e o nome da fonte.\n\n## Fontes próprias e licenciadas\n\nFontes auto-hospedadas ou licenciadas não podem ser enviadas hoje. O caminho prático é escolher a Google Font mais próxima enquanto projeta e depois trocar pela sua fonte licenciada após a exportação — no Figma, na sua base de código ou no CSS do site publicado.","text":"Definir as fontes Fontes fazem parte do tema. Peça pelo nome: Use Inter no texto corrido e Playfair Display nos títulos. Google Fonts são aceitas pelo nome. Se você citar uma fonte indisponível, receberá a correspondência razoável mais próxima em vez de uma tela quebrada — então, se precisão importa, confirme o que de fato foi aplicado. A escala tipográfica Você pode guiar a escala com palavras: Suba um tamanho nos títulos e aperte a entrelinha. O texto corrido está pequeno demais — suba para 17 px. Se uma mudança de fonte não aparecer É uma classe de problema conhecida que vale checar de propósito: o tema pode se atualizar enquanto a folha de estilo que carrega a fonte não. Sintoma: o design diz que usa uma fonte que claramente não está renderizando. 1. Recarregue o projeto. 2. Reaplique a mudança de fonte no chat e observe o canvas, não o resultado da ferramenta. 3. Se ainda não renderizar, fale com o suporte com o link do projeto e o nome da fonte. Fontes próprias e licenciadas Fontes auto-hospedadas ou licenciadas não podem ser enviadas hoje. O caminho prático é escolher a Google Font mais próxima enquanto projeta e depois trocar pela sua fonte licenciada após a exportação — no Figma, na sua base de código ou no CSS do site publicado."},{"slug":"images-in-your-designs","category":"design-and-edit","categoryTitle":"Projetar e editar","title":"Imagens nos seus designs","description":"Gerar imagens, editá-las no lugar, enviar as suas e substituir um recurso em todas as telas.","url":"https://uxmagic.ai/pt/help/design-and-edit/images-in-your-designs","type":"guide","keywords":["imagens","gerar imagem","imagem com ia","enviar","logotipo","substituir imagem","fotos"],"headings":["Imagens geradas","Editar uma imagem existente","Enviar as suas","Substituir um recurso em todo lugar","Proporção","Se as imagens estiverem quebradas ou travadas carregando"],"updated":"2026-08-27","faqs":[],"related":["chat-editing","editing-a-screen","images-are-broken-or-missing"],"markdown":"![A página de Recursos, com as imagens e logotipos que um projeto reutiliza.](/help/assets.webp)\n\n## Imagens geradas\n\nQuando um design precisa de imagens, a IA as gera. Você pode guiá-la:\n\n> Regenere a imagem do hero: um escritório aberto ensolarado, plano aberto, tons quentes, sem pessoas.\n\nDescreva o assunto, o cenário, a composição, a iluminação e o clima. Um substantivo solto (“um notebook”) produz um resultado solto.\n\nA geração de imagens é cobrada por imagem, por uma fração do custo de uma tela. Veja [Como funcionam os créditos](/help/account-and-billing/how-credits-work).\n\n## Editar uma imagem existente\n\nVocê pode mudar uma imagem **no lugar**, mantendo todo o resto idêntico pixel a pixel:\n\n> Na imagem do hero, mude o texto da placa para “Ledgerly”.\n> Recolora esta ilustração para combinar com o tema novo.\n\nÉ a ferramenta certa para mudar texto dentro de uma imagem, recolorir, mudar o estilo, ou acrescentar e remover um único elemento. Regenerar do zero mudaria todo o resto também.\n\n## Enviar as suas\n\nEnvie pelo campo de prompt ou pela biblioteca de recursos do projeto e depois referencie:\n\n> Use a foto que acabei de enviar como imagem do hero na landing page.\n\n## Substituir um recurso em todo lugar\n\nPara trocar um logotipo ou foto de produto no projeto inteiro, peça exatamente isso:\n\n> Substitua o logotipo antigo pelo novo em todas as telas.\n\nIsso roda como uma única operação determinística sobre todas as telas em vez de uma edição por tela — é o único jeito confiável de garantir que nenhuma passou batido.\n\n## Proporção\n\nInforme se importar — “hero 16:9”, “avatar quadrado”. Senão você pode receber um formato que não cabe no espaço.\n\n## Se as imagens estiverem quebradas ou travadas carregando\n\nVeja [Imagens quebradas ou faltando](/help/troubleshooting/images-are-broken-or-missing).","text":"Imagens geradas Quando um design precisa de imagens, a IA as gera. Você pode guiá-la: Regenere a imagem do hero: um escritório aberto ensolarado, plano aberto, tons quentes, sem pessoas. Descreva o assunto, o cenário, a composição, a iluminação e o clima. Um substantivo solto (“um notebook”) produz um resultado solto. A geração de imagens é cobrada por imagem, por uma fração do custo de uma tela. Veja Como funcionam os créditos. Editar uma imagem existente Você pode mudar uma imagem no lugar, mantendo todo o resto idêntico pixel a pixel: Na imagem do hero, mude o texto da placa para “Ledgerly”. Recolora esta ilustração para combinar com o tema novo. É a ferramenta certa para mudar texto dentro de uma imagem, recolorir, mudar o estilo, ou acrescentar e remover um único elemento. Regenerar do zero mudaria todo o resto também. Enviar as suas Envie pelo campo de prompt ou pela biblioteca de recursos do projeto e depois referencie: Use a foto que acabei de enviar como imagem do hero na landing page. Substituir um recurso em todo lugar Para trocar um logotipo ou foto de produto no projeto inteiro, peça exatamente isso: Substitua o logotipo antigo pelo novo em todas as telas. Isso roda como uma única operação determinística sobre todas as telas em vez de uma edição por tela — é o único jeito confiável de garantir que nenhuma passou batido. Proporção Informe se importar — “hero 16:9”, “avatar quadrado”. Senão você pode receber um formato que não cabe no espaço. Se as imagens estiverem quebradas ou travadas carregando Veja Imagens quebradas ou faltando."},{"slug":"versions-and-history","category":"design-and-edit","categoryTitle":"Projetar e editar","title":"Versões e histórico","description":"Cada mudança da IA cria uma versão nova. Como comparar, restaurar e manter variantes.","url":"https://uxmagic.ai/pt/help/design-and-edit/versions-and-history","type":"guide","keywords":["versão","histórico","desfazer","restaurar","reverter","anterior","voltar"],"headings":["Como funciona o versionamento","Trocar de versão","Variantes","Desfazer vs versões","Se uma mudança parecer sumir","Duplicar em vez disso"],"updated":"2026-08-27","faqs":[],"related":["editing-a-screen","my-changes-reverted"],"markdown":"## Como funciona o versionamento\n\nCada mudança da IA em uma tela cria uma **versão nova** em vez de sobrescrever a anterior. A tela no canvas mostra a versão ativa; as anteriores continuam disponíveis.\n\nIsso significa que você pode experimentar à vontade. Se uma direção não funcionar, volte uma versão.\n\n## Trocar de versão\n\nAbra a lista de versões de uma tela, escolha uma, e o canvas se atualiza. Trocar é instantâneo e gratuito.\n\n## Variantes\n\nVersões servem também como variantes: peça dois tratamentos da mesma tela e mantenha os dois, alternando entre eles em uma revisão.\n\n## Desfazer vs versões\n\n- **⌘Z / Ctrl+Z** — desfaz ações do canvas (mover, excluir, edições diretas).\n- **Versões** — voltam pelos estados de uma tela gerados pela IA.\n\nSão sistemas separados. Desfazer não vai levar você de volta pelas gerações da IA.\n\n## Se uma mudança parecer sumir\n\nSe uma versão que você selecionou reverte quando você clica fora, isso é um defeito, não um recurso — veja [Minhas mudanças foram revertidas](/help/troubleshooting/my-changes-reverted).\n\n## Duplicar em vez disso\n\nSe quiser explorar uma direção sem mexer no original, duplique a tela antes e experimente na cópia.","text":"Como funciona o versionamento Cada mudança da IA em uma tela cria uma versão nova em vez de sobrescrever a anterior. A tela no canvas mostra a versão ativa; as anteriores continuam disponíveis. Isso significa que você pode experimentar à vontade. Se uma direção não funcionar, volte uma versão. Trocar de versão Abra a lista de versões de uma tela, escolha uma, e o canvas se atualiza. Trocar é instantâneo e gratuito. Variantes Versões servem também como variantes: peça dois tratamentos da mesma tela e mantenha os dois, alternando entre eles em uma revisão. Desfazer vs versões - ⌘Z / Ctrl+Z — desfaz ações do canvas (mover, excluir, edições diretas). - Versões — voltam pelos estados de uma tela gerados pela IA. São sistemas separados. Desfazer não vai levar você de volta pelas gerações da IA. Se uma mudança parecer sumir Se uma versão que você selecionou reverte quando você clica fora, isso é um defeito, não um recurso — veja Minhas mudanças foram revertidas. Duplicar em vez disso Se quiser explorar uma direção sem mexer no original, duplique a tela antes e experimente na cópia."},{"slug":"responsive-variants","category":"design-and-edit","categoryTitle":"Projetar e editar","title":"Variantes responsivas e por dispositivo","description":"Crie versões mobile e desktop de uma tela e mantenha-as em sintonia.","url":"https://uxmagic.ai/pt/help/design-and-edit/responsive-variants","type":"howto","keywords":["responsivo","mobile","desktop","tablet","dispositivo","breakpoint","versão mobile"],"headings":["Criar uma variante","Custo","Manter as variantes em sintonia","O tema é compartilhado","Código exportado"],"updated":"2026-08-27","faqs":[],"related":["editing-a-screen","themes-and-style-guides","export-code"],"markdown":"## Criar uma variante\n\nPeça, ou use o controle de dispositivo na tela:\n\n> Faça uma versão mobile da landing page.\n\nA variante é uma **tela nova** no canvas, adaptada à largura de destino — não é um redimensionamento fluido. Os layouts são de fato reorganizados: seções de várias colunas empilham, a navegação recolhe, a tipografia diminui de escala.\n\n## Custo\n\nConverter uma tela para outro tamanho de dispositivo é cobrado por tela na mesma taxa de uma regeneração, porque é uma. Converter oito telas custa oito vezes isso — vale conferir seu saldo antes.\n\n## Manter as variantes em sintonia\n\nVariantes são telas separadas, então uma edição posterior na versão desktop não desce automaticamente para a mobile. Duas opções:\n\n- Peça a mudança nas duas explicitamente: *“Nas landing pages desktop e mobile, mude o CTA para ‘Começar grátis’.”*\n- Ou termine primeiro o design desktop e gere as variantes de uma vez no fim. Costuma ser a ordem mais barata.\n\n## O tema é compartilhado\n\nAs duas variantes usam o tema do projeto, então mudanças de cor e fonte valem para ambas automaticamente. Só o layout é próprio de cada variante.\n\n## Código exportado\n\nO código exportado reflete a tela exportada. Se você precisa de uma implementação realmente responsiva em vez de dois layouts fixos, exporte a tela desktop e adapte, ou exporte as duas e junte no breakpoint — veja [Exportar código](/help/export-and-handoff/export-code).","text":"Criar uma variante Peça, ou use o controle de dispositivo na tela: Faça uma versão mobile da landing page. A variante é uma tela nova no canvas, adaptada à largura de destino — não é um redimensionamento fluido. Os layouts são de fato reorganizados: seções de várias colunas empilham, a navegação recolhe, a tipografia diminui de escala. Custo Converter uma tela para outro tamanho de dispositivo é cobrado por tela na mesma taxa de uma regeneração, porque é uma. Converter oito telas custa oito vezes isso — vale conferir seu saldo antes. Manter as variantes em sintonia Variantes são telas separadas, então uma edição posterior na versão desktop não desce automaticamente para a mobile. Duas opções: - Peça a mudança nas duas explicitamente: “Nas landing pages desktop e mobile, mude o CTA para ‘Começar grátis’.” - Ou termine primeiro o design desktop e gere as variantes de uma vez no fim. Costuma ser a ordem mais barata. O tema é compartilhado As duas variantes usam o tema do projeto, então mudanças de cor e fonte valem para ambas automaticamente. Só o layout é próprio de cada variante. Código exportado O código exportado reflete a tela exportada. Se você precisa de uma implementação realmente responsiva em vez de dois layouts fixos, exporte a tela desktop e adapte, ou exporte as duas e junte no breakpoint — veja Exportar código."},{"slug":"component-libraries","category":"design-and-edit","categoryTitle":"Projetar e editar","title":"Bibliotecas de componentes e sistemas de design","description":"Use as bibliotecas integradas de Figma e React, ou traga seus próprios componentes para um projeto.","url":"https://uxmagic.ai/pt/help/design-and-edit/component-libraries","type":"guide","keywords":["componentes","sistema de design","biblioteca","componentes react","componentes figma","reutilizar"],"headings":["Bibliotecas integradas","Trazer seu próprio sistema de design","Manter as telas geradas dentro do sistema","No Enterprise"],"updated":"2026-08-27","faqs":[],"related":["import-from-figma","themes-and-style-guides","export-code"],"markdown":"![A biblioteca integrada de componentes do Figma, mostrando categorias de componentes prontos.](/help/figma-library.webp)\n\n## Bibliotecas integradas\n\nA UXMagic traz duas bibliotecas navegáveis das quais você pode puxar enquanto projeta:\n\n- **[Biblioteca de componentes do Figma](/figma-component-library)** — componentes prontos para soltar em um arquivo do Figma.\n- **[Biblioteca de componentes React](/react-component-library)** — componentes de código seguindo os mesmos padrões.\n\nAs duas são organizadas por categoria, e cada componente tem variantes.\n\n## Trazer seu próprio sistema de design\n\nImporte seus componentes do Figma ou seu sistema de design para um projeto, para que as telas geradas usem *seus* componentes em vez de genéricos. Veja [Importar do Figma](/help/generate/import-from-figma).\n\nDepois de importados, mencione-os pelo nome:\n\n> Use nossos componentes Button e Card para os níveis de preço.\n\n## Manter as telas geradas dentro do sistema\n\nDuas coisas fazem quase todo o trabalho:\n\n1. **Um tema que combine com a sua marca**, para que cores e tipografia estejam certas por padrão. Veja [Temas e guias de estilo](/help/design-and-edit/themes-and-style-guides).\n2. **Instruções explícitas** quando a IA começa a improvisar: *“Use apenas componentes da nossa biblioteca importada.”*\n\n## No Enterprise\n\nPlanos Enterprise incluem um sistema de design e uma biblioteca de componentes compartilhados no time, para que as telas geradas por todos partam dos mesmos componentes.","text":"Bibliotecas integradas A UXMagic traz duas bibliotecas navegáveis das quais você pode puxar enquanto projeta: - Biblioteca de componentes do Figma — componentes prontos para soltar em um arquivo do Figma. - Biblioteca de componentes React — componentes de código seguindo os mesmos padrões. As duas são organizadas por categoria, e cada componente tem variantes. Trazer seu próprio sistema de design Importe seus componentes do Figma ou seu sistema de design para um projeto, para que as telas geradas usem seus componentes em vez de genéricos. Veja Importar do Figma. Depois de importados, mencione-os pelo nome: Use nossos componentes Button e Card para os níveis de preço. Manter as telas geradas dentro do sistema Duas coisas fazem quase todo o trabalho: 1. Um tema que combine com a sua marca, para que cores e tipografia estejam certas por padrão. Veja Temas e guias de estilo. 2. Instruções explícitas quando a IA começa a improvisar: “Use apenas componentes da nossa biblioteca importada.” No Enterprise Planos Enterprise incluem um sistema de design e uma biblioteca de componentes compartilhados no time, para que as telas geradas por todos partam dos mesmos componentes."},{"slug":"export-to-figma","category":"export-and-handoff","categoryTitle":"Exportar e entregar","title":"Exportar para o Figma","description":"Envie telas para o Figma como frames editáveis, com auto layout e prontos para desenvolvimento.","url":"https://uxmagic.ai/pt/help/export-and-handoff/export-to-figma","type":"howto","keywords":["exportar figma","exportar para o figma","auto layout","entrega","designer"],"headings":["Passos","O que você recebe","Cota de exportação","Conseguir o resultado mais limpo","Ida e volta","Se a exportação falhar"],"updated":"2026-08-27","faqs":[{"question":"O arquivo do Figma exportado é editável?","answer":"Sim. Você recebe camadas reais do Figma com auto layout, texto editável e preenchimentos de verdade — não uma imagem achatada."},{"question":"Quantas exportações para o Figma eu tenho?","answer":"O plano Free inclui um número fixo pequeno; planos pagos incluem uma cota mensal bem maior. As exportações restantes aparecem na sua conta."}],"related":["figma-plugin","import-from-figma","export-code","figma-export-failed"],"markdown":"A exportação para o Figma produz **frames reais e editáveis do Figma** — estrutura de auto layout, camadas de texto vivas, preenchimentos e efeitos de verdade — não uma captura achatada.\n\n![O menu de Exportação em massa aberto sobre um projeto da UXMagic, oferecendo exportar as telas selecionadas.](/help/export-menu.webp)\n\n## Passos\n\n1. Selecione a tela (ou telas) que quer exportar.\n2. Escolha **Exportar → Figma**.\n3. Siga a entrega para o Figma: pela conta do Figma conectada, ou pelo [plugin do Figma da UXMagic](/help/integrations/figma-plugin).\n\n## O que você recebe\n\n- **Frames com auto layout** que respondem corretamente ao redimensionar.\n- **Camadas de texto editáveis** com seus estilos tipográficos.\n- **Preenchimentos, gradientes e sombras de verdade.**\n- **Imagens** trazidas como preenchimentos.\n- **Camadas nomeadas** agrupadas por seção, para que o arquivo seja navegável e não uma sopa de retângulos.\n\n## Cota de exportação\n\nAs exportações para o Figma são contadas. O plano Free inclui um número fixo pequeno; planos pagos incluem uma cota mensal ampla. Você vê quanto resta na sua conta. Veja [Planos e limites](/help/account-and-billing/plans-and-limits).\n\n## Conseguir o resultado mais limpo\n\n- **Feche o tema primeiro.** Exportar, reestilizar no Figma e reexportar significa fazer o trabalho no Figma duas vezes.\n- **Exporte o fluxo junto** em vez de tela por tela, para que os frames caiam lado a lado em um único arquivo.\n- **Nomeie suas telas** antes de exportar — nomes são mantidos, e trabalhar depois com frames sem nome é sofrido.\n\n## Ida e volta\n\nVocê também pode ir no sentido contrário e trazer frames do Figma de volta — veja [Importar do Figma](/help/generate/import-from-figma). Um fluxo comum: gerar na UXMagic → exportar para o Figma → alguém de design refina → importar de volta para continuar iterando com IA.\n\n## Se a exportação falhar\n\nVeja [Minha exportação para o Figma falhou](/help/troubleshooting/figma-export-failed).","text":"A exportação para o Figma produz frames reais e editáveis do Figma — estrutura de auto layout, camadas de texto vivas, preenchimentos e efeitos de verdade — não uma captura achatada. Passos 1. Selecione a tela (ou telas) que quer exportar. 2. Escolha Exportar → Figma. 3. Siga a entrega para o Figma: pela conta do Figma conectada, ou pelo plugin do Figma da UXMagic. O que você recebe - Frames com auto layout que respondem corretamente ao redimensionar. - Camadas de texto editáveis com seus estilos tipográficos. - Preenchimentos, gradientes e sombras de verdade. - Imagens trazidas como preenchimentos. - Camadas nomeadas agrupadas por seção, para que o arquivo seja navegável e não uma sopa de retângulos. Cota de exportação As exportações para o Figma são contadas. O plano Free inclui um número fixo pequeno; planos pagos incluem uma cota mensal ampla. Você vê quanto resta na sua conta. Veja Planos e limites. Conseguir o resultado mais limpo - Feche o tema primeiro. Exportar, reestilizar no Figma e reexportar significa fazer o trabalho no Figma duas vezes. - Exporte o fluxo junto em vez de tela por tela, para que os frames caiam lado a lado em um único arquivo. - Nomeie suas telas antes de exportar — nomes são mantidos, e trabalhar depois com frames sem nome é sofrido. Ida e volta Você também pode ir no sentido contrário e trazer frames do Figma de volta — veja Importar do Figma. Um fluxo comum: gerar na UXMagic → exportar para o Figma → alguém de design refina → importar de volta para continuar iterando com IA. Se a exportação falhar Veja Minha exportação para o Figma falhou."},{"slug":"export-code","category":"export-and-handoff","categoryTitle":"Exportar e entregar","title":"Exportar código (HTML, React, Tailwind)","description":"Exporte uma tela sozinha ou um projeto inteiro como código de front-end pronto para produção.","url":"https://uxmagic.ai/pt/help/export-and-handoff/export-code","type":"howto","keywords":["exportar código","react","html","tailwind","desenvolvedor","baixar código","jsx"],"headings":["O que você pode exportar","Exportar uma tela","Exportar um projeto inteiro","Como é o código","Responsivo","Direto para um repositório"],"updated":"2026-08-27","faqs":[],"related":["github-sync","export-to-figma","component-libraries"],"markdown":"![A biblioteca de componentes React, com componentes prontos para copiar em uma base de código.](/help/react-library.webp)\n\n## O que você pode exportar\n\n- **Uma tela sozinha** como HTML ou como componente React.\n- **Um projeto inteiro** como projeto React com várias telas, montado e baixável como arquivo compactado.\n\nO estilo é Tailwind CSS, com o tema do seu projeto expresso como design tokens, então o código carrega o mesmo sistema do canvas.\n\n## Exportar uma tela\n\n1. Selecione a tela.\n2. **Exportar → Código**.\n3. Escolha HTML ou React.\n4. Copie ou baixe.\n\n## Exportar um projeto inteiro\n\nA exportação de projeto roda como uma tarefa em segundo plano — gera todas as telas e depois as monta em uma estrutura de projeto. Projetos maiores demoram mais; você acompanha o progresso e baixa quando terminar.\n\n## Como é o código\n\nÉ código de front-end real e legível: marcação semântica, classes utilitárias do Tailwind, tokens de tema para cores e tipografia, e imagens referenciadas por URL no armazenamento de recursos do seu projeto.\n\nDuas coisas para prever:\n\n- **Os recursos são remotos por padrão.** Baixe-os para o seu repositório antes de publicar, para que o seu site em produção não dependa das URLs de recursos da UXMagic.\n- **É um front-end.** Não há camada de dados, roteamento nem gerenciamento de estado — você liga isso na sua aplicação.\n\n## Responsivo\n\nO código exportado reflete a tela exportada, naquela largura. Se você gerou variantes mobile e desktop separadas, exporte as duas e junte no seu breakpoint. Veja [Variantes responsivas e por dispositivo](/help/design-and-edit/responsive-variants).\n\n## Direto para um repositório\n\nVocê pode enviar o código exportado direto para o GitHub em vez de baixar — veja [Sincronização com o GitHub](/help/integrations/github-sync).","text":"O que você pode exportar - Uma tela sozinha como HTML ou como componente React. - Um projeto inteiro como projeto React com várias telas, montado e baixável como arquivo compactado. O estilo é Tailwind CSS, com o tema do seu projeto expresso como design tokens, então o código carrega o mesmo sistema do canvas. Exportar uma tela 1. Selecione a tela. 2. Exportar → Código. 3. Escolha HTML ou React. 4. Copie ou baixe. Exportar um projeto inteiro A exportação de projeto roda como uma tarefa em segundo plano — gera todas as telas e depois as monta em uma estrutura de projeto. Projetos maiores demoram mais; você acompanha o progresso e baixa quando terminar. Como é o código É código de front-end real e legível: marcação semântica, classes utilitárias do Tailwind, tokens de tema para cores e tipografia, e imagens referenciadas por URL no armazenamento de recursos do seu projeto. Duas coisas para prever: - Os recursos são remotos por padrão. Baixe-os para o seu repositório antes de publicar, para que o seu site em produção não dependa das URLs de recursos da UXMagic. - É um front-end. Não há camada de dados, roteamento nem gerenciamento de estado — você liga isso na sua aplicação. Responsivo O código exportado reflete a tela exportada, naquela largura. Se você gerou variantes mobile e desktop separadas, exporte as duas e junte no seu breakpoint. Veja Variantes responsivas e por dispositivo. Direto para um repositório Você pode enviar o código exportado direto para o GitHub em vez de baixar — veja Sincronização com o GitHub."},{"slug":"export-to-framer-and-webflow","category":"export-and-handoff","categoryTitle":"Exportar e entregar","title":"Exportar para Framer e Webflow","description":"Copie uma tela para o Framer ou Webflow com uma colagem, preservando estrutura e estilo.","url":"https://uxmagic.ai/pt/help/export-and-handoff/export-to-framer-and-webflow","type":"howto","keywords":["framer","webflow","no code","colar","área de transferência","exportar framer"],"headings":["Framer","Webflow","O que conferir depois de colar","Quando usar isto em vez de exportar código"],"updated":"2026-08-27","faqs":[],"related":["export-code","wordpress-publish","publish-your-first-site"],"markdown":"As exportações para Framer e Webflow funcionam pela área de transferência: a UXMagic produz o conteúdo que cada ferramenta entende e você cola no canvas dela.\n\n## Framer\n\n1. Selecione a tela.\n2. **Exportar → Framer.**\n3. Copie o conteúdo gerado.\n4. Abra seu projeto no Framer e cole no canvas.\n\nEstrutura de layout, texto e estilo chegam como camadas nativas do Framer, que você pode continuar editando.\n\n## Webflow\n\n1. Selecione a tela.\n2. **Exportar → Webflow.**\n3. Copie o conteúdo gerado.\n4. No Webflow Designer, cole no canvas.\n\nVocê recebe elementos reais do Webflow com classes, não um bloco de embed.\n\n## O que conferir depois de colar\n\n- **Fontes** — confirme que as fontes usadas estão disponíveis no projeto de destino.\n- **Imagens** — chegam por URL; envie-as ao gerenciador de recursos do destino antes de publicar.\n- **Interações** — animações e interações são configuradas no Framer ou no Webflow, não são transferidas.\n\n## Quando usar isto em vez de exportar código\n\nSe o site será mantido por um time que vive no Framer ou no Webflow, cole ali. Se a engenharia é dona dele, [exporte código](/help/export-and-handoff/export-code).","text":"As exportações para Framer e Webflow funcionam pela área de transferência: a UXMagic produz o conteúdo que cada ferramenta entende e você cola no canvas dela. Framer 1. Selecione a tela. 2. Exportar → Framer. 3. Copie o conteúdo gerado. 4. Abra seu projeto no Framer e cole no canvas. Estrutura de layout, texto e estilo chegam como camadas nativas do Framer, que você pode continuar editando. Webflow 1. Selecione a tela. 2. Exportar → Webflow. 3. Copie o conteúdo gerado. 4. No Webflow Designer, cole no canvas. Você recebe elementos reais do Webflow com classes, não um bloco de embed. O que conferir depois de colar - Fontes — confirme que as fontes usadas estão disponíveis no projeto de destino. - Imagens — chegam por URL; envie-as ao gerenciador de recursos do destino antes de publicar. - Interações — animações e interações são configuradas no Framer ou no Webflow, não são transferidas. Quando usar isto em vez de exportar código Se o site será mantido por um time que vive no Framer ou no Webflow, cole ali. Se a engenharia é dona dele, exporte código."},{"slug":"wordpress-publish","category":"export-and-handoff","categoryTitle":"Exportar e entregar","title":"Levar um design para o WordPress","description":"Conecte um site WordPress e publique nele as telas geradas como páginas.","url":"https://uxmagic.ai/pt/help/export-and-handoff/wordpress-publish","type":"howto","keywords":["wordpress","wp","publicar página","cms","senha de aplicativo"],"headings":["Conectar seu site","Publicar uma tela","Coisas para saber","Solução de problemas"],"updated":"2026-08-27","faqs":[],"related":["publish-your-first-site","export-to-framer-and-webflow","export-code"],"markdown":"## Conectar seu site\n\nDuas formas em **Integrações → WordPress**:\n\n- **Senha de aplicativo** — crie uma no seu perfil de usuário do WordPress e cole junto com a URL do site. Nada para instalar.\n- **Plugin da UXMagic** — instale o plugin no seu site e conclua a conexão. Um pouco mais de configuração, mais fluido depois.\n\n## Publicar uma tela\n\n1. Selecione a tela.\n2. **Exportar → WordPress.**\n3. Escolha criar uma página nova ou substituir uma existente.\n4. Envie.\n\nVocê também pode enviar várias telas de uma vez para criar várias páginas em uma passagem.\n\n## Coisas para saber\n\n- As páginas são criadas na sua instalação do WordPress como páginas normais — você pode editá-las lá depois.\n- O cabeçalho e o rodapé do seu **tema** podem envolver o conteúdo enviado. Pré-visualize antes de publicar e use um modelo de página de largura total ou em branco se quiser que o design ocupe toda a janela.\n- As **imagens** são transferidas para a biblioteca de mídia do WordPress.\n\n## Solução de problemas\n\n- **Conexão recusada** — confira se a URL do site inclui o protocolo e se a REST API não está bloqueada por um plugin de segurança.\n- **Senha de aplicativo recusada** — elas são geradas por usuário no WordPress; copie inteira, com os espaços.\n- **O conteúdo aparece sem estilo** — um plugin ou o tema está removendo os estilos inline. A conexão por plugin costuma lidar melhor com isso do que a via da senha de aplicativo.","text":"Conectar seu site Duas formas em Integrações → WordPress: - Senha de aplicativo — crie uma no seu perfil de usuário do WordPress e cole junto com a URL do site. Nada para instalar. - Plugin da UXMagic — instale o plugin no seu site e conclua a conexão. Um pouco mais de configuração, mais fluido depois. Publicar uma tela 1. Selecione a tela. 2. Exportar → WordPress. 3. Escolha criar uma página nova ou substituir uma existente. 4. Envie. Você também pode enviar várias telas de uma vez para criar várias páginas em uma passagem. Coisas para saber - As páginas são criadas na sua instalação do WordPress como páginas normais — você pode editá-las lá depois. - O cabeçalho e o rodapé do seu tema podem envolver o conteúdo enviado. Pré-visualize antes de publicar e use um modelo de página de largura total ou em branco se quiser que o design ocupe toda a janela. - As imagens são transferidas para a biblioteca de mídia do WordPress. Solução de problemas - Conexão recusada — confira se a URL do site inclui o protocolo e se a REST API não está bloqueada por um plugin de segurança. - Senha de aplicativo recusada — elas são geradas por usuário no WordPress; copie inteira, com os espaços. - O conteúdo aparece sem estilo — um plugin ou o tema está removendo os estilos inline. A conexão por plugin costuma lidar melhor com isso do que a via da senha de aplicativo."},{"slug":"export-pdf-and-images","category":"export-and-handoff","categoryTitle":"Exportar e entregar","title":"Exportar como PDF ou imagem","description":"Gere um PDF, PNG, JPEG ou WebP de uma tela para apresentações, revisão e aprovação.","url":"https://uxmagic.ai/pt/help/export-and-handoff/export-pdf-and-images","type":"howto","keywords":["pdf","png","jpeg","webp","baixar imagem","imprimir","apresentação","deck"],"headings":["Formatos","Passos","Dicas"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","share-a-project"],"markdown":"Para apresentações, pacotes de revisão e aprovações, exporte uma tela como documento ou imagem.\n\n## Formatos\n\n- **PDF** — tamanhos de papel (A4, A3, Carta, Ofício, Tabloide), ou uma página única renderizada em uma largura exata em pixels, para que um design alto não seja cortado entre páginas.\n- **PNG** — sem perdas, melhor para capturas de interface.\n- **JPEG** — mais leve, com qualidade ajustável, melhor para designs com muitas fotos.\n- **WebP** — o mais leve para a mesma qualidade, para a web.\n\n## Passos\n\n1. Selecione a tela.\n2. **Exportar → PDF / Imagem.**\n3. Escolha o formato e as opções (tamanho de papel ou largura exata, e qualidade para JPEG).\n4. Exportações grandes rodam como tarefa em segundo plano — você recebe o arquivo quando a renderização terminar.\n\n## Dicas\n\n- Para uma **landing page alta**, use o modo PDF de largura exata em vez de A4. Ele renderiza uma página contínua em vez de fatiar o design em pedaços.\n- Para **revisão com cliente**, um link compartilhado é melhor que um PDF: fica sempre atualizado e as pessoas podem comentar. Veja [Compartilhar um projeto](/help/collaborate/share-a-project).","text":"Para apresentações, pacotes de revisão e aprovações, exporte uma tela como documento ou imagem. Formatos - PDF — tamanhos de papel (A4, A3, Carta, Ofício, Tabloide), ou uma página única renderizada em uma largura exata em pixels, para que um design alto não seja cortado entre páginas. - PNG — sem perdas, melhor para capturas de interface. - JPEG — mais leve, com qualidade ajustável, melhor para designs com muitas fotos. - WebP — o mais leve para a mesma qualidade, para a web. Passos 1. Selecione a tela. 2. Exportar → PDF / Imagem. 3. Escolha o formato e as opções (tamanho de papel ou largura exata, e qualidade para JPEG). 4. Exportações grandes rodam como tarefa em segundo plano — você recebe o arquivo quando a renderização terminar. Dicas - Para uma landing page alta, use o modo PDF de largura exata em vez de A4. Ele renderiza uma página contínua em vez de fatiar o design em pedaços. - Para revisão com cliente, um link compartilhado é melhor que um PDF: fica sempre atualizado e as pessoas podem comentar. Veja Compartilhar um projeto."},{"slug":"export-to-canva","category":"export-and-handoff","categoryTitle":"Exportar e entregar","title":"Exportar para o Canva","description":"Leve um design da UXMagic para o Canva para trabalho de marketing e redes sociais.","url":"https://uxmagic.ai/pt/help/export-and-handoff/export-to-canva","type":"howto","keywords":["canva","redes sociais","marketing","artes"],"headings":["Passos","Quando usar"],"updated":"2026-08-27","faqs":[],"related":["export-pdf-and-images","export-to-figma"],"markdown":"O Canva é suportado para o lado de marketing do fluxo de trabalho — transformar uma tela projetada em peças que o time de marketing possa adaptar.\n\n## Passos\n\n1. Conecte o Canva em **Integrações**.\n2. Selecione o design que quer levar.\n3. **Exportar → Canva**, e depois abra no Canva para continuar editando.\n\n## Quando usar\n\nUse o Canva para recortes de redes sociais, anúncios e material de marketing pontual. Para qualquer coisa que alguém de design ou engenharia vá retomar, use [Figma](/help/export-and-handoff/export-to-figma) ou [código](/help/export-and-handoff/export-code) — esses preservam a estrutura, o Canva preserva a aparência.","text":"O Canva é suportado para o lado de marketing do fluxo de trabalho — transformar uma tela projetada em peças que o time de marketing possa adaptar. Passos 1. Conecte o Canva em Integrações. 2. Selecione o design que quer levar. 3. Exportar → Canva, e depois abra no Canva para continuar editando. Quando usar Use o Canva para recortes de redes sociais, anúncios e material de marketing pontual. Para qualquer coisa que alguém de design ou engenharia vá retomar, use Figma ou código — esses preservam a estrutura, o Canva preserva a aparência."},{"slug":"publish-your-first-site","category":"publish","categoryTitle":"Publicar um site no ar","title":"Publique seu primeiro site","description":"Coloque um projeto no ar em um subdomínio uxmagic.io em poucos minutos.","url":"https://uxmagic.ai/pt/help/publish/publish-your-first-site","type":"howto","keywords":["publicar","colocar no ar","site","publicação","hospedagem","lançar"],"headings":["Passos","O que você recebe","Recursos de planos pagos","Atualizar um site publicado","Seu próprio domínio"],"updated":"2026-08-27","faqs":[{"question":"A hospedagem está incluída?","answer":"Sim. Sites publicados são hospedados pela UXMagic em um subdomínio uxmagic.io, com HTTPS, sem custo extra além do seu plano."},{"question":"Posso publicar no plano Free?","answer":"Sim, dentro do limite de sites publicados do seu plano. Remover o selo da UX Magic e proteger um site com senha exigem um plano pago."}],"related":["subdomains-and-urls","custom-domains","redeploy-and-rollback"],"markdown":"Publicar transforma as telas de um projeto em um site de verdade e hospedado, com HTTPS.\n\n## Passos\n\n1. Abra o projeto e clique em **Publicar**.\n2. **Escolha quais telas** viram páginas e defina a página inicial. As telas que ficarem de fora continuam no projeto, mas não fazem parte do site.\n3. **Escolha um subdomínio.** Você vai receber `seu-nome.uxmagic.io`. A disponibilidade é checada conforme você digita. Veja [Subdomínios e URLs](/help/publish/subdomains-and-urls).\n4. **Rode a verificação prévia.** Ela sinaliza problemas que dariam um site ruim no ar — links faltando, páginas vazias, conteúdo de preenchimento.\n5. **Publique.** A compilação roda em segundo plano; você recebe a URL no ar quando terminar.\n\n## O que você recebe\n\n- Um site hospedado em `*.uxmagic.io` com HTTPS automático.\n- Uma **URL de pré-visualização por publicação**, para revisar uma compilação antes de apontar alguém para ela.\n- **Histórico de publicações** com reversão em um clique.\n\n## Recursos de planos pagos\n\n- **Remover o selo da UX Magic** exige um plano pago.\n- **Sites privados e protegidos por senha** exigem um plano pago.\n- Os **limites de sites publicados** variam por plano — veja [Planos e limites](/help/account-and-billing/plans-and-limits).\n\n## Atualizar um site publicado\n\nEditar telas não muda o site no ar. Publique de novo para levar suas mudanças. Veja [Republicar e reverter](/help/publish/redeploy-and-rollback).\n\n## Seu próprio domínio\n\nSites publicados podem migrar para o seu próprio domínio — veja [Domínios próprios](/help/publish/custom-domains).","text":"Publicar transforma as telas de um projeto em um site de verdade e hospedado, com HTTPS. Passos 1. Abra o projeto e clique em Publicar. 2. Escolha quais telas viram páginas e defina a página inicial. As telas que ficarem de fora continuam no projeto, mas não fazem parte do site. 3. Escolha um subdomínio. Você vai receber seu-nome.uxmagic.io. A disponibilidade é checada conforme você digita. Veja Subdomínios e URLs. 4. Rode a verificação prévia. Ela sinaliza problemas que dariam um site ruim no ar — links faltando, páginas vazias, conteúdo de preenchimento. 5. Publique. A compilação roda em segundo plano; você recebe a URL no ar quando terminar. O que você recebe - Um site hospedado em .uxmagic.io com HTTPS automático. - Uma URL de pré-visualização por publicação, para revisar uma compilação antes de apontar alguém para ela. - Histórico de publicações com reversão em um clique. Recursos de planos pagos - Remover o selo da UX Magic exige um plano pago. - Sites privados e protegidos por senha exigem um plano pago. - Os limites de sites publicados variam por plano — veja Planos e limites. Atualizar um site publicado Editar telas não muda o site no ar. Publique de novo para levar suas mudanças. Veja Republicar e reverter. Seu próprio domínio Sites publicados podem migrar para o seu próprio domínio — veja Domínios próprios."},{"slug":"subdomains-and-urls","category":"publish","categoryTitle":"Publicar um site no ar","title":"Subdomínios, URLs de páginas e pré-visualizações","description":"Escolher um subdomínio, como os caminhos de página são derivados e para que serve a URL de pré-visualização.","url":"https://uxmagic.ai/pt/help/publish/subdomains-and-urls","type":"reference","keywords":["subdomínio","url","slug","link de pré-visualização","reservado","endereço"],"headings":["Regras de subdomínio","URLs das páginas","URLs de pré-visualização","Mudar seu subdomínio","HTTPS"],"updated":"2026-08-27","faqs":[],"related":["publish-your-first-site","custom-domains","redeploy-and-rollback"],"markdown":"## Regras de subdomínio\n\nSeu site fica em `<subdominio>.uxmagic.io`.\n\n- Entre **3 e 63 caracteres**.\n- Apenas **letras, números e hífens**; sem hífen no início ou no fim.\n- **Não diferencia maiúsculas** — tudo é normalizado para minúsculas.\n- Precisa ser **único** entre todos os sites da UXMagic.\n- Alguns nomes são **reservados** (nomes de sistema e infraestrutura). Nomes reservados são recusados, e a UXMagic também não sugere uma variante próxima — uma sugestão que você não pode de fato reivindicar é pior que nenhuma sugestão.\n\nSe sua primeira escolha estiver ocupada, alternativas são sugeridas conforme você digita, e só as que estão realmente disponíveis.\n\n## URLs das páginas\n\nA página inicial escolhida é servida em `/`. Cada outra tela publicada vira um caminho derivado do nome dela — então nomeie suas telas antes de publicar. “Preços” vira `/precos`; “Tela 4” vira `/tela-4`, que não é o que você quer em um link compartilhado.\n\n## URLs de pré-visualização\n\nCada publicação ganha seu próprio host de pré-visualização, separado do site no ar. Use para conferir uma compilação antes que ela vire a versão que todos veem, e para compartilhar uma mudança proposta sem tocar na produção.\n\n## Mudar seu subdomínio\n\nVocê pode mudar depois. O endereço antigo deixa de funcionar, então atualize os links que já compartilhou.\n\n## HTTPS\n\nOs certificados são cuidados por nós, tanto em `*.uxmagic.io` quanto em domínios próprios conectados. Não há nada para configurar nem para renovar.","text":"Regras de subdomínio Seu site fica em <subdominio>.uxmagic.io. - Entre 3 e 63 caracteres. - Apenas letras, números e hífens; sem hífen no início ou no fim. - Não diferencia maiúsculas — tudo é normalizado para minúsculas. - Precisa ser único entre todos os sites da UXMagic. - Alguns nomes são reservados (nomes de sistema e infraestrutura). Nomes reservados são recusados, e a UXMagic também não sugere uma variante próxima — uma sugestão que você não pode de fato reivindicar é pior que nenhuma sugestão. Se sua primeira escolha estiver ocupada, alternativas são sugeridas conforme você digita, e só as que estão realmente disponíveis. URLs das páginas A página inicial escolhida é servida em /. Cada outra tela publicada vira um caminho derivado do nome dela — então nomeie suas telas antes de publicar. “Preços” vira /precos; “Tela 4” vira /tela-4, que não é o que você quer em um link compartilhado. URLs de pré-visualização Cada publicação ganha seu próprio host de pré-visualização, separado do site no ar. Use para conferir uma compilação antes que ela vire a versão que todos veem, e para compartilhar uma mudança proposta sem tocar na produção. Mudar seu subdomínio Você pode mudar depois. O endereço antigo deixa de funcionar, então atualize os links que já compartilhou. HTTPS Os certificados são cuidados por nós, tanto em .uxmagic.io quanto em domínios próprios conectados. Não há nada para configurar nem para renovar."},{"slug":"custom-domains","category":"publish","categoryTitle":"Publicar um site no ar","title":"Domínios próprios","description":"Servir um site publicado a partir do seu próprio domínio, e como solicitar.","url":"https://uxmagic.ai/pt/help/publish/custom-domains","type":"howto","keywords":["domínio próprio","domínio personalizado","dns","cname","nome de domínio","marca"],"headings":["Como funciona hoje","Solicitar um domínio","O que você vai precisar","Apex vs www","HTTPS","Prazos"],"updated":"2026-08-27","faqs":[],"related":["subdomains-and-urls","publish-your-first-site","plans-and-limits"],"markdown":"## Como funciona hoje\n\nDomínios próprios estão disponíveis para planos pagos e são configurados **sob solicitação**, não em self-service. É de propósito: apontar um domínio real para um host novo é o passo em que um erro sem supervisão tira um site do ar, então uma pessoa confere isso com você.\n\n## Solicitar um domínio\n\n1. Abra as **configurações de publicação** do seu site publicado.\n2. Escolha **Usar um domínio próprio**.\n3. Informe o domínio que quer usar (por exemplo `www.suaempresa.com.br`) e envie a solicitação.\n4. O time retorna com os registros DNS exatos a acrescentar e confirma quando o domínio estiver no ar.\n\nVocê acompanha o status da solicitação no mesmo lugar.\n\n## O que você vai precisar\n\n- **Um domínio que você controla**, com acesso às configurações de DNS.\n- **A possibilidade de adicionar um CNAME** (ou um registro A/ALIAS para um domínio apex).\n\n## Apex vs www\n\nOs dois funcionam. `www.suaempresa.com.br` é o caso mais simples — um CNAME comum. Um domínio apex (`suaempresa.com.br`, sem www) precisa de um provedor que aceite achatamento ALIAS/ANAME; a maioria dos registradores modernos aceita, e as instruções vão cobrir o seu provedor.\n\n## HTTPS\n\nOs certificados são emitidos e renovados automaticamente assim que o domínio é verificado. Nada para comprar, nada para instalar.\n\n## Prazos\n\nMudanças de DNS se propagam no ritmo delas — normalmente minutos, às vezes horas. Não anuncie o endereço novo até tê-lo carregado você mesmo.","text":"Como funciona hoje Domínios próprios estão disponíveis para planos pagos e são configurados sob solicitação, não em self-service. É de propósito: apontar um domínio real para um host novo é o passo em que um erro sem supervisão tira um site do ar, então uma pessoa confere isso com você. Solicitar um domínio 1. Abra as configurações de publicação do seu site publicado. 2. Escolha Usar um domínio próprio. 3. Informe o domínio que quer usar (por exemplo www.suaempresa.com.br) e envie a solicitação. 4. O time retorna com os registros DNS exatos a acrescentar e confirma quando o domínio estiver no ar. Você acompanha o status da solicitação no mesmo lugar. O que você vai precisar - Um domínio que você controla, com acesso às configurações de DNS. - A possibilidade de adicionar um CNAME (ou um registro A/ALIAS para um domínio apex). Apex vs www Os dois funcionam. www.suaempresa.com.br é o caso mais simples — um CNAME comum. Um domínio apex (suaempresa.com.br, sem www) precisa de um provedor que aceite achatamento ALIAS/ANAME; a maioria dos registradores modernos aceita, e as instruções vão cobrir o seu provedor. HTTPS Os certificados são emitidos e renovados automaticamente assim que o domínio é verificado. Nada para comprar, nada para instalar. Prazos Mudanças de DNS se propagam no ritmo delas — normalmente minutos, às vezes horas. Não anuncie o endereço novo até tê-lo carregado você mesmo."},{"slug":"redeploy-and-rollback","category":"publish","categoryTitle":"Publicar um site no ar","title":"Republicar, reverter e despublicar","description":"Levar mudanças a um site no ar, desfazer uma publicação ruim e tirar um site do ar.","url":"https://uxmagic.ai/pt/help/publish/redeploy-and-rollback","type":"howto","keywords":["republicar","reverter","despublicar","tirar do ar","rollback","publicação","atualizar site"],"headings":["Publicar mudanças","Histórico de publicações","Reverter","Despublicar","Limites de sites"],"updated":"2026-08-27","faqs":[],"related":["publish-your-first-site","subdomains-and-urls"],"markdown":"## Publicar mudanças\n\nEdições nas suas telas **não** vão ao ar automaticamente. Quando estiver pronto, publique de novo — uma publicação nova é compilada e trocada quando ficar pronta. Quem visita continua vendo a compilação antiga até a nova estar completa, então não existe uma janela quebrada no meio da publicação.\n\n## Histórico de publicações\n\nCada publicação é guardada, com sua própria URL de pré-visualização. Isso dá duas coisas úteis: um registro do que estava no ar e quando, e um jeito de mostrar a alguém uma compilação proposta sem torná-la o site no ar.\n\n## Reverter\n\nEscolha uma publicação anterior e reverta para ela. O site volta exatamente àquela compilação na hora — não há recompilação, porque a compilação antiga ainda existe.\n\nReverta primeiro, depure depois. Leva segundos e estanca o sangramento.\n\n## Despublicar\n\n**Despublicar** tira o site do ar mas mantém o registro do site, seu subdomínio e seu histórico de publicações — então você pode trazê-lo de volta depois no mesmo endereço.\n\n**Excluir** remove o site por completo e libera o subdomínio para qualquer um. Esse não tem volta.\n\n## Limites de sites\n\nDespublicar libera a vaga que o site ocupava no limite de sites publicados do seu plano. Excluir também. Veja [Planos e limites](/help/account-and-billing/plans-and-limits).","text":"Publicar mudanças Edições nas suas telas não vão ao ar automaticamente. Quando estiver pronto, publique de novo — uma publicação nova é compilada e trocada quando ficar pronta. Quem visita continua vendo a compilação antiga até a nova estar completa, então não existe uma janela quebrada no meio da publicação. Histórico de publicações Cada publicação é guardada, com sua própria URL de pré-visualização. Isso dá duas coisas úteis: um registro do que estava no ar e quando, e um jeito de mostrar a alguém uma compilação proposta sem torná-la o site no ar. Reverter Escolha uma publicação anterior e reverta para ela. O site volta exatamente àquela compilação na hora — não há recompilação, porque a compilação antiga ainda existe. Reverta primeiro, depure depois. Leva segundos e estanca o sangramento. Despublicar Despublicar tira o site do ar mas mantém o registro do site, seu subdomínio e seu histórico de publicações — então você pode trazê-lo de volta depois no mesmo endereço. Excluir remove o site por completo e libera o subdomínio para qualquer um. Esse não tem volta. Limites de sites Despublicar libera a vaga que o site ocupava no limite de sites publicados do seu plano. Excluir também. Veja Planos e limites."},{"slug":"share-a-project","category":"collaborate","categoryTitle":"Compartilhar e colaborar","title":"Compartilhar um projeto","description":"Convide pessoas específicas, ou compartilhe um link que deixa entrar quem o abrir.","url":"https://uxmagic.ai/pt/help/collaborate/share-a-project","type":"howto","keywords":["compartilhar","convidar","colaborador","link","revisão com cliente","acesso"],"headings":["Duas formas de compartilhar","Passos","O que colaboradores podem fazer","De quem saem os créditos","Compartilhar só para revisão","Retirar acesso"],"updated":"2026-08-27","faqs":[],"related":["teams-and-seats","comments-and-feedback","share-a-preview"],"markdown":"![A caixa de diálogo “Compartilhar este projeto”, com o acesso em Privado e a nota “Este projeto está visível apenas para você”.](/help/share-dialog.webp)\n\n## Duas formas de compartilhar\n\n**Convidar por e-mail.** Adicione pessoas específicas a um projeto específico. Elas recebem um e-mail, e o projeto aparece no painel delas quando aceitam. Use para quem vai realmente trabalhar no design.\n\n**Qualquer pessoa com o link.** Gere um link que adiciona ao projeto quem o abrir. Use em um canal de time ou uma conversa com cliente em que caçar e-mails um a um não compensa — mas saiba que quem receber o link encaminhado também ganha acesso.\n\n## Passos\n\n1. Abra o projeto.\n2. Clique em **Compartilhar**.\n3. Informe endereços de e-mail, ou ative o compartilhamento por link e copie o link.\n\n## O que colaboradores podem fazer\n\nColaboradores trabalham no projeto como você: conversar com a IA, editar telas, exportar. De quem saem os créditos depende de como o projeto foi compartilhado — veja abaixo.\n\n## De quem saem os créditos\n\nEsta é a parte que surpreende. Quando um projeto é compartilhado com um **time**, o trabalho de IA ali é debitado do **fundo do time** ou da alocação de quem está agindo — não do saldo pessoal. Em um projeto compartilhado de pessoa para pessoa fora de um time, o saldo de cada um paga o trabalho que ela dispara.\n\nVeja [Times e assentos](/help/collaborate/teams-and-seats).\n\n## Compartilhar só para revisão\n\nSe você quer opiniões e não colaboradores, compartilhe uma **pré-visualização** — ela mostra o design sem dar a ninguém a capacidade de editá-lo. Veja [Compartilhar uma pré-visualização para revisão](/help/collaborate/share-a-preview).\n\n## Retirar acesso\n\nRemova a pessoa nas configurações de compartilhamento do projeto, ou desligue o compartilhamento por link. Desligar o link não remove quem já entrou por ele — remova essas pessoas uma a uma.","text":"Duas formas de compartilhar Convidar por e-mail. Adicione pessoas específicas a um projeto específico. Elas recebem um e-mail, e o projeto aparece no painel delas quando aceitam. Use para quem vai realmente trabalhar no design. Qualquer pessoa com o link. Gere um link que adiciona ao projeto quem o abrir. Use em um canal de time ou uma conversa com cliente em que caçar e-mails um a um não compensa — mas saiba que quem receber o link encaminhado também ganha acesso. Passos 1. Abra o projeto. 2. Clique em Compartilhar. 3. Informe endereços de e-mail, ou ative o compartilhamento por link e copie o link. O que colaboradores podem fazer Colaboradores trabalham no projeto como você: conversar com a IA, editar telas, exportar. De quem saem os créditos depende de como o projeto foi compartilhado — veja abaixo. De quem saem os créditos Esta é a parte que surpreende. Quando um projeto é compartilhado com um time, o trabalho de IA ali é debitado do fundo do time ou da alocação de quem está agindo — não do saldo pessoal. Em um projeto compartilhado de pessoa para pessoa fora de um time, o saldo de cada um paga o trabalho que ela dispara. Veja Times e assentos. Compartilhar só para revisão Se você quer opiniões e não colaboradores, compartilhe uma pré-visualização — ela mostra o design sem dar a ninguém a capacidade de editá-lo. Veja Compartilhar uma pré-visualização para revisão. Retirar acesso Remova a pessoa nas configurações de compartilhamento do projeto, ou desligue o compartilhamento por link. Desligar o link não remove quem já entrou por ele — remova essas pessoas uma a uma."},{"slug":"share-a-preview","category":"collaborate","categoryTitle":"Compartilhar e colaborar","title":"Compartilhar uma pré-visualização para revisão","description":"Envie um link somente leitura para que as pessoas envolvidas vejam o design sem editá-lo.","url":"https://uxmagic.ai/pt/help/collaborate/share-a-preview","type":"howto","keywords":["pré-visualização","link de revisão","somente leitura","stakeholder","cliente","apresentar"],"headings":["Quando usar uma pré-visualização","Passos","Pré-visualização vs site publicado","Pré-visualização vs PDF"],"updated":"2026-08-27","faqs":[],"related":["share-a-project","comments-and-feedback","publish-your-first-site"],"markdown":"![O menu Protótipo aberto no canvas, oferecendo “Criar protótipo” e listando um protótipo existente de três telas.](/help/prototype-menu.webp)\n\n## Quando usar uma pré-visualização\n\nLinks de pré-visualização são para quem precisa **olhar**, não construir: clientes, diretoria, engenharia dimensionando trabalho. Elas veem as telas como projetadas, sem o canvas, sem o chat e sem a possibilidade de mudar nada.\n\n## Passos\n\n1. Abra o projeto ou a tela.\n2. **Compartilhar → Link de pré-visualização.**\n3. Envie o link.\n\n## Pré-visualização vs site publicado\n\n- **Pré-visualização** — um artefato de revisão. Rápido, descartável, preso ao projeto.\n- **[Site publicado](/help/publish/publish-your-first-site)** — um site de verdade no próprio endereço, com páginas, hospedagem e histórico de publicações.\n\nPara uma aprovação de cliente, pré-visualização. Para algo que o cliente vai mostrar aos *clientes dele*, publique.\n\n## Pré-visualização vs PDF\n\nUma pré-visualização se mantém atualizada enquanto você itera; um PDF congela no momento da exportação. Envie pré-visualizações para revisão ao vivo, PDFs como registro do que foi aprovado. Veja [Exportar como PDF ou imagem](/help/export-and-handoff/export-pdf-and-images).","text":"Quando usar uma pré-visualização Links de pré-visualização são para quem precisa olhar, não construir: clientes, diretoria, engenharia dimensionando trabalho. Elas veem as telas como projetadas, sem o canvas, sem o chat e sem a possibilidade de mudar nada. Passos 1. Abra o projeto ou a tela. 2. Compartilhar → Link de pré-visualização. 3. Envie o link. Pré-visualização vs site publicado - Pré-visualização — um artefato de revisão. Rápido, descartável, preso ao projeto. - Site publicado — um site de verdade no próprio endereço, com páginas, hospedagem e histórico de publicações. Para uma aprovação de cliente, pré-visualização. Para algo que o cliente vai mostrar aos clientes dele, publique. Pré-visualização vs PDF Uma pré-visualização se mantém atualizada enquanto você itera; um PDF congela no momento da exportação. Envie pré-visualizações para revisão ao vivo, PDFs como registro do que foi aprovado. Veja Exportar como PDF ou imagem."},{"slug":"teams-and-seats","category":"collaborate","categoryTitle":"Compartilhar e colaborar","title":"Times, assentos e créditos compartilhados","description":"Crie um time, convide integrantes, atribua papéis e distribua créditos de um fundo comum.","url":"https://uxmagic.ai/pt/help/collaborate/teams-and-seats","type":"guide","keywords":["time","assentos","integrantes","papéis","créditos compartilhados","organização","workspace"],"headings":["Criar um time","Assentos","Papéis","Créditos compartilhados","Remover um integrante","Enterprise"],"updated":"2026-08-27","faqs":[{"question":"Integrantes do time precisam de assinatura própria?","answer":"Não. Integrantes trabalham sobre os assentos e o fundo de créditos do time. Quem é dono administra os dois."},{"question":"Posso limitar quantos créditos um integrante pode gastar?","answer":"Sim. Quem é dono pode definir uma alocação de créditos por integrante, para que ninguém esvazie o fundo comum."}],"related":["share-a-project","how-credits-work","plans-and-limits"],"markdown":"## Criar um time\n\nNa sua conta, crie um time e convide integrantes por e-mail. Os convites aparecem no painel da pessoa convidada e por e-mail; ela entra ao aceitar.\n\n## Assentos\n\nUm time tem um número de **assentos**, que limita quantos integrantes podem estar ativos. Quem é dono pode ajustar o número conforme o time cresce. Planos Enterprise incluem assentos ilimitados.\n\n## Papéis\n\nIntegrantes têm papéis que definem o que podem administrar — quem pode convidar, quem pode mexer no faturamento, quem só pode projetar. A propriedade pode ser transferida a outro integrante.\n\n## Créditos compartilhados\n\nA parte importante. Um time tem um **fundo de créditos compartilhado**:\n\n- O trabalho de IA em um projeto de time consome do fundo do time, não do saldo pessoal.\n- Quem é dono pode definir uma **alocação por integrante**, para que uma pessoa entusiasmada rodando fluxos grandes não gaste os créditos do mês em uma tarde.\n- Integrantes sem alocação consomem do fundo geral.\n\nVeja [Como funcionam os créditos](/help/account-and-billing/how-credits-work).\n\n## Remover um integrante\n\nRemover alguém revoga o acesso aos projetos do time. O trabalho que essa pessoa criou fica no time.\n\n## Enterprise\n\nO Enterprise acrescenta SSO/SAML, um painel de administração, um sistema de design e uma biblioteca de componentes compartilhados, alocação de créditos personalizada e suporte prioritário. Veja [Planos e limites](/help/account-and-billing/plans-and-limits).","text":"Criar um time Na sua conta, crie um time e convide integrantes por e-mail. Os convites aparecem no painel da pessoa convidada e por e-mail; ela entra ao aceitar. Assentos Um time tem um número de assentos, que limita quantos integrantes podem estar ativos. Quem é dono pode ajustar o número conforme o time cresce. Planos Enterprise incluem assentos ilimitados. Papéis Integrantes têm papéis que definem o que podem administrar — quem pode convidar, quem pode mexer no faturamento, quem só pode projetar. A propriedade pode ser transferida a outro integrante. Créditos compartilhados A parte importante. Um time tem um fundo de créditos compartilhado: - O trabalho de IA em um projeto de time consome do fundo do time, não do saldo pessoal. - Quem é dono pode definir uma alocação por integrante, para que uma pessoa entusiasmada rodando fluxos grandes não gaste os créditos do mês em uma tarde. - Integrantes sem alocação consomem do fundo geral. Veja Como funcionam os créditos. Remover um integrante Remover alguém revoga o acesso aos projetos do time. O trabalho que essa pessoa criou fica no time. Enterprise O Enterprise acrescenta SSO/SAML, um painel de administração, um sistema de design e uma biblioteca de componentes compartilhados, alocação de créditos personalizada e suporte prioritário. Veja Planos e limites."},{"slug":"comments-and-feedback","category":"collaborate","categoryTitle":"Compartilhar e colaborar","title":"Comentários e opiniões","description":"Deixe comentários em um design e resolva-os conforme for tratando.","url":"https://uxmagic.ai/pt/help/collaborate/comments-and-feedback","type":"howto","keywords":["comentários","opiniões","anotar","revisão","notas","tópicos"],"headings":["Comentar","Resolver","Tratar opiniões com a IA","Quem pode comentar"],"updated":"2026-08-27","faqs":[],"related":["share-a-preview","share-a-project"],"markdown":"## Comentar\n\nComentários se prendem a um design e formam tópicos, então uma conversa sobre o hero fica com o hero em vez de se espalhar pelo Slack.\n\n1. Abra o projeto ou a pré-visualização.\n2. Deixe um comentário onde a observação pertence.\n3. Responda no tópico para manter a discussão junta.\n\n## Resolver\n\nResolva um tópico quando já tiver agido sobre ele. Tópicos resolvidos continuam disponíveis, então o registro do *porquê* de uma mudança não se perde.\n\n## Tratar opiniões com a IA\n\nComentários são para pessoas; o chat é para a IA. O ciclo eficiente é: recolha comentários e então traduza um lote em duas ou três instruções específicas. Duas ou três mudanças por vez aterrissam com mais confiabilidade do que uma lista de doze. Veja [Editar pelo chat](/help/design-and-edit/chat-editing).\n\n## Quem pode comentar\n\nQualquer pessoa com acesso ao projeto — e, no caso de links de revisão, qualquer pessoa a quem você enviar a pré-visualização.","text":"Comentar Comentários se prendem a um design e formam tópicos, então uma conversa sobre o hero fica com o hero em vez de se espalhar pelo Slack. 1. Abra o projeto ou a pré-visualização. 2. Deixe um comentário onde a observação pertence. 3. Responda no tópico para manter a discussão junta. Resolver Resolva um tópico quando já tiver agido sobre ele. Tópicos resolvidos continuam disponíveis, então o registro do porquê de uma mudança não se perde. Tratar opiniões com a IA Comentários são para pessoas; o chat é para a IA. O ciclo eficiente é: recolha comentários e então traduza um lote em duas ou três instruções específicas. Duas ou três mudanças por vez aterrissam com mais confiabilidade do que uma lista de doze. Veja Editar pelo chat. Quem pode comentar Qualquer pessoa com acesso ao projeto — e, no caso de links de revisão, qualquer pessoa a quem você enviar a pré-visualização."},{"slug":"community-and-inspiration","category":"collaborate","categoryTitle":"Compartilhar e colaborar","title":"Comunidade e inspiração","description":"Explore designs que a comunidade compartilhou, e publique os seus.","url":"https://uxmagic.ai/pt/help/collaborate/community-and-inspiration","type":"guide","keywords":["comunidade","inspiração","vitrine","exemplos","modelos","galeria"],"headings":["Explorar a comunidade","Usar um design da comunidade","Compartilhar os seus","Inspiração dentro do produto"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","ways-to-generate-a-screen"],"markdown":"![A página Comunidade, mostrando projetos publicados que podem ser abertos e remixados.](/help/community.webp)\n\n## Explorar a comunidade\n\nA [galeria da comunidade](/community) reúne designs feitos com a UXMagic, organizados por categoria. É o jeito mais rápido de ver o que bons prompts produzem e de encontrar um ponto de partida perto do que você precisa.\n\n## Usar um design da comunidade\n\nAbra um que você goste e use como referência: parta dele, ou descreva o que quer apontando para ele. Designs da comunidade são inspiração, não recursos licenciados — trate imagens e textos como marcadores de posição.\n\n## Compartilhar os seus\n\nVocê pode publicar um projeto na comunidade pelas configurações de compartilhamento dele. Confira o conteúdo antes: designs da comunidade são públicos, então nomes de clientes, dados reais de usuários e marca não anunciada devem sair antes de publicar.\n\n## Inspiração dentro do produto\n\nO painel também traz inspirações e exemplos enquanto você trabalha, para você puxar uma ideia de layout sem sair do canvas.","text":"Explorar a comunidade A galeria da comunidade reúne designs feitos com a UXMagic, organizados por categoria. É o jeito mais rápido de ver o que bons prompts produzem e de encontrar um ponto de partida perto do que você precisa. Usar um design da comunidade Abra um que você goste e use como referência: parta dele, ou descreva o que quer apontando para ele. Designs da comunidade são inspiração, não recursos licenciados — trate imagens e textos como marcadores de posição. Compartilhar os seus Você pode publicar um projeto na comunidade pelas configurações de compartilhamento dele. Confira o conteúdo antes: designs da comunidade são públicos, então nomes de clientes, dados reais de usuários e marca não anunciada devem sair antes de publicar. Inspiração dentro do produto O painel também traz inspirações e exemplos enquanto você trabalha, para você puxar uma ideia de layout sem sair do canvas."},{"slug":"mcp-server","category":"integrations","categoryTitle":"Integrações e desenvolvimento","title":"Servidor MCP da UXMagic","description":"Conecte Claude, Cursor, VS Code, Windsurf, Codex ou Antigravity aos seus projetos da UXMagic.","url":"https://uxmagic.ai/pt/help/integrations/mcp-server","type":"howto","keywords":["mcp","model context protocol","cursor","claude","vscode","windsurf","ide","codex"],"headings":["Configuração","O que seu assistente pode fazer depois de conectado","Um fluxo típico","Créditos","Segurança"],"updated":"2026-08-27","faqs":[{"question":"Quais IDEs são suportadas?","answer":"Claude, Cursor, VS Code, Windsurf, Codex e Antigravity — e qualquer outro cliente compatível com MCP."},{"question":"Preciso instalar alguma coisa?","answer":"Não. A UXMagic gera a configuração para a sua IDE; você cola nas configurações de MCP dela."}],"related":["api-keys","export-code","github-sync"],"markdown":"O Model Context Protocol (MCP) é um padrão aberto que permite a assistentes de IA falar direto com ferramentas externas. O servidor MCP da UXMagic conecta seu assistente de programação aos seus projetos reais da UXMagic — em vez de copiar capturas para um chat, seu assistente lê o design de verdade.\n\n![A caixa de diálogo Conectar MCP, mostrando as IDEs suportadas: Antigravity, Cursor, Codex, VS Code, Windsurf e Claude.](/help/mcp-dialog.webp)\n\n## Configuração\n\n1. Vá até a [página do MCP](/mcp) e escolha sua IDE.\n2. **Gere uma chave de API** — veja [Chaves de API](/help/integrations/api-keys).\n3. **Copie a configuração gerada** e cole nas configurações de MCP da sua IDE.\n4. Reinicie a IDE se ela não reconhecer o servidor novo de imediato.\n\nSuportados de fábrica: **Claude, Cursor, VS Code, Windsurf, Codex e Antigravity**. Qualquer cliente compatível com MCP funciona com a mesma configuração.\n\n## O que seu assistente pode fazer depois de conectado\n\n**Ler seu trabalho**\n\n- Listar seus projetos e obter os detalhes de um projeto.\n- Listar as telas de um projeto e obter os detalhes de uma tela.\n- Ler o HTML de uma tela e ler o tema do projeto.\n- Listar e ler os documentos do projeto (PRDs, briefings).\n\n**Mudar seu trabalho**\n\n- Criar um projeto, criar uma tela, duplicar uma tela.\n- Fazer uma edição direcionada de buscar e substituir, ou substituir todo o corpo de uma tela.\n- Substituir uma imagem.\n- Exportar uma tela para o Figma.\n\n**Gerar**\n\n- Disparar uma geração de design, checar o status e depois confirmá-la ou cancelá-la.\n\nA geração é de propósito um aperto de mão em três passos em vez de uma chamada única: seu assistente inicia, acompanha, e você decide se fica com o resultado — assim um laço de agente não consegue queimar seus créditos em silêncio.\n\n## Um fluxo típico\n\n> “Leia a tela de Preços do meu projeto Ledgerly e implemente como componente React usando nossos design tokens.”\n\nSeu assistente puxa a marcação e o tema reais e escreve código contra eles. Sem capturas, sem desvio, sem redescrever o design.\n\n## Créditos\n\nOperações de leitura são gratuitas. Gerar via MCP custa os mesmos créditos que gerar no aplicativo — é o mesmo motor.\n\n## Segurança\n\nSua chave de API autentica a conexão com a sua conta. Mantenha fora de arquivos versionados, e rotacione ou revogue quando quiser nas configurações da conta.","text":"O Model Context Protocol (MCP) é um padrão aberto que permite a assistentes de IA falar direto com ferramentas externas. O servidor MCP da UXMagic conecta seu assistente de programação aos seus projetos reais da UXMagic — em vez de copiar capturas para um chat, seu assistente lê o design de verdade. Configuração 1. Vá até a página do MCP e escolha sua IDE. 2. Gere uma chave de API — veja Chaves de API. 3. Copie a configuração gerada e cole nas configurações de MCP da sua IDE. 4. Reinicie a IDE se ela não reconhecer o servidor novo de imediato. Suportados de fábrica: Claude, Cursor, VS Code, Windsurf, Codex e Antigravity. Qualquer cliente compatível com MCP funciona com a mesma configuração. O que seu assistente pode fazer depois de conectado Ler seu trabalho - Listar seus projetos e obter os detalhes de um projeto. - Listar as telas de um projeto e obter os detalhes de uma tela. - Ler o HTML de uma tela e ler o tema do projeto. - Listar e ler os documentos do projeto (PRDs, briefings). Mudar seu trabalho - Criar um projeto, criar uma tela, duplicar uma tela. - Fazer uma edição direcionada de buscar e substituir, ou substituir todo o corpo de uma tela. - Substituir uma imagem. - Exportar uma tela para o Figma. Gerar - Disparar uma geração de design, checar o status e depois confirmá-la ou cancelá-la. A geração é de propósito um aperto de mão em três passos em vez de uma chamada única: seu assistente inicia, acompanha, e você decide se fica com o resultado — assim um laço de agente não consegue queimar seus créditos em silêncio. Um fluxo típico “Leia a tela de Preços do meu projeto Ledgerly e implemente como componente React usando nossos design tokens.” Seu assistente puxa a marcação e o tema reais e escreve código contra eles. Sem capturas, sem desvio, sem redescrever o design. Créditos Operações de leitura são gratuitas. Gerar via MCP custa os mesmos créditos que gerar no aplicativo — é o mesmo motor. Segurança Sua chave de API autentica a conexão com a sua conta. Mantenha fora de arquivos versionados, e rotacione ou revogue quando quiser nas configurações da conta."},{"slug":"api-keys","category":"integrations","categoryTitle":"Integrações e desenvolvimento","title":"Chaves de API","description":"Criar, rotacionar e revogar chaves para o servidor MCP e o acesso à API.","url":"https://uxmagic.ai/pt/help/integrations/api-keys","type":"howto","keywords":["chave de api","token","autenticação","rotacionar","revogar","segredo"],"headings":["Criar uma chave","Rotacionar","Revogar","Manter as chaves seguras","Se uma chave parar de funcionar"],"updated":"2026-08-27","faqs":[],"related":["mcp-server","github-sync"],"markdown":"## Criar uma chave\n\n1. Abra **Gerenciar conta → Chaves de API**.\n2. Crie uma chave e dê um nome que diga onde ela é usada (“Cursor — notebook”, “CI”).\n3. **Copie na hora.** A chave completa é mostrada uma única vez.\n\n## Rotacionar\n\nRotacionar emite um segredo novo para a mesma chave. Tudo que usa o valor antigo para de funcionar no instante em que você rotaciona, então atualize sua configuração na mesma hora.\n\n## Revogar\n\nExcluir uma chave é imediato e permanente. Qualquer IDE ou script que a use começa a falhar na hora — exatamente o que você quer se uma chave vazou.\n\n## Manter as chaves seguras\n\n- **Nunca versione uma chave.** Use as configurações de MCP da sua IDE ou uma variável de ambiente.\n- **Uma chave por lugar.** Uma chave compartilhada só pode ser revogada quebrando todos os consumidores de uma vez.\n- **Rotacione quando alguém sair**, ou quando uma chave tiver estado onde não deveria.\n\n## Se uma chave parar de funcionar\n\nConfira, nesta ordem: a chave não foi rotacionada nem revogada; foi colada inteira; e você está apontando para a conta certa. Chaves são por usuário, então a chave da conta de um colega não vai enxergar seus projetos.","text":"Criar uma chave 1. Abra Gerenciar conta → Chaves de API. 2. Crie uma chave e dê um nome que diga onde ela é usada (“Cursor — notebook”, “CI”). 3. Copie na hora. A chave completa é mostrada uma única vez. Rotacionar Rotacionar emite um segredo novo para a mesma chave. Tudo que usa o valor antigo para de funcionar no instante em que você rotaciona, então atualize sua configuração na mesma hora. Revogar Excluir uma chave é imediato e permanente. Qualquer IDE ou script que a use começa a falhar na hora — exatamente o que você quer se uma chave vazou. Manter as chaves seguras - Nunca versione uma chave. Use as configurações de MCP da sua IDE ou uma variável de ambiente. - Uma chave por lugar. Uma chave compartilhada só pode ser revogada quebrando todos os consumidores de uma vez. - Rotacione quando alguém sair, ou quando uma chave tiver estado onde não deveria. Se uma chave parar de funcionar Confira, nesta ordem: a chave não foi rotacionada nem revogada; foi colada inteira; e você está apontando para a conta certa. Chaves são por usuário, então a chave da conta de um colega não vai enxergar seus projetos."},{"slug":"figma-plugin","category":"integrations","categoryTitle":"Integrações e desenvolvimento","title":"O plugin da UXMagic para o Figma","description":"Gere interfaces e traga sites e capturas para o Figma sem sair do Figma.","url":"https://uxmagic.ai/pt/help/integrations/figma-plugin","type":"howto","keywords":["plugin do figma","plugin","de site para figma","de captura para interface","figma"],"headings":["Instalação","O que ele faz","Plugin vs aplicação web","Créditos"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","import-from-figma","mcp-server"],"markdown":"O plugin — **UXMagic AI UI Generator (Website to Figma, Screenshot to UI)** — leva a geração para dentro do Figma, para quem já tem o trabalho ali.\n\n## Instalação\n\n1. Abra a [página do plugin na Figma Community](https://www.figma.com/community/plugin/1374402598280022366/uxmagic-ai-ui-generator-website-to-figma-screenshot-to-ui).\n2. Clique em **Abrir no Figma**.\n3. Entre com sua conta da UXMagic quando for pedido.\n\n## O que ele faz\n\n- **Gerar interfaces a partir de um prompt**, direto no canvas do Figma.\n- **De site para Figma** — cole uma URL e receba a página como camadas editáveis do Figma.\n- **De captura para interface** — solte uma imagem e receba camadas de verdade.\n\nTudo chega como frames do Figma em condições, com auto layout, não como imagens achatadas.\n\n## Plugin vs aplicação web\n\n- **Plugin** — melhor quando o Figma é sua superfície de trabalho e você quer o resultado direto ali.\n- **[Aplicação web](/dashboard)** — melhor para projetos com várias telas, temas, versões, publicação e colaboração.\n\nOs dois compartilham sua conta e seu saldo de créditos, então você pode transitar entre eles.\n\n## Créditos\n\nGerações e exportações no plugin consomem do mesmo saldo da aplicação web. Veja [Como funcionam os créditos](/help/account-and-billing/how-credits-work).","text":"O plugin — UXMagic AI UI Generator (Website to Figma, Screenshot to UI) — leva a geração para dentro do Figma, para quem já tem o trabalho ali. Instalação 1. Abra a página do plugin na Figma Community. 2. Clique em Abrir no Figma. 3. Entre com sua conta da UXMagic quando for pedido. O que ele faz - Gerar interfaces a partir de um prompt, direto no canvas do Figma. - De site para Figma — cole uma URL e receba a página como camadas editáveis do Figma. - De captura para interface — solte uma imagem e receba camadas de verdade. Tudo chega como frames do Figma em condições, com auto layout, não como imagens achatadas. Plugin vs aplicação web - Plugin — melhor quando o Figma é sua superfície de trabalho e você quer o resultado direto ali. - Aplicação web — melhor para projetos com várias telas, temas, versões, publicação e colaboração. Os dois compartilham sua conta e seu saldo de créditos, então você pode transitar entre eles. Créditos Gerações e exportações no plugin consomem do mesmo saldo da aplicação web. Veja Como funcionam os créditos."},{"slug":"github-sync","category":"integrations","categoryTitle":"Integrações e desenvolvimento","title":"Sincronização com o GitHub","description":"Envie o código exportado direto para um repositório, e publique com o GitHub Pages.","url":"https://uxmagic.ai/pt/help/integrations/github-sync","type":"howto","keywords":["github","repositório","git","enviar código","pages","sincronizar","commit"],"headings":["Conectar o GitHub","Enviar código","GitHub Pages","Boas práticas","Desconectar"],"updated":"2026-08-27","faqs":[],"related":["export-code","api-keys","publish-your-first-site"],"markdown":"## Conectar o GitHub\n\n1. Vá em **Integrações → GitHub**.\n2. Autorize a UXMagic (OAuth).\n3. Escolha um repositório existente, ou deixe a UXMagic criar um.\n\n## Enviar código\n\n1. Selecione as telas que quiser.\n2. **Exportar → GitHub.**\n3. Escolha o repositório e a branch.\n4. Envie. O código exportado é commitado por você.\n\nEnviar de novo atualiza os mesmos arquivos, então o repositório acompanha o design conforme ele evolui.\n\n## GitHub Pages\n\nVocê pode publicar o código enviado com o GitHub Pages direto pela integração — útil para uma pré-visualização pública rápida quando você quer que o artefato viva na sua própria organização do GitHub em vez da hospedagem da UXMagic.\n\nPara um site que você realmente pretende manter, [publicar](/help/publish/publish-your-first-site) dá um endereço em condições, histórico de publicações e reversão.\n\n## Boas práticas\n\n- **Envie para uma branch**, não para a `main`, e revise o diff.\n- **Traga os recursos para o repositório.** O código exportado referencia imagens por URL; baixe-as antes de publicar.\n- **Conte com um front-end.** Não há camada de dados nem roteamento — ligue isso na sua aplicação.\n\n## Desconectar\n\nDesconecte em **Integrações**. Isso revoga o acesso da UXMagic; o que já foi enviado fica no seu repositório.","text":"Conectar o GitHub 1. Vá em Integrações → GitHub. 2. Autorize a UXMagic (OAuth). 3. Escolha um repositório existente, ou deixe a UXMagic criar um. Enviar código 1. Selecione as telas que quiser. 2. Exportar → GitHub. 3. Escolha o repositório e a branch. 4. Envie. O código exportado é commitado por você. Enviar de novo atualiza os mesmos arquivos, então o repositório acompanha o design conforme ele evolui. GitHub Pages Você pode publicar o código enviado com o GitHub Pages direto pela integração — útil para uma pré-visualização pública rápida quando você quer que o artefato viva na sua própria organização do GitHub em vez da hospedagem da UXMagic. Para um site que você realmente pretende manter, publicar dá um endereço em condições, histórico de publicações e reversão. Boas práticas - Envie para uma branch, não para a main, e revise o diff. - Traga os recursos para o repositório. O código exportado referencia imagens por URL; baixe-as antes de publicar. - Conte com um front-end. Não há camada de dados nem roteamento — ligue isso na sua aplicação. Desconectar Desconecte em Integrações. Isso revoga o acesso da UXMagic; o que já foi enviado fica no seu repositório."},{"slug":"connect-uxmagic-to-ai-assistants","category":"integrations","categoryTitle":"Integrações e desenvolvimento","title":"Usar a UXMagic pelo ChatGPT, Claude e outros assistentes","description":"Como assistentes de IA podem ler a documentação da UXMagic e operar seus projetos.","url":"https://uxmagic.ai/pt/help/integrations/connect-uxmagic-to-ai-assistants","type":"guide","keywords":["chatgpt","claude","perplexity","assistente de ia","llms.txt","suporte com ia","informações para ia"],"headings":["1. Perguntar a um assistente *sobre* a UXMagic","2. Fazer um assistente *operar* a UXMagic","Qual usar"],"updated":"2026-08-27","faqs":[],"related":["mcp-server","api-keys","contact-support"],"markdown":"Há duas coisas diferentes que as pessoas querem dizer com “usar a UXMagic com IA”, e elas pedem configurações diferentes.\n\n## 1. Perguntar a um assistente *sobre* a UXMagic\n\nAssistentes respondem a partir do que conseguem ler. A UXMagic publica superfícies legíveis por máquinas justamente para que essas respostas sejam exatas em vez de inventadas:\n\n- **[/ai-info](/ai-info)** — o resumo oficial e estruturado sobre o produto: o que é, o que faz, para quem é, quanto custa e o que *não* faz.\n- **[/llms.txt](/llms.txt)** — um índice curado do site público para mecanismos de resposta com IA.\n- **[/llms-full.txt](/llms-full.txt)** — um documento autocontido cobrindo recursos, exportações, preços e perguntas frequentes.\n- **[/llms-help.txt](/llms-help.txt)** — toda esta central de ajuda em um único documento de texto.\n- **[/help.json](/help.json)** — o corpus de ajuda em JSON estruturado.\n\nSe um assistente disser algo errado sobre a UXMagic, apontar para `uxmagic.ai/ai-info` costuma ser a correção mais rápida.\n\n## 2. Fazer um assistente *operar* a UXMagic\n\nIsso é o servidor MCP: seu assistente lê seus projetos e telas reais, e pode criá-los e editá-los. Veja [Servidor MCP da UXMagic](/help/integrations/mcp-server).\n\n## Qual usar\n\n- Escrever código a partir de um design → **MCP**.\n- Perguntar “quanto custa a UXMagic” → **as superfícies publicadas acima**; sem configuração.\n- Construir uma automação sobre a UXMagic → **MCP com uma [chave de API](/help/integrations/api-keys)**.","text":"Há duas coisas diferentes que as pessoas querem dizer com “usar a UXMagic com IA”, e elas pedem configurações diferentes. 1. Perguntar a um assistente sobre a UXMagic Assistentes respondem a partir do que conseguem ler. A UXMagic publica superfícies legíveis por máquinas justamente para que essas respostas sejam exatas em vez de inventadas: - /ai-info — o resumo oficial e estruturado sobre o produto: o que é, o que faz, para quem é, quanto custa e o que não faz. - /llms.txt — um índice curado do site público para mecanismos de resposta com IA. - /llms-full.txt — um documento autocontido cobrindo recursos, exportações, preços e perguntas frequentes. - /llms-help.txt — toda esta central de ajuda em um único documento de texto. - /help.json — o corpus de ajuda em JSON estruturado. Se um assistente disser algo errado sobre a UXMagic, apontar para uxmagic.ai/ai-info costuma ser a correção mais rápida. 2. Fazer um assistente operar a UXMagic Isso é o servidor MCP: seu assistente lê seus projetos e telas reais, e pode criá-los e editá-los. Veja Servidor MCP da UXMagic. Qual usar - Escrever código a partir de um design → MCP. - Perguntar “quanto custa a UXMagic” → as superfícies publicadas acima; sem configuração. - Construir uma automação sobre a UXMagic → MCP com uma chave de API."},{"slug":"how-credits-work","category":"account-and-billing","categoryTitle":"Planos, créditos e faturamento","title":"Como funcionam os créditos","description":"Exatamente o que cada ação de IA custa, quais ações são gratuitas e como fazer um saldo render.","url":"https://uxmagic.ai/pt/help/account-and-billing/how-credits-work","type":"reference","keywords":["créditos","custo","preços","uso","sem créditos","saldo","quanto custa"],"headings":["O que cada ação custa","Começar uma sessão","A economia, em uma linha","Fazer um saldo render","Créditos de time","Ficar sem"],"updated":"2026-09-03","faqs":[{"question":"Os créditos acumulam de um mês para o outro?","answer":"Os créditos dos planos pagos são reiniciados a cada ciclo de faturamento e não acumulam. Os do plano Free são renovados todo dia — um saldo zerado volta amanhã."},{"question":"Sou cobrado se uma geração falhar?","answer":"Trabalho que não produziu nada não deveria ser cobrado. Se uma execução falha foi cobrada, fale com o suporte com o link do projeto e corrigimos."},{"question":"Ler e aplicar temas é gratuito?","answer":"Sim. Ler telas, ler o tema, ler imagens e documentos, e criar ou atualizar um tema custam zero créditos."}],"related":["earn-free-credits","plans-and-limits","i-ran-out-of-credits"],"markdown":"Créditos são a unidade do trabalho de IA. Ler e aplicar temas é gratuito; gerar e reconstruir custam, na proporção do processamento que a ação realmente exige.\n\n## O que cada ação custa\n\n| Ação | Créditos |\n| --- | --- |\n| Projetar uma tela nova | 3 |\n| Reescrever uma tela inteira | 2 |\n| Edição direcionada (buscar e substituir) | 0,2 |\n| Propor um plano de telas | 1 |\n| Clonar um site a partir de uma URL | 10 |\n| Concluir um clone incompleto | 2 |\n| Gerar uma imagem | 0,5 |\n| Editar uma imagem existente | 0,5 |\n| Substituir um recurso em todas as telas | 1 |\n| Ler uma tela, tema, imagem ou documento | 0 |\n| Criar ou atualizar um tema | 0 |\n| Responder a uma pergunta de esclarecimento | 0 |\n\n**Operações por tela** são cobradas por cada tela que tocam, a **6 créditos por tela**:\n\n- Regenerar uma tela\n- Gerar variações\n- Gerar um fluxo\n- Converter uma tela para versão mobile\n- Converter uma tela para versão desktop\n\nEntão converter oito telas para mobile custa 48 créditos, não 6.\n\n## Começar uma sessão\n\nUma sessão de chat precisa de pelo menos **4 créditos** para começar — o bastante para cobrir um plano mais uma tela completa, para que uma sessão não possa começar, planejar e secar antes de produzir qualquer coisa.\n\n## A economia, em uma linha\n\n**Editar é cerca de quinze vezes mais barato que reescrever, e reescrever é mais barato que regenerar.** A maior economia ao seu alcance é pedir a mudança específica em vez de pedir a tela de novo.\n\n## Fazer um saldo render\n\n1. **Peça mudanças direcionadas.** “Deixe o hero mais curto” custa uma fração de “refaça esta página”.\n2. **Acerte o tema cedo.** Mudanças de tema são gratuitas e valem em todo lugar; recolorir telas uma a uma não é nem uma coisa nem outra.\n3. **Leve o plano de telas a sério.** Corrigir o plano custa 1 crédito. Corrigir oito telas erradas custa de 24 a 48.\n4. **Deixe as variantes por dispositivo para o fim.** Converta uma vez, no final, em vez de reconverter depois de cada mudança.\n5. **Use o modo edição para textos.** Trocas de texto e imagem ali são gratuitas.\n6. **Confira seu saldo antes de um fluxo grande.** Uma rodada que para no meio deixa você com meio fluxo.\n\n## Créditos de time\n\nEm um projeto de time, o trabalho de IA é debitado do **fundo compartilhado do time** ou da sua alocação nele — não do seu saldo pessoal. Quem é dono pode limitar o gasto por integrante. Veja [Times e assentos](/help/collaborate/teams-and-seats).\n\n## Ficar sem\n\nVocê recebe uma mensagem clara, e não uma falha silenciosa. Veja [Fiquei sem créditos](/help/troubleshooting/i-ran-out-of-credits).","text":"Créditos são a unidade do trabalho de IA. Ler e aplicar temas é gratuito; gerar e reconstruir custam, na proporção do processamento que a ação realmente exige. O que cada ação custa Ação Créditos --- --- Projetar uma tela nova 3 Reescrever uma tela inteira 2 Edição direcionada (buscar e substituir) 0,2 Propor um plano de telas 1 Clonar um site a partir de uma URL 10 Concluir um clone incompleto 2 Gerar uma imagem 0,5 Editar uma imagem existente 0,5 Substituir um recurso em todas as telas 1 Ler uma tela, tema, imagem ou documento 0 Criar ou atualizar um tema 0 Responder a uma pergunta de esclarecimento 0 Operações por tela são cobradas por cada tela que tocam, a 6 créditos por tela: - Regenerar uma tela - Gerar variações - Gerar um fluxo - Converter uma tela para versão mobile - Converter uma tela para versão desktop Então converter oito telas para mobile custa 48 créditos, não 6. Começar uma sessão Uma sessão de chat precisa de pelo menos 4 créditos para começar — o bastante para cobrir um plano mais uma tela completa, para que uma sessão não possa começar, planejar e secar antes de produzir qualquer coisa. A economia, em uma linha Editar é cerca de quinze vezes mais barato que reescrever, e reescrever é mais barato que regenerar. A maior economia ao seu alcance é pedir a mudança específica em vez de pedir a tela de novo. Fazer um saldo render 1. Peça mudanças direcionadas. “Deixe o hero mais curto” custa uma fração de “refaça esta página”. 2. Acerte o tema cedo. Mudanças de tema são gratuitas e valem em todo lugar; recolorir telas uma a uma não é nem uma coisa nem outra. 3. Leve o plano de telas a sério. Corrigir o plano custa 1 crédito. Corrigir oito telas erradas custa de 24 a 48. 4. Deixe as variantes por dispositivo para o fim. Converta uma vez, no final, em vez de reconverter depois de cada mudança. 5. Use o modo edição para textos. Trocas de texto e imagem ali são gratuitas. 6. Confira seu saldo antes de um fluxo grande. Uma rodada que para no meio deixa você com meio fluxo. Créditos de time Em um projeto de time, o trabalho de IA é debitado do fundo compartilhado do time ou da sua alocação nele — não do seu saldo pessoal. Quem é dono pode limitar o gasto por integrante. Veja Times e assentos. Ficar sem Você recebe uma mensagem clara, e não uma falha silenciosa. Veja Fiquei sem créditos."},{"slug":"plans-and-limits","category":"account-and-billing","categoryTitle":"Planos, créditos e faturamento","title":"Planos e limites","description":"O que Free, Pro e Enterprise incluem, e quais limites valem para o quê.","url":"https://uxmagic.ai/pt/help/account-and-billing/plans-and-limits","type":"reference","keywords":["planos","preços","free","pro","enterprise","limites","upgrade","níveis"],"headings":["Free","Pro","Enterprise","Qual limite vale onde","Periodicidade de cobrança"],"updated":"2026-09-03","faqs":[],"related":["how-credits-work","upgrade-or-downgrade","teams-and-seats"],"markdown":"Os preços vigentes e a matriz completa de recursos estão na [página de preços](/pricing). Este é o formato geral.\n\n## Free\n\n- **20 créditos por dia**, renovados diariamente — um saldo zerado volta amanhã.\n- Até **3 telas por dia**, em **5 projetos**.\n- **1 exportação para o Figma.**\n- Os recursos principais: design de UI, wireframes, modo fluxo, de captura e de rascunho para interface, clonar um site, guia de estilo, importação do Figma, exportação de código.\n- **Sem cartão de crédito.**\n\n## Pro\n\n- **2.400 créditos por mês** — até **400 telas** — reiniciados a cada ciclo de faturamento, sem limite diário.\n- **US$ 35/mês**, ou **US$ 17,5/mês na cobrança anual** (50% de desconto, US$ 210 pelo ano).\n- Projetos ilimitados e **250 exportações para o Figma** por mês.\n- Tudo do Free, sem os tetos.\n- Remover o selo da UX Magic de sites publicados, e sites privados/protegidos por senha.\n\n## Enterprise\n\nTudo do Pro, mais:\n\n- Telas geradas por IA ilimitadas e assentos ilimitados\n- Alocação personalizada de créditos\n- Autenticação SSO / SAML\n- Painel de administração do time\n- Sistema de design e biblioteca de componentes compartilhados\n- Suporte prioritário com tempo de resposta garantido\n- Onboarding e treinamento dedicados\n- Contrato e faturamento sob medida\n- Acesso antecipado a novos recursos\n\n[Fale com a gente](/support) sobre o Enterprise.\n\n## Qual limite vale onde\n\n| Limite | Vale para |\n| --- | --- |\n| Créditos | Toda geração com IA, no aplicativo e via MCP e plugin do Figma |\n| Telas | Telas criadas em projetos |\n| Projetos | Projetos simultâneos na sua conta |\n| Exportações para o Figma | Cada operação de exportação |\n| Sites publicados | Sites no ar ao mesmo tempo; despublicar libera a vaga |\n| Assentos | Integrantes ativos de um time |\n\n## Periodicidade de cobrança\n\nMensal ou anual. A anual sai bem mais barata por mês. Você pode trocar a periodicidade quando quiser nas configurações de faturamento. Veja [Subir, descer de plano ou trocar a periodicidade](/help/account-and-billing/upgrade-or-downgrade).","text":"Os preços vigentes e a matriz completa de recursos estão na página de preços. Este é o formato geral. Free - 20 créditos por dia, renovados diariamente — um saldo zerado volta amanhã. - Até 3 telas por dia, em 5 projetos. - 1 exportação para o Figma. - Os recursos principais: design de UI, wireframes, modo fluxo, de captura e de rascunho para interface, clonar um site, guia de estilo, importação do Figma, exportação de código. - Sem cartão de crédito. Pro - 2.400 créditos por mês — até 400 telas — reiniciados a cada ciclo de faturamento, sem limite diário. - US$ 35/mês, ou US$ 17,5/mês na cobrança anual (50% de desconto, US$ 210 pelo ano). - Projetos ilimitados e 250 exportações para o Figma por mês. - Tudo do Free, sem os tetos. - Remover o selo da UX Magic de sites publicados, e sites privados/protegidos por senha. Enterprise Tudo do Pro, mais: - Telas geradas por IA ilimitadas e assentos ilimitados - Alocação personalizada de créditos - Autenticação SSO / SAML - Painel de administração do time - Sistema de design e biblioteca de componentes compartilhados - Suporte prioritário com tempo de resposta garantido - Onboarding e treinamento dedicados - Contrato e faturamento sob medida - Acesso antecipado a novos recursos Fale com a gente sobre o Enterprise. Qual limite vale onde Limite Vale para --- --- Créditos Toda geração com IA, no aplicativo e via MCP e plugin do Figma Telas Telas criadas em projetos Projetos Projetos simultâneos na sua conta Exportações para o Figma Cada operação de exportação Sites publicados Sites no ar ao mesmo tempo; despublicar libera a vaga Assentos Integrantes ativos de um time Periodicidade de cobrança Mensal ou anual. A anual sai bem mais barata por mês. Você pode trocar a periodicidade quando quiser nas configurações de faturamento. Veja Subir, descer de plano ou trocar a periodicidade."},{"slug":"upgrade-or-downgrade","category":"account-and-billing","categoryTitle":"Planos, créditos e faturamento","title":"Subir, descer de plano ou trocar a periodicidade de cobrança","description":"Mudar de plano ou alternar entre mensal e anual, e o que acontece com seus créditos.","url":"https://uxmagic.ai/pt/help/account-and-billing/upgrade-or-downgrade","type":"howto","keywords":["subir de plano","descer de plano","anual","mensal","mudar de plano","trocar"],"headings":["Subir de plano","Descer de plano","Mensal ↔ anual","O que acontece com os créditos","Planos de time"],"updated":"2026-08-27","faqs":[],"related":["plans-and-limits","billing-and-invoices","cancel-your-subscription"],"markdown":"## Subir de plano\n\nEm **Gerenciar conta → Faturamento**, escolha o plano que quiser. Upgrades entram em vigor **imediatamente** — a cota nova fica disponível na hora.\n\n## Descer de plano\n\nDowngrades entram em vigor a partir do **próximo ciclo de faturamento**. Você mantém o plano atual e a cota dele até lá, então nunca fica cortado no meio do mês por uma mudança feita no dia 3.\n\nDepois de descer, os limites do plano valem daí em diante. Projetos e telas acima do novo limite não são excluídos, mas você pode não conseguir criar mais até voltar para baixo dele.\n\n## Mensal ↔ anual\n\nVocê pode trocar a periodicidade quando quiser nas configurações de faturamento. A anual tem um desconto considerável em relação a doze meses da mensal.\n\nUma coisa para saber: trocar **no meio do ciclo** pode gerar uma cobrança proporcional do provedor de pagamento além da cobrança do plano novo. Se preferir evitar duas cobranças próximas, troque no começo de um ciclo — ou [fale com a gente antes](/support) e vemos isso junto.\n\n## O que acontece com os créditos\n\n- **Upgrade** — a cota nova fica disponível imediatamente.\n- **Downgrade** — a cota nova vale a partir do próximo ciclo.\n- Créditos mensais **não acumulam** entre ciclos.\n\n## Planos de time\n\nEm times, quem é dono administra plano e assentos. Integrantes não precisam de assinatura própria. Veja [Times e assentos](/help/collaborate/teams-and-seats).","text":"Subir de plano Em Gerenciar conta → Faturamento, escolha o plano que quiser. Upgrades entram em vigor imediatamente — a cota nova fica disponível na hora. Descer de plano Downgrades entram em vigor a partir do próximo ciclo de faturamento. Você mantém o plano atual e a cota dele até lá, então nunca fica cortado no meio do mês por uma mudança feita no dia 3. Depois de descer, os limites do plano valem daí em diante. Projetos e telas acima do novo limite não são excluídos, mas você pode não conseguir criar mais até voltar para baixo dele. Mensal ↔ anual Você pode trocar a periodicidade quando quiser nas configurações de faturamento. A anual tem um desconto considerável em relação a doze meses da mensal. Uma coisa para saber: trocar no meio do ciclo pode gerar uma cobrança proporcional do provedor de pagamento além da cobrança do plano novo. Se preferir evitar duas cobranças próximas, troque no começo de um ciclo — ou fale com a gente antes e vemos isso junto. O que acontece com os créditos - Upgrade — a cota nova fica disponível imediatamente. - Downgrade — a cota nova vale a partir do próximo ciclo. - Créditos mensais não acumulam entre ciclos. Planos de time Em times, quem é dono administra plano e assentos. Integrantes não precisam de assinatura própria. Veja Times e assentos."},{"slug":"billing-and-invoices","category":"account-and-billing","categoryTitle":"Planos, créditos e faturamento","title":"Faturamento, faturas e formas de pagamento","description":"Formas de pagamento, onde encontrar as faturas e o que fazer diante de uma cobrança inesperada.","url":"https://uxmagic.ai/pt/help/account-and-billing/billing-and-invoices","type":"howto","keywords":["fatura","recibo","faturamento","cartão","pagamento","cobrado","imposto","stripe"],"headings":["Formas de pagamento","Faturas","Uma cobrança inesperada","Pagamentos que falham","Moeda"],"updated":"2026-08-27","faqs":[],"related":["upgrade-or-downgrade","refunds","cancel-your-subscription"],"markdown":"## Formas de pagamento\n\nOs pagamentos são processados pela Stripe. Os principais cartões de crédito e débito são aceitos; as formas locais disponíveis dependem do seu país. A UXMagic nunca vê nem armazena os dados completos do seu cartão.\n\n## Faturas\n\nFaturas e recibos ficam em **Gerenciar conta → Faturamento**. Cada cobrança tem uma fatura para baixar, e você pode adicionar os dados da sua empresa e o CNPJ/inscrição para que apareçam nela.\n\nPreencha seus dados de faturamento **antes** de precisar da fatura — reemitir depois é mais penoso do que preencher um formulário agora.\n\n## Uma cobrança inesperada\n\nEscreva para **hello@uxmagic.ai** antes de contestar no seu banco ou na Stripe. A maioria das dúvidas de faturamento se resolve no mesmo dia quando você vem primeiro até nós.\n\nAbrir uma contestação dispara um processo automático do lado do provedor de pagamento que pode suspender sua conta enquanto o caso é analisado — o que não ajuda ninguém, e você menos ainda. Preferimos muito mais simplesmente resolver.\n\n## Pagamentos que falham\n\nSe um pagamento falhar, você é avisado e ganha um prazo para atualizar o cartão antes que algo mude na sua conta. Atualize em **Gerenciar conta → Faturamento**.\n\n## Moeda\n\nOs preços são em dólares. Seu banco pode aplicar a própria conversão e tarifas.","text":"Formas de pagamento Os pagamentos são processados pela Stripe. Os principais cartões de crédito e débito são aceitos; as formas locais disponíveis dependem do seu país. A UXMagic nunca vê nem armazena os dados completos do seu cartão. Faturas Faturas e recibos ficam em Gerenciar conta → Faturamento. Cada cobrança tem uma fatura para baixar, e você pode adicionar os dados da sua empresa e o CNPJ/inscrição para que apareçam nela. Preencha seus dados de faturamento antes de precisar da fatura — reemitir depois é mais penoso do que preencher um formulário agora. Uma cobrança inesperada Escreva para hello@uxmagic.ai antes de contestar no seu banco ou na Stripe. A maioria das dúvidas de faturamento se resolve no mesmo dia quando você vem primeiro até nós. Abrir uma contestação dispara um processo automático do lado do provedor de pagamento que pode suspender sua conta enquanto o caso é analisado — o que não ajuda ninguém, e você menos ainda. Preferimos muito mais simplesmente resolver. Pagamentos que falham Se um pagamento falhar, você é avisado e ganha um prazo para atualizar o cartão antes que algo mude na sua conta. Atualize em Gerenciar conta → Faturamento. Moeda Os preços são em dólares. Seu banco pode aplicar a própria conversão e tarifas."},{"slug":"refunds","category":"account-and-billing","categoryTitle":"Planos, créditos e faturamento","title":"Reembolsos","description":"A política de reembolso, e o que fazer se algo deu errado.","url":"https://uxmagic.ai/pt/help/account-and-billing/refunds","type":"reference","keywords":["reembolso","dinheiro de volta","cancelar cobrança","ressarcir"],"headings":["A política","Se você não tem certeza de qual plano precisa","Se algo deu mesmo errado","Antes de contestar"],"updated":"2026-08-27","faqs":[],"related":["billing-and-invoices","cancel-your-subscription","contact-support"],"markdown":"## A política\n\nA UXMagic não oferece reembolso de assinaturas nem de compras de créditos. Recomendamos experimentar o plano Free antes — ele existe justamente para você avaliar o resultado antes de pagar.\n\n## Se você não tem certeza de qual plano precisa\n\n[Pergunte para a gente](/support) antes de comprar. Preferimos gastar cinco minutos ajudando você a escolher do que ver você comprar a coisa errada.\n\n## Se algo deu mesmo errado\n\nA política trata de arrependimento de compra, não de erros nossos. Se você foi cobrado em dobro, cobrado depois de cancelar, ou cobrado por um trabalho que falhou e não produziu nada, isso é um erro de faturamento — escreva para **hello@uxmagic.ai** com a fatura e resolvemos.\n\n## Antes de contestar\n\nVenha primeiro até nós. Uma contestação bancária pode suspender sua conta durante a análise, e demora muito mais que um e-mail. Veja [Faturamento, faturas e formas de pagamento](/help/account-and-billing/billing-and-invoices).","text":"A política A UXMagic não oferece reembolso de assinaturas nem de compras de créditos. Recomendamos experimentar o plano Free antes — ele existe justamente para você avaliar o resultado antes de pagar. Se você não tem certeza de qual plano precisa Pergunte para a gente antes de comprar. Preferimos gastar cinco minutos ajudando você a escolher do que ver você comprar a coisa errada. Se algo deu mesmo errado A política trata de arrependimento de compra, não de erros nossos. Se você foi cobrado em dobro, cobrado depois de cancelar, ou cobrado por um trabalho que falhou e não produziu nada, isso é um erro de faturamento — escreva para hello@uxmagic.ai com a fatura e resolvemos. Antes de contestar Venha primeiro até nós. Uma contestação bancária pode suspender sua conta durante a análise, e demora muito mais que um e-mail. Veja Faturamento, faturas e formas de pagamento."},{"slug":"cancel-your-subscription","category":"account-and-billing","categoryTitle":"Planos, créditos e faturamento","title":"Cancelar sua assinatura","description":"Como cancelar, quando o acesso termina e o que acontece com o seu trabalho.","url":"https://uxmagic.ai/pt/help/account-and-billing/cancel-your-subscription","type":"howto","keywords":["cancelar","cancelar assinatura","encerrar assinatura","parar de pagar","voltar para o free"],"headings":["Cancelar","O que acontece","Cancelar não é excluir","Se mudar de ideia","Antes de ir"],"updated":"2026-08-27","faqs":[],"related":["refunds","delete-your-account","upgrade-or-downgrade"],"markdown":"## Cancelar\n\n**Gerenciar conta → Faturamento → Cancelar assinatura.** Serão feitas algumas perguntas sobre o motivo — de fato úteis para nós, e puláveis.\n\n## O que acontece\n\n- Seu plano continua **ativo até o fim do ciclo de faturamento atual**. Você mantém a cota que pagou.\n- Depois disso, sua conta passa para o plano Free.\n- **Seus projetos não são excluídos.** Eles ficam na sua conta, sujeitos aos limites do Free sobre o que você pode criar daí em diante.\n- Sites publicados acima do limite do Free podem sair do ar. Confira antes de cancelar se um site no ar for importante.\n\n## Cancelar não é excluir\n\nCancelar interrompe a cobrança. Sua conta e seu trabalho continuam. Se você quer que a conta e os dados sumam, isso é [Excluir sua conta](/help/account-and-billing/delete-your-account) — e é permanente.\n\n## Se mudar de ideia\n\nAssine de novo quando quiser nas configurações de faturamento. Se fizer isso antes do fim do ciclo, nada se perde.\n\n## Antes de ir\n\nSe está saindo por um problema específico — qualidade do resultado, um recurso que falta, o custo — [conte para a gente](/support). Parte disso conseguimos corrigir, e parte já corrigimos e não soubemos avisar.","text":"Cancelar Gerenciar conta → Faturamento → Cancelar assinatura. Serão feitas algumas perguntas sobre o motivo — de fato úteis para nós, e puláveis. O que acontece - Seu plano continua ativo até o fim do ciclo de faturamento atual. Você mantém a cota que pagou. - Depois disso, sua conta passa para o plano Free. - Seus projetos não são excluídos. Eles ficam na sua conta, sujeitos aos limites do Free sobre o que você pode criar daí em diante. - Sites publicados acima do limite do Free podem sair do ar. Confira antes de cancelar se um site no ar for importante. Cancelar não é excluir Cancelar interrompe a cobrança. Sua conta e seu trabalho continuam. Se você quer que a conta e os dados sumam, isso é Excluir sua conta — e é permanente. Se mudar de ideia Assine de novo quando quiser nas configurações de faturamento. Se fizer isso antes do fim do ciclo, nada se perde. Antes de ir Se está saindo por um problema específico — qualidade do resultado, um recurso que falta, o custo — conte para a gente. Parte disso conseguimos corrigir, e parte já corrigimos e não soubemos avisar."},{"slug":"earn-free-credits","category":"account-and-billing","categoryTitle":"Planos, créditos e faturamento","title":"Ganhe créditos grátis","description":"Os quatro passos do Unlock Pro Plan, quanto cada um paga, e as outras formas de repor o saldo sem pagar.","url":"https://uxmagic.ai/pt/help/account-and-billing/earn-free-credits","type":"guide","keywords":["créditos grátis","ganhar créditos","desbloquear pro","upgrade grátis","mais créditos","créditos sem pagar","teste"],"headings":["A cota diária","Unlock Pro Plan — quatro passos","A verificação é manual","Indicações","Fazer os créditos renderem"],"updated":"2026-09-03","faqs":[{"question":"Como consigo créditos grátis?","answer":"Abra \"Upgrade for free\" no editor e conclua os quatro passos do Unlock Pro Plan — uma pesquisa curta, uma avaliação no Capterra, entrar na comunidade do Slack e deixar um depoimento. Cada passo paga créditos, e concluir os quatro libera 3 dias de Pro. Indicar alguém rende mais 250 créditos."},{"question":"Os créditos caem na hora?","answer":"Não. Alguém do time verifica cada passo e você recebe um e-mail quando é aprovado, então dê um tempo em vez de enviar de novo."}],"related":["how-credits-work","referral-program","plans-and-limits"],"markdown":"Há três formas de somar créditos sem pagar: a cota diária gratuita, a lista **Unlock Pro Plan** e as indicações.\n\n## A cota diária\n\nToda conta Free recebe **20 créditos por dia**, renovados diariamente — o suficiente para cerca de 3 telas. Um saldo zerado volta amanhã, então uma semana parada não custa nada. Veja [Planos e limites](/help/account-and-billing/plans-and-limits).\n\n## Unlock Pro Plan — quatro passos\n\nNo editor, clique em **Upgrade for free**. O painel acompanha seu progresso por quatro passos, e **concluir os quatro libera 3 dias de Pro Plan grátis**. Cada passo também paga créditos por conta própria:\n\n| Passo | Créditos |\n| --- | --- |\n| Responder algumas perguntas sobre como você usa o UXMagic | 12 |\n| Deixar uma avaliação no Capterra | 12 |\n| Entrar na comunidade do UXMagic no Slack | 12 |\n| Deixar um depoimento — texto, ou texto e vídeo | até 36 |\n\nAlgumas coisas que vale saber:\n\n- **Cada passo paga uma vez.** Não dá para reivindicar o mesmo passo duas vezes.\n- **Uma avaliação conta onde você a deixou.** O Capterra substituiu o Trustpilot como passo de avaliação; se você nos avaliou no Trustpilot antes dessa troca, ela continua valendo e você não será solicitado de novo.\n- **O depoimento paga mais com vídeo** — 12 créditos pelo texto e 24 a mais por um vídeo curto.\n\n## A verificação é manual\n\nOs créditos não são concedidos no instante em que você envia. Alguém confere se a avaliação, o post ou o depoimento são reais, e você recebe um e-mail quando cai. Isso é proposital — é o que mantém a recompensa possível de oferecer — então dê um tempo em vez de enviar duas vezes.\n\n## Indicações\n\nIndicar alguém paga **250 créditos** (cerca de US$ 10) para vocês dois quando essa pessoa faz o primeiro upgrade para um plano pago, em até cinco indicações. É de longe a maior fonte isolada de créditos grátis. Veja [Indique e ganhe](/help/account-and-billing/referral-program).\n\n## Fazer os créditos renderem\n\nGanhar mais é só metade. Uma edição direcionada custa 0,2 crédito enquanto regerar uma tela custa 6, então os hábitos de [Como funcionam os créditos](/help/account-and-billing/how-credits-work) esticam um saldo mais do que todos esses passos o enchem.","text":"Há três formas de somar créditos sem pagar: a cota diária gratuita, a lista Unlock Pro Plan e as indicações. A cota diária Toda conta Free recebe 20 créditos por dia, renovados diariamente — o suficiente para cerca de 3 telas. Um saldo zerado volta amanhã, então uma semana parada não custa nada. Veja Planos e limites. Unlock Pro Plan — quatro passos No editor, clique em Upgrade for free. O painel acompanha seu progresso por quatro passos, e concluir os quatro libera 3 dias de Pro Plan grátis. Cada passo também paga créditos por conta própria: Passo Créditos --- --- Responder algumas perguntas sobre como você usa o UXMagic 12 Deixar uma avaliação no Capterra 12 Entrar na comunidade do UXMagic no Slack 12 Deixar um depoimento — texto, ou texto e vídeo até 36 Algumas coisas que vale saber: - Cada passo paga uma vez. Não dá para reivindicar o mesmo passo duas vezes. - Uma avaliação conta onde você a deixou. O Capterra substituiu o Trustpilot como passo de avaliação; se você nos avaliou no Trustpilot antes dessa troca, ela continua valendo e você não será solicitado de novo. - O depoimento paga mais com vídeo — 12 créditos pelo texto e 24 a mais por um vídeo curto. A verificação é manual Os créditos não são concedidos no instante em que você envia. Alguém confere se a avaliação, o post ou o depoimento são reais, e você recebe um e-mail quando cai. Isso é proposital — é o que mantém a recompensa possível de oferecer — então dê um tempo em vez de enviar duas vezes. Indicações Indicar alguém paga 250 créditos (cerca de US$ 10) para vocês dois quando essa pessoa faz o primeiro upgrade para um plano pago, em até cinco indicações. É de longe a maior fonte isolada de créditos grátis. Veja Indique e ganhe. Fazer os créditos renderem Ganhar mais é só metade. Uma edição direcionada custa 0,2 crédito enquanto regerar uma tela custa 6, então os hábitos de Como funcionam os créditos esticam um saldo mais do que todos esses passos o enchem."},{"slug":"referral-program","category":"account-and-billing","categoryTitle":"Planos, créditos e faturamento","title":"Indique e ganhe","description":"Convide pessoas para a UXMagic e ganhe créditos quando elas assinarem um plano pago.","url":"https://uxmagic.ai/pt/help/account-and-billing/referral-program","type":"guide","keywords":["indicação","indicar um amigo","convidar","ganhar créditos","afiliados","recompensa"],"headings":["Como funciona","A recompensa","O limite","Regras","Programa de afiliados"],"updated":"2026-08-27","faqs":[{"question":"Quando recebo os créditos?","answer":"Quando a pessoa indicada assina um plano pago pela primeira vez — não quando ela se cadastra."},{"question":"Existe um limite?","answer":"Você ganha em até cinco indicações. As seguintes continuam aparecendo no seu total, mas não geram mais recompensa."}],"related":["earn-free-credits","how-credits-work","plans-and-limits"],"markdown":"## Como funciona\n\n1. Pegue seu link de indicação em **Indique e ganhe**, na sua conta.\n2. Compartilhe.\n3. Quando alguém se cadastra por ele e **assina um plano pago pela primeira vez**, os dois ganham créditos.\n\n## A recompensa\n\n**250 créditos para cada** — apresentados como “US$ 10 em créditos” — para quem indica e para quem foi indicado.\n\nPara ter uma ideia: 250 créditos são cerca de 80 telas novas, ou muitíssimas edições. Veja [Como funcionam os créditos](/help/account-and-billing/how-credits-work).\n\n## O limite\n\nVocê ganha em até **cinco** indicações. Além disso, as indicações continuam aparecendo no seu total mas param de gerar recompensa.\n\n## Regras\n\n- A recompensa é disparada pela **primeira assinatura paga** da pessoa indicada, não pelo cadastro.\n- Autoindicações e contas duplicadas não valem.\n- Os créditos caem automaticamente nas duas contas; não há nada para resgatar.\n\n## Programa de afiliados\n\nSe você indica em escala — uma newsletter, um curso, a carteira de clientes de uma agência — o [programa de afiliados](/affiliate) paga comissão em vez de créditos e se encaixa melhor.","text":"Como funciona 1. Pegue seu link de indicação em Indique e ganhe, na sua conta. 2. Compartilhe. 3. Quando alguém se cadastra por ele e assina um plano pago pela primeira vez, os dois ganham créditos. A recompensa 250 créditos para cada — apresentados como “US$ 10 em créditos” — para quem indica e para quem foi indicado. Para ter uma ideia: 250 créditos são cerca de 80 telas novas, ou muitíssimas edições. Veja Como funcionam os créditos. O limite Você ganha em até cinco indicações. Além disso, as indicações continuam aparecendo no seu total mas param de gerar recompensa. Regras - A recompensa é disparada pela primeira assinatura paga da pessoa indicada, não pelo cadastro. - Autoindicações e contas duplicadas não valem. - Os créditos caem automaticamente nas duas contas; não há nada para resgatar. Programa de afiliados Se você indica em escala — uma newsletter, um curso, a carteira de clientes de uma agência — o programa de afiliados paga comissão em vez de créditos e se encaixa melhor."},{"slug":"delete-your-account","category":"account-and-billing","categoryTitle":"Planos, créditos e faturamento","title":"Excluir sua conta","description":"Exclua permanentemente sua conta da UXMagic e tudo o que há nela.","url":"https://uxmagic.ai/pt/help/account-and-billing/delete-your-account","type":"howto","keywords":["excluir conta","remover conta","lgpd","apagar","encerrar conta","privacidade"],"headings":["Antes de excluir","Exporte primeiro","Excluir","Assinatura ativa","Sites publicados","Times"],"updated":"2026-08-27","faqs":[],"related":["cancel-your-subscription","account-and-profile"],"markdown":"## Antes de excluir\n\nA exclusão é **permanente**. Ela remove seus projetos, telas, temas, recursos e histórico. Não há desfazer nem recuperação.\n\nSe você só quer parar de pagar, [cancele sua assinatura](/help/account-and-billing/cancel-your-subscription) — seu trabalho fica.\n\n## Exporte primeiro\n\nDepois que sumir, sumiu. Leve o que precisar:\n\n- [Exportar para o Figma](/help/export-and-handoff/export-to-figma)\n- [Exportar código](/help/export-and-handoff/export-code)\n- [Exportar como PDF ou imagem](/help/export-and-handoff/export-pdf-and-images)\n\n## Excluir\n\n1. **Gerenciar conta → Excluir conta.**\n2. Confirme — há uma confirmação em dois passos, de propósito.\n3. Se quiser, conte o motivo. É lido por pessoas, e é a informação mais útil que recebemos.\n\n## Assinatura ativa\n\nCancele antes a assinatura para a cobrança parar de forma limpa. Excluir uma conta não resolve por si só uma questão de faturamento em aberto — se tiver uma, resolva antes.\n\n## Sites publicados\n\nExcluir sua conta tira seus sites publicados do ar e libera os subdomínios. Se um site no ar for importante, mude-o de lugar antes de excluir.\n\n## Times\n\nSe você é dono de um time, transfira a propriedade antes de excluir, ou os projetos do time vão junto com você.","text":"Antes de excluir A exclusão é permanente. Ela remove seus projetos, telas, temas, recursos e histórico. Não há desfazer nem recuperação. Se você só quer parar de pagar, cancele sua assinatura — seu trabalho fica. Exporte primeiro Depois que sumir, sumiu. Leve o que precisar: - Exportar para o Figma - Exportar código - Exportar como PDF ou imagem Excluir 1. Gerenciar conta → Excluir conta. 2. Confirme — há uma confirmação em dois passos, de propósito. 3. Se quiser, conte o motivo. É lido por pessoas, e é a informação mais útil que recebemos. Assinatura ativa Cancele antes a assinatura para a cobrança parar de forma limpa. Excluir uma conta não resolve por si só uma questão de faturamento em aberto — se tiver uma, resolva antes. Sites publicados Excluir sua conta tira seus sites publicados do ar e libera os subdomínios. Se um site no ar for importante, mude-o de lugar antes de excluir. Times Se você é dono de um time, transfira a propriedade antes de excluir, ou os projetos do time vão junto com você."},{"slug":"i-ran-out-of-credits","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"Fiquei sem créditos","description":"O que acontece quando o saldo acaba no meio de uma rodada, e como voltar a andar.","url":"https://uxmagic.ai/pt/help/troubleshooting/i-ran-out-of-credits","type":"troubleshooting","keywords":["sem créditos","créditos acabaram","insuficiente","saldo","bloqueado","402"],"headings":["O que você vai ver","Se aconteceu no meio da rodada","Conseguir mais créditos","Fazer a próxima leva durar","Fundos de time","Cobrado por algo que falhou?"],"updated":"2026-09-03","faqs":[],"related":["earn-free-credits","how-credits-work","upgrade-or-downgrade"],"markdown":"## O que você vai ver\n\nUma mensagem clara de que seus créditos acabaram, ao tentar iniciar uma sessão ou no meio de uma rodada. Sessões precisam de pelo menos **4 créditos** para começar.\n\n## Se aconteceu no meio da rodada\n\nAs telas já projetadas são **mantidas**. Você não perdeu o trabalho que terminou — só ainda não tem o resto do fluxo.\n\nRecarregue ou suba de plano, e então peça as telas que faltam. Elas serão projetadas dentro do mesmo tema, então o fluxo continua coerente.\n\n## Conseguir mais créditos\n\n- **[Subir de plano](/help/account-and-billing/upgrade-or-downgrade)** — um plano pago renova os créditos a cada ciclo de faturamento.\n- **[Indicar alguém](/help/account-and-billing/referral-program)** — 250 créditos quando essa pessoa assinar um plano pago.\n- **Esperar a renovação** — no plano Free os créditos são renovados todo dia; num plano pago eles reiniciam na sua data de faturamento. Nenhum dos dois acumula, então não há o que poupar.\n\n## Fazer a próxima leva durar\n\nO grande ganho é não regenerar. Uma edição direcionada custa 0,2 crédito; regenerar uma tela custa 6. A tabela completa e os hábitos que mais economizam estão em [Como funcionam os créditos](/help/account-and-billing/how-credits-work).\n\n## Fundos de time\n\nEm um projeto de time, a cobrança vai para o fundo **do time** ou para a sua alocação nele. “Sem créditos” ali pode significar que a sua alocação pessoal acabou enquanto o fundo do time não — peça a quem é dono para aumentá-la. Veja [Times e assentos](/help/collaborate/teams-and-seats).\n\n## Cobrado por algo que falhou?\n\nTrabalho que não produziu nada não deveria ser cobrado. Se foi, [fale com o suporte](/help/troubleshooting/contact-support) com o link do projeto e aproximadamente quando aconteceu.","text":"O que você vai ver Uma mensagem clara de que seus créditos acabaram, ao tentar iniciar uma sessão ou no meio de uma rodada. Sessões precisam de pelo menos 4 créditos para começar. Se aconteceu no meio da rodada As telas já projetadas são mantidas. Você não perdeu o trabalho que terminou — só ainda não tem o resto do fluxo. Recarregue ou suba de plano, e então peça as telas que faltam. Elas serão projetadas dentro do mesmo tema, então o fluxo continua coerente. Conseguir mais créditos - Subir de plano — um plano pago renova os créditos a cada ciclo de faturamento. - Indicar alguém — 250 créditos quando essa pessoa assinar um plano pago. - Esperar a renovação — no plano Free os créditos são renovados todo dia; num plano pago eles reiniciam na sua data de faturamento. Nenhum dos dois acumula, então não há o que poupar. Fazer a próxima leva durar O grande ganho é não regenerar. Uma edição direcionada custa 0,2 crédito; regenerar uma tela custa 6. A tabela completa e os hábitos que mais economizam estão em Como funcionam os créditos. Fundos de time Em um projeto de time, a cobrança vai para o fundo do time ou para a sua alocação nele. “Sem créditos” ali pode significar que a sua alocação pessoal acabou enquanto o fundo do time não — peça a quem é dono para aumentá-la. Veja Times e assentos. Cobrado por algo que falhou? Trabalho que não produziu nada não deveria ser cobrado. Se foi, fale com o suporte com o link do projeto e aproximadamente quando aconteceu."},{"slug":"blank-or-empty-screens","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"Uma tela está em branco ou vazia","description":"Frames vazios depois de um plano, canvas em branco ao abrir, e telas que não renderizam nada.","url":"https://uxmagic.ai/pt/help/troubleshooting/blank-or-empty-screens","type":"troubleshooting","keywords":["em branco","vazia","nada","tela branca","não renderiza","tela faltando"],"headings":["1. O frame foi planejado mas nunca projetado","2. O canvas está em branco mas as telas existem","3. A tela tem conteúdo mas não renderiza nada","Ainda em branco"],"updated":"2026-08-27","faqs":[],"related":["flow-mode-and-screen-plans","style-guide-did-not-apply","contact-support"],"markdown":"Telas em branco têm três causas distintas. Percorra na ordem.\n\n## 1. O frame foi planejado mas nunca projetado\n\nO caso mais comum. Um plano de telas cria frames nomeados e **vazios** no canvas, e depois os projeta um por vez. Se a rodada parou cedo — sem créditos, um erro, um turno cancelado — sobram frames com nome certo e sem conteúdo.\n\n**Solução:** peça que as telas vazias sejam projetadas:\n\n> Projete as telas de Preços e Configurações — elas ainda estão vazias.\n\nConfira antes seu saldo de créditos, para não acontecer de novo.\n\n## 2. O canvas está em branco mas as telas existem\n\nSe o projeto abre sem nada visível e você sabe que há telas:\n\n1. **Ajustar à tela** (Shift+1). As telas podem estar fora da área visível.\n2. **Recarregue a página.**\n3. **Tente uma janela de navegador mais larga.** Uma janela muito estreita pode reduzir a área do canvas a quase nada.\n4. **Tente outro navegador** para descartar uma extensão.\n\n## 3. A tela tem conteúdo mas não renderiza nada\n\nCostuma ser um problema de estilo, não de conteúdo — veja [Meu guia de estilo não foi aplicado](/help/troubleshooting/style-guide-did-not-apply). Se a tela tem um gráfico ou uma animação, veja [Gráficos ou animações não renderizam](/help/troubleshooting/charts-or-animations-not-rendering).\n\n## Ainda em branco\n\n[Fale com o suporte](/help/troubleshooting/contact-support) com o link do projeto e o nome da tela. Por favor, não exclua a tela em branco antes — ela é a prova.","text":"Telas em branco têm três causas distintas. Percorra na ordem. 1. O frame foi planejado mas nunca projetado O caso mais comum. Um plano de telas cria frames nomeados e vazios no canvas, e depois os projeta um por vez. Se a rodada parou cedo — sem créditos, um erro, um turno cancelado — sobram frames com nome certo e sem conteúdo. Solução: peça que as telas vazias sejam projetadas: Projete as telas de Preços e Configurações — elas ainda estão vazias. Confira antes seu saldo de créditos, para não acontecer de novo. 2. O canvas está em branco mas as telas existem Se o projeto abre sem nada visível e você sabe que há telas: 1. Ajustar à tela (Shift+1). As telas podem estar fora da área visível. 2. Recarregue a página. 3. Tente uma janela de navegador mais larga. Uma janela muito estreita pode reduzir a área do canvas a quase nada. 4. Tente outro navegador para descartar uma extensão. 3. A tela tem conteúdo mas não renderiza nada Costuma ser um problema de estilo, não de conteúdo — veja Meu guia de estilo não foi aplicado. Se a tela tem um gráfico ou uma animação, veja Gráficos ou animações não renderizam. Ainda em branco Fale com o suporte com o link do projeto e o nome da tela. Por favor, não exclua a tela em branco antes — ela é a prova."},{"slug":"style-guide-did-not-apply","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"Meu guia de estilo ou tema não foi aplicado","description":"As telas renderizam sem estilo ou ignoram uma mudança de tema — o que checar e o que nos enviar.","url":"https://uxmagic.ai/pt/help/troubleshooting/style-guide-did-not-apply","type":"troubleshooting","keywords":["sem estilo","tema não aplicado","sem estilos","guia de estilo","cores faltando","cru"],"headings":["Olhe o canvas, não a resposta","Soluções, na ordem","Fontes em particular","Não conserte tela por tela","Reportar"],"updated":"2026-08-27","faqs":[],"related":["themes-and-style-guides","fonts-and-typography","blank-or-empty-screens"],"markdown":"Sintomas: uma tela renderiza como conteúdo cru sem estilo, ou uma mudança de tema aparece visivelmente em algumas telas e em outras não.\n\n## Olhe o canvas, não a resposta\n\nHábito importante: o chat pode informar uma mudança de tema como feita enquanto o canvas não se mexeu. **Confie no canvas.** Se as telas não mudaram, a mudança não pegou, diga o que disser a mensagem.\n\n## Soluções, na ordem\n\n1. **Recarregue o projeto.** Uma renderização velha é a explicação mais barata possível.\n2. **Reaplique a mudança de tema no chat** — e observe as telas.\n3. **Reaplique no nível do projeto.** Se você pediu a mudança com o foco em uma tela, peça de novo explicitamente: *“Aplique este tema a todas as telas do projeto.”*\n4. **Confira a origem da tela.** Telas criadas como variantes responsivas, ou por alguns caminhos de importação, historicamente são as mais propensas a perder o tema do projeto. Se uma tela específica destoa, essa é a causa provável — peça para aplicar o tema àquela tela pelo nome.\n\n## Fontes em particular\n\nUma fonte pode estar definida no tema enquanto a folha de estilo que a carrega não é atualizada, então o design afirma usar uma fonte que não está renderizando. Veja [Fontes e tipografia](/help/design-and-edit/fonts-and-typography).\n\n## Não conserte tela por tela\n\nRecolorir cada tela à mão faz o sintoma sumir e garante desvio depois. Faça o tema ser aplicado direito.\n\n## Reportar\n\n[Fale com o suporte](/help/troubleshooting/contact-support) com o link do projeto, o nome da tela e o que você pediu. Isto é corrigível do nosso lado, e são os relatos específicos que tornam isso possível.","text":"Sintomas: uma tela renderiza como conteúdo cru sem estilo, ou uma mudança de tema aparece visivelmente em algumas telas e em outras não. Olhe o canvas, não a resposta Hábito importante: o chat pode informar uma mudança de tema como feita enquanto o canvas não se mexeu. Confie no canvas. Se as telas não mudaram, a mudança não pegou, diga o que disser a mensagem. Soluções, na ordem 1. Recarregue o projeto. Uma renderização velha é a explicação mais barata possível. 2. Reaplique a mudança de tema no chat — e observe as telas. 3. Reaplique no nível do projeto. Se você pediu a mudança com o foco em uma tela, peça de novo explicitamente: “Aplique este tema a todas as telas do projeto.” 4. Confira a origem da tela. Telas criadas como variantes responsivas, ou por alguns caminhos de importação, historicamente são as mais propensas a perder o tema do projeto. Se uma tela específica destoa, essa é a causa provável — peça para aplicar o tema àquela tela pelo nome. Fontes em particular Uma fonte pode estar definida no tema enquanto a folha de estilo que a carrega não é atualizada, então o design afirma usar uma fonte que não está renderizando. Veja Fontes e tipografia. Não conserte tela por tela Recolorir cada tela à mão faz o sintoma sumir e garante desvio depois. Faça o tema ser aplicado direito. Reportar Fale com o suporte com o link do projeto, o nome da tela e o que você pediu. Isto é corrigível do nosso lado, e são os relatos específicos que tornam isso possível."},{"slug":"images-are-broken-or-missing","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"Imagens quebradas, faltando ou travadas carregando","description":"Caixas de marcador, imagens carregando para sempre e imagens que somem depois da exportação.","url":"https://uxmagic.ai/pt/help/troubleshooting/images-are-broken-or-missing","type":"troubleshooting","keywords":["imagem quebrada","imagem não carrega","marcador de posição","imagem faltando","carregando","travada"],"headings":["Uma imagem fica para sempre em um marcador de carregamento","Um ícone de imagem quebrada","Uma imagem enviada não pode ser lida","As imagens somem depois de exportar o código","As imagens ficam estranhas depois de uma mudança de tema","O mesmo logotipo errado em todo lugar"],"updated":"2026-08-27","faqs":[],"related":["images-in-your-designs","export-code","contact-support"],"markdown":"## Uma imagem fica para sempre em um marcador de carregamento\n\nÀs vezes uma imagem termina de ser gerada mas o cartão continua mostrando um marcador. A imagem em si costuma estar bem.\n\n**Solução:** recarregue o projeto. Se a imagem aparecer, era um problema de exibição e não de geração. Se continuar como marcador depois de recarregar, peça para regenerá-la.\n\n## Um ícone de imagem quebrada\n\nA referência da imagem existe mas o arquivo não resolve. Peça para regenerar:\n\n> A imagem do hero na landing page está quebrada — regenere.\n\n## Uma imagem enviada não pode ser lida\n\nSe você deu à IA a URL de uma imagem e ela diz que não consegue lê-la, a URL precisa ser **publicamente acessível**. Links atrás de login, em um bucket privado, ou links de compartilhamento expirados não podem ser buscados. Envie o arquivo direto em vez de colar um link.\n\n## As imagens somem depois de exportar o código\n\nEsperado, e importante prever: o código exportado referencia imagens por URL no armazenamento de recursos do seu projeto. Baixe os recursos para o seu repositório antes de publicar — do contrário, seu site em produção depende de URLs que você não controla. Veja [Exportar código](/help/export-and-handoff/export-code).\n\n## As imagens ficam estranhas depois de uma mudança de tema\n\nImagens geradas não seguem automaticamente uma paleta nova. Peça para recolori-las no lugar em vez de regenerar — assim todo o resto da imagem fica idêntico. Veja [Imagens nos seus designs](/help/design-and-edit/images-in-your-designs).\n\n## O mesmo logotipo errado em todo lugar\n\nUse o caminho de substituir em todo lugar em vez de editar as telas uma a uma:\n\n> Substitua o logotipo em todas as telas pelo que acabei de enviar.","text":"Uma imagem fica para sempre em um marcador de carregamento Às vezes uma imagem termina de ser gerada mas o cartão continua mostrando um marcador. A imagem em si costuma estar bem. Solução: recarregue o projeto. Se a imagem aparecer, era um problema de exibição e não de geração. Se continuar como marcador depois de recarregar, peça para regenerá-la. Um ícone de imagem quebrada A referência da imagem existe mas o arquivo não resolve. Peça para regenerar: A imagem do hero na landing page está quebrada — regenere. Uma imagem enviada não pode ser lida Se você deu à IA a URL de uma imagem e ela diz que não consegue lê-la, a URL precisa ser publicamente acessível. Links atrás de login, em um bucket privado, ou links de compartilhamento expirados não podem ser buscados. Envie o arquivo direto em vez de colar um link. As imagens somem depois de exportar o código Esperado, e importante prever: o código exportado referencia imagens por URL no armazenamento de recursos do seu projeto. Baixe os recursos para o seu repositório antes de publicar — do contrário, seu site em produção depende de URLs que você não controla. Veja Exportar código. As imagens ficam estranhas depois de uma mudança de tema Imagens geradas não seguem automaticamente uma paleta nova. Peça para recolori-las no lugar em vez de regenerar — assim todo o resto da imagem fica idêntico. Veja Imagens nos seus designs. O mesmo logotipo errado em todo lugar Use o caminho de substituir em todo lugar em vez de editar as telas uma a uma: Substitua o logotipo em todas as telas pelo que acabei de enviar."},{"slug":"clone-came-out-blank-or-partial","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"Meu clone saiu vazio ou parcial","description":"Por que o clone de um site pode voltar incompleto, e como terminá-lo.","url":"https://uxmagic.ai/pt/help/troubleshooting/clone-came-out-blank-or-partial","type":"troubleshooting","keywords":["clone falhou","clone parcial","clone vazio","clonar site","seções faltando"],"headings":["Marcadores onde deveriam estar as seções","Não voltou nada","Ao clone faltam justo as partes que me interessavam","O texto se sobrepõe ou fica estranho"],"updated":"2026-08-27","faqs":[],"related":["clone-a-website","blank-or-empty-screens","how-credits-work"],"markdown":"## Marcadores onde deveriam estar as seções\n\nÉ de propósito. Quando uma página é longa ou complexa demais para reconstruir em uma passagem, as seções que não deram são deixadas no canvas como **marcadores identificados** — uma lacuna honesta em vez de uma página silenciosamente encurtada.\n\n**Solução:** peça à IA que conclua o clone.\n\n> Conclua o clone — as seções de marcador ainda estão vazias.\n\nEla recaptura a página original e reconstrói só as seções que faltam. Isso custa uma fração de um clone novo (2 créditos contra 10), então não rode o clone inteiro de novo.\n\n## Não voltou nada\n\nNormalmente a página não pôde ser capturada:\n\n- **Ela exige login.** Não é clonável. Faça uma captura da página e use [De captura para interface](/help/generate/screenshot-to-ui).\n- **Proteção antibots.** Desafios do Cloudflare e afins bloqueiam a captura automatizada.\n- **A URL estava errada.** Inclua o protocolo e confira se ela carrega em uma janela anônima.\n- **O conteúdo está atrás de interação.** Menus, modais e slides seguintes de um carrossel não existem até alguém clicar.\n\n## Ao clone faltam justo as partes que me interessavam\n\nPáginas longas perdem o final primeiro. Se o que você precisa está bem embaixo, clone e depois peça de forma específica:\n\n> Reconstrua as seções de perguntas frequentes e rodapé daquela página.\n\n## O texto se sobrepõe ou fica estranho\n\nReporte. A qualidade do resultado da clonagem é algo em que trabalhamos ativamente, e exemplos específicos são o que a impulsiona — [fale com o suporte](/help/troubleshooting/contact-support) com a URL de origem e o link do projeto.","text":"Marcadores onde deveriam estar as seções É de propósito. Quando uma página é longa ou complexa demais para reconstruir em uma passagem, as seções que não deram são deixadas no canvas como marcadores identificados — uma lacuna honesta em vez de uma página silenciosamente encurtada. Solução: peça à IA que conclua o clone. Conclua o clone — as seções de marcador ainda estão vazias. Ela recaptura a página original e reconstrói só as seções que faltam. Isso custa uma fração de um clone novo (2 créditos contra 10), então não rode o clone inteiro de novo. Não voltou nada Normalmente a página não pôde ser capturada: - Ela exige login. Não é clonável. Faça uma captura da página e use De captura para interface. - Proteção antibots. Desafios do Cloudflare e afins bloqueiam a captura automatizada. - A URL estava errada. Inclua o protocolo e confira se ela carrega em uma janela anônima. - O conteúdo está atrás de interação. Menus, modais e slides seguintes de um carrossel não existem até alguém clicar. Ao clone faltam justo as partes que me interessavam Páginas longas perdem o final primeiro. Se o que você precisa está bem embaixo, clone e depois peça de forma específica: Reconstrua as seções de perguntas frequentes e rodapé daquela página. O texto se sobrepõe ou fica estranho Reporte. A qualidade do resultado da clonagem é algo em que trabalhamos ativamente, e exemplos específicos são o que a impulsiona — fale com o suporte com a URL de origem e o link do projeto."},{"slug":"figma-export-failed","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"Minha exportação para o Figma falhou","description":"Erros de exportação, arquivos do Figma vazios e exportações que consomem cota.","url":"https://uxmagic.ai/pt/help/troubleshooting/figma-export-failed","type":"troubleshooting","keywords":["exportação para o figma falhou","erro de exportação","figma vazio","exportação não funciona"],"headings":["Confira sua cota de exportações","A exportação rodou mas o Figma está vazio","A exportação deu erro","Reconectar","Uma exportação que falha não deveria custar uma exportação","O arquivo está bom mas o layout está fora"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","figma-plugin","plans-and-limits"],"markdown":"## Confira sua cota de exportações\n\nAs exportações para o Figma são contadas por plano. Se sua cota acabou, as exportações param até o próximo ciclo ou até um upgrade. As exportações restantes aparecem na sua conta. Veja [Planos e limites](/help/account-and-billing/plans-and-limits).\n\n## A exportação rodou mas o Figma está vazio\n\n- Confira se você está no **arquivo e na página certos do Figma** — os frames caem onde a exportação apontou, que pode não ser onde você está olhando.\n- Tente **ajustar o zoom** no Figma; os frames podem estar fora da área visível.\n- Se exportou pelo plugin, garanta que ele está logado na **mesma conta da UXMagic**.\n\n## A exportação deu erro\n\n1. **Tente uma tela só** em vez do projeto inteiro. Isso isola uma tela problemática.\n2. **Reconecte o Figma** em Integrações — tokens OAuth expiram.\n3. **Confira o status do próprio Figma** se tudo estiver falhando ao mesmo tempo.\n\n## Reconectar\n\n**Integrações → Figma → desconectar e conectar de novo.** Isso resolve a maioria das falhas de autorização.\n\n## Uma exportação que falha não deveria custar uma exportação\n\nSe uma tentativa falha consumiu parte da sua cota, [fale com o suporte](/help/troubleshooting/contact-support) com o horário e devolvemos.\n\n## O arquivo está bom mas o layout está fora\n\nA estrutura é traduzida fielmente, mas Figma e web compõem texto de formas diferentes, então espere pequenas diferenças de quebra de linha e em efeitos sem equivalente direto. Se uma seção inteira está errada em vez de levemente diferente, vale reportar.","text":"Confira sua cota de exportações As exportações para o Figma são contadas por plano. Se sua cota acabou, as exportações param até o próximo ciclo ou até um upgrade. As exportações restantes aparecem na sua conta. Veja Planos e limites. A exportação rodou mas o Figma está vazio - Confira se você está no arquivo e na página certos do Figma — os frames caem onde a exportação apontou, que pode não ser onde você está olhando. - Tente ajustar o zoom no Figma; os frames podem estar fora da área visível. - Se exportou pelo plugin, garanta que ele está logado na mesma conta da UXMagic. A exportação deu erro 1. Tente uma tela só em vez do projeto inteiro. Isso isola uma tela problemática. 2. Reconecte o Figma em Integrações — tokens OAuth expiram. 3. Confira o status do próprio Figma se tudo estiver falhando ao mesmo tempo. Reconectar Integrações → Figma → desconectar e conectar de novo. Isso resolve a maioria das falhas de autorização. Uma exportação que falha não deveria custar uma exportação Se uma tentativa falha consumiu parte da sua cota, fale com o suporte com o horário e devolvemos. O arquivo está bom mas o layout está fora A estrutura é traduzida fielmente, mas Figma e web compõem texto de formas diferentes, então espere pequenas diferenças de quebra de linha e em efeitos sem equivalente direto. Se uma seção inteira está errada em vez de levemente diferente, vale reportar."},{"slug":"my-changes-reverted","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"Minhas mudanças foram revertidas ou sumiram","description":"Uma troca de versão que volta atrás, ou edições que parecem não salvar.","url":"https://uxmagic.ai/pt/help/troubleshooting/my-changes-reverted","type":"troubleshooting","keywords":["revertido","mudanças perdidas","não salva","se desfaz sozinho","sumiu","rollback"],"headings":["Uma versão selecionada volta atrás quando você clica fora","Mudanças do modo edição não ficam","Uma edição da IA foi na direção errada","⌘Z não faz nada","Uma tela inteira sumiu"],"updated":"2026-08-27","faqs":[],"related":["versions-and-history","editing-a-screen","contact-support"],"markdown":"## Uma versão selecionada volta atrás quando você clica fora\n\nSe você escolhe uma versão anterior e a tela reverte assim que clica em outro lugar, a seleção não foi persistida. Tente:\n\n1. Selecione a versão e **espere o canvas assentar** antes de clicar fora.\n2. **Recarregue** e confira qual versão está ativa.\n3. Se continuar revertendo, [fale com o suporte](/help/troubleshooting/contact-support) com o link do projeto e o nome da tela — isso é um defeito, não uma configuração.\n\n## Mudanças do modo edição não ficam\n\nClique fora do elemento editado para confirmar a mudança, e depois recarregue para conferir que salvou. Se o texto que você digitou sumiu após recarregar, conte para a gente — com o nome da tela e o que você digitou.\n\n## Uma edição da IA foi na direção errada\n\nNada é destruído. Cada mudança da IA cria uma **versão nova** e a anterior continua lá — volte para ela. Veja [Versões e histórico](/help/design-and-edit/versions-and-history).\n\n## ⌘Z não faz nada\n\nClique primeiro em uma área vazia do canvas. Enquanto o cursor está no campo de prompt, o desfazer pertence ao campo de texto. Note também que o desfazer cobre ações do canvas, não gerações da IA — para essas, use as versões.\n\n## Uma tela inteira sumiu\n\nConfira a **lixeira** do projeto e o histórico de versões. Se uma tela realmente sumiu, fale com o suporte rápido e não continue trabalhando naquele projeto — é mais fácil recuperar antes que mais mudanças se acumulem por cima.","text":"Uma versão selecionada volta atrás quando você clica fora Se você escolhe uma versão anterior e a tela reverte assim que clica em outro lugar, a seleção não foi persistida. Tente: 1. Selecione a versão e espere o canvas assentar antes de clicar fora. 2. Recarregue e confira qual versão está ativa. 3. Se continuar revertendo, fale com o suporte com o link do projeto e o nome da tela — isso é um defeito, não uma configuração. Mudanças do modo edição não ficam Clique fora do elemento editado para confirmar a mudança, e depois recarregue para conferir que salvou. Se o texto que você digitou sumiu após recarregar, conte para a gente — com o nome da tela e o que você digitou. Uma edição da IA foi na direção errada Nada é destruído. Cada mudança da IA cria uma versão nova e a anterior continua lá — volte para ela. Veja Versões e histórico. ⌘Z não faz nada Clique primeiro em uma área vazia do canvas. Enquanto o cursor está no campo de prompt, o desfazer pertence ao campo de texto. Note também que o desfazer cobre ações do canvas, não gerações da IA — para essas, use as versões. Uma tela inteira sumiu Confira a lixeira do projeto e o histórico de versões. Se uma tela realmente sumiu, fale com o suporte rápido e não continue trabalhando naquele projeto — é mais fácil recuperar antes que mais mudanças se acumulem por cima."},{"slug":"the-ai-is-not-following-my-brief","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"A IA não está seguindo meu briefing","description":"Quando o resultado ignora sua marca, muda o que você não pediu, ou declara um sucesso que não houve.","url":"https://uxmagic.ai/pt/help/troubleshooting/the-ai-is-not-following-my-brief","type":"troubleshooting","keywords":["não segue","ignora instruções","cores erradas","marca","sobrescreve","resultado errado"],"headings":["Seja categórico no que é inegociável","Atenção à paleta sobrescrita","Verifique, não confie no resumo","Delimite sua instrução","Menos mudanças por mensagem","Imagens de referência não sobrepõem um tema existente","Quando continua acontecendo"],"updated":"2026-08-27","faqs":[],"related":["writing-a-good-prompt","chat-editing","themes-and-style-guides"],"markdown":"Este é o modo de falha mais frustrante, e na maior parte dá para corrigir do seu lado. Isto é o que funciona de verdade.\n\n## Seja categórico no que é inegociável\n\nFormulações frouxas viram preferência. Se algo é fixo, diga nesses termos:\n\n> Use exatamente #0F3D2E e #F5F1E8. Não introduza nenhuma outra cor.\n> Mantenha os textos existentes exatamente como estão. Mude só o layout.\n\n## Atenção à paleta sobrescrita\n\nUm padrão comum: você especifica cores de marca, e uma operação de tema as substitui por uma paleta que o modelo considera mais harmoniosa. Se suas cores sumirem, diga direto:\n\n> Você substituiu as cores da minha marca. Devolva a principal para #0F3D2E e não mude de novo.\n\n## Verifique, não confie no resumo\n\nO chat às vezes informa uma mudança como feita quando o canvas discorda. **Olhe as telas.** Se não se mexeram, a mudança não pegou — diga isso e peça de novo. Veja [Meu guia de estilo não foi aplicado](/help/troubleshooting/style-guide-did-not-apply).\n\n## Delimite sua instrução\n\n“Deixe escuro” com o foco em um elemento pode fixar cores no código daquele elemento em vez de refazer o tema do projeto. Para qualquer coisa global, peça no nível do projeto no chat, não dentro do modo edição.\n\n## Menos mudanças por mensagem\n\nDuas ou três por vez. Listas longas interagem, e quando algo dá errado você não sabe qual instrução causou.\n\n## Imagens de referência não sobrepõem um tema existente\n\nAnexar uma imagem de referência a um projeto que já tem tema não vai repintar o projeto com as cores da referência. Peça com palavras: *“Use a paleta desta imagem em vez do tema atual.”*\n\n## Quando continua acontecendo\n\nConte para a gente, com o link do projeto e o que você pediu. Casos repetidos de o modelo ignorar um briefing explícito são tratados como defeitos — é a coisa mais danosa que o produto pode fazer — e exemplos específicos são o que nos permite corrigir. [Fale com o suporte](/help/troubleshooting/contact-support).","text":"Este é o modo de falha mais frustrante, e na maior parte dá para corrigir do seu lado. Isto é o que funciona de verdade. Seja categórico no que é inegociável Formulações frouxas viram preferência. Se algo é fixo, diga nesses termos: Use exatamente #0F3D2E e #F5F1E8. Não introduza nenhuma outra cor. Mantenha os textos existentes exatamente como estão. Mude só o layout. Atenção à paleta sobrescrita Um padrão comum: você especifica cores de marca, e uma operação de tema as substitui por uma paleta que o modelo considera mais harmoniosa. Se suas cores sumirem, diga direto: Você substituiu as cores da minha marca. Devolva a principal para #0F3D2E e não mude de novo. Verifique, não confie no resumo O chat às vezes informa uma mudança como feita quando o canvas discorda. Olhe as telas. Se não se mexeram, a mudança não pegou — diga isso e peça de novo. Veja Meu guia de estilo não foi aplicado. Delimite sua instrução “Deixe escuro” com o foco em um elemento pode fixar cores no código daquele elemento em vez de refazer o tema do projeto. Para qualquer coisa global, peça no nível do projeto no chat, não dentro do modo edição. Menos mudanças por mensagem Duas ou três por vez. Listas longas interagem, e quando algo dá errado você não sabe qual instrução causou. Imagens de referência não sobrepõem um tema existente Anexar uma imagem de referência a um projeto que já tem tema não vai repintar o projeto com as cores da referência. Peça com palavras: “Use a paleta desta imagem em vez do tema atual.” Quando continua acontecendo Conte para a gente, com o link do projeto e o que você pediu. Casos repetidos de o modelo ignorar um briefing explícito são tratados como defeitos — é a coisa mais danosa que o produto pode fazer — e exemplos específicos são o que nos permite corrigir. Fale com o suporte."},{"slug":"generation-is-slow-or-stuck","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"A geração está lenta ou travada","description":"O que é normal, o que não é, e o que fazer com uma rodada que empacou.","url":"https://uxmagic.ai/pt/help/troubleshooting/generation-is-slow-or-stuck","type":"troubleshooting","keywords":["lento","travado","pendurado","tempo esgotado","carregando sem parar","congelado","não responde"],"headings":["O que é normal","O que não é normal","O que fazer","Deixar as rodadas mais rápidas"],"updated":"2026-08-27","faqs":[],"related":["flow-mode-and-screen-plans","clone-a-website","contact-support"],"markdown":"## O que é normal\n\n- **Uma tela sozinha** — normalmente menos de um minuto.\n- **Um fluxo com várias telas** — as telas são projetadas uma por vez, então um fluxo de cinco telas leva mais ou menos cinco vezes o de uma só.\n- **O clone de um site** — bem mais tempo, porque um navegador real carrega a página de destino antes de qualquer trabalho de design.\n- **Uma exportação de código do projeto inteiro** — roda como tarefa em segundo plano; projetos maiores demoram mais.\n\nSe as telas estão aparecendo no canvas uma após a outra, está funcionando. Deixe rodar.\n\n## O que não é normal\n\n- Nenhum progresso durante vários minutos.\n- O chat para no meio de um turno, sem mensagem e sem erro.\n- Uma tarefa em segundo plano que nunca informa conclusão.\n\n## O que fazer\n\n1. **Recarregue a página.** A rodada continua no servidor; você só está se reconectando a ela.\n2. **Olhe o canvas.** As telas concluídas antes da parada estão lá.\n3. **Peça o que falta**, em vez de reiniciar o pedido inteiro — assim você não paga duas vezes por trabalho já feito.\n4. Se for reproduzível, [fale com o suporte](/help/troubleshooting/contact-support) com o link do projeto e o horário.\n\n## Deixar as rodadas mais rápidas\n\n- **Levas menores.** Três telas e depois mais três é melhor que dez de uma vez, e você pode corrigir o rumo no meio.\n- **Edições direcionadas em vez de regeneração** — mais rápidas além de mais baratas.\n- **Feche o tema primeiro**, para não reconstruir telas só para corrigir cor.","text":"O que é normal - Uma tela sozinha — normalmente menos de um minuto. - Um fluxo com várias telas — as telas são projetadas uma por vez, então um fluxo de cinco telas leva mais ou menos cinco vezes o de uma só. - O clone de um site — bem mais tempo, porque um navegador real carrega a página de destino antes de qualquer trabalho de design. - Uma exportação de código do projeto inteiro — roda como tarefa em segundo plano; projetos maiores demoram mais. Se as telas estão aparecendo no canvas uma após a outra, está funcionando. Deixe rodar. O que não é normal - Nenhum progresso durante vários minutos. - O chat para no meio de um turno, sem mensagem e sem erro. - Uma tarefa em segundo plano que nunca informa conclusão. O que fazer 1. Recarregue a página. A rodada continua no servidor; você só está se reconectando a ela. 2. Olhe o canvas. As telas concluídas antes da parada estão lá. 3. Peça o que falta, em vez de reiniciar o pedido inteiro — assim você não paga duas vezes por trabalho já feito. 4. Se for reproduzível, fale com o suporte com o link do projeto e o horário. Deixar as rodadas mais rápidas - Levas menores. Três telas e depois mais três é melhor que dez de uma vez, e você pode corrigir o rumo no meio. - Edições direcionadas em vez de regeneração — mais rápidas além de mais baratas. - Feche o tema primeiro, para não reconstruir telas só para corrigir cor."},{"slug":"charts-or-animations-not-rendering","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"Gráficos ou animações não renderizam","description":"Por que um gráfico mostra uma caixa vazia, e o que fazer com elementos interativos.","url":"https://uxmagic.ai/pt/help/troubleshooting/charts-or-animations-not-rendering","type":"troubleshooting","keywords":["gráfico","chart","animação","elemento canvas","gráfico em branco","interativo","script"],"headings":["Caixa vazia onde deveria ter um gráfico","Animações não tocam","Depois de exportar","Reportar"],"updated":"2026-08-27","faqs":[],"related":["blank-or-empty-screens","export-code","contact-support"],"markdown":"## Caixa vazia onde deveria ter um gráfico\n\nGráficos são desenhados por um script dentro de um elemento canvas. Se a tela é renderizada de novo sem esse script rodar outra vez — depois de um recarregamento, uma troca de versão ou um salvamento — o elemento sobrevive mas o desenho não, e você fica com uma caixa vazia.\n\n**O que tentar**\n\n1. **Recarregue o projeto.** Muitas vezes basta.\n2. **Peça para reconstruir o gráfico** naquela tela.\n3. **Peça um gráfico estático** se ele só precisa parecer certo em um design: *“Substitua o gráfico por uma versão estática em SVG.”* Gráficos estáticos sobrevivem a todo salvamento e exportação, o que para uma entrega de design costuma ser o que você quer.\n\n## Animações não tocam\n\nMesma causa raiz. Designs são guardados como marcação, e comportamento que depende de scripts rodando na hora certa nem sempre sobrevive a uma ida e volta. Para qualquer coisa com muito movimento, projete aqui os quadros estáticos e implemente o movimento depois da exportação.\n\n## Depois de exportar\n\nO código exportado contém o que estava na tela. Se um gráfico estava vazio no canvas, está vazio na exportação. Corrija antes de exportar, ou ligue a biblioteca de gráficos de verdade na sua própria base de código — o que você vai querer fazer de qualquer jeito assim que ele mostrar dados reais.\n\n## Reportar\n\nSe um gráfico fica em branco de forma consistente em uma tela específica, [fale com o suporte](/help/troubleshooting/contact-support) com o link do projeto e o nome da tela.","text":"Caixa vazia onde deveria ter um gráfico Gráficos são desenhados por um script dentro de um elemento canvas. Se a tela é renderizada de novo sem esse script rodar outra vez — depois de um recarregamento, uma troca de versão ou um salvamento — o elemento sobrevive mas o desenho não, e você fica com uma caixa vazia. O que tentar 1. Recarregue o projeto. Muitas vezes basta. 2. Peça para reconstruir o gráfico naquela tela. 3. Peça um gráfico estático se ele só precisa parecer certo em um design: “Substitua o gráfico por uma versão estática em SVG.” Gráficos estáticos sobrevivem a todo salvamento e exportação, o que para uma entrega de design costuma ser o que você quer. Animações não tocam Mesma causa raiz. Designs são guardados como marcação, e comportamento que depende de scripts rodando na hora certa nem sempre sobrevive a uma ida e volta. Para qualquer coisa com muito movimento, projete aqui os quadros estáticos e implemente o movimento depois da exportação. Depois de exportar O código exportado contém o que estava na tela. Se um gráfico estava vazio no canvas, está vazio na exportação. Corrija antes de exportar, ou ligue a biblioteca de gráficos de verdade na sua própria base de código — o que você vai querer fazer de qualquer jeito assim que ele mostrar dados reais. Reportar Se um gráfico fica em branco de forma consistente em uma tela específica, fale com o suporte com o link do projeto e o nome da tela."},{"slug":"contact-support","category":"troubleshooting","categoryTitle":"Solução de problemas","title":"Falar com o suporte","description":"Como nos encontrar, e o que incluir para conseguirmos resolver já na primeira resposta.","url":"https://uxmagic.ai/pt/help/troubleshooting/contact-support","type":"guide","keywords":["suporte","ajuda","contato","e-mail","chat","relato de erro","falar com uma pessoa"],"headings":["Como nos encontrar","O que incluir","Por favor, não apague as provas","Faturamento","Pedidos de recursos"],"updated":"2026-08-27","faqs":[],"related":["i-ran-out-of-credits","the-ai-is-not-following-my-brief","refunds"],"markdown":"## Como nos encontrar\n\n- **Chat dentro do aplicativo** — o caminho mais rápido. Abra o mensageiro no painel ou na [página de suporte](/support).\n- **E-mail** — **hello@uxmagic.ai**.\n- **Enterprise** — suporte prioritário com tempo de resposta garantido faz parte do plano.\n\n## O que incluir\n\nA diferença entre uma solução na primeira resposta e uma semana de idas e vindas:\n\n1. **O link do projeto.** Copie da barra de endereço.\n2. **O nome da tela**, se for sobre uma tela específica.\n3. **O que você pediu** — cole o prompt.\n4. **O que aconteceu no lugar**, e o que você esperava.\n5. **Aproximadamente quando.** Hora e fuso horário.\n6. **Uma captura de tela**, se for algo visual.\n\n## Por favor, não apague as provas\n\nSe uma tela está em branco, quebrada ou errada, deixe onde está até olharmos. Excluir remove o único registro do que deu errado.\n\n## Faturamento\n\nPara qualquer coisa de faturamento, escreva para **hello@uxmagic.ai** antes de contestar no banco — uma contestação pode suspender sua conta durante a análise. Veja [Faturamento, faturas e formas de pagamento](/help/account-and-billing/billing-and-invoices).\n\n## Pedidos de recursos\n\nSão mesmo bem-vindos. Conte o problema que você quer resolver em vez do recurso que você desenhou — muitas vezes conseguimos resolver de um jeito que você não tinha considerado, ou dizer que já existe.","text":"Como nos encontrar - Chat dentro do aplicativo — o caminho mais rápido. Abra o mensageiro no painel ou na página de suporte. - E-mail — hello@uxmagic.ai. - Enterprise — suporte prioritário com tempo de resposta garantido faz parte do plano. O que incluir A diferença entre uma solução na primeira resposta e uma semana de idas e vindas: 1. O link do projeto. Copie da barra de endereço. 2. O nome da tela, se for sobre uma tela específica. 3. O que você pediu — cole o prompt. 4. O que aconteceu no lugar, e o que você esperava. 5. Aproximadamente quando. Hora e fuso horário. 6. Uma captura de tela, se for algo visual. Por favor, não apague as provas Se uma tela está em branco, quebrada ou errada, deixe onde está até olharmos. Excluir remove o único registro do que deu errado. Faturamento Para qualquer coisa de faturamento, escreva para hello@uxmagic.ai antes de contestar no banco — uma contestação pode suspender sua conta durante a análise. Veja Faturamento, faturas e formas de pagamento. Pedidos de recursos São mesmo bem-vindos. Conte o problema que você quer resolver em vez do recurso que você desenhou — muitas vezes conseguimos resolver de um jeito que você não tinha considerado, ou dizer que já existe."}]}