Prompts para revisar el diseño de tu app

Actúa como un diseñador de producto revisando una app hecha con AI.

Tu trabajo es decirme por qué mi app se ve genérica y qué la delata.

Esto es lo que tengo:
[PEGA AQUÍ el código de tus pantallas principales, o capturas de pantalla si tu
AI las puede ver]

Revisa:
1. Colores: cuántos distintos uso, si hay un criterio o si cada pantalla usa los
   suyos
2. Tipografía: cuántos tamaños y grosores distintos, y si hay una escala clara
3. Espaciado: si los márgenes y separaciones siguen un patrón o son valores
   sueltos
4. Jerarquía: en cada pantalla, si se entiende en un segundo qué es lo más
   importante
5. Texto: párrafos de relleno, títulos genéricos, explicaciones que nadie lee
6. Estados: qué se ve mientras carga, cuando está vacío y cuando hay error
7. Detalles que gritan "esto lo hizo una AI"

Responde con este formato:
- Primera impresión: qué transmite mi app hoy, en dos frases honestas
- Los 5 problemas que más la delatan, ordenados por impacto visual
- Para cada uno: qué veo hoy, qué debería ver y por qué
- Qué arreglar primero

No cambies el código todavía, solo dame el diagnóstico.

Actúa como un desarrollador frontend especializado en experiencia de usuario.

Tu trabajo es reemplazar las pantallas en blanco y los círculos de carga de mi
app por carga de esqueleto.

Esto es lo que tengo:
[PEGA AQUÍ el código de la pantalla y de cómo carga sus datos hoy]

Haz esto:
1. Muéstrame dónde está hoy el estado de carga y qué ve el usuario
2. Crea un esqueleto que tenga la misma forma y el mismo tamaño que el contenido
   real, para que nada salte cuando termine de cargar
3. Usa una animación suave, no un parpadeo agresivo
4. Respeta la preferencia de reducir movimiento del sistema
5. Dime qué hacer si la carga tarda mucho o falla, para que el usuario no se
   quede mirando el esqueleto para siempre
6. Hazlo reutilizable para poder usarlo en otras pantallas

Muéstrame el código final completo y dime cómo probarlo simulando internet lento.

Actúa como un diseñador de producto arreglando una pantalla confusa.

Tu trabajo es que se entienda en un segundo qué es lo importante de esta
pantalla.

Esto es lo que tengo:
[PEGA AQUÍ el código de la pantalla y dime cuál es la acción que quiero que el
usuario haga aquí]

Haz esto:
1. Dime qué ve primero el ojo hoy y si coincide con lo que yo quiero
2. Marca qué texto sobra: párrafos explicativos, subtítulos que repiten el
   título, instrucciones obvias
3. Reescribe los textos que se quedan, más cortos y directos
4. Define un solo elemento principal y baja el peso visual de todo lo demás
5. Ajusta tamaños, grosores y espacios para que se note esa diferencia
6. Agrupa lo que va junto y separa lo que no

Muéstrame el antes y el después, y explícame en una línea por qué cada cambio.

Actúa como un diseñador de sistemas de diseño.

Tu trabajo es ordenar los colores, tipografías y espacios de mi app en tokens con
nombre, para dejar de improvisar en cada pantalla.

Esto es lo que tengo:
[PEGA AQUÍ tu archivo de estilos o configuración de Tailwind, y el código de dos
o tres pantallas]

Haz esto:
1. Lista todos los colores, tamaños de letra y espaciados que uso hoy, con
   cuántas veces aparece cada uno
2. Propón un set reducido de tokens con nombres por función, no por color:
   fondo, superficie, texto principal, texto secundario, borde, acento,
   éxito, error
3. Define una escala de tipografía y una de espaciado, con pocos pasos
4. Dame el código de esos tokens para mi stack, listo para pegar
5. Muéstrame cómo quedaría una pantalla usando solo tokens
6. Dime qué valores sueltos hay que reemplazar y dónde

Si mi app ya tiene una identidad de marca, respétala. Si no, propón una paleta
sobria y explícame por qué esos colores.

Actúa como un diseñador revisando la tipografía y el ritmo visual de una app.

Tu trabajo es que mi app se lea bien y se sienta ordenada.

Esto es lo que tengo:
[PEGA AQUÍ el código de tus pantallas principales y tu configuración de estilos]

Revisa:
1. Cuántos tamaños de letra distintos uso y cuáles sobran
2. Si el texto de párrafo tiene un tamaño cómodo de leer en celular
3. La altura de línea y el largo de línea: si las líneas son demasiado largas
4. Si los títulos se distinguen del texto normal por tamaño y peso, no solo por
   color
5. Si el espaciado sigue una escala o hay valores sueltos por todos lados
6. Si hay aire suficiente entre secciones o todo está apretado

Dame la escala corregida y muéstrame una pantalla aplicándola, antes y después.

Actúa como un especialista en accesibilidad revisando una interfaz.

Tu trabajo es revisar el contraste y el uso del color en mi app.

Esto es lo que tengo:
[PEGA AQUÍ tus colores y el código de tus pantallas, incluyendo modo oscuro si
lo tienes]

Revisa:
1. Cada combinación de texto y fondo, con su ratio de contraste calculado
2. Cuáles no llegan a 4.5 a 1 para texto normal, o a 3 a 1 para texto grande
3. El contraste de los elementos de interfaz: bordes de campos, íconos, botones
4. Si comunico algo solo con color, por ejemplo error solo en rojo, sin texto ni
   ícono
5. Si el modo oscuro tiene los mismos problemas
6. Texto sobre imágenes o degradados, que suele ser el peor caso

Responde con una tabla: elemento, colores actuales, ratio, cumple o no, y el
color corregido más cercano a mi paleta.

Actúa como un especialista en accesibilidad revisando una app.

Tu trabajo es revisar si mi app se puede usar con el dedo, con teclado y con
lector de pantalla.

Esto es lo que tengo:
[PEGA AQUÍ el código de tus pantallas principales]

Revisa:
1. Si los botones e íconos tocables llegan a 44 por 44 puntos en iOS o 48 por 48
   en Android
2. Si los elementos tocables están demasiado juntos
3. Si los botones de solo ícono tienen una etiqueta para lectores de pantalla
4. Si las imágenes tienen texto alternativo, y si las decorativas están marcadas
   como decorativas
5. Si se puede navegar con teclado y si se ve claramente dónde está el foco
6. Si los formularios tienen etiquetas de verdad, no solo texto de ejemplo
   dentro del campo
7. Si los mensajes de error se anuncian y se entienden

Dame una lista de problemas con el código corregido de cada uno.

Actúa como un diseñador de producto revisando los estados de una app.

Tu trabajo es diseñar lo que ve el usuario cuando no hay nada que mostrar o algo
sale mal. Es lo que la AI casi siempre olvida.

Esto es lo que tengo:
[PEGA AQUÍ el código de tus pantallas de lista, formularios y detalle]

Para cada pantalla, diseña:
1. Estado vacío la primera vez: qué ve un usuario nuevo que todavía no tiene
   datos, con una acción clara para empezar
2. Estado vacío por búsqueda o filtro sin resultados, que es distinto al anterior
3. Estado de error, con lenguaje humano y un botón de reintentar, sin mensajes
   técnicos
4. Estado sin conexión
5. Estado de acción en proceso: botón deshabilitado y con señal de que está
   trabajando

Escribe los textos exactos en español, cortos y sin culpar al usuario. Muéstrame
el código de cada estado.

Actúa como un diseñador de producto con ojo crítico.

Tu trabajo es encontrar los detalles pequeños que hacen que mi app se vea
generada, aunque funcione bien.

Esto es lo que tengo:
[PEGA AQUÍ el código de tus pantallas y todos los textos que se ven]

Busca:
1. Textos genéricos: "Bienvenido a tu dashboard", "Gestiona todo en un solo
   lugar", "Potencia tu productividad"
2. Emojis usados como íconos dentro de la interfaz
3. Íconos que no tienen que ver con lo que hacen, o de estilos distintos
   mezclados
4. Degradados y sombras exageradas puestas sin motivo
5. Tarjetas dentro de tarjetas dentro de tarjetas
6. Bordes redondeados distintos en cada componente
7. Texto de relleno o datos de ejemplo olvidados
8. Botones que dicen "Enviar" o "Continuar" en vez de decir qué hacen

Para cada hallazgo dime qué cambiar y escríbeme la versión corregida, con un
lenguaje que suene a una persona hablando de su producto.

Actúa como un diseñador de producto haciendo la revisión final antes de que esta
app se le enseñe a usuarios reales.

Esto es lo que tengo:
[PEGA AQUÍ el código de una pantalla, o una captura si tu AI la puede ver]

Evalúa esta pantalla:
1. En un segundo, ¿se entiende qué es y qué puedo hacer aquí?
2. ¿Hay una sola acción principal clara?
3. ¿Los colores, tamaños y espacios salen de un sistema o son valores sueltos?
4. ¿Qué pasa mientras carga, si está vacía y si falla?
5. ¿Funciona igual de bien en un celular pequeño?
6. ¿Qué texto sobra?

Responde con este formato:
- Nota del 1 al 10 y qué la baja
- Los 3 cambios que más mejorarían esta pantalla, en orden
- El código de esos 3 cambios

Sé duro. Prefiero leerlo de ti que de mis usuarios.