I’ll be honest with you. My LinkedIn carousels don’t match my website.
Different accent color. Slightly off fonts. Spacing that’s close but not quite right. If you lined up my Substack, my LinkedIn, and my pitch deck side by side, you’d see three things that look related but aren’t the same.
It’s not that I didn’t notice. I noticed every time. The problem is that aligning everything takes real effort, and that effort kept losing to the next AI Maker post deadline.
Then Claude Design launched with one feature that caught my attention: upload your brand assets once and every project after that inherits them automatically. One folder and Claude knows your colors, your fonts, your components — forever.
The catch is that you still have to build that folder.
Claude Design does give you a few shortcuts. You can import directly from GitHub or Figma if you already have your design system living there. But most of us don’t have either. No Figma file. No organized codebase. That means you’re back to scaffolding everything yourself — pulling colors, exporting fonts, documenting components, putting it all into the structure Claude expects. Which is a lot of work.
And here’s what I realized: most of us do have the brand. We just don’t have it in a folder.
It’s already on your website. Your colors are there. Your fonts are loaded. Your components are in the navbar and the cards and the pricing section. You already made every brand decision when you built those pages.
So I built a Claude skill that extracts it. You run it inside Claude Cowork or Claude Code: point it at your URL, it reads what’s already there and generates the output folder. Then you take that folder and upload it into Claude Design during onboarding. From that point forward, every project you generate in Claude Design — LinkedIn carousels, pitch decks, Instagram carousels — comes back consistent with your website.
But I know some of you might be thinking after reading this: “I don’t have a website yet. Does that mean I can’t use this?”
No. The skill handles that too.
Here’s an example from when I ran the skill, and it asked me whether I have a website.
If you have a website, the skill extracts your brand from it. If you don’t, it runs an expanded interview instead. You tell it your colors (or name a few brands you admire and it pulls their palettes so you have something to react to), share some of your writing, and describe your visual preferences. Same output either way: a complete brand folder that Claude can use forever.
This skill will run for 10–20 minutes, but you only need to run it once, and it will apply to your future sessions indefinitely.
I called the skill Design System Builder. That’s what this post walks through.
What Claude Design actually does
If you haven’t tried it yet, here’s the quick version:
Claude Design is a feature inside Claude that generates visual assets from prompts. Landing pages, websites, app designs, carousels, pitch decks, slide decks, infographics. You describe what you want, Claude builds it. No Figma, no starting from scratch.
The way I think about it, Claude Design has four core features, and each one matters for a different part of the workflow:
1. A brand design system
This is the piece we’re talking about in this post. You give Claude your brand once and everything it generates inherits it.
2. Clean export to PDF, PPTX, and Canva
Claude is already strong at coding, so you can have it build anything in HTML first and then convert into whatever format you need. A PDF for a client, a PPTX for a sponsor deck, or a Canva file you want to tweak by hand. The format stops being a constraint.
And you can also hand off to Claude Code to start building and make it live.
3. A built-in questionnaire
Before Claude generates anything, whether it’s a pitch deck, a LinkedIn carousel, or a website layout, it asks you a batch of questions first. Who’s the audience, what’s the goal, what tone, what length. You answer once and the output comes back way more aligned than if you just typed a one-line prompt.
4. Tweak Mode
Once Claude generates a design, you can ask it to enter Tweak Mode. From there you can experiment with different color palettes, gradients, or visual styles without starting over. Select the element you want to adjust and see the change right away. It turns the output into something you can iterate on visually, not just through prompts.
That third one is easy to miss, but it’s the feature that made me stop fighting with prompts. Instead of rewriting the same brief five times, I answer six questions and let Claude drive.
It’s still in research preview, so the output quality isn’t always perfect. But the direction is clear, and it’s already useful for a lot of what I ship. I’ve hit the weekly usage limit already :)
Here’s where it falls short, though. Claude Design does have a basic brand extraction. You point it at your URL and it pulls some colors, copy, and font names. But it misses the stuff that actually matters for consistency. How your gradients work. What your spacing rhythm looks like. Your voice. Your logo variants. The hard rules that keep everything tight.
You get something close. Not something accurate.
That’s the gap the skill closes.
🚨 Before I get into how it works, here’s what you’ll need if you want to follow along:
Claude for Chrome extension (required for accurate visual extraction)
Tavily MCP (the skill uses it to pull your website copy. Takes about five minutes to set up if you haven’t already. I covered the setup in a previous post)
Claude Code or Claude CoWork (either works to run the skill)
Opus 4.6 or 4.7 because you need the smartest model that can handle long‑running tasks autonomously
What the skill actually builds
Before getting into how it works, it helps to know what you’re getting out of it.
The output is a folder. Not a PDF brand guide. A folder of files that Claude can read and act on directly.
At the center is one file called brand.json. Think of it as the single source of truth for your entire brand. Your exact hex colors, your fonts, your spacing, your gradient rules, your voice patterns. Everything in one place. Every other file in the folder pulls from it. If you want to change your accent color six months from now, you update one line in brand.json and it updates everywhere else automatically.
Around that file, the skill generates templates for LinkedIn carousels, Instagram carousels, slide decks, reports, and email. It also generates hard rules that Claude follows as constraints, not suggestions. Not “the site uses dark colors.” Instead: “Background is always #0D0D0D.” Not “usually use Inter.” Instead: “Always use Inter, never any other font.” That specificity is what makes the output actually consistent.
And it’s not just visual rules. The folder also carries your voice. Headline length. Tone. Phrases you actually use. Phrases to avoid. A design system without copy rules produces work that looks right but sounds wrong. This one carries both.
When this folder is in Claude’s context, every design it generates respects all of it. Same colors. Same fonts. Same voice. Without you mentioning any of it.
Here’s the part I like most. The folder also installs as its own Claude Skill. So the next time you want a LinkedIn carousel, you just invoke /{your-brand}-design, describe what you need, and it comes back on-brand.
Here’s a recent LinkedIn carousel I created by extracting my brand from my consulting website:
That’s the meta-skill part. The design-system-builder skill runs once on your website and produces a brand-specific skill that lives in your skills folder permanently. One extraction. Every future session knows who you are.
How it builds your brand (two paths)
The skill starts with one question: “Do you have a live website that represents your brand?”
Your answer determines which path it takes. Both paths produce the same output folder.
Path A: You have a website
The skill extracts your brand in two separate ways, because visual tokens and copy require completely different tools.
Track 1: Visuals via Claude for Chrome
This track captures everything you can see: hex colors as actually rendered on the page, font families and weights, gradients, border radii, shadows, spacing rhythm, logo at real resolution. For this to work accurately, the page needs to be rendered in a real browser. Claude for Chrome handles this. You run the skill in Claude CoWork, it invokes Claude for Chrome, and runs the visual extraction prompt. The skill provides that prompt verbatim; all you need to do is paste it in and run it.
Make sure you’ve installed Claude for Chrome in your browser and that you’re logged in to your Claude account.
Track 2: Copy via Tavily or WebFetch
This track captures your written brand: homepage headlines, body paragraphs, tagline, positioning, named concepts, proof numerals. Plain text that doesn’t need a browser to extract accurately. The skill runs this track in-session automatically using Tavily. You don’t need to do anything for Track 2.
Both tracks run in parallel and merge into one brand.json. While you’re opening Chrome for Track 1, the skill is already pulling your copy in the background. By the time you paste the visual results back, Track 2 is done and everything gets combined into a single source of truth.
After extraction, the skill asks 6-8 short questions about things your site can’t reveal on its own: phrases to avoid, emoji policy, gradient rules, which format you ship most often. You answer once, and the manifest is complete.
Path B: You don’t have a website
I have a feeling that many of my readers don’t have a website yet. Maybe they’re just starting out. Maybe their brand lives in their head and in their social posts, but not on a domain yet.
Instead of extracting, the skill interviews you. It runs in three stages:
Stage 1: Identity
Your brand name, positioning, who you’re for, what makes you different.
Stage 2: Visual identity
This is where it gets interesting. Instead of asking you for hex codes (most people don’t think in hex codes), the skill asks you to name 2-3 brands you admire visually. It pulls those brands’ palettes using Tavily and presents them side by side. “Here’s what I found. What resonates? What doesn’t?” Your reactions build the palette. “I like that one’s darkness but the other one’s accent color” gives the skill a concrete starting point that’s way better than guessing.
You also describe your preferences: dark or light canvas, sharp corners or rounded, serif or sans-serif, gradient or no gradient.
Stage 3: Voice and rules
You share 3 headlines from your own writing (newsletter, social posts, emails, anything) and a paragraph or two. The skill analyzes your patterns and builds voice rules from them. Then the standard questions: banned phrases, emoji policy, proof numeral style, priority format.
The whole interview takes about 15 minutes. After that, the skill has enough to fill the same brand.json manifest and scaffold the same folder. The output is identical. A brand built from interview is not a lesser brand. If anything, it forces you to be more intentional about choices that website creators sometimes make by accident.
The principles that make this work
To be honest, I didn’t get all of these right the first time. Most of them got added after the skill produced something that looked correct but then fell apart in the next session. These are the rules that stuck after testing:
Be specific, not vague. This is the biggest one. If you tell Claude “usually use Inter for headings,” it forgets within a few sessions. If you tell Claude “always use Inter for headings, never use any other font,” it sticks. The skill builds these kinds of hard rules into every brand folder it generates. No “usually.” No “try to.” Just clear yes-or-no instructions that Claude can follow every time.
Voice matters as much as visuals. I had an early version that nailed the colors and fonts but completely ignored how I write. The carousels looked like my brand but sounded like someone else. A brand system has to carry both. How your headlines sound, what phrases you avoid, your tone. Otherwise you get visually correct work in the wrong voice.
Fill everything with real content. No “[INSERT HEADLINE HERE]” placeholders anywhere. Every slot in every template gets filled with your actual words during setup. I learned this one the hard way: if you leave placeholder text in the templates, Claude keeps producing placeholder-style output in future sessions. It picks up the pattern.
Keep fonts local. The skill downloads your font files and stores them inside the folder instead of loading them from the internet every time. External font sources can fail without warning, and then your whole design breaks silently. Local copies just work.
One file controls everything. All your brand decisions live in a single file called
brand.json. Every template in the folder pulls from that one file. If you want to change your accent color six months from now, you change it in one place and it updates everywhere. Without this, you’d be hunting through dozens of files to find every place a color was hardcoded.Each format gets its own layout. A LinkedIn carousel is 1080x1350 portrait. An Instagram carousel is 1080x1080 square. A pitch deck is 1920x1080 landscape. These are completely different shapes, and they need completely different layouts. The skill builds each one from scratch instead of shrinking a landscape slide to fit a portrait frame. That shortcut is what produces those awkward carousels with too much empty space in the middle.
These six rules are what separate a brand folder that works once from one that holds up over months of use. I learned most of them by watching the output break and figuring out why.
That said, there are real limitations here. I’d rather you know them going in than discover them halfway through.
Honest limitations
Claude for Chrome is the one step you can’t skip. I listed it in the prerequisites for a reason. Without it, the skill falls back to text-based guessing and you lose the whole point of accurate extraction.
You’ll probably need to provide some assets yourself. The skill pulls what it can from your website, but if your logo isn’t on the page, or you have a wordmark or icon variant that only lives on your hard drive, Claude can’t find it. You’ll need to drop those files into the assets folder manually after the skill runs. Same goes for any brand elements that aren’t publicly visible on your site.
This isn’t a one-shot process. I want to be transparent about that. The skill does a lot of the heavy lifting, but expect to go back and forth with Claude a few times. Maybe the colors are right but the voice rules need adjusting. Maybe the carousel layout needs another pass. You’re having a conversation with Claude until the output matches what you want. Think of it more like a working session than a magic button.
Sites with inconsistent design produce inconsistent extractions. If your brand has drifted over time and your homepage doesn’t match your about page, the skill will pick up on that inconsistency. Review
brand.jsonafter extraction and clean up anything that looks off before you upload.Claude Design is still in research preview, as I mentioned. Output quality varies by complexity. Simple carousels and decks come out well. More complex layouts can be hit or miss.
The brand kit is a snapshot. If you redesign your site later, you’ll want to re-run the skill to pick up the changes.
I’m still refining this. I’ve re-run the skill on my own site twice already to improve what the portrait carousel layout produces. It keeps getting better, but I’m not going to pretend it’s perfect yet.
None of these are dealbreakers. They’re just the honest reality of where the skill is right now. I’d rather ship something that works with known rough edges than wait for perfect.
🚨 What’s below for AI Maker Lab members
That’s the full picture of what this skill does and why I built it this way.
Below, Lab members get the hands-on part: how the skill actually runs phase by phase, what every file in the output folder does, two video walkthroughs (one for running the skill, one for uploading into Claude Design), five things you can ship the day after you set it up, and the link to download the skill itself.
After implementing this, you can create LinkedIn and Instagram carousels, pitch/presentation decks, social posts, and reports that follow your brand guidelines easily.
Now, let’s dive in.
