Tutoriales
Claude Opus 5.5: reparar objetivos táctiles pequeños en fichas de producto
Pide a Claude Opus 5.5 que inspeccione el área que recibe el toque, no solo el tamaño del icono.
Pide a Claude Opus 5.5 que inspeccione el área que recibe el toque, no solo el tamaño del icono. Un símbolo grande puede seguir dentro de un botón pequeño; ampliar una zona invisible puede invadir la acción vecina. El resultado útil es una reparación medible y una prueba de interacción.
Mide el control que recibe el toque
Proporciona la página renderizada, su CSS, las dimensiones de la ventana y los controles de cantidad, variantes, galería y cierre. Registra los rectángulos en píxeles CSS. Una captura explica la distribución, pero no identifica qué elemento recibe el evento del puntero.
Una discusión de UX de 2012 distingue los controles grandes de las acciones opuestas demasiado próximas. Es una conversación histórica, no una medición de la tienda actual. La explicación vigente de W3C describe un mínimo de 24 × 24 píxeles CSS con excepciones definidas, incluida una prueba de separación para objetivos pequeños. No impone el mismo tamaño a todos los enlaces dentro de una frase.
| Hallazgo | Reparación posible | Comprobación posterior |
|---|---|---|
| Icono pequeño dentro de botón pequeño | Ampliar la caja del botón | Los bordes activan la acción correcta |
| Separación visual con áreas superpuestas | Eliminar solapamiento y usar espacio de diseño | El hueco no activa los vecinos |
| Botón ancho pero bajo | Añadir espacio vertical | Ambas dimensiones cumplen el objetivo |
| Muestra identificada solo por color | Añadir un nombre accesible | Teclado y etiquetas siguen siendo útiles |
Calcula una fila de cantidad
Supón dos botones cuadrados de 20 píxeles separados por 2. Sus centros están a 22 píxeles. Dos círculos de 24 píxeles de diámetro centrados en ellos se solapan, por lo que esta disposición concreta no cumple la excepción de separación. Son cálculos de un diseño hipotético, no una auditoría de una web real.
Para este ejemplo elegimos botones cuadrados de 44 × 44 y un hueco de 8 como decisión de diseño más espaciosa. Dos botones y un hueco ocupan 96 píxeles antes de añadir la cantidad. Si el número ocupa 40 y hay dos huecos de 8, la fila menos/número/más necesita 144 píxeles. Reserva el ancho completo antes de volver a encoger los botones.
.quantity-button {
min-inline-size: 44px;
min-block-size: 44px;
display: inline-grid;
place-items: center;
}
.quantity-controls {
display: inline-flex;
align-items: center;
gap: 8px;
}Este CSS es un punto de partida, no una certificación. Bordes, formas, transformaciones y elementos superpuestos afectan al objetivo real. El icono puede seguir pequeño para conservar el equilibrio visual. Evita pseudoelementos solapados que vuelvan ambiguas las acciones vecinas.
Prompt completo para la reparación
Revisa los objetivos táctiles del componente de producto a 390 y 1280 píxeles CSS de ancho. Entradas: página renderizada, CSS, DOM y controles de cantidad, variantes y galería. Si no tienes navegador, separa estimaciones de mediciones.
Enumera nombre accesible, área real, separación y solapamiento observado de cada control. Distingue el mínimo W3C de 24 × 24 y sus excepciones de nuestro objetivo de botones cuadrados de 44 × 44. No declares conforme toda la web a partir de esta revisión.
Propón el parche de diseño mínimo. Conserva precios, variante, límites de cantidad, indicadores de foco y comportamiento adaptable. Separa tamaño visual del icono y tamaño del botón. No crees objetivos invisibles superpuestos.
Prueba centro, bordes, huecos entre vecinos, foco de teclado, cambios repetidos y estado desactivado en la cantidad mínima. Registra lo ejecutado y lo pendiente. Entrega mediciones, parche y resultados de interacción anteriores y posteriores.Es un uso propuesto de Opus; la guía oficial sirve para estructurar una tarea acotada y sus criterios. No es una prueba del modelo. Realiza interacciones después del parche: un rectángulo DOM no detecta por sí solo una capa transparente que intercepta eventos.
Preguntas antes de publicar
**¿Basta un icono de 44 píxeles?** Solo si el control real tiene espacio y recibe el toque. Inspecciona ambos.
**¿Todos necesitan el mismo hueco?** No. Los 8 píxeles son una elección del ejemplo, no un estándar universal. Comprueba el criterio aplicable y las acciones próximas.
**¿Y el cierre de un diálogo?** El tamaño y la restauración del foco resuelven problemas diferentes; valida ambos.
Lleva una imagen aprobada a Panelly Studio para crear la campaña y revisa aparte los controles reales de la página de destino. Un CTA dibujado en una imagen no se convierte automáticamente en botón interactivo. No se afirma una integración de Panelly con Opus.
