> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Diseñar con IA > Aprende a diseñar tu app con IA: dale un brief como a un diseñador, ajusta elementos en el modo Edit, define límites con AI Controls y refina las opciones que ofrece. La IA está en el centro de cómo diseñas en Base44. Describe lo que quieres en lenguaje natural y la IA actualiza el código, los estilos y los componentes por ti. El modo **Edit** te permite ajustar lo que ves en pantalla, y los AI Controls te ayudan a definir límites. Esta página cubre cada flujo de trabajo con prompts y ejemplos que puedes usar directamente. The app editor chat making a design change to an app Para el panel Theme, las fuentes y los estilos globales dentro de una app, consulta [Personalizar el diseño de tu app](/Building-your-app/Design). *** ## Cómo funciona el diseño No necesitas una herramienta de diseño ni experiencia en diseño. El diseño de tu app es parte de su código, y la IA cambia ese código por ti: cada cambio de diseño es una petición en lenguaje sencillo, desde "haz los botones más redondeados" hasta "rediseña toda esta página". Hay tres formas de hacer un cambio de diseño, y elegir la correcta te ahorra tiempo: | Cambio que quieres | Usa | | ----------------------------------------------------------------------------- | ------------------ | | Colores o fuentes en toda la app | El panel **Theme** | | Un elemento o sección que puedes señalar | El modo **Edit** | | Cualquier cosa mayor, como nuevos layouts, rediseños o una sensación distinta | El chat de IA | **Un buen orden para un rediseño completo:** 1. Define primero el aspecto general: colores y fuentes en el [panel Theme](/Building-your-app/Design#global-changes). 2. Pide a la IA cambios a nivel de página, una página a la vez. 3. Pule los elementos individuales en el modo **Edit**. Nada es permanente. Puedes hacer clic en **Revert** en cualquier prompt para deshacer ese cambio, o restaurar una versión anterior de tu app desde su historial de versiones, así que siempre es seguro experimentar. *** ## Diseñar en el chat El chat de IA es ideal para cambios globales y decisiones de diseño que afectan a muchas partes de tu app. Puedes definir una persona y un brief una vez, y luego construir sobre eso: ```text theme={null} Eres mi diseñador de producto para esta app. Brief de diseño: - Propósito: Ayudar a los equipos de contenido a planificar, escribir y publicar artículos más rápido. - Personas: Responsables de contenido y redactores ocupados en portátiles durante la jornada laboral. - Sensación: Tranquila, enfocada, moderna, confiable. Usa este brief como base para todas las sugerencias y decisiones de diseño. ``` Tampoco necesitas vocabulario de diseño. Describe la sensación que quieres, nombra un producto cuyo estilo te guste, o sube una captura de un diseño que admires y pide a la IA que imite su estilo: ```text theme={null} Haz que esta página se sienta más tranquila y más premium. Usa la captura adjunta como referencia para el estilo general. ``` Patrones útiles: * Pide una crítica antes de pedir cambios. * Pide un plan en el modo Discuss, apruébalo y luego pide a la IA que lo implemente. * Aclara siempre el alcance del diseño: toda la app, una página o un elemento. Ejemplo: ```text theme={null} Critica el diseño solo de este dashboard. Céntrate en layout, jerarquía, color, tipografía y espaciado. Luego propón un plan breve de cambios pequeños. Espera mi aprobación antes de aplicar nada. ``` Después de revisar: ```text theme={null} Aplica el plan que propusiste para este dashboard. Haz los cambios en grupos pequeños y describe cada grupo brevemente sobre la marcha. ``` *** ## Elegir una opción de diseño Cuando pides a la IA que cambie el diseño o el layout de una sección o elemento, puede presentarte opciones visuales para elegir en lugar de aplicar un cambio de inmediato. Cada opción muestra una vista previa para que veas cómo quedará antes de comprometerte. También puedes hacer clic en el icono **Expand** de una opción para verla en modo completo y refinarla antes de elegir. Design options in the chat, with the Expand icon shown on a mockup Describe un cambio puntual, como un fondo más claro, para ajustar solo esos detalles, o pide una dirección completamente distinta para reemplazar esa opción. Cuando se vea bien, haz clic en **Apply**. Expanded design option showing a mockup preview with a change request typed below it *** ## Explorar direcciones de diseño Puedes usar el chat de IA para explorar diferentes direcciones antes de comprometerte. No necesitas describir tu diseño actual: la IA toma una captura de tu página y revisa lo que realmente hay. Bucle de crítica: ```text theme={null} Actúa como un diseñador de producto senior. Revisa esta página y describe tres problemas visuales específicos. Para cada problema, escribe un prompt de Base44 que lo solucionaría. No hagas ningún cambio todavía. ``` Direcciones alternativas: ```text theme={null} Crea dos opciones visuales para este dashboard: - Opción A: muy minimalista, mayormente neutra con un solo color de acento - Opción B: más expresiva, con colores más ricos y tipografía ligeramente más grande Mantén el contenido y el layout iguales. Describe cada opción en un resumen breve y espera a que yo elija. ``` Una vez que eliges una opción, puedes pedir a la IA que aplique esa dirección a páginas similares. *** ## Usar el modo Edit El modo **Edit** es ideal cuando quieres ajustar lo que ves sin reescribirlo todo. Visualedittoolbar Haz clic en **Edit** en el chat y luego selecciona el elemento que quieres cambiar. Puedes: * Seleccionar una sección y ajustar colores, espaciado y layout visualmente. * Pedir a la IA que restilice solo una instancia de un componente. * Eliminar elementos que ya no necesitas usando el icono **Delete** . * Usarlo como un espacio seguro antes de extender un patrón al resto de tu app. Haz clic en **Edit Element** en la barra de herramientas de Edit para pedir cambios a la IA. Por ejemplo: ```text theme={null} En esta sección seleccionada: - Aclara ligeramente el fondo - Aumenta el espaciado vertical entre el encabezado y el contenido - Usa el estilo de botón primario para la acción principal y el estilo secundario para las demás ``` ```text theme={null} Solo para esta tarjeta: - Aumenta el padding - Mueve el icono a la izquierda del título - Usa una sombra más suave que combine con las otras tarjetas de la app ``` *** ## Usar AI Controls Usa los [AI Controls](/Building-your-app/AI-chat-modes#customizing-your-ai-chat) del chat para guiar y proteger tu diseño. Puedes: * Definir pautas de diseño que se apliquen a cada prompt. * Congelar archivos o páginas específicos para que la IA no los cambie. * Establecer un tono, como minimalista, atrevido o desenfadado. Ejemplo de pautas: ```text theme={null} Pautas de diseño globales: - Prefiere visuales tranquilos y minimalistas con mucho espacio en blanco - Usa esquinas redondeadas con radio 12 en tarjetas y botones - Evita degradados intensos y efectos de cristal - Mantén las animaciones sutiles y respeta las preferencias de movimiento reducido ``` Sé siempre explícito con el alcance en tus prompts. El mismo cambio puede aplicarse a toda la app, a una página o a un solo elemento, y la IA seguirá tu indicación: ```text theme={null} Actualiza el estilo del botón primario y propágalo a todos los lugares donde se usa el componente de botón primario. No cambies los botones secundarios. ``` ```text theme={null} Actualiza solo la sección hero de la página de inicio: - Cambia el fondo a un degradado suave - Aumenta el tamaño del encabezado - Usa el estilo de botón primario para la llamada a la acción principal No cambies otras secciones ni páginas. ``` Para proteger las áreas con las que estás satisfecho mientras experimentas en otras: * Usa AI Controls para congelar archivos o páginas específicos y que la IA no los cambie. * Usa la opción **Revert** en prompts individuales para deshacer un solo cambio. * Usa el historial de versiones para volver a un estado anterior. *** ## Preguntas frecuentes Haz clic en una pregunta para saber más sobre diseñar con IA. Sí. Los prompts de diseño son mensajes del chat de IA, así que usan tus créditos de mensajes igual que cualquier otra petición en el chat. El modo **Edit** da estilo a un elemento o sección a la vez. El panel **Theme** cambia los colores y las fuentes de toda tu app de una vez. Para saber más sobre el panel Theme, consulta [Personalizar el diseño de tu app](/Building-your-app/Design). Esta página fue traducida con IA. Para obtener la información más precisa y actualizada, consulta la [versión en inglés](/).