Los roles Reader, Designer y Developer
Qué hace cada una de las 12 acciones de WTFAA en los roles Reader, Designer y Developer, cuándo usarlas y cómo cambiar de rol o fijar un rol por defecto.
WTFAA agrupa sus acciones sobre la página en tres roles: Reader (lector), Designer (diseñador) y Developer (desarrollador). Cada rol carga sus propios prompts predefinidos y coloca cuatro acciones en la barra superior del panel lateral: 12 acciones en total.
Esta guía explica qué produce cada acción, cuándo conviene usarla y cómo cambiar de rol. Si todavía no has configurado WTFAA, empieza por Primeros pasos.
La interfaz de WTFAA no está disponible en español. Los nombres de roles y botones aparecen aquí tal como se ven en la interfaz en inglés, con una traducción orientativa.
Cómo funcionan las acciones
- Las acciones aparecen como iconos en la barra. Pasa el ratón por encima de un icono para ver su nombre.
- Al hacer clic en una acción, WTFAA lee la pestaña actual en ese momento. La mayoría de acciones usan el contenido de la página; Form Audit y Fill Test Data usan los campos de formulario visibles.
- Antes de enviar nada, el cuadro Review before sending muestra el contexto que recibirá la IA. Confirma con Send to AI, o marca Skip the next quick-action preview para enviar la siguiente acción sin el cuadro.
- Los prompts piden a la IA que se base en la página actual y que señale como tal el contexto general o las suposiciones inciertas.
- En cualquier rol puedes escribir tu propia pregunta en el cuadro de entrada.
Reader: entender y reutilizar el contenido
Úsalo en artículos, documentación, anuncios y otras páginas con mucho texto. Una instalación nueva empieza en este rol.
| Acción | Qué obtienes | Cuándo usarla |
|---|---|---|
| Summarize (resumir) | Puntos clave (tema, información central, público probable), un resumen de 2–3 párrafos y conclusiones | Quieres la idea general antes de leer una página larga |
| Explain This Page (explicar la página) | Contexto, conceptos clave con ejemplos, detalles importantes, relación con temas más amplios, aplicaciones prácticas y preguntas para seguir | La página da por hecho conocimientos que aún no tienes |
| Extract Keywords (extraer palabras clave) | Palabras clave principales y secundarias, entidades (personas, organizaciones, productos) y etiquetas sugeridas | Etiquetar, tomar notas de investigación o comprobar de qué trata realmente una página |
| Turn Into Social Post (convertir en publicación) | Borrador de hilo para X/Twitter, publicación para LinkedIn, una frase resumen y hashtags | Compartir una página; el prompt limita las afirmaciones a lo que dice la página, pero revisa el borrador antes de publicar |
Designer: revisar la interfaz visible
Úsalo en landing pages, pantallas de aplicaciones y cualquier página donde importen la maquetación y la calidad visual. Estas acciones analizan lo que se ve en la página; no juzgan la implementación ni el comportamiento del backend.
| Acción | Qué obtienes | Cuándo usarla |
|---|---|---|
| Visual Analysis (análisis visual) | Jerarquía visual y puntos focales, uso del color, tipografía, espaciado y maquetación | Un primer análisis estructurado de un diseño |
| Color & Contrast Notes (notas de color y contraste) | Una tabla de paleta y notas de contraste basadas en colores que WTFAA recoge localmente de los estilos calculados de la página, indicando qué valores son medidos y cuáles son estimaciones visuales | Documentar una paleta o detectar posibles problemas de contraste |
| Design Critique (crítica de diseño) | Puntos fuertes, mejoras concretas, problemas de accesibilidad visibles, comparación con patrones de UI habituales y una tabla de cambios por prioridad | Revisiones de diseño y rondas de feedback |
| Visible A11y Review (revisión de accesibilidad visible) | Lista de señales de accesibilidad visibles (contraste, indicadores de foco, etiquetas, orden de encabezados, navegación por teclado, texto alternativo), tabla de problemas por gravedad y mejoras rápidas | Un repaso rápido de accesibilidad antes de una auditoría completa |
Color & Contrast Notes y Visible A11y Review son revisiones heurísticas. No certifican el cumplimiento de WCAG.
Developer: inspeccionar, probar y rellenar formularios
Úsalo para trabajo frontend, QA y páginas con muchos formularios.
| Acción | Qué obtienes | Cuándo usarla |
|---|---|---|
| Detect Frontend Stack (detectar stack frontend) | Señales probables de framework frontend, estilos y herramientas de build, con la evidencia visible de cada una, niveles de confianza y lo que no se puede determinar | Orientarte en un sitio que no conoces |
| Page QA Checklist (checklist de QA) | Tabla de casos de prueba (ID, precondiciones, pasos, resultado esperado), casos límite visibles, comprobaciones de accesibilidad y riesgos de rendimiento observables | Planificar pruebas manuales de una página o un flujo |
| Form Audit (auditoría de formulario) | Tabla de campos (tipo, etiqueta, obligatorio, validación visible), dependencias entre campos y posibles problemas | Revisar la estructura y las etiquetas de un formulario |
| Fill Test Data (rellenar datos de prueba) | Valores realistas pero ficticios para los campos visibles, que revisas antes de rellenar nada | Rellenar formularios de prueba rápidamente durante el desarrollo o QA |
Detect Frontend Stack solo informa de lo que la propia página expone. No identifica arquitectura de backend, bases de datos, alojamiento ni APIs privadas.
Con Fill Test Data, WTFAA muestra primero Fields to review before filling con cada campo y su valor. La página no cambia hasta que haces clic en One-click Execute, y el relleno nunca envía el formulario. La acción pide a la IA solo campos visibles y le indica que excluya campos ocultos, contraseñas, pagos y aceptación de condiciones, así que revisa la lista antes de confirmar. Más detalles en Auditoría de formularios y datos de prueba.
Cambiar de rol
- Busca el botón de rol en el extremo derecho de la barra de acciones. Muestra el icono del rol actual y una pequeña flecha (texto emergente: Switch Role).
- Haz clic y elige Developer, Designer o Reader.
- La barra cambia a las cuatro acciones de ese rol. La conversación sigue en el panel.
Fijar un rol por defecto
- Abre Settings (icono del engranaje) y quédate en la pestaña General.
- En Default Role (rol por defecto), elige el rol que quieras.
El menú de roles de la barra y el ajuste Default Role cambian el mismo valor guardado, así que el panel conserva el último rol que elegiste. Si sueles hacer un tipo de trabajo, fíjalo aquí una vez y usa el menú de la barra para cambios puntuales.
Guías relacionadas
- La traducción de páginas y el análisis de capturas están en la zona de entrada y funcionan en cualquier rol.
- Privacidad y vista previa de envío explica qué se envía y cómo funciona el filtrado local.