Skip to main content
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

Diseñando tu app con IA

Para el panel Theme, las fuentes y los estilos globales dentro de una app, consulta Personalizar el diseño de tu app.

​
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: Un buen orden para un rediseño completo:
  1. Define primero el aspecto general: colores y fuentes en el panel Theme.
  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:
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:
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:
Después de revisar:

​
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

Eligiendo entre opciones de diseño de la IA

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

Refinando una opción de diseño en la vista expandida

​
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:
Direcciones alternativas:
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

La barra de herramientas del modo Edit

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:

​
Usar AI Controls

Usa los AI Controls 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:
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:
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.
Esta página fue traducida con IA. Para obtener la información más precisa y actualizada, consulta la versión en inglés.