Claude Just Killed
AI-Slop Websites

Use the Paper MCP. Open my Paper file "[FILE NAME]" and look at everything on the canvas before you design anything.

I dropped [NUMBER] screenshots of websites I like onto the board. Screenshot each one, study it, and tell me in one line what you see in it before you start.

Here's what I like about each reference (left to right):

1. [Site name]: [What you like, specifically.
   Example: "The giant headline and how the only color on the whole page is the button."]
2. [Site name]: [Example: "The dark section in the middle. It breaks up the page and makes the reviews pop."]
3. [Site name]: [Example: "The photo cards with the label in the bottom-left corner and a little arrow in the bottom-right."]
4. [Site name]: [Example: "The nav. Tiny, all caps, one black button on the right."]
(Add or delete lines so it matches the number of screenshots on your board.)

What I'm building:
- Business: [Name + one sentence. Example: "Northside Detailing, a mobile car detailing company in Tampa."]
- Who it's for: [Example: "Busy car owners within 30 minutes of downtown Tampa."]
- The ONE thing I want visitors to do: [Example: "Book a detail" or "Request a free quote."]
- My current site (pull real copy from it, no lorem ipsum): [URL, or "none yet, write the copy for me"]
- Things I never want to see: [Example: "Purple gradients, stock photos of people pointing at laptops, the word 'solutions'."]

Now design 5 different homepage variants as 5 separate 1440px-wide artboards, side by side on the same page.

Rules:
- Don't clone any single reference. Every variant mixes elements from at least 2 of them, and every element I said I liked shows up in at least one variant.
- Make the 5 genuinely different from each other: different mood, colors, fonts, and layout. If two look like siblings, redo one.
- Before you build each variant, give it a name and write me a 3-line brief: the mood, the colors (hex codes), and the fonts.
- Every homepage needs: nav, a hero with my main call to action, proof (reviews, logos, or numbers), what I do, why me or how it works, a final call to action, and a footer.
- Write real copy for my business. Short sentences. No buzzwords.
- Build each variant section by section. When you finish one, screenshot it and fix anything cramped, cut off, misaligned, or hard to read before moving on.

When all 5 are done, give me a short list: each variant's name, its vibe in 5 words, and which references it borrowed from. Then stop and wait for my feedback. Don't write any code yet.

I like [VARIANT A] and [VARIANT B] the most. Leave all 5 on the canvas, but make a new artboard to the right called "v2" that combines them:

- Take the [SECTION, example: "hero and nav"] from [VARIANT A]
- Take the [SECTION, example: "reviews section and the dark footer"] from [VARIANT B]
- Use the colors and fonts from [VARIANT A or B]
- Change: [Example: "the headline is too long, cut it to 6 words or less" or "make the quote button way bigger"]

Screenshot v2 when you're done, tell me what you changed, and wait for feedback.

I left comments directly on the "[ARTBOARD NAME]" artboard in Paper. Read every open comment thread, make each change, then mark each comment resolved. When you're done, screenshot the artboard and give me a one-line summary per comment of what you changed.

The "[ARTBOARD NAME]" artboard is the final desktop design. Build the mobile version as a new 390px-wide artboard right next to it.

Same content, same colors, same fonts. Stack everything into one column, make every button easy to tap with a thumb, keep my phone number and main call to action visible at the top, and make sure no text is smaller than 16px. Screenshot it and fix anything that feels cramped.

Use the Paper MCP. Read the "[DESKTOP ARTBOARD NAME]" and "[MOBILE ARTBOARD NAME]" artboards in my Paper file "[FILE NAME]".

Turn them into a real website:
- Build it as an Astro site in a new folder called [FOLDER NAME, example: "my-website"].
- Pull exact values from Paper (get_jsx, get_computed_styles, get_fill_image). Never guess sizes or colors from a screenshot.
- Desktop matches the desktop artboard, phones match the mobile artboard, and everything in between still looks clean.
- One H1 per page. Every image gets alt text that describes it. Compress every image.
- Make the contact form actually work and tell me what I need to set up for it.

Then walk me through putting it live step by step. Assume I have never used GitHub or Vercel before: create the GitHub repo, push the code, connect it to Vercel, and connect my domain [DOMAIN, or "I don't have one yet"].

Act as a local SEO specialist. Go through my website code and set it up to bring in leads from Google. Ask me anything you need before you start (services, cities, phone, address, hours).

My business: [NAME]
What I sell: [Example: "Mobile car detailing, ceramic coating, interior deep cleans"]
Where my customers are: [Example: "Tampa, St. Petersburg, Brandon, Clearwater"]
How leads reach me: [Example: "Phone calls and the quote form"]

Do all of this:
1. Make one page per service. Each page targets one search like "[service] in [city]".
2. Write every page title as "[Service] in [City] | [Brand]" under 60 characters, and a meta description under 155 characters that ends with a reason to click.
3. Exactly one H1 per page that says what I do and where.
4. Put my phone number as a tap-to-call link in the header of every page, and a short quote form near the top of every service page.
5. Add LocalBusiness schema (JSON-LD) with my exact name, address, phone, hours, and service area. It must match my Google Business Profile word for word.
6. Generate a sitemap and a robots.txt.
7. Compress every image, add descriptive alt text, and get the mobile PageSpeed score to 90 or higher.
8. If I'm replacing an old site, set up 301 redirects from every old URL to the new matching page.

When you're done, give me a checklist of what you changed and a list of what I still have to do by hand outside the code (Google Business Profile, Search Console, reviews).