---
title: "Claude Design produces AI slop unless you tell it not to"
description: "Anthropic's new design tool ships with anti-slop guardrails. They don't fire on their own. The DESIGN.md, system prompt, named aesthetic, and reference-mix that actually do."
publishedAt: 2026-05-01
category: ai-and-tech
authors: [ben-honda]
tags: [claude-design, anthropic, ai-slop, frontend, design-systems, claude, opus-4-7]
provenance: ai-research-with-human-curation
---

> TL;DR: Claude Design is Anthropic's new visual workspace, launched April 17, 2026 at claude.ai/design. It runs on Opus 4.7 and inherits the same "AI slop" pressure every other AI tool has. The anti-slop guardrails Anthropic ships work only if you actively invoke them. The formula that produces something that doesn't look AI-generated: a DESIGN.md, the cookbook's system prompt, a named aesthetic family, two or three brand references, and iteration in Tweaks rather than re-prompts.

Anthropic shipped [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) on April 17, 2026, and the launch posts read the way launch posts always read. Prompt to prototype. Slides in seconds. Pitch deck in a single conversation. Most of that is true. The thing the posts skip past is that Anthropic's own team has been quietly publishing, for six months, the documentation explaining why the default output of every AI design tool, including theirs, looks like AI.

That documentation is worth reading before you open the app.

## What Claude Design actually is

[claude.ai/design](https://claude.ai/design) is a hosted product, in research preview for Pro, Max, Team, and Enterprise subscribers. It runs on Opus 4.7. You give it a brand by pointing at a codebase, dragging in design files, or capturing live elements from a site, and it builds a persistent design system the project inherits across every screen. You iterate by leaving inline comments, dragging adjustment "Tweaks" sliders, or re-prompting. When the prototype is done, it packs a handoff bundle that drops into Claude Code with one instruction.

It's worth separating Claude Design from two adjacent things, because they're related and not the same:

1. The **frontend-design skill**, an open-source `SKILL.md` in [anthropics/skills](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md) that gives Claude Code (and any compatible agent) a "design brain" before it writes code.
2. The **Frontend Aesthetics Cookbook**, the [notebook Anthropic published](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics) in October 2025 by Prithvi Rajasekaran, which documents the prompt patterns that fight what Anthropic itself calls "AI slop."

Claude Design and the skill share DNA: the same anti-slop philosophy, the same vocabulary, the same list of fonts to avoid. The cookbook is the prose explanation. Treat them as a stack. The product is the workspace, the skill is the design brain, the cookbook is the prompting craft.

## The slop default Anthropic itself named

The most useful sentence Anthropic has published on this topic sits in the cookbook:

> "You tend to converge toward generic, 'on distribution' outputs. In frontend design, this creates what users call the 'AI slop' aesthetic."

Translation: the model has been trained on a lot of marketing pages. The statistical center of those pages is what comes out of an unguided prompt. The fingerprints are familiar.

- Inter, Roboto, Arial. System fonts. Space Grotesk as the "I tried" upgrade.
- Purple gradients on white. Pastel rainbow accents. Indigo-to-violet hero washes.
- Centered hero with eyebrow plus 64-pt headline plus subhead plus two CTAs. Three-up feature cards. Logo soup. Pricing toggle. FAQ accordion.
- Generic glassmorphism. Soft drop shadows. Animated gradient blobs.
- Shadcn-default cards. Tailwind-default rounded-xl buttons. Identical nav.

Designer Michał Malewicz, in his [April teardown on Medium](https://michalmalewicz.medium.com/will-claude-design-replace-designers-f92623f3befe), opened by pointing out that Claude Design's *own* marketing logo falls into this trap. The team that built the anti-slop guardrails is fighting the same gravity as the rest of us.

Anthropic's three counter-strategies, distilled from the cookbook:

1. Direct attention to specific design dimensions (typography, color, motion, backgrounds) rather than asking for "a nice design."
2. Reference design inspirations by name (IDE themes, magazine traditions, cultural aesthetics) without being prescriptive enough to clone them.
3. Call out common defaults explicitly. Tell Claude, by name, what to avoid.

The cookbook ships a "distilled aesthetics prompt" you can paste into a Claude Design project's system prompt, or any `CLAUDE.md`. The verbatim core:

```
<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>
```

A bug worth knowing about: the skill's instruction *"never converge across generations"* is technically incoherent. Claude has no memory of previous conversations, so the model has no way to know what it did last time. Independent researcher Justin Wetch flagged this in [PR #210](https://github.com/anthropics/skills/pull/210) and rewrote the rule to be actionable in a single generation; the PR reportedly produced a 75% win rate across model tiers in his own testing. If you're using a community fork, you may already be on his version.

## Pick an aesthetic family. Then mix two

The slop is the *average* of all marketing prose on the open web. The fastest way to leave the average is to anchor the prompt to a named aesthetic that isn't in the middle.

The community has organized counter-aesthetics into families. A small subset from [rohitg00/awesome-claude-design](https://github.com/rohitg00/awesome-claude-design):

| Family | Reference brands | Use it for |
|---|---|---|
| Editorial Minimalism | Linear, Stripe, Vercel, Mintlify | Read-heavy SaaS, docs, pricing |
| Terminal-Core | Ollama, Warp, Raycast, OpenCode | Developer tools, CLI products |
| Warm Editorial | Anthropic, Notion, Resend, Substack | Prosumer, knowledge tools |
| Data-Dense Pro | ClickHouse, PostHog, Grafana, Sentry | Analytics, dashboards |
| Cinematic Dark | Runway, ElevenLabs, Midjourney | AI products, creator tools |
| Playful Color | Figma, Duolingo, Mailchimp, Cal.com | Consumer, education |
| Glass / Soft-Futurism | Apple, Arc, Airbnb, Spotify | Premium consumer |
| Neon Brutalist | The Verge, Pitchfork, PlayStation | Statement marketing pages |
| Cult / Indie | A24, Criterion, Letterboxd, Obsidian | Anything that needs to feel like it took courage |

Naming one family is good. Naming a *remix* of two is better. "Linear's typography discipline plus Pitchfork's editorial color" gives Claude two anchors to triangulate between, and the result reads as designed rather than copied. Ruben Hassid's prompt template in [his Substack post](https://ruben.substack.com/p/claude-design) leans on this directly: tone should feel "a mix of [reference] + [reference]."

## The DESIGN.md

This is the convention that makes the difference between "every prompt is a new aesthetic" and "the brand survives the project."

A `DESIGN.md` is a markdown file Claude reads as your design system before generating anything. It came from Google Stitch originally and is now a *de facto* standard across Claude Design, Cursor, Lovable, v0, and Bolt. The canonical structure runs about nine sections: visual theme, color tokens, typography rules, component stylings, layout principles, depth and elevation, do's and don'ts, responsive behavior, and a closing rejection clause that tells the agent what *not* to do.

You don't have to write one from scratch. The [VoltAgent](https://github.com/VoltAgent/awesome-design-md) and rohitg00 catalogs together ship more than sixty ready-made DESIGN.md files for brands like Linear, Stripe, Notion, Airbnb, and Ferrari. Drop one in. Treat it as remix material, not a clone.

The simplest sanity check Hassid recommends: upload a DESIGN.md, then generate the same dashboard or pricing page using three different brand systems. If the three look meaningfully different, the system is being applied. If they look like the same template wearing different colors, something in the DESIGN.md isn't loading.

## Prompt with four inputs locked in

Hassid's framework, echoed across most of the launch-week walkthroughs:

> Goal. Layout. Content. Constraints.

Example:

> *"Build a pricing page for [product]. 3 tiers, annual/monthly toggle, sticky CTA on mobile. Mobile-first responsive. Use our Primary Button component. Match the tone of our existing homepage."*

Vague prompts ("make a landing page") return Anthropic's statistical center. Specific prompts with named components and named constraints return work that uses your design system.

For pitch-deck-style landing pages, the template that's been widely copied since launch:

> *"Create a high-fidelity landing page designed to raise $[FUNDING AMOUNT] from [TARGET INVESTORS] for '[PRODUCT NAME]' — [short product description]. Target audience: [audience]. Tone should feel [emotion] — think a mix of [reference site] + [reference site] + [ecosystem]."*

The "mix of two or three references" pattern is the cookbook's "reference design inspirations" strategy made operational. Anchoring to two or three named brands forces a remix.

## Iterate in Tweaks. Don't re-prompt

The single most-repeated launch-week complaint, including Peter Yang's: *"Fun, but burns through usage fast."* Claude Design runs on a weekly meter that sits separately from chat and Claude Code. Vision-heavy work on Opus 4.7 pulls a lot of tokens, and unstructured re-prompting is the fastest way to spend through the allowance.

The fix is not to use the tool less. It is to stop re-prompting for refinements. Claude Design ships inline comments and adjustment-knob "Tweaks" sliders for spacing, color, and layout. Those are the right tools for "make this padding bigger" or "swap this button variant." Re-prompting is the right tool for "I want to try a different direction entirely."

[John Voorhees at MacStories](https://www.macstories.net/stories/hands-on-with-anthropic-labs-claude-design-preview/) named this the 95% pattern: comment-on-element covered roughly 95% of what he needed once he adapted to it. When a comment occasionally vanishes before Claude reads it (a known bug), copy the comment into the chat panel and it lands every time. Use comments for targeted, component-level tweaks. Use chat for structural changes, new sections, aesthetic shifts.

## Hand off to Claude Code. Don't ship from Claude Design

The handoff bundle is a first-class feature for a reason. Claude Design is for ideation and design systems; production-grade code, accessibility, performance, integration testing, and SEO belong in Claude Code or a real engineering pipeline. The much-quoted "20+ prompts in other tools became 2 in Claude Design" figure should be read as *to a working prototype*, not *to production*. The [Scroll agency post](https://agence-scroll.com/en/blog/claude-design-anthropic-2026-guide) is explicit: a Claude Design prototype is the starting line for production work, not the finish line.

Multiple agencies report that Claude Design output looks shippable but has weak generated design-system variants, taped-together auth, and database designs that don't scale. The output is fast. Fast is the whole pitch. It is not the same as done.

## What still goes wrong

Things that won't show up in the launch posts and are worth knowing.

The design system anchors at scaffold time. If you want to try a different brand, start a fresh project. Mid-project brand swaps muddle the tokens.

Long sessions on Opus 4.7 degrade. Reports of $120 of API credits spent in a single session with disappointing output trace to mega-threads. Break the work into smaller, focused conversations rather than one running session.

Multi-file Figma libraries are hit-or-miss. Single pages import cleanly. Complex `.fig` libraries with components and variants often fail. Re-export simplified.

There is no Figma export at launch. You can export to Canva, PDF, PPTX, HTML, and shareable URLs. If your team's source of truth is Figma, you will round-trip via Canva or HTML.

Cross-conversation skill instructions are placebo. "Don't converge across generations" cannot work, because Claude has no memory between sessions. Use per-generation theme-locks and named aesthetic families instead.

## What it produces depends entirely on how you brief it

Anthropic's launch post quotes Aneesh Kethini at Datadog cleanly: *"What used to take a week of back-and-forth between briefs, mockups, and review rounds now happens in a single conversation."* That is true. It is also conditional.

Without scaffolding (a DESIGN.md, the cookbook system prompt, a named family, a multi-reference brief), Claude Design produces the same statistical-center output as every other AI design tool, just faster. With the scaffolding, you get something that doesn't look AI-generated.

Malewicz's most cutting line in the teardown is worth holding on to. The tool produces *output*, not *judgment*. Choosing which of ten generated dashboards to ship is still your job. So is deciding when the prototype is done enough to leave Claude Design and move to Claude Code, where the production work actually happens.

The shortest version of the formula: pick two aesthetic families to remix, borrow or write a DESIGN.md, drop the cookbook's anti-slop fragment into the project, prompt with goal-layout-content-constraints, iterate in Tweaks and comments, and hand off to Claude Code for production.

## Sources

- Anthropic — [Introducing Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) (April 17, 2026)
- Prithvi Rajasekaran, Anthropic — [Prompting for frontend aesthetics (Claude Cookbook)](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics) (October 21, 2025)
- Anthropic — [frontend-design SKILL.md](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)
- Justin Wetch — [PR #210: Improve frontend-design skill clarity and actionability](https://github.com/anthropics/skills/pull/210)
- rohitg00 — [awesome-claude-design](https://github.com/rohitg00/awesome-claude-design)
- VoltAgent — [awesome-design-md](https://github.com/VoltAgent/awesome-design-md)
- Michał Malewicz — [Will Claude Design replace designers?](https://michalmalewicz.medium.com/will-claude-design-replace-designers-f92623f3befe) (Medium, April 2026)
- Ruben Hassid — [Claude Design](https://ruben.substack.com/p/claude-design) (How to AI, Substack)
- John Voorhees — [Hands-On with Anthropic Labs' Claude Design Preview](https://www.macstories.net/stories/hands-on-with-anthropic-labs-claude-design-preview/) (MacStories)
- Scroll Agency — [Claude Design (Anthropic): The Complete 2026 Guide](https://agence-scroll.com/en/blog/claude-design-anthropic-2026-guide)