Use Claude Design to create an on-brand ad factory

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.

Why this is a Claude Design project and not a Figma file

The job was ordinary. Adside's YC campaign needed about 25 static concepts, each in every placement we buy, with the primary text, headline and description written and ready to paste into Ads Manager. That's 24 concepts times nine formats: 216 files. In Figma, with good auto-layout components, the first pass is a few hours. The cost is the rounds: every copy change touches nine artboards, every "make the logo bigger" touches nine, and by round three someone is uploading the round-one zip by mistake.

Claude Design produces designs as live code rather than as images.¹ That detail is what changes the economics. 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. And because every ad is built from the same components, a copy change is one edit and a rule in the chat is a change to all 216 files.

Three 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.² The export menu has no PNG option (it offers a zip, PDF, PPTX, standalone HTML, Canva and Claude Code), so the gallery has to build its own download buttons.³ And it draws on the same usage pool as chat, Claude Code and Cowork, so a session that renders 20-plus artboards is a real share of a Pro plan's week; design systems need an organization, so in practice this runs on a Team or Enterprise workspace.³⁴

Look at the screenshot again and the rest of this guide is a tour of it. The design system is the dropdown above the chat box. The gallery page is the prompt in step 2. The copy block, the safe-zone toggle and the download buttons are things we asked for in that prompt. The comments and the chat are step 3. The Handoff to Claude Code menu item is step 4. Building it takes an afternoon the first time and an hour for the next brand.

Step 1: Build the design system

Go to claude.ai/design, create a design system, and you get the screen below: a company name and blurb, then optional fields for a GitHub repo, a folder of code, design files, screenshots or brand assets. Fill in the blurb, attach the files, click Continue to generation. Claude builds the palette, type scale and components from what you gave it; you review, then switch it to Published so your projects use it. Anthropic's own walkthrough is here.⁴

What you attach decides everything downstream, so here is the list and why each item 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 go in the blurb, or in the first chat message once the system exists. Ours are short:

Ask for one tokens file plus a one-page voice reference so the gallery can import both. To change the system later, use Remix: a chat with the system itself rather than with any one project.⁴ The full brief template is in the runbook.

With the system published, every render from here inherits it. Now you can ask for the gallery.

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

If you ask for an ad, you get an ad. You ask for it in 9:16 and get a different ad. What you want is the page in the screenshot: 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, and once it works, paste it into the project's CLAUDE.md so every ad you add later follows it:

Each piece of that prompt is there because we needed it, not because it's nice to have:

• Two authored layouts, nine outputs. A 9:16 and a 1:1 are genuinely different compositions. Everything else (4:5, 4:3, 16:9, X, 1.91:1, banners) is the square layout re-hosted and scaled. This is what turns "make it 4:5" from a redesign into a resize, and it's what makes step 4 work: a rule can only apply everywhere if everywhere is the same code.
• Reserved bands. In Feed, the platform draws the headline and CTA under the image, and a layout that fills the canvas puts its own CTA right where that band lands. Scaling the authored ad into the top 80% makes the collision impossible instead of something a reviewer has to catch.
• A type floor. 60px on a 1080-wide canvas is the smallest text that survives a phone screen in Feed. The rule matters because the model's instinct when copy doesn't fit is to shrink it; the rule forces it to cut instead.
• 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.⁵ Ours counts to 30 on the description because Meta's Marketplace spec says 30. The Facebook Feed headline cuts at about 27 characters, so treat 27 as the soft limit and 40 as the hard one. Keep the CTA set small and fixed (ours is effectively one button, Learn More) rather than a different verb per ad, and pick from Meta's real inventory since the media buyer chooses from that same list in Ads Manager; which buttons are offered depends on the campaign objective.⁶
• One zip per ratio. The page renders each preview to a PNG in the browser with html-to-image and bundles them with an in-page store-only zip. Browser rasterizers fail in predictable ways: web fonts fall back, textures don't load, the file comes out at 2× or 0.5×. So the check is the delivered PNG next to the artboard, not the artboard. The "By ratio" dropdown is the one the media buyer actually uses: every ad at 4:5 in one file, ready for a bulk upload. Put a variant letter and a version in the filename (adside_07_b_4x5_v2.png) or round two overwrites round one and someone uploads the wrong zip.
• Placement mockups. "Advanced preview" drops the square and story layouts into phone-shell mockups of nine Meta placements. It's the fastest way to see that a Reels caption covers your headline before Ads Manager tells you.

The exact pixel sizes and safe-zone numbers the prompt refers to are collected in the numbers at the end, so the media buyer can find them without reading the process.

The first-render check

The first render arrives in a few minutes. Check these and nothing else. Don't review copy yet; structure first, words second.

1. Fonts and colors are the brand's. Open one 9:16 at 100% and compare the headline against the font file.
2. With the overlay set to reels, nothing sits in a red band on any 9:16; set to feed, nothing sits in a band on any square or portrait.
3. No CTA or headline inside the reserved bottom band on any feed format.
4. No text under 60px at 1080 wide, except the stated exemptions.
5. Counters read correctly and the CTA defaults to the real one.
6. Download one 9:16 PNG. Confirm 1080 × 1920, the same font as the artboard, textures present. Then the 1:1 by-ratio zip: one file per ad, right suffix.

If all six pass, you have a working gallery and the rest is review. If the fonts are wrong, go back to step 1; nothing else is worth fixing until they are.

Step 3: Comments for fixes, chat for rules

Claude Design gives you two ways to change a design. Using the wrong one wastes a round.

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.³ Inside your organization, a colleague's review works the same way. A client usually isn't in your organization, which changes things; see working with a client.

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:

Three internal rounds before anyone outside the team sees it: structure and safe zones, then copy, then polish (alignment, sticker placement, photo crops). After that, a new concept beats a fourth pass on an old one. Killing a concept is a chat instruction too: "Replace concept 3 with a new angle: {one line}" regenerates that one ad object and leaves the rest alone. 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: comments can disappear before Claude reads them.³ After sending a batch, check that the chat acknowledges the same number of notes you sent. If it doesn't, paste the feedback into the chat instead.

After round three the set is done. What's left is getting the files out.

Step 4: 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, confirm nothing sits in the bottom 670 pixels. 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 (ours is client_platform_objective_funnel_period, from the naming post) 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.³

The server registers as claude-design and the generated prompt calls it claude_design; same thing. 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 (an authorized account, an ad set and a human pressing go are still required) or hand them to Adside to launch and monitor. We've covered connecting a Meta Ads MCP to Claude separately.

From this point the repo is the source of truth. A change requested three days after launch goes into the code, and the Claude Design project is archived; two live copies fork within a week. The same 9:16 safe-zone 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.

Working with a client

Everything above is written as if the person prompting also owns the brand. An agency has six brands and a client who isn't in the Claude organization. Four things change.

• One design system per brand, and don't publish it. A published system is inherited by every new project in the organization,⁴ which for one brand is convenient and for six is how client A's textures end up in client B's ads. Keep each system as a draft, pick it explicitly from the dropdown when you create the project, and name projects {client}-{campaign}-{yyyymmdd}.
• The client signs off on a file, not a canvas. Share links are scoped to your organization,³ so the client can't comment on the artboards. Send the PDF export or the by-ratio zip plus the copy, get the yes on that exact version, and freeze it: the version number in the filename is what stops a round-three polish from silently changing approved copy.
• Disclaimers are a primitive, not a copy field. In finance, health, alcohol and anything with a claim, the disclaimer is required, has a minimum size, and interacts with the safe zone (Meta wants the bottom 40% clear on Reels when there is one).⁷ Make it a shared component with a row in the copy block, so its presence switches the band and nobody positions it by hand.
• After handoff, the repo is the source of truth. Once the project is in Claude Code, a change requested three days after launch goes into the code, and the Claude Design project is archived. Two live copies fork within a week.

The day this saves is a real day. It doesn't disappear from the invoice; it moves into the design system and the prompt, which you build once per client and reuse for every set after.

The numbers: formats and safe zones

Everything the prompt in step 2 refers to, in one place. Meta's recommended resolutions are higher than what we render (1440 × 2560 for 9:16, 1440 × 1800 for 4:5); 1080-wide is accepted and is what we ship, and a pixelRatio of 2 on the capture gets you the larger files if you want them.⁸⁹

Safe zones

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 the overlay labels it that way so nobody mistakes it for a platform spec. These are the numbers our gallery draws, in pixels on the canvas it renders:

Two different things are being protected here, and it's worth keeping them apart. The safe zone is where the platform's own UI (caption, handle, engagement column) sits on top of your image. The reserved band from step 2 is the space the platform uses under your image in Feed for the headline and CTA. The first is a Meta spec; the second is a layout decision that keeps your CTA and theirs from stacking.

Ads Manager has a Safe Zone Guardrail toggle in the placement preview that draws the same area as a yellow overlay.⁷ 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 20% rule is gone and the live guidance is legibility and staying inside the safe zone.¹³

Copy limits, for the counters: Meta recommends 125 characters of primary text, 40 for the headline and 25 for the description; text past that still delivers but gets truncated.⁵ The Facebook Feed headline cuts at about 27, so treat 27 as the soft limit. Our description counter uses 30 because Meta's Marketplace spec says 30. The CTA dropdown should list Meta's real buttons, since the media buyer picks from the same list in Ads Manager; which ones are offered depends on the campaign objective.⁶

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.

What goes wrong

• Generating ads before the design system exists. You get plausible ads in a substitute font and redo all of them.
• Asking for one ad at a time. Each ask is a fresh design with nothing shared, so a copy change means nine edits.
• 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.
• Trusting the artboard instead of the file. Browser rasterizers drop fonts and textures and double dimensions. The delivered PNG is the only thing that ships.
• Two sources of truth after handoff. Edits in the Design project and in the repo fork within a week. Pick the repo.

Set it up so the second set is a review, not a rebuild.

Frequently asked questions