Demo

Redoing a card with Impeccable and Playwright: the full demo

Claude Code design refactor example: we take a real Codex card and rebuild it with Impeccable and Playwright MCP, with before/after captures.

  • Use case
  • Tooling
Published

The starting point

The Claude Codex site shows article cards across several listings. One of those cards did the job and no more: a title, a description, a date, a neutral background. Functional, accessible, but flat. The kind of component you keep by default for lack of time to polish it.

It's the ideal candidate for the demo: a real component, already in production, that we want to move from "fine" to "polished" without breaking its behavior or its accessibility.

Before

Here is the initial state of the card, captured before any change.

The critique, as Claude phrased it after reading both screenshots:

  • title and description too close in size, little hierarchy
  • date drowned out, no visual treatment
  • no hover feedback, the card doesn't signal it's clickable
  • on mobile, the inner padding shrinks and the whole thing compresses

During

The brief sent to Claude, with Impeccable installed:

Redo this article-listing card. Keep the structure (title, description, date, link)
and the accessibility. Goal: clean type hierarchy, a hover state that signals the
click, a more discreet but legible date treatment. Sober style, consistent with
technical docs. Don't change the component props.

First step, frame before coding:

/impeccable shape "article-listing card, technical docs, marked hover"

Once the shape is approved, generation:

/impeccable craft

Then the validation loop with Playwright MCP: browser_navigate to the preview, browser_resize to mobile then desktop, browser_take_screenshot each time. Claude reads, critiques, and we re-run /polish on the weak points. Three iterations in total to settle the hover and the mobile spacing.

After

Final state of the card, after the iterations.

What changed, concretely:

  • type hierarchy across three levels between title, description and date
  • hover state with a light elevation and a subtle shift, signaling the click
  • date moved to a small size, secondary color, right-aligned
  • padding reworked to breathe on mobile and desktop alike
  • contrast verified, zero axe-core violation on the component

The code diff

The snippet below illustrates the kind of change (before / after). The real component diff is larger, but the spirit is there.

// Before
<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>


// After
<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>

Verdict

Order of magnitude, not a benchmark: three iterations, roughly 25 minutes counting the brief and the Playwright round-trips. The final card is no masterpiece, but it's clearly more polished than the original, and its behavior didn't move.

What the demo shows above all: the value doesn't come from the skill alone, nor from Playwright alone. It comes from the loop. Impeccable proposes a direction, Playwright shows the real render, Claude fixes, repeat. Without the Playwright mirror, Claude would have shipped a first version and stopped there, never seeing the mobile compression.

Next steps