Hablar el idioma de la pantalla
La IA construye mejor lo que entiende. Cuando describes una interfaz con palabras vagas («pon ahí algo para ver los clientes»), deja demasiado espacio para improvisar. Cuando usas su vocabulario —componente, estado, navegación— le estás dando instrucciones exactas sin escribir código.
[Una pantalla, en piezas]
Esta actividad interactiva ('Explicacion visual') requiere el motor completo de Lumbre. El contenido estatico se muestra arriba; para la experiencia interactiva, visita la version online de este objeto.
Los términos que debes saber usar
| Término | Qué es | Cómo lo pides |
|---|---|---|
| Componente | Una pieza de interfaz reutilizable | «crea un componente TarjetaCliente» |
| Estado | En qué situación está un dato o la UI | «muestra el estado de carga mientras llegan los datos» |
| Navegación | Cómo se mueve el usuario entre pantallas | «menú con Inicio, Clientes y Ajustes» |
| Formulario | Pieza para capturar datos del usuario | «formulario con nombre, correo y botón guardar» |
| Lista / tabla | Muestra repetida de muchos registros | «tabla de contactos con columnas nombre y teléfono» |
Prompt de ejemplo
Necesito una pantalla de "Clientes" compuesta por:\n- una barra de navegacion arriba con Inicio y Clientes\n- un componente TablaClientes con columnas: nombre, telefono, ciudad\n- un estado de carga (esqueleto) mientras llegan los datos\n- un estado vacio con el mensaje "aun no hay clientes"\n- un boton que abre el formulario de nuevo cliente\n\nNo escribas la logica de datos aun; solo la interfaz con sus estados.Prueba
Le pides la lista de clientes y la IA entrega solo una tabla, pero al entrar no hay datos y aparece una pantalla en blanco sin aviso. ¿Qué pieza de interfaz olvidaste especificar?
Un «componente» y una «pantalla» son exactamente lo mismo.
Detecta la descripción vaga
Un alumno pide su primera pantalla. Señala la frase que está escrita en lenguaje vago y obligará a la IA a improvisar:
- Una barra superior con dos botones: Inicio y Clientes.
- Una tabla con columnas nombre, teléfono y ciudad.
- Pon ahí algo para que se vean los clientes y demás, tú ya me entiendes.
- Un estado de carga mientras llegan los datos.
Identifica la linea con error.
Elige una pantalla de una app que uses a diario y desglósala en componentes y estados, con sus nombres. Será tu primer vocabulario de dirección.