[{"_1":2,"_84":-5,"_85":-5},"loaderData",{"_3":4,"_19":20},"root",{"_5":6,"_13":14},"env",{"_7":8,"_9":10,"_11":12},"PUBLIC_APP_ENV","production","PUBLIC_APP_FQDN","www.theadpharm.com","PUBLIC_TURNSTILE_SITE_KEY","0x4AAAAAADD1R3ybTHbU1ywg","preferences",{"_15":16,"_17":18},"sidebarWidth",240,"theme","system","routes/_app.insights.tag.$tag",{"_21":22,"_23":24},"tag","frontend","posts",[25],{"_26":27,"_28":29,"_30":31,"_76":77,"_78":79,"_80":81,"_82":83},"slug","claude-design-without-the-ai-slop-look","category","ai-and-tech","frontmatter",{"_32":33,"_34":35,"_36":37,"_28":29,"_38":39,"_46":47,"_49":50,"_51":50,"_52":53,"_54":55,"_56":57,"_63":64},"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","tags",[40,41,42,22,43,44,45],"claude-design","anthropic","ai-slop","design-systems","claude","opus-4-7","authors",[48],"ben-honda","draft",false,"featured","provenance","ai-research-with-human-curation","ogEyebrow","AI & Tech","keywords",[58,59,60,61,62],"claude design","claude design ai slop","frontend aesthetics cookbook","design.md","frontend-design skill","faq",[65,70,73],{"_66":67,"_68":69},"question","What is Claude Design and how is it different from the frontend-design skill?","answer","Claude Design is Anthropic's hosted visual workspace at claude.ai/design, launched April 17, 2026, running on Opus 4.7. The frontend-design skill is an open-source SKILL.md in the anthropics/skills repo that gives Claude Code (and any compatible agent) a 'design brain' before it writes code. Both share the same anti-slop philosophy. The product is the workspace; the skill is the design brain; the cookbook is the prompting craft. Treat them as a stack, not interchangeable.",{"_66":71,"_68":72},"Why does Claude Design produce generic AI-looking output by default?","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: Inter and Roboto, purple gradients, centered hero with two CTAs, three-up feature cards, generic glassmorphism. Anthropic itself names this 'AI slop' in its own cookbook. The anti-slop guardrails work but only when you actively invoke them with a DESIGN.md, the cookbook system prompt, a named aesthetic family, and a multi-reference brief.",{"_66":74,"_68":75},"Should I ship a Claude Design prototype straight to production?","No. 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 handoff bundle is a first-class feature for a reason. Multiple agencies report that Claude Design output looks shippable but has weak design-system variants, taped-together auth, and database designs that don't scale. Treat the prototype as the starting line for production work, not the finish line.","html","

\n
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.
\n

Anthropic shipped Claude Design 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 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:

The frontend-design skill, an open-source SKILL.md in anthropics/skills that gives Claude Code (and any compatible agent) a “design brain” before it writes code.
The Frontend Aesthetics Cookbook, the notebook Anthropic published 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:

\n
“You tend to converge toward generic, ‘on distribution’ outputs. In frontend design, this creates what users call the ‘AI slop’ aesthetic.”
\n

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, 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:

Direct attention to specific design dimensions (typography, color, motion, backgrounds) rather than asking for “a nice design.”
Reference design inspirations by name (IDE themes, magazine traditions, cultural aesthetics) without being prescriptive enough to clone them.
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>\nYou tend to converge toward generic, \"on distribution\" outputs. In frontend\ndesign, this creates what users call the \"AI slop\" aesthetic. Avoid this:\nmake creative, distinctive frontends that surprise and delight. Focus on:\n \nTypography: Choose fonts that are beautiful, unique, and interesting. Avoid\ngeneric fonts like Arial and Inter; opt instead for distinctive choices that\nelevate the frontend's aesthetics.\n \nColor & Theme: Commit to a cohesive aesthetic. Use CSS variables for\nconsistency. Dominant colors with sharp accents outperform timid,\nevenly-distributed palettes. Draw from IDE themes and cultural aesthetics\nfor inspiration.\n \nMotion: Use animations for effects and micro-interactions. Prioritize\nCSS-only solutions for HTML. Use Motion library for React when available.\nFocus on high-impact moments: one well-orchestrated page load with staggered\nreveals (animation-delay) creates more delight than scattered\nmicro-interactions.\n \nBackgrounds: Create atmosphere and depth rather than defaulting to solid\ncolors. Layer CSS gradients, use geometric patterns, or add contextual\neffects that match the overall aesthetic.\n \nAvoid generic AI-generated aesthetics:\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Clichéd color schemes (particularly purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n \nInterpret creatively and make unexpected choices that feel genuinely designed\nfor the context. Vary between light and dark themes, different fonts,\ndifferent aesthetics. You still tend to converge on common choices (Space\nGrotesk, for example) across generations. Avoid this: it is critical that\nyou think outside the box!\n</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 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:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

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

\n
Goal. Layout. Content. Constraints.
\n

Example:

\n
“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.”
\n

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:

\n
“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].”
\n

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 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 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 (April 17, 2026)
Prithvi Rajasekaran, Anthropic — Prompting for frontend aesthetics (Claude Cookbook) (October 21, 2025)
Anthropic — frontend-design SKILL.md
Justin Wetch — PR #210: Improve frontend-design skill clarity and actionability
rohitg00 — awesome-claude-design
VoltAgent — awesome-design-md
Michał Malewicz — Will Claude Design replace designers? (Medium, April 2026)
Ruben Hassid — Claude Design (How to AI, Substack)
John Voorhees — Hands-On with Anthropic Labs’ Claude Design Preview (MacStories)
Scroll Agency — Claude Design (Anthropic): The Complete 2026 Guide

","rawMarkdown","\n> 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.\n\nAnthropic 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.\n\nThat documentation is worth reading before you open the app.\n\n## What Claude Design actually is\n\n[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.\n\nIt's worth separating Claude Design from two adjacent things, because they're related and not the same:\n\n1. 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.\n2. 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.\"\n\nClaude 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.\n\n## The slop default Anthropic itself named\n\nThe most useful sentence Anthropic has published on this topic sits in the cookbook:\n\n> \"You tend to converge toward generic, 'on distribution' outputs. In frontend design, this creates what users call the 'AI slop' aesthetic.\"\n\nTranslation: 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.\n\n- Inter, Roboto, Arial. System fonts. Space Grotesk as the \"I tried\" upgrade.\n- Purple gradients on white. Pastel rainbow accents. Indigo-to-violet hero washes.\n- Centered hero with eyebrow plus 64-pt headline plus subhead plus two CTAs. Three-up feature cards. Logo soup. Pricing toggle. FAQ accordion.\n- Generic glassmorphism. Soft drop shadows. Animated gradient blobs.\n- Shadcn-default cards. Tailwind-default rounded-xl buttons. Identical nav.\n\nDesigner 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.\n\nAnthropic's three counter-strategies, distilled from the cookbook:\n\n1. Direct attention to specific design dimensions (typography, color, motion, backgrounds) rather than asking for \"a nice design.\"\n2. Reference design inspirations by name (IDE themes, magazine traditions, cultural aesthetics) without being prescriptive enough to clone them.\n3. Call out common defaults explicitly. Tell Claude, by name, what to avoid.\n\nThe cookbook ships a \"distilled aesthetics prompt\" you can paste into a Claude Design project's system prompt, or any `CLAUDE.md`. The verbatim core:\n\n```\n\nYou tend to converge toward generic, \"on distribution\" outputs. In frontend\ndesign, this creates what users call the \"AI slop\" aesthetic. Avoid this:\nmake creative, distinctive frontends that surprise and delight. Focus on:\n\nTypography: Choose fonts that are beautiful, unique, and interesting. Avoid\ngeneric fonts like Arial and Inter; opt instead for distinctive choices that\nelevate the frontend's aesthetics.\n\nColor & Theme: Commit to a cohesive aesthetic. Use CSS variables for\nconsistency. Dominant colors with sharp accents outperform timid,\nevenly-distributed palettes. Draw from IDE themes and cultural aesthetics\nfor inspiration.\n\nMotion: Use animations for effects and micro-interactions. Prioritize\nCSS-only solutions for HTML. Use Motion library for React when available.\nFocus on high-impact moments: one well-orchestrated page load with staggered\nreveals (animation-delay) creates more delight than scattered\nmicro-interactions.\n\nBackgrounds: Create atmosphere and depth rather than defaulting to solid\ncolors. Layer CSS gradients, use geometric patterns, or add contextual\neffects that match the overall aesthetic.\n\nAvoid generic AI-generated aesthetics:\n- Overused font families (Inter, Roboto, Arial, system fonts)\n- Clichéd color schemes (particularly purple gradients on white backgrounds)\n- Predictable layouts and component patterns\n- Cookie-cutter design that lacks context-specific character\n\nInterpret creatively and make unexpected choices that feel genuinely designed\nfor the context. Vary between light and dark themes, different fonts,\ndifferent aesthetics. You still tend to converge on common choices (Space\nGrotesk, for example) across generations. Avoid this: it is critical that\nyou think outside the box!\n\n```\n\nA 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.\n\n## Pick an aesthetic family. Then mix two\n\nThe 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.\n\nThe community has organized counter-aesthetics into families. A small subset from [rohitg00/awesome-claude-design](https://github.com/rohitg00/awesome-claude-design):\n\n| Family | Reference brands | Use it for |\n|---|---|---|\n| Editorial Minimalism | Linear, Stripe, Vercel, Mintlify | Read-heavy SaaS, docs, pricing |\n| Terminal-Core | Ollama, Warp, Raycast, OpenCode | Developer tools, CLI products |\n| Warm Editorial | Anthropic, Notion, Resend, Substack | Prosumer, knowledge tools |\n| Data-Dense Pro | ClickHouse, PostHog, Grafana, Sentry | Analytics, dashboards |\n| Cinematic Dark | Runway, ElevenLabs, Midjourney | AI products, creator tools |\n| Playful Color | Figma, Duolingo, Mailchimp, Cal.com | Consumer, education |\n| Glass / Soft-Futurism | Apple, Arc, Airbnb, Spotify | Premium consumer |\n| Neon Brutalist | The Verge, Pitchfork, PlayStation | Statement marketing pages |\n| Cult / Indie | A24, Criterion, Letterboxd, Obsidian | Anything that needs to feel like it took courage |\n\nNaming 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].\"\n\n## The DESIGN.md\n\nThis is the convention that makes the difference between \"every prompt is a new aesthetic\" and \"the brand survives the project.\"\n\nA `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.\n\nYou 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.\n\nThe 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.\n\n## Prompt with four inputs locked in\n\nHassid's framework, echoed across most of the launch-week walkthroughs:\n\n> Goal. Layout. Content. Constraints.\n\nExample:\n\n> *\"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.\"*\n\nVague 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.\n\nFor pitch-deck-style landing pages, the template that's been widely copied since launch:\n\n> *\"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].\"*\n\nThe \"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.\n\n## Iterate in Tweaks. Don't re-prompt\n\nThe 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.\n\nThe 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.\"\n\n[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.\n\n## Hand off to Claude Code. Don't ship from Claude Design\n\nThe 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.\n\nMultiple 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.\n\n## What still goes wrong\n\nThings that won't show up in the launch posts and are worth knowing.\n\nThe 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.\n\nLong 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.\n\nMulti-file Figma libraries are hit-or-miss. Single pages import cleanly. Complex `.fig` libraries with components and variants often fail. Re-export simplified.\n\nThere 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.\n\nCross-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.\n\n## What it produces depends entirely on how you brief it\n\nAnthropic'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.\n\nWithout 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.\n\nMalewicz'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.\n\nThe 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.\n\n## Sources\n\n- Anthropic — [Introducing Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) (April 17, 2026)\n- Prithvi Rajasekaran, Anthropic — [Prompting for frontend aesthetics (Claude Cookbook)](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics) (October 21, 2025)\n- Anthropic — [frontend-design SKILL.md](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)\n- Justin Wetch — [PR #210: Improve frontend-design skill clarity and actionability](https://github.com/anthropics/skills/pull/210)\n- rohitg00 — [awesome-claude-design](https://github.com/rohitg00/awesome-claude-design)\n- VoltAgent — [awesome-design-md](https://github.com/VoltAgent/awesome-design-md)\n- Michał Malewicz — [Will Claude Design replace designers?](https://michalmalewicz.medium.com/will-claude-design-replace-designers-f92623f3befe) (Medium, April 2026)\n- Ruben Hassid — [Claude Design](https://ruben.substack.com/p/claude-design) (How to AI, Substack)\n- John Voorhees — [Hands-On with Anthropic Labs' Claude Design Preview](https://www.macstories.net/stories/hands-on-with-anthropic-labs-claude-design-preview/) (MacStories)\n- Scroll Agency — [Claude Design (Anthropic): The Complete 2026 Guide](https://agence-scroll.com/en/blog/claude-design-anthropic-2026-guide)\n","readingTimeMin",10,"url","/insights/claude-design-without-the-ai-slop-look","actionData","errors"]