Claude Code Just Solved AI SLOP FOREVER (Steal This Prompt)
AI-built apps all end up the same: too many menus, the wrong info, and a phone view that's basically unusable. Here's the free prompt I gave Claude Code that turned my venue's admin, and Harbor's dashboard, into calm apps that work like real apps on a phone. The full prompt is below, no catch. 🎯 Harbor, the AI SEO blogging system (sponsor): https://www.harborseo.ai/annual Harbor Build is coming: a full website from a link or a PDF, with a CMS built for your business. Founder members get our best token rate plus bonus tokens every month. Founder signups end for good on Cyber Monday, 30 November. Chapters 0:00 What AI UI slop looks like 0:30 The result: same app, calm 1:00 Harbor got the same treatment 1:09 Sponsor: Harbor + Harbor Build (founder deal) 2:16 Harbor's sidebar, before and after 2:33 Mobile: a real in-app experience 2:50 Turn it into a PWA 3:13 How it works: the free prompt 3:49 It scans your repo and makes mockups 4:23 Evidence, mockups and information architecture 4:55 Build behind a feature switch 5:10 The calm checklist 5:31 The in-app checklist 6:03 Outro THE FREE PROMPT (paste it into Claude Code) Try HarborSEO FREE: https://harborseo.ai/annual Free Claude Code Prompt https://docs.google.com/document/d/1aXiq7AS-KNZ2Ic7JV3mfXyfgPnl6ojnIjr2jvlQswTw/edit?tab=t.0 You're redesigning this app's admin/dashboard so it's calm, clear, and works like a real app on a phone. Work in phases, and stop where I say. PHASE 1: EVIDENCE (optional, but best if you have analytics) If the app has analytics (PostHog, GA4, Plausible), pull every page: visits, time on page, rage clicks, dead clicks, phone vs desktop. Rank the pages by real use. For the busiest pages, work out why people struggle and write a numbered fix list per page. Check every number on the dashboard against the database, so the redesign shows the same numbers from the same queries. PHASE 2: MOCKUPS (stop for my approval) Scan the whole repo. Make HTML mockups of the core screens in 2–3 directions, one of them in the business's own brand. Stop and wait for me to pick. PHASE 3: INFORMATION ARCHITECTURE Group all pages into 4–7 areas in the sidebar. Clicking an area turns the top bar into that area's tabs. Rarely used pages go under "More". One config file drives the whole menu, and a route map gives every old page a home. PHASE 4: BUILD BEHIND A SWITCH Ship behind a feature flag: off in production, on in staging. Build one area at a time, with the tests passing. Production flips only after I've clicked through staging. THE CALM CHECKLIST: every page must pass all of these 1. It feels like the business's own place (its logo, colours, warmth), not a generic admin. 2. The next action is obvious and one tap away. 3. One glance, no hunting: what matters is above the fold. 4. State persists: tab, filter, search and month live in the URL, so Back lands where you were. 5. Calm surfaces: one-line stat strips, not big boxes; skeletons, not spinners. 6. Summary first, detail on demand. 7. Nothing disappears, and search finds everything. 8. The numbers are trustworthy: the same queries as before. 9. Data-driven: order and emphasis come from usage, not taste. THE IN-APP CHECKLIST: on phones it's an app, not a squeezed website - A bottom tab bar for the areas, with swipeable tabs on top. - Full-screen pages with a back chevron. No hamburger maze. - Cards, not tables. Tap targets of 44px or more, and 16px inputs. - The main action sticky at the bottom. - Bottom sheets instead of centred pop-ups. - Respect safe areas, no sideways scrolling, skeletons while loading. - A web app manifest, so it installs as a PWA. Work with us (websites, SaaS, CRMs, SEO): https://incomestreamsurfer.com #ClaudeCode #UIDesign #VibeCoding
