Designing for Instagram with Claude

TLDR — I built a Claude skill that ingests both the Instagram and Instagram Business design systems, tokenizes the ad-format patterns specific to each surface and ad type, and generates designs directly inside Figma via MCP using real tokens and components. The unlock: non-designers could produce on-brand, spec-accurate Lead Gen ad designs themselves. We proved it at the team hackathon.

Context

The recurring problem with AI design generation is that the model doesn't know your system. Ask it for an ad unit and you get something that looks plausible but is wrong in every way that matters — off-spec spacing, invented colors, components that don't exist in your library. For a designer that's an annoyance you can correct. For a PM or engineer who wants to mock up an idea, it's a wall. They either learn Figma well enough to do it themselves, or they wait for a designer.

I wanted to remove that wall specifically for Instagram Business ad formats, where the constraints are tight and the system is the whole point. A Lead Gen ad that's slightly off isn't a draft — it's misleading about what we'd actually ship.

Approach

The skill does three things.

It reads both layers of the design system, not a screenshot of one. Instagram has two systems that stack. The general Instagram design system holds the foundation: components, color, typography, and the core surfaces — profile, feed, story, reels. On top of that sits the Instagram Business design system, which holds the patterns specific to business cases: the ad formats for each key surface (Story, Reels, Feed) and across each ad type (business messaging, lead generation, shopping, and so on).

I built the skill on both a token layer and a pattern layer, because they solve different halves of the accuracy problem. The token layer — color, type, and spacing variables — is structured data: a name bound to a value. The skill references the variable instead of guessing a value, which is what kills the invented-colors and off-spec-spacing failure mode entirely. The pattern layer — components and their compositions — is structured relationships: which components nest in which, in what order, with which tokens bound to which properties. A Lead Gen card in Feed isn't a token; it's the base system's tokens and components composed into the Business system's format rules for that specific surface and ad type. Tokens guarantee the values are right; patterns guarantee the composition is right. Neither alone is enough, so the skill does both.

It designs directly in Figma through MCP. This was the part that mattered most. Rather than generating code or an image that someone then has to rebuild, the skill operates inside Figma itself, placing real components and binding real tokens. The output isn't a picture of a design — it's a design, in the file, made of the same parts a designer would have used.

It accepts two kinds of input: a prompt or a screenshot. You can describe what you want in words ("a Lead Gen ad in Feed for a fitness studio with a single-field form") and get an on-system design. Or you can hand it a screenshot — a competitor's ad, a rough sketch, anything — and it reconstructs the intent using our components and tokens, mapped to the right surface and ad type. The prompt path is for starting from an idea; the screenshot path is for translating something you've already seen into our system.

Impact

The clearest signal was the hackathon. Cross-functional partners — PMs and engineers, people who don't open Figma — used the skill to produce Lead Gen ad designs that were higher quality than generic AI designs. On-system, on-token, the kind of thing that holds up in a real review because it's built from the real parts, composed to the right format for the surface.

That's the part I care about. The usual failure mode of "anyone can design now" tooling is that it lowers the floor by lowering the quality — everyone can make something, and everything looks generic. This did the opposite. It let non-designers produce work that was correct, because the correctness was enforced by the two systems underneath, not by the person's design skill. The skill carried the standards so the user didn't have to.

There's a second-order effect worth naming. When a PM can generate an accurate mock themselves, the conversation changes. Instead of describing an idea and waiting for a designer to interpret it, they bring a concrete artifact built in the right components, for the right surface and ad type. The design discussion starts further along. The designer's time goes to the hard judgment calls instead of the translation step.

Reflections

The method works, but still not perfect.

It's strong at recombination, weaker at novelty. The skill excels at assembling known patterns into known formats — which is exactly what ad formats are, a finite and specified set. The moment a task needs a genuinely new layout the system has no pattern for, it gets weaker. That's fine for this scope and would matter a lot for open-ended product design. Knowing which problems it fits is part of using it well.

Accurate still means a designer verifies. The real jump was moving non-designers from can't produce anything usable to produces something a designer can quickly validate. That's a large jump, but it's not zero-review. "Spec-accurate" means the remaining gap is small enough to catch in a fast pass, not that the pass goes away.

Some intent doesn't live in the file. MCP reads structure and properties well, but the reasoning behind a pattern — why it exists, when not to use it — lives in designers' heads, not in Figma. The skill follows rules it can see. The judgment it can't see is still the designer's job, which is the part I'd want it to be anyway.