Guides 9 min read

Use Claude Design to create an on-brand ad factory

One Claude Design project that turns your brand files into every ad, in every format, with the copy and the downloads. Build it once, reuse it for every campaign. The outcome, what you need, four steps, everything copy-pasteable.

Robin Choy

Founder · September 3, 2026

Today we build an ad factory: one Claude Design project that turns your brand files into a full set of ads, in every format you buy, with the Meta copy written and one zip per ratio. An afternoon the first time, an hour per brand after that. It works because Claude Design designs in code: real fonts, real SVGs, so the first render is usually usable and one rule in the chat changes every ad.¹ Statics only; video is the Remotion guide.

The outcome

The Adside ad gallery in Claude Design: a Meta ad copy panel with character counters, blue ad artboards, and per-format PNG download buttons under a concept — Adside's gallery: 24 concepts, nine formats each. Copy block left, artboards middle, one download button per format under every concept. The design system sits in the chat on the far left.

Every concept rendered in nine formats from one design system.
Meta ad copy per concept, counters at 125 / 40 / 30 characters.
Safe zones drawn on every artboard, from Meta's numbers.
One PNG per format, one zip per ratio, named for upload.
A project you hand to Claude Code when you want an agent to regenerate or launch it.

Two things it won't do: generate photos (bring your own)² and export PNGs from the menu (the page builds its own download buttons).³

What you'll need

Input	Format
Logo, every variant	SVG in black, white and brand color, plus a PNG mark
Fonts, the actual files	.woff2, .otf or .ttf, every weight. A named font without the file renders in a substitute
Colors and logo rules	Hex values with roles; minimum logo size, clear space. From the brand guidelines PDF if it's a client
Textures, stickers, photos	Transparent PNGs; product and team photos at full size
Proof	Partner logos and review badges you actually have
Voice rules	Words to use, words never to use, approved claims (template in step 1)
Angles	3 to 6 one-liners. Each becomes one concept
Formats, landing URL, CTA	Only the placements you buy; the real destination and button

Plus a Claude plan with Claude Design (Pro, Max, Team or Enterprise). Design systems live in an organization, so in practice Team or Enterprise.³ ⁴ Let's start.

Step 1: Design system (15 minutes)

Go to claude.ai/design. Create a design system. Fill in the blurb, attach the files from the table, click Continue to generation. Review, then switch to Published.⁴

The Claude Design set-up screen: a field for company name and blurb, then optional inputs to link code from GitHub or a folder on your computer, with a Continue to generation button — The design-system setup screen. The blurb and the files you attach are the whole input.

Paste this as the blurb, filled in:

Build our design system from the attached files.

Brand: {brand}, {one line: what it does, for whom}.
Fonts: {display font} for headlines, {text font} for everything else. Use the attached font files, never a substitute.
Colors: {hex, role} for each. Backgrounds: {white / brand color}. Never invent shades.
Logo: {which variant on which background}, minimum {n}px, clear space {n}px.
Corner radius: {n}px max. Shadows: {none / minimal}.
Textures and stickers: use the attached PNGs for emphasis, never generic icons or clip art.

Voice:
- Full sentences, contractions, plain words.
- Never use em dashes. Use a colon, a period or parentheses.
- Never use: {leverage, streamline, empower, unlock, transform}.
- Say "{preferred phrase}" instead of "{phrase to avoid}".
- No invented numbers, ROAS figures or testimonials. Approved claims only: {list}.
- CTA vocabulary: {"Learn more", "Book a call"}.

Output: color tokens, type scale, logo usage, button and pill components, a sticker label component, a one-page voice reference. One CSS/tokens file so the ad gallery can import it.

If the preview says "Missing brand fonts", upload them now. A substitute font is the number one reason a set looks generic.

Fonts, logos and voice rules first. Ads second.

Step 2: The gallery prompt (5 minutes, then wait)

New project, design system selected in the chat. Paste this as one message, with your angles:

Build an ad gallery page for Adside using the Adside design system. One HTML shell that
imports small files: ad-primitives.jsx (Canvas, headline, CTA, logo lockup, proof row,
sticker, texture), ads-a.jsx / ads-b.jsx (the ad objects, ~8 per file), ad-copy.jsx
(all platform copy keyed by ad id), gallery.jsx (rows, previews, capture, zip, overlays).

Concepts: 5, one per angle: [retargeting hero] [every Meta surface] [YC founders]
[proof wall] [offer]. Each ad object has an id, a title, a one-line note (angle and
why it exists), and exactly TWO authored layouts: Story (1080×1920) and Square (1080×1080).

Formats: nine per ad, resolved from the aspect name. Every ratio other than Story
re-hosts the Square layout; never hand-author a third layout.
  story 1080×1920 · square 1080×1080 · portrait 1080×1350 · landscape 1440×1080 (Reddit)
  wide 1920×1080 · twitter 1600×900 · link 1910×1000 · reddit banner 2144×256 · fb cover 1640×720

Reserved bands: feed formats reserve the bottom 20% for the headline the platform draws
under the image (15% on X, none on link/banner/cover). Render the ad at its authored
height and scale it uniformly into the unreserved area, so nothing can bleed into the band.
Point the CTA arrow down inside a reserved canvas. When a row has disclaimer text, render it
as a primitive inside the safe area and switch the 9:16 bottom band to 40%.

Type floor: nothing below 60px on a 1080-wide canvas. If copy doesn't fit at 60, cut the
copy or drop the element. Never shrink it.

Safe zones: a per-row toggle (off / feed / reels) drawing translucent red bands from one
registry: 9:16 top 270, bottom 670 (reels) or 380 (stories), sides 65 · 1:1 100px all
sides · 4:5 100px sides, 120px top and bottom. Layout and overlay read the same numbers.

Copy: a "Meta ad copy" block per row with Primary text, Headline, Description, an optional
Disclaimer, and a CTA dropdown from a fixed set (Learn More, Sign Up, Book Now). Counters at
125 / 40 / 30 that turn red past the limit but never block typing. Editable in place, persisted to
localStorage, with "Copy all" and "Reset to default".

Downloads: a hover download button on every preview, "Download all (zip)" per ad, and in
the page header both "Download all" and a "By ratio" dropdown that exports one ratio for
every ad as a single zip (adside-1x1.zip). Filenames: adside_{id}_{variant}_{suffix}_v{n}.png.

Advanced preview: a modal that shows the Square and Story layouts inside mockups of
Instagram Feed, Facebook Feed, Stories, Reels, Marketplace, Messenger and Audience Network.

Copy rules: follow the voice page. Never use em dashes. Only approved claims.
Headlines 3 to 7 words, one idea each.

Then paste this into the project's CLAUDE.md, so every ad you add later follows the same rules. It's the spec our gallery runs on:

# Project instructions: ad gallery

Whenever ad or paid-social creative is requested in this project, build ONE HTML gallery page with this structure. Never loose per-ad files.

## Files (small, imported by a thin HTML shell)
ad-primitives.jsx   Canvas, Display, CTA, logo lockup, proof row, sticker, texture. All shared primitives.
ads-a.jsx / ads-b.jsx / ads-c.jsx   the ad objects, ~8 per file
ad-copy.jsx         AD_COPY: platform copy keyed by ad id, plus the fixed CTA set
gallery.jsx         rows, previews, capture, zip, safe-zone overlays
gallery.css         page chrome
Export every shared component with Object.assign(window, {...}) at the end of its file.

## The ad object
const Ad07 = {
  id: '07', title: 'Performance KPI grid',
  note: "One sentence: angle, why it exists.",
  Story:  () => (<Canvas aspect="story">…</Canvas>),
  Square: () => (<Canvas aspect="square">…</Canvas>),
};
Author only TWO layouts per ad: Story (9:16) and Square (1:1). Every other ratio re-hosts Square through an aspect-override context. Never hand-author a third layout.

## Formats (nine per ad; Canvas resolves pixels from the aspect name)
story 1080×1920 · square 1080×1080 · portrait 1080×1350 · landscape 1440×1080 · wide 1920×1080 · twitter 1600×900 · link 1910×1000 · banner 2144×256 · cover 1640×720

## Reserved bands (the load-bearing rule)
Feed formats reserve a bottom band for the headline the platform draws under the image. Do not squeeze the layout into what's left. Render the ad at its authored height in an oversized box and scale it uniformly into the unreserved area:
  RESERVE = { story: .2, square: .2, portrait: .2, landscape: .2, wide: .2, twitter: .15, link: 0, banner: 0, cover: 0 }
  scale = (h * (1 - reserve)) / authoredH
Hoist background layers out of the scaled box so the band is still painted. Point the CTA arrow downward inside a reserved canvas.

## Type floor
Nothing below 60px on a 1080-wide canvas. If copy doesn't fit at 60, cut copy or drop the element. Never shrink. State exemptions (CTA labels, sticker pills, logo lockups, mockup chrome) instead of leaving them silent.

## Safe zones (one registry, read by layout AND overlay)
9:16: top 270, bottom 670 (reels) or 380 (stories), sides 65 · 1:1: 100 all sides · 4:5: 100 sides, 120 top and bottom. Per-row toggle: off / feed / reels.

## Row anatomy
id + title · nine previews · the note · editable copy fields (Primary text 125 / Headline 40 / Description 30, red past the limit, never blocking; CTA from a fixed set; persisted to localStorage; Copy all, Reset to default) · feedback box · hover download on every preview · "Download all (zip)" per ad.

## Bulk download
Header carries BOTH "Download all (N) as zip" and a "By ratio ▾" dropdown that exports one ratio for every ad as a single zip ({brand}-1x1.zip). One downloadFormats(formats, zipName, label) driven by the FORMATS array. Always one zip, store-only. Filenames: {brand}_{id}_{variant}_{suffix}_v{n}.png.

## Copy rules
Follow the design system's voice page. Never use em dashes. Approved claims only. Headlines 3 to 7 words, one idea each. Keep CTAs to one to three buttons across the set.

Why the prompt is shaped like that, in four lines. Two authored layouts (9:16 and 1:1) re-hosted into the rest is what makes "make it 4:5" a resize and a chat rule a global change. Reserved bands stop your CTA stacking on the headline Feed draws under the image. The 60px floor stops the model shrinking copy instead of cutting it. Counters at 125 / 40 / 30 are Meta's recommended lengths; longer still delivers, truncated.⁵

First-render check

Open one 9:16 at 100%. Fonts and colors are yours.
Overlay on reels: nothing in a red band on any 9:16. On feed: nothing in a band on any square or portrait.
No CTA or headline in the reserved bottom band on feed formats.
No text under 60px at 1080 wide.
Counters read correctly; CTA defaults to the real one.
Download one 9:16 PNG: 1080 × 1920, same font as the artboard, textures present. Then the 1:1 zip: one file per ad.

Don't review copy yet. Structure first, words second. If the fonts are wrong, back to step 1.

Step 3: Review (three rounds)

Comments for local fixes: Comment mode, click the element, pin the note, tick the notes, send the batch.³ Chat for rules; the copy lives in one file and the ads share primitives, so one instruction changes every concept in every format:

Never use em dashes anywhere. Replace the ones you used with a colon or a period.

Don't say "we can do it for you". Say "we run it for you". Apply everywhere.

Every headline must fit on two lines at 9:16. Shorten the ones that wrap to three.

Move the logo lockup into the top safe band on every 9:16. Never in the bottom 35%.

Replace concept 3 with a new angle: {one line}. Leave the others alone.

Round one structure and safe zones, round two copy, round three polish. After that a new concept beats a fourth pass. Never accept invented statistics, testimonials nobody supplied, logos the brand has no relationship with, text in a red band, or a substitute font. If a batch of comments doesn't land (it happens³), paste the notes into the chat.

Step 4: Export

Today: the download buttons or the by-ratio zip. Open the 9:16 PNG, confirm 1080 × 1920 and nothing in the bottom 670 pixels. Upload with the copy from the copy block, or drop the zip into a bulk launch so the naming convention is applied on the way in.

After today: hand the project to Claude Code.³

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
/design-login

# then paste the prompt Claude Design generated (Export → Handoff to Claude Code → Send to local coding agent):
Use the claude_design MCP (https://api.anthropic.com/v1/design/mcp, auth via /design-login)
to import this project: https://claude.ai/design/p/<project-id>?file=Adside+Ads.html
Focus on these files: Adside Ads.html, assets/… (fonts, logos, textures, photos)
Also read the files the selection imports: ad-copy.jsx, ad-primitives.jsx, ads-a.jsx,
ads-b.jsx, ads-c.jsx, ads-banners.jsx, ads-videos.jsx, placements.jsx, gallery.jsx,
colors_and_type.css, gallery.css
Implement: the selected files

claude-design and claude_design are the same server. Once local, an agent swaps the tokens and copy files for the next brand, renders every format headlessly, and pushes creatives to Meta through Meta's MCP (how to connect it). From then on the repo is the source of truth; archive the Design project.

With a client

One design system per brand, unpublished. Published systems are inherited by every new project in the organization.⁴ Pick it per project; name projects {client}-{campaign}-{yyyymmdd}.
The client signs off on a file. Share links stay inside your organization,³ so send the PDF or the zip plus copy, get the yes on that version, bump v{n}.
Disclaimers are a primitive. A row in the copy block; its presence switches the 9:16 band to 40%.⁶
After handoff, the repo wins. Post-launch changes go into the code.

The numbers

We render 1080 wide. Meta's recommended resolutions are 1440 × 2560 for 9:16 and 1440 × 1800 for 4:5, one pixelRatio: 2 away.⁷ ⁸

Aspect	Canvas	Where it runs
story 9:16	1080 × 1920	Facebook and Instagram Stories, Reels, Audience Network, Shorts.¹⁰
square 1:1	1080 × 1080	Instagram Feed images, Marketplace, right column, carousel, LinkedIn, X.¹⁰
portrait 4:5	1080 × 1350	Facebook Feed. Meta now recommends 4:5 over 1:1 for single-image Feed ads.⁹ LinkedIn vertical at 720 × 900, mobile only.¹¹
landscape 4:3	1440 × 1080	Reddit desktop. Accepted in Meta Feed, recommended nowhere on Meta.¹⁰
wide 16:9	1920 × 1080	Facebook in-stream, YouTube, LinkedIn desktop, decks.
twitter	1600 × 900	X image ads (X lists 16:9 at 1920 × 1080 and 1.91:1 at 2064 × 1080).¹²
link 1.91:1	1910 × 1000	LinkedIn landscape (1200 × 628), Google Display, link previews.¹¹
banner	2144 × 256	Reddit community banner, at 2×.
cover	1640 × 720	Facebook Page cover, at 2×.

Safe zones

Meta's official 9:16 numbers: 14% top, 35% bottom, 6% sides; 40% bottom with a disclaimer. Same for Stories and Reels now.⁶ ⁷

9:16 band	Share	On 1080 × 1920	On 1440 × 2560
Top	14%	269 px (we draw 270)	358 px
Bottom	35%	672 px (we draw 670)	896 px
Bottom, with a disclaimer	40%	768 px	1024 px
Each side	6%	65 px	86 px
Usable area		950 × 979 px	1268 × 1306 px

For every other ratio Meta gives no numbers,⁶ so these are house rules and the overlay labels them that way:

Overlay mode	Canvas	Top	Bottom	Sides	Status
reels (9:16)	1080 × 1920	270 px	670 px	65 px	Meta official (14% / 35% / 6%)
feed (9:16 Stories)	1080 × 1920	270 px	380 px	65 px	Meta's older Stories figure (20%). Use reels unless the asset never runs in Reels.
feed (1:1)	1080 × 1080	100 px	100 px	100 px	House rule
feed (4:5)	1080 × 1350	120 px	120 px	100 px	House rule

Safe zone and reserved band are different things: the safe zone is where the platform's UI sits on top of your image; the reserved band is where Feed draws the headline under it. Ads Manager's Safe Zone Guardrail shows the first at upload time,⁶ which is too late; put the numbers in the layout. Copy: 125 / 40 / 25 recommended by Meta, our description counter uses 30 from the Marketplace spec;⁵ CTA buttons from Meta's list, which depends on the objective;⁹ no cap on text in the image any more.¹⁰ Ratios by placement, LinkedIn and X sizes: sources.¹¹ ¹² ¹³

Frequently asked questions

Does Claude Design export PNG files?

Not from the export menu. The built-in options are Download as .zip, Export as PDF, Export as PPTX, Export as standalone HTML, Send to Canva and Handoff to Claude Code. For ad creatives you need one PNG per format, so ask for download buttons inside the gallery page itself: one per aspect ratio at the canvas resolution, plus a download-all zip. Check the delivered file, not the artboard, before uploading.

What are Meta's safe zones for Reels and Stories in 2026?

For 9:16 ads in Stories and Reels, Meta says to keep roughly 14% of the top, 35% of the bottom and 6% of each side free of text, logos and key creative elements. On a 1080 by 1920 canvas that is 270 pixels at the top, 670 pixels at the bottom and 65 pixels on each side. If the ad carries a disclaimer, leave the bottom 40% free. Stories and Reels now share the same numbers, so design one 9:16 asset to the 35% rule.

Which aspect ratios do I need for Meta ads?

Three cover almost everything: 9:16 for Stories, Reels and Audience Network, 4:5 for Facebook Feed (Meta now recommends 4:5 rather than 1:1 for single-image Feed ads), and 1:1 for Instagram Feed images, Marketplace and the right column. 1080 wide is accepted everywhere; Meta's recommended resolutions are 1440 by 2560 and 1440 by 1800. Add 16:9 for in-stream and 1.91:1 if the same set runs on LinkedIn or X. 4:3 is accepted in Feed but recommended nowhere on Meta.

How long should Meta primary text, headline and description be?

Meta's recommendation for most placements is 125 characters of primary text, 40 for the headline and 25 for the description (its Marketplace spec says 30). These are recommendations, not hard limits: longer text still delivers, it just gets truncated. Mobile Feed collapses primary text behind See more at about 125 characters, Reels shows about 44, and the Facebook Feed headline cuts at around 27. Build counters into your copy block that turn red past the recommendation without blocking typing.

Which Claude plans include Claude Design?

Claude Design is included in Pro, Max, Team and Enterprise plans. For Enterprise organizations it is off by default until an admin enables it in organization settings. It is not available on the Free plan, and it runs on the web at claude.ai/design or from the Claude Desktop sidebar, not on mobile. Since the June 2026 update it draws on the same usage pool as chat, Claude Code and Cowork rather than a separate weekly allowance.

Sources

Claude Design launch, Anthropic Labs, code-rendered designs (April 17, 2026): Introducing Claude Design, Anthropic
Claude builds visuals in HTML and SVG rather than generating photographs: Can Claude produce images?, Claude Help Center
Plans, three ways to refine, pinned comments and batch send, export menu, Handoff to Claude Code, MCP server and /design-login, known comment issue, shared usage limits: Get started with Claude Design, Claude Help Center
Design system creation: accepted sources, generated palette/type/components, Published toggle, inheritance, Remix: Set up your design system in Claude Design, Claude Help Center
Recommended text lengths 125 / 40 / 25 and truncation: Creative best practices for text in ads, Meta Business Help Center
9:16 safe zone, 40% with disclaimers, non-9:16 guidance, Safe Zone Guardrail: About text overlays and the safe zone for ads in Stories and Reels, Meta Business Help Center
Reels image specs, 1440 × 2560, 14% / 35% / 6% wording: Instagram Reels image ads, Meta Ads Guide
Facebook Feed image ads, 4:5 at 1440 × 1800: Facebook Feed image ads, Meta Ads Guide
Call-to-action button inventory: Available call-to-action buttons in Meta Ads Manager, Meta Business Help Center
No limit on text in images, legibility guidance: Best practices for image ads, Meta Business Help Center
Aspect ratios supported and recommended by placement: Aspect ratios supported by placements in Meta Ads Manager, Meta Business Help Center
LinkedIn single image ad ratios, pixel sizes and text limits: Single image ads advertising specifications, LinkedIn Marketing Solutions Help
X image ad sizes and text limits: Creative ad specifications, X Business