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
- Componentes que se repiten
La pantalla no es un bloque: es un armazón de piezas reutilizables.
- Estados: la misma pieza, distinto momento
Una tabla puede estar cargando, vacía, con datos o con error. Cada situación es un estado.
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
Describir en vocabulario de interfaz
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:
Marca la línea o las líneas con error y pulsa Comprobar.
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.
Si no puedes nombrar las piezas de una pantalla, difícilmente podrás pedirle a la IA que las construya.
Tu texto se guarda sólo en este dispositivo.
Comentarios
Inicia sesión para comentar.
Todavía no hay comentarios. Sé la primera persona en opinar.