Tutoriales
Claude Opus 5.5: repara una tabla comparativa de productos en móvil
Pide a Claude Opus 5.5 que preserve la tarea de comparar al reparar una tabla móvil, en lugar de reducirla sin más.
Pide a Claude Opus 5.5 que preserve la tarea de comparar al reparar una tabla móvil, en lugar de reducirla sin más. El comprador necesita relacionar cada valor con su producto y atributo. Ocultar el modelo o convertir todos los datos ausentes en «No» cambia el significado, aunque el diseño parezca compacto.
Es una revisión propuesta con productos ficticios. Aporta datos reales, HTML/CSS actual, ancho objetivo y pregunta del comprador. Es distinta de extraer especificaciones: primero aprueba los hechos y luego resuelve cómo compararlos en una pantalla pequeña.
Elige el patrón según la tarea
Una discusión sobre tablas móviles recoge el equilibrio entre desplazamiento horizontal, menos columnas y tarjetas. Son opciones de diseño, no pruebas de mejores ventas. Define qué dos productos necesita comparar el comprador y qué atributos deciden su elección.
| Tarea | Diseño candidato | Comprobación |
|---|---|---|
| Comparar un atributo entre productos | Tabla semántica desplazable | Filas y modelos siguen identificados |
| Comparar dos productos elegidos | Selector de dos productos | Cambiar selección no altera los atributos |
| Conocer un producto cada vez | Tarjetas con etiquetas | Cada valor conserva su atributo |
| Encontrar diferencias | Filtro opcional | Lo desconocido no se trata como igual |
Empieza por la solución más sencilla que funcione. Un selector añade estado y navegación con teclado; las tarjetas pueden dificultar la comparación horizontal. Evita dos fuentes de hechos independientes para escritorio y móvil: acabarán divergiendo.
Usa un ejemplo pequeño que revele errores
Supón lámparas ficticias A y B de 410 g y 560 g. A carga por USB-C; la fuente de B no especifica la carga. Ambas tienen tres niveles de brillo. La tabla debe mantener visible la diferencia de peso y mostrar «No especificado» para B, sin concluir que carece de USB-C.
Al mostrar solo diferencias, la fila común de brillo puede ocultarse, pero la de carga incierta permanece. Añade un tercer producto con nombre localizado largo y una nota. Así detectarás desbordamientos y asociaciones que dos nombres ingleses cortos no revelan. El ejemplo define el comportamiento esperado; no es un resultado medido de Opus.
Para tablas sencillas con encabezados de fila y columna, W3C explica las relaciones mediante celdas de encabezado y `scope`, además de un caption que identifica la tabla. Conserva esas relaciones al modificar el aspecto. Una captura bonita no muestra lo que anuncia un lector de pantalla.
Una instrucción con criterios concretos
La guía oficial de Opus ayuda a especificar el parche y sus comprobaciones. Facilita la fuente aprobada y excluye los cambios de hechos de esta tarea visual.
Repara esta comparación a 390 píxeles CSS de ancho.
Tarea: comparar peso y carga de dos lámparas seleccionadas.
Usa una fuente aprobada para escritorio y móvil; no inventes valores ausentes.
Ejemplo: A pesa 410 g y tiene USB-C; B pesa 560 g y su carga no está especificada. Ambas tienen tres niveles de brillo.
Propón el diseño adecuado más sencillo y después un parche mínimo de HTML/CSS.
Mantén nombres y atributos asociados a cada valor, el caption y las relaciones semánticas de encabezados.
Si hay desplazamiento horizontal, limítalo a la tabla y ofrece una señal visible y acceso con teclado.
Si hay selector, etiquétalo y conserva el foco al cambiar la selección.
Prueba nombres localizados largos, texto ampliado, teclado y valores desconocidos con el filtro de diferencias.
Separa las pruebas ejecutadas de las pendientes; no declares accesibilidad solo por una captura.Comprueba más allá de la primera pantalla
Recorre todas las columnas u opciones al ancho previsto. Verifica que las etiquetas fijas no tapen datos y que unidades largas y notas sigan vinculadas al atributo correcto. Amplía el texto y comprueba que toda la página no desborde horizontalmente. Una región de tabla desplazable puede ser deliberada; una página completa que se desliza lateralmente suele ser un problema.
Usa teclado y el lector de pantalla objetivo para comprobar encabezados y controles. Si hay un selector, revisa la alternativa sin JavaScript. Registra lo realmente probado. Elimina interacciones cuyo mantenimiento no compense para una tabla pequeña.
Mantén coherentes las imágenes
Crea imágenes de producto con ángulos y escalas comparables en Panelly Studio. Mantén los hechos como texto real de la página, no solo dentro de una imagen. No se afirma que Panelly genere o certifique la implementación. Verifica los datos con el flujo de especificaciones PDF y consulta las revisiones de landing page para la estructura general.
¿Puedo eliminar todas las filas idénticas?
Cuando tenga sentido, ofrece una opción explícita y reversible. Las prestaciones comunes también pueden decidir la compra, y un dato ausente no demuestra igualdad. Explica cómo recuperar la comparación completa.
