Dado que el diseño de IA y los generadores de código participan activamente en el proceso de diseño, es fundamental comprender cómo aprovechar al máximo estas herramientas. Si has probado Cursor, Bolt, Lovable o v0, sabes que la calidad del resultado depende de la entrada.
Aquí tienes un formato de indicaciones estructurado que utilizo para guiar la IA hacia interfaces de usuario prácticas, usables y con un diseño atractivo. Consta de 5 partes:
- Contexto (lo que quieres construir)
- Descripción (cosas que la IA debe considerar; prioridad de diseño)
- Plataforma (su plataforma de destino)
- Estilo visual (atributos visuales que desea ver en el diseño generado por IA)
- Componentes de la interfaz de usuario a incluir (lista de componentes específicos que desea ver en una página/pantalla)
Consejo rápido: si quieres ver cómo se usa este formato de mensaje para generar una IU real, consulta este tutorial:
1. Contexto
Comienza con una frase clara que defina lo que estás diseñando. Esto ayuda a la IA a comprender el propósito y el alcance de la página/pantalla antes de pasar a las imágenes.
✅ Haga esto al definir el contexto:
- “Diseñe una pantalla de inicio elegante e informativa para una aplicación de inversión moderna”.
- “Crea una pantalla de pago minimalista para una aplicación de entrega de comida”.
- “Genere una interfaz de usuario de panel móvil para realizar un seguimiento del progreso físico”.
🚫 Evite esto al definir el contexto:
- “Crea una pantalla de interfaz de usuario atractiva para una aplicación de atención médica”.
- “Crea una página de inicio genial para los juguetes de los niños”.
2. Descripción
La descripción debe ser breve y concisa, explicando los aspectos más importantes de este diseño. Explique lo más importante: los objetivos del usuario, las prioridades de contenido y los detalles de la interacción. Esto guiará a la IA en la dirección correcta para que se centre en la función, no solo en la estética.
✅ Haz esto al escribir la descripción:
- “Los usuarios deberían ver al instante las estadísticas clave de la cartera, los cambios recientes y ganar confianza gracias a la claridad y la jerarquía de los datos”.
- Resalte los cambios y las perspectivas diarias manteniendo acciones como "Ver portafolio" fácilmente accesibles.
Consejo rápido: Al explicar qué debe tener en cuenta la IA al diseñar una pantalla o página, intenta centrarte en los resultados y no en los resultados.
«Ayuda a los usuarios a mantenerse informados sobre las tendencias actuales del mercado y ofrece acciones rápidas para que puedan actuar con rapidez según la información que ven».
3. Plataforma
Especifique el dispositivo y el sistema operativo para ayudar a alinearse con las pautas y restricciones de la plataforma, como el tamaño de la pantalla, el comportamiento del diseño y los componentes nativos disponibles en esa plataforma.
✅ Haz esto:
- iOS 17/iPhone 14 (390 x 844), con directrices de interfaz humana
- Android Material 3 / Pixel 6 Pro (360 x 800)
- Aplicación web en resolución de escritorio (1440x1024), diseño adaptable.
🚫Evita esto:
- “Móvil ” (demasiado vago)
4. Estilo visual
Define el tono y la sensación. ¿Cómo quieres que los usuarios perciban tu diseño? ¿Debe ser relajante? ¿Corporativo? ¿Joven? Añade las necesidades de accesibilidad (como el contraste o la legibilidad) y la dirección del estilo (por ejemplo, modular, basado en tarjetas, con degradados sutiles).
✅ Haz esto al describir el estilo visual:
- Profesional, tranquilo y confiable. Usa azul marino, verde bosque y grises suaves.
- Diseño de tarjeta modular con sombras y degradados sutiles.
- “La tipografía debe ser elegante y legible en tamaños pequeños”.
🚫 Evite esto al describir el estilo visual:
- “Hazlo hermoso” (la belleza es subjetiva; describe los atributos)
Consejo rápido: Proporcionar orientación sobre contraste y accesibilidad para la IA:
"Asegurar una relación de contraste de 4,5:1 para el texto. Compatible con los modos oscuro y claro".
5. Componentes de la interfaz de usuario a incluir
Desglosa lo que debe aparecer en pantalla. Piensa en la estructura (navegación superior, cuerpo del texto, pie de página) y la narrativa (qué ve el usuario primero, qué acción debe realizar). Complementa la descripción con un texto provisional y ejemplos para que la IA muestre los detalles correctamente.
✅ Haga esto al describir los componentes:
- Empieza de arriba a abajo. Piensa en qué componentes añadir al encabezado, cuerpo y pie de página.
- Al describir el componente UI, mencione cosas específicas como atributos visuales o comportamiento funcional que debería tener.
- Proporcione ejemplos de contenido e interacción, como contenido para contenedores (es decir, contenido para tarjetas en su interfaz de usuario), texto de marcador de posición para campos de entrada de formulario, etc. Esto hará que su diseño sea más relevante para la tarea que está resolviendo.
Fuente: traducido al español y tomado de Medium.com en inglés -
https://uxplanet.org/how-to-write-better-prompts-for-ai-design-code-generators-0e0b915e25ce
Escrito por:
Nick Babich