# Paste this into your agent (Claude Code, Cursor, v0, Lovable)

Design audit of lumora.example by Igna, from Anti Web Slop, on October 29, 2026. The full report, with the video, is at https://antiwebslop.com/en/sample-report

## The prompt

You're going to fix the Lumora homepage in this order. Make one change at a time and show me the result before moving on.

1. Hero: replace the h1 "Unlock the power of AI for your business" with a sentence under 12 words saying what the product does, who it's for and the result. The paragraph below becomes one line about how. Remove the "New: Lumora AI 2.0" pill. Headline in one solid color, no gradient.
2. Hero buttons: "Get started free" as the only filled button, solid color, no colored shadow. "Book a demo" as a text link beside it. One button in the nav.
3. Product: a large real screenshot under the hero (/public/product.png placeholder). The three emoji cards become three alternating rows, each with one concrete feature and its screen crop. No emoji icons.
4. Social proof: remove the logo strip, the 10x / 99.9% / 24/7 strip and the testimonials. Leave a Testimonial component (name, company, photo, quote, no stars) for when there are real ones.
5. Color: variables --text (near-black) and --accent (solid; not purple, indigo or pink). Every gradient becomes a flat color; accent only on the main button and links. White background.
6. Type: a heading typeface with character (Satoshi or General Sans, self-hosted), weight 600, tight tracking; h2s left-aligned. Remove "Why choose Lumora?".
7. Links: remove every href="#". Footer in one row: name, email, Privacy, Terms and ©.
8. Head: meta description, og:title, og:description, 1200×630 og:image and twitter:card.

Don't change anything that isn't on this list.

---

## The changes, one by one

The same work, split by finding, in case you prefer to go one at a time. Each one has the section of the site and the moment in the video where I explain it.

### 1. The headline doesn't say what Lumora does

- Priority: high

**What to change:** Say what it does, who it's for and what they get. Something like: "Lumora reads your store's sales and tells you every Monday what to restock." One line underneath with the how. Drop the "New: Lumora AI 2.0" pill.

**Why:** "Unlock the power of AI for your business" fits a thousand products. Visitors give you a few seconds to tell them whether this is for them; a generic promise makes them scroll to find out, and most won't.

**Prompt:**

```text
Where: the homepage hero, the h1 "Unlock the power of AI for your business" and the paragraph below it.

What to change: replace the h1 with a sentence under 12 words that says what the product does, who it's for and the result, without the words "unlock", "power", "AI", "revolutionize" or "next level". Cut the paragraph below to a single line explaining how. Remove the "🚀 New: Lumora AI 2.0 is here" pill. Remove the gradient from the h1 text: one solid color.

Don't touch: the nav, the buttons (there's a separate change for them) and the other sections.
```

### 2. Two hero buttons fighting each other

- Priority: high

**What to change:** Pick one main action (if the product can be tried alone, "Get started free") and give it the only filled button. The demo becomes a text link next to it. Same in the nav: one button.

**Why:** "Get started free" and "Book a demo" have the same size, the same gradient and the same glow. When two actions weigh the same there is no main one, and people hesitate right when they should be deciding.

**Prompt:**

```text
Where: the two hero buttons, "Get started free" and "Book a demo".

What to change: keep "Get started free" as the only filled button, in a solid color (no gradient, no colored shadow). Turn "Book a demo" into an underlined text link next to it, with no background or border.

Don't touch: the button labels, the headline or anything else on the page.
```

### 3. Show the product instead of three emoji cards

- Priority: high

**What to change:** Put a real product screenshot under the hero, large, with no fake browser frame. Replace the three cards with three concrete things Lumora does, each with a crop of the screen where it happens. No emoji icons.

**Why:** 🚀 Lightning fast, ⚡ AI-powered, 🔒 Enterprise-grade security: the three cards any tool could have. Four screens of scrolling and not a single image of Lumora actually working, which is the one thing that convinces.

**Prompt:**

```text
Where: the "Everything you need, all in one place" section with the three cards (🚀, ⚡, 🔒), and the space under the hero.

What to change: add a large image under the hero with a real product screenshot (leave a placeholder at /public/product.png and I'll replace it). Replace the three cards with three alternating rows (text on one side, screen crop on the other), each describing one concrete feature with a heading that says what happens, not an adjective. Remove the emoji icons.

Don't touch: the hero and the sections below.
```

### 4. Numbers and testimonials nobody believes

- Priority: medium

**What to change:** If there are no named customers yet, remove the stat strip, the logos and the testimonials: no social proof beats proof that looks made up. When you have it: full name, company, a real photo and one sentence about a concrete result.

**Why:** "10x faster", "99.9%" and "24/7" without saying compared to what; grey logos of companies that don't exist; three five-star testimonials with a colored circle for a face and "Sarah J., CEO" with no company. Template social proof takes trust away instead of adding it.

**Prompt:**

```text
Where: the "Trusted by 10,000+ teams worldwide" logo strip, the stat strip (10x, 99.9%, 24/7) and the "What our customers say" section.

What to change: remove all three. Leave a Testimonial component in the code that takes name, company, photo and quote, with no stars, for when there are real ones.

Don't touch: the rest of the page.
```

### 5. AI purple, with gradients, in every section

- Priority: medium

**What to change:** Pick a single accent color that isn't purple and use it only on the main action. White or near-white background, near-black text. No gradients on text or buttons; the closing block on a flat background.

**Why:** 96% of the accent color is purple or indigo, and there are twelve purple-to-pink gradients: logo, headline, buttons, icons, numbers and the closing block. It's the palette that says "an AI made this" before anyone reads a word.

**Prompt:**

```text
Where: the global styles and every gradient (logo, h1, buttons, icons, numbers, the "Ready to take your business to the next level?" block).

What to change: define two variables, --text (near-black) and --accent (a solid color that isn't purple, indigo or pink), and replace every linear-gradient and radial-gradient with flat colors. The accent goes only on the main button and links. Page background becomes white.

Don't touch: the copy and the structure.
```

### 6. The usual font, and everything centered

- Priority: medium

**What to change:** Pick a typeface with some character for headings (there are good free ones on Fontshare and Google Fonts) and left-align headings with the text column. The "Why choose Lumora?" ✅ list can go: it repeats the features.

**Why:** Inter on 100% of the text and every heading centered, section after section, in the usual order (hero, features, why us, testimonials, final call). Nothing on the page says someone made a decision.

**Prompt:**

```text
Where: the global typography, every h1 and h2, and the "Why choose Lumora?" section.

What to change: load a heading typeface other than Inter (I suggest Satoshi or General Sans from Fontshare, self-hosted), weight 600, tight tracking. Left-align the h2s and their subheadings. Remove the "Why choose Lumora?" section with the ✅ list.

Don't touch: body text, which can stay in Inter.
```

### 7. 26 of 29 links go nowhere

- Priority: low

**What to change:** Keep only what exists in the footer: contact, legal and, if you have them, docs and pricing. Everything else goes until the page exists.

**Why:** The footer has five columns and twenty-five links (Changelog, Roadmap, Careers, Press, Webinars…) and almost all of them point to "#". A dead link is worse than no link: it tells people the page is cardboard.

**Prompt:**

```text
Where: the footer and the nav.

What to change: remove every link with href="#". Make the footer a single row with the name, the contact email, and links to Privacy and Terms. Replace "Made with ❤️ for teams everywhere" with just the ©.

Don't touch: the rest of the page.
```

### 8. No preview when shared

- Priority: low

**What to change:** Add a meta description that says what Lumora does and a 1200×630 image with the name and a product screenshot.

**Why:** The meta description and the social image (og:image) are missing. When someone shares the link on WhatsApp, Slack or X, it shows up empty.

**Prompt:**

```text
Where: the homepage <head>.

What to change: add <meta name="description"> carrying the idea of the new hero headline (155 characters max), og:title, og:description, og:image (1200×630, leave /public/og.png as a placeholder) and twitter:card=summary_large_image.

Don't touch: anything visible on the page.
```

---

## When you're done: save the design rules

So future changes don't slide back, save this in the project: if there's a CLAUDE.md or AGENTS.md at the root, append it; if not, create AGENTS.md with this content. If you're in Lovable, v0 or Bolt, tell the person to paste it into the project instructions.

```markdown
# Design rules for lumora.example

These come from the homepage audit. Read them before every change so Lumora doesn't drift back into looking like a template.

- Every headline says what Lumora does, who it's for and what they get, in under 12 words. Never "power", "AI", "revolutionize" or "next level".
- One filled button per screen, in a solid color with no colored shadow. The secondary action is an underlined text link.
- Show the product with real screenshots, large and without a fake browser frame. Never use emoji as icons.
- Don't add stats, customer logos or testimonials that aren't real. A testimonial needs a full name, company, real photo and one sentence about a concrete result. No stars.
- Colors come only from --text (near-black) and --accent (one solid color that isn't purple, indigo or pink), on a white background. The accent goes on the main button and links, nowhere else.
- No linear-gradient or radial-gradient anywhere: not on text, buttons or backgrounds.
- Headings use Satoshi or General Sans, self-hosted, weight 600 with tight tracking, left-aligned with the text column. Body copy stays in Inter.
- No filler sections like "Why choose Lumora?" with ✅ lists. If a section repeats what another already says, cut it.
- No href="#" links. If the page doesn't exist yet, neither does the link. The footer stays one row: name, email, Privacy, Terms and ©.
- Every new page ships with a meta description, og:title, og:description and a 1200×630 og:image.
```