Strip AI Look from Web Page in Claude Code

<task> Strip the AI look from [PAGE: local dev URL]. Change the craft only: features, behavior, facts and section order stay. No new sections or components. </task> <before> Read-only until I approve. Use Chrome DevTools MCP. Leave any login to me and never read credentials. - Save before shots outside the repo, emulating 1440x900 and 390x844, in screen-height pieces. - Record the build and test results and lighthouse_audit accessibility failures on desktop and mobile. </before> <plan> 1. Slop list: number every sign of AI slop and where it shows: purple gradients, glows, gradient text, emoji labels, sparkle badges, wide-tracked caps, endless loops, drifting spacing. If the page is mostly fine, say so and fix only these. 2. Direction, three lines. World: its setting or material. Focus: 1-2 spots get rich color and detail, the rest stays quiet. Signature: one small detail only this product would have. Real brand colors, logos and fonts stay (a purple gradient isn't one). 3. Copy table, current vs proposed, tone only: exclamation marks, "Welcome back" greetings, hype words. No claim, number, price, name or legal line changes. Show me all three, then stop and wait for my OK. </plan> <passes> After my OK, on a new branch, one commit per pass across the whole page: 1. Spacing: 4px grid, same things same size 2. Color: one neutral scale tinted toward World, three text levels, one accent saved for Focus spots, no hue gradients or glows 3. Icons: the project's line icons replace emoji, one size and stroke 4. Copy: approved rows only 5. Type: weights 400 and 500, sentence case, the project's font 6. Layout: alignment and proportions inside sections only 7. Details: consistent radii, quiet badges, the Signature 8. Visuals: remove decorative filler, generate nothing 9. Motion: remove loops, transition-all, hover scale-ups </passes> <rules> - Only styling and approved copy change. Anything else (logic, data, config, a new package or font) goes on an approval list, unbuilt. - Theme files count as styling; name any other pages a change reaches. - Keep every id, data- and aria- attribute. Never edit a test to pass it: copy-only breaks go on the approval list. - Text stays at WCAG AA: 4.5:1, or 3:1 for large text. Every control keeps a visible focus state. - Never push or merge. </rules> <check> After the last commit, retake the same shots, then: - Build and tests: no new failures. No tests? Click only controls that can't write, send, delete or pay, and call that weaker proof. - Rerun lighthouse_audit: no new failures. It can't score text over images or gradients, so list those as unchecked. Tab through to see focus states. Grep for motion items stills can't show. - Judge, a fresh subagent, not a fork: gets only the before and after shots and slop list, edits nothing. Marks each item gone, still there or can't tell, citing the screenshot. Flags anything broken at phone width. Swap test: would this page still make sense with another company's name? - Guard, same terms: gets only the rules above, approved copy rows and full branch diff. Lists every change that isn't styling or approved copy. </check> <stop> Wait for both reports, fix what they find, then retake shots and rerun the check with a new judge and guard, 2 rounds max, then stop even if items remain. Failed swap test: push World and Signature, styling only. If frozen copy causes it, just report it. </stop> <output> Final slop marks, test and Lighthouse results, approval list. End with what you need from me: merge, revert, or a call on each approval. </output>