#000

https://main--cc--adobecom.aem.live/cc-shared/assets/img/firefly.svg|AdobeFirefly Adobe Firefly

Crea diseños interactivos con Firefly Builder: el creador de sitios web con IA

Con Firefly Builder, visualiza fácilmente sitios web, aplicaciones y mucho más: transforma las indicaciones y referencias en diseños adaptables que puedes previsualizar y editar directamente en el lienzo.

Unirse a la lista de espera

style
dark
#000

https://main--da-cc--adobecom.aem.page/cc-shared/assets/img/product-icons/svg/firefly-80.svg|Adobe Firefly

Unirse a la lista de espera de Firefly Builder

https://main--da-cc--adobecom.aem.page/cc-shared/assets/img/product-icons/svg/firefly-80.svg

Adobe Firefly

Unirse a la lista de espera de Firefly Builder

https://main--da-cc--adobecom.aem.page/cc-shared/assets/img/product-icons/svg/firefly-80.svg

Adobe Firefly

Unirse a la lista de espera de Firefly Builder

style
Sticky bottom, dark

Firefly Builder: une el desarrollo mediante IA conversacional y el control creativo

Ahora, el equipo de diseño puede dar vida a sus ideas rápidamente, generando diseños interactivos y coherentes con la marca para sitios web y aplicaciones, sin escribir una sola línea de código. Crea y administra múltiples proyectos en un único lienzo y ajusta todos los detalles mediante el chat del agente o a través de la selección y edición directa. Luego, exporta los paquetes de código para continuar el desarrollo.

background
#FFF
style
xxl-spacing-top, xl-top-rounded-corners, static links

Obtén coherencia y control con los sistemas de diseño y las funciones de edición en el lienzo

Solo escribe una indicación o sube las directrices de marca para generar un sistema de diseño que mantenga un aspecto coherente en todas las versiones. Edita los diseños desde el panel Propiedades o selecciona cualquier elemento con la herramienta Inspeccionar y escribe una indicación para describir los cambios que quieres ver aplicados.

Previsualiza y comparte los diseños fácilmente

Firefly Builder convierte los diseños en prototipos interactivos que puedes probar directamente en el lienzo. Comparte un enlace con las partes interesadas, clientes y equipos para recopilar sus comentarios y revisar y perfeccionar el trabajo antes de iniciar el desarrollo.

Exporta las experiencias desde el creador de sitios web con IA

Entrega paquetes de código HTML limpios a una persona desarrolladora o impórtalos en herramientas de programación web para llevar los diseños a producción.

Cómo crear diseños interactivos con Firefly Builder

Paso 1

Únete a la lista de espera

Ve a firefly.adobe.com/builder y únete a la lista de espera de Firefly Builder con tu Adobe ID o crea una cuenta gratuita si aún no tienes una.

Paso 2

Abre Firefly Builder

Una vez disponible la aplicación, inicia sesión con tu Adobe ID.

Paso 3

Empieza a generar el proyecto

Haz clic en el ícono del avión de papel en la esquina inferior derecha de la ventana de indicaciones. Firefly Builder comenzará a generar el diseño en el lienzo y verás sus acciones en tiempo real, paso a paso.

Paso 4

Previsualiza el proyecto

Cuando Firefly Builder termine, recibirás una vista previa interactiva del proyecto. Puedes expandir el marco, inspeccionar elementos individuales o probar la experiencia en una nueva pestaña del navegador.

Paso 5

Perfecciona los resultados

Sigue editando el proyecto seleccionando su marco e ingresando instrucciones en la ventana de chat del agente.

Paso 6

Opcional: genera otro proyecto

Para crear un nuevo proyecto, anula la selección del marco de la aplicación y aleja la vista. Dibuja un nuevo marco en cualquier parte del lienzo usando la herramienta Marco en la barra de herramientas inferior. Luego, genera un nuevo diseño dentro de ese marco seleccionándolo e ingresando una nueva indicación.

Navega de un proyecto a otro seleccionándolos en el lienzo o en el menú desplegable de la esquina superior izquierda del panel de chat.

Cómo crear experiencias interactivas con Firefly Builder

Pasos para crear experiencias interactivas con Firefly Builder

PT5M

firefly

Unirse a la lista de espera
style
xl-bottom-rounded-corners
background
linear-gradient(180deg, #FFF 0%, #F0F0F7 27.32%)

¿Por qué usar Firefly Builder como creador de sitios web con IA?

Firefly Builder permite a profesionales del diseño gráfico, del diseño de UI/UX y de otros ámbitos creativos generar experiencias interactivas sin escribir código. Ya sea que necesites crear un prototipo de una aplicación web sencilla o diseñar un micrositio de marca para el lanzamiento de un producto, Firefly Builder hace que visualizar cómo se verá, se sentirá y funcionará el producto final resulte más sencillo.

background
#FFF
style
xxl-spacing-top, xl-top-rounded-corners, static links
#FFF

Control creativo

Con la capacidad de generar sistemas de diseño y editar todos los detalles directamente en el lienzo, Firefly Builder lleva la precisión del desarrollo sin codificar a un nuevo nivel.

#FFF

Diseño interactivo sin codificar

Solo escribe descripciones, agrega referencias visuales y sube las directrices de marca, y el creador de sitios web con IA generará rápidamente diseños interactivos que se ajusten a tu visión.

#FFF

Comparte fácilmente

Cuando el diseño esté listo, obtén un enlace para compartirlo con colaboradores y partes interesadas para su revisión. Sin necesidad de exportar archivos ni hacer entregas.

#FFF

Resultados listos para producción

Firefly Builder genera rápidamente paquetes de código limpio listos para seguir desarrollándolos en herramientas de desarrollo web.

style
two up, s spacing top, l spacing bottom, show-2-desktop, static-links
background
#FFF
Unirse a la lista de espera
background
#FFF
style
xl-top-rounded-corners, static links

Descubre lo que puedes hacer en Firefly Builder

Unirse a la lista de espera
https://firefly.adobe.com/builder/join?ff_source=adobe-com&ff_campaign=ff-builder-page
Unirse a la lista de espera
https://firefly.adobe.com/builder/join?ff_source=adobe-com&ff_campaign=ff-builder-page
Unirse a la lista de espera
https://firefly.adobe.com/builder/join?ff_source=adobe-com&ff_campaign=ff-builder-page

Descubre aún más funciones

background
#F0F0F7
De texto a imagen De imagen a imagen De boceto a imagen Generador de diseños gráficos con IA Generador de arte con IA Generador de dibujos con IA Generador de videos con IA Generador de animaciones con IA Generador de retratos con IA Generador de dibujos animados con IA Generador de música con IA Generador de efectos de sonido con IA
background
linear-gradient(180deg, #FFF 0%, #F0F0F7 27.32%)
style
xl-bottom-rounded-corners, spacing-bottom-180

¿Alguna pregunta? Tenemos las respuestas

¿Qué es Firefly Builder?

Firefly Builder es una aplicación web que te permite generar diseños interactivos, como sitios web y aplicaciones, sin escribir ni una línea de código.

¿Para quién es Firefly Builder?

Está pensado para profesionales del diseño y de la creatividad que quieran llevar el arte de la narrativa visual a experiencias interactivas como sitios web y aplicaciones. Pueden usar Firefly Builder para proyectos de clientes o para la identidad de marca de su propia organización.

¿Cuándo puedo acceder al creador de sitios web con IA de Firefly Builder?

La aplicación ya está disponible como parte de un programa beta privado. Para obtener más información, visita firefly.adobe.com/builder.

¿Qué idiomas se admiten?

Por el momento, Firefly Builder solo está disponible en inglés.

¿Qué tipos de archivos puedo subir a la ventana de indicaciones?

Por el momento, Firefly Builder admite los siguientes tipos de archivo: JPEG, PNG, PDF, MD y GIF.

¿Puedo usar el creador de sitios web y aplicaciones con IA de Firefly Builder en un dispositivo móvil?

Sí. Firefly Builder funciona en navegadores web de escritorio y móviles. Por ahora, no admite la exportación de paquetes de código para aplicaciones móviles.

¿Qué navegadores admite Firefly Builder?

Puedes usar Firefly Builder en Google Chrome, Apple Safari, Microsoft Edge y Mozilla Firefox.

¿Puedo editar los diseños después de generarlos?

Sí. Puedes editarlos directamente desde el panel Propiedades o usar la Herramienta de inspección para seleccionar elementos específicos y hacer cambios mediante indicaciones.

Comparte esta página

style
xxl spacing bottom