QWE AI Academy Two prompts. Same job. Casual: “make the Add to Cart button blue.” Constrained: name the selector, ban side effects, demand the exact lines changed. The second wins. The first is why opusfived.dev lit up Hacker News – developers quoting “Why is half the site blue now?” in a thread that shot to hundreds of points in hours (see the linked discussion on news.ycombinator.com).
If Claude has ever “finished” a one-line color tweak by rewriting layout, hover states, or every primary control, use the workflow below. Artifacts demo, under ten minutes, beginner-friendly.
Reader scenario: the one-button job that goes sideways
You’re mocking an e-commerce card. Image, price, one black “Add to Cart” button. You paste the meme line. Claude sounds sure. Preview loads. Three controls are blue. The price link is blue. A hover gradient you never named showed up. Or Claude claims done and the button is still black.
Funny until it’s your afternoon. The viral site turned that failure mode into a score attack; HN comments read like session logs – over-scope, false completion, unrequested polish. The model isn’t randomly broken. Scope was never locked.
There’s a weird pride in losing to a shopping-button puzzle. We’ve all shipped “tiny” CSS fixes that rewrote half a stylesheet. Same muscle, different chat box.
What you’re actually using (Artifacts, not magic)
Code execution and file creation must be on. As of Anthropic’s Help Center article on Artifacts, they’re unsupported without that toggle – Settings → Capabilities on Free/Pro/Max, or Organization settings → Capabilities on Team/Enterprise. Check the current wording on support.claude.com; product labels move.
What lands in the side panel? Single-page HTML, interactive React, snippets, SVGs, diagrams. You preview beside chat, keep versions, iterate in place. Publish can mint a public link on Free/Pro/Max (Team/Enterprise share inside the org) – details in Anthropic’s publish/share doc, and this may have changed since your last login. Sandbox, one self-contained file. Not an IDE. Not production Shopify. For “only this button,” a good fit.
Pro tip: Open Code once before any color ask. Copy the real class or id on Add to Cart. Paste that selector next message. Specificity beats vibes.
Practical setup: build the card, then change only the button
1. Go to claude.ai, Settings → Capabilities, enable Code execution and file creation.
2. New chat. Paste a starter that forces one inspectable target:
Create an Artifact: single self-contained HTML page with Tailwind via CDN if allowed, otherwise plain CSS.
One product card: image placeholder, title "Trail Runner Shoe", price $129, one button with class "add-to-cart-btn" and text "Add to Cart".
Button background #111, text white, 12px 24px padding, 6px radius.
Nothing else on the page. No other buttons or links.3. Preview: exactly one black button. Code view: confirm the class string.
4. Constrained change:
Update the existing Artifact only.
Change background-color of .add-to-cart-btn to #2563eb (blue).
Do not alter any other element, class, hover rule, layout, spacing, or text.
Do not add new CSS rules that affect other selectors.
After the edit, reply with: (1) the exact CSS/HTML lines changed, (2) confirmation that no other rules were touched.5. Preview again. Anything else moved? Roll back with version history and tighten: “only the rule that sets background on .add-to-cart-btn”.
The confirmation step is the tripwire for still-black buttons and surprise hover paint – the same patterns community threads keep hitting on the viral demo.
Advanced usage: selectors, highlight edit, repos
Page got bigger? Stop describing the button like a human pointing at a monitor.
- Code view: highlight the
backgrounddeclaration (or the element), Improve, “set only this to #2563eb; touch nothing else”. - Unique class or data attribute beats matching on button text. Dynamic labels make text instructions lie.
- Real repo? Point Claude at the component file with the same constraint language: file path, selector, forbidden side effects. Stay in the loop on each write.
- Design-token refactor mid-tweak? Shut it down: “No token refactor. One property change only.”
Minimal diff first cuts over-scope: “show before/after lines only, do not apply yet” → approve → apply. Extra turn. Fewer rewrite spirals.
How obvious are “don’t touch anything else” rules to a model trained to be helpful? Less obvious than we pretend – which is the whole joke behind the meme.
Honest limitations
Single file. Sandboxed. CSP limits on external resources. Published URL ≠ your private chat. Unpublish and that link is gone; republish gets a new id. Full themes and design systems still want export plus real tooling.
“Primary blue” leaks into links and focus rings unless you forbid it. Agentic or high-effort passes sometimes drop tests, comments, or a11y notes you didn’t request – fine later, messy mid-tweak. Whole-artifact regenerations burn tokens; the Code execution path is what makes line-level edits realistic (per current Help Center behavior – verify if the UI moved). Turns out the prompt has to carry constraints humans treat as ambient common sense.
FAQ
Why does Claude turn half the page blue after “change the Add to Cart button to blue”?
It widens “button” into “primary actions.” Lock one selector. Ban other changes. Done.
Do I need a paid plan for this workflow?
Artifacts run on Free once Code execution is enabled – that’s the hard gate in the docs, not the plan name alone (as of the latest Help Center wording; this may have changed). Public publish is listed for Free/Pro/Max. Long sessions or heavier coding features still bump into Pro/Max/Team usage caps – watch the usage panel.
What’s the fastest recovery when Claude leaves the button black or sneaks in a gradient?
Version history → roll back. Don’t argue with the bad diff. Resend: exact class, hex #2563eb, “change nothing else,” “return only the lines you changed.” In Code view, highlight the single declaration and Improve that span. Accepting a full rewrite when you needed one property is how the spiral starts; the tighter prompt is cheaper than another full card.
Enable Code execution. Paste the starter card. Run the constrained blue-button prompt. Screenshot before/after. You’ll see the gap between meme wording and scoped wording in one round trip.