# SaaS landing page with an anti-slop prompt

> Anthropic's before-and-after test: one request for a project management landing page, run plain and then with a short aesthetics system prompt. The second run swaps the purple-on-white default for a dark page with a wide display face and a gradient headline.

- Kind: Website
- Page: https://meetreference.com/v/saas-landing-page-anti-slop-prompt/
- Ready-to-use agent handoff: https://meetreference.com/v/saas-landing-page-anti-slop-prompt/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/saas-landing-page-anti-slop-prompt/prompt.txt
- Authorship: Not stated
- Made with: Claude API
- Model: Claude Sonnet 4.5
- Built with: HTML and CSS, Tailwind CSS, Plain JavaScript
- Style: Landing pages; before and after, dark, display typography, gradient text, saas, anti-slop, system prompt
- Shared by Anthropic in GitHub, Oct 21, 2025: https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

Requirements reported by the source: An Anthropic API key, if you run it through the API as the notebook does.

## Recreating this website

These are the creator's published instructions, unedited.

To adapt it: Change the user prompt ("Create a SaaS landing page for a project management tool") to any page you want. The <frontend_aesthetics> block works on its own, so you can add it to your own system prompt or CLAUDE.md.

## Prompts

### 1. System prompt

````text
You are an expert frontend engineer skilled at crafting beautiful, performant frontend applications.

<tech_stack>
Use vanilla HTML, CSS, & Javascript. Use Tailwind CSS for your CSS variables.
</tech_stack>

<output>
Generate complete, self-contained HTML code for the requested frontend application. Include all CSS and JavaScript inline. 

CRITICAL: You must wrap your HTML code in triple backticks with html language identifier like this:
```html
<!DOCTYPE html>
<html>
...
</html>
```

Our parser depends on this format - do not deviate from it!
</output>



<frontend_aesthetics>
You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight. Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.

Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.

Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. 

Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character

Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
</frontend_aesthetics>
````

### 2. User prompt

```text
Create a SaaS landing page for a project management tool
```

## What it looks like

Written by Reference from the recording frames, not by the creator.

Two hero screenshots of the same request. Without the aesthetics prompt: TaskFlow, a white-and-lavender page with purple buttons and a purple placeholder dashboard. With it: Momentum, a near-black page with a huge wide headline and a teal-to-coral gradient line.

- Color: First: white, pale lavender-grey, and violet. Second: near-black with faint teal and red glows, white type, and a teal-to-pink-to-orange gradient on the headline and button.
- Type: First: a plain bold sans-serif headline with a purple second line. Second: an extra-wide, heavy display face in lowercase ("Project management without the chaos") over small sans-serif body text.
- Framing: 16:9 screenshots. The first puts the headline left and a framed dashboard placeholder right, with a features heading below. The second centers everything: a small "Trusted by 10,000+ teams" pill, the three-line headline, a subhead, and two buttons.
- Structure: The run without the aesthetics prompt, then the run with it.

Storyboard of the images: https://meetreference.com/media/saas-landing-page-anti-slop-prompt/storyboard.webp

- Image 1: https://meetreference.com/media/saas-landing-page-anti-slop-prompt/f1.webp
- Image 2: https://meetreference.com/media/saas-landing-page-anti-slop-prompt/f2.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Notes: Each output is one API call. The first image is the run without the aesthetics section, the second with it. The notebook's code at the commit that added these images calls Claude Sonnet 4.5 (it now calls Sonnet 4.6); the notebook doesn't otherwise say which model made the screenshots. The same notebook also tests a typography-only prompt and a theme prompt, and suggests adding the aesthetics section to a system prompt or CLAUDE.md.

> Without guidance, Claude often defaults to simplistic designs with white and purple backgrounds.
> (Anthropic)

## Links

- Watch: https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb
- Original post: https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb
- Anthropic's post on the same test: https://claude.com/blog/improving-frontend-design-through-skills