Claude Design: How I Build On-Brand Pages Fast

Claude Design: How I Build On-Brand Pages Fast

My first design in Claude Design was garbage. I typed "build me a landing page for an AI coaching program," watched Claude Opus 4.7 think for a bit, and got back exactly what I deserved: a perfectly competent, completely forgettable page. Blue gradient hero. The same sans-serif everyone uses. Card spacing that screamed "AI generated this." It wasn't broken. It was just generic — the kind of page that looks like ten thousand other pages.

I almost wrote the whole tool off right there. Then I checked my usage and noticed something that made me sit up: that one throwaway prompt had eaten a meaningful chunk of my weekly token budget. I'd spent real credits to generate something I'd never ship.

So I did what I should have done first. I went back, built an actual design system, refined my prompt in regular chat before touching the design canvas, and ran it again. The second output looked like a designer I'd pay good money for had made it. Same tool. Same model. Wildly different result. The difference was entirely in how I used it.

That gap — between "Claude Design is a toy" and "Claude Design is a real part of my product pipeline" — is the whole point of this post. Anthropic shipped Claude Design on April 17, 2026, as a research preview under Anthropic Labs, and most people are using it like a slot machine: prompt, pull the lever, hope. I'm going to show you the workflow that turns it into something repeatable, on-brand, and — with one MCP connection I'll get to later — actually live on the internet instead of a static mockup.

What Claude Design actually is (and what it's quietly replacing)

Claude Design is Anthropic's prompt-to-design workspace. You describe what you want — a landing page, an app prototype, a slide deck, a piece of motion graphics — and it generates the whole thing, visually, aligned to a brand style, without you opening Figma, Canva, or PowerPoint.

That positioning matters. This isn't a coding assistant that spits out a wall of HTML. It's a design surface. The output is something you look at, click on, and edit visually — and it's aiming directly at the workflows people currently split across three or four separate tools.

Here's the lineup it's quietly going after:

• Figma — for prototypes, app screens, and UI mockups
• Canva — for landing pages, social assets, and one-pagers
• PowerPoint / Google Slides — for pitch decks and investor presentations
• After Effects (lightly) — for quick motion graphics and animated infographics

According to Anthropic's launch announcement, Claude Design runs on the Claude Opus 4.7 vision model and is available in research preview for Pro, Max, Team, and Enterprise subscribers. It exports to PDF, PowerPoint (PPTX), standalone HTML, a ZIP archive, and — through a partnership announced the same day — straight into Canva, where the design becomes fully editable and collaborative.

One thing to set expectations on early: it's web only. There's no desktop app yet. You access it inside Claude.ai through a dedicated tab once you're logged in — look for the design icon in the left navigation. If you've been waiting for a native Mac or Windows build, you'll be waiting a while. Everything I'm about to walk through happens in the browser.

But the format isn't the interesting part. The interesting part is the single mistake that separates people who love this tool from people who churn out generic slop and burn their credits doing it.

The mistake almost everyone makes: vibe designing

There's a name I use for the way most people approach Claude Design. I call it vibe designing — the visual cousin of vibe coding, and just as dangerous to your output quality.

Vibe designing is when you type a loose, vibes-based prompt — "make me a clean modern landing page for my startup" — and let the model fill in every unspecified detail. The problem is that every unspecified detail is where brand identity lives. Colors. Typography. Button radius. Spacing rhythm. Section hierarchy. When you don't specify those, the model reaches for its defaults, and its defaults are the statistical average of the entire web. Statistically average is the definition of forgettable.

This is exactly the trap I fell into on my first try. And it's the same complaint I keep seeing across reviews — including one MindStudio piece specifically about escaping generic AI aesthetics — that the tool produces the classic green-and-blue "AI coding vibe" unless you give it real constraints to work within.

Vibe designing costs you twice. First, you get a generic result. Second — and this one actually hurts — you pay for it in tokens. Claude Design burns through credits much faster than a normal chat conversation. Multiple reviewers, including a detailed token management guide from MindStudio, have flagged that heavy design sessions can chew through limits alarmingly fast, with even a single button-with-states costing somewhere in the range of 1,000–2,000 tokens. Without structure, one unfocused session can swallow a large slice of your weekly quota and leave you with nothing worth shipping.

So the fix is mechanical and it's the foundation of everything else: stop vibe designing. Give the model a blueprint before you ask it to build anything. That blueprint has a name in Claude Design, and it's the single highest-leverage thing in the entire tool.

Design systems: the 15 minutes that change everything

A design system in Claude Design is a brand blueprint. It tells the model your colors, your typography, your component styles — buttons, cards, navigation — and a written description of your overall visual direction. Once it exists, every design you generate pulls from it automatically. The model stops guessing and starts executing your brand.

When you open Claude Design, the layout is straightforward. The left panel holds your creation types: Prototype (apps, dashboards, landing pages), Slide Deck, Template, and an "Other" catch-all. The right panel shows your recent designs, some examples to riff on, and — the one that matters most — a design systems tab.

You can build a design system two ways, and I've used both:

Option 1 — Describe it from scratch. You write out your style: "Primary color deep indigo #4F46E5, accent electric cyan, neutral slate backgrounds. Typography is a geometric sans for headings, a humanist sans for body. Buttons are pill-shaped with a subtle shadow. Overall feel: confident, technical, lots of breathing room." Claude turns that description into a structured system with a real palette and type scale.

Option 2 — Upload references. This is the one that feels like magic. You can hand Claude:

• Screenshots of an existing website you like
• A Figma file
• A GitHub repo link — and it'll crawl the code, extract your actual colors and fonts, and build the system from your real tokens

That last option is the killer. Anthropic's own help center walkthrough on setting up a design system confirms it reads your codebase and design files and generates a UI kit — palette, typography, and reusable components — from them. If you already have a live product, your brand already exists in your repo. Point Claude at it and your design system materializes in minutes.

Either way, budget about 15 minutes for this step. It feels like a detour when you're itching to generate something. It isn't. This is the difference between professional, brand-consistent output and the generic mush I got on attempt one. I've never once regretted spending the 15 minutes, and I've always regretted skipping it.

If you want to go deeper on the strategy behind building systems like this — the reasoning about tokens, scales, and component hierarchy — I broke that down in my guide to AI app design systems, and the Claude + Figma design system workflow covers how this thinking maps onto a more traditional design pipeline.

With the design system in place, there's one more habit that saves you a frustrating amount of money. And it happens outside Claude Design entirely.

How do you stop Claude Design from burning your token quota?

Refine your prompt in a regular Claude chat first, where there are no visuals and no design tokens being spent, then paste the finished prompt into Claude Design for a high-accuracy first generation. Because Claude Design charges for every visual render and iteration, every round of "no, make the hero bolder, actually move the pricing up, actually change the headline" inside the design canvas costs real tokens. Doing that thinking in plain chat is effectively free by comparison.

Here's my actual workflow. Before I generate anything in Claude Design, I open a normal Claude conversation and treat it like a planning session:

1. I describe the page I want and ask Claude to help me structure it — sections, hierarchy, the exact headline, the CTA copy, the pricing tiers.
2. We go back and forth in text until the spec is tight. No visuals. No tokens being torched.
3. Once I have a precise, detailed prompt I'm confident in, I copy it.
4. I paste that into Claude Design and generate. Because the prompt is already refined, the first render is usually the one I want.

This single habit cuts my Claude Design token spend dramatically. The token management discussions all circle the same conclusion: structure and discipline upfront are what keep this tool affordable in research preview. You do the cheap thinking in chat and save the expensive rendering for when you actually know what you want.

Alright. Design system built. Prompt refined off-platform. Now let's actually build something — and I'll use a real project I needed anyway.

Building a real landing page in Claude Design, step by step

The project: a landing page for an AI coaching program — a real one teaching AI automation workflows and prompt engineering. Here's exactly how I built it.

Step 1 — Pick the type. In the left panel I chose Prototype, then selected High Fidelity. Low fidelity is for wireframing the structure; high fidelity is for the polished, near-final look. I wanted something I could nearly ship.

Step 2 — Name it and, critically, attach the design system. This is the step people skip and then wonder why their output looks generic. Before generating, I attached my coaching-brand design system to the project. If you don't attach it first, Claude generates against its defaults and you're back to vibe designing.

Step 3 — Write the detailed prompt (the one I'd already refined in chat). It read roughly like this:

Build a high-fidelity landing page for an AI coaching program. Hero section with a bold headline and a single clear CTA. Below it, a program breakdown with sections covering AI automation workflows and prompt engineering. A testimonials section with three quotes. A two-tier pricing section. A closing CTA. Use the attached design system for all colors, typography, and components. Keep it clean and conversion-focused, not cluttered.

Notice the explicit instruction at the end: use the attached design system, keep it clean and conversion-focused. I spell that out every time. It's a small phrase that keeps the model anchored to the brand instead of drifting toward its averages.

Step 4 — Generate and review. The output came back on-brand: correct typography, the right palette, sensible layout, a hero that actually looked designed. Not "AI generated a page." More like "a competent designer spent an afternoon on this." That's the bar the design-system-first workflow clears that vibe designing never will.

This was the moment the tool flipped for me from novelty to genuinely useful. If you'd rather skip the learning curve entirely and have someone build your conversion pages and brand systems for you, that's exactly the kind of work I take on through my Fiverr profile — but honestly, once the workflow clicks, you can move shockingly fast on your own.

Now, the first generation is rarely perfect. The real skill is in how you edit it — and Claude Design's editing model is smarter than I expected.

Targeted editing: change one thing without nuking the rest

The thing that frustrates me most about a lot of AI generation tools is that asking for a small change triggers a full regeneration — and now your whole layout shifted, the parts you liked are gone, and you're worse off than before.

Claude Design doesn't work that way, and this is one of its best features. Editing is targeted.

A couple of examples from my coaching page:

Editing the hero headline. I clicked directly on the headline text and rewrote it inline, like editing a document. Done. No prompt, no regeneration, no waiting.

Adjusting the pricing cards. I wanted the recommended tier to visually pop more than the basic tier. So I left a comment on the pricing section — basically "make the recommended plan more prominent, add a highlight badge" — and Claude modified only that section. The hero, the program breakdown, the testimonials, the closing CTA: all untouched. It surgically changed the pricing cards and left everything else exactly as it was.

That's the behavior that makes iteration actually pleasant. You're not gambling your whole design every time you want to tweak something. You point at a section, describe the change, and Claude touches only what you pointed at. Geeky Gadgets noted this same section-level editing precision in their hands-on, and it tracks with everything I've seen.

There are also a couple of fast-path tools worth knowing about that skip prompting entirely.

The Tweaks panel and the Draw tool

The Tweaks panel is for quick adjustments you shouldn't waste a prompt on. It gives you direct controls for things like:

• Switching the color scheme
• Adjusting layout density and spacing
• Toggling dark mode
• Tightening the overall layout

These are one-click changes. No tokens spent rewriting a prompt to say "make it a bit tighter." You just nudge the slider or flip the toggle. For the small stuff, this is faster than typing.

The Draw tool is the one that surprised me. You can sketch a rough layout directly on the canvas — and I mean rough. For my testimonials, I literally drew three boxes in a row to indicate I wanted a three-column layout instead of the single stacked column Claude had generated. Claude interpreted my crude sketch and rebuilt only the testimonials section as a three-column grid.

Think about what that means. You don't need design vocabulary. You don't need to know the word "grid" or "flexbox" or "column." You draw a picture of what you want, and the model reads your intent and rebuilds that one section to match. It's the most natural design interface I've used in a while.

Start to finish, the full landing page took me about five minutes of active work. And it looked production-ready.

Here's the honest caveat, though, and it's a big one: at this stage, it's still a static design. It's gorgeous. It's on-brand. But it's a mockup. There's no live URL. The signup form doesn't capture anything. The pricing buttons don't take payments. To turn this beautiful static page into something real, you need a bridge — and that bridge is where Claude Design goes from "nice design tool" to "part of an actual product pipeline."

From static design to live site: the Lovable MCP bridge

Claude Design's output is static. To make it a real, functioning website with a live URL, working forms, and payments, I connect Lovable through MCP — the Model Context Protocol — which gives Claude a direct, real-time line to Lovable from inside the chat.

MCP is the open standard that lets Claude talk to external tools as if they were native features. Instead of exporting your design, downloading a ZIP, opening another app, and importing — you wire Lovable into Claude once, and from then on Claude can drive Lovable directly. No tab-switching. No manual handoff. (If MCP is new to you, I've written a full breakdown of the must-have MCPs for Claude Code that covers the mental model.)

Here's the exact setup, which you do in a regular Claude chat (not the design tab):

1. Go to Settings → Customize → Connectors.
2. Click Add custom connector.
3. Name it Lovable.
4. Paste the Lovable MCP URL — per Lovable's documentation, that's https://mcp.lovable.dev.
5. Sign into Lovable when Claude prompts you. OAuth is the only supported auth method, so you'll go through a normal sign-in flow.

Once that's connected, the Lovable tools show up in your chat composer's tool menu, and now the fun begins. I go back to my chat and simply say:

Build this landing page as a live, functional page in Lovable. Include the hero, program breakdown, testimonials, two-tier pricing, and closing CTA from the design I just made.

Claude sends the full layout and section data through MCP. Lovable receives it and generates the actual site automatically — no manual exports, no copy-pasting, no leaving the conversation. The static mockup becomes a living website.

And it doesn't stop at "the page exists." Because I'm still in the same chat, with the same connector live, I can add real functionality by just asking:

• "Add an email signup form to the hero and connect it to a database for lead capture." Now the form actually stores leads.
• "Add user authentication." Sign-up and login, handled.
• "Add Stripe so the pricing buttons take payments." Real checkout, wired in.
• "Set up the database for storing users and leads." Backend provisioned.

This is the part that genuinely changed how I think about the design-to-launch pipeline. I went from a text prompt, to an on-brand static design, to a live website with auth, a database, lead capture, and payments — without ever leaving Claude's interface. The whole "designer makes a mockup, throws it over the wall to a developer, who rebuilds it from scratch" process? Collapsed into one conversation.

That's the actual headline here. Not the slide decks. Not the motion graphics. The fact that Claude Design plus the Lovable MCP bridge turns designing a thing and shipping a working version of that thing into a single, continuous flow.

Speaking of slide decks and motion — those are worth a quick tour too, because the workflow is identical and the speed is wild.

Slide decks and motion graphics: same workflow, two minutes each

Once you understand the design-system-first pattern, everything else in Claude Design is just a variation on it.

Slide decks. Same flow exactly: attach your design system, write a detailed prompt, generate. I built a 5-slide investor pitch deck for an AI automation agency — title, problem, solution, traction, closing CTA — and it came back fully brand-consistent in roughly two to three minutes. Editing works the same as the landing page: I left comments on individual slides to tweak them, and in the UI I could reorder, add, and delete slides directly. Export options include PDF, PowerPoint, and — through the Canva integration — straight into Canva for collaborative editing. For founders who dread building decks, this is a genuine unlock. If you want the deeper Canva-specific angle, I covered the Claude + Canva connector workflow separately.

Motion graphics. This one's more of a "quick asset" tool than a professional animation suite, and I want to be honest about that. I built an animated infographic showing AI adoption growth over five years — animated bars rising, numbers counting up, smooth transitions between data points. It took about two minutes. It's perfect for social content, a presentation asset, or a quick explainer clip. It is not After Effects. You're not doing broadcast-grade motion design here. But for the 90% of cases where you just need a clean animated chart for a tweet or a slide, it absolutely delivers.

That honesty matters because it tells you when not to reach for the tool — and knowing a tool's edges is what separates someone who uses it well from someone who fights it. Now let me give you the handful of habits that make all of this faster the second, third, and fiftieth time.

The pro habits that compound over time

These are the things I wish I'd known on day one. Each one saves time or tokens, and together they turn Claude Design from a one-off generator into a repeatable system.

Save your winners as templates. When you build a design you love — a deck layout, a proposal format, a landing page structure — use "duplicate as a template." Now it's reusable. The next investor deck doesn't start from a blank prompt; it starts from the one that already worked. This is how you stop reinventing your own structure every single time.

Refine prompts off-platform, always. I covered this above but it's worth repeating because it's the highest-ROI habit: do your thinking in regular Claude chat where it's cheap, then bring the finished prompt to Claude Design where rendering is expensive. Treat the design canvas as a printer, not a brainstorming pad.

Use Skills to predefine your reusable content. This is the advanced move. Claude's Skills feature lets you predefine commonly used copy, standard section content, and layout preferences, then invoke them across projects. If every landing page you build has the same three trust-building sections and a particular pricing structure, you can encode that once as a Skill and pull it in instantly instead of re-typing it. Combined with saved templates, this is how teams build a genuinely consistent visual identity at speed instead of relying on whoever's prompting that day.

Stack those three habits on top of a solid design system and the off-platform prompt workflow, and Claude Design stops being a novelty you poke at occasionally. It becomes infrastructure.

What it gets right, and where I'd still push back

I've been enthusiastic through most of this, so let me be straight about the trade-offs, because no tool earns blind trust.

It's a research preview, and it acts like one. Things change. Features move. And the token economics are genuinely steep right now — Anthropic has acknowledged that heavy setup sessions burn limits fast and that they're looking at it. If you're on Pro and you design a lot, you will feel it. The off-platform-prompt discipline isn't optional advice; on the current pricing it's how you avoid hitting a wall mid-week.

Web only. No desktop app. If your workflow lives offline or you wanted a native experience, that's not here yet.

Static by default. Without the Lovable bridge, you're producing mockups. That's fine if a mockup is what you need — but the marketing framing ("build a landing page!") can mislead someone into thinking they've got a live site when they've got a picture of one. Know which one you actually need before you start.

Motion graphics have a ceiling. Great for quick charts and social clips. Don't bring it to a job that needs real motion design.

None of these are dealbreakers for me. They're the normal edges of a tool that shipped two months ago and is moving fast. What matters is that the core loop — design system, refined prompt, targeted editing, MCP-to-live — is solid today, and it's a loop that competitors split across four separate products.

The bigger picture: design just stopped being a separate step

When I started, I was looking at Claude Design as "a thing that makes pretty pictures from prompts." That framing is too small, and it's the framing that leads to vibe designing and burned credits.

Here's the reframe that stuck with me. Combine three things — a real design system, the off-platform prompt-refinement habit, and the Lovable-plus-MCP bridge — and Claude Design stops being a design tool and becomes a stage in your product pipeline. The wall between "design it" and "ship it" disappears. You think out loud in chat, the design renders on-brand, and a working version with auth, a database, and payments goes live — all in one continuous flow, in one interface.

That's not a faster version of the old process. It's a different process. The handoff that used to lose a week — designer to developer, mockup to code — just became a sentence in a conversation.

So here's your move for the next 24 hours: don't open Claude Design and start prompting. Spend the first 15 minutes building a real design system from your brand — or point it at your GitHub repo and let it extract one. Then design something. That single change in order is the entire difference between the garbage I made on my first try and the production-ready page I made on my second.

The tool's the same for everyone. The result isn't. Now you know why.

Let's Work Together

Looking to build AI systems, automate workflows, or scale your tech infrastructure? I'd love to help.

• Fiverr (custom builds & integrations): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (enterprise solutions): ramlit.com
• ColorPark (design & branding): colorpark.io
• xCyberSecurity (security services): xcybersecurity.io