You give Claude your brand colors, your fonts, maybe even a screenshot. And what you get back still looks like every other AI-generated website.

Because AI tools don't understand systems.
They understand patterns.
And the patterns they default to are generic.

It doesn't matter if you use Claude, Lovable, v0, or anything else.

They all make the same mistakes:

• Too many icons
• New button styles on every screen
• Random spacing
• Shadows that came from nowhere

Even if you start with a proper system, it breaks within a few prompts.

Why AI keeps breaking your brand

AI tools are trained on millions of websites. So they default to what's "average." And average means: generic SaaS look with a hero section, three feature cards, and a gradient.

To me, the real problem is that there's no single document that tells the AI: "These are the only styles you're allowed to use. Nothing else."

You can paste a screenshot. You can describe your brand. But that's not a system. That's a suggestion. And AI treats suggestions as starting points, not rules.

As George Lois once said: "Design can be art. Design can be simple. That's why it's so complicated."

And AI makes it even more complicated because it adds stuff you never asked for.

What actually worked with 2 clients

We tested this with two clients over the past few weeks. The goal was simple: take their existing brand identity and turn it into something that Claude, Anthropic, OpenAI, or any AI tool can use to build websites, prototypes, and slide decks that actually look right.

We created what we call a DesignMD file. It's a structured markdown document that captures every style from your current brand assets. Colors with exact hex values. Typography specs. Spacing rules. Component definitions. And most importantly: strict rules for what the AI is not allowed to add.

In about a one-week sprint, we were able to build presentations and prototypes that followed the system rigorously. No random icons. No new patterns. No AI slop.

What makes a good DesignMD file

After building a few of these, here's what I learned actually matters:

• Lock the raw data. Your colors, fonts, and spacing values should be untouchable. The AI can't modify them, only use them.
• Separate extraction from interpretation. The file should have raw tokens (exact values) and brand guidelines (how to use them). Two different things.
• Tell the AI what NOT to do. This is huge. "Don't introduce new icon sets. Don't add shadows that aren't in the system. Don't create new button variants." Rules like these keep things clean.
• Summarize, don't dump. Instead of listing 200 individual icons, say "Uses Untitled UI Icons (142 icons)." The AI needs context, not a data dump.
• Make it tool-agnostic. The document should never mention Figma or any specific tool. It should read as a neutral design system doc that works everywhere.

I built a plugin for you

I wanted to make this easier for everyone, so I built a Figma plugin called Figma to DesignMD.

You click one button, wait about 15 seconds, and it extracts your entire design file into a structured DesignMD document. Colors, typography, effects, components, variables, visual patterns. Everything.

The plugin does the dumb, thorough extraction. Then AI does the smart interpretation. That way the plugin can't miss things (it scans everything mechanically) and the AI can't hallucinate data (it only enhances what's already there).

This is for newsletter subscribers only, for now. You can download it and try it here: [Plugin Link]

One more thing

This is a brand new plugin and I'm actively improving it. If you try it, please send me your feedback at hello@grauberg.co. Tell me what worked, what didn't, how the output looked. I want to make this actually good, and your input helps a lot.