En el nuevo mundo en el que vivimos donde la inteligencia artificial destaca por la velocidad, las personas, debemos de centrarnos en adquirir las numerosas IAs existentes como herramientas dentro de nuestro proceso de ideación o creación.
Son realmente útiles si tienes claro que el control de calidad de lo que genera la IA debes de hacerlo tú o personas expertas sobre lo que la IA está entregando. A continuación, cuento el proceso de cómo genero Landings webs con IA en el proceso de ideación, las depuro y lanzo con un código listo para subir a producción.
Proceso de creación con IA
El diseño de interfaz (UI) y la experiencia de usuario (UX) son cruciales, pero a menudo lentos de iterar. La IA puede agilizar ambas cosas. En una entrada anterior, Inteligencia artificial (IA) en fase de investigación con usuarios, cuento cómo utilizarla para mejorar la Usabilidad y la experiencia de usuario.
Para agilizar el diseño de las interfaces y la UI, dentro de mi proceso de creación, es necesario tener ciertos conocimientos de programación FrontEnd. Por lo menos, haber creado unas cuantas páginas con Frameworks como Tailwind o Bootstrap. Por lo que, tener conocimientos avanzados de HTML, CSS y JS, va a ayudar posteriormente en la edición y modificación, así como en la depuración del código generado por Gemini.
El Prompt mágico con el que todo empieza
Es el primer Prompt que lanzaré a Gemini, la IA de Google. Es muy importante seguir la estructura básica para definir y entregar un Prompt a cualquier IA.
Un prompt efectivo se construye a menudo siguiendo la técnica «RAP» (Role, Action, Purpose/Parameters), o una variante más completa que incluye el Contexto y el Formato.
Particularmente, después de muchos Prompts, lo que mejor me funciona es incluir en el contexto la tarea que quiero que realice. Luego, le paso unos requerimientos generales e incluyo el formato de salida.
Contexto: Diseña una Landing page de alta fidelidad para una inmobiliaria tecnológica que acaba de abrir un nuevo modelo de negocio que venderá pisos y estudios de obra nueva. En cuanto al estilo para crear la interfaz, toma como referencia los componentes y estilos CSS de la web de esta url: www.clikalia.com.
Requerimientos: Aquí lanzo un listado de requerimientos generales para que pueda construir una interfaz básica. Posteriormente, con Prompts iré incluyendo más, partiendo de esta base.
- Imagen principal con edificio de pisos de nueva construcción moderno. Que incluya un parque para puedan jugar los niños y piscina comunitaria. En este espacio incluye un botón para agendar una visita. Incluye el texto promoción Villa Nueva desde solo 55.000 €.
- Filas destacadas (icono + texto), prueba social.
- Sección de CTA con tipografía impactante.
- Ritmo de espaciado consistente.
- Incluye versiones claras y oscuras.
Formato y salida: Diseña la maqueta en alta fidelidad y responsive con el Framework Tailwind y React.
Depurando los Tokens y componentes de la interfaz con la IA
En este punto existen diferentes formas de depuración. Se pueden pasar los Tokens directamente, para que los tenga en cuenta, en el hipotético caso de que exista un SD o de los ya generados por la IA puedes pedir que los modifique en base al SD.
Paleta de colores: Genera la paleta de colores siendo el color primario (brand-500 / #ed359d). En este caso la AI, genera el resto de los Tokens en base al primario y la sintaxis semántica con el que lo has nombrado. También va a generar los estados dependiendo del componente al que se apliquen. Por ejemplo si se aplica a un botón, la AI, ya ha decido el Hover o el Disabled.
- Brand 50: #fdf2f9 (Fondo muy sutil, casi blanco).
- Brand 100: #fce7f6 (Fondos de tarjetas o badges suaves).
- Brand 500: #ed359d (Color Principal solicitado).
- Brand 600: #db2777 (Para estados hover y mejor lectura).
- Brand 900: #881355 (Para textos oscuros o bordes fuertes).
Tipografías: Puedes pedir que utilice las tipografías que quieras. Será capaz de encontrarlas en Google Fonts y hacer las llamadas en el bloque Head cuando genere el código. En este caso como le pasé como referencia la url en el Prompt mágico ya ha creado el diseño con las tipografías adecuadas.
Con el resto de Tokens de la interfaz, ocurre lo mismo, toma como referencia la web que le pases o puedes pedir que modifique lo que necesites.
Visual Studio Code. El código es tu mejor amigo
En este momento hay que copiar el código que entrega Gemini y llevarlo a un editor. Particularmente, desde hace mucho tiempo, utilizo Visual Studio Code de Microsoft. Es ligero, versátil y tiene infinidad de Plugins que facilitan la vida en cuanto al desarrollo Front.
El proceso es simple, creas un archivo nuevo con extensión HTML y pegas el código. Lo guardas y posteriormente lo abres en un cualquier navegador. De esta manera podrás visualizar la Landing.
También, dentro de Gemini, puedes activar el modo Canvas que te permitirá visualizar el código y el diseño a la vez a través de un simple Toggle.
Si quieres algo más pulido y depurado, te aconsejo que mantengas una estructura lógica de carpetas y archivos en cuanto al proyecto. Crea una carpeta para el proyecto, separa el CSS, HTML y JS, en archivos independientes, aglutina las imágenes en otra carpeta, haz las llamadas oportunas en el bloque Head, cambia las rutas relativas de las imágenes, etc.
Esto, último, puedes solicitárselo a Gemini cuando le pasas el Prompt mágico como especificación en el formato de salida. Algo parecido a lo siguiente:
Proporciona la respuesta en tres bloques de código Markdown: 1. El array de datos de ejemplo (Mock Data) 2. El componente React (JSX) 3. Las clases Tailwind CSS clave si no son evidentes (o las instrucciones para el setup si se requiere JS).
Como comenté, un poco más arriba, es necesario tener conocimientos básicos de desarrollo web. Si no los tienes no pasa nada. Gemini, genera el código para que la web funcione en un único archivo, pero no es lo más recomendable.
Incluyendo secciones concretas y específicas
Llegados a este punto y habiendo dado cohesión y consistencia a todos los componentes de la interfaz de la Landing. Continuo incluyendo secciones más específicas dentro de la arquitectura de contenidos. En este caso incluyo en carrusel de productos y una sección para captar el lead o email del usuario.
En la construcción del Prompt es importante introducir el contexto tecnológico y los detalles del componente.
Contexto: Incluye una sección en la Landing que sea un carrusel de cards con algunos pisos y estudios. Utiliza Tailwind para todos los estilos y disposición CSS.
Requerimientos: Debe de incluir foto del piso o estudio, precio, ubicación y alguna característica destacable. Para la interactividad del carrusel, puedes simular el uso de una librería de carrusel popular (como Swiper o Splide), pero implementa solo la estructura básica de contenedores para la visualización. El carrusel debe ser responsive: 1 card visible en móvil, 2 cards visibles en tablet, y 4 cards visibles en escritorio.
Formato y salida: Genera el código para incluir en la Landing anterior. Debe de estar dentro de un Section. Evitar código genérico o incompatible con el reto de la Landing.
La convergencia entre el diseño de interfaces de usuario (UI) y la Inteligencia Artificial de Gemini marca una nueva era de eficiencia y creatividad en el desarrollo web. Gemini no es solo una herramienta para generar texto, sino un co-creador de código y un asistente de diseño que acelera drásticamente el flujo de trabajo.
Integrar Gemini en el proceso de diseño de UI y obtención de código permite pasar menos tiempo escribiendo sintaxis y más tiempo innovando y resolviendo problemas de usuario.