How to create ad designs with Claude Design: one brand system, every format

To create ad designs with Claude Design, build the brand's design system first (real font files, logos, colors, voice rules), then ask for one gallery page that renders every ad concept in every aspect ratio you buy, with the Meta ad copy, a safe-zone overlay and per-format PNG downloads. Review it with pinned comments and global rules in chat, then hand the project to Claude Code when you want an agent to regenerate or launch it.

That's the process we used for Adside's own ads: a handful of concepts, each rendered in seven formats, with the copy block and the downloads living on the same page as the artboards. The screenshot below is that project. Everything in this guide is what it took to get there, including the parts Claude Design doesn't do for you.

Why Claude Design for ad creatives

Claude Design is an Anthropic Labs product, launched on April 17, 2026, that produces designs, prototypes and slides as live code rather than as images.¹ It runs at claude.ai/design and in Claude Desktop, and it's included in Pro, Max, Team and Enterprise plans.² The layout is chat on the left, canvas on the right, and there are three ways to change what you see: talk to it, pin a comment on an element, or edit directly on the canvas.²

The reason it works for ads is the "as code" detail. An image model draws a picture of an ad: the headline is a picture of text, the logo is a picture of a logo, and both are slightly wrong. Claude Design sets your headline in your actual font file, places your actual SVG and lays your actual photo into a grid. A static performance ad is mostly a headline, a proof element, a logo and a photo on a brand background, so the first render is usually usable. The tenth render of an image model usually still has a typo.

Four things make it fit ad production, and they're what this guide is built around:

• Shared components. Every ad is built from the same primitives (headline, lockup, proof row, CTA pill), so the same concept in 9:16, 4:5 and 1:1 is one component at three sizes, not three files that drift apart.
• Comments pinned to elements. You click the thing that's wrong, write the note, and send a batch of notes to Claude at once.² That's how a client review already works, except the fix happens in the same place.
• Rules in chat that apply everywhere. "Never use em dashes" or "Don't say we can do it for you, say we run it for you" changes every headline on every artboard in one go, because the copy lives in one file.
• Handoff to Claude Code. The project exports to a coding agent through the Claude Design MCP server, so the same components can regenerate a set for the next client or push creatives straight to Meta.²

Two limits to know before you start. It doesn't generate photographs; Claude builds visuals in HTML and SVG, so you bring the product shots and the founder photos.¹⁸ And the export menu has no PNG option: it offers a zip, PDF, PPTX, standalone HTML, Canva and Claude Code.² Ad creatives need one PNG per format, so the gallery has to build its own download buttons. That's in the prompt in step 2.

Volume is why this matters. Motion's 2026 benchmarks, from 578,750 creatives across 6,015 Meta accounts, put the median mid-size account at 8 to 12 new creatives a week, enterprise accounts at nearly 19, and the winner rate at about 5%.¹³ Meta reported more than 8 million advertisers using its generative AI creative tools in the first quarter of 2026.¹⁴ Five concepts in seven formats is 35 files. By hand in Figma that's a day. From one gallery it's a review.

Step 1: Build the design system before you ask for an ad

Claude Design has a first-class object for this. You upload the assets that define the brand, it generates a design system (palette, typography, components, layout patterns), you review it, and you switch on Published. Every project you create in that organization then inherits it, and a design-system dropdown lets you pick it explicitly.³ Accepted sources include a codebase, design files, screenshots, "a well-designed PowerPoint or PDF", and individual assets like logos and type specimens.³

What to upload, and why each thing matters:

For Adside that meant the Sharp Grotesk and Geist font files, three logo colorways, six textures, six photos and four partner logos. If the preview says "Missing brand fonts" and offers an Upload fonts action, stop and upload them. A substitute font is the most common reason a first set looks generic, and everything made with one gets redone the day the real font arrives.

The voice rules are the part people skip, and the part that saves the most review time later. Ours are short:

Paste those into the design-system chat with the font and color roles, and ask for one tokens file plus a one-page voice reference. The full brief template is in the runbook. To change the system later, use Remix: a chat with the system itself rather than with any one project.³

Step 2: Ask for the gallery, not for an ad

The mistake most people make is asking for an ad. You get a nice ad. You ask for it in 9:16 and get a different nice ad. What you want is one page holding every concept in every format, built from shared parts, with the copy and the downloads next to the renders. Ask for that in the first message and you spend the rest of the session reviewing instead of re-describing.

Here's the prompt, trimmed. The full version with placeholders is in the runbook:

Why each piece is in there:

• Shared primitives and derived sizes. This turns "make it 9:16" from a redesign into a resize, and it's what makes step 4 possible: a rule can only apply everywhere if everywhere is the same code.
• The copy block with counters. Meta recommends 125 characters of primary text, 40 for the headline and 25 for the description; longer text still delivers but gets truncated, and where depends on the placement.⁸ Our block used 30 for the description because Meta's Marketplace spec says 30. The counter going red at 125 has caught more problems than anything else on the page. The CTA dropdown should list Meta's real buttons, since the media buyer picks from that same list in Ads Manager.⁹
• The safe-zone toggle. Step 3 has the numbers. The important word in the prompt is "BOTH": one registry that the layout and the overlay read. If the overlay keeps its own copy of the numbers, they disagree within a week.
• Per-format downloads. Because there's no PNG export in the menu.² The buttons render the artboard to a PNG at canvas resolution in the browser. Ask for the filename pattern too, or you get "download (14).png" seven times.

The formats themselves depend on what you buy. Here's what the ratios map to, with Meta's current recommended pixels:

On the first render, check five things and nothing else: the fonts and colors are yours (open one 9:16 at 100%), nothing sits in a red band with the toggle on, the counters read correctly, the 9:16 download is actually 1080 × 1920, and the filenames follow the pattern. Don't review copy yet. Structure first, words second.

Step 3: Safe zones, with the numbers

Meta publishes exact safe-zone numbers for one format only. For 9:16 ads in Stories and Reels, keep roughly 14% of the top, 35% of the bottom and 6% of each side free of text, logos and key creative elements; with a disclaimer, leave the bottom 40% free.⁴ ⁵ Stories used to be 20% at the bottom, and that older wording is still live on some Instagram help pages. Design to 35%: one 9:16 asset serves both placements, and the Reels caption, audio row and engagement column eat the bottom third.

For everything that isn't 9:16, Meta only says to keep the bottom and side edges free of key elements, with no numbers.⁴ So the rest of the registry is a house rule, and we label it that way in the overlay so nobody mistakes it for a platform spec:

Ads Manager has a Safe Zone Guardrail toggle that draws the same area as a yellow overlay at upload time. It's a fine last check and a terrible first one, because by then the set is done.⁴ Enforce safe zones in the layout primitive instead: a headline block positioned from the safe area rather than the canvas edge cannot land under the caption, on any format, however many concepts you add later.

Related: Meta no longer limits how much text an image can carry. The old 20% rule and the text-overlay tool are gone; the live guidance is legibility (a clean font, large enough, in a contrasting color) and staying inside the safe zone.¹⁰ Headline-led statics are fine. Headline-led statics with the headline under the Reels caption are not.

If the safe zone lives in a checklist, someone will ship a headline under the Reels caption. If it lives in the layout primitive, they can't.

Step 4: Comments for fixes, chat for rules

Claude Design gives you two ways to change a design. Using the right one for each kind of change is most of what separates a two-hour review from a two-day one.

Comments are for local fixes. Switch to Comment mode, click the element that's wrong, and write the note where it belongs: "logo too small here", "this photo crops badly at 9:16", "swap this sticker for the coil texture". Each pinned comment has a checkbox, so you batch a whole round of notes and send them to Claude at once.² Share the project inside your organization and a client review works the same way: they comment where they see the problem, the fix happens on that artboard.

Chat is for rules. Because the copy lives in one file and the ads share primitives, an instruction in the chat changes every concept in every format. The form to use is a rule, not a fix:

A small example from our session: we asked it to change the header from the week to today's date. It did, and it reported which validator warnings it had deliberately left alone (the scattered sticker pills on one concept, a decorative quote mark behind a headline) because they were intentional layering against the design system. That's what you want from a reviewer: do the thing, and say what you chose not to touch.

Three rounds is the budget. Round one is structure and safe zones, round two is copy, round three is polish: alignment, sticker placement, photo crops. After that, a new concept beats a fourth pass on an old one. Never accept, at any round: invented statistics, testimonials nobody supplied, platform logos the brand has no relationship with, text inside a red band, a substitute font.

One known issue worth knowing: comments can occasionally disappear before Claude reads them. If a round of notes doesn't land, paste the feedback into the chat instead.²

Step 5: Export to PNG today, to Claude Code when you want to automate

For today's upload, use the download buttons the gallery built: one per format, or the zip. Then check the delivered file rather than the artboard. Open the 9:16 PNG, confirm it's 1080 × 1920 (or 1440 × 2560), confirm nothing sits in the bottom 35%. Upload it to Ads Manager with the copy from the copy block, or drop the whole zip into a bulk launch so the naming convention is applied on the way in.

For everything after today, hand the project to a coding agent. In the export menu, choose Handoff to Claude Code, then Send to local coding agent. Claude Design gives you an import prompt; in Claude Code, add the Claude Design MCP server and authorize it, then paste the prompt.²

Notice the file list. It's the structure from step 2 made literal: all the copy in ad-copy.jsx, the shared components in ad-primitives.jsx, the formats and safe zones in placements.jsx, one file per concept group. Once that's local, an agent can swap the tokens and copy files to produce a set for the next client, render every format headlessly, and push the creatives to Meta through Meta's own MCP server or hand them to Adside to launch and monitor. We've covered connecting a Meta Ads MCP to Claude separately. Claude Code's /design skill goes the other direction, seeding a canvas of artboards from code you already have.¹⁷

The safe-zone registry earns its keep again here: the same fractions drive our video ads in the Remotion pipeline, so a static and a video for the same concept obey the same bands without anyone checking.

What goes wrong

• Generating ads before the design system exists. You get plausible ads in a substitute font with a redrawn logo, and you redo all of them. Build the system, publish it, then start.
• Asking for one ad at a time. Each ask is a fresh design with nothing shared, so a copy change means seven edits. Ask for the gallery.
• Letting the model invent claims. It will offer a "4.8 stars from 2,000 reviews" if you don't give it real proof. Put the approved claims in the voice rules and reject anything outside them.
• Discovering safe zones in Ads Manager. The yellow guardrail overlay is the last place to learn your headline is under the caption. Put the numbers in the layout.
• Expecting a PNG export. There isn't one in the menu. Ask for download buttons in the page, and check the file they produce.
• Reviewing in the wrong channel. Pixel nudges in the chat and global rules in comments both waste a round. Comments for the local, chat for the general.

Behind all six is the same point. A 2025 Monotype study of 1,008 creative professionals found 57% spend more than a quarter of their time on asset management, compliance checks and workflow bottlenecks.¹⁶ Resizing one ad into seven formats and retyping the copy into a spreadsheet is that work. Two in three video ad buyers already use generative AI for creative.¹⁵ The question isn't whether to use a tool like this. It's whether you set it up so the second set costs a tenth of the first.

Frequently asked questions