Traducción automática en fase de mejora, sin revisión nativa todavía. Informa de errores en GitHub (se abre en una pestaña nueva).
Demo

Rehacer una card con Impeccable y Playwright: demo

Ejemplo de diseño con Claude Code: retomamos una card real del Codex y la rehacemos con Impeccable y Playwright MCP, con capturas antes/después.

  • Caso de uso
  • Herramientas
Publicado el

El punto de partida

El sitio The Claude Codex muestra cards de artículos en varios listados. Una de esas cards cumplía sin más: un título, una descripción, una fecha, un fondo neutro. Funcional, accesible, pero sin relieve. El tipo de componente que se mantiene por defecto por falta de tiempo para cuidarlo.

Es el candidato ideal para la demo: un componente real, ya en producción, que queremos hacer pasar de "correcto" a "cuidado" sin romper su comportamiento ni su accesibilidad.

Antes

Este es el estado inicial de la card, capturado antes de cualquier modificación.

La crítica, tal como la formuló Claude tras leer las dos capturas:

  • título y descripción demasiado próximos en tamaño, poca jerarquía
  • fecha perdida, sin tratamiento visual
  • sin retroalimentación al pasar el ratón, la card no señala que es clicable
  • en mobile, el padding interno se reduce y el conjunto se aprieta

Durante

El brief enviado a Claude, con Impeccable instalado:

Rehaz esta card de listado de artículo. Mantén la estructura (título, descripción,
fecha, enlace) y la accesibilidad. Objetivo: jerarquía tipográfica clara, un estado
de hover que señale el clic, un tratamiento de la fecha más discreto pero legible.
Estilo sobrio, coherente con una documentación técnica. No cambies las props del
componente.

Primer paso, encuadrar antes de programar:

/impeccable shape "card de listado de artículo, doc técnica, hover marcado"

Una vez validado el shape, la generación:

/impeccable craft

Después, el bucle de validación con Playwright MCP: browser_navigate en la preview, browser_resize en mobile y desktop, browser_take_screenshot en cada paso. Claude lee, critica, y relanzamos /polish sobre los puntos débiles. Tres iteraciones en total para ajustar el hover y el espaciado mobile.

Después

Estado final de la card, tras las iteraciones.

Lo que cambió, en concreto:

  • jerarquía tipográfica en tres niveles entre título, descripción y fecha
  • estado de hover con una elevación ligera y un desplazamiento sutil, que señala el clic
  • fecha pasada a cuerpo pequeño, color secundario, alineada a la derecha
  • padding revisado para respirar tanto en mobile como en desktop
  • contraste verificado, cero violaciones axe-core en el componente

El diff de código

El extracto de abajo ilustra el tipo de cambio (antes / después). El diff real del componente es más amplio, pero la idea es esa.

// Antes
<article className="rounded-lg border p-4">
  <h3 className="text-lg font-medium">{title}</h3>
  <p className="text-sm text-gray-600">{description}</p>
  <span className="text-sm text-gray-600">{date}</span>
</article>


// Después
<article className="group rounded-xl border border-[color:var(--border-subtle)] p-6 transition-all hover:-translate-y-0.5 hover:shadow-md">
  <h3 className="text-xl font-semibold tracking-tight">{title}</h3>
  <p className="mt-2 text-sm leading-relaxed text-[color:var(--fg-secondary)]">{description}</p>
  <time className="mt-4 block text-xs font-medium text-[color:var(--fg-muted)]">{date}</time>
</article>

Veredicto

Orden de magnitud vivido, no un benchmark: tres iteraciones, unos 25 minutos contando la redacción del brief y las idas y vueltas con Playwright. La card final no es una obra maestra, pero está claramente más cuidada que la original, y su comportamiento no ha cambiado.

Lo que la demo muestra sobre todo: el valor no viene del skill solo, ni de Playwright solo. Viene del bucle. Impeccable propone una dirección, Playwright muestra el render real, Claude corrige, se repite. Sin el espejo de Playwright, Claude habría entregado una primera versión y se habría quedado ahí, sin ver el apretujamiento en mobile.

Próximos pasos