QWE AI Academy Why “Claude, change the Add to Cart button to blue” is everywhere
If your feed is full of people yelling Claude, change the “Add to Cart” button to blue, you’re looking at Opusfived – a tiny browser game that spiked on Hacker News (~1200 points and 450+ comments within days, per the thread). One clear ask. Then shared styles, multi-agent theater, a mystery control, a usage nudge.
Opus 5 shipped 24 July 2026 at $5 / $25 per MTok input/output – same sticker as Opus 4.8 on Anthropic’s announcement. Teams already toss it production CSS. The demo’s failure modes still show up there.
Not a meme recap. Two-minute satire, then a lab: patterns you paste into claude.ai or Claude Code so only one button moves.
Play Opusfived in under two minutes
Open opusfived.dev. Let’s go. Goal is blunt: Add to Cart → blue. Everything else stays put.
- Pick a canned prompt (simple / polite / “don’t touch other buttons”).
- Send. Watch the UI and the rationalization.
- Cancel goes blue? Follow up that half the site is blue.
- Push until you hit a multi-agent report, a gradient regression, a bonus Terms of Use control, or a fake usage-limit nudge.
Watch out: you’re not on live Opus 5. Gigazine’s write-up quotes creator Milos Novovic – hand-built from sessions he actually had. Museum of bad agent habits. Not a benchmark.
Funny how a fake chat can still make your shoulders rise. That’s the tell you’re about to type the same vague English into a real repo.
Hands-on: only that button, for real
Same task. Real repo or Artifact. Vague English invites the shared-token “improvement.” Constraints don’t.
1. Name the exact target
Skip “the add to cart button.” Paste selector, component name, or a 5-line snippet.
Task: Change ONLY .product-form__submit (label: "Add to Cart") background to #2563eb and text to #fff.
Do NOT edit:
- CSS variables used by other buttons
- .btn / .button base classes
- Cancel, secondary, or link styles
- hover/focus/disabled shared tokens unless this selector already has its own
Minimal diff. No new elements. No refactors. No migrations. No tests for this one-line visual change.
Show the before/after CSS only.2. Lock scope in project instructions
HN commenters on the Opusfived thread keep PROJECT.md / AGENTS.md / CLAUDE.md lines that say greenfield, single-user, zero production traffic – so the model stops inventing backwards-compat fields. One extra block for UI:
## UI edits
Prefer the smallest selector-specific override.
Never promote a one-off color into a shared design token unless I explicitly ask.
If a change would affect more than one control, stop and ask.3. Force plan-then-patch
The catch is authorization. Before any edit: “List every selector that currently sets this button’s background. Propose a one-rule override. Wait for yes.”
No tour. No 23-agent investigation vibe. It can’t “verify” a dozen systems you never opened.
Pro tip: Reaches for a design token? “Override the instance, not the token. Token stays for Cancel and the rest of the system.”
4. Dial effort down for paint jobs
Opus 5 effort levels (as of the July 2026 launch materials): low / medium / high / xhigh. Model id claude-opus-5, ~1M context. Button recolor = low. High/xhigh is where pedantic multi-check loops show up in community reports. Save that budget for architecture.
Taste beyond one CTA? Anthropic’s frontend aesthetics cookbook pushes concrete dimensions – color, type, motion – not “make it nicer.” Same move: fewer degrees of freedom.
Common pitfalls (from the viral demo)
| What you see | What actually happened | Fix |
|---|---|---|
| Cancel turns blue too | Shared class or CSS variable updated | Instance selector + “do not touch shared tokens” |
| Proud speech about hover/focus/disabled | Model filled “complete” states you never listed | “Default state only unless I list pseudo-classes” |
| Long agent report, nothing fixed | Verification theater | Cap tools; require plan approval; lower effort |
| Gradient or old color returns | Competing rules / theme layer | Ask for the winning cascade path first |
| Extra Terms / legal control appears | Helpful scope creep | “No new DOM. No copy changes.” |
| Backcompat helpers on a day-old app | Enterprise prior in the weights | PROJECT.md: zero users, no migrations |
Styles thrashing in chat? Move the file into Claude Code – or paste the full component. Cascade visible beats a floating hex request.
What “good” looks like
Boring on purpose. One rule. One selector. Diff under ~10 lines. Cancel still default. Hover only if you asked. Claude Code: focused patch, not a new tokens file. Artifacts: CTA only in the preview.
Still drifting? Hard reset. New chat. Paste the failing CSS block plus the constrained prompt. Polluted threads are how the endless loop feels in production.
Does a perfect prompt ever make agentic models stop “helping”? Not always – and that’s still an open measurement on real design systems.
When not to use Claude for this
- Theme editor already exposes the CTA color (Shopify Customize, Webflow) – click the swatch. Don’t burn tokens.
- Strict design-token governance – one-off blues create debt; change the token on purpose in a dedicated PR.
- Contrast unreviewed – #0000FF on busy photos can fail WCAG; check it yourself.
- Live checkout incident – tools that invent extra buttons stay on the bench.
FAQ
Is Opusfived actually Claude Opus 5?
No. Scripted game from the creator’s real sessions. Practice spotting failure modes. Don’t score the live model with it.
What’s the shortest prompt that usually works?
File open. Then: “In ProductForm.tsx, set only the primary submit button’s background to #2563eb. Do not edit shared button tokens or any other component. Minimal diff.” CSS modules or Tailwind? Name the exact class or utility list so it isn’t guessing.
Why does Opus 5 still over-verify simple UI tweaks?
People expect “smarter model = smaller edit.” Training and agent defaults still reward thoroughness – checks, migrations, full state coverage. Great on refactors. Wasteful on a hex code. Shrink the allowed action space: low effort, greenfield lines in PROJECT.md/CLAUDE.md, “instance not token,” plan approval before tools. Thoroughness needs nowhere to expand.
Open Opusfived once. Note which failure hits first. Paste the constrained prompt on a disposable branch in your next real Claude session. Do that once. Stop.