{"name":"Centro de ayuda de UXMagic","description":"Documentación oficial del producto UXMagic, una herramienta de diseño de UI/UX con IA que convierte prompts, capturas de pantalla, bocetos, URLs de sitios web y archivos de Figma en diseños de interfaz editables y de alta fidelidad, y en código listo para producción.","url":"https://uxmagic.ai/es/help","locale":"es","sourceUrl":"https://uxmagic.ai/help.json","generatedAt":"2026-09-09T07:40:25.115Z","version":1,"categories":[{"id":"getting-started","title":"Primeros pasos","description":"Todo lo necesario para pasar de un lienzo en blanco a tu primera pantalla diseñada, y el puñado de conceptos que hacen que el resto de UXMagic tenga sentido.","url":"https://uxmagic.ai/es/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":"Generar diseños","description":"Seis formas de llevar una pantalla al lienzo: un prompt, una captura, un boceto, una URL, un archivo de Figma o un documento.","url":"https://uxmagic.ai/es/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":"Diseñar y editar","description":"Refina lo que ha producido la IA: ediciones dirigidas, temas, tipografía, imágenes, versiones y variantes responsive.","url":"https://uxmagic.ai/es/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 y entregar","description":"Saca tus diseños de aquí: Figma, HTML/React/Tailwind, GitHub, Framer, Webflow, WordPress y PDF.","url":"https://uxmagic.ai/es/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 un sitio en producción","description":"Convierte un proyecto en un sitio web real, en un subdominio uxmagic.io o en tu propio dominio, con vistas previas, reversiones y despublicación.","url":"https://uxmagic.ai/es/help/publish","articleSlugs":["publish-your-first-site","subdomains-and-urls","custom-domains","redeploy-and-rollback"]},{"id":"collaborate","title":"Compartir y colaborar","description":"Comparte proyectos, invita a colaboradores, gestiona un equipo con créditos compartidos y recoge opiniones con comentarios.","url":"https://uxmagic.ai/es/help/collaborate","articleSlugs":["share-a-project","share-a-preview","teams-and-seats","comments-and-feedback","community-and-inspiration"]},{"id":"integrations","title":"Integraciones y desarrollo","description":"Conecta UXMagic con tu IDE, tu repositorio, tu CMS y tu asistente de IA: servidor MCP, claves de API, plugin de Figma y GitHub.","url":"https://uxmagic.ai/es/help/integrations","articleSlugs":["mcp-server","api-keys","figma-plugin","github-sync","connect-uxmagic-to-ai-assistants"]},{"id":"account-and-billing","title":"Planes, créditos y facturación","description":"Lo que cuesta cada acción, lo que incluye cada plan y cómo funcionan las mejoras de plan, las facturas, la cancelación y las recomendaciones.","url":"https://uxmagic.ai/es/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":"Solución de problemas","description":"Soluciones para los problemas que la gente se encuentra de verdad: pantallas en blanco, estilos que faltan, imágenes rotas, exportaciones fallidas y generaciones atascadas.","url":"https://uxmagic.ai/es/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":"Primeros pasos","title":"¿Qué es UXMagic?","description":"UXMagic convierte un prompt, una captura, un boceto, una URL o un archivo de Figma en pantallas de interfaz editables y de alta fidelidad que puedes exportar a Figma o a código.","url":"https://uxmagic.ai/es/help/getting-started/what-is-uxmagic","type":"guide","keywords":["resumen","qué hace uxmagic","generador de ui con ia","introducción"],"headings":["Qué lo diferencia de un chatbot que escribe HTML","Cómo es una sesión típica","Para quién es","Qué no es","Por dónde seguir"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","the-canvas","how-credits-work"],"markdown":"UXMagic es una herramienta de diseño de UI/UX con IA. Describes lo que quieres —o le entregas una captura de pantalla, un boceto a mano, la URL de un sitio web o un archivo de Figma existente— y produce **pantallas de interfaz reales y editables**: maquetación bien resuelta, un sistema coherente de color y tipografía, y marcado que puedes exportar a Figma o a código de producción.\n\n## Qué lo diferencia de un chatbot que escribe HTML\n\nTres cosas:\n\n1. **Diseña en un lienzo, no en una ventana de chat.** Las pantallas conviven una al lado de otra en un lienzo infinito, así que un flujo de compra son cinco pantallas que puedes ver juntas, no cinco respuestas separadas.\n2. **Mantiene un tema.** Colores, tipografías, radios y espaciados se guardan como design tokens del proyecto. Pide «hazlo oscuro» y todas las pantallas se mueven a la vez, en lugar de que una se desmarque del resto.\n3. **Exporta a algún sitio útil.** Figma con auto layout real, o HTML/React/Tailwind, o un sitio publicado en tu propio dominio; no una captura de pantalla.\n\n## Cómo es una sesión típica\n\nCreas un proyecto, escribes lo que quieres y la IA propone un conjunto de pantallas. Apruebas o editas ese plan, y las diseña una a una mientras miras. A partir de ahí iteras en el chat («haz el hero más alto», «usa nuestro azul de marca»), o entras en una pantalla y editas textos e imágenes directamente.\n\nCuando te gusta, exportas, o lo publicas como un sitio en producción.\n\n## Para quién es\n\n- **Fundadores y product managers** que necesitan una interfaz creíble que enseñar a usuarios, inversores o ingeniería antes de contratar a alguien de diseño.\n- **Diseñadores** que quieren que se genere el primer 80 % de una pantalla para dedicar su tiempo al 20 % restante.\n- **Desarrolladores** que quieren un front end real sin escribir a mano cinco landing pages.\n- **Agencias** que producen conceptos para clientes a gran velocidad.\n\n## Qué no es\n\nNo sustituye a una herramienta de diseño completa para trabajo de ilustración a nivel de píxel, y no es un IDE de código. Te lleva a un punto de partida estructurado y de alta fidelidad a una velocidad enorme, y después hace la entrega limpia a Figma, a tu repositorio o a la web.\n\n## Por dónde seguir\n\n- [Crea tu primer proyecto](/help/getting-started/create-your-first-project): la versión de cinco minutos.\n- [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work): lo que cuesta cada acción, para que nada te sorprenda.\n- [Formas de generar una pantalla](/help/generate/ways-to-generate-a-screen): los seis puntos de partida.","text":"UXMagic es una herramienta de diseño de UI/UX con IA. Describes lo que quieres —o le entregas una captura de pantalla, un boceto a mano, la URL de un sitio web o un archivo de Figma existente— y produce pantallas de interfaz reales y editables: maquetación bien resuelta, un sistema coherente de color y tipografía, y marcado que puedes exportar a Figma o a código de producción. Qué lo diferencia de un chatbot que escribe HTML Tres cosas: 1. Diseña en un lienzo, no en una ventana de chat. Las pantallas conviven una al lado de otra en un lienzo infinito, así que un flujo de compra son cinco pantallas que puedes ver juntas, no cinco respuestas separadas. 2. Mantiene un tema. Colores, tipografías, radios y espaciados se guardan como design tokens del proyecto. Pide «hazlo oscuro» y todas las pantallas se mueven a la vez, en lugar de que una se desmarque del resto. 3. Exporta a algún sitio útil. Figma con auto layout real, o HTML/React/Tailwind, o un sitio publicado en tu propio dominio; no una captura de pantalla. Cómo es una sesión típica Creas un proyecto, escribes lo que quieres y la IA propone un conjunto de pantallas. Apruebas o editas ese plan, y las diseña una a una mientras miras. A partir de ahí iteras en el chat («haz el hero más alto», «usa nuestro azul de marca»), o entras en una pantalla y editas textos e imágenes directamente. Cuando te gusta, exportas, o lo publicas como un sitio en producción. Para quién es - Fundadores y product managers que necesitan una interfaz creíble que enseñar a usuarios, inversores o ingeniería antes de contratar a alguien de diseño. - Diseñadores que quieren que se genere el primer 80 % de una pantalla para dedicar su tiempo al 20 % restante. - Desarrolladores que quieren un front end real sin escribir a mano cinco landing pages. - Agencias que producen conceptos para clientes a gran velocidad. Qué no es No sustituye a una herramienta de diseño completa para trabajo de ilustración a nivel de píxel, y no es un IDE de código. Te lleva a un punto de partida estructurado y de alta fidelidad a una velocidad enorme, y después hace la entrega limpia a Figma, a tu repositorio o a la web. Por dónde seguir - Crea tu primer proyecto: la versión de cinco minutos. - Cómo funcionan los créditos: lo que cuesta cada acción, para que nada te sorprenda. - Formas de generar una pantalla: los seis puntos de partida."},{"slug":"create-your-first-project","category":"getting-started","categoryTitle":"Primeros pasos","title":"Crea tu primer proyecto","description":"Del registro a una pantalla diseñada y editable en unos cinco minutos.","url":"https://uxmagic.ai/es/help/getting-started/create-your-first-project","type":"howto","keywords":["primer proyecto","inicio rápido","empezar","proyecto nuevo","comenzar"],"headings":["1. Inicia sesión","2. Crea un proyecto","3. Describe lo que quieres","4. Aprueba el plan","5. Míralo diseñar","6. Itera","7. Sácalo de aquí","Errores habituales de la primera sesión"],"updated":"2026-09-03","faqs":[{"question":"¿Necesito una tarjeta de crédito para empezar?","answer":"No. El plan Free te da 20 créditos cada día —suficiente para unas 3 pantallas diarias— sin ninguna tarjeta registrada."},{"question":"¿Cuánto tarda la primera pantalla?","answer":"Una sola pantalla suele terminar en menos de un minuto. Un plan completo de varias pantallas tarda proporcionalmente más, porque las pantallas se diseñan de una en una."}],"related":["the-canvas","writing-a-good-prompt","ways-to-generate-a-screen"],"markdown":"Esto te lleva desde una cuenta recién creada hasta una pantalla que puedes editar y exportar.\n\n![El panel de UXMagic, con un campo de prompt que dice «Describe lo que quieres crear» y sugerencias de ideas iniciales debajo.](/help/dashboard-prompt.webp)\n\n## 1. Inicia sesión\n\nVe a [uxmagic.ai](https://uxmagic.ai) y regístrate con Google o con tu correo. No hace falta tarjeta de crédito: el plan Free te da 20 créditos cada día, suficiente para unas 3 pantallas diarias, en hasta 5 proyectos.\n\n## 2. Crea un proyecto\n\nDesde el panel, haz clic en **Nuevo proyecto**. Un proyecto es un contenedor para un conjunto de pantallas que comparten un tema: un producto, un sitio, un flujo. Mantén el trabajo no relacionado en proyectos separados para que sus sistemas de diseño no choquen.\n\n## 3. Describe lo que quieres\n\nEscribe tu petición en el campo de prompt. Sé concreto sobre el **producto**, las **pantallas** y el **público**:\n\n> Un SaaS de gestión de proyectos para agencias pequeñas. Necesito una landing page de marketing, una página de precios y un panel que muestre los proyectos activos. Limpio y moderno, azul profundo y blanco, cercano pero profesional.\n\nSi tienes una marca, un sitio de referencia o un PRD, adjúntalo ahora: consulta [Formas de generar una pantalla](/help/generate/ways-to-generate-a-screen).\n\n## 4. Aprueba el plan\n\nEn un proyecto nuevo, la IA suele proponer una lista de pantallas antes de diseñar nada. Puedes añadir pantallas, renombrarlas, quitar las que no necesitas y después aprobar. Este paso es barato a propósito: sale mucho más a cuenta corregir el plan que rediseñar cinco pantallas terminadas.\n\n## 5. Míralo diseñar\n\nLas pantallas se diseñan de una en una y aparecen en el lienzo a medida que terminan. Puedes seguir trabajando mientras tanto.\n\n## 6. Itera\n\nDos formas de cambiar cosas:\n\n- **Chat**: para cualquier cosa estructural o de tema: «añade testimonios bajo el hero», «pásalo todo a oscuro», «cambia el texto del CTA».\n- **Modo edición**: entra en una pantalla para cambiar textos e intercambiar imágenes directamente, sin gastar una generación.\n\nConsulta [Editar una pantalla](/help/design-and-edit/editing-a-screen).\n\n## 7. Sácalo de aquí\n\nCuando estés contento: [exporta a Figma](/help/export-and-handoff/export-to-figma), [exporta código](/help/export-and-handoff/export-code) o [publícalo como sitio en producción](/help/publish/publish-your-first-site).\n\n## Errores habituales de la primera sesión\n\n- **Pedir una pantalla cada vez cuando quieres un flujo.** Pide el flujo entero de entrada para que las pantallas compartan tema y estructura de navegación.\n- **Arreglar el tema pantalla por pantalla.** Cambia el tema una vez y se aplica a todo el proyecto. Consulta [Temas y guías de estilo](/help/design-and-edit/themes-and-style-guides).\n- **Regenerar por una errata.** Usa el modo edición. Regenerar cuesta créditos; editar texto no.","text":"Esto te lleva desde una cuenta recién creada hasta una pantalla que puedes editar y exportar. 1. Inicia sesión Ve a uxmagic.ai y regístrate con Google o con tu correo. No hace falta tarjeta de crédito: el plan Free te da 20 créditos cada día, suficiente para unas 3 pantallas diarias, en hasta 5 proyectos. 2. Crea un proyecto Desde el panel, haz clic en Nuevo proyecto. Un proyecto es un contenedor para un conjunto de pantallas que comparten un tema: un producto, un sitio, un flujo. Mantén el trabajo no relacionado en proyectos separados para que sus sistemas de diseño no choquen. 3. Describe lo que quieres Escribe tu petición en el campo de prompt. Sé concreto sobre el producto, las pantallas y el público: Un SaaS de gestión de proyectos para agencias pequeñas. Necesito una landing page de marketing, una página de precios y un panel que muestre los proyectos activos. Limpio y moderno, azul profundo y blanco, cercano pero profesional. Si tienes una marca, un sitio de referencia o un PRD, adjúntalo ahora: consulta Formas de generar una pantalla. 4. Aprueba el plan En un proyecto nuevo, la IA suele proponer una lista de pantallas antes de diseñar nada. Puedes añadir pantallas, renombrarlas, quitar las que no necesitas y después aprobar. Este paso es barato a propósito: sale mucho más a cuenta corregir el plan que rediseñar cinco pantallas terminadas. 5. Míralo diseñar Las pantallas se diseñan de una en una y aparecen en el lienzo a medida que terminan. Puedes seguir trabajando mientras tanto. 6. Itera Dos formas de cambiar cosas: - Chat: para cualquier cosa estructural o de tema: «añade testimonios bajo el hero», «pásalo todo a oscuro», «cambia el texto del CTA». - Modo edición: entra en una pantalla para cambiar textos e intercambiar imágenes directamente, sin gastar una generación. Consulta Editar una pantalla. 7. Sácalo de aquí Cuando estés contento: exporta a Figma, exporta código o publícalo como sitio en producción. Errores habituales de la primera sesión - Pedir una pantalla cada vez cuando quieres un flujo. Pide el flujo entero de entrada para que las pantallas compartan tema y estructura de navegación. - Arreglar el tema pantalla por pantalla. Cambia el tema una vez y se aplica a todo el proyecto. Consulta Temas y guías de estilo. - Regenerar por una errata. Usa el modo edición. Regenerar cuesta créditos; editar texto no."},{"slug":"the-canvas","category":"getting-started","categoryTitle":"Primeros pasos","title":"El lienzo, los proyectos y las pantallas","description":"Cómo encajan los proyectos, las pantallas, las versiones y el lienzo infinito.","url":"https://uxmagic.ai/es/help/getting-started/the-canvas","type":"guide","keywords":["lienzo","frames","pantallas","estructura del proyecto","zoom","navegar"],"headings":["Proyectos","Pantallas","El lienzo","Versiones","Recursos y documentos","Papelera"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","versions-and-history","editing-a-screen"],"markdown":"![Un proyecto de UXMagic en el lienzo: tres pantallas de onboarding generadas junto al panel de chat del agente con los pasos que ha seguido.](/help/canvas.webp)\n\n## Proyectos\n\nUn **proyecto** contiene pantallas, un tema, recursos y documentos subidos, su historial de chat y sus colaboradores. Todo lo que hay en un proyecto comparte un mismo sistema de diseño, y eso es lo que hace que veinte pantallas parezcan un solo producto.\n\nRegla práctica: un proyecto por producto o por sitio. Si estás diseñando dos cosas sin relación, usa dos proyectos; de lo contrario, un cambio de tema pensado para una moverá la otra.\n\n## Pantallas\n\nUna **pantalla** (a veces llamada frame) es una mesa de trabajo en el lienzo. Cada pantalla tiene un nombre, un tamaño de dispositivo, contenido HTML y un historial de versiones.\n\nLas pantallas pueden:\n\n- generarse con IA a partir de tu prompt,\n- añadirse vacías y rellenarse más tarde,\n- duplicarse a partir de una pantalla existente,\n- crearse como variante responsive de otra pantalla.\n\n## El lienzo\n\nEl lienzo es infinito y ampliable.\n\n- **Desplazar**: espacio + arrastrar, o desplazamiento con dos dedos.\n- **Zoom**: ⌘/Ctrl + rueda, o el control de zoom.\n- **Ajustar a la pantalla**: reduce el zoom hasta ver todas las pantallas del proyecto.\n- **Modo foco**: abre una sola pantalla a todo el ancho para trabajar de cerca.\n\nLas pantallas se posicionan desde su punto central, así que las recién generadas se colocan en fila junto a las existentes en lugar de apilarse encima.\n\n## Versiones\n\nCada cambio de la IA sobre una pantalla crea una **versión nueva** en lugar de sobrescribir la anterior. Puedes retroceder por las versiones y restaurar cualquiera de ellas. Consulta [Versiones e historial](/help/design-and-edit/versions-and-history).\n\n## Recursos y documentos\n\nCada proyecto tiene una **biblioteca de recursos** para las imágenes que subes o genera la IA, y un área de **documentos** donde puedes adjuntar un PRD, un briefing o una especificación que la IA leerá antes de diseñar. Consulta [Diseñar a partir de un PRD o briefing](/help/generate/design-from-a-document).\n\n## Papelera\n\nLos proyectos eliminados van a la **Papelera** y se pueden restaurar desde el panel.","text":"Proyectos Un proyecto contiene pantallas, un tema, recursos y documentos subidos, su historial de chat y sus colaboradores. Todo lo que hay en un proyecto comparte un mismo sistema de diseño, y eso es lo que hace que veinte pantallas parezcan un solo producto. Regla práctica: un proyecto por producto o por sitio. Si estás diseñando dos cosas sin relación, usa dos proyectos; de lo contrario, un cambio de tema pensado para una moverá la otra. Pantallas Una pantalla (a veces llamada frame) es una mesa de trabajo en el lienzo. Cada pantalla tiene un nombre, un tamaño de dispositivo, contenido HTML y un historial de versiones. Las pantallas pueden: - generarse con IA a partir de tu prompt, - añadirse vacías y rellenarse más tarde, - duplicarse a partir de una pantalla existente, - crearse como variante responsive de otra pantalla. El lienzo El lienzo es infinito y ampliable. - Desplazar: espacio + arrastrar, o desplazamiento con dos dedos. - Zoom: ⌘/Ctrl + rueda, o el control de zoom. - Ajustar a la pantalla: reduce el zoom hasta ver todas las pantallas del proyecto. - Modo foco: abre una sola pantalla a todo el ancho para trabajar de cerca. Las pantallas se posicionan desde su punto central, así que las recién generadas se colocan en fila junto a las existentes en lugar de apilarse encima. Versiones Cada cambio de la IA sobre una pantalla crea una versión nueva en lugar de sobrescribir la anterior. Puedes retroceder por las versiones y restaurar cualquiera de ellas. Consulta Versiones e historial. Recursos y documentos Cada proyecto tiene una biblioteca de recursos para las imágenes que subes o genera la IA, y un área de documentos donde puedes adjuntar un PRD, un briefing o una especificación que la IA leerá antes de diseñar. Consulta Diseñar a partir de un PRD o briefing. Papelera Los proyectos eliminados van a la Papelera y se pueden restaurar desde el panel."},{"slug":"writing-a-good-prompt","category":"getting-started","categoryTitle":"Primeros pasos","title":"Escribir un prompt que consiga lo que quieres","description":"Las cinco cosas que debe incluir un prompt, y las formulaciones que salen mal una y otra vez.","url":"https://uxmagic.ai/es/help/getting-started/writing-a-good-prompt","type":"guide","keywords":["prompt","prompting","mejores resultados","mal resultado","cómo pedir"],"headings":["Incluye estas cinco cosas","Un prompt que funciona","Formulaciones que decepcionan siempre","Sé explícito cuando lo digas en serio","Iterar","Cuando el resultado está cerca pero no acaba de estar"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","ways-to-generate-a-screen","the-ai-is-not-following-my-brief"],"markdown":"Lo que más influye en la calidad del resultado es el prompt. Esto es lo que de verdad marca la diferencia.\n\n## Incluye estas cinco cosas\n\n1. **Qué es el producto.** «Una herramienta de reservas para peluquerías caninas» le dice a la IA qué contenido corresponde a la página. «Una landing page» no.\n2. **Qué pantallas quieres.** Nómbralas. «Landing, precios, registro y un estado vacío del panel.»\n3. **Para quién es.** El B2B empresarial y el consumo en móvil producen maquetaciones muy distintas.\n4. **La dirección visual.** Un color de marca, una sensación tipográfica, una referencia: «cálido, editorial, mucho espacio en blanco, titulares con serifa».\n5. **Todo lo innegociable.** Textos legales, un CTA concreto, una sección obligatoria, una restricción dura.\n\n## Un prompt que funciona\n\n> Una herramienta B2B de facturación para freelance llamada Ledgerly. Diseña una landing page de marketing, una página de precios con tres niveles y un panel que liste las facturas recientes. El público son freelance en solitario, no empresas. Dirección visual: sereno y de confianza, verde profundo como color principal, espacio en blanco generoso, sans serif. La landing debe tener un CTA «Empieza gratis» en la navegación y una sección sobre cobrar más rápido.\n\n## Formulaciones que decepcionan siempre\n\n- **«Hazlo mejor».** La IA no tiene forma de saber en qué eje. Di qué está mal: «el hero es demasiado alto y el CTA cuesta encontrarlo».\n- **«Que llame la atención».** Da una dirección concreta: más contraste, tipografía más grande, un color de acento más atrevido.\n- **«Como Stripe».** Mejor: pega la URL y pide un clon, o describe la cualidad concreta que quieres decir («la densidad y el tratamiento de degradados de Stripe»).\n- **Diez cambios en un mensaje.** Interactúan entre sí. De dos en dos o de tres en tres aterriza con más fiabilidad.\n\n## Sé explícito cuando lo digas en serio\n\nSi tienes una marca y quieres que se respete al milímetro, dilo en términos rotundos: «Usa exactamente estos colores: #0F3D2E y #F5F1E8. No introduzcas otros colores». De lo contrario, la IA aplicará su propio criterio sobre qué queda bien junto.\n\nLo mismo con el contenido: si los textos importan, dáselos. Si no, obtendrás textos de relleno verosímiles.\n\n## Iterar\n\nEl chat conserva el contexto del proyecto, así que los mensajes de seguimiento pueden ser cortos: «haz la navegación fija», «intercambia las secciones dos y tres», «las tarjetas de precios necesitan una etiqueta de más popular». No hace falta repetir el briefing cada vez.\n\n## Cuando el resultado está cerca pero no acaba de estar\n\nNo regeneres: eso gasta créditos y tira lo que ya estaba bien. En su lugar:\n\n- una edición dirigida por chat para una sección,\n- el [modo edición](/help/design-and-edit/editing-a-screen) para textos e imágenes,\n- un [cambio de tema](/help/design-and-edit/themes-and-style-guides) para cualquier cosa de color o tipografía.","text":"Lo que más influye en la calidad del resultado es el prompt. Esto es lo que de verdad marca la diferencia. Incluye estas cinco cosas 1. Qué es el producto. «Una herramienta de reservas para peluquerías caninas» le dice a la IA qué contenido corresponde a la página. «Una landing page» no. 2. Qué pantallas quieres. Nómbralas. «Landing, precios, registro y un estado vacío del panel.» 3. Para quién es. El B2B empresarial y el consumo en móvil producen maquetaciones muy distintas. 4. La dirección visual. Un color de marca, una sensación tipográfica, una referencia: «cálido, editorial, mucho espacio en blanco, titulares con serifa». 5. Todo lo innegociable. Textos legales, un CTA concreto, una sección obligatoria, una restricción dura. Un prompt que funciona Una herramienta B2B de facturación para freelance llamada Ledgerly. Diseña una landing page de marketing, una página de precios con tres niveles y un panel que liste las facturas recientes. El público son freelance en solitario, no empresas. Dirección visual: sereno y de confianza, verde profundo como color principal, espacio en blanco generoso, sans serif. La landing debe tener un CTA «Empieza gratis» en la navegación y una sección sobre cobrar más rápido. Formulaciones que decepcionan siempre - «Hazlo mejor». La IA no tiene forma de saber en qué eje. Di qué está mal: «el hero es demasiado alto y el CTA cuesta encontrarlo». - «Que llame la atención». Da una dirección concreta: más contraste, tipografía más grande, un color de acento más atrevido. - «Como Stripe». Mejor: pega la URL y pide un clon, o describe la cualidad concreta que quieres decir («la densidad y el tratamiento de degradados de Stripe»). - Diez cambios en un mensaje. Interactúan entre sí. De dos en dos o de tres en tres aterriza con más fiabilidad. Sé explícito cuando lo digas en serio Si tienes una marca y quieres que se respete al milímetro, dilo en términos rotundos: «Usa exactamente estos colores: #0F3D2E y #F5F1E8. No introduzcas otros colores». De lo contrario, la IA aplicará su propio criterio sobre qué queda bien junto. Lo mismo con el contenido: si los textos importan, dáselos. Si no, obtendrás textos de relleno verosímiles. Iterar El chat conserva el contexto del proyecto, así que los mensajes de seguimiento pueden ser cortos: «haz la navegación fija», «intercambia las secciones dos y tres», «las tarjetas de precios necesitan una etiqueta de más popular». No hace falta repetir el briefing cada vez. Cuando el resultado está cerca pero no acaba de estar No regeneres: eso gasta créditos y tira lo que ya estaba bien. En su lugar: - una edición dirigida por chat para una sección, - el modo edición para textos e imágenes, - un cambio de tema para cualquier cosa de color o tipografía."},{"slug":"keyboard-shortcuts","category":"getting-started","categoryTitle":"Primeros pasos","title":"Atajos de teclado","description":"Atajos del lienzo, de edición y de navegación.","url":"https://uxmagic.ai/es/help/getting-started/keyboard-shortcuts","type":"reference","keywords":["atajos","teclas rápidas","teclado","deshacer","eliminar"],"headings":["Lienzo","Pantallas","Chat"],"updated":"2026-08-27","faqs":[],"related":["the-canvas","editing-a-screen"],"markdown":"## Lienzo\n\n| Acción | Atajo |\n| --- | --- |\n| Desplazar | Espacio + arrastrar, o desplazamiento con dos dedos |\n| Acercar / alejar | ⌘/Ctrl + rueda, o ⌘/Ctrl + \\= / \\- |\n| Ajustar todas las pantallas | Mayús + 1 |\n| Zoom al 100 % | ⌘/Ctrl + 0 |\n\n## Pantallas\n\n| Acción | Atajo |\n| --- | --- |\n| Duplicar la pantalla seleccionada | ⌘/Ctrl + D |\n| Eliminar la pantalla seleccionada | Supr / Retroceso |\n| Deshacer | ⌘/Ctrl + Z |\n| Rehacer | ⌘/Ctrl + Mayús + Z |\n\n## Chat\n\n| Acción | Atajo |\n| --- | --- |\n| Enviar | Intro |\n| Salto de línea | Mayús + Intro |\n\n> **Si Suprimir o Deshacer parecen no responder:** haz clic primero en una zona vacía del lienzo. Cuando el cursor está dentro del campo de prompt, esas teclas pertenecen al campo de texto, no al lienzo.","text":"Lienzo Acción Atajo --- --- Desplazar Espacio + arrastrar, o desplazamiento con dos dedos Acercar / alejar ⌘/Ctrl + rueda, o ⌘/Ctrl + \\= / \\- Ajustar todas las pantallas Mayús + 1 Zoom al 100 % ⌘/Ctrl + 0 Pantallas Acción Atajo --- --- Duplicar la pantalla seleccionada ⌘/Ctrl + D Eliminar la pantalla seleccionada Supr / Retroceso Deshacer ⌘/Ctrl + Z Rehacer ⌘/Ctrl + Mayús + Z Chat Acción Atajo --- --- Enviar Intro Salto de línea Mayús + Intro Si Suprimir o Deshacer parecen no responder: haz clic primero en una zona vacía del lienzo. Cuando el cursor está dentro del campo de prompt, esas teclas pertenecen al campo de texto, no al lienzo."},{"slug":"account-and-profile","category":"getting-started","categoryTitle":"Primeros pasos","title":"Tu cuenta y tu perfil","description":"Métodos de inicio de sesión, cambiar tu correo o contraseña y ajustes de la cuenta.","url":"https://uxmagic.ai/es/help/getting-started/account-and-profile","type":"howto","keywords":["cuenta","perfil","contraseña","correo","iniciar sesión","login","sso"],"headings":["Iniciar sesión","Cambiar tus datos","Cambiar tu correo","Has olvidado tu contraseña","Eliminar tu cuenta"],"updated":"2026-08-27","faqs":[],"related":["plans-and-limits","delete-your-account","teams-and-seats"],"markdown":"## Iniciar sesión\n\nUXMagic admite:\n\n- **Google**: un clic, sin contraseña que gestionar.\n- **Correo y contraseña**: con verificación por correo.\n- **SSO / SAML**: en los planes Enterprise.\n\n## Cambiar tus datos\n\nAbre **Gestionar cuenta** desde el menú del avatar en el panel. Desde ahí puedes actualizar tu nombre, tu avatar y tu contraseña.\n\n## Cambiar tu correo\n\nSi te registraste con correo y contraseña, puedes cambiar tu correo desde **Gestionar cuenta**; la dirección nueva tiene que verificarse antes de activarse.\n\nSi te registraste con Google, tu correo viene de tu cuenta de Google. Para pasarte a otra dirección, contacta con soporte para que podamos migrar tus proyectos en lugar de dejarte con dos cuentas.\n\n## Has olvidado tu contraseña\n\nUsa **He olvidado mi contraseña** en la pantalla de inicio de sesión. Si no llega nada, revisa la carpeta de spam y confirma que te registraste con contraseña y no con Google: las cuentas de Google no tienen ninguna contraseña de UXMagic que restablecer.\n\n## Eliminar tu cuenta\n\nConsulta [Eliminar tu cuenta](/help/account-and-billing/delete-your-account). La eliminación es permanente y borra tus proyectos.","text":"Iniciar sesión UXMagic admite: - Google: un clic, sin contraseña que gestionar. - Correo y contraseña: con verificación por correo. - SSO / SAML: en los planes Enterprise. Cambiar tus datos Abre Gestionar cuenta desde el menú del avatar en el panel. Desde ahí puedes actualizar tu nombre, tu avatar y tu contraseña. Cambiar tu correo Si te registraste con correo y contraseña, puedes cambiar tu correo desde Gestionar cuenta; la dirección nueva tiene que verificarse antes de activarse. Si te registraste con Google, tu correo viene de tu cuenta de Google. Para pasarte a otra dirección, contacta con soporte para que podamos migrar tus proyectos en lugar de dejarte con dos cuentas. Has olvidado tu contraseña Usa He olvidado mi contraseña en la pantalla de inicio de sesión. Si no llega nada, revisa la carpeta de spam y confirma que te registraste con contraseña y no con Google: las cuentas de Google no tienen ninguna contraseña de UXMagic que restablecer. Eliminar tu cuenta Consulta Eliminar tu cuenta. La eliminación es permanente y borra tus proyectos."},{"slug":"ways-to-generate-a-screen","category":"generate","categoryTitle":"Generar diseños","title":"Todas las formas de generar una pantalla","description":"Prompt, captura, boceto, URL de un sitio web, importación desde Figma o un PRD, y cuál elegir en cada caso.","url":"https://uxmagic.ai/es/help/generate/ways-to-generate-a-screen","type":"guide","keywords":["generar","crear pantalla","entrada","punto de partida","opciones"],"headings":["Dos niveles de fidelidad","Una pantalla o un flujo entero","Combinar entradas"],"updated":"2026-08-27","faqs":[],"related":["text-to-ui","screenshot-to-ui","clone-a-website","import-from-figma"],"markdown":"UXMagic acepta seis tipos de punto de partida. Todos acaban en el mismo sitio —una pantalla editable en el lienzo con el tema del proyecto—, así que puedes mezclarlos libremente dentro de un mismo proyecto.\n\n| Partir de | Mejor cuando | Guía |\n| --- | --- | --- |\n| Un prompt de texto | Empiezas de cero y sabes más o menos qué quieres | [De texto a interfaz](/help/generate/text-to-ui) |\n| Una captura de pantalla | Quieres reconstruir o cambiar el estilo de una interfaz que puedes ver | [De captura a interfaz](/help/generate/screenshot-to-ui) |\n| Un boceto a mano | Has hecho la maquetación en una pizarra y quieres materializarla | [De boceto a interfaz](/help/generate/sketch-to-ui) |\n| La URL de un sitio web | Quieres la estructura de un sitio real como punto de partida | [Clonar un sitio web](/help/generate/clone-a-website) |\n| Un archivo de Figma | Ya tienes diseños y quieres iterar con IA | [Importar desde Figma](/help/generate/import-from-figma) |\n| Un PRD o briefing | Los requisitos ya están escritos | [Diseñar a partir de un documento](/help/generate/design-from-a-document) |\n\n## Dos niveles de fidelidad\n\nCualquiera de los anteriores puede producirse como **pantalla de alta fidelidad** o como **wireframe**. Los wireframes sirven para discutir la estructura antes de que nadie se enamore de un color. Consulta [Modo wireframe](/help/generate/wireframe-mode).\n\n## Una pantalla o un flujo entero\n\n- **Una pantalla**: pídela directamente.\n- **Un flujo entero**: describe el recorrido y la IA planifica y diseña cada pantalla en secuencia, compartiendo un mismo tema y navegación. Consulta [Modo flujo y planes de pantallas](/help/generate/flow-mode-and-screen-plans).\n\n## Combinar entradas\n\nLos mejores resultados suelen venir de combinar: la captura de un competidor **más** los colores de tu marca, o un PRD **más** una URL de referencia. Adjunta todo lo relevante en el mismo mensaje: la IA lo lee todo antes de diseñar.","text":"UXMagic acepta seis tipos de punto de partida. Todos acaban en el mismo sitio —una pantalla editable en el lienzo con el tema del proyecto—, así que puedes mezclarlos libremente dentro de un mismo proyecto. Partir de Mejor cuando Guía --- --- --- Un prompt de texto Empiezas de cero y sabes más o menos qué quieres De texto a interfaz Una captura de pantalla Quieres reconstruir o cambiar el estilo de una interfaz que puedes ver De captura a interfaz Un boceto a mano Has hecho la maquetación en una pizarra y quieres materializarla De boceto a interfaz La URL de un sitio web Quieres la estructura de un sitio real como punto de partida Clonar un sitio web Un archivo de Figma Ya tienes diseños y quieres iterar con IA Importar desde Figma Un PRD o briefing Los requisitos ya están escritos Diseñar a partir de un documento Dos niveles de fidelidad Cualquiera de los anteriores puede producirse como pantalla de alta fidelidad o como wireframe. Los wireframes sirven para discutir la estructura antes de que nadie se enamore de un color. Consulta Modo wireframe. Una pantalla o un flujo entero - Una pantalla: pídela directamente. - Un flujo entero: describe el recorrido y la IA planifica y diseña cada pantalla en secuencia, compartiendo un mismo tema y navegación. Consulta Modo flujo y planes de pantallas. Combinar entradas Los mejores resultados suelen venir de combinar: la captura de un competidor más los colores de tu marca, o un PRD más una URL de referencia. Adjunta todo lo relevante en el mismo mensaje: la IA lo lee todo antes de diseñar."},{"slug":"text-to-ui","category":"generate","categoryTitle":"Generar diseños","title":"De texto a interfaz","description":"Convierte una descripción escrita en una pantalla editable y de alta fidelidad.","url":"https://uxmagic.ai/es/help/generate/text-to-ui","type":"howto","keywords":["de texto a interfaz","de prompt a diseño","generador de ui con ia","describir"],"headings":["Pasos","Controlar el resultado","Lo que cuesta","Si el resultado no da en el clavo"],"updated":"2026-08-27","faqs":[],"related":["writing-a-good-prompt","flow-mode-and-screen-plans","themes-and-style-guides"],"markdown":"El camino por defecto: describe la interfaz, obtén la interfaz.\n\n## Pasos\n\n1. Abre un proyecto y haz clic en el campo de prompt.\n2. Describe el producto, la pantalla o pantallas, el público y la dirección visual. Consulta [Escribir un prompt que consiga lo que quieres](/help/getting-started/writing-a-good-prompt).\n3. Envía. En un proyecto nuevo normalmente se te mostrará antes un **plan de pantallas** para aprobar.\n4. Las pantallas se diseñan de una en una y aparecen en el lienzo a medida que se completan.\n\n## Controlar el resultado\n\n**Tamaño de dispositivo.** Dilo en el prompt («una pantalla de compra para móvil») o fija el tamaño de pantalla antes de generar. Las pantallas existentes pueden convertirse a otro dispositivo más tarde; consulta [Variantes responsive y por dispositivo](/help/design-and-edit/responsive-variants).\n\n**Marca.** Si tienes colores y tipografías, indícalos de forma explícita y contundente. Una mención suave («azulado») se interpreta; una instrucción exacta («principal #1B4DFF, titulares en Inter, ningún otro color de acento») se cumple.\n\n**Contenido.** Aporta los textos reales si los textos importan. Si no, obtendrás textos de relleno bien formados, válidos para la estructura pero no para una demo.\n\n**Imágenes.** La IA genera imágenes allí donde el diseño las necesita. También puedes subir las tuyas y pedir que las use. Consulta [Imágenes en tus diseños](/help/design-and-edit/images-in-your-designs).\n\n## Lo que cuesta\n\nDiseñar una pantalla nueva desde cero cuesta créditos; refinarla cuesta mucho menos. Consulta [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work) para ver la tabla exacta.\n\n## Si el resultado no da en el clavo\n\nNo regeneres la pantalla entera por un fallo parcial: di qué está mal y deja que lo corrija. Regenerar es una de las acciones más caras disponibles y descarta las partes que ya estaban bien.","text":"El camino por defecto: describe la interfaz, obtén la interfaz. Pasos 1. Abre un proyecto y haz clic en el campo de prompt. 2. Describe el producto, la pantalla o pantallas, el público y la dirección visual. Consulta Escribir un prompt que consiga lo que quieres. 3. Envía. En un proyecto nuevo normalmente se te mostrará antes un plan de pantallas para aprobar. 4. Las pantallas se diseñan de una en una y aparecen en el lienzo a medida que se completan. Controlar el resultado Tamaño de dispositivo. Dilo en el prompt («una pantalla de compra para móvil») o fija el tamaño de pantalla antes de generar. Las pantallas existentes pueden convertirse a otro dispositivo más tarde; consulta Variantes responsive y por dispositivo. Marca. Si tienes colores y tipografías, indícalos de forma explícita y contundente. Una mención suave («azulado») se interpreta; una instrucción exacta («principal #1B4DFF, titulares en Inter, ningún otro color de acento») se cumple. Contenido. Aporta los textos reales si los textos importan. Si no, obtendrás textos de relleno bien formados, válidos para la estructura pero no para una demo. Imágenes. La IA genera imágenes allí donde el diseño las necesita. También puedes subir las tuyas y pedir que las use. Consulta Imágenes en tus diseños. Lo que cuesta Diseñar una pantalla nueva desde cero cuesta créditos; refinarla cuesta mucho menos. Consulta Cómo funcionan los créditos para ver la tabla exacta. Si el resultado no da en el clavo No regeneres la pantalla entera por un fallo parcial: di qué está mal y deja que lo corrija. Regenerar es una de las acciones más caras disponibles y descarta las partes que ya estaban bien."},{"slug":"screenshot-to-ui","category":"generate","categoryTitle":"Generar diseños","title":"De captura a interfaz","description":"Sube una captura de pantalla y obtén una versión editable y reestilizable de esa interfaz.","url":"https://uxmagic.ai/es/help/generate/screenshot-to-ui","type":"howto","keywords":["captura de pantalla","de imagen a interfaz","subir imagen","recrear","png","jpg"],"headings":["Pasos","Conseguir una reproducción fiel","Varias capturas","Una trampa conocida","Coste"],"updated":"2026-08-27","faqs":[{"question":"¿Qué formatos de imagen puedo subir?","answer":"JPEG, PNG y WebP. Las imágenes muy grandes se redimensionan antes de que la IA las lea."},{"question":"¿Copiará la captura exactamente?","answer":"Reproduce con fidelidad la maquetación, la jerarquía y la estructura de componentes. Dilo de forma explícita si también quieres los colores y los textos exactos; de lo contrario se aplica el tema del proyecto."}],"related":["sketch-to-ui","clone-a-website","images-in-your-designs"],"markdown":"Dale a UXMagic una imagen de una interfaz y la reconstruye como una pantalla real y editable.\n\n## Pasos\n\n1. Haz clic en el botón de adjuntar del campo de prompt y sube tu imagen (JPEG, PNG o WebP).\n2. Di qué quieres que se haga con ella. Esto importa más de lo que la gente espera:\n   - *«Reconstruye esta pantalla exactamente»*: reproducción fiel.\n   - *«Reconstruye esta maquetación pero con los colores de nuestra marca»*: se conserva la estructura y se aplica el tema.\n   - *«Esta es la página de precios de nuestro competidor; diseña la nuestra con la misma estructura»*: la estructura como inspiración.\n3. Envía.\n\n## Conseguir una reproducción fiel\n\n- Sube la **pantalla completa**, no un recorte, si quieres toda la maquetación.\n- Sube con una **resolución legible**: si tú no puedes leer las etiquetas, la IA tampoco.\n- Si los colores exactos importan, di *«reproduce exactamente los colores de la captura»*. Por defecto gana el tema del proyecto existente, porque en la mayoría de los proyectos lo que la gente quiere de verdad es coherencia.\n\n## Varias capturas\n\nSube varias a la vez para un flujo de varias pantallas y la IA las tratará como un conjunto, manteniéndolas coherentes entre sí.\n\n## Una trampa conocida\n\nEn un proyecto existente, una captura por sí sola **no** anula el tema del proyecto: la pantalla nueva hereda la paleta que ya se está usando. Si prefieres la paleta de la referencia, pídelo con palabras: *«usa los colores de esta imagen, no el tema actual»*.\n\n## Coste\n\nLeer una imagen es gratis; diseñar la pantalla a partir de ella cuesta los créditos habituales de creación de pantalla.","text":"Dale a UXMagic una imagen de una interfaz y la reconstruye como una pantalla real y editable. Pasos 1. Haz clic en el botón de adjuntar del campo de prompt y sube tu imagen (JPEG, PNG o WebP). 2. Di qué quieres que se haga con ella. Esto importa más de lo que la gente espera: - «Reconstruye esta pantalla exactamente»: reproducción fiel. - «Reconstruye esta maquetación pero con los colores de nuestra marca»: se conserva la estructura y se aplica el tema. - «Esta es la página de precios de nuestro competidor; diseña la nuestra con la misma estructura»: la estructura como inspiración. 3. Envía. Conseguir una reproducción fiel - Sube la pantalla completa, no un recorte, si quieres toda la maquetación. - Sube con una resolución legible: si tú no puedes leer las etiquetas, la IA tampoco. - Si los colores exactos importan, di «reproduce exactamente los colores de la captura». Por defecto gana el tema del proyecto existente, porque en la mayoría de los proyectos lo que la gente quiere de verdad es coherencia. Varias capturas Sube varias a la vez para un flujo de varias pantallas y la IA las tratará como un conjunto, manteniéndolas coherentes entre sí. Una trampa conocida En un proyecto existente, una captura por sí sola no anula el tema del proyecto: la pantalla nueva hereda la paleta que ya se está usando. Si prefieres la paleta de la referencia, pídelo con palabras: «usa los colores de esta imagen, no el tema actual». Coste Leer una imagen es gratis; diseñar la pantalla a partir de ella cuesta los créditos habituales de creación de pantalla."},{"slug":"sketch-to-ui","category":"generate","categoryTitle":"Generar diseños","title":"De boceto a interfaz","description":"Convierte la foto de una pizarra o un wireframe en papel en una interfaz digital acabada.","url":"https://uxmagic.ai/es/help/generate/sketch-to-ui","type":"howto","keywords":["boceto","foto de wireframe","pizarra","dibujo","papel","servilleta"],"headings":["Pasos","Que los bocetos se lean bien","De boceto a wireframe"],"updated":"2026-08-27","faqs":[],"related":["screenshot-to-ui","wireframe-mode","text-to-ui"],"markdown":"Fotografía tu boceto, súbelo y obtén una pantalla real.\n\n## Pasos\n\n1. Fotografía el boceto de frente, con luz uniforme y todo el dibujo dentro del encuadre.\n2. Súbelo en el campo de prompt.\n3. Añade el contexto que el dibujo no puede transmitir: qué es el producto, qué significan las cajas, la dirección visual.\n\n> Un boceto de nuestra pantalla de onboarding. La caja grande de arriba a la izquierda es un vídeo, las tres cajas apiladas son pasos de configuración con marcas de verificación. Aspecto SaaS moderno, acento morado.\n\n## Que los bocetos se lean bien\n\n- **Etiqueta tus cajas.** «hero», «nav», «gráfica»: las etiquetas escritas se leen y se usan.\n- **Dibuja la jerarquía.** Las cajas más grandes se convierten en elementos más grandes.\n- **Evita los sombreados densos.** Los dibujos de línea se leen con más fiabilidad que los sombreados.\n- **Una pantalla por foto**, salvo que estés entregando un flujo a propósito.\n\n## De boceto a wireframe\n\nSi quieres quedarte en baja fidelidad —limpiar el boceto sin comprometerte con un estilo visual—, pide un wireframe. Consulta [Modo wireframe](/help/generate/wireframe-mode).","text":"Fotografía tu boceto, súbelo y obtén una pantalla real. Pasos 1. Fotografía el boceto de frente, con luz uniforme y todo el dibujo dentro del encuadre. 2. Súbelo en el campo de prompt. 3. Añade el contexto que el dibujo no puede transmitir: qué es el producto, qué significan las cajas, la dirección visual. Un boceto de nuestra pantalla de onboarding. La caja grande de arriba a la izquierda es un vídeo, las tres cajas apiladas son pasos de configuración con marcas de verificación. Aspecto SaaS moderno, acento morado. Que los bocetos se lean bien - Etiqueta tus cajas. «hero», «nav», «gráfica»: las etiquetas escritas se leen y se usan. - Dibuja la jerarquía. Las cajas más grandes se convierten en elementos más grandes. - Evita los sombreados densos. Los dibujos de línea se leen con más fiabilidad que los sombreados. - Una pantalla por foto, salvo que estés entregando un flujo a propósito. De boceto a wireframe Si quieres quedarte en baja fidelidad —limpiar el boceto sin comprometerte con un estilo visual—, pide un wireframe. Consulta Modo wireframe."},{"slug":"clone-a-website","category":"generate","categoryTitle":"Generar diseños","title":"Clonar un sitio web desde una URL","description":"Captura una página web pública real y reconstrúyela como una pantalla editable de UXMagic.","url":"https://uxmagic.ai/es/help/generate/clone-a-website","type":"howto","keywords":["clonar","url","de sitio web a interfaz","copiar sitio","importar sitio web","scraping"],"headings":["Pasos","Qué obtienes","Clones parciales","Qué no se clona","Coste"],"updated":"2026-08-27","faqs":[{"question":"¿Puedo clonar cualquier sitio web?","answer":"Cualquier página pública. Las páginas tras un inicio de sesión, un muro de pago o una protección antibots agresiva no se pueden capturar."},{"question":"¿Es legal clonar un sitio?","answer":"Úsalo para estudiar estructura y maquetación y como punto de partida de tu propio trabajo. Copiar en bloque la marca, los textos y las imágenes de un sitio para un producto en producción es un problema legal, sea cual sea la herramienta usada."}],"related":["screenshot-to-ui","clone-came-out-blank-or-partial","import-from-figma"],"markdown":"Pega una URL y UXMagic captura la página real —maquetación, secciones, colores, tipografías y recursos de imagen auténticos—, la reconstruye como una pantalla editable y deriva un tema a juego.\n\n## Pasos\n\n1. Pega la URL completa, incluido `https://`, en el campo de prompt.\n2. Di qué quieres: un clon literal o un clon reestilizado con tu marca.\n3. Espera. Clonar es más pesado que una generación normal: carga la página real antes de empezar cualquier trabajo de diseño.\n\n## Qué obtienes\n\n- La **estructura de secciones** de la página, en orden.\n- Sus **colores y tipografías**, capturados en un tema del proyecto.\n- Sus **imágenes**, copiadas a la biblioteca de recursos de tu proyecto.\n- Todo **editable**: esto es una pantalla real, no una captura.\n\n## Clones parciales\n\nLas páginas muy largas o muy complejas a veces vuelven con algunas secciones reconstruidas y otras dejadas en el lienzo como **marcadores etiquetados**. Es deliberado: una página parcial con huecos honestos es mejor que una página con secciones que faltan en silencio.\n\nPara terminarla, pídele a la IA que complete el clon. Vuelve a capturar el original y reconstruye solo las secciones que faltan, a una fracción del coste de un clon nuevo. Consulta [Mi clon salió en blanco o incompleto](/help/troubleshooting/clone-came-out-blank-or-partial).\n\n## Qué no se clona\n\n- Páginas que exigen **iniciar sesión**.\n- Páginas tras **protección antibots** (retos de Cloudflare y similares).\n- Contenido que solo existe tras una **interacción del usuario**: un menú que se abre al hacer clic, un modal, las diapositivas posteriores de un carrusel.\n- **Vídeo y animación**: se capturan como una imagen fija.\n\n## Coste\n\nClonar es la acción individual que más créditos consume en UXMagic, porque ejecuta un navegador real contra la página de destino antes de diseñar. Completar un clon parcial cuesta mucho menos. Consulta [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work).","text":"Pega una URL y UXMagic captura la página real —maquetación, secciones, colores, tipografías y recursos de imagen auténticos—, la reconstruye como una pantalla editable y deriva un tema a juego. Pasos 1. Pega la URL completa, incluido https://, en el campo de prompt. 2. Di qué quieres: un clon literal o un clon reestilizado con tu marca. 3. Espera. Clonar es más pesado que una generación normal: carga la página real antes de empezar cualquier trabajo de diseño. Qué obtienes - La estructura de secciones de la página, en orden. - Sus colores y tipografías, capturados en un tema del proyecto. - Sus imágenes, copiadas a la biblioteca de recursos de tu proyecto. - Todo editable: esto es una pantalla real, no una captura. Clones parciales Las páginas muy largas o muy complejas a veces vuelven con algunas secciones reconstruidas y otras dejadas en el lienzo como marcadores etiquetados. Es deliberado: una página parcial con huecos honestos es mejor que una página con secciones que faltan en silencio. Para terminarla, pídele a la IA que complete el clon. Vuelve a capturar el original y reconstruye solo las secciones que faltan, a una fracción del coste de un clon nuevo. Consulta Mi clon salió en blanco o incompleto. Qué no se clona - Páginas que exigen iniciar sesión. - Páginas tras protección antibots (retos de Cloudflare y similares). - Contenido que solo existe tras una interacción del usuario: un menú que se abre al hacer clic, un modal, las diapositivas posteriores de un carrusel. - Vídeo y animación: se capturan como una imagen fija. Coste Clonar es la acción individual que más créditos consume en UXMagic, porque ejecuta un navegador real contra la página de destino antes de diseñar. Completar un clon parcial cuesta mucho menos. Consulta Cómo funcionan los créditos."},{"slug":"import-from-figma","category":"generate","categoryTitle":"Generar diseños","title":"Importar desde Figma","description":"Trae un frame de Figma existente a UXMagic y sigue editándolo con IA.","url":"https://uxmagic.ai/es/help/generate/import-from-figma","type":"howto","keywords":["importar figma","de figma a uxmagic","diseños existentes","archivo de figma","sistema de diseño"],"headings":["Pasos","Qué se traslada","Qué esperar","Copiar bien la URL","Después de importar","Sistemas de diseño y bibliotecas de componentes"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","figma-plugin","themes-and-style-guides"],"markdown":"La importación funciona en sentido contrario a la exportación: un frame de Figma existente se convierte en una pantalla editable de UXMagic sobre la que después puedes iterar con IA.\n\n## Pasos\n\n1. Conecta Figma desde **Integraciones** (una conexión OAuth: autorizas UXMagic una sola vez).\n2. Pega la URL del frame de Figma, o elige el archivo y el frame en el selector.\n3. Elige si quieres importar los estilos propios del frame como tema de tu proyecto, o mapearlo sobre el tema que ya tienes.\n4. Importa.\n\n## Qué se traslada\n\n- **Maquetación y jerarquía**, incluida la estructura de auto layout.\n- **Texto**, con sus estilos tipográficos.\n- **Colores y efectos**, incluidos degradados y sombras.\n- **Imágenes**, copiadas a los recursos de tu proyecto.\n- **Vectores e iconos**, reconstruidos como marcado.\n\n## Qué esperar\n\nFigma es un lienzo vectorial y la web es un modelo de cajas, así que la importación es una *traducción* fiel, no una copia idéntica byte a byte. Espera una estructura y un espaciado muy próximos, con pequeñas diferencias en el renderizado del texto y en efectos que no tienen equivalente directo en la web.\n\nLas importaciones son más precisas cuando el frame de Figma usa **auto layout**. Las maquetaciones libres con posicionamiento absoluto se importan, pero con menos fidelidad estructural.\n\n## Copiar bien la URL\n\nSelecciona el frame en Figma y después haz **clic derecho → Copiar enlace a la selección**. Un enlace al archivo sin un nodo seleccionado importa lo que no es, o nada.\n\n## Después de importar\n\nLa pantalla importada se comporta como cualquier otra: ediciones por chat, modo edición, temas, versiones, exportación. Esta es la vía más rápida para «ya tenemos diseños, pero ahora queremos ir más deprisa».\n\n## Sistemas de diseño y bibliotecas de componentes\n\nTambién puedes importar una biblioteca de componentes o un sistema de diseño para que las pantallas generadas usen tus componentes. Consulta [Bibliotecas de componentes](/help/design-and-edit/component-libraries).","text":"La importación funciona en sentido contrario a la exportación: un frame de Figma existente se convierte en una pantalla editable de UXMagic sobre la que después puedes iterar con IA. Pasos 1. Conecta Figma desde Integraciones (una conexión OAuth: autorizas UXMagic una sola vez). 2. Pega la URL del frame de Figma, o elige el archivo y el frame en el selector. 3. Elige si quieres importar los estilos propios del frame como tema de tu proyecto, o mapearlo sobre el tema que ya tienes. 4. Importa. Qué se traslada - Maquetación y jerarquía, incluida la estructura de auto layout. - Texto, con sus estilos tipográficos. - Colores y efectos, incluidos degradados y sombras. - Imágenes, copiadas a los recursos de tu proyecto. - Vectores e iconos, reconstruidos como marcado. Qué esperar Figma es un lienzo vectorial y la web es un modelo de cajas, así que la importación es una traducción fiel, no una copia idéntica byte a byte. Espera una estructura y un espaciado muy próximos, con pequeñas diferencias en el renderizado del texto y en efectos que no tienen equivalente directo en la web. Las importaciones son más precisas cuando el frame de Figma usa auto layout. Las maquetaciones libres con posicionamiento absoluto se importan, pero con menos fidelidad estructural. Copiar bien la URL Selecciona el frame en Figma y después haz clic derecho → Copiar enlace a la selección. Un enlace al archivo sin un nodo seleccionado importa lo que no es, o nada. Después de importar La pantalla importada se comporta como cualquier otra: ediciones por chat, modo edición, temas, versiones, exportación. Esta es la vía más rápida para «ya tenemos diseños, pero ahora queremos ir más deprisa». Sistemas de diseño y bibliotecas de componentes También puedes importar una biblioteca de componentes o un sistema de diseño para que las pantallas generadas usen tus componentes. Consulta Bibliotecas de componentes."},{"slug":"design-from-a-document","category":"generate","categoryTitle":"Generar diseños","title":"Diseñar a partir de un PRD o briefing","description":"Sube los requisitos y haz que la IA los lea antes de diseñar nada.","url":"https://uxmagic.ai/es/help/generate/design-from-a-document","type":"howto","keywords":["prd","documento","briefing","especificación","requisitos","subir pdf","docx"],"headings":["Pasos","Documentos admitidos","Sacarle el máximo partido","Coste"],"updated":"2026-08-27","faqs":[],"related":["flow-mode-and-screen-plans","writing-a-good-prompt","text-to-ui"],"markdown":"Si el trabajo de pensar ya está hecho en un documento, no lo vuelvas a teclear en un prompt.\n\n## Pasos\n\n1. Abre tu proyecto y sube el documento al área de **documentos** del proyecto (o adjúntalo en el campo de prompt).\n2. Pide lo que quieres construir a partir de él:\n\n> Lee el PRD y diseña las pantallas que describe. Empieza por el plan.\n\n3. La IA lista los documentos del proyecto, lee el que corresponde y lo usa como fuente de verdad para pantallas, contenido y terminología.\n\n## Documentos admitidos\n\nPRDs, briefings de diseño, especificaciones y documentos de texto similares. Lo importante es que el texto sea extraíble: la imagen escaneada de un documento es una foto, no un documento, y conviene subirla como imagen.\n\n## Sacarle el máximo partido\n\n- **Nombra tus pantallas en el documento.** Un PRD con una lista de pantallas explícita produce un plan mucho mejor que uno que solo describe comportamiento.\n- **Señala la sección que quieres.** «Diseña solo las pantallas de la sección 4» funciona mejor que pedirle que diseñe todo el documento de una vez.\n- **Deja el documento en el proyecto.** Sigue disponible para turnos posteriores, así que un seguimiento meses después todavía cuenta con los requisitos originales.\n\n## Coste\n\nListar y leer documentos es gratis. Solo cuestan créditos las pantallas diseñadas a partir de ellos.","text":"Si el trabajo de pensar ya está hecho en un documento, no lo vuelvas a teclear en un prompt. Pasos 1. Abre tu proyecto y sube el documento al área de documentos del proyecto (o adjúntalo en el campo de prompt). 2. Pide lo que quieres construir a partir de él: Lee el PRD y diseña las pantallas que describe. Empieza por el plan. 3. La IA lista los documentos del proyecto, lee el que corresponde y lo usa como fuente de verdad para pantallas, contenido y terminología. Documentos admitidos PRDs, briefings de diseño, especificaciones y documentos de texto similares. Lo importante es que el texto sea extraíble: la imagen escaneada de un documento es una foto, no un documento, y conviene subirla como imagen. Sacarle el máximo partido - Nombra tus pantallas en el documento. Un PRD con una lista de pantallas explícita produce un plan mucho mejor que uno que solo describe comportamiento. - Señala la sección que quieres. «Diseña solo las pantallas de la sección 4» funciona mejor que pedirle que diseñe todo el documento de una vez. - Deja el documento en el proyecto. Sigue disponible para turnos posteriores, así que un seguimiento meses después todavía cuenta con los requisitos originales. Coste Listar y leer documentos es gratis. Solo cuestan créditos las pantallas diseñadas a partir de ellos."},{"slug":"wireframe-mode","category":"generate","categoryTitle":"Generar diseños","title":"Modo wireframe","description":"Genera wireframes de baja fidelidad para cerrar la estructura antes del diseño visual.","url":"https://uxmagic.ai/es/help/generate/wireframe-mode","type":"guide","keywords":["wireframe","baja fidelidad","lo-fi","estructura","escala de grises"],"headings":["Por qué molestarse","Cómo usarlo","Pasar de wireframe a alta fidelidad","Cuándo saltárselo"],"updated":"2026-08-27","faqs":[],"related":["ways-to-generate-a-screen","sketch-to-ui","flow-mode-and-screen-plans"],"markdown":"El modo wireframe produce pantallas deliberadamente sobrias, en escala de grises: cajas, etiquetas y jerarquía, sin marca, sin imágenes y sin opiniones de estilo.\n\n## Por qué molestarse\n\nPorque una pantalla bonita da la conversación por terminada. Los interlocutores reaccionan al color en lugar de al flujo. Un wireframe mantiene la discusión en la estructura, que es donde debe estar al principio.\n\n## Cómo usarlo\n\nPídelo de forma explícita:\n\n> Haz el wireframe del flujo de compra: carrito, envío, pago, confirmación.\n\nO convierte una captura existente en un wireframe limpio:\n\n> Convierte esta captura en un wireframe para que podamos reestructurarla.\n\n## Pasar de wireframe a alta fidelidad\n\nUna vez acordada la estructura, pídele a la IA que diseñe la versión de alta fidelidad de los wireframes aprobados. La estructura se conserva y el tema se aplica encima.\n\n## Cuándo saltárselo\n\nSi estás preparando un concepto para una presentación de mañana, ve directo a la alta fidelidad. Los wireframes valen la pena cuando varias personas tienen que ponerse de acuerdo antes sobre la estructura.","text":"El modo wireframe produce pantallas deliberadamente sobrias, en escala de grises: cajas, etiquetas y jerarquía, sin marca, sin imágenes y sin opiniones de estilo. Por qué molestarse Porque una pantalla bonita da la conversación por terminada. Los interlocutores reaccionan al color en lugar de al flujo. Un wireframe mantiene la discusión en la estructura, que es donde debe estar al principio. Cómo usarlo Pídelo de forma explícita: Haz el wireframe del flujo de compra: carrito, envío, pago, confirmación. O convierte una captura existente en un wireframe limpio: Convierte esta captura en un wireframe para que podamos reestructurarla. Pasar de wireframe a alta fidelidad Una vez acordada la estructura, pídele a la IA que diseñe la versión de alta fidelidad de los wireframes aprobados. La estructura se conserva y el tema se aplica encima. Cuándo saltárselo Si estás preparando un concepto para una presentación de mañana, ve directo a la alta fidelidad. Los wireframes valen la pena cuando varias personas tienen que ponerse de acuerdo antes sobre la estructura."},{"slug":"flow-mode-and-screen-plans","category":"generate","categoryTitle":"Generar diseños","title":"Modo flujo y planes de pantallas","description":"Genera un recorrido completo de varias pantallas con un solo prompt, y edita el plan antes de que se diseñe nada.","url":"https://uxmagic.ai/es/help/generate/flow-mode-and-screen-plans","type":"guide","keywords":["flujo","varias pantallas","recorrido de usuario","plan","journey","aprobar plan"],"headings":["El plan de pantallas","Modo flujo","Coste","Añadir a un flujo existente"],"updated":"2026-08-27","faqs":[],"related":["text-to-ui","wireframe-mode","how-credits-work"],"markdown":"## El plan de pantallas\n\nEn un proyecto nuevo, la IA propone un **plan** —una lista de pantallas con nombre y una línea de propósito cada una— antes de diseñar nada. Puedes:\n\n- **Aprobarlo** tal cual,\n- **Editarlo**: renombrar, reordenar, añadir o quitar pantallas,\n- **Rechazarlo** y volver a describir lo que quieres.\n\nSolo después de la aprobación empieza a diseñar.\n\nTómate este paso en serio. Planificar es barato; diseñar no. Corregir aquí una lista de pantallas equivocada cuesta una ida y vuelta. Corregirla cuando ya hay ocho pantallas diseñadas cuesta ocho regeneraciones.\n\n## Modo flujo\n\nEl modo flujo diseña todo el recorrido de una vez, compartiendo un tema y una estructura de navegación entre pantallas. Describe el recorrido, no las pantallas:\n\n> Una app de comida a domicilio: explorar restaurantes, detalle de restaurante, carrito, pago, seguimiento del pedido.\n\nLas pantallas se diseñan de una en una y aparecen en el lienzo a medida que se completan, así que puedes empezar a revisarlas antes de que termine la tanda.\n\n## Coste\n\nEl modo flujo y las demás operaciones de varias pantallas se cobran **por pantalla**, así que un flujo de cinco pantallas cuesta cinco veces una sola. Las cifras exactas están en [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work). Revisa tu saldo antes de lanzar un flujo grande: una tanda que se detiene a medias te deja con medio flujo.\n\n## Añadir a un flujo existente\n\nNo hace falta planificarlo todo de entrada. Pide más pantallas después y se diseñarán dentro del tema y la navegación existentes:\n\n> Añade una pantalla de «he olvidado mi contraseña» y un estado vacío para la lista de pedidos.","text":"El plan de pantallas En un proyecto nuevo, la IA propone un plan —una lista de pantallas con nombre y una línea de propósito cada una— antes de diseñar nada. Puedes: - Aprobarlo tal cual, - Editarlo: renombrar, reordenar, añadir o quitar pantallas, - Rechazarlo y volver a describir lo que quieres. Solo después de la aprobación empieza a diseñar. Tómate este paso en serio. Planificar es barato; diseñar no. Corregir aquí una lista de pantallas equivocada cuesta una ida y vuelta. Corregirla cuando ya hay ocho pantallas diseñadas cuesta ocho regeneraciones. Modo flujo El modo flujo diseña todo el recorrido de una vez, compartiendo un tema y una estructura de navegación entre pantallas. Describe el recorrido, no las pantallas: Una app de comida a domicilio: explorar restaurantes, detalle de restaurante, carrito, pago, seguimiento del pedido. Las pantallas se diseñan de una en una y aparecen en el lienzo a medida que se completan, así que puedes empezar a revisarlas antes de que termine la tanda. Coste El modo flujo y las demás operaciones de varias pantallas se cobran por pantalla, así que un flujo de cinco pantallas cuesta cinco veces una sola. Las cifras exactas están en Cómo funcionan los créditos. Revisa tu saldo antes de lanzar un flujo grande: una tanda que se detiene a medias te deja con medio flujo. Añadir a un flujo existente No hace falta planificarlo todo de entrada. Pide más pantallas después y se diseñarán dentro del tema y la navegación existentes: Añade una pantalla de «he olvidado mi contraseña» y un estado vacío para la lista de pedidos."},{"slug":"editing-a-screen","category":"design-and-edit","categoryTitle":"Diseñar y editar","title":"Editar una pantalla","description":"Las tres formas de cambiar un diseño —chat, modo edición y temas— y cuándo cada una es la herramienta adecuada.","url":"https://uxmagic.ai/es/help/design-and-edit/editing-a-screen","type":"guide","keywords":["editar","cambiar diseño","modo edición","modificar","ajustar","actualizar"],"headings":["1. Modo edición: para el contenido","2. Chat: para la estructura","3. Tema: para todo lo visual y global","Qué no hacer","Versiones","Detalle del foco del teclado"],"updated":"2026-08-27","faqs":[],"related":["chat-editing","themes-and-style-guides","versions-and-history"],"markdown":"Hay tres formas de cambiar una pantalla, y elegir la correcta te ahorra tiempo y créditos.\n\n## 1. Modo edición: para el contenido\n\nHaz clic dentro de una pantalla para entrar en modo edición. Aquí puedes:\n\n- **Editar textos directamente.** Haz clic en un titular o un párrafo y escribe.\n- **Intercambiar imágenes.** Sustituye una imagen generada por una tuya.\n- **Ajustar propiedades sencillas** del elemento que has seleccionado.\n\nEl modo edición no llama a la IA, así que es instantáneo y gratuito. Úsalo para textos, nombres, precios e intercambios de imágenes.\n\n## 2. Chat: para la estructura\n\nTodo lo que cambia la *forma* de la página pasa por el chat:\n\n> Añade una sección de testimonios entre las funcionalidades y los precios.\n> Haz el hero más corto y sube el CTA por encima del pliegue.\n> Convierte los tres bloques de funcionalidades en una maquetación de dos columnas.\n\nLas ediciones dirigidas por chat son mucho más baratas que regenerar una pantalla. Consulta [Editar con el chat](/help/design-and-edit/chat-editing).\n\n## 3. Tema: para todo lo visual y global\n\nLos colores, las tipografías, los radios de esquina y los espaciados viven en el tema del proyecto. Cámbialos ahí y todas las pantallas se mueven juntas. Editar un color en una sola pantalla es justo como los proyectos acaban siendo incoherentes. Consulta [Temas y guías de estilo](/help/design-and-edit/themes-and-style-guides).\n\n## Qué no hacer\n\n**No regeneres por un cambio pequeño.** Regenerar está entre las operaciones más caras disponibles y tira las partes de la pantalla que ya estaban bien. Pide el cambio concreto en su lugar.\n\n## Versiones\n\nCada edición de la IA crea una versión nueva. No se destruye nada y siempre puedes retroceder. Consulta [Versiones e historial](/help/design-and-edit/versions-and-history).\n\n## Detalle del foco del teclado\n\nSi Suprimir o ⌘Z parecen no hacer nada, haz clic primero en una zona vacía del lienzo. Mientras el cursor está en el campo de prompt, esas pulsaciones pertenecen al campo de texto.","text":"Hay tres formas de cambiar una pantalla, y elegir la correcta te ahorra tiempo y créditos. 1. Modo edición: para el contenido Haz clic dentro de una pantalla para entrar en modo edición. Aquí puedes: - Editar textos directamente. Haz clic en un titular o un párrafo y escribe. - Intercambiar imágenes. Sustituye una imagen generada por una tuya. - Ajustar propiedades sencillas del elemento que has seleccionado. El modo edición no llama a la IA, así que es instantáneo y gratuito. Úsalo para textos, nombres, precios e intercambios de imágenes. 2. Chat: para la estructura Todo lo que cambia la forma de la página pasa por el chat: Añade una sección de testimonios entre las funcionalidades y los precios. Haz el hero más corto y sube el CTA por encima del pliegue. Convierte los tres bloques de funcionalidades en una maquetación de dos columnas. Las ediciones dirigidas por chat son mucho más baratas que regenerar una pantalla. Consulta Editar con el chat. 3. Tema: para todo lo visual y global Los colores, las tipografías, los radios de esquina y los espaciados viven en el tema del proyecto. Cámbialos ahí y todas las pantallas se mueven juntas. Editar un color en una sola pantalla es justo como los proyectos acaban siendo incoherentes. Consulta Temas y guías de estilo. Qué no hacer No regeneres por un cambio pequeño. Regenerar está entre las operaciones más caras disponibles y tira las partes de la pantalla que ya estaban bien. Pide el cambio concreto en su lugar. Versiones Cada edición de la IA crea una versión nueva. No se destruye nada y siempre puedes retroceder. Consulta Versiones e historial. Detalle del foco del teclado Si Suprimir o ⌘Z parecen no hacer nada, haz clic primero en una zona vacía del lienzo. Mientras el cursor está en el campo de prompt, esas pulsaciones pertenecen al campo de texto."},{"slug":"chat-editing","category":"design-and-edit","categoryTitle":"Diseñar y editar","title":"Editar con el chat","description":"Cómo formular peticiones de edición a la IA para conseguir el cambio que querías, en las pantallas que querías.","url":"https://uxmagic.ai/es/help/design-and-edit/chat-editing","type":"guide","keywords":["chat","edición con ia","instruir","pedir a la ia","refinar","iterar"],"headings":["Di qué pantalla","Di qué está mal, no que está mal","Dos o tres cambios cada vez","Aplicar un cambio en todas partes","Sustituir una imagen en todas partes","Recolorear","Cuando hace algo que no le pediste","Hacer preguntas"],"updated":"2026-08-27","faqs":[],"related":["editing-a-screen","writing-a-good-prompt","the-ai-is-not-following-my-brief"],"markdown":"![El panel de chat del agente, con cada paso que ha dado: analizar la petición, leer el tema, planificar las pantallas y después diseñar cada una.](/help/agent-chat.webp)\n\n## Di qué pantalla\n\nSi hay varias pantallas en el lienzo, nombra la que quieres decir, o selecciónala antes:\n\n> En la página de precios, haz que el nivel del medio sea el destacado.\n\nSin un objetivo, la IA tiene que adivinar, y a veces adivinará la pantalla que estabas mirando en último lugar y no la que querías.\n\n## Di qué está mal, no que está mal\n\n- ❌ «El hero está mal».\n- ✅ «El hero es demasiado alto y el titular compite con el subtítulo. Reduce a la mitad el relleno vertical y baja un tamaño el subtítulo».\n\n## Dos o tres cambios cada vez\n\nLas listas largas interactúan de formas difíciles de predecir, y si un punto sale mal no puedes saber qué instrucción lo provocó. Las tandas pequeñas son más rápidas en conjunto.\n\n## Aplicar un cambio en todas partes\n\nDilo de forma explícita:\n\n> En **todas** las pantallas, cambia el CTA de la navegación a «Empieza gratis».\n\nLas operaciones para todo el proyecto existen precisamente para esto. Hacerlo pantalla por pantalla gasta créditos y acaba desviándose.\n\n## Sustituir una imagen en todas partes\n\nCambiar un logotipo o una foto de producto en todas las pantallas tiene una vía propia y determinista: pide que se sustituya el recurso en todas partes en lugar de editar cada pantalla:\n\n> Sustituye el logotipo en todas las pantallas por el que acabo de subir.\n\nConsulta [Imágenes en tus diseños](/help/design-and-edit/images-in-your-designs).\n\n## Recolorear\n\nLos cambios de color deben pasar por el tema, no por ediciones de clases en elementos concretos:\n\n> Haz que el color principal sea un azul más cálido.\n\nEso es una sola operación, es gratis y mueve todas las pantallas de forma coherente. Consulta [Temas y guías de estilo](/help/design-and-edit/themes-and-style-guides).\n\n## Cuando hace algo que no le pediste\n\nDilo llanamente y con concreción: *«Has cambiado la paleta; yo solo te pedí el botón. Devuelve los colores anteriores»*. Si pasa una y otra vez con el mismo briefing, formula la restricción en términos absolutos («No cambies ningún color») y consulta [La IA no sigue mi briefing](/help/troubleshooting/the-ai-is-not-following-my-brief).\n\n## Hacer preguntas\n\nDe vez en cuando la IA te hará una pregunta de opción múltiple antes de actuar, cuando hay una ambigüedad real que no puede resolver. Responder sale más barato que ver cinco pantallas construidas sobre una suposición equivocada.","text":"Di qué pantalla Si hay varias pantallas en el lienzo, nombra la que quieres decir, o selecciónala antes: En la página de precios, haz que el nivel del medio sea el destacado. Sin un objetivo, la IA tiene que adivinar, y a veces adivinará la pantalla que estabas mirando en último lugar y no la que querías. Di qué está mal, no que está mal - ❌ «El hero está mal». - ✅ «El hero es demasiado alto y el titular compite con el subtítulo. Reduce a la mitad el relleno vertical y baja un tamaño el subtítulo». Dos o tres cambios cada vez Las listas largas interactúan de formas difíciles de predecir, y si un punto sale mal no puedes saber qué instrucción lo provocó. Las tandas pequeñas son más rápidas en conjunto. Aplicar un cambio en todas partes Dilo de forma explícita: En todas las pantallas, cambia el CTA de la navegación a «Empieza gratis». Las operaciones para todo el proyecto existen precisamente para esto. Hacerlo pantalla por pantalla gasta créditos y acaba desviándose. Sustituir una imagen en todas partes Cambiar un logotipo o una foto de producto en todas las pantallas tiene una vía propia y determinista: pide que se sustituya el recurso en todas partes en lugar de editar cada pantalla: Sustituye el logotipo en todas las pantallas por el que acabo de subir. Consulta Imágenes en tus diseños. Recolorear Los cambios de color deben pasar por el tema, no por ediciones de clases en elementos concretos: Haz que el color principal sea un azul más cálido. Eso es una sola operación, es gratis y mueve todas las pantallas de forma coherente. Consulta Temas y guías de estilo. Cuando hace algo que no le pediste Dilo llanamente y con concreción: «Has cambiado la paleta; yo solo te pedí el botón. Devuelve los colores anteriores». Si pasa una y otra vez con el mismo briefing, formula la restricción en términos absolutos («No cambies ningún color») y consulta La IA no sigue mi briefing. Hacer preguntas De vez en cuando la IA te hará una pregunta de opción múltiple antes de actuar, cuando hay una ambigüedad real que no puede resolver. Responder sale más barato que ver cinco pantallas construidas sobre una suposición equivocada."},{"slug":"themes-and-style-guides","category":"design-and-edit","categoryTitle":"Diseñar y editar","title":"Temas y guías de estilo","description":"Cómo funciona el tema del proyecto, cómo cambiarlo sin riesgo y por qué los colores no deben editarse pantalla por pantalla.","url":"https://uxmagic.ai/es/help/design-and-edit/themes-and-style-guides","type":"guide","keywords":["tema","guía de estilo","colores","marca","modo oscuro","paleta","tokens"],"headings":["Cambiar unos cuantos colores","Construir un look completamente nuevo","Acotar un cambio","El contraste se comprueba","Generar una guía de estilo","Errores habituales"],"updated":"2026-08-27","faqs":[{"question":"¿Cambiar el tema cuesta créditos?","answer":"No. Crear o actualizar un tema es gratis. Solo cuesta créditos generar las pantallas en sí."},{"question":"¿Puede una pantalla tener un tema distinto?","answer":"Sí: pide que el cambio se limite a esa pantalla. Por defecto, un cambio de tema se aplica a todo el proyecto, que suele ser lo que quieres."}],"related":["fonts-and-typography","editing-a-screen","style-guide-did-not-apply"],"markdown":"Cada proyecto tiene un **tema**: un conjunto de design tokens para colores, tipografía, radios y espaciados. Las pantallas referencian esos tokens en lugar de valores fijos, y eso es lo que hace que veinte pantallas parezcan un solo producto.\n\n## Cambiar unos cuantos colores\n\nSolo pídelo:\n\n> Haz que el color principal sea #1B4DFF.\n> El fondo es demasiado frío; caliéntalo.\n\nEsto fusiona un cambio pequeño en el tema existente y deja el resto intacto. Es gratis y se aplica en todas partes a la vez.\n\n## Construir un look completamente nuevo\n\nPara un cambio de raíz —un rediseño, pasar a oscuro, una marca nueva— pide exactamente eso:\n\n> Dale a todo el proyecto un tema oscuro.\n> Rediseña esto con nuestra marca nueva: verde profundo como principal, fondo crema, titulares con serifa.\n\nEso construye un conjunto de tokens completamente nuevo en lugar de parchear el anterior.\n\n## Acotar un cambio\n\nPor defecto, los cambios de tema son **para todo el proyecto**. Para limitar uno a una sola pantalla, dilo:\n\n> Solo en la landing page, haz el fondo de la cabecera negro.\n\n## El contraste se comprueba\n\nLos temas se validan buscando combinaciones de color legibles antes de aplicarse, así que no deberías acabar con texto oscuro sobre fondo oscuro. Si quieres a propósito un tratamiento de bajo contraste, dilo, pero espera que el sistema empuje hacia la legibilidad.\n\n## Generar una guía de estilo\n\nPide una guía de estilo y obtendrás una pantalla renderizada con la paleta, la escala tipográfica y los componentes principales: útil como artefacto de entrega y como comprobación de que el sistema es coherente.\n\n## Errores habituales\n\n- **Editar un color en una sola pantalla.** Funciona, y después la siguiente pantalla generada no encaja. Usa el tema.\n- **Pedir «modo oscuro» mientras estás en modo edición sobre un elemento.** Esa vía puede fijar colores en el código en lugar de rehacer el tema. Pídelo en el chat, a nivel de proyecto.\n- **Dar por hecho que si la herramienta de temas dice que ha funcionado, se ha renderizado.** Mira el lienzo. Si las pantallas no se han movido, consulta [Mi guía de estilo no se aplicó](/help/troubleshooting/style-guide-did-not-apply).","text":"Cada proyecto tiene un tema: un conjunto de design tokens para colores, tipografía, radios y espaciados. Las pantallas referencian esos tokens en lugar de valores fijos, y eso es lo que hace que veinte pantallas parezcan un solo producto. Cambiar unos cuantos colores Solo pídelo: Haz que el color principal sea #1B4DFF. El fondo es demasiado frío; caliéntalo. Esto fusiona un cambio pequeño en el tema existente y deja el resto intacto. Es gratis y se aplica en todas partes a la vez. Construir un look completamente nuevo Para un cambio de raíz —un rediseño, pasar a oscuro, una marca nueva— pide exactamente eso: Dale a todo el proyecto un tema oscuro. Rediseña esto con nuestra marca nueva: verde profundo como principal, fondo crema, titulares con serifa. Eso construye un conjunto de tokens completamente nuevo en lugar de parchear el anterior. Acotar un cambio Por defecto, los cambios de tema son para todo el proyecto. Para limitar uno a una sola pantalla, dilo: Solo en la landing page, haz el fondo de la cabecera negro. El contraste se comprueba Los temas se validan buscando combinaciones de color legibles antes de aplicarse, así que no deberías acabar con texto oscuro sobre fondo oscuro. Si quieres a propósito un tratamiento de bajo contraste, dilo, pero espera que el sistema empuje hacia la legibilidad. Generar una guía de estilo Pide una guía de estilo y obtendrás una pantalla renderizada con la paleta, la escala tipográfica y los componentes principales: útil como artefacto de entrega y como comprobación de que el sistema es coherente. Errores habituales - Editar un color en una sola pantalla. Funciona, y después la siguiente pantalla generada no encaja. Usa el tema. - Pedir «modo oscuro» mientras estás en modo edición sobre un elemento. Esa vía puede fijar colores en el código en lugar de rehacer el tema. Pídelo en el chat, a nivel de proyecto. - Dar por hecho que si la herramienta de temas dice que ha funcionado, se ha renderizado. Mira el lienzo. Si las pantallas no se han movido, consulta Mi guía de estilo no se aplicó."},{"slug":"fonts-and-typography","category":"design-and-edit","categoryTitle":"Diseñar y editar","title":"Fuentes y tipografía","description":"Elegir tipografías, usar Google Fonts y qué hacer cuando un cambio de tipografía no aparece.","url":"https://uxmagic.ai/es/help/design-and-edit/fonts-and-typography","type":"howto","keywords":["fuentes","tipografía","letra","google fonts","tipografía de titulares","tamaño de texto"],"headings":["Definir las tipografías","La escala tipográfica","Si un cambio de tipografía no aparece","Tipografías propias y con licencia"],"updated":"2026-08-27","faqs":[],"related":["themes-and-style-guides","style-guide-did-not-apply"],"markdown":"## Definir las tipografías\n\nLas tipografías forman parte del tema. Pídelas por su nombre:\n\n> Usa Inter para el texto y Playfair Display para los titulares.\n\nLas Google Fonts se admiten por nombre. Si nombras una tipografía que no está disponible, obtendrás la coincidencia razonable más próxima en lugar de una pantalla rota, así que si la precisión importa, confirma qué se ha aplicado realmente.\n\n## La escala tipográfica\n\nPuedes dirigir la escala con palabras:\n\n> Sube un tamaño los titulares y aprieta el interlineado.\n> El texto de cuerpo es demasiado pequeño; súbelo a 17 px.\n\n## Si un cambio de tipografía no aparece\n\nEste es un tipo de problema conocido que conviene comprobar a conciencia: el tema puede actualizarse mientras la hoja de estilos que carga la tipografía no lo hace. Síntoma: el diseño *dice* que usa una tipografía que claramente no se está renderizando.\n\n1. Recarga el proyecto.\n2. Vuelve a aplicar el cambio de tipografía en el chat y mira el lienzo, no el resultado de la herramienta.\n3. Si sigue sin renderizarse, [contacta con soporte](/help/troubleshooting/contact-support) con el enlace del proyecto y el nombre de la tipografía.\n\n## Tipografías propias y con licencia\n\nHoy no se pueden subir directamente tipografías autoalojadas ni con licencia. La vía práctica es elegir la Google Font más parecida mientras diseñas y después cambiar a tu tipografía con licencia tras exportar: en Figma, en tu base de código o en el CSS del sitio publicado.","text":"Definir las tipografías Las tipografías forman parte del tema. Pídelas por su nombre: Usa Inter para el texto y Playfair Display para los titulares. Las Google Fonts se admiten por nombre. Si nombras una tipografía que no está disponible, obtendrás la coincidencia razonable más próxima en lugar de una pantalla rota, así que si la precisión importa, confirma qué se ha aplicado realmente. La escala tipográfica Puedes dirigir la escala con palabras: Sube un tamaño los titulares y aprieta el interlineado. El texto de cuerpo es demasiado pequeño; súbelo a 17 px. Si un cambio de tipografía no aparece Este es un tipo de problema conocido que conviene comprobar a conciencia: el tema puede actualizarse mientras la hoja de estilos que carga la tipografía no lo hace. Síntoma: el diseño dice que usa una tipografía que claramente no se está renderizando. 1. Recarga el proyecto. 2. Vuelve a aplicar el cambio de tipografía en el chat y mira el lienzo, no el resultado de la herramienta. 3. Si sigue sin renderizarse, contacta con soporte con el enlace del proyecto y el nombre de la tipografía. Tipografías propias y con licencia Hoy no se pueden subir directamente tipografías autoalojadas ni con licencia. La vía práctica es elegir la Google Font más parecida mientras diseñas y después cambiar a tu tipografía con licencia tras exportar: en Figma, en tu base de código o en el CSS del sitio publicado."},{"slug":"images-in-your-designs","category":"design-and-edit","categoryTitle":"Diseñar y editar","title":"Imágenes en tus diseños","description":"Generar imágenes, editarlas in situ, subir las tuyas y sustituir un recurso en todas las pantallas.","url":"https://uxmagic.ai/es/help/design-and-edit/images-in-your-designs","type":"guide","keywords":["imágenes","generar imagen","imagen con ia","subir","logotipo","sustituir imagen","fotos"],"headings":["Imágenes generadas","Editar una imagen existente","Subir las tuyas","Sustituir un recurso en todas partes","Proporción","Si las imágenes salen rotas o no terminan de cargar"],"updated":"2026-08-27","faqs":[],"related":["chat-editing","editing-a-screen","images-are-broken-or-missing"],"markdown":"![La página de Recursos, con las imágenes y logotipos que reutiliza un proyecto.](/help/assets.webp)\n\n## Imágenes generadas\n\nCuando un diseño necesita imágenes, la IA las genera. Puedes dirigirla:\n\n> Regenera la imagen del hero: una oficina diáfana con luz de sol, plano abierto, tonos cálidos, sin personas.\n\nDescribe sujeto, escenario, composición, iluminación y ambiente. Un sustantivo escueto («un portátil») produce un resultado escueto.\n\nLa generación de imágenes se cobra por imagen, a una fracción del coste de una pantalla. Consulta [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work).\n\n## Editar una imagen existente\n\nPuedes cambiar una imagen **in situ**, manteniendo todo lo demás idéntico píxel a píxel:\n\n> En la imagen del hero, cambia el texto del cartel a «Ledgerly».\n> Recolorea esta ilustración para que encaje con el tema nuevo.\n\nEsta es la herramienta adecuada para cambiar texto dentro de una imagen, recolorear, cambiar el estilo o añadir y quitar un solo elemento. Regenerar desde cero cambiaría también todo lo demás.\n\n## Subir las tuyas\n\nSúbelas desde el campo de prompt o desde la biblioteca de recursos del proyecto y después referéncialas:\n\n> Usa la foto que acabo de subir como imagen del hero en la landing page.\n\n## Sustituir un recurso en todas partes\n\nPara cambiar un logotipo o una foto de producto en todo el proyecto, pide exactamente eso:\n\n> Sustituye el logotipo antiguo por el nuevo en todas las pantallas.\n\nEsto se ejecuta como una sola operación determinista sobre todas las pantallas, en lugar de una edición pantalla por pantalla: es la única forma fiable de asegurarte de que no se te ha escapado ninguna.\n\n## Proporción\n\nIndícala si importa: «hero 16:9», «avatar cuadrado». Si no, puedes obtener una forma que no encaje en el hueco.\n\n## Si las imágenes salen rotas o no terminan de cargar\n\nConsulta [Las imágenes salen rotas o no aparecen](/help/troubleshooting/images-are-broken-or-missing).","text":"Imágenes generadas Cuando un diseño necesita imágenes, la IA las genera. Puedes dirigirla: Regenera la imagen del hero: una oficina diáfana con luz de sol, plano abierto, tonos cálidos, sin personas. Describe sujeto, escenario, composición, iluminación y ambiente. Un sustantivo escueto («un portátil») produce un resultado escueto. La generación de imágenes se cobra por imagen, a una fracción del coste de una pantalla. Consulta Cómo funcionan los créditos. Editar una imagen existente Puedes cambiar una imagen in situ, manteniendo todo lo demás idéntico píxel a píxel: En la imagen del hero, cambia el texto del cartel a «Ledgerly». Recolorea esta ilustración para que encaje con el tema nuevo. Esta es la herramienta adecuada para cambiar texto dentro de una imagen, recolorear, cambiar el estilo o añadir y quitar un solo elemento. Regenerar desde cero cambiaría también todo lo demás. Subir las tuyas Súbelas desde el campo de prompt o desde la biblioteca de recursos del proyecto y después referéncialas: Usa la foto que acabo de subir como imagen del hero en la landing page. Sustituir un recurso en todas partes Para cambiar un logotipo o una foto de producto en todo el proyecto, pide exactamente eso: Sustituye el logotipo antiguo por el nuevo en todas las pantallas. Esto se ejecuta como una sola operación determinista sobre todas las pantallas, en lugar de una edición pantalla por pantalla: es la única forma fiable de asegurarte de que no se te ha escapado ninguna. Proporción Indícala si importa: «hero 16:9», «avatar cuadrado». Si no, puedes obtener una forma que no encaje en el hueco. Si las imágenes salen rotas o no terminan de cargar Consulta Las imágenes salen rotas o no aparecen."},{"slug":"versions-and-history","category":"design-and-edit","categoryTitle":"Diseñar y editar","title":"Versiones e historial","description":"Cada cambio de la IA crea una versión nueva. Cómo comparar, restaurar y conservar variantes.","url":"https://uxmagic.ai/es/help/design-and-edit/versions-and-history","type":"guide","keywords":["versión","historial","deshacer","restaurar","revertir","anterior","volver atrás"],"headings":["Cómo funciona el versionado","Cambiar de versión","Variantes","Deshacer frente a versiones","Si un cambio parece desaparecer","Duplicar en su lugar"],"updated":"2026-08-27","faqs":[],"related":["editing-a-screen","my-changes-reverted"],"markdown":"## Cómo funciona el versionado\n\nCada cambio de la IA sobre una pantalla crea una **versión nueva** en lugar de sobrescribir la anterior. La pantalla del lienzo muestra la versión activa; las anteriores siguen disponibles.\n\nEsto significa que puedes experimentar con libertad. Si una dirección no funciona, vuelve una versión atrás.\n\n## Cambiar de versión\n\nAbre la lista de versiones de una pantalla, elige una y el lienzo se actualiza. Cambiar es instantáneo y gratuito.\n\n## Variantes\n\nLas versiones sirven también como variantes: pide dos tratamientos de la misma pantalla y consérvalos los dos, alternando entre ellos durante una revisión.\n\n## Deshacer frente a versiones\n\n- **⌘Z / Ctrl+Z**: deshace acciones del lienzo (mover, eliminar, ediciones directas).\n- **Versiones**: retrocede por los estados de una pantalla generados por la IA.\n\nSon sistemas distintos. Deshacer no te llevará hacia atrás por las generaciones de la IA.\n\n## Si un cambio parece desaparecer\n\nSi una versión que has seleccionado se revierte al hacer clic fuera, eso es un fallo, no una función: consulta [Mis cambios se han revertido](/help/troubleshooting/my-changes-reverted).\n\n## Duplicar en su lugar\n\nSi quieres explorar una dirección sin tocar el original, duplica antes la pantalla y experimenta sobre la copia.","text":"Cómo funciona el versionado Cada cambio de la IA sobre una pantalla crea una versión nueva en lugar de sobrescribir la anterior. La pantalla del lienzo muestra la versión activa; las anteriores siguen disponibles. Esto significa que puedes experimentar con libertad. Si una dirección no funciona, vuelve una versión atrás. Cambiar de versión Abre la lista de versiones de una pantalla, elige una y el lienzo se actualiza. Cambiar es instantáneo y gratuito. Variantes Las versiones sirven también como variantes: pide dos tratamientos de la misma pantalla y consérvalos los dos, alternando entre ellos durante una revisión. Deshacer frente a versiones - ⌘Z / Ctrl+Z: deshace acciones del lienzo (mover, eliminar, ediciones directas). - Versiones: retrocede por los estados de una pantalla generados por la IA. Son sistemas distintos. Deshacer no te llevará hacia atrás por las generaciones de la IA. Si un cambio parece desaparecer Si una versión que has seleccionado se revierte al hacer clic fuera, eso es un fallo, no una función: consulta Mis cambios se han revertido. Duplicar en su lugar Si quieres explorar una dirección sin tocar el original, duplica antes la pantalla y experimenta sobre la copia."},{"slug":"responsive-variants","category":"design-and-edit","categoryTitle":"Diseñar y editar","title":"Variantes responsive y por dispositivo","description":"Crea versiones móvil y escritorio de una pantalla y mantenlas sincronizadas.","url":"https://uxmagic.ai/es/help/design-and-edit/responsive-variants","type":"howto","keywords":["responsive","móvil","escritorio","tablet","dispositivo","breakpoint","versión móvil"],"headings":["Crear una variante","Coste","Mantener las variantes sincronizadas","El tema es compartido","Código exportado"],"updated":"2026-08-27","faqs":[],"related":["editing-a-screen","themes-and-style-guides","export-code"],"markdown":"## Crear una variante\n\nPídela, o usa el control de dispositivo de la pantalla:\n\n> Haz una versión móvil de la landing page.\n\nLa variante es una **pantalla nueva** en el lienzo, adaptada al ancho de destino; no es un redimensionado fluido. Las maquetaciones se reorganizan de verdad: las secciones de varias columnas se apilan, la navegación se pliega, la tipografía baja de escala.\n\n## Coste\n\nConvertir una pantalla a otro tamaño de dispositivo se cobra por pantalla a la misma tarifa que una regeneración, porque lo es. Convertir ocho pantallas cuesta ocho veces eso: conviene revisar antes tu saldo.\n\n## Mantener las variantes sincronizadas\n\nLas variantes son pantallas separadas, así que una edición posterior en la versión de escritorio no pasa automáticamente a la de móvil. Dos opciones:\n\n- Pide el cambio en ambas de forma explícita: *«En la landing page de escritorio y en la de móvil, cambia el CTA a “Empieza gratis”»*.\n- O termina primero el diseño de escritorio y genera las variantes de una vez al final. Suele ser el orden de operaciones más barato.\n\n## El tema es compartido\n\nAmbas variantes usan el tema del proyecto, así que los cambios de color y tipografía se aplican a las dos automáticamente. Solo la maquetación es propia de cada variante.\n\n## Código exportado\n\nEl código exportado refleja la pantalla que has exportado. Si necesitas una única implementación realmente responsive en lugar de dos maquetaciones fijas, exporta la pantalla de escritorio y adáptala, o exporta ambas y fusiónalas en el breakpoint. Consulta [Exportar código](/help/export-and-handoff/export-code).","text":"Crear una variante Pídela, o usa el control de dispositivo de la pantalla: Haz una versión móvil de la landing page. La variante es una pantalla nueva en el lienzo, adaptada al ancho de destino; no es un redimensionado fluido. Las maquetaciones se reorganizan de verdad: las secciones de varias columnas se apilan, la navegación se pliega, la tipografía baja de escala. Coste Convertir una pantalla a otro tamaño de dispositivo se cobra por pantalla a la misma tarifa que una regeneración, porque lo es. Convertir ocho pantallas cuesta ocho veces eso: conviene revisar antes tu saldo. Mantener las variantes sincronizadas Las variantes son pantallas separadas, así que una edición posterior en la versión de escritorio no pasa automáticamente a la de móvil. Dos opciones: - Pide el cambio en ambas de forma explícita: «En la landing page de escritorio y en la de móvil, cambia el CTA a “Empieza gratis”». - O termina primero el diseño de escritorio y genera las variantes de una vez al final. Suele ser el orden de operaciones más barato. El tema es compartido Ambas variantes usan el tema del proyecto, así que los cambios de color y tipografía se aplican a las dos automáticamente. Solo la maquetación es propia de cada variante. Código exportado El código exportado refleja la pantalla que has exportado. Si necesitas una única implementación realmente responsive en lugar de dos maquetaciones fijas, exporta la pantalla de escritorio y adáptala, o exporta ambas y fusiónalas en el breakpoint. Consulta Exportar código."},{"slug":"component-libraries","category":"design-and-edit","categoryTitle":"Diseñar y editar","title":"Bibliotecas de componentes y sistemas de diseño","description":"Usa las bibliotecas integradas de Figma y React, o trae tus propios componentes a un proyecto.","url":"https://uxmagic.ai/es/help/design-and-edit/component-libraries","type":"guide","keywords":["componentes","sistema de diseño","biblioteca","componentes de react","componentes de figma","reutilizar"],"headings":["Bibliotecas integradas","Traer tu propio sistema de diseño","Mantener las pantallas generadas dentro del sistema","En Enterprise"],"updated":"2026-08-27","faqs":[],"related":["import-from-figma","themes-and-style-guides","export-code"],"markdown":"![La biblioteca integrada de componentes de Figma, con categorías de componentes listos para usar.](/help/figma-library.webp)\n\n## Bibliotecas integradas\n\nUXMagic incluye dos bibliotecas navegables de las que puedes tirar mientras diseñas:\n\n- **[Biblioteca de componentes de Figma](/figma-component-library)**: componentes listos para soltar en un archivo de Figma.\n- **[Biblioteca de componentes de React](/react-component-library)**: componentes de código que siguen los mismos patrones.\n\nAmbas están organizadas por categoría y cada componente tiene variantes.\n\n## Traer tu propio sistema de diseño\n\nImporta tus componentes de Figma o tu sistema de diseño a un proyecto para que las pantallas generadas usen *tus* componentes en lugar de otros genéricos. Consulta [Importar desde Figma](/help/generate/import-from-figma).\n\nUna vez importados, menciónalos por su nombre:\n\n> Usa nuestros componentes Button y Card para los niveles de precios.\n\n## Mantener las pantallas generadas dentro del sistema\n\nDos cosas hacen casi todo el trabajo:\n\n1. **Un tema que encaje con tu marca**, para que los colores y la tipografía sean correctos por defecto. Consulta [Temas y guías de estilo](/help/design-and-edit/themes-and-style-guides).\n2. **Instrucciones explícitas** cuando la IA empieza a improvisar: *«Usa solo componentes de nuestra biblioteca importada»*.\n\n## En Enterprise\n\nLos planes Enterprise incluyen un sistema de diseño y una biblioteca de componentes compartidos para todo el equipo, de modo que las pantallas generadas por cualquiera parten de los mismos componentes.","text":"Bibliotecas integradas UXMagic incluye dos bibliotecas navegables de las que puedes tirar mientras diseñas: - Biblioteca de componentes de Figma: componentes listos para soltar en un archivo de Figma. - Biblioteca de componentes de React: componentes de código que siguen los mismos patrones. Ambas están organizadas por categoría y cada componente tiene variantes. Traer tu propio sistema de diseño Importa tus componentes de Figma o tu sistema de diseño a un proyecto para que las pantallas generadas usen tus componentes en lugar de otros genéricos. Consulta Importar desde Figma. Una vez importados, menciónalos por su nombre: Usa nuestros componentes Button y Card para los niveles de precios. Mantener las pantallas generadas dentro del sistema Dos cosas hacen casi todo el trabajo: 1. Un tema que encaje con tu marca, para que los colores y la tipografía sean correctos por defecto. Consulta Temas y guías de estilo. 2. Instrucciones explícitas cuando la IA empieza a improvisar: «Usa solo componentes de nuestra biblioteca importada». En Enterprise Los planes Enterprise incluyen un sistema de diseño y una biblioteca de componentes compartidos para todo el equipo, de modo que las pantallas generadas por cualquiera parten de los mismos componentes."},{"slug":"export-to-figma","category":"export-and-handoff","categoryTitle":"Exportar y entregar","title":"Exportar a Figma","description":"Envía pantallas a Figma como frames editables, con auto layout y listos para desarrollo.","url":"https://uxmagic.ai/es/help/export-and-handoff/export-to-figma","type":"howto","keywords":["exportar figma","exportar a figma","auto layout","entrega","diseñador"],"headings":["Pasos","Qué obtienes","Asignación de exportaciones","Conseguir el resultado más limpio","Ida y vuelta","Si la exportación falla"],"updated":"2026-08-27","faqs":[{"question":"¿El archivo de Figma exportado es editable?","answer":"Sí. Obtienes capas reales de Figma con auto layout, texto editable y rellenos auténticos, no una imagen aplanada."},{"question":"¿Cuántas exportaciones a Figma tengo?","answer":"El plan Free incluye un número fijo reducido; los planes de pago incluyen una asignación mensual mucho mayor. Las exportaciones que te quedan se muestran en tu cuenta."}],"related":["figma-plugin","import-from-figma","export-code","figma-export-failed"],"markdown":"La exportación a Figma produce **frames de Figma reales y editables** —estructura de auto layout, capas de texto vivas, rellenos y efectos auténticos—, no una captura aplanada.\n\n![El menú de Exportación masiva abierto sobre un proyecto de UXMagic, ofreciendo exportar las pantallas seleccionadas.](/help/export-menu.webp)\n\n## Pasos\n\n1. Selecciona la pantalla (o pantallas) que quieres exportar.\n2. Elige **Exportar → Figma**.\n3. Sigue la entrega hacia Figma: por la cuenta de Figma conectada o mediante el [plugin de UXMagic para Figma](/help/integrations/figma-plugin).\n\n## Qué obtienes\n\n- **Frames con auto layout** que responden correctamente al redimensionarlos.\n- **Capas de texto editables** con sus estilos tipográficos.\n- **Rellenos, degradados y sombras auténticos.**\n- **Imágenes** trasladadas como rellenos.\n- **Capas con nombre** agrupadas por sección, para que el archivo se pueda navegar y no sea una sopa de rectángulos.\n\n## Asignación de exportaciones\n\nLas exportaciones a Figma están contabilizadas. El plan Free incluye un número fijo reducido; los planes de pago incluyen una asignación mensual amplia. Puedes ver lo que te queda en tu cuenta. Consulta [Planes y límites](/help/account-and-billing/plans-and-limits).\n\n## Conseguir el resultado más limpio\n\n- **Termina antes el tema.** Exportar, cambiar el estilo en Figma y volver a exportar significa hacer el trabajo de Figma dos veces.\n- **Exporta el flujo entero de una vez** en lugar de pantalla por pantalla, para que los frames caigan uno al lado del otro en un mismo archivo.\n- **Pon nombre a tus pantallas** antes de exportar: los nombres se conservan, y trabajar después con frames sin nombre es un suplicio.\n\n## Ida y vuelta\n\nTambién puedes ir en el otro sentido y traer frames de Figma de vuelta: consulta [Importar desde Figma](/help/generate/import-from-figma). Un flujo de trabajo habitual es: generar en UXMagic → exportar a Figma → alguien de diseño lo refina → importar de vuelta para seguir iterando con IA.\n\n## Si la exportación falla\n\nConsulta [Mi exportación a Figma ha fallado](/help/troubleshooting/figma-export-failed).","text":"La exportación a Figma produce frames de Figma reales y editables —estructura de auto layout, capas de texto vivas, rellenos y efectos auténticos—, no una captura aplanada. Pasos 1. Selecciona la pantalla (o pantallas) que quieres exportar. 2. Elige Exportar → Figma. 3. Sigue la entrega hacia Figma: por la cuenta de Figma conectada o mediante el plugin de UXMagic para Figma. Qué obtienes - Frames con auto layout que responden correctamente al redimensionarlos. - Capas de texto editables con sus estilos tipográficos. - Rellenos, degradados y sombras auténticos. - Imágenes trasladadas como rellenos. - Capas con nombre agrupadas por sección, para que el archivo se pueda navegar y no sea una sopa de rectángulos. Asignación de exportaciones Las exportaciones a Figma están contabilizadas. El plan Free incluye un número fijo reducido; los planes de pago incluyen una asignación mensual amplia. Puedes ver lo que te queda en tu cuenta. Consulta Planes y límites. Conseguir el resultado más limpio - Termina antes el tema. Exportar, cambiar el estilo en Figma y volver a exportar significa hacer el trabajo de Figma dos veces. - Exporta el flujo entero de una vez en lugar de pantalla por pantalla, para que los frames caigan uno al lado del otro en un mismo archivo. - Pon nombre a tus pantallas antes de exportar: los nombres se conservan, y trabajar después con frames sin nombre es un suplicio. Ida y vuelta También puedes ir en el otro sentido y traer frames de Figma de vuelta: consulta Importar desde Figma. Un flujo de trabajo habitual es: generar en UXMagic → exportar a Figma → alguien de diseño lo refina → importar de vuelta para seguir iterando con IA. Si la exportación falla Consulta Mi exportación a Figma ha fallado."},{"slug":"export-code","category":"export-and-handoff","categoryTitle":"Exportar y entregar","title":"Exportar código (HTML, React, Tailwind)","description":"Exporta una sola pantalla o un proyecto entero como código de front end listo para producción.","url":"https://uxmagic.ai/es/help/export-and-handoff/export-code","type":"howto","keywords":["exportar código","react","html","tailwind","desarrollador","descargar código","jsx"],"headings":["Qué puedes exportar","Exportar una pantalla","Exportar un proyecto entero","Cómo es el código","Responsive","Directo a un repositorio"],"updated":"2026-08-27","faqs":[],"related":["github-sync","export-to-figma","component-libraries"],"markdown":"![La biblioteca de componentes de React, con componentes listos para copiar a una base de código.](/help/react-library.webp)\n\n## Qué puedes exportar\n\n- **Una sola pantalla** como HTML o como componente de React.\n- **Un proyecto entero** como proyecto de React de varias pantallas, ensamblado y descargable como archivo comprimido.\n\nEl estilado es Tailwind CSS, con el tema de tu proyecto expresado como design tokens, de modo que el código lleva el mismo sistema que el lienzo.\n\n## Exportar una pantalla\n\n1. Selecciona la pantalla.\n2. **Exportar → Código**.\n3. Elige HTML o React.\n4. Cópialo o descárgalo.\n\n## Exportar un proyecto entero\n\nLa exportación de proyecto se ejecuta como una tarea en segundo plano: genera todas las pantallas y después las ensambla en una estructura de proyecto. Los proyectos grandes tardan más; puedes ver el progreso y descargar cuando termine.\n\n## Cómo es el código\n\nEs código de front end real y legible: marcado semántico, clases de utilidad de Tailwind, tokens de tema para colores y tipografía, e imágenes referenciadas por URL desde el almacenamiento de recursos de tu proyecto.\n\nDos cosas que conviene prever:\n\n- **Los recursos son remotos por defecto.** Descárgalos a tu repositorio antes de publicar, para que tu sitio en producción no dependa de las URLs de recursos de UXMagic.\n- **Es un front end.** No hay capa de datos, enrutado ni gestión de estado: eso lo conectas tú en tu aplicación.\n\n## Responsive\n\nEl código exportado refleja la pantalla que has exportado, al ancho de esa pantalla. Si has generado variantes de móvil y escritorio por separado, exporta ambas y fusiónalas en tu breakpoint. Consulta [Variantes responsive y por dispositivo](/help/design-and-edit/responsive-variants).\n\n## Directo a un repositorio\n\nPuedes enviar el código exportado directamente a GitHub en lugar de descargarlo: consulta [Sincronización con GitHub](/help/integrations/github-sync).","text":"Qué puedes exportar - Una sola pantalla como HTML o como componente de React. - Un proyecto entero como proyecto de React de varias pantallas, ensamblado y descargable como archivo comprimido. El estilado es Tailwind CSS, con el tema de tu proyecto expresado como design tokens, de modo que el código lleva el mismo sistema que el lienzo. Exportar una pantalla 1. Selecciona la pantalla. 2. Exportar → Código. 3. Elige HTML o React. 4. Cópialo o descárgalo. Exportar un proyecto entero La exportación de proyecto se ejecuta como una tarea en segundo plano: genera todas las pantallas y después las ensambla en una estructura de proyecto. Los proyectos grandes tardan más; puedes ver el progreso y descargar cuando termine. Cómo es el código Es código de front end real y legible: marcado semántico, clases de utilidad de Tailwind, tokens de tema para colores y tipografía, e imágenes referenciadas por URL desde el almacenamiento de recursos de tu proyecto. Dos cosas que conviene prever: - Los recursos son remotos por defecto. Descárgalos a tu repositorio antes de publicar, para que tu sitio en producción no dependa de las URLs de recursos de UXMagic. - Es un front end. No hay capa de datos, enrutado ni gestión de estado: eso lo conectas tú en tu aplicación. Responsive El código exportado refleja la pantalla que has exportado, al ancho de esa pantalla. Si has generado variantes de móvil y escritorio por separado, exporta ambas y fusiónalas en tu breakpoint. Consulta Variantes responsive y por dispositivo. Directo a un repositorio Puedes enviar el código exportado directamente a GitHub en lugar de descargarlo: consulta Sincronización con GitHub."},{"slug":"export-to-framer-and-webflow","category":"export-and-handoff","categoryTitle":"Exportar y entregar","title":"Exportar a Framer y Webflow","description":"Copia una pantalla a Framer o Webflow con un pegado, conservando estructura y estilos.","url":"https://uxmagic.ai/es/help/export-and-handoff/export-to-framer-and-webflow","type":"howto","keywords":["framer","webflow","no code","pegar","portapapeles","exportar framer"],"headings":["Framer","Webflow","Qué comprobar después de pegar","Cuándo usar esto en lugar de exportar código"],"updated":"2026-08-27","faqs":[],"related":["export-code","wordpress-publish","publish-your-first-site"],"markdown":"Las exportaciones a Framer y Webflow funcionan por el portapapeles: UXMagic produce el contenido que cada herramienta entiende y tú lo pegas en su lienzo.\n\n## Framer\n\n1. Selecciona la pantalla.\n2. **Exportar → Framer.**\n3. Copia el contenido generado.\n4. Abre tu proyecto de Framer y pega en el lienzo.\n\nLa estructura de maquetación, el texto y los estilos llegan como capas nativas de Framer que puedes seguir editando.\n\n## Webflow\n\n1. Selecciona la pantalla.\n2. **Exportar → Webflow.**\n3. Copia el contenido generado.\n4. En el Designer de Webflow, pega en el lienzo.\n\nObtienes elementos reales de Webflow con clases, no un bloque de embed.\n\n## Qué comprobar después de pegar\n\n- **Tipografías**: asegúrate de que las fuentes usadas están disponibles en el proyecto de destino.\n- **Imágenes**: llegan por URL; súbelas al gestor de recursos del destino antes de publicar.\n- **Interacciones**: las animaciones e interacciones se configuran en Framer o Webflow, no se trasladan.\n\n## Cuándo usar esto en lugar de exportar código\n\nSi el sitio lo va a mantener un equipo que vive en Framer o Webflow, pégalo ahí. Si es ingeniería quien lo lleva, [exporta código](/help/export-and-handoff/export-code) en su lugar.","text":"Las exportaciones a Framer y Webflow funcionan por el portapapeles: UXMagic produce el contenido que cada herramienta entiende y tú lo pegas en su lienzo. Framer 1. Selecciona la pantalla. 2. Exportar → Framer. 3. Copia el contenido generado. 4. Abre tu proyecto de Framer y pega en el lienzo. La estructura de maquetación, el texto y los estilos llegan como capas nativas de Framer que puedes seguir editando. Webflow 1. Selecciona la pantalla. 2. Exportar → Webflow. 3. Copia el contenido generado. 4. En el Designer de Webflow, pega en el lienzo. Obtienes elementos reales de Webflow con clases, no un bloque de embed. Qué comprobar después de pegar - Tipografías: asegúrate de que las fuentes usadas están disponibles en el proyecto de destino. - Imágenes: llegan por URL; súbelas al gestor de recursos del destino antes de publicar. - Interacciones: las animaciones e interacciones se configuran en Framer o Webflow, no se trasladan. Cuándo usar esto en lugar de exportar código Si el sitio lo va a mantener un equipo que vive en Framer o Webflow, pégalo ahí. Si es ingeniería quien lo lleva, exporta código en su lugar."},{"slug":"wordpress-publish","category":"export-and-handoff","categoryTitle":"Exportar y entregar","title":"Llevar un diseño a WordPress","description":"Conecta un sitio de WordPress y publica en él las pantallas generadas como páginas.","url":"https://uxmagic.ai/es/help/export-and-handoff/wordpress-publish","type":"howto","keywords":["wordpress","wp","publicar página","cms","contraseña de aplicación"],"headings":["Conectar tu sitio","Publicar una pantalla","Cosas que conviene saber","Solución de problemas"],"updated":"2026-08-27","faqs":[],"related":["publish-your-first-site","export-to-framer-and-webflow","export-code"],"markdown":"## Conectar tu sitio\n\nDos formas de conectar desde **Integraciones → WordPress**:\n\n- **Contraseña de aplicación**: crea una en tu perfil de usuario de WordPress y pégala junto con la URL de tu sitio. No hay que instalar nada.\n- **Plugin de UXMagic**: instala el plugin en tu sitio y completa el intercambio de conexión. Algo más de configuración, y después más fluido.\n\n## Publicar una pantalla\n\n1. Selecciona la pantalla.\n2. **Exportar → WordPress.**\n3. Elige si quieres crear una página nueva o sustituir una existente.\n4. Envía.\n\nTambién puedes enviar varias pantallas a la vez para crear varias páginas de una sola pasada.\n\n## Cosas que conviene saber\n\n- Las páginas se crean en tu instalación de WordPress como páginas normales: después puedes editarlas allí.\n- La cabecera y el pie de tu **tema** pueden envolver el contenido enviado. Previsualiza antes de publicar y usa una plantilla de página a todo el ancho o en blanco si quieres que el diseño ocupe todo el viewport.\n- Las **imágenes** se transfieren a la biblioteca multimedia de WordPress.\n\n## Solución de problemas\n\n- **Conexión rechazada**: comprueba que la URL del sitio incluye el protocolo y que ningún plugin de seguridad esté bloqueando la REST API.\n- **Contraseña de aplicación rechazada**: se generan por usuario en WordPress; asegúrate de copiarla entera, espacios incluidos.\n- **El contenido aparece sin estilos**: un plugin o el tema está eliminando los estilos en línea. La conexión por plugin suele gestionar esto mejor que la vía de la contraseña de aplicación.","text":"Conectar tu sitio Dos formas de conectar desde Integraciones → WordPress: - Contraseña de aplicación: crea una en tu perfil de usuario de WordPress y pégala junto con la URL de tu sitio. No hay que instalar nada. - Plugin de UXMagic: instala el plugin en tu sitio y completa el intercambio de conexión. Algo más de configuración, y después más fluido. Publicar una pantalla 1. Selecciona la pantalla. 2. Exportar → WordPress. 3. Elige si quieres crear una página nueva o sustituir una existente. 4. Envía. También puedes enviar varias pantallas a la vez para crear varias páginas de una sola pasada. Cosas que conviene saber - Las páginas se crean en tu instalación de WordPress como páginas normales: después puedes editarlas allí. - La cabecera y el pie de tu tema pueden envolver el contenido enviado. Previsualiza antes de publicar y usa una plantilla de página a todo el ancho o en blanco si quieres que el diseño ocupe todo el viewport. - Las imágenes se transfieren a la biblioteca multimedia de WordPress. Solución de problemas - Conexión rechazada: comprueba que la URL del sitio incluye el protocolo y que ningún plugin de seguridad esté bloqueando la REST API. - Contraseña de aplicación rechazada: se generan por usuario en WordPress; asegúrate de copiarla entera, espacios incluidos. - El contenido aparece sin estilos: un plugin o el tema está eliminando los estilos en línea. La conexión por plugin suele gestionar esto mejor que la vía de la contraseña de aplicación."},{"slug":"export-pdf-and-images","category":"export-and-handoff","categoryTitle":"Exportar y entregar","title":"Exportar como PDF o imagen","description":"Genera un PDF, PNG, JPEG o WebP de una pantalla para presentaciones, revisión y aprobación.","url":"https://uxmagic.ai/es/help/export-and-handoff/export-pdf-and-images","type":"howto","keywords":["pdf","png","jpeg","webp","descargar imagen","imprimir","presentación","deck"],"headings":["Formatos","Pasos","Consejos"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","share-a-project"],"markdown":"Para presentaciones, dosieres de revisión y aprobaciones, exporta una pantalla como documento o como imagen.\n\n## Formatos\n\n- **PDF**: tamaños de papel (A4, A3, Carta, Legal, Tabloide), o una sola página renderizada a un ancho exacto en píxeles para que un diseño alto no quede troceado entre páginas.\n- **PNG**: sin pérdida, la mejor opción para capturas de interfaz.\n- **JPEG**: más ligero, con calidad ajustable, la mejor opción para diseños con muchas fotos.\n- **WebP**: el más ligero a igualdad de calidad, para la web.\n\n## Pasos\n\n1. Selecciona la pantalla.\n2. **Exportar → PDF / Imagen.**\n3. Elige el formato y las opciones (tamaño de papel o ancho exacto, y calidad para JPEG).\n4. Las exportaciones grandes se ejecutan como tarea en segundo plano: recibirás el archivo cuando termine el renderizado.\n\n## Consejos\n\n- Para una **landing page alta**, usa el modo PDF de ancho exacto en lugar de A4. Renderiza una sola página continua en vez de trocear el diseño en fragmentos.\n- Para la **revisión con un cliente**, un enlace compartido es mejor que un PDF: se mantiene actualizado y la gente puede comentar. Consulta [Compartir un proyecto](/help/collaborate/share-a-project).","text":"Para presentaciones, dosieres de revisión y aprobaciones, exporta una pantalla como documento o como imagen. Formatos - PDF: tamaños de papel (A4, A3, Carta, Legal, Tabloide), o una sola página renderizada a un ancho exacto en píxeles para que un diseño alto no quede troceado entre páginas. - PNG: sin pérdida, la mejor opción para capturas de interfaz. - JPEG: más ligero, con calidad ajustable, la mejor opción para diseños con muchas fotos. - WebP: el más ligero a igualdad de calidad, para la web. Pasos 1. Selecciona la pantalla. 2. Exportar → PDF / Imagen. 3. Elige el formato y las opciones (tamaño de papel o ancho exacto, y calidad para JPEG). 4. Las exportaciones grandes se ejecutan como tarea en segundo plano: recibirás el archivo cuando termine el renderizado. Consejos - Para una landing page alta, usa el modo PDF de ancho exacto en lugar de A4. Renderiza una sola página continua en vez de trocear el diseño en fragmentos. - Para la revisión con un cliente, un enlace compartido es mejor que un PDF: se mantiene actualizado y la gente puede comentar. Consulta Compartir un proyecto."},{"slug":"export-to-canva","category":"export-and-handoff","categoryTitle":"Exportar y entregar","title":"Exportar a Canva","description":"Lleva un diseño de UXMagic a Canva para trabajo de marketing y redes sociales.","url":"https://uxmagic.ai/es/help/export-and-handoff/export-to-canva","type":"howto","keywords":["canva","redes sociales","marketing","gráficas"],"headings":["Pasos","Cuándo usarlo"],"updated":"2026-08-27","faqs":[],"related":["export-pdf-and-images","export-to-figma"],"markdown":"Canva está soportado para la parte de marketing del flujo de trabajo: convertir una pantalla diseñada en recursos que tu equipo de marketing pueda adaptar.\n\n## Pasos\n\n1. Conecta Canva desde **Integraciones**.\n2. Selecciona el diseño que quieres trasladar.\n3. **Exportar → Canva** y después ábrelo en Canva para seguir editando.\n\n## Cuándo usarlo\n\nUsa Canva para recortes para redes, anuncios y material de marketing puntual. Para cualquier cosa que vaya a recoger alguien de diseño o de ingeniería, usa [Figma](/help/export-and-handoff/export-to-figma) o [código](/help/export-and-handoff/export-code): esos conservan la estructura, Canva conserva la apariencia.","text":"Canva está soportado para la parte de marketing del flujo de trabajo: convertir una pantalla diseñada en recursos que tu equipo de marketing pueda adaptar. Pasos 1. Conecta Canva desde Integraciones. 2. Selecciona el diseño que quieres trasladar. 3. Exportar → Canva y después ábrelo en Canva para seguir editando. Cuándo usarlo Usa Canva para recortes para redes, anuncios y material de marketing puntual. Para cualquier cosa que vaya a recoger alguien de diseño o de ingeniería, usa Figma o código: esos conservan la estructura, Canva conserva la apariencia."},{"slug":"publish-your-first-site","category":"publish","categoryTitle":"Publicar un sitio en producción","title":"Publica tu primer sitio","description":"Pon un proyecto en producción en un subdominio uxmagic.io en un par de minutos.","url":"https://uxmagic.ai/es/help/publish/publish-your-first-site","type":"howto","keywords":["publicar","poner en producción","sitio web","desplegar","alojamiento","lanzar"],"headings":["Pasos","Qué obtienes","Funciones de los planes de pago","Actualizar un sitio publicado","Tu propio dominio"],"updated":"2026-08-27","faqs":[{"question":"¿El alojamiento está incluido?","answer":"Sí. Los sitios publicados los aloja UXMagic en un subdominio uxmagic.io, con HTTPS, sin coste adicional más allá de tu plan."},{"question":"¿Puedo publicar con el plan Free?","answer":"Sí, dentro del límite de sitios publicados de tu plan. Quitar el distintivo de UX Magic y proteger un sitio con contraseña requieren un plan de pago."}],"related":["subdomains-and-urls","custom-domains","redeploy-and-rollback"],"markdown":"Publicar convierte las pantallas de un proyecto en un sitio web real y alojado, con HTTPS.\n\n## Pasos\n\n1. Abre el proyecto y haz clic en **Publicar**.\n2. **Elige qué pantallas** se convierten en páginas y fija la página de inicio. Las pantallas que dejes fuera siguen en el proyecto, pero no forman parte del sitio.\n3. **Elige un subdominio.** Obtendrás `tu-nombre.uxmagic.io`. La disponibilidad se comprueba mientras escribes. Consulta [Subdominios y URLs](/help/publish/subdomains-and-urls).\n4. **Ejecuta la comprobación previa.** Señala los problemas que darían lugar a un mal sitio en producción: enlaces que faltan, páginas vacías, contenido de relleno.\n5. **Publica.** La compilación se ejecuta en segundo plano; recibirás la URL en producción cuando termine.\n\n## Qué obtienes\n\n- Un sitio alojado en `*.uxmagic.io` con HTTPS automático.\n- Una **URL de vista previa por despliegue**, para revisar una compilación antes de dirigir a nadie a ella.\n- **Historial de despliegues** con reversión en un clic.\n\n## Funciones de los planes de pago\n\n- **Quitar el distintivo de UX Magic** requiere un plan de pago.\n- Los **sitios privados y protegidos con contraseña** requieren un plan de pago.\n- Los **límites de sitios publicados** varían según el plan; consulta [Planes y límites](/help/account-and-billing/plans-and-limits).\n\n## Actualizar un sitio publicado\n\nEditar pantallas no cambia el sitio en producción. Vuelve a publicar para desplegar tus cambios. Consulta [Redesplegar y revertir](/help/publish/redeploy-and-rollback).\n\n## Tu propio dominio\n\nLos sitios publicados pueden pasarse a tu propio dominio: consulta [Dominios propios](/help/publish/custom-domains).","text":"Publicar convierte las pantallas de un proyecto en un sitio web real y alojado, con HTTPS. Pasos 1. Abre el proyecto y haz clic en Publicar. 2. Elige qué pantallas se convierten en páginas y fija la página de inicio. Las pantallas que dejes fuera siguen en el proyecto, pero no forman parte del sitio. 3. Elige un subdominio. Obtendrás tu-nombre.uxmagic.io. La disponibilidad se comprueba mientras escribes. Consulta Subdominios y URLs. 4. Ejecuta la comprobación previa. Señala los problemas que darían lugar a un mal sitio en producción: enlaces que faltan, páginas vacías, contenido de relleno. 5. Publica. La compilación se ejecuta en segundo plano; recibirás la URL en producción cuando termine. Qué obtienes - Un sitio alojado en .uxmagic.io con HTTPS automático. - Una URL de vista previa por despliegue, para revisar una compilación antes de dirigir a nadie a ella. - Historial de despliegues con reversión en un clic. Funciones de los planes de pago - Quitar el distintivo de UX Magic requiere un plan de pago. - Los sitios privados y protegidos con contraseña requieren un plan de pago. - Los límites de sitios publicados varían según el plan; consulta Planes y límites. Actualizar un sitio publicado Editar pantallas no cambia el sitio en producción. Vuelve a publicar para desplegar tus cambios. Consulta Redesplegar y revertir. Tu propio dominio Los sitios publicados pueden pasarse a tu propio dominio: consulta Dominios propios."},{"slug":"subdomains-and-urls","category":"publish","categoryTitle":"Publicar un sitio en producción","title":"Subdominios, URLs de página y vistas previas","description":"Elegir un subdominio, cómo se derivan las rutas de las páginas y para qué sirve la URL de vista previa.","url":"https://uxmagic.ai/es/help/publish/subdomains-and-urls","type":"reference","keywords":["subdominio","url","slug","enlace de vista previa","reservado","dirección"],"headings":["Reglas de los subdominios","URLs de las páginas","URLs de vista previa","Cambiar tu subdominio","HTTPS"],"updated":"2026-08-27","faqs":[],"related":["publish-your-first-site","custom-domains","redeploy-and-rollback"],"markdown":"## Reglas de los subdominios\n\nTu sitio vive en `<subdominio>.uxmagic.io`.\n\n- Entre **3 y 63 caracteres**.\n- Solo **letras, números y guiones**; sin guion inicial ni final.\n- **No distingue mayúsculas**: todo se normaliza a minúsculas.\n- Debe ser **único** entre todos los sitios de UXMagic.\n- Algunos nombres están **reservados** (nombres de sistema e infraestructura). Los nombres reservados se rechazan, y UXMagic tampoco sugerirá una variante cercana a uno de ellos: una sugerencia que en realidad no puedes reclamar es peor que ninguna sugerencia.\n\nSi tu primera opción está ocupada, se sugieren alternativas mientras escribes, y solo las que están realmente disponibles.\n\n## URLs de las páginas\n\nLa página de inicio que elijas se sirve en `/`. Cada una de las demás pantallas publicadas se convierte en una ruta derivada de su nombre, así que pon nombre a tus pantallas antes de publicar. «Precios» se convierte en `/precios`; «Pantalla 4» se convierte en `/pantalla-4`, que no es lo que quieres en un enlace compartido.\n\n## URLs de vista previa\n\nCada despliegue tiene su propio host de vista previa, distinto del sitio en producción. Úsalo para comprobar una compilación antes de que se convierta en la versión que todo el mundo ve, y para compartir un cambio propuesto sin tocar producción.\n\n## Cambiar tu subdominio\n\nPuedes cambiarlo más adelante. La dirección antigua deja de funcionar, así que actualiza los enlaces que ya hayas compartido.\n\n## HTTPS\n\nLos certificados se gestionan por ti tanto en `*.uxmagic.io` como en los dominios propios conectados. No hay nada que configurar ni nada que renovar.","text":"Reglas de los subdominios Tu sitio vive en <subdominio>.uxmagic.io. - Entre 3 y 63 caracteres. - Solo letras, números y guiones; sin guion inicial ni final. - No distingue mayúsculas: todo se normaliza a minúsculas. - Debe ser único entre todos los sitios de UXMagic. - Algunos nombres están reservados (nombres de sistema e infraestructura). Los nombres reservados se rechazan, y UXMagic tampoco sugerirá una variante cercana a uno de ellos: una sugerencia que en realidad no puedes reclamar es peor que ninguna sugerencia. Si tu primera opción está ocupada, se sugieren alternativas mientras escribes, y solo las que están realmente disponibles. URLs de las páginas La página de inicio que elijas se sirve en /. Cada una de las demás pantallas publicadas se convierte en una ruta derivada de su nombre, así que pon nombre a tus pantallas antes de publicar. «Precios» se convierte en /precios; «Pantalla 4» se convierte en /pantalla-4, que no es lo que quieres en un enlace compartido. URLs de vista previa Cada despliegue tiene su propio host de vista previa, distinto del sitio en producción. Úsalo para comprobar una compilación antes de que se convierta en la versión que todo el mundo ve, y para compartir un cambio propuesto sin tocar producción. Cambiar tu subdominio Puedes cambiarlo más adelante. La dirección antigua deja de funcionar, así que actualiza los enlaces que ya hayas compartido. HTTPS Los certificados se gestionan por ti tanto en .uxmagic.io como en los dominios propios conectados. No hay nada que configurar ni nada que renovar."},{"slug":"custom-domains","category":"publish","categoryTitle":"Publicar un sitio en producción","title":"Dominios propios","description":"Sirve un sitio publicado desde tu propio dominio, y cómo solicitarlo.","url":"https://uxmagic.ai/es/help/publish/custom-domains","type":"howto","keywords":["dominio propio","dominio personalizado","dns","cname","nombre de dominio","marca"],"headings":["Cómo funciona hoy","Solicitar un dominio","Qué vas a necesitar","Apex frente a www","HTTPS","Tiempos"],"updated":"2026-08-27","faqs":[],"related":["subdomains-and-urls","publish-your-first-site","plans-and-limits"],"markdown":"## Cómo funciona hoy\n\nLos dominios propios están disponibles para los planes de pago y se configuran **bajo petición**, no en autoservicio. Es deliberado: apuntar un dominio real a un host nuevo es el paso en el que un error sin supervisión tumba un sitio en producción, así que una persona lo revisa contigo.\n\n## Solicitar un dominio\n\n1. Abre los **ajustes de publicación** de tu sitio publicado.\n2. Elige **Usar un dominio propio**.\n3. Introduce el dominio que quieres usar (por ejemplo `www.tuempresa.com`) y envía la solicitud.\n4. El equipo te responde con los registros DNS exactos que hay que añadir, y confirma cuando el dominio esté activo.\n\nPodrás ver el estado de tu solicitud en el mismo sitio.\n\n## Qué vas a necesitar\n\n- **Un dominio que controles**, con acceso a sus ajustes de DNS.\n- **La capacidad de añadir un CNAME** (o un registro A/ALIAS para un dominio apex).\n\n## Apex frente a www\n\nLos dos funcionan. `www.tuempresa.com` es el caso más sencillo: un CNAME normal. Un dominio apex (`tuempresa.com`, sin www) necesita un proveedor que admita aplanado ALIAS/ANAME; la mayoría de los registradores modernos lo hacen, y las instrucciones de configuración cubrirán tu proveedor.\n\n## HTTPS\n\nLos certificados se emiten y renuevan automáticamente una vez verificado el dominio. Nada que comprar, nada que instalar.\n\n## Tiempos\n\nLos cambios de DNS se propagan a su propio ritmo: normalmente minutos, a veces horas. No anuncies la dirección nueva hasta que la hayas cargado tú.","text":"Cómo funciona hoy Los dominios propios están disponibles para los planes de pago y se configuran bajo petición, no en autoservicio. Es deliberado: apuntar un dominio real a un host nuevo es el paso en el que un error sin supervisión tumba un sitio en producción, así que una persona lo revisa contigo. Solicitar un dominio 1. Abre los ajustes de publicación de tu sitio publicado. 2. Elige Usar un dominio propio. 3. Introduce el dominio que quieres usar (por ejemplo www.tuempresa.com) y envía la solicitud. 4. El equipo te responde con los registros DNS exactos que hay que añadir, y confirma cuando el dominio esté activo. Podrás ver el estado de tu solicitud en el mismo sitio. Qué vas a necesitar - Un dominio que controles, con acceso a sus ajustes de DNS. - La capacidad de añadir un CNAME (o un registro A/ALIAS para un dominio apex). Apex frente a www Los dos funcionan. www.tuempresa.com es el caso más sencillo: un CNAME normal. Un dominio apex (tuempresa.com, sin www) necesita un proveedor que admita aplanado ALIAS/ANAME; la mayoría de los registradores modernos lo hacen, y las instrucciones de configuración cubrirán tu proveedor. HTTPS Los certificados se emiten y renuevan automáticamente una vez verificado el dominio. Nada que comprar, nada que instalar. Tiempos Los cambios de DNS se propagan a su propio ritmo: normalmente minutos, a veces horas. No anuncies la dirección nueva hasta que la hayas cargado tú."},{"slug":"redeploy-and-rollback","category":"publish","categoryTitle":"Publicar un sitio en producción","title":"Redesplegar, revertir y despublicar","description":"Lleva cambios a un sitio en producción, revierte un despliegue defectuoso y retira un sitio.","url":"https://uxmagic.ai/es/help/publish/redeploy-and-rollback","type":"howto","keywords":["redesplegar","revertir","despublicar","retirar","rollback","despliegue","actualizar sitio"],"headings":["Publicar cambios","Historial de despliegues","Revertir","Despublicar","Límites de sitios"],"updated":"2026-08-27","faqs":[],"related":["publish-your-first-site","subdomains-and-urls"],"markdown":"## Publicar cambios\n\nLas ediciones de tus pantallas **no** están en producción automáticamente. Cuando estés listo, vuelve a publicar: se compila un despliegue nuevo y se intercambia cuando está listo. Los visitantes siguen viendo la compilación anterior hasta que la nueva está completa, así que no hay ninguna ventana rota a mitad del despliegue.\n\n## Historial de despliegues\n\nCada publicación se conserva como un despliegue, con su propia URL de vista previa. Eso te da dos cosas útiles: un registro de qué estaba en producción y cuándo, y una forma de enseñarle a alguien una compilación propuesta sin convertirla en el sitio en producción.\n\n## Revertir\n\nElige un despliegue anterior y revierte a él. El sitio vuelve a esa compilación exacta de inmediato: no hay recompilación, porque la compilación antigua sigue existiendo.\n\nRevierte primero, depura después. Tarda segundos y detiene la hemorragia.\n\n## Despublicar\n\n**Despublicar** deja el sitio fuera de línea pero conserva su registro, su subdominio y su historial de despliegues, de modo que puedes recuperarlo más adelante en la misma dirección.\n\n**Eliminar** borra el sitio por completo y libera el subdominio para que cualquiera pueda reclamarlo. Eso no tiene vuelta atrás.\n\n## Límites de sitios\n\nDespublicar libera la plaza que ocupaba el sitio dentro del límite de sitios publicados de tu plan. Eliminar también. Consulta [Planes y límites](/help/account-and-billing/plans-and-limits).","text":"Publicar cambios Las ediciones de tus pantallas no están en producción automáticamente. Cuando estés listo, vuelve a publicar: se compila un despliegue nuevo y se intercambia cuando está listo. Los visitantes siguen viendo la compilación anterior hasta que la nueva está completa, así que no hay ninguna ventana rota a mitad del despliegue. Historial de despliegues Cada publicación se conserva como un despliegue, con su propia URL de vista previa. Eso te da dos cosas útiles: un registro de qué estaba en producción y cuándo, y una forma de enseñarle a alguien una compilación propuesta sin convertirla en el sitio en producción. Revertir Elige un despliegue anterior y revierte a él. El sitio vuelve a esa compilación exacta de inmediato: no hay recompilación, porque la compilación antigua sigue existiendo. Revierte primero, depura después. Tarda segundos y detiene la hemorragia. Despublicar Despublicar deja el sitio fuera de línea pero conserva su registro, su subdominio y su historial de despliegues, de modo que puedes recuperarlo más adelante en la misma dirección. Eliminar borra el sitio por completo y libera el subdominio para que cualquiera pueda reclamarlo. Eso no tiene vuelta atrás. Límites de sitios Despublicar libera la plaza que ocupaba el sitio dentro del límite de sitios publicados de tu plan. Eliminar también. Consulta Planes y límites."},{"slug":"share-a-project","category":"collaborate","categoryTitle":"Compartir y colaborar","title":"Compartir un proyecto","description":"Invita a personas concretas, o comparte un enlace que permita unirse a quien lo abra.","url":"https://uxmagic.ai/es/help/collaborate/share-a-project","type":"howto","keywords":["compartir","invitar","colaborador","enlace","revisión con cliente","acceso"],"headings":["Dos formas de compartir","Pasos","Qué pueden hacer los colaboradores","De quién se gastan los créditos","Compartir solo para revisar","Retirar el acceso"],"updated":"2026-08-27","faqs":[],"related":["teams-and-seats","comments-and-feedback","share-a-preview"],"markdown":"![El diálogo «Compartir este proyecto», con el acceso en Privado y la nota «Este proyecto solo es visible para ti».](/help/share-dialog.webp)\n\n## Dos formas de compartir\n\n**Invitar por correo.** Añade personas concretas a un proyecto concreto. Reciben un correo y el proyecto aparece en su panel cuando aceptan. Úsalo para quienes van a trabajar de verdad en el diseño.\n\n**Cualquiera con el enlace.** Genera un enlace que añade al proyecto a quien lo abra. Úsalo para un canal de equipo o un hilo con un cliente donde perseguir direcciones de correo una a una no compensa, pero ten en cuenta que quien reciba el enlace reenviado también obtiene acceso.\n\n## Pasos\n\n1. Abre el proyecto.\n2. Haz clic en **Compartir**.\n3. Introduce direcciones de correo, o activa el enlace compartido y cópialo.\n\n## Qué pueden hacer los colaboradores\n\nLos colaboradores trabajan en el proyecto igual que tú: hablar con la IA, editar pantallas, exportar. De quién se gastan los créditos depende de cómo se comparta el proyecto; mira abajo.\n\n## De quién se gastan los créditos\n\nEsta es la parte que sorprende. Cuando un proyecto se comparte con un **equipo**, el trabajo de IA en ese proyecto se carga al **fondo del equipo** o a la asignación del miembro que actúa dentro de él, no a su saldo personal. En un proyecto compartido de persona a persona fuera de un equipo, el saldo de cada uno paga el trabajo que esa persona desencadena.\n\nConsulta [Equipos y asientos](/help/collaborate/teams-and-seats).\n\n## Compartir solo para revisar\n\nSi lo que quieres es recibir opiniones y no colaboradores, comparte una **vista previa**: muestra el diseño sin dar a nadie la capacidad de editarlo. Consulta [Compartir una vista previa para revisión](/help/collaborate/share-a-preview).\n\n## Retirar el acceso\n\nQuita a alguien desde los ajustes de compartición del proyecto, o desactiva el enlace compartido. Desactivar el enlace no elimina a quienes ya se unieron por él: hay que quitarlos uno a uno.","text":"Dos formas de compartir Invitar por correo. Añade personas concretas a un proyecto concreto. Reciben un correo y el proyecto aparece en su panel cuando aceptan. Úsalo para quienes van a trabajar de verdad en el diseño. Cualquiera con el enlace. Genera un enlace que añade al proyecto a quien lo abra. Úsalo para un canal de equipo o un hilo con un cliente donde perseguir direcciones de correo una a una no compensa, pero ten en cuenta que quien reciba el enlace reenviado también obtiene acceso. Pasos 1. Abre el proyecto. 2. Haz clic en Compartir. 3. Introduce direcciones de correo, o activa el enlace compartido y cópialo. Qué pueden hacer los colaboradores Los colaboradores trabajan en el proyecto igual que tú: hablar con la IA, editar pantallas, exportar. De quién se gastan los créditos depende de cómo se comparta el proyecto; mira abajo. De quién se gastan los créditos Esta es la parte que sorprende. Cuando un proyecto se comparte con un equipo, el trabajo de IA en ese proyecto se carga al fondo del equipo o a la asignación del miembro que actúa dentro de él, no a su saldo personal. En un proyecto compartido de persona a persona fuera de un equipo, el saldo de cada uno paga el trabajo que esa persona desencadena. Consulta Equipos y asientos. Compartir solo para revisar Si lo que quieres es recibir opiniones y no colaboradores, comparte una vista previa: muestra el diseño sin dar a nadie la capacidad de editarlo. Consulta Compartir una vista previa para revisión. Retirar el acceso Quita a alguien desde los ajustes de compartición del proyecto, o desactiva el enlace compartido. Desactivar el enlace no elimina a quienes ya se unieron por él: hay que quitarlos uno a uno."},{"slug":"share-a-preview","category":"collaborate","categoryTitle":"Compartir y colaborar","title":"Compartir una vista previa para revisión","description":"Envía un enlace de solo lectura para que otras personas vean el diseño sin editarlo.","url":"https://uxmagic.ai/es/help/collaborate/share-a-preview","type":"howto","keywords":["vista previa","enlace de revisión","solo lectura","interlocutor","cliente","presentar"],"headings":["Cuándo usar una vista previa","Pasos","Vista previa frente a sitio publicado","Vista previa frente a PDF"],"updated":"2026-08-27","faqs":[],"related":["share-a-project","comments-and-feedback","publish-your-first-site"],"markdown":"![El menú Prototipo abierto en el lienzo, con «Crear prototipo» y un prototipo existente de tres pantallas.](/help/prototype-menu.webp)\n\n## Cuándo usar una vista previa\n\nLos enlaces de vista previa son para quien necesita **mirar**, no construir: clientes, dirección, ingeniería dimensionando trabajo. Ven las pantallas tal como están diseñadas, sin el lienzo, sin el chat y sin la posibilidad de cambiar nada.\n\n## Pasos\n\n1. Abre el proyecto o la pantalla.\n2. **Compartir → Enlace de vista previa.**\n3. Envía el enlace.\n\n## Vista previa frente a sitio publicado\n\n- **Vista previa**: un artefacto de revisión. Rápido, desechable, ligado al proyecto.\n- **[Sitio publicado](/help/publish/publish-your-first-site)**: un sitio web real en su propia dirección, con páginas, alojamiento e historial de despliegues.\n\nPara la aprobación de un cliente, vista previa. Para algo que el cliente vaya a enseñar a *sus* clientes, publica.\n\n## Vista previa frente a PDF\n\nUna vista previa se mantiene al día mientras iteras; un PDF queda congelado en el momento en que lo exportas. Envía vistas previas para revisión en vivo y PDFs como registro de lo aprobado. Consulta [Exportar como PDF o imagen](/help/export-and-handoff/export-pdf-and-images).","text":"Cuándo usar una vista previa Los enlaces de vista previa son para quien necesita mirar, no construir: clientes, dirección, ingeniería dimensionando trabajo. Ven las pantallas tal como están diseñadas, sin el lienzo, sin el chat y sin la posibilidad de cambiar nada. Pasos 1. Abre el proyecto o la pantalla. 2. Compartir → Enlace de vista previa. 3. Envía el enlace. Vista previa frente a sitio publicado - Vista previa: un artefacto de revisión. Rápido, desechable, ligado al proyecto. - Sitio publicado: un sitio web real en su propia dirección, con páginas, alojamiento e historial de despliegues. Para la aprobación de un cliente, vista previa. Para algo que el cliente vaya a enseñar a sus clientes, publica. Vista previa frente a PDF Una vista previa se mantiene al día mientras iteras; un PDF queda congelado en el momento en que lo exportas. Envía vistas previas para revisión en vivo y PDFs como registro de lo aprobado. Consulta Exportar como PDF o imagen."},{"slug":"teams-and-seats","category":"collaborate","categoryTitle":"Compartir y colaborar","title":"Equipos, asientos y créditos compartidos","description":"Crea un equipo, invita a miembros, asigna roles y reparte créditos desde un fondo común.","url":"https://uxmagic.ai/es/help/collaborate/teams-and-seats","type":"guide","keywords":["equipo","asientos","miembros","roles","créditos compartidos","organización","espacio de trabajo"],"headings":["Crear un equipo","Asientos","Roles","Créditos compartidos","Quitar a un miembro","Enterprise"],"updated":"2026-08-27","faqs":[{"question":"¿Los miembros del equipo necesitan su propia suscripción?","answer":"No. Los miembros trabajan contra los asientos y el fondo de créditos del equipo. La persona propietaria gestiona ambos."},{"question":"¿Puedo limitar cuántos créditos puede gastar un solo miembro?","answer":"Sí. La persona propietaria puede fijar una asignación de créditos por miembro, para que nadie pueda vaciar el fondo común."}],"related":["share-a-project","how-credits-work","plans-and-limits"],"markdown":"## Crear un equipo\n\nDesde tu cuenta, crea un equipo e invita a miembros por correo. Las invitaciones aparecen en el panel de la persona invitada y por correo; se unen cuando aceptan.\n\n## Asientos\n\nUn equipo tiene un número de **asientos**, que limita cuántos miembros pueden estar activos. Quien es propietario puede ajustar el número de asientos a medida que crece el equipo. Los planes Enterprise incluyen asientos ilimitados.\n\n## Roles\n\nLos miembros tienen roles que determinan qué pueden administrar: quién puede invitar, quién puede cambiar la facturación, quién solo puede diseñar. La propiedad puede transferirse a otro miembro.\n\n## Créditos compartidos\n\nLa parte importante. Un equipo tiene un **fondo de créditos compartido**:\n\n- El trabajo de IA en un proyecto de equipo consume del fondo del equipo, no del saldo personal de quien lo hace.\n- Quien es propietario puede fijar una **asignación por miembro**, para que una persona entusiasta lanzando flujos grandes no pueda gastarse los créditos del mes en una tarde.\n- Los miembros sin asignación consumen del fondo general.\n\nConsulta [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work).\n\n## Quitar a un miembro\n\nQuitar a alguien le revoca el acceso a los proyectos del equipo. El trabajo que haya creado se queda en el equipo.\n\n## Enterprise\n\nEnterprise añade SSO/SAML, un panel de administración, un sistema de diseño y una biblioteca de componentes compartidos, asignación de créditos personalizada y soporte prioritario. Consulta [Planes y límites](/help/account-and-billing/plans-and-limits).","text":"Crear un equipo Desde tu cuenta, crea un equipo e invita a miembros por correo. Las invitaciones aparecen en el panel de la persona invitada y por correo; se unen cuando aceptan. Asientos Un equipo tiene un número de asientos, que limita cuántos miembros pueden estar activos. Quien es propietario puede ajustar el número de asientos a medida que crece el equipo. Los planes Enterprise incluyen asientos ilimitados. Roles Los miembros tienen roles que determinan qué pueden administrar: quién puede invitar, quién puede cambiar la facturación, quién solo puede diseñar. La propiedad puede transferirse a otro miembro. Créditos compartidos La parte importante. Un equipo tiene un fondo de créditos compartido: - El trabajo de IA en un proyecto de equipo consume del fondo del equipo, no del saldo personal de quien lo hace. - Quien es propietario puede fijar una asignación por miembro, para que una persona entusiasta lanzando flujos grandes no pueda gastarse los créditos del mes en una tarde. - Los miembros sin asignación consumen del fondo general. Consulta Cómo funcionan los créditos. Quitar a un miembro Quitar a alguien le revoca el acceso a los proyectos del equipo. El trabajo que haya creado se queda en el equipo. Enterprise Enterprise añade SSO/SAML, un panel de administración, un sistema de diseño y una biblioteca de componentes compartidos, asignación de créditos personalizada y soporte prioritario. Consulta Planes y límites."},{"slug":"comments-and-feedback","category":"collaborate","categoryTitle":"Compartir y colaborar","title":"Comentarios y opiniones","description":"Deja comentarios sobre un diseño y resuélvelos a medida que los vas atendiendo.","url":"https://uxmagic.ai/es/help/collaborate/comments-and-feedback","type":"howto","keywords":["comentarios","opiniones","anotar","revisión","notas","hilos"],"headings":["Comentar","Resolver","Atender opiniones con la IA","Quién puede comentar"],"updated":"2026-08-27","faqs":[],"related":["share-a-preview","share-a-project"],"markdown":"## Comentar\n\nLos comentarios se adjuntan a un diseño y forman hilos, así que una conversación sobre el hero se queda con el hero en lugar de dispersarse por Slack.\n\n1. Abre el proyecto o la vista previa.\n2. Añade un comentario donde corresponda la observación.\n3. Responde en el hilo para mantener la discusión unida.\n\n## Resolver\n\nResuelve un hilo cuando hayas actuado sobre él. Los hilos resueltos siguen disponibles, así que el registro de *por qué* cambió algo no se pierde.\n\n## Atender opiniones con la IA\n\nLos comentarios son para personas; el chat es para la IA. El bucle eficiente es: recoge comentarios y después traduce un lote a un par de instrucciones concretas en el chat. Dos o tres cambios cada vez aterrizan con más fiabilidad que una lista de doce. Consulta [Editar con el chat](/help/design-and-edit/chat-editing).\n\n## Quién puede comentar\n\nCualquiera con acceso al proyecto y, en el caso de los enlaces de revisión, cualquiera a quien envíes la vista previa.","text":"Comentar Los comentarios se adjuntan a un diseño y forman hilos, así que una conversación sobre el hero se queda con el hero en lugar de dispersarse por Slack. 1. Abre el proyecto o la vista previa. 2. Añade un comentario donde corresponda la observación. 3. Responde en el hilo para mantener la discusión unida. Resolver Resuelve un hilo cuando hayas actuado sobre él. Los hilos resueltos siguen disponibles, así que el registro de por qué cambió algo no se pierde. Atender opiniones con la IA Los comentarios son para personas; el chat es para la IA. El bucle eficiente es: recoge comentarios y después traduce un lote a un par de instrucciones concretas en el chat. Dos o tres cambios cada vez aterrizan con más fiabilidad que una lista de doce. Consulta Editar con el chat. Quién puede comentar Cualquiera con acceso al proyecto y, en el caso de los enlaces de revisión, cualquiera a quien envíes la vista previa."},{"slug":"community-and-inspiration","category":"collaborate","categoryTitle":"Compartir y colaborar","title":"Comunidad e inspiración","description":"Explora los diseños que ha compartido la comunidad, y publica los tuyos.","url":"https://uxmagic.ai/es/help/collaborate/community-and-inspiration","type":"guide","keywords":["comunidad","inspiración","escaparate","ejemplos","plantillas","galería"],"headings":["Explorar la comunidad","Usar un diseño de la comunidad","Compartir los tuyos","Inspiración dentro del producto"],"updated":"2026-08-27","faqs":[],"related":["create-your-first-project","ways-to-generate-a-screen"],"markdown":"![La página de Comunidad, con proyectos publicados que se pueden abrir y remezclar.](/help/community.webp)\n\n## Explorar la comunidad\n\nLa [galería de la comunidad](/community) reúne diseños hechos con UXMagic, organizados por categoría. Es la forma más rápida de ver qué producen los buenos prompts y de encontrar un punto de partida cercano a lo que necesitas.\n\n## Usar un diseño de la comunidad\n\nAbre uno que te guste y úsalo como referencia: parte de él, o describe lo que quieres señalándolo. Los diseños de la comunidad son inspiración, no recursos con licencia: trata las imágenes y los textos como marcadores de posición.\n\n## Compartir los tuyos\n\nPuedes publicar un proyecto en la comunidad desde sus ajustes de compartición. Revisa antes el contenido: los diseños de la comunidad son públicos, así que los nombres de clientes, los datos reales de personas usuarias y la marca no anunciada deberían salir de ahí antes de publicar.\n\n## Inspiración dentro del producto\n\nEl panel también te muestra inspiraciones y ejemplos mientras trabajas, para que puedas traerte una idea de maquetación sin salir del lienzo.","text":"Explorar la comunidad La galería de la comunidad reúne diseños hechos con UXMagic, organizados por categoría. Es la forma más rápida de ver qué producen los buenos prompts y de encontrar un punto de partida cercano a lo que necesitas. Usar un diseño de la comunidad Abre uno que te guste y úsalo como referencia: parte de él, o describe lo que quieres señalándolo. Los diseños de la comunidad son inspiración, no recursos con licencia: trata las imágenes y los textos como marcadores de posición. Compartir los tuyos Puedes publicar un proyecto en la comunidad desde sus ajustes de compartición. Revisa antes el contenido: los diseños de la comunidad son públicos, así que los nombres de clientes, los datos reales de personas usuarias y la marca no anunciada deberían salir de ahí antes de publicar. Inspiración dentro del producto El panel también te muestra inspiraciones y ejemplos mientras trabajas, para que puedas traerte una idea de maquetación sin salir del lienzo."},{"slug":"mcp-server","category":"integrations","categoryTitle":"Integraciones y desarrollo","title":"Servidor MCP de UXMagic","description":"Conecta Claude, Cursor, VS Code, Windsurf, Codex o Antigravity a tus proyectos de UXMagic.","url":"https://uxmagic.ai/es/help/integrations/mcp-server","type":"howto","keywords":["mcp","model context protocol","cursor","claude","vscode","windsurf","ide","codex"],"headings":["Configuración","Qué puede hacer tu asistente una vez conectado","Un flujo de trabajo típico","Créditos","Seguridad"],"updated":"2026-08-27","faqs":[{"question":"¿Qué IDEs están soportados?","answer":"Claude, Cursor, VS Code, Windsurf, Codex y Antigravity, y cualquier otro cliente compatible con MCP."},{"question":"¿Tengo que instalar algo?","answer":"No. UXMagic genera la configuración para tu IDE; tú la pegas en los ajustes de MCP del IDE."}],"related":["api-keys","export-code","github-sync"],"markdown":"El Model Context Protocol (MCP) es un estándar abierto que permite a los asistentes de IA hablar directamente con herramientas externas. El servidor MCP de UXMagic conecta tu asistente de programación con tus proyectos reales de UXMagic, de modo que en lugar de copiar capturas en un chat, tu asistente lee el diseño de verdad.\n\n![El diálogo Conectar MCP, con los IDEs soportados: Antigravity, Cursor, Codex, VS Code, Windsurf y Claude.](/help/mcp-dialog.webp)\n\n## Configuración\n\n1. Ve a la [página de MCP](/mcp) y elige tu IDE.\n2. **Genera una clave de API**: consulta [Claves de API](/help/integrations/api-keys).\n3. **Copia la configuración generada** y pégala en los ajustes de MCP de tu IDE.\n4. Reinicia el IDE si no detecta el servidor nuevo de inmediato.\n\nSoportados de serie: **Claude, Cursor, VS Code, Windsurf, Codex y Antigravity**. Cualquier cliente compatible con MCP funciona con la misma configuración.\n\n## Qué puede hacer tu asistente una vez conectado\n\n**Leer tu trabajo**\n\n- Listar tus proyectos y obtener los detalles de un proyecto.\n- Listar las pantallas de un proyecto y obtener los detalles de una pantalla.\n- Leer el HTML de una pantalla y leer el tema del proyecto.\n- Listar y leer los documentos del proyecto (PRDs, briefings).\n\n**Cambiar tu trabajo**\n\n- Crear un proyecto, crear una pantalla, duplicar una pantalla.\n- Hacer una edición dirigida de buscar y reemplazar en una pantalla, o sustituir todo el cuerpo de una pantalla.\n- Sustituir una imagen.\n- Exportar una pantalla a Figma.\n\n**Generar**\n\n- Lanzar una generación de diseño, comprobar su estado y después confirmarla o cancelarla.\n\nLa generación es deliberadamente un intercambio de tres pasos en lugar de una sola llamada: tu asistente la inicia, la vigila y tú decides si te quedas con el resultado, de modo que un bucle de agente no pueda quemar tus créditos en silencio.\n\n## Un flujo de trabajo típico\n\n> «Lee la pantalla de Precios de mi proyecto Ledgerly e impleméntala como componente de React usando nuestros design tokens».\n\nTu asistente se trae el marcado y el tema reales y después escribe código contra ellos. Sin capturas, sin desviaciones, sin volver a describir el diseño.\n\n## Créditos\n\nLas operaciones de lectura son gratuitas. Generar a través de MCP cuesta los mismos créditos que generar en la aplicación: es el mismo motor.\n\n## Seguridad\n\nTu clave de API autentica la conexión con tu cuenta. Mantenla fuera de los archivos que se suben al repositorio, y rótala o revócala en cualquier momento desde los ajustes de tu cuenta.","text":"El Model Context Protocol (MCP) es un estándar abierto que permite a los asistentes de IA hablar directamente con herramientas externas. El servidor MCP de UXMagic conecta tu asistente de programación con tus proyectos reales de UXMagic, de modo que en lugar de copiar capturas en un chat, tu asistente lee el diseño de verdad. Configuración 1. Ve a la página de MCP y elige tu IDE. 2. Genera una clave de API: consulta Claves de API. 3. Copia la configuración generada y pégala en los ajustes de MCP de tu IDE. 4. Reinicia el IDE si no detecta el servidor nuevo de inmediato. Soportados de serie: Claude, Cursor, VS Code, Windsurf, Codex y Antigravity. Cualquier cliente compatible con MCP funciona con la misma configuración. Qué puede hacer tu asistente una vez conectado Leer tu trabajo - Listar tus proyectos y obtener los detalles de un proyecto. - Listar las pantallas de un proyecto y obtener los detalles de una pantalla. - Leer el HTML de una pantalla y leer el tema del proyecto. - Listar y leer los documentos del proyecto (PRDs, briefings). Cambiar tu trabajo - Crear un proyecto, crear una pantalla, duplicar una pantalla. - Hacer una edición dirigida de buscar y reemplazar en una pantalla, o sustituir todo el cuerpo de una pantalla. - Sustituir una imagen. - Exportar una pantalla a Figma. Generar - Lanzar una generación de diseño, comprobar su estado y después confirmarla o cancelarla. La generación es deliberadamente un intercambio de tres pasos en lugar de una sola llamada: tu asistente la inicia, la vigila y tú decides si te quedas con el resultado, de modo que un bucle de agente no pueda quemar tus créditos en silencio. Un flujo de trabajo típico «Lee la pantalla de Precios de mi proyecto Ledgerly e impleméntala como componente de React usando nuestros design tokens». Tu asistente se trae el marcado y el tema reales y después escribe código contra ellos. Sin capturas, sin desviaciones, sin volver a describir el diseño. Créditos Las operaciones de lectura son gratuitas. Generar a través de MCP cuesta los mismos créditos que generar en la aplicación: es el mismo motor. Seguridad Tu clave de API autentica la conexión con tu cuenta. Mantenla fuera de los archivos que se suben al repositorio, y rótala o revócala en cualquier momento desde los ajustes de tu cuenta."},{"slug":"api-keys","category":"integrations","categoryTitle":"Integraciones y desarrollo","title":"Claves de API","description":"Crea, rota y revoca claves para el servidor MCP y el acceso a la API.","url":"https://uxmagic.ai/es/help/integrations/api-keys","type":"howto","keywords":["clave de api","token","autenticación","rotar","revocar","secreto"],"headings":["Crear una clave","Rotar","Revocar","Mantener las claves seguras","Si una clave deja de funcionar"],"updated":"2026-08-27","faqs":[],"related":["mcp-server","github-sync"],"markdown":"## Crear una clave\n\n1. Abre **Gestionar cuenta → Claves de API**.\n2. Crea una clave y ponle un nombre que diga dónde se usa («Cursor — portátil», «CI»).\n3. **Cópiala de inmediato.** La clave completa se muestra una sola vez.\n\n## Rotar\n\nRotar emite un secreto nuevo para la misma clave. Todo lo que use el valor antiguo deja de funcionar en cuanto rotas, así que actualiza tu configuración en la misma sesión.\n\n## Revocar\n\nEliminar una clave es inmediato y permanente. Cualquier IDE o script que la use empieza a fallar al momento, que es exactamente lo que quieres si una clave se ha filtrado.\n\n## Mantener las claves seguras\n\n- **Nunca subas una clave al repositorio.** Usa los ajustes de MCP de tu IDE o una variable de entorno.\n- **Una clave por sitio.** Una clave compartida solo se puede revocar rompiendo a todos sus consumidores a la vez.\n- **Rota cuando alguien se marcha**, o cuando una clave ha estado donde no debía.\n\n## Si una clave deja de funcionar\n\nComprueba, en este orden: que la clave no se haya rotado ni revocado; que se haya pegado entera; y que estés apuntando a la cuenta correcta. Las claves son por usuario, así que la clave de la cuenta de un compañero no verá tus proyectos.","text":"Crear una clave 1. Abre Gestionar cuenta → Claves de API. 2. Crea una clave y ponle un nombre que diga dónde se usa («Cursor — portátil», «CI»). 3. Cópiala de inmediato. La clave completa se muestra una sola vez. Rotar Rotar emite un secreto nuevo para la misma clave. Todo lo que use el valor antiguo deja de funcionar en cuanto rotas, así que actualiza tu configuración en la misma sesión. Revocar Eliminar una clave es inmediato y permanente. Cualquier IDE o script que la use empieza a fallar al momento, que es exactamente lo que quieres si una clave se ha filtrado. Mantener las claves seguras - Nunca subas una clave al repositorio. Usa los ajustes de MCP de tu IDE o una variable de entorno. - Una clave por sitio. Una clave compartida solo se puede revocar rompiendo a todos sus consumidores a la vez. - Rota cuando alguien se marcha, o cuando una clave ha estado donde no debía. Si una clave deja de funcionar Comprueba, en este orden: que la clave no se haya rotado ni revocado; que se haya pegado entera; y que estés apuntando a la cuenta correcta. Las claves son por usuario, así que la clave de la cuenta de un compañero no verá tus proyectos."},{"slug":"figma-plugin","category":"integrations","categoryTitle":"Integraciones y desarrollo","title":"El plugin de UXMagic para Figma","description":"Genera interfaces y trae sitios web y capturas a Figma sin salir de Figma.","url":"https://uxmagic.ai/es/help/integrations/figma-plugin","type":"howto","keywords":["plugin de figma","plugin","de sitio web a figma","de captura a interfaz","figma"],"headings":["Instalación","Qué hace","El plugin frente a la aplicación web","Créditos"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","import-from-figma","mcp-server"],"markdown":"El plugin —**UXMagic AI UI Generator (Website to Figma, Screenshot to UI)**— lleva la generación dentro de Figma, para quienes ya tienen ahí su trabajo.\n\n## Instalación\n\n1. Abre la [página del plugin en Figma Community](https://www.figma.com/community/plugin/1374402598280022366/uxmagic-ai-ui-generator-website-to-figma-screenshot-to-ui).\n2. Haz clic en **Abrir en Figma**.\n3. Inicia sesión con tu cuenta de UXMagic cuando te lo pida.\n\n## Qué hace\n\n- **Generar interfaces a partir de un prompt**, directamente en el lienzo de Figma.\n- **De sitio web a Figma**: pega una URL y obtén la página como capas editables de Figma.\n- **De captura a interfaz**: suelta una imagen y recibe capas reales.\n\nTodo llega como frames de Figma en condiciones, con auto layout, no como imágenes aplanadas.\n\n## El plugin frente a la aplicación web\n\n- **Plugin**: mejor cuando Figma es tu superficie de trabajo y quieres el resultado directamente ahí.\n- **[Aplicación web](/dashboard)**: mejor para proyectos de varias pantallas, temas, versiones, publicación y colaboración.\n\nComparten tu cuenta y tu saldo de créditos, así que puedes moverte entre ambas.\n\n## Créditos\n\nLas generaciones y exportaciones desde el plugin consumen del mismo saldo que la aplicación web. Consulta [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work).","text":"El plugin —UXMagic AI UI Generator (Website to Figma, Screenshot to UI)— lleva la generación dentro de Figma, para quienes ya tienen ahí su trabajo. Instalación 1. Abre la página del plugin en Figma Community. 2. Haz clic en Abrir en Figma. 3. Inicia sesión con tu cuenta de UXMagic cuando te lo pida. Qué hace - Generar interfaces a partir de un prompt, directamente en el lienzo de Figma. - De sitio web a Figma: pega una URL y obtén la página como capas editables de Figma. - De captura a interfaz: suelta una imagen y recibe capas reales. Todo llega como frames de Figma en condiciones, con auto layout, no como imágenes aplanadas. El plugin frente a la aplicación web - Plugin: mejor cuando Figma es tu superficie de trabajo y quieres el resultado directamente ahí. - Aplicación web: mejor para proyectos de varias pantallas, temas, versiones, publicación y colaboración. Comparten tu cuenta y tu saldo de créditos, así que puedes moverte entre ambas. Créditos Las generaciones y exportaciones desde el plugin consumen del mismo saldo que la aplicación web. Consulta Cómo funcionan los créditos."},{"slug":"github-sync","category":"integrations","categoryTitle":"Integraciones y desarrollo","title":"Sincronización con GitHub","description":"Envía el código exportado directamente a un repositorio y despliega con GitHub Pages.","url":"https://uxmagic.ai/es/help/integrations/github-sync","type":"howto","keywords":["github","repositorio","git","enviar código","pages","sincronizar","commit"],"headings":["Conectar GitHub","Enviar código","GitHub Pages","Buenas prácticas","Desconectar"],"updated":"2026-08-27","faqs":[],"related":["export-code","api-keys","publish-your-first-site"],"markdown":"## Conectar GitHub\n\n1. Ve a **Integraciones → GitHub**.\n2. Autoriza UXMagic (OAuth).\n3. Elige un repositorio existente, o deja que UXMagic cree uno.\n\n## Enviar código\n\n1. Selecciona las pantallas que quieras.\n2. **Exportar → GitHub.**\n3. Elige el repositorio y la rama.\n4. Envía. El código exportado se confirma por ti.\n\nVolver a enviar actualiza los mismos archivos, así que el repositorio se mantiene al día con el diseño según evoluciona.\n\n## GitHub Pages\n\nPuedes desplegar el código enviado con GitHub Pages directamente desde la integración: útil para una vista previa pública rápida cuando quieres que el artefacto viva en tu propia organización de GitHub y no en el alojamiento de UXMagic.\n\nPara un sitio que de verdad pienses mantener, [publicar](/help/publish/publish-your-first-site) te da una dirección en condiciones, historial de despliegues y reversión.\n\n## Buenas prácticas\n\n- **Envía a una rama**, no a `main`, y revisa el diff.\n- **Trae los recursos al repositorio.** El código exportado referencia las imágenes por URL; descárgalas antes de publicar.\n- **Cuenta con que es un front end.** No hay capa de datos ni enrutado: conéctalo tú a tu aplicación.\n\n## Desconectar\n\nDesconecta desde **Integraciones**. Eso revoca el acceso de UXMagic; lo que ya se haya enviado se queda en tu repositorio.","text":"Conectar GitHub 1. Ve a Integraciones → GitHub. 2. Autoriza UXMagic (OAuth). 3. Elige un repositorio existente, o deja que UXMagic cree uno. Enviar código 1. Selecciona las pantallas que quieras. 2. Exportar → GitHub. 3. Elige el repositorio y la rama. 4. Envía. El código exportado se confirma por ti. Volver a enviar actualiza los mismos archivos, así que el repositorio se mantiene al día con el diseño según evoluciona. GitHub Pages Puedes desplegar el código enviado con GitHub Pages directamente desde la integración: útil para una vista previa pública rápida cuando quieres que el artefacto viva en tu propia organización de GitHub y no en el alojamiento de UXMagic. Para un sitio que de verdad pienses mantener, publicar te da una dirección en condiciones, historial de despliegues y reversión. Buenas prácticas - Envía a una rama, no a main, y revisa el diff. - Trae los recursos al repositorio. El código exportado referencia las imágenes por URL; descárgalas antes de publicar. - Cuenta con que es un front end. No hay capa de datos ni enrutado: conéctalo tú a tu aplicación. Desconectar Desconecta desde Integraciones. Eso revoca el acceso de UXMagic; lo que ya se haya enviado se queda en tu repositorio."},{"slug":"connect-uxmagic-to-ai-assistants","category":"integrations","categoryTitle":"Integraciones y desarrollo","title":"Usar UXMagic desde ChatGPT, Claude y otros asistentes","description":"Cómo pueden los asistentes de IA leer la documentación de UXMagic y manejar tus proyectos.","url":"https://uxmagic.ai/es/help/integrations/connect-uxmagic-to-ai-assistants","type":"guide","keywords":["chatgpt","claude","perplexity","asistente de ia","llms.txt","soporte con ia","información para ia"],"headings":["1. Preguntarle a un asistente *sobre* UXMagic","2. Que un asistente *maneje* UXMagic","Cuál usar"],"updated":"2026-08-27","faqs":[],"related":["mcp-server","api-keys","contact-support"],"markdown":"Hay dos cosas distintas que la gente quiere decir con «usar UXMagic con IA», y necesitan configuraciones diferentes.\n\n## 1. Preguntarle a un asistente *sobre* UXMagic\n\nLos asistentes responden a partir de lo que pueden leer. UXMagic publica superficies legibles por máquinas precisamente para que esas respuestas sean exactas y no inventadas:\n\n- **[/ai-info](/ai-info)**: el informe oficial y estructurado sobre el producto: qué es, qué hace, para quién es, cuánto cuesta y qué *no* hace.\n- **[/llms.txt](/llms.txt)**: un índice curado del sitio público para los motores de respuesta con IA.\n- **[/llms-full.txt](/llms-full.txt)**: un único documento autocontenido que cubre capacidades, exportaciones, precios y preguntas frecuentes.\n- **[/llms-help.txt](/llms-help.txt)**: todo este centro de ayuda como un solo documento de texto plano.\n- **[/help.json](/help.json)**: el corpus de ayuda como JSON estructurado.\n\nSi un asistente te dice algo sobre UXMagic que resulta ser falso, señalarle `uxmagic.ai/ai-info` suele ser la corrección más rápida.\n\n## 2. Que un asistente *maneje* UXMagic\n\nEso es el servidor MCP: tu asistente lee tus proyectos y pantallas reales, y puede crearlos y editarlos. Consulta [Servidor MCP de UXMagic](/help/integrations/mcp-server).\n\n## Cuál usar\n\n- Escribir código a partir de un diseño → **MCP**.\n- Preguntar «cuánto cuesta UXMagic» → **las superficies publicadas de arriba**; sin configuración.\n- Construir una automatización sobre UXMagic → **MCP con una [clave de API](/help/integrations/api-keys)**.","text":"Hay dos cosas distintas que la gente quiere decir con «usar UXMagic con IA», y necesitan configuraciones diferentes. 1. Preguntarle a un asistente sobre UXMagic Los asistentes responden a partir de lo que pueden leer. UXMagic publica superficies legibles por máquinas precisamente para que esas respuestas sean exactas y no inventadas: - /ai-info: el informe oficial y estructurado sobre el producto: qué es, qué hace, para quién es, cuánto cuesta y qué no hace. - /llms.txt: un índice curado del sitio público para los motores de respuesta con IA. - /llms-full.txt: un único documento autocontenido que cubre capacidades, exportaciones, precios y preguntas frecuentes. - /llms-help.txt: todo este centro de ayuda como un solo documento de texto plano. - /help.json: el corpus de ayuda como JSON estructurado. Si un asistente te dice algo sobre UXMagic que resulta ser falso, señalarle uxmagic.ai/ai-info suele ser la corrección más rápida. 2. Que un asistente maneje UXMagic Eso es el servidor MCP: tu asistente lee tus proyectos y pantallas reales, y puede crearlos y editarlos. Consulta Servidor MCP de UXMagic. Cuál usar - Escribir código a partir de un diseño → MCP. - Preguntar «cuánto cuesta UXMagic» → las superficies publicadas de arriba; sin configuración. - Construir una automatización sobre UXMagic → MCP con una clave de API."},{"slug":"how-credits-work","category":"account-and-billing","categoryTitle":"Planes, créditos y facturación","title":"Cómo funcionan los créditos","description":"Exactamente lo que cuesta cada acción de IA, qué acciones son gratuitas y cómo estirar un saldo.","url":"https://uxmagic.ai/es/help/account-and-billing/how-credits-work","type":"reference","keywords":["créditos","coste","precios","uso","sin créditos","saldo","cuánto cuesta"],"headings":["Lo que cuesta cada acción","Iniciar una sesión","La economía, en una línea","Estirar un saldo","Créditos de equipo","Quedarte sin créditos"],"updated":"2026-09-03","faqs":[{"question":"¿Los créditos se acumulan de un mes a otro?","answer":"Los créditos de los planes de pago se reinician en cada ciclo de facturación y no se acumulan. Los del plan Free se renuevan cada día: un saldo vacío vuelve mañana."},{"question":"¿Se me cobra si una generación falla?","answer":"Un trabajo que no ha producido nada no debería cobrarse. Si se te ha cobrado una ejecución fallida, contacta con soporte con el enlace del proyecto y lo corregimos."},{"question":"¿Leer y aplicar temas es gratis?","answer":"Sí. Leer pantallas, leer el tema, leer imágenes y documentos, y crear o actualizar un tema cuestan cero créditos."}],"related":["earn-free-credits","plans-and-limits","i-ran-out-of-credits"],"markdown":"Los créditos son la unidad del trabajo de IA. Leer y aplicar temas es gratis; generar y reconstruir cuestan, en proporción al cómputo que realmente requiere la acción.\n\n## Lo que cuesta cada acción\n\n| Acción | Créditos |\n| --- | --- |\n| Diseñar una pantalla nueva | 3 |\n| Reescribir una pantalla entera | 2 |\n| Edición dirigida (buscar y reemplazar) | 0,2 |\n| Proponer un plan de pantallas | 1 |\n| Clonar un sitio web desde una URL | 10 |\n| Completar un clon incompleto | 2 |\n| Generar una imagen | 0,5 |\n| Editar una imagen existente | 0,5 |\n| Sustituir un recurso en todas las pantallas | 1 |\n| Leer una pantalla, un tema, una imagen o un documento | 0 |\n| Crear o actualizar un tema | 0 |\n| Responder una pregunta aclaratoria | 0 |\n\nLas **operaciones por pantalla** se cobran por cada pantalla que tocan, a **6 créditos por pantalla**:\n\n- Regenerar una pantalla\n- Generar variaciones\n- Generar un flujo\n- Convertir una pantalla a versión móvil\n- Convertir una pantalla a versión de escritorio\n\nAsí que convertir ocho pantallas a móvil cuesta 48 créditos, no 6.\n\n## Iniciar una sesión\n\nUna sesión de chat necesita al menos **4 créditos** para empezar: lo justo para cubrir un plan más una pantalla completa, de modo que una sesión no pueda empezar, planificar y quedarse seca antes de producir nada.\n\n## La economía, en una línea\n\n**Editar es aproximadamente quince veces más barato que reescribir, y reescribir es más barato que regenerar.** El mayor ahorro que tienes a tu alcance es pedir el cambio concreto en lugar de pedir otra vez la pantalla.\n\n## Estirar un saldo\n\n1. **Pide cambios dirigidos.** «Haz el hero más corto» cuesta una fracción de «rehaz esta página».\n2. **Acierta pronto con el tema.** Los cambios de tema son gratis y se aplican en todas partes; recolorear pantallas una a una no es ni lo uno ni lo otro.\n3. **Tómate en serio el plan de pantallas.** Corregir el plan cuesta 1 crédito. Corregir ocho pantallas equivocadas cuesta entre 24 y 48.\n4. **Deja las variantes por dispositivo para el final.** Convierte una sola vez, al final, en lugar de reconvertir tras cada cambio.\n5. **Usa el modo edición para los textos.** Los cambios de texto e imágenes en modo edición son gratis.\n6. **Revisa tu saldo antes de un flujo grande.** Una ejecución que se detiene a medias te deja con medio flujo.\n\n## Créditos de equipo\n\nEn un proyecto de equipo, el trabajo de IA se carga al **fondo compartido del equipo** o a tu asignación dentro de él, no a tu saldo personal. Quien es propietario puede limitar el gasto por miembro. Consulta [Equipos y asientos](/help/collaborate/teams-and-seats).\n\n## Quedarte sin créditos\n\nRecibirás un mensaje claro, no un fallo silencioso. Consulta [Me he quedado sin créditos](/help/troubleshooting/i-ran-out-of-credits).","text":"Los créditos son la unidad del trabajo de IA. Leer y aplicar temas es gratis; generar y reconstruir cuestan, en proporción al cómputo que realmente requiere la acción. Lo que cuesta cada acción Acción Créditos --- --- Diseñar una pantalla nueva 3 Reescribir una pantalla entera 2 Edición dirigida (buscar y reemplazar) 0,2 Proponer un plan de pantallas 1 Clonar un sitio web desde una URL 10 Completar un clon incompleto 2 Generar una imagen 0,5 Editar una imagen existente 0,5 Sustituir un recurso en todas las pantallas 1 Leer una pantalla, un tema, una imagen o un documento 0 Crear o actualizar un tema 0 Responder una pregunta aclaratoria 0 Las operaciones por pantalla se cobran por cada pantalla que tocan, a 6 créditos por pantalla: - Regenerar una pantalla - Generar variaciones - Generar un flujo - Convertir una pantalla a versión móvil - Convertir una pantalla a versión de escritorio Así que convertir ocho pantallas a móvil cuesta 48 créditos, no 6. Iniciar una sesión Una sesión de chat necesita al menos 4 créditos para empezar: lo justo para cubrir un plan más una pantalla completa, de modo que una sesión no pueda empezar, planificar y quedarse seca antes de producir nada. La economía, en una línea Editar es aproximadamente quince veces más barato que reescribir, y reescribir es más barato que regenerar. El mayor ahorro que tienes a tu alcance es pedir el cambio concreto en lugar de pedir otra vez la pantalla. Estirar un saldo 1. Pide cambios dirigidos. «Haz el hero más corto» cuesta una fracción de «rehaz esta página». 2. Acierta pronto con el tema. Los cambios de tema son gratis y se aplican en todas partes; recolorear pantallas una a una no es ni lo uno ni lo otro. 3. Tómate en serio el plan de pantallas. Corregir el plan cuesta 1 crédito. Corregir ocho pantallas equivocadas cuesta entre 24 y 48. 4. Deja las variantes por dispositivo para el final. Convierte una sola vez, al final, en lugar de reconvertir tras cada cambio. 5. Usa el modo edición para los textos. Los cambios de texto e imágenes en modo edición son gratis. 6. Revisa tu saldo antes de un flujo grande. Una ejecución que se detiene a medias te deja con medio flujo. Créditos de equipo En un proyecto de equipo, el trabajo de IA se carga al fondo compartido del equipo o a tu asignación dentro de él, no a tu saldo personal. Quien es propietario puede limitar el gasto por miembro. Consulta Equipos y asientos. Quedarte sin créditos Recibirás un mensaje claro, no un fallo silencioso. Consulta Me he quedado sin créditos."},{"slug":"plans-and-limits","category":"account-and-billing","categoryTitle":"Planes, créditos y facturación","title":"Planes y límites","description":"Qué incluyen Free, Pro y Enterprise, y qué límites se aplican a qué.","url":"https://uxmagic.ai/es/help/account-and-billing/plans-and-limits","type":"reference","keywords":["planes","precios","free","pro","enterprise","límites","mejorar plan","niveles"],"headings":["Free","Pro","Enterprise","Qué límites se aplican dónde","Periodicidad de la facturación"],"updated":"2026-09-03","faqs":[],"related":["how-credits-work","upgrade-or-downgrade","teams-and-seats"],"markdown":"Los precios vigentes y la tabla completa de funciones están en la [página de precios](/pricing). Esta es la idea general.\n\n## Free\n\n- **20 créditos cada día**, renovados a diario: un saldo vacío vuelve mañana.\n- Hasta **3 pantallas al día**, en **5 proyectos**.\n- **1 exportación a Figma.**\n- Capacidades principales: diseño de interfaces, wireframes, modo flujo, de captura y de boceto a interfaz, clonar un sitio, guía de estilo, importación desde Figma, exportación de código.\n- **Sin tarjeta de crédito.**\n\n## Pro\n\n- **2400 créditos al mes** —hasta **400 pantallas**— que se reinician en cada ciclo de facturación, sin límite diario.\n- **35 $/mes**, o **17,5 $/mes con facturación anual** (un 50 % de descuento, 210 $ al año).\n- Proyectos ilimitados y **250 exportaciones a Figma** al mes.\n- Todo lo del plan Free, sin los techos.\n- Quitar el distintivo de UX Magic de los sitios publicados, y sitios privados o protegidos con contraseña.\n\n## Enterprise\n\nTodo lo de Pro, más:\n\n- Pantallas generadas con IA ilimitadas y asientos ilimitados\n- Asignación de créditos personalizada\n- Autenticación SSO / SAML\n- Panel de administración del equipo\n- Sistema de diseño y biblioteca de componentes compartidos\n- Soporte prioritario con tiempo de respuesta garantizado\n- Onboarding y formación dedicados\n- Contrato y facturación personalizados\n- Acceso anticipado a nuevas funciones\n\n[Habla con nosotros](/support) sobre Enterprise.\n\n## Qué límites se aplican dónde\n\n| Límite | Se aplica a |\n| --- | --- |\n| Créditos | Toda la generación con IA, en la aplicación y vía MCP y el plugin de Figma |\n| Pantallas | Pantallas creadas en proyectos |\n| Proyectos | Proyectos simultáneos en tu cuenta |\n| Exportaciones a Figma | Cada operación de exportación |\n| Sitios publicados | Sitios en producción a la vez; despublicar libera la plaza |\n| Asientos | Miembros activos de un equipo |\n\n## Periodicidad de la facturación\n\nMensual o anual. La anual sale bastante más barata al mes. Puedes cambiar de periodicidad en cualquier momento desde los ajustes de facturación. Consulta [Mejorar, reducir o cambiar la periodicidad](/help/account-and-billing/upgrade-or-downgrade).","text":"Los precios vigentes y la tabla completa de funciones están en la página de precios. Esta es la idea general. Free - 20 créditos cada día, renovados a diario: un saldo vacío vuelve mañana. - Hasta 3 pantallas al día, en 5 proyectos. - 1 exportación a Figma. - Capacidades principales: diseño de interfaces, wireframes, modo flujo, de captura y de boceto a interfaz, clonar un sitio, guía de estilo, importación desde Figma, exportación de código. - Sin tarjeta de crédito. Pro - 2400 créditos al mes —hasta 400 pantallas— que se reinician en cada ciclo de facturación, sin límite diario. - 35 $/mes, o 17,5 $/mes con facturación anual (un 50 % de descuento, 210 $ al año). - Proyectos ilimitados y 250 exportaciones a Figma al mes. - Todo lo del plan Free, sin los techos. - Quitar el distintivo de UX Magic de los sitios publicados, y sitios privados o protegidos con contraseña. Enterprise Todo lo de Pro, más: - Pantallas generadas con IA ilimitadas y asientos ilimitados - Asignación de créditos personalizada - Autenticación SSO / SAML - Panel de administración del equipo - Sistema de diseño y biblioteca de componentes compartidos - Soporte prioritario con tiempo de respuesta garantizado - Onboarding y formación dedicados - Contrato y facturación personalizados - Acceso anticipado a nuevas funciones Habla con nosotros sobre Enterprise. Qué límites se aplican dónde Límite Se aplica a --- --- Créditos Toda la generación con IA, en la aplicación y vía MCP y el plugin de Figma Pantallas Pantallas creadas en proyectos Proyectos Proyectos simultáneos en tu cuenta Exportaciones a Figma Cada operación de exportación Sitios publicados Sitios en producción a la vez; despublicar libera la plaza Asientos Miembros activos de un equipo Periodicidad de la facturación Mensual o anual. La anual sale bastante más barata al mes. Puedes cambiar de periodicidad en cualquier momento desde los ajustes de facturación. Consulta Mejorar, reducir o cambiar la periodicidad."},{"slug":"upgrade-or-downgrade","category":"account-and-billing","categoryTitle":"Planes, créditos y facturación","title":"Mejorar, reducir o cambiar la periodicidad de facturación","description":"Cambia de plan o pasa de mensual a anual, y qué ocurre con tus créditos.","url":"https://uxmagic.ai/es/help/account-and-billing/upgrade-or-downgrade","type":"howto","keywords":["mejorar plan","reducir plan","anual","mensual","cambiar de plan","cambiar"],"headings":["Mejorar de plan","Reducir de plan","Mensual ↔ anual","Qué ocurre con los créditos","Planes de equipo"],"updated":"2026-08-27","faqs":[],"related":["plans-and-limits","billing-and-invoices","cancel-your-subscription"],"markdown":"## Mejorar de plan\n\nDesde **Gestionar cuenta → Facturación**, elige el plan que quieras. Las mejoras surten efecto **de inmediato**: la asignación nueva está disponible al momento.\n\n## Reducir de plan\n\nLas reducciones surten efecto a partir del **siguiente ciclo de facturación**. Conservas tu plan actual y su asignación hasta entonces, así que nunca te quedas cortado a mitad de mes por un cambio que hiciste el día 3.\n\nTras una reducción, los límites del plan se aplican de ahí en adelante. Los proyectos y pantallas que excedan el límite nuevo no se eliminan, pero puede que no puedas crear más hasta volver por debajo.\n\n## Mensual ↔ anual\n\nPuedes cambiar de periodicidad en cualquier momento desde los ajustes de facturación. La anual tiene un descuento notable frente a doce meses de la mensual.\n\nUna cosa que conviene saber: cambiar **a mitad de ciclo** puede generar un cargo de prorrateo del proveedor de pagos además del cargo del plan nuevo. Si prefieres evitar dos cargos seguidos, cambia al principio de un ciclo, o [habla con nosotros](/support) antes y lo vemos contigo.\n\n## Qué ocurre con los créditos\n\n- **Mejora**: la asignación nueva pasa a estar disponible de inmediato.\n- **Reducción**: la asignación nueva se aplica desde el siguiente ciclo.\n- Los créditos mensuales **no se acumulan** entre ciclos.\n\n## Planes de equipo\n\nEn los equipos, quien es propietario gestiona el plan y los asientos. Los miembros no necesitan su propia suscripción. Consulta [Equipos y asientos](/help/collaborate/teams-and-seats).","text":"Mejorar de plan Desde Gestionar cuenta → Facturación, elige el plan que quieras. Las mejoras surten efecto de inmediato: la asignación nueva está disponible al momento. Reducir de plan Las reducciones surten efecto a partir del siguiente ciclo de facturación. Conservas tu plan actual y su asignación hasta entonces, así que nunca te quedas cortado a mitad de mes por un cambio que hiciste el día 3. Tras una reducción, los límites del plan se aplican de ahí en adelante. Los proyectos y pantallas que excedan el límite nuevo no se eliminan, pero puede que no puedas crear más hasta volver por debajo. Mensual ↔ anual Puedes cambiar de periodicidad en cualquier momento desde los ajustes de facturación. La anual tiene un descuento notable frente a doce meses de la mensual. Una cosa que conviene saber: cambiar a mitad de ciclo puede generar un cargo de prorrateo del proveedor de pagos además del cargo del plan nuevo. Si prefieres evitar dos cargos seguidos, cambia al principio de un ciclo, o habla con nosotros antes y lo vemos contigo. Qué ocurre con los créditos - Mejora: la asignación nueva pasa a estar disponible de inmediato. - Reducción: la asignación nueva se aplica desde el siguiente ciclo. - Los créditos mensuales no se acumulan entre ciclos. Planes de equipo En los equipos, quien es propietario gestiona el plan y los asientos. Los miembros no necesitan su propia suscripción. Consulta Equipos y asientos."},{"slug":"billing-and-invoices","category":"account-and-billing","categoryTitle":"Planes, créditos y facturación","title":"Facturación, facturas y métodos de pago","description":"Métodos de pago, dónde encontrar las facturas y qué hacer ante un cargo inesperado.","url":"https://uxmagic.ai/es/help/account-and-billing/billing-and-invoices","type":"howto","keywords":["factura","recibo","facturación","tarjeta","pago","cargo","iva","stripe"],"headings":["Métodos de pago","Facturas","Un cargo inesperado","Pagos fallidos","Moneda"],"updated":"2026-08-27","faqs":[],"related":["upgrade-or-downgrade","refunds","cancel-your-subscription"],"markdown":"## Métodos de pago\n\nLos pagos los procesa Stripe. Se aceptan las principales tarjetas de crédito y débito; los métodos locales disponibles dependen de tu país. UXMagic nunca ve ni almacena los datos completos de tu tarjeta.\n\n## Facturas\n\nLas facturas y los recibos están en **Gestionar cuenta → Facturación**. Cada cargo tiene una factura descargable, y puedes añadir los datos de tu empresa y tu NIF o número de IVA para que aparezcan en ella.\n\nConfigura tus datos de facturación **antes** de necesitar la factura: reemitirla después es más doloroso que rellenar un formulario ahora.\n\n## Un cargo inesperado\n\nEscríbenos a **hello@uxmagic.ai** antes de reclamar a tu banco o a Stripe. La mayoría de las dudas de facturación se resuelven el mismo día cuando acudes primero a nosotros.\n\nAbrir una reclamación desencadena un proceso automático del lado del proveedor de pagos que puede suspender tu cuenta mientras se revisa el caso, y eso no ayuda a nadie, y a ti menos que a nadie. Preferimos con mucho arreglarlo sin más.\n\n## Pagos fallidos\n\nSi un pago falla, se te avisa y se te da tiempo para actualizar tu tarjeta antes de que cambie nada en tu cuenta. Actualízala en **Gestionar cuenta → Facturación**.\n\n## Moneda\n\nLos precios están en dólares estadounidenses. Tu banco puede aplicar su propia conversión y comisiones.","text":"Métodos de pago Los pagos los procesa Stripe. Se aceptan las principales tarjetas de crédito y débito; los métodos locales disponibles dependen de tu país. UXMagic nunca ve ni almacena los datos completos de tu tarjeta. Facturas Las facturas y los recibos están en Gestionar cuenta → Facturación. Cada cargo tiene una factura descargable, y puedes añadir los datos de tu empresa y tu NIF o número de IVA para que aparezcan en ella. Configura tus datos de facturación antes de necesitar la factura: reemitirla después es más doloroso que rellenar un formulario ahora. Un cargo inesperado Escríbenos a hello@uxmagic.ai antes de reclamar a tu banco o a Stripe. La mayoría de las dudas de facturación se resuelven el mismo día cuando acudes primero a nosotros. Abrir una reclamación desencadena un proceso automático del lado del proveedor de pagos que puede suspender tu cuenta mientras se revisa el caso, y eso no ayuda a nadie, y a ti menos que a nadie. Preferimos con mucho arreglarlo sin más. Pagos fallidos Si un pago falla, se te avisa y se te da tiempo para actualizar tu tarjeta antes de que cambie nada en tu cuenta. Actualízala en Gestionar cuenta → Facturación. Moneda Los precios están en dólares estadounidenses. Tu banco puede aplicar su propia conversión y comisiones."},{"slug":"refunds","category":"account-and-billing","categoryTitle":"Planes, créditos y facturación","title":"Reembolsos","description":"La política de reembolsos y qué hacer si algo ha ido mal.","url":"https://uxmagic.ai/es/help/account-and-billing/refunds","type":"reference","keywords":["reembolso","devolución","anular cargo","devolver dinero"],"headings":["La política","Si no tienes claro qué plan necesitas","Si algo ha ido mal de verdad","Antes de reclamar"],"updated":"2026-08-27","faqs":[],"related":["billing-and-invoices","cancel-your-subscription","contact-support"],"markdown":"## La política\n\nUXMagic no ofrece reembolsos de suscripciones ni de compras de créditos. Recomendamos probar antes el plan Free: existe precisamente para que puedas juzgar el resultado antes de pagar.\n\n## Si no tienes claro qué plan necesitas\n\n[Pregúntanos](/support) antes de comprar. Preferimos dedicar cinco minutos a ayudarte a elegir que verte comprar lo que no era.\n\n## Si algo ha ido mal de verdad\n\nLa política va del arrepentimiento tras la compra, no de nuestros errores. Si se te ha cobrado dos veces, se te ha cobrado tras cancelar o se te ha facturado un trabajo que falló y no produjo nada, eso es un error de facturación: escribe a **hello@uxmagic.ai** con la factura y lo resolvemos.\n\n## Antes de reclamar\n\nAcude primero a nosotros. Una reclamación bancaria puede suspender tu cuenta mientras se revisa, y tarda muchísimo más que un correo. Consulta [Facturación, facturas y métodos de pago](/help/account-and-billing/billing-and-invoices).","text":"La política UXMagic no ofrece reembolsos de suscripciones ni de compras de créditos. Recomendamos probar antes el plan Free: existe precisamente para que puedas juzgar el resultado antes de pagar. Si no tienes claro qué plan necesitas Pregúntanos antes de comprar. Preferimos dedicar cinco minutos a ayudarte a elegir que verte comprar lo que no era. Si algo ha ido mal de verdad La política va del arrepentimiento tras la compra, no de nuestros errores. Si se te ha cobrado dos veces, se te ha cobrado tras cancelar o se te ha facturado un trabajo que falló y no produjo nada, eso es un error de facturación: escribe a hello@uxmagic.ai con la factura y lo resolvemos. Antes de reclamar Acude primero a nosotros. Una reclamación bancaria puede suspender tu cuenta mientras se revisa, y tarda muchísimo más que un correo. Consulta Facturación, facturas y métodos de pago."},{"slug":"cancel-your-subscription","category":"account-and-billing","categoryTitle":"Planes, créditos y facturación","title":"Cancelar tu suscripción","description":"Cómo cancelar, cuándo termina el acceso y qué ocurre con tu trabajo.","url":"https://uxmagic.ai/es/help/account-and-billing/cancel-your-subscription","type":"howto","keywords":["cancelar","darse de baja","terminar suscripción","dejar de pagar","pasar a free"],"headings":["Cancelar","Qué ocurre","Cancelar no es eliminar","Si cambias de opinión","Antes de irte"],"updated":"2026-08-27","faqs":[],"related":["refunds","delete-your-account","upgrade-or-downgrade"],"markdown":"## Cancelar\n\n**Gestionar cuenta → Facturación → Cancelar suscripción.** Se te harán un par de preguntas sobre el motivo: nos son de verdad útiles, y puedes saltártelas.\n\n## Qué ocurre\n\n- Tu plan sigue **activo hasta el final del ciclo de facturación en curso**. Conservas la asignación que has pagado.\n- Después, tu cuenta pasa al plan Free.\n- **Tus proyectos no se eliminan.** Se quedan en tu cuenta, sujetos a los límites del plan Free sobre lo que puedes crear de ahí en adelante.\n- Los sitios publicados que excedan el límite del plan Free pueden retirarse. Compruébalo antes de cancelar si tienes un sitio en producción que importe.\n\n## Cancelar no es eliminar\n\nCancelar detiene la facturación. Tu cuenta y tu trabajo siguen ahí. Si quieres que la cuenta y sus datos desaparezcan, eso es [Eliminar tu cuenta](/help/account-and-billing/delete-your-account), y es permanente.\n\n## Si cambias de opinión\n\nVuelve a suscribirte cuando quieras desde los ajustes de facturación. Si te resuscribes antes de que termine el ciclo, no se pierde nada.\n\n## Antes de irte\n\nSi te vas por un problema concreto —calidad del resultado, una función que falta, el coste—, [cuéntanoslo](/support). Parte de eso podemos arreglarlo, y parte ya lo hemos arreglado y no hemos sabido contártelo.","text":"Cancelar Gestionar cuenta → Facturación → Cancelar suscripción. Se te harán un par de preguntas sobre el motivo: nos son de verdad útiles, y puedes saltártelas. Qué ocurre - Tu plan sigue activo hasta el final del ciclo de facturación en curso. Conservas la asignación que has pagado. - Después, tu cuenta pasa al plan Free. - Tus proyectos no se eliminan. Se quedan en tu cuenta, sujetos a los límites del plan Free sobre lo que puedes crear de ahí en adelante. - Los sitios publicados que excedan el límite del plan Free pueden retirarse. Compruébalo antes de cancelar si tienes un sitio en producción que importe. Cancelar no es eliminar Cancelar detiene la facturación. Tu cuenta y tu trabajo siguen ahí. Si quieres que la cuenta y sus datos desaparezcan, eso es Eliminar tu cuenta, y es permanente. Si cambias de opinión Vuelve a suscribirte cuando quieras desde los ajustes de facturación. Si te resuscribes antes de que termine el ciclo, no se pierde nada. Antes de irte Si te vas por un problema concreto —calidad del resultado, una función que falta, el coste—, cuéntanoslo. Parte de eso podemos arreglarlo, y parte ya lo hemos arreglado y no hemos sabido contártelo."},{"slug":"earn-free-credits","category":"account-and-billing","categoryTitle":"Planes, créditos y facturación","title":"Consigue créditos gratis","description":"Los cuatro pasos de «Desbloquea el plan Pro», lo que paga cada uno, y las otras formas de recargar el saldo sin pagar.","url":"https://uxmagic.ai/es/help/account-and-billing/earn-free-credits","type":"guide","keywords":["créditos gratis","ganar créditos","desbloquear pro","mejorar gratis","más créditos","créditos sin pagar","prueba"],"headings":["La asignación diaria","Desbloquea el plan Pro: cuatro pasos","La verificación es manual","Recomendaciones","Que los créditos cundan"],"updated":"2026-09-03","faqs":[{"question":"¿Cómo consigo créditos gratis?","answer":"Abre «Upgrade for free» en el editor y completa los cuatro pasos de «Desbloquea el plan Pro»: una encuesta corta, una reseña en Capterra, unirte a la comunidad de Slack y dejar un testimonio. Cada paso paga créditos, y completar los cuatro desbloquea 3 días de Pro. Recomendar a alguien suma 250 créditos."},{"question":"¿Los créditos llegan al instante?","answer":"No. Alguien del equipo verifica cada paso y recibes un correo cuando se aprueba, así que dale algo de tiempo en lugar de volver a enviarlo."}],"related":["how-credits-work","referral-program","plans-and-limits"],"markdown":"Hay tres maneras de sumar créditos sin pagar: la asignación diaria gratuita, la lista **Desbloquea el plan Pro** y las recomendaciones.\n\n## La asignación diaria\n\nToda cuenta Free recibe **20 créditos al día**, renovados a diario: suficiente para unas 3 pantallas. Un saldo vacío vuelve mañana, así que una semana tranquila no cuesta nada. Consulta [Planes y límites](/help/account-and-billing/plans-and-limits).\n\n## Desbloquea el plan Pro: cuatro pasos\n\nEn el editor, pulsa **Upgrade for free**. El panel sigue tu avance por cuatro pasos, y **completar los cuatro desbloquea 3 días del plan Pro gratis**. Además, cada paso paga créditos por su cuenta:\n\n| Paso | Créditos |\n| --- | --- |\n| Responder unas preguntas sobre cómo usas UXMagic | 12 |\n| Dejar una reseña en Capterra | 12 |\n| Unirte a la comunidad de Slack de UXMagic | 12 |\n| Dejar un testimonio: texto, o texto y vídeo | hasta 36 |\n\nAlgunas cosas que conviene saber:\n\n- **Cada paso paga una vez.** No puedes reclamar el mismo paso dos veces.\n- **Una reseña cuenta allí donde la dejaste.** Capterra sustituyó a Trustpilot como paso de reseña; si nos reseñaste en Trustpilot antes del cambio, sigue contando y no se te volverá a pedir.\n- **El testimonio paga más con vídeo**: 12 créditos por el texto y 24 más por grabar un vídeo corto.\n\n## La verificación es manual\n\nLos créditos no se conceden en el instante en que envías algo. Alguien comprueba que la reseña, la publicación o el testimonio son reales, y recibes un correo cuando se acredita. Es deliberado —es lo que hace que la recompensa se pueda seguir ofreciendo—, así que dale algo de tiempo en vez de enviarlo dos veces.\n\n## Recomendaciones\n\nRecomendar a alguien os paga **250 créditos** (unos 10 $) a los dos cuando esa persona pasa por primera vez a un plan de pago, hasta cinco recomendaciones. Es con diferencia la mayor fuente individual de créditos gratis. Consulta [Recomienda y gana](/help/account-and-billing/referral-program).\n\n## Que los créditos cundan\n\nGanar más es solo la mitad. Una edición dirigida cuesta 0,2 créditos y regenerar una pantalla cuesta 6, así que los hábitos de [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work) estiran un saldo más de lo que todos estos pasos lo llenan.","text":"Hay tres maneras de sumar créditos sin pagar: la asignación diaria gratuita, la lista Desbloquea el plan Pro y las recomendaciones. La asignación diaria Toda cuenta Free recibe 20 créditos al día, renovados a diario: suficiente para unas 3 pantallas. Un saldo vacío vuelve mañana, así que una semana tranquila no cuesta nada. Consulta Planes y límites. Desbloquea el plan Pro: cuatro pasos En el editor, pulsa Upgrade for free. El panel sigue tu avance por cuatro pasos, y completar los cuatro desbloquea 3 días del plan Pro gratis. Además, cada paso paga créditos por su cuenta: Paso Créditos --- --- Responder unas preguntas sobre cómo usas UXMagic 12 Dejar una reseña en Capterra 12 Unirte a la comunidad de Slack de UXMagic 12 Dejar un testimonio: texto, o texto y vídeo hasta 36 Algunas cosas que conviene saber: - Cada paso paga una vez. No puedes reclamar el mismo paso dos veces. - Una reseña cuenta allí donde la dejaste. Capterra sustituyó a Trustpilot como paso de reseña; si nos reseñaste en Trustpilot antes del cambio, sigue contando y no se te volverá a pedir. - El testimonio paga más con vídeo: 12 créditos por el texto y 24 más por grabar un vídeo corto. La verificación es manual Los créditos no se conceden en el instante en que envías algo. Alguien comprueba que la reseña, la publicación o el testimonio son reales, y recibes un correo cuando se acredita. Es deliberado —es lo que hace que la recompensa se pueda seguir ofreciendo—, así que dale algo de tiempo en vez de enviarlo dos veces. Recomendaciones Recomendar a alguien os paga 250 créditos (unos 10 $) a los dos cuando esa persona pasa por primera vez a un plan de pago, hasta cinco recomendaciones. Es con diferencia la mayor fuente individual de créditos gratis. Consulta Recomienda y gana. Que los créditos cundan Ganar más es solo la mitad. Una edición dirigida cuesta 0,2 créditos y regenerar una pantalla cuesta 6, así que los hábitos de Cómo funcionan los créditos estiran un saldo más de lo que todos estos pasos lo llenan."},{"slug":"referral-program","category":"account-and-billing","categoryTitle":"Planes, créditos y facturación","title":"Recomienda y gana","description":"Invita a otras personas a UXMagic y gana créditos cuando mejoren de plan.","url":"https://uxmagic.ai/es/help/account-and-billing/referral-program","type":"guide","keywords":["recomendación","recomienda a un amigo","invitar","ganar créditos","afiliados","recompensa"],"headings":["Cómo funciona","La recompensa","El límite","Reglas","Programa de afiliados"],"updated":"2026-08-27","faqs":[{"question":"¿Cuándo recibo los créditos?","answer":"Cuando la persona que has recomendado pasa por primera vez a un plan de pago, no cuando se registra."},{"question":"¿Hay algún límite?","answer":"Ganas con hasta cinco recomendaciones. Las posteriores siguen apareciendo en tu total, pero ya no generan recompensa."}],"related":["earn-free-credits","how-credits-work","plans-and-limits"],"markdown":"## Cómo funciona\n\n1. Consigue tu enlace de recomendación en **Recomienda y gana**, dentro de tu cuenta.\n2. Compártelo.\n3. Cuando alguien se registra a través de él y **pasa por primera vez a un plan de pago**, los dos recibís créditos.\n\n## La recompensa\n\n**250 créditos para cada parte** —presentados como «10 $ en créditos»— para quien recomienda y para la persona recomendada.\n\nPara hacerse una idea: 250 créditos son unas 80 pantallas nuevas, o muchísimas ediciones. Consulta [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work).\n\n## El límite\n\nGanas con hasta **cinco** recomendaciones. A partir de ahí, las recomendaciones siguen apareciendo en tu total pero dejan de generar recompensa.\n\n## Reglas\n\n- La recompensa se activa con la **primera mejora de plan de pago** de la persona recomendada, no con su registro.\n- Las autorrecomendaciones y las cuentas duplicadas no cuentan.\n- Los créditos llegan automáticamente a ambas cuentas; no hay que reclamar nada.\n\n## Programa de afiliados\n\nSi recomiendas a gran escala —una newsletter, un curso, la cartera de clientes de una agencia—, el [programa de afiliados](/affiliate) paga comisión en lugar de créditos y encaja mejor.","text":"Cómo funciona 1. Consigue tu enlace de recomendación en Recomienda y gana, dentro de tu cuenta. 2. Compártelo. 3. Cuando alguien se registra a través de él y pasa por primera vez a un plan de pago, los dos recibís créditos. La recompensa 250 créditos para cada parte —presentados como «10 $ en créditos»— para quien recomienda y para la persona recomendada. Para hacerse una idea: 250 créditos son unas 80 pantallas nuevas, o muchísimas ediciones. Consulta Cómo funcionan los créditos. El límite Ganas con hasta cinco recomendaciones. A partir de ahí, las recomendaciones siguen apareciendo en tu total pero dejan de generar recompensa. Reglas - La recompensa se activa con la primera mejora de plan de pago de la persona recomendada, no con su registro. - Las autorrecomendaciones y las cuentas duplicadas no cuentan. - Los créditos llegan automáticamente a ambas cuentas; no hay que reclamar nada. Programa de afiliados Si recomiendas a gran escala —una newsletter, un curso, la cartera de clientes de una agencia—, el programa de afiliados paga comisión en lugar de créditos y encaja mejor."},{"slug":"delete-your-account","category":"account-and-billing","categoryTitle":"Planes, créditos y facturación","title":"Eliminar tu cuenta","description":"Elimina de forma permanente tu cuenta de UXMagic y todo lo que contiene.","url":"https://uxmagic.ai/es/help/account-and-billing/delete-your-account","type":"howto","keywords":["eliminar cuenta","borrar cuenta","rgpd","borrar","cerrar cuenta","privacidad"],"headings":["Antes de eliminar","Exporta primero","Eliminar","Suscripción activa","Sitios publicados","Equipos"],"updated":"2026-08-27","faqs":[],"related":["cancel-your-subscription","account-and-profile"],"markdown":"## Antes de eliminar\n\nLa eliminación es **permanente**. Borra tus proyectos, pantallas, temas, recursos e historial. No hay deshacer ni recuperación.\n\nSi solo quieres dejar de pagar, [cancela tu suscripción](/help/account-and-billing/cancel-your-subscription) en su lugar: tu trabajo se queda.\n\n## Exporta primero\n\nCuando desaparezca, habrá desaparecido. Llévate lo que necesites:\n\n- [Exportar a Figma](/help/export-and-handoff/export-to-figma)\n- [Exportar código](/help/export-and-handoff/export-code)\n- [Exportar como PDF o imagen](/help/export-and-handoff/export-pdf-and-images)\n\n## Eliminar\n\n1. **Gestionar cuenta → Eliminar cuenta.**\n2. Confirma: hay una confirmación en dos pasos, a propósito.\n3. Si quieres, cuéntanos por qué. Lo leen personas, y es la información más útil que recibimos.\n\n## Suscripción activa\n\nCancela antes tu suscripción para que la facturación se detenga de forma limpia. Eliminar una cuenta no resuelve por sí solo una cuestión de facturación abierta: si tienes alguna, resuélvela primero.\n\n## Sitios publicados\n\nEliminar tu cuenta retira tus sitios publicados y libera sus subdominios. Si tienes un sitio en producción que importe, múdalo antes de eliminar.\n\n## Equipos\n\nSi eres propietario de un equipo, transfiere la propiedad antes de eliminar, o los proyectos del equipo se irán contigo.","text":"Antes de eliminar La eliminación es permanente. Borra tus proyectos, pantallas, temas, recursos e historial. No hay deshacer ni recuperación. Si solo quieres dejar de pagar, cancela tu suscripción en su lugar: tu trabajo se queda. Exporta primero Cuando desaparezca, habrá desaparecido. Llévate lo que necesites: - Exportar a Figma - Exportar código - Exportar como PDF o imagen Eliminar 1. Gestionar cuenta → Eliminar cuenta. 2. Confirma: hay una confirmación en dos pasos, a propósito. 3. Si quieres, cuéntanos por qué. Lo leen personas, y es la información más útil que recibimos. Suscripción activa Cancela antes tu suscripción para que la facturación se detenga de forma limpia. Eliminar una cuenta no resuelve por sí solo una cuestión de facturación abierta: si tienes alguna, resuélvela primero. Sitios publicados Eliminar tu cuenta retira tus sitios publicados y libera sus subdominios. Si tienes un sitio en producción que importe, múdalo antes de eliminar. Equipos Si eres propietario de un equipo, transfiere la propiedad antes de eliminar, o los proyectos del equipo se irán contigo."},{"slug":"i-ran-out-of-credits","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"Me he quedado sin créditos","description":"Qué ocurre cuando el saldo se agota a mitad de una ejecución, y cómo volver a ponerte en marcha.","url":"https://uxmagic.ai/es/help/troubleshooting/i-ran-out-of-credits","type":"troubleshooting","keywords":["sin créditos","no me quedan créditos","insuficiente","saldo","bloqueado","402"],"headings":["Qué vas a ver","Si ha pasado a mitad de la ejecución","Conseguir más créditos","Que la siguiente tanda dure más","Fondos de equipo","¿Te han cobrado algo que falló?"],"updated":"2026-09-03","faqs":[],"related":["earn-free-credits","how-credits-work","upgrade-or-downgrade"],"markdown":"## Qué vas a ver\n\nUn mensaje claro de que te has quedado sin créditos, al intentar iniciar una sesión o a mitad de una ejecución. Las sesiones necesitan al menos **4 créditos** para empezar.\n\n## Si ha pasado a mitad de la ejecución\n\nLas pantallas ya diseñadas **se conservan**. No has perdido el trabajo que se completó: simplemente todavía no tienes el resto del flujo.\n\nRecarga o mejora tu plan y después pide las pantallas que faltan. Se diseñarán dentro del mismo tema, así que el flujo se mantiene coherente.\n\n## Conseguir más créditos\n\n- **[Mejorar el plan](/help/account-and-billing/upgrade-or-downgrade)**: un plan de pago renueva los créditos en cada ciclo de facturación.\n- **[Recomendar a alguien](/help/account-and-billing/referral-program)**: 250 créditos cuando esa persona mejore de plan.\n- **Esperar la renovación**: en el plan Free los créditos se renuevan cada día; en un plan de pago se reinician en tu fecha de facturación. No se acumulan, así que no hay nada que ahorrar.\n\n## Que la siguiente tanda dure más\n\nLa gran victoria es no regenerar. Una edición dirigida cuesta 0,2 créditos; regenerar una pantalla cuesta 6. Consulta [Cómo funcionan los créditos](/help/account-and-billing/how-credits-work) para ver la tabla completa y los hábitos concretos que más ahorran.\n\n## Fondos de equipo\n\nEn un proyecto de equipo, el cargo va al fondo **del equipo** o a tu asignación dentro de él. «Sin créditos» ahí puede significar que tu asignación personal está agotada aunque el fondo del equipo no lo esté: pídele a la persona propietaria que la amplíe. Consulta [Equipos y asientos](/help/collaborate/teams-and-seats).\n\n## ¿Te han cobrado algo que falló?\n\nUn trabajo que no ha producido nada no debería facturarse. Si se te ha cobrado, [contacta con soporte](/help/troubleshooting/contact-support) con el enlace del proyecto y aproximadamente cuándo ocurrió.","text":"Qué vas a ver Un mensaje claro de que te has quedado sin créditos, al intentar iniciar una sesión o a mitad de una ejecución. Las sesiones necesitan al menos 4 créditos para empezar. Si ha pasado a mitad de la ejecución Las pantallas ya diseñadas se conservan. No has perdido el trabajo que se completó: simplemente todavía no tienes el resto del flujo. Recarga o mejora tu plan y después pide las pantallas que faltan. Se diseñarán dentro del mismo tema, así que el flujo se mantiene coherente. Conseguir más créditos - Mejorar el plan: un plan de pago renueva los créditos en cada ciclo de facturación. - Recomendar a alguien: 250 créditos cuando esa persona mejore de plan. - Esperar la renovación: en el plan Free los créditos se renuevan cada día; en un plan de pago se reinician en tu fecha de facturación. No se acumulan, así que no hay nada que ahorrar. Que la siguiente tanda dure más La gran victoria es no regenerar. Una edición dirigida cuesta 0,2 créditos; regenerar una pantalla cuesta 6. Consulta Cómo funcionan los créditos para ver la tabla completa y los hábitos concretos que más ahorran. Fondos de equipo En un proyecto de equipo, el cargo va al fondo del equipo o a tu asignación dentro de él. «Sin créditos» ahí puede significar que tu asignación personal está agotada aunque el fondo del equipo no lo esté: pídele a la persona propietaria que la amplíe. Consulta Equipos y asientos. ¿Te han cobrado algo que falló? Un trabajo que no ha producido nada no debería facturarse. Si se te ha cobrado, contacta con soporte con el enlace del proyecto y aproximadamente cuándo ocurrió."},{"slug":"blank-or-empty-screens","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"Una pantalla sale en blanco o vacía","description":"Frames vacíos tras un plan, lienzo en blanco al abrir y pantallas que no renderizan nada.","url":"https://uxmagic.ai/es/help/troubleshooting/blank-or-empty-screens","type":"troubleshooting","keywords":["en blanco","vacía","nada","pantalla blanca","no renderiza","falta pantalla"],"headings":["1. El frame se planificó pero nunca se diseñó","2. El lienzo está en blanco pero las pantallas existen","3. La pantalla tiene contenido pero no renderiza nada","Sigue en blanco"],"updated":"2026-08-27","faqs":[],"related":["flow-mode-and-screen-plans","style-guide-did-not-apply","contact-support"],"markdown":"Las pantallas en blanco tienen tres causas distintas. Recórrelas en orden.\n\n## 1. El frame se planificó pero nunca se diseñó\n\nLa más habitual. Un plan de pantallas crea frames con nombre y **vacíos** en el lienzo, y después los diseña de uno en uno. Si la ejecución se detuvo antes de tiempo —sin créditos, un error, un turno cancelado—, te quedan frames correctamente nombrados que no contienen nada.\n\n**Solución:** pide que se diseñen las pantallas vacías:\n\n> Diseña las pantallas de Precios y Ajustes: siguen vacías.\n\nComprueba antes tu saldo de créditos, para que no vuelva a pasar lo mismo.\n\n## 2. El lienzo está en blanco pero las pantallas existen\n\nSi el proyecto se abre sin nada visible y sabes que hay pantallas:\n\n1. **Ajustar a la pantalla** (Mayús+1). Puede que las pantallas estén fuera del viewport.\n2. **Recarga la página.**\n3. **Prueba con una ventana del navegador más ancha.** Una ventana muy estrecha puede reducir el área del lienzo a casi nada.\n4. **Prueba con otro navegador** para descartar una extensión.\n\n## 3. La pantalla tiene contenido pero no renderiza nada\n\nSuele ser un problema de estilos, no de contenido: consulta [Mi guía de estilo no se aplicó](/help/troubleshooting/style-guide-did-not-apply). Si la pantalla contiene una gráfica o una animación, consulta [Las gráficas o animaciones no se renderizan](/help/troubleshooting/charts-or-animations-not-rendering).\n\n## Sigue en blanco\n\n[Contacta con soporte](/help/troubleshooting/contact-support) con el enlace del proyecto y el nombre de la pantalla. Por favor, no elimines antes la pantalla en blanco: es la prueba.","text":"Las pantallas en blanco tienen tres causas distintas. Recórrelas en orden. 1. El frame se planificó pero nunca se diseñó La más habitual. Un plan de pantallas crea frames con nombre y vacíos en el lienzo, y después los diseña de uno en uno. Si la ejecución se detuvo antes de tiempo —sin créditos, un error, un turno cancelado—, te quedan frames correctamente nombrados que no contienen nada. Solución: pide que se diseñen las pantallas vacías: Diseña las pantallas de Precios y Ajustes: siguen vacías. Comprueba antes tu saldo de créditos, para que no vuelva a pasar lo mismo. 2. El lienzo está en blanco pero las pantallas existen Si el proyecto se abre sin nada visible y sabes que hay pantallas: 1. Ajustar a la pantalla (Mayús+1). Puede que las pantallas estén fuera del viewport. 2. Recarga la página. 3. Prueba con una ventana del navegador más ancha. Una ventana muy estrecha puede reducir el área del lienzo a casi nada. 4. Prueba con otro navegador para descartar una extensión. 3. La pantalla tiene contenido pero no renderiza nada Suele ser un problema de estilos, no de contenido: consulta Mi guía de estilo no se aplicó. Si la pantalla contiene una gráfica o una animación, consulta Las gráficas o animaciones no se renderizan. Sigue en blanco Contacta con soporte con el enlace del proyecto y el nombre de la pantalla. Por favor, no elimines antes la pantalla en blanco: es la prueba."},{"slug":"style-guide-did-not-apply","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"Mi guía de estilo o mi tema no se aplicó","description":"Las pantallas se renderizan sin estilos o ignoran un cambio de tema: qué comprobar y qué enviarnos.","url":"https://uxmagic.ai/es/help/troubleshooting/style-guide-did-not-apply","type":"troubleshooting","keywords":["sin estilos","tema no aplicado","faltan estilos","guía de estilo","faltan colores","plano"],"headings":["Mira el lienzo, no la respuesta","Soluciones, en orden","Las tipografías en concreto","No lo arregles pantalla por pantalla","Informar del problema"],"updated":"2026-08-27","faqs":[],"related":["themes-and-style-guides","fonts-and-typography","blank-or-empty-screens"],"markdown":"Síntomas: una pantalla se renderiza como contenido plano sin estilos, o un cambio de tema aterriza visiblemente en unas pantallas y en otras no.\n\n## Mira el lienzo, no la respuesta\n\nUn hábito importante: el chat puede informar de un cambio de tema como hecho mientras el lienzo no se ha movido. **Fíate del lienzo.** Si las pantallas no han cambiado, el cambio no ha aterrizado, diga lo que diga el mensaje.\n\n## Soluciones, en orden\n\n1. **Recarga el proyecto.** Un render obsoleto es la explicación más barata posible.\n2. **Vuelve a aplicar el cambio de tema en el chat** y observa las pantallas.\n3. **Vuelve a aplicarlo a nivel de proyecto.** Si pediste el cambio mientras estabas centrado en una pantalla, pídelo otra vez de forma explícita: *«Aplica este tema a todas las pantallas del proyecto»*.\n4. **Comprueba el origen de la pantalla.** Las pantallas creadas como variantes responsive, o mediante algunas vías de importación, han sido históricamente las más propensas a saltarse el tema del proyecto. Si hay una pantalla concreta que desentona, esa es la causa probable: pide que se aplique el tema a esa pantalla por su nombre.\n\n## Las tipografías en concreto\n\nUna tipografía puede quedar fijada en el tema mientras la hoja de estilos que la carga no se refresca, de modo que el diseño afirma usar una tipografía que no está renderizando. Consulta [Fuentes y tipografía](/help/design-and-edit/fonts-and-typography).\n\n## No lo arregles pantalla por pantalla\n\nRecolorear cada pantalla a mano hace desaparecer el síntoma y garantiza que habrá desviaciones más adelante. Consigue que el tema se aplique bien.\n\n## Informar del problema\n\n[Contacta con soporte](/help/troubleshooting/contact-support) con el enlace del proyecto, el nombre de la pantalla y lo que pediste. Esto es algo que se puede arreglar de nuestro lado, y los informes concretos son los que lo hacen posible.","text":"Síntomas: una pantalla se renderiza como contenido plano sin estilos, o un cambio de tema aterriza visiblemente en unas pantallas y en otras no. Mira el lienzo, no la respuesta Un hábito importante: el chat puede informar de un cambio de tema como hecho mientras el lienzo no se ha movido. Fíate del lienzo. Si las pantallas no han cambiado, el cambio no ha aterrizado, diga lo que diga el mensaje. Soluciones, en orden 1. Recarga el proyecto. Un render obsoleto es la explicación más barata posible. 2. Vuelve a aplicar el cambio de tema en el chat y observa las pantallas. 3. Vuelve a aplicarlo a nivel de proyecto. Si pediste el cambio mientras estabas centrado en una pantalla, pídelo otra vez de forma explícita: «Aplica este tema a todas las pantallas del proyecto». 4. Comprueba el origen de la pantalla. Las pantallas creadas como variantes responsive, o mediante algunas vías de importación, han sido históricamente las más propensas a saltarse el tema del proyecto. Si hay una pantalla concreta que desentona, esa es la causa probable: pide que se aplique el tema a esa pantalla por su nombre. Las tipografías en concreto Una tipografía puede quedar fijada en el tema mientras la hoja de estilos que la carga no se refresca, de modo que el diseño afirma usar una tipografía que no está renderizando. Consulta Fuentes y tipografía. No lo arregles pantalla por pantalla Recolorear cada pantalla a mano hace desaparecer el síntoma y garantiza que habrá desviaciones más adelante. Consigue que el tema se aplique bien. Informar del problema Contacta con soporte con el enlace del proyecto, el nombre de la pantalla y lo que pediste. Esto es algo que se puede arreglar de nuestro lado, y los informes concretos son los que lo hacen posible."},{"slug":"images-are-broken-or-missing","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"Las imágenes salen rotas, no aparecen o se quedan cargando","description":"Cajas de marcador de posición, imágenes cargando eternamente e imágenes que desaparecen tras exportar.","url":"https://uxmagic.ai/es/help/troubleshooting/images-are-broken-or-missing","type":"troubleshooting","keywords":["imagen rota","la imagen no carga","marcador de posición","falta imagen","girando","atascada"],"headings":["Una imagen se queda en un marcador de carga para siempre","Un icono de imagen rota","Una imagen subida no se puede leer","Las imágenes desaparecen tras exportar el código","Las imágenes se ven mal tras un cambio de tema","El mismo logotipo equivocado en todas partes"],"updated":"2026-08-27","faqs":[],"related":["images-in-your-designs","export-code","contact-support"],"markdown":"## Una imagen se queda en un marcador de carga para siempre\n\nA veces una imagen termina de generarse pero la tarjeta sigue mostrando un marcador de posición. La imagen en sí suele estar bien.\n\n**Solución:** recarga el proyecto. Si la imagen aparece, era un problema de visualización y no de generación. Si sigue siendo un marcador después de recargar, pide que se regenere.\n\n## Un icono de imagen rota\n\nLa referencia de la imagen existe pero el archivo no se resuelve. Pide que se regenere:\n\n> La imagen del hero de la landing page está rota; regenérala.\n\n## Una imagen subida no se puede leer\n\nSi le has dado a la IA la URL de una imagen y dice que no puede leerla, la URL tiene que ser **públicamente accesible**. No se pueden recuperar enlaces tras un inicio de sesión, en un bucket privado o con enlaces compartidos caducados. Sube el archivo directamente en lugar de pegar un enlace.\n\n## Las imágenes desaparecen tras exportar el código\n\nEs lo esperado, y conviene preverlo: el código exportado referencia las imágenes por URL desde el almacenamiento de recursos de tu proyecto. Descarga los recursos a tu repositorio antes de publicar; si no, tu sitio en producción depende de URLs que no controlas. Consulta [Exportar código](/help/export-and-handoff/export-code).\n\n## Las imágenes se ven mal tras un cambio de tema\n\nLas imágenes generadas no siguen automáticamente a una paleta nueva. Pide que se recoloreen in situ en lugar de regenerarlas: así todo lo demás de la imagen queda idéntico. Consulta [Imágenes en tus diseños](/help/design-and-edit/images-in-your-designs).\n\n## El mismo logotipo equivocado en todas partes\n\nUsa la vía de sustituir en todas partes en lugar de editar las pantallas una a una:\n\n> Sustituye el logotipo en todas las pantallas por el que acabo de subir.","text":"Una imagen se queda en un marcador de carga para siempre A veces una imagen termina de generarse pero la tarjeta sigue mostrando un marcador de posición. La imagen en sí suele estar bien. Solución: recarga el proyecto. Si la imagen aparece, era un problema de visualización y no de generación. Si sigue siendo un marcador después de recargar, pide que se regenere. Un icono de imagen rota La referencia de la imagen existe pero el archivo no se resuelve. Pide que se regenere: La imagen del hero de la landing page está rota; regenérala. Una imagen subida no se puede leer Si le has dado a la IA la URL de una imagen y dice que no puede leerla, la URL tiene que ser públicamente accesible. No se pueden recuperar enlaces tras un inicio de sesión, en un bucket privado o con enlaces compartidos caducados. Sube el archivo directamente en lugar de pegar un enlace. Las imágenes desaparecen tras exportar el código Es lo esperado, y conviene preverlo: el código exportado referencia las imágenes por URL desde el almacenamiento de recursos de tu proyecto. Descarga los recursos a tu repositorio antes de publicar; si no, tu sitio en producción depende de URLs que no controlas. Consulta Exportar código. Las imágenes se ven mal tras un cambio de tema Las imágenes generadas no siguen automáticamente a una paleta nueva. Pide que se recoloreen in situ en lugar de regenerarlas: así todo lo demás de la imagen queda idéntico. Consulta Imágenes en tus diseños. El mismo logotipo equivocado en todas partes Usa la vía de sustituir en todas partes en lugar de editar las pantallas una a una: Sustituye el logotipo en todas las pantallas por el que acabo de subir."},{"slug":"clone-came-out-blank-or-partial","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"Mi clon salió en blanco o incompleto","description":"Por qué el clon de un sitio web puede volver incompleto, y cómo terminarlo.","url":"https://uxmagic.ai/es/help/troubleshooting/clone-came-out-blank-or-partial","type":"troubleshooting","keywords":["clon fallido","clon parcial","clon en blanco","clonar sitio web","faltan secciones"],"headings":["Marcadores donde deberían ir las secciones","No ha vuelto nada en absoluto","Al clon le faltan justo las partes que me importaban","El texto se junta o se ve mal"],"updated":"2026-08-27","faqs":[],"related":["clone-a-website","blank-or-empty-screens","how-credits-work"],"markdown":"## Marcadores donde deberían ir las secciones\n\nEs intencionado. Cuando una página es demasiado larga o demasiado compleja para reconstruirla de una pasada, las secciones que no se han podido reconstruir se dejan en el lienzo como **marcadores etiquetados**: un hueco honesto en lugar de una página acortada en silencio.\n\n**Solución:** pídele a la IA que termine el clon.\n\n> Completa el clon: las secciones de marcador siguen vacías.\n\nVuelve a capturar la página original y reconstruye solo las secciones que faltan. Eso cuesta una fracción de un clon nuevo (2 créditos frente a 10), así que no relances el clon entero.\n\n## No ha vuelto nada en absoluto\n\nNormalmente es que la página no se ha podido capturar:\n\n- **Necesita iniciar sesión.** No es clonable. Haz una captura de la página y usa [De captura a interfaz](/help/generate/screenshot-to-ui).\n- **Protección antibots.** Los retos de Cloudflare y similares bloquean la captura automatizada.\n- **La URL estaba mal.** Incluye el protocolo y comprueba que carga en una ventana privada del navegador.\n- **El contenido está tras una interacción.** Los menús, los modales y las diapositivas posteriores de un carrusel no existen hasta que alguien hace clic.\n\n## Al clon le faltan justo las partes que me importaban\n\nLas páginas largas pierden primero la cola. Si lo que necesitas está muy abajo en la página, clónala y después pídelo de forma concreta:\n\n> Reconstruye las secciones de preguntas frecuentes y de pie de página de esa página.\n\n## El texto se junta o se ve mal\n\nInfórmanos. La calidad del resultado de la clonación es algo en lo que trabajamos activamente y los ejemplos concretos son lo que la impulsa: [contacta con soporte](/help/troubleshooting/contact-support) con la URL de origen y el enlace del proyecto.","text":"Marcadores donde deberían ir las secciones Es intencionado. Cuando una página es demasiado larga o demasiado compleja para reconstruirla de una pasada, las secciones que no se han podido reconstruir se dejan en el lienzo como marcadores etiquetados: un hueco honesto en lugar de una página acortada en silencio. Solución: pídele a la IA que termine el clon. Completa el clon: las secciones de marcador siguen vacías. Vuelve a capturar la página original y reconstruye solo las secciones que faltan. Eso cuesta una fracción de un clon nuevo (2 créditos frente a 10), así que no relances el clon entero. No ha vuelto nada en absoluto Normalmente es que la página no se ha podido capturar: - Necesita iniciar sesión. No es clonable. Haz una captura de la página y usa De captura a interfaz. - Protección antibots. Los retos de Cloudflare y similares bloquean la captura automatizada. - La URL estaba mal. Incluye el protocolo y comprueba que carga en una ventana privada del navegador. - El contenido está tras una interacción. Los menús, los modales y las diapositivas posteriores de un carrusel no existen hasta que alguien hace clic. Al clon le faltan justo las partes que me importaban Las páginas largas pierden primero la cola. Si lo que necesitas está muy abajo en la página, clónala y después pídelo de forma concreta: Reconstruye las secciones de preguntas frecuentes y de pie de página de esa página. El texto se junta o se ve mal Infórmanos. La calidad del resultado de la clonación es algo en lo que trabajamos activamente y los ejemplos concretos son lo que la impulsa: contacta con soporte con la URL de origen y el enlace del proyecto."},{"slug":"figma-export-failed","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"Mi exportación a Figma ha fallado","description":"Errores de exportación, archivos de Figma vacíos y exportaciones que consumen asignación.","url":"https://uxmagic.ai/es/help/troubleshooting/figma-export-failed","type":"troubleshooting","keywords":["exportación a figma fallida","error de exportación","figma vacío","la exportación no funciona"],"headings":["Comprueba tu asignación de exportaciones","La exportación se ejecutó pero Figma está vacío","La exportación dio error","Volver a conectar","Una exportación fallida no debería consumir una exportación","El archivo está bien pero la maquetación no cuadra"],"updated":"2026-08-27","faqs":[],"related":["export-to-figma","figma-plugin","plans-and-limits"],"markdown":"## Comprueba tu asignación de exportaciones\n\nLas exportaciones a Figma se contabilizan según el plan. Si has agotado tu asignación, las exportaciones se detienen hasta el siguiente ciclo o hasta una mejora de plan. Las exportaciones que te quedan se muestran en tu cuenta. Consulta [Planes y límites](/help/account-and-billing/plans-and-limits).\n\n## La exportación se ejecutó pero Figma está vacío\n\n- Comprueba que estás en el **archivo y la página de Figma correctos**: los frames caen donde apuntaba la exportación, que puede no ser donde estás mirando.\n- Prueba **ajustar el zoom** en Figma; los frames pueden estar fuera del viewport.\n- Si exportaste con el plugin, asegúrate de que el plugin tiene la sesión iniciada en la **misma cuenta de UXMagic**.\n\n## La exportación dio error\n\n1. **Prueba con una sola pantalla** en lugar del proyecto entero. Eso aísla una pantalla problemática concreta.\n2. **Vuelve a conectar Figma** desde Integraciones: los tokens de OAuth caducan.\n3. **Comprueba el estado del propio Figma** si está fallando todo a la vez.\n\n## Volver a conectar\n\n**Integraciones → Figma → desconectar y volver a conectar.** Esto resuelve la mayoría de los fallos de autorización.\n\n## Una exportación fallida no debería consumir una exportación\n\nSi un intento fallido ha consumido parte de tu asignación, [contacta con soporte](/help/troubleshooting/contact-support) con la marca de tiempo y la restauramos.\n\n## El archivo está bien pero la maquetación no cuadra\n\nLa estructura se traduce con fidelidad, pero Figma y la web maquetan el texto de forma distinta, así que espera pequeñas diferencias en los saltos de línea y en efectos sin equivalente directo. Si lo que está mal es una sección entera y no una diferencia leve, eso merece un informe.","text":"Comprueba tu asignación de exportaciones Las exportaciones a Figma se contabilizan según el plan. Si has agotado tu asignación, las exportaciones se detienen hasta el siguiente ciclo o hasta una mejora de plan. Las exportaciones que te quedan se muestran en tu cuenta. Consulta Planes y límites. La exportación se ejecutó pero Figma está vacío - Comprueba que estás en el archivo y la página de Figma correctos: los frames caen donde apuntaba la exportación, que puede no ser donde estás mirando. - Prueba ajustar el zoom en Figma; los frames pueden estar fuera del viewport. - Si exportaste con el plugin, asegúrate de que el plugin tiene la sesión iniciada en la misma cuenta de UXMagic. La exportación dio error 1. Prueba con una sola pantalla en lugar del proyecto entero. Eso aísla una pantalla problemática concreta. 2. Vuelve a conectar Figma desde Integraciones: los tokens de OAuth caducan. 3. Comprueba el estado del propio Figma si está fallando todo a la vez. Volver a conectar Integraciones → Figma → desconectar y volver a conectar. Esto resuelve la mayoría de los fallos de autorización. Una exportación fallida no debería consumir una exportación Si un intento fallido ha consumido parte de tu asignación, contacta con soporte con la marca de tiempo y la restauramos. El archivo está bien pero la maquetación no cuadra La estructura se traduce con fidelidad, pero Figma y la web maquetan el texto de forma distinta, así que espera pequeñas diferencias en los saltos de línea y en efectos sin equivalente directo. Si lo que está mal es una sección entera y no una diferencia leve, eso merece un informe."},{"slug":"my-changes-reverted","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"Mis cambios se han revertido o han desaparecido","description":"Un cambio de versión que vuelve atrás, o ediciones que parecen no guardarse.","url":"https://uxmagic.ai/es/help/troubleshooting/my-changes-reverted","type":"troubleshooting","keywords":["revertido","cambios perdidos","no guarda","se deshace solo","desaparecido","vuelve atrás"],"headings":["Una versión seleccionada vuelve atrás al hacer clic fuera","Los cambios del modo edición no se quedan","Una edición de la IA ha ido en la dirección equivocada","⌘Z no hace nada","Ha desaparecido una pantalla entera"],"updated":"2026-08-27","faqs":[],"related":["versions-and-history","editing-a-screen","contact-support"],"markdown":"## Una versión seleccionada vuelve atrás al hacer clic fuera\n\nSi eliges una versión anterior y la pantalla se revierte en cuanto haces clic en otro sitio, la selección no se ha persistido. Prueba:\n\n1. Selecciona la versión y **espera a que el lienzo se estabilice** antes de hacer clic fuera.\n2. **Recarga** y comprueba qué versión está activa.\n3. Si sigue revirtiéndose, [contacta con soporte](/help/troubleshooting/contact-support) con el enlace del proyecto y el nombre de la pantalla: esto es un fallo, no un ajuste.\n\n## Los cambios del modo edición no se quedan\n\nHaz clic fuera del elemento que has editado para confirmar el cambio y después recarga para comprobar que se ha guardado. Si el texto que escribiste ha desaparecido tras recargar, cuéntanoslo, con el nombre de la pantalla y lo que escribiste.\n\n## Una edición de la IA ha ido en la dirección equivocada\n\nNo se destruye nada. Cada cambio de la IA crea una **versión nueva** y la anterior sigue ahí: vuelve a ella. Consulta [Versiones e historial](/help/design-and-edit/versions-and-history).\n\n## ⌘Z no hace nada\n\nHaz clic primero en una zona vacía del lienzo. Mientras el cursor está en el campo de prompt, deshacer pertenece al campo de texto. Ten en cuenta además que deshacer cubre las acciones del lienzo, no las generaciones de la IA: para esas, usa las versiones.\n\n## Ha desaparecido una pantalla entera\n\nRevisa la **papelera** del proyecto y el historial de versiones. Si una pantalla ha desaparecido de verdad, contacta con soporte rápido y no sigas trabajando en ese proyecto: es más fácil recuperarla antes de que se acumulen más cambios encima.","text":"Una versión seleccionada vuelve atrás al hacer clic fuera Si eliges una versión anterior y la pantalla se revierte en cuanto haces clic en otro sitio, la selección no se ha persistido. Prueba: 1. Selecciona la versión y espera a que el lienzo se estabilice antes de hacer clic fuera. 2. Recarga y comprueba qué versión está activa. 3. Si sigue revirtiéndose, contacta con soporte con el enlace del proyecto y el nombre de la pantalla: esto es un fallo, no un ajuste. Los cambios del modo edición no se quedan Haz clic fuera del elemento que has editado para confirmar el cambio y después recarga para comprobar que se ha guardado. Si el texto que escribiste ha desaparecido tras recargar, cuéntanoslo, con el nombre de la pantalla y lo que escribiste. Una edición de la IA ha ido en la dirección equivocada No se destruye nada. Cada cambio de la IA crea una versión nueva y la anterior sigue ahí: vuelve a ella. Consulta Versiones e historial. ⌘Z no hace nada Haz clic primero en una zona vacía del lienzo. Mientras el cursor está en el campo de prompt, deshacer pertenece al campo de texto. Ten en cuenta además que deshacer cubre las acciones del lienzo, no las generaciones de la IA: para esas, usa las versiones. Ha desaparecido una pantalla entera Revisa la papelera del proyecto y el historial de versiones. Si una pantalla ha desaparecido de verdad, contacta con soporte rápido y no sigas trabajando en ese proyecto: es más fácil recuperarla antes de que se acumulen más cambios encima."},{"slug":"the-ai-is-not-following-my-brief","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"La IA no sigue mi briefing","description":"Cuando el resultado ignora tu marca, cambia cosas que no pediste o afirma un éxito que no ha conseguido.","url":"https://uxmagic.ai/es/help/troubleshooting/the-ai-is-not-following-my-brief","type":"troubleshooting","keywords":["no obedece","ignora las instrucciones","colores equivocados","marca","sobrescribe","resultado equivocado"],"headings":["Sé tajante con lo innegociable","Ojo con la sobrescritura de la paleta","Verifica, no te fíes del resumen","Acota tu instrucción","Menos cambios por mensaje","Las imágenes de referencia no anulan un tema existente","Cuando pasa una y otra vez"],"updated":"2026-08-27","faqs":[],"related":["writing-a-good-prompt","chat-editing","themes-and-style-guides"],"markdown":"Este es el modo de fallo más frustrante, y en su mayor parte se puede corregir desde tu lado. Esto es lo que funciona de verdad.\n\n## Sé tajante con lo innegociable\n\nLas formulaciones suaves se tratan como una preferencia. Si algo es fijo, dilo en esos términos:\n\n> Usa exactamente #0F3D2E y #F5F1E8. No introduzcas ningún otro color.\n> Mantén los textos existentes exactamente como están. Cambia solo la maquetación.\n\n## Ojo con la sobrescritura de la paleta\n\nUn patrón habitual: especificas los colores de tu marca y una operación de tema los sustituye por una paleta que el modelo considera más armónica. Si tus colores desaparecen, dilo directamente:\n\n> Has sustituido los colores de mi marca. Devuelve el principal a #0F3D2E y no vuelvas a cambiarlo.\n\n## Verifica, no te fíes del resumen\n\nEl chat a veces informa de un cambio como hecho cuando el lienzo dice lo contrario. **Mira las pantallas.** Si no se han movido, el cambio no ha aterrizado: dilo y vuelve a pedirlo. Consulta [Mi guía de estilo no se aplicó](/help/troubleshooting/style-guide-did-not-apply).\n\n## Acota tu instrucción\n\n«Ponlo oscuro» mientras estás centrado en un elemento puede fijar colores en el código de ese elemento en lugar de rehacer el tema del proyecto. Para cualquier cosa global, pídelo a nivel de proyecto en el chat, no dentro del modo edición.\n\n## Menos cambios por mensaje\n\nDe dos en dos o de tres en tres. Las listas largas interactúan, y cuando algo sale mal no puedes saber qué instrucción lo provocó.\n\n## Las imágenes de referencia no anulan un tema existente\n\nAdjuntar una imagen de referencia a un proyecto que ya tiene tema no repintará el proyecto con los colores de la referencia. Pídelo con palabras: *«Usa la paleta de esta imagen en lugar del tema actual»*.\n\n## Cuando pasa una y otra vez\n\nCuéntanoslo, con el enlace del proyecto y lo que pediste. Los casos repetidos de un modelo que ignora un briefing explícito se tratan como fallos —son lo más dañino que puede hacer el producto— y los ejemplos concretos son lo que nos permite arreglarlos. [Contacta con soporte](/help/troubleshooting/contact-support).","text":"Este es el modo de fallo más frustrante, y en su mayor parte se puede corregir desde tu lado. Esto es lo que funciona de verdad. Sé tajante con lo innegociable Las formulaciones suaves se tratan como una preferencia. Si algo es fijo, dilo en esos términos: Usa exactamente #0F3D2E y #F5F1E8. No introduzcas ningún otro color. Mantén los textos existentes exactamente como están. Cambia solo la maquetación. Ojo con la sobrescritura de la paleta Un patrón habitual: especificas los colores de tu marca y una operación de tema los sustituye por una paleta que el modelo considera más armónica. Si tus colores desaparecen, dilo directamente: Has sustituido los colores de mi marca. Devuelve el principal a #0F3D2E y no vuelvas a cambiarlo. Verifica, no te fíes del resumen El chat a veces informa de un cambio como hecho cuando el lienzo dice lo contrario. Mira las pantallas. Si no se han movido, el cambio no ha aterrizado: dilo y vuelve a pedirlo. Consulta Mi guía de estilo no se aplicó. Acota tu instrucción «Ponlo oscuro» mientras estás centrado en un elemento puede fijar colores en el código de ese elemento en lugar de rehacer el tema del proyecto. Para cualquier cosa global, pídelo a nivel de proyecto en el chat, no dentro del modo edición. Menos cambios por mensaje De dos en dos o de tres en tres. Las listas largas interactúan, y cuando algo sale mal no puedes saber qué instrucción lo provocó. Las imágenes de referencia no anulan un tema existente Adjuntar una imagen de referencia a un proyecto que ya tiene tema no repintará el proyecto con los colores de la referencia. Pídelo con palabras: «Usa la paleta de esta imagen en lugar del tema actual». Cuando pasa una y otra vez Cuéntanoslo, con el enlace del proyecto y lo que pediste. Los casos repetidos de un modelo que ignora un briefing explícito se tratan como fallos —son lo más dañino que puede hacer el producto— y los ejemplos concretos son lo que nos permite arreglarlos. Contacta con soporte."},{"slug":"generation-is-slow-or-stuck","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"La generación va lenta o se ha atascado","description":"Qué es normal, qué no lo es y qué hacer con una ejecución que se ha quedado parada.","url":"https://uxmagic.ai/es/help/troubleshooting/generation-is-slow-or-stuck","type":"troubleshooting","keywords":["lento","atascado","colgado","tiempo de espera","cargando sin parar","congelado","no responde"],"headings":["Qué es normal","Qué no es normal","Qué hacer","Que las ejecuciones vayan más rápidas"],"updated":"2026-08-27","faqs":[],"related":["flow-mode-and-screen-plans","clone-a-website","contact-support"],"markdown":"## Qué es normal\n\n- **Una sola pantalla**: normalmente menos de un minuto.\n- **Un flujo de varias pantallas**: las pantallas se diseñan de una en una, así que un flujo de cinco pantallas tarda aproximadamente cinco veces lo de una sola.\n- **El clon de un sitio web**: bastante más, porque un navegador real carga la página de destino antes de empezar cualquier trabajo de diseño.\n- **La exportación de código de un proyecto entero**: se ejecuta como tarea en segundo plano; los proyectos grandes tardan más.\n\nSi las pantallas van apareciendo en el lienzo una tras otra, está funcionando. Déjalo correr.\n\n## Qué no es normal\n\n- Ningún avance durante varios minutos.\n- El chat se detiene a mitad de turno sin mensaje y sin error.\n- Una tarea en segundo plano que nunca informa de que ha terminado.\n\n## Qué hacer\n\n1. **Recarga la página.** La ejecución continúa en el servidor; solo te estás reconectando a ella.\n2. **Mira el lienzo.** Las pantallas completadas antes del parón están ahí.\n3. **Pide lo que falta**, en lugar de reiniciar toda la petición: así evitas pagar dos veces por trabajo ya hecho.\n4. Si es reproducible, [contacta con soporte](/help/troubleshooting/contact-support) con el enlace del proyecto y la hora.\n\n## Que las ejecuciones vayan más rápidas\n\n- **Tandas más pequeñas.** Tres pantallas y luego otras tres es mejor que diez de golpe, y puedes corregir el rumbo entre medias.\n- **Ediciones dirigidas en lugar de regeneraciones**: más rápidas además de más baratas.\n- **Cierra primero el tema**, para no estar reconstruyendo pantallas solo por corregir un color.","text":"Qué es normal - Una sola pantalla: normalmente menos de un minuto. - Un flujo de varias pantallas: las pantallas se diseñan de una en una, así que un flujo de cinco pantallas tarda aproximadamente cinco veces lo de una sola. - El clon de un sitio web: bastante más, porque un navegador real carga la página de destino antes de empezar cualquier trabajo de diseño. - La exportación de código de un proyecto entero: se ejecuta como tarea en segundo plano; los proyectos grandes tardan más. Si las pantallas van apareciendo en el lienzo una tras otra, está funcionando. Déjalo correr. Qué no es normal - Ningún avance durante varios minutos. - El chat se detiene a mitad de turno sin mensaje y sin error. - Una tarea en segundo plano que nunca informa de que ha terminado. Qué hacer 1. Recarga la página. La ejecución continúa en el servidor; solo te estás reconectando a ella. 2. Mira el lienzo. Las pantallas completadas antes del parón están ahí. 3. Pide lo que falta, en lugar de reiniciar toda la petición: así evitas pagar dos veces por trabajo ya hecho. 4. Si es reproducible, contacta con soporte con el enlace del proyecto y la hora. Que las ejecuciones vayan más rápidas - Tandas más pequeñas. Tres pantallas y luego otras tres es mejor que diez de golpe, y puedes corregir el rumbo entre medias. - Ediciones dirigidas en lugar de regeneraciones: más rápidas además de más baratas. - Cierra primero el tema, para no estar reconstruyendo pantallas solo por corregir un color."},{"slug":"charts-or-animations-not-rendering","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"Las gráficas o animaciones no se renderizan","description":"Por qué una gráfica muestra una caja vacía, y qué hacer con los elementos interactivos.","url":"https://uxmagic.ai/es/help/troubleshooting/charts-or-animations-not-rendering","type":"troubleshooting","keywords":["gráfica","gráfico","animación","elemento canvas","gráfica en blanco","interactivo","script"],"headings":["Una caja vacía donde debería haber una gráfica","Las animaciones no se reproducen","Después de exportar","Informar del problema"],"updated":"2026-08-27","faqs":[],"related":["blank-or-empty-screens","export-code","contact-support"],"markdown":"## Una caja vacía donde debería haber una gráfica\n\nLas gráficas las dibuja un script dentro de un elemento canvas. Si la pantalla se vuelve a renderizar sin volver a ejecutar ese script —tras una recarga, un cambio de versión o un guardado—, el elemento sobrevive pero el dibujo no, y te queda una caja vacía.\n\n**Qué probar**\n\n1. **Recarga el proyecto.** A menudo basta.\n2. **Pide que se reconstruya la gráfica** en esa pantalla.\n3. **Pide una gráfica estática** si lo único que hace falta es que se vea bien en un diseño: *«Sustituye la gráfica por una versión estática en SVG»*. Las gráficas estáticas sobreviven a todos los guardados y exportaciones, que para un entregable de diseño suele ser lo que quieres.\n\n## Las animaciones no se reproducen\n\nLa misma causa de fondo. Los diseños se guardan como marcado, y el comportamiento que depende de que un script se ejecute en el momento justo no siempre sobrevive a una ida y vuelta. Para cualquier cosa con mucho movimiento, diseña aquí los frames estáticos e implementa el movimiento tras exportar.\n\n## Después de exportar\n\nEl código exportado contiene lo que había en la pantalla. Si una gráfica estaba en blanco en el lienzo, está en blanco en la exportación. Arréglalo antes de exportar, o conecta la biblioteca de gráficas de verdad en tu propia base de código, que es lo que vas a querer hacer de todas formas en cuanto muestre datos reales.\n\n## Informar del problema\n\nSi una gráfica sale en blanco de forma consistente en una pantalla concreta, [contacta con soporte](/help/troubleshooting/contact-support) con el enlace del proyecto y el nombre de la pantalla.","text":"Una caja vacía donde debería haber una gráfica Las gráficas las dibuja un script dentro de un elemento canvas. Si la pantalla se vuelve a renderizar sin volver a ejecutar ese script —tras una recarga, un cambio de versión o un guardado—, el elemento sobrevive pero el dibujo no, y te queda una caja vacía. Qué probar 1. Recarga el proyecto. A menudo basta. 2. Pide que se reconstruya la gráfica en esa pantalla. 3. Pide una gráfica estática si lo único que hace falta es que se vea bien en un diseño: «Sustituye la gráfica por una versión estática en SVG». Las gráficas estáticas sobreviven a todos los guardados y exportaciones, que para un entregable de diseño suele ser lo que quieres. Las animaciones no se reproducen La misma causa de fondo. Los diseños se guardan como marcado, y el comportamiento que depende de que un script se ejecute en el momento justo no siempre sobrevive a una ida y vuelta. Para cualquier cosa con mucho movimiento, diseña aquí los frames estáticos e implementa el movimiento tras exportar. Después de exportar El código exportado contiene lo que había en la pantalla. Si una gráfica estaba en blanco en el lienzo, está en blanco en la exportación. Arréglalo antes de exportar, o conecta la biblioteca de gráficas de verdad en tu propia base de código, que es lo que vas a querer hacer de todas formas en cuanto muestre datos reales. Informar del problema Si una gráfica sale en blanco de forma consistente en una pantalla concreta, contacta con soporte con el enlace del proyecto y el nombre de la pantalla."},{"slug":"contact-support","category":"troubleshooting","categoryTitle":"Solución de problemas","title":"Contactar con soporte","description":"Cómo localizarnos y qué incluir para que podamos arreglarlo en la primera respuesta.","url":"https://uxmagic.ai/es/help/troubleshooting/contact-support","type":"guide","keywords":["soporte","ayuda","contacto","correo","chat","informe de error","hablar con una persona"],"headings":["Cómo localizarnos","Qué incluir","Por favor, no borres las pruebas","Facturación","Peticiones de funcionalidades"],"updated":"2026-08-27","faqs":[],"related":["i-ran-out-of-credits","the-ai-is-not-following-my-brief","refunds"],"markdown":"## Cómo localizarnos\n\n- **Chat en la aplicación**: la vía más rápida. Abre el mensajero desde el panel o desde la [página de soporte](/support).\n- **Correo**: **hello@uxmagic.ai**.\n- **Enterprise**: el soporte prioritario con tiempo de respuesta garantizado forma parte del plan.\n\n## Qué incluir\n\nLa diferencia entre una solución en la primera respuesta y una semana de idas y venidas:\n\n1. **El enlace del proyecto.** Cópialo de la barra de direcciones.\n2. **El nombre de la pantalla**, si se trata de una pantalla concreta.\n3. **Lo que pediste**: pega el prompt.\n4. **Lo que ocurrió en su lugar**, y lo que esperabas.\n5. **Aproximadamente cuándo.** Hora y zona horaria.\n6. **Una captura de pantalla**, si es algo visual.\n\n## Por favor, no borres las pruebas\n\nSi una pantalla está en blanco, rota o mal, déjala donde está hasta que la hayamos mirado. Borrarla elimina el único registro de lo que falló.\n\n## Facturación\n\nPara cualquier cosa relacionada con la facturación, escribe a **hello@uxmagic.ai** antes de reclamar a tu banco: una reclamación puede suspender tu cuenta mientras se revisa. Consulta [Facturación, facturas y métodos de pago](/help/account-and-billing/billing-and-invoices).\n\n## Peticiones de funcionalidades\n\nDe verdad que son bienvenidas. Cuéntanos el problema que intentas resolver en lugar de la funcionalidad que has diseñado: a menudo podemos resolverlo de una forma que no habías considerado, o decirte que ya existe.","text":"Cómo localizarnos - Chat en la aplicación: la vía más rápida. Abre el mensajero desde el panel o desde la página de soporte. - Correo: hello@uxmagic.ai. - Enterprise: el soporte prioritario con tiempo de respuesta garantizado forma parte del plan. Qué incluir La diferencia entre una solución en la primera respuesta y una semana de idas y venidas: 1. El enlace del proyecto. Cópialo de la barra de direcciones. 2. El nombre de la pantalla, si se trata de una pantalla concreta. 3. Lo que pediste: pega el prompt. 4. Lo que ocurrió en su lugar, y lo que esperabas. 5. Aproximadamente cuándo. Hora y zona horaria. 6. Una captura de pantalla, si es algo visual. Por favor, no borres las pruebas Si una pantalla está en blanco, rota o mal, déjala donde está hasta que la hayamos mirado. Borrarla elimina el único registro de lo que falló. Facturación Para cualquier cosa relacionada con la facturación, escribe a hello@uxmagic.ai antes de reclamar a tu banco: una reclamación puede suspender tu cuenta mientras se revisa. Consulta Facturación, facturas y métodos de pago. Peticiones de funcionalidades De verdad que son bienvenidas. Cuéntanos el problema que intentas resolver en lugar de la funcionalidad que has diseñado: a menudo podemos resolverlo de una forma que no habías considerado, o decirte que ya existe."}]}