How to Make Claude Produce Better Designs

TL;DR

Give Claude concrete examples of excellent design, then make it compare, critique, and iterate instead of relying on a generic prompt. Professional design systems, benchmark-driven design loops, and reusable local style recipes can improve websites, emails, presentations, thumbnails, and brand assets while maintaining greater visual consistency.

Transcript

I'm going to show you how to turn Claude into a design genius and destroy the AI slop monster forever with three simple but powerful techniques that will let you create designer level quality across anything quickly and avoid any costly mistakes. And so, if you haven't already, grab that beautiful coffee and let's dive straight in. Now, the war aga... Read More

Key Insights

• Claude produces recognizable AI design when it receives the same generic prompts as everyone else, because those prompts do not supply concrete examples of excellent human work or enough direction about the visual decisions that distinguish a polished design.
• AI design problems often appear through typography, imagery, hierarchy, color, and spacing. A result may no longer look obviously bad, yet repeated patterns across these five areas can still make it recognizable as generic AI output.
• Level One contains over 2,000 examples of excellent design, accompanied by extended views of hierarchy, explanations, color palettes, typography, Tailwind code, CSS variables, and design tokens that can provide Claude with a detailed visual architecture.
• A reference design system can guide an unrelated product concept. The demonstration applies Apple-inspired aesthetics to a titanium protein shake website, producing product bottles, bento-style sections, finish options, flavor content, and a structured page without receiving individual source images.
• A website comparison becomes more actionable when Claude receives the current site, a preferred reference site, and the reference design system. The requested output can be a concise HTML report that identifies differences and presents specific improvements.
• Claude identified three major gaps between Glaido and Linear: loose letter spacing, the absence of an elevation ladder, and hero artwork competing with the product. It also examined whitespace, shadows, accent frequency, border radii, line height, display weights, and color values.
• The design loop works by generating an artifact, using critic agents to evaluate it against a real benchmark, and continuing the iteration process. The example turns an image of a professional email campaign into usable HTML that more closely matches the reference.
• A local design operating system can generate images through OpenAI, OpenRouter, and Higgsfield, index images stored on a computer for search, and save style recipes. These capabilities support consistent thumbnails and reusable brand design patterns.

Questions & Answers

Q: How can Claude create better website designs?

Claude can create better websites when it receives a concrete professional design system rather than a generic request to make something attractive. The reference should expose hierarchy, typography, colors, spacing, CSS variables, design tokens, and related implementation details. Claude can then apply that architecture to a new concept, generate supporting imagery when needed, and improve the result through repeated iterations.

Q: Why does Claude produce recognizable AI design?

Claude produces recognizable AI design when it is given the same broad prompts used by everyone else and has no strong example of what excellent human design looks like. The output may not look overtly bad, but recurring choices in typography, imagery, hierarchy, color, and spacing remain visible. Better references and more specific evaluation criteria help reduce those repeated patterns.

Q: What design elements reveal generic AI output?

Generic AI output is often revealed by typography, imagery, hierarchy, color, and spacing. The issue can appear in small choices such as loose letter spacing, unsuitable line height, weak elevation, excessive accent use, inconsistent border radii, poor whitespace, or hero artwork that competes with the product. Examining these elements individually makes an otherwise vague design problem easier to articulate and correct.

Q: How do you compare an existing website with a better reference?

Give Claude the existing website, a reference website whose aesthetics you value, and any available design-system documentation for that reference. Ask for a ruthless but concise comparison of their visual differences and specific improvements. Claude can examine screenshots and describe differences in typography, spacing, hierarchy, shadows, colors, border radii, elevation, and composition, then organize the findings into an HTML report.

Q: What did Claude find when comparing Glaido with Linear?

Claude identified three major gaps in the comparison: Glaido's letter spacing was too loose, it lacked an elevation ladder, and its hero artwork competed with the product. The report also compared shadows, accent frequency, border-radius vocabulary, display weights, whitespace, line height, and color values. An interactive slider illustrated letter-spacing differences between the two websites.

Q: What is the design loop for Claude?

The design loop is an iterative process for moving from a visual reference to a usable artifact. Claude first builds the design, then critic agents compare the result with the selected benchmark and continue refining it. The demonstrated use case starts with an image of a professionally designed email campaign and works toward matching it as usable HTML rather than merely describing the image.

Q: How can Claude turn an email design image into usable HTML?

Start with an email campaign image that represents the desired quality, then use the design loop to have Claude build an HTML version and evaluate it against that benchmark. Critic agents repeatedly identify mismatches and drive further iterations until the output more closely resembles the reference. The described workflow then sends the result through Zapier as the authentication layer.

Q: How can a local design operating system improve brand consistency?

A local design operating system can combine image generation, asset discovery, and reusable style instructions. The described system generates images through OpenAI, OpenRouter, and Higgsfield, indexes every image on the computer so it can be searched, and saves style recipes for consistent thumbnails. The same approach can support repeatable design across websites, applications, presentations, emails, and other brand assets.

Summary & Key Takeaways

• Claude produces more useful design work when it receives professional references instead of generic aesthetic instructions. A gallery containing over 2,000 designs provides visual examples, hierarchy explanations, color palettes, typography, Tailwind code, CSS variables, and design tokens that Claude can apply to new projects or use when evaluating existing brands.

• A practical comparison workflow gives Claude an existing website, a stronger reference website, and its documented design system. Claude can then identify precise differences in letter spacing, elevation, hero composition, whitespace, hierarchy, shadows, accent frequency, border radii, line height, display weights, and color values, presenting the findings as an interactive HTML breakdown.

• The design loop extends the method beyond websites by repeatedly comparing generated work against a chosen benchmark. The broader design operating system runs locally, generates images through connected services, indexes computer images for search, and stores reusable style recipes, helping teams maintain consistent outputs across emails, presentations, websites, applications, thumbnails, and other brand assets.