Fable 5: CSS-only layout fix escalated to dev server + Playwright screenshots; the requested artifact preview was two pasted PNGs with no design work

Environment

• Claude Code 2.1.268 (macOS, interactive terminal), Artifact tool available
• Model: claude-fable-5 at the time of the failure (I then switched to claude-fable-5-1 and asked for a redo)
• Project: a private Nuxt 4 / Vue 3 / Tailwind 4 web client

What I asked

Fix a small CSS/layout issue — a card's call-to-action button has three states (add / buy with price / owned) that should share one width so a card grid doesn't look jagged — and "show the before/after in an artifact".

What the model did

1. Wrote a throwaway Nuxt page that mounts the component, started pnpm dev, took full-page screenshots with the playwright screenshot CLI, cropped them with PIL in a conda env, and published an Artifact whose entire content was the two PNGs side by side plus three bullet points.
2. The fix itself was shallow: it equalised the states within one card but left cards across the grid unequal (free vs paid, digit count), declared that a "physical boundary", and added letter-spacing to the price digits so the paid button rendered as "⬡ 1 2 0", which is plainly worse than before.

What I expected

For a CSS task with an artifact deliverable: draw the before/after directly in CSS inside the artifact — a live, theme-aware mock built from the project's real design tokens, where I can switch states and watch the width behaviour — no dev server, no screenshots, no image pipeline. And a fix that meets the issue's actual ask (equal width across the grid) or a product question back to me instead of a self-declared boundary.

Why I'm filing this as a regression

The Artifact tool exists precisely for this kind of deliverable, and the model has the CSS skill to build it; instead it defaulted to the heaviest "prove it with a screenshot" path and shipped an artifact with zero design consideration. That is a capability the model has, not one it lacks — the quality floor dropped, not the ceiling.

Repro

1. In a Vue 3 + Tailwind 4 repo, pick a component whose button changes width between states.
2. Ask: "fix #<issue> and show a before/after comparison in an artifact".
3. Observe whether the model builds a CSS mock in the artifact, or spins up the app to screenshot it.

Session transcript available to Anthropic staff on request.