Claude Design Review: Hands-On Brand Kit and Landing Page Test

Ben Peetermans — Sat, 18 Apr 2026 20:44:26 +0000

It's 2:10am. I'm on the couch watching Balls Up on Netflix (pretty hilarious, by the way) when the email hits my phone. Claude launched a design tool.

By morning, Figma's stock was down 7%.

As someone who has spent hundreds of hours in Figma and ships with Claude Code daily, I had one thought: I need to try this right now.

Why this matters

Figma is an excellent design tool. Its AI play, Make, has not been. I've tried Make multiple times. Beyond basic React components, you hit walls fast. Getting the preview to even render was a coin flip. For a company whose entire value proposition is "design to code," the AI bridge has been disappointingly narrow.

Meanwhile, LLMs have gotten extremely good at design. Claude Code, GPT, Cursor. Give them a clear concept and visual direction, and the output is genuinely usable. The missing piece was always the visual environment. Explaining layout intent through text is slow. Iterating through chat messages when you just want to nudge a heading 8px left is painful.

Claude launching a designer-friendly environment fills that gap.

And the timing isn't accidental. Claude has been stacking momentum. Cowork for pair programming. Claude Code becoming the go-to for AI-augmented development. The ChatGPT government contract controversy that positioned Anthropic as the privacy-first alternative. Design is another card in a hand that's getting harder to beat.

Testing it at 2am: brand kit from a GitHub repo

The first thing I wanted to try was the brand kit generation. I linked my GitHub repo for itbroke.dev, selected "brand kit," and sat back.

Claude started by exploring the repo structure. Reading CSS files, Blade templates, package.json, components. It built a 12-step checklist and started working through it: explore repo, read key files, import assets, set project title, create README, document content fundamentals, visual fundamentals, iconography, build preview cards, build UI kits, write SKILL.md.

The process took about 30-40 minutes for my Laravel build. Not fast. But my codebase is significant. Claude was reading actual source files, not screenshots. resources/css/app.css, public/css/frontend.css, the Blade templates. The tokens it extracted (#0a0a0a, #1f1f23, #22c55e, the 120px section rhythm) are real values lifted directly from the code.

One miss: it flagged custom fonts and asked me to upload them. They were Google Fonts. This is something it could have automated by just downloading them. Minor, but the kind of thing you notice at 2am.

What the brand kit produced

The output was comprehensive. This is work that would take a professional designer days to prepare manually.

26 preview cards across Colors, Type, Spacing, Components, and Brand. Two full UI kits (marketing site + app dashboard). A colors_and_type.css token file that unified two different CSS files that used different variable names for the same concepts. A SKILL.md file designed for Claude Code handoff.

The brand's signature (the ECG pulse motif from itbroke.dev) was identified and turned into a live canvas component with healthy/degraded/down state toggles. That's not template work. That's understanding the product.

Designing from the kit

With the brand kit loaded, I asked Claude to build a landing page for itbroke.dev. Before jumping into design, it asked clarifying questions: which hook angle, what overall feel, how many variations, what the hero visual should be.

This is where Claude Design does something Figma Make never could. It understands intent. It's not just placing components. It's asking "peace-of-mind hook or loss-aversion hook?" and "cinematic and quiet, or dense and confident?" before touching a pixel.

The result took 2-3 attempts. But the final output was a clean one-pager that went from Claude Design to live on production the same night.

The editing experience

This is where Claude Design genuinely impressed me.

Commenting on specific elements. Highlighting sections. Making actual, targeted edits with a proper inspector panel. Typography, spacing, colors, all adjustable visually.

This is where Claude Code was always frustrating for design work. Explaining visual changes through text, going back and forth, sometimes just giving up and making the CSS edit yourself. The design surface eliminates that friction. Click on the element, change the value, done.

Claude's own assessment

I asked Claude for an honest retro on the brand kit generation. It didn't hold back.

What went well: Source of truth was the codebase, not screenshots. The ECG pulse was identified as a brand signature and built into a live component. Tokens unified cleanly from two different CSS files. 26 small, useful cards instead of 6 dense ones.

What was weak: Icon coverage was thin (rebuilt ~25 paths, but the full codebase inlines more). No real product screenshots to reference. Some copy was fabricated to fill the kit (pricing tiers, fake testimonials, dashboard numbers). No marketing sub-pages were built despite existing in the repo.

What made it slow: Context exploration (reading ~10 files, recovering from a failed GitHub import) was 65% of the time. The actual authoring was 35%. Each of the 26 cards was hand-authored HTML with inline styles. A template + data array approach would have been faster.

Honest self-assessment from the tool itself. That's worth something.

Is this replacing Figma?

Depends on what you're doing.

For simple one-offs or quick designs, Figma is still better. You're in direct control. No overhead of explaining intent. Jump in, 20 minutes later, you have something handoff-ready. That workflow is hard to beat.

But for comprehensive brand systems where consistency is key and you need various views across a product, Claude Design beats Figma by a significant margin. Token-level fidelity. Understanding of the actual codebase. Components that reference real values instead of approximated ones.

Claude Design vs Figma Make

This is tough for me to judge fairly, because my Figma Make experience has been a disaster. Most of the time, I couldn't even get the preview to work. Anything beyond basic React was a dead end.

Claude Design actually works. That alone puts it ahead. The brand kit generation, the design questions, the editing interface. These aren't demos. They produced real output from a real codebase.

The real threat: Claude Code compatibility

Even if you prefer Figma for design, this is what should worry Figma long-term.

Claude Code is quickly becoming the go-to AI coding tool. With Design, Claude filled its biggest gap: the visual environment that bridges concept to code.

Design in Claude Design, ship in Claude Code. You could design a page, a website, or a full app, and have it live the same day.

Is that unique? Somewhat. Replit, Lovable, and similar tools all focus on prompt-to-product. But Claude's approach is different. It's not trying to be the "describe what you want and we'll build it" tool. It's the tool that still aims for refined, accurate work with tight control. More manual, but more precise.

That distinction matters. Prompt-to-product tools are the new Wix and Squarespace. Templates you can ship without touching code. And while that works for a lot of people, it doesn't work for everyone.

Claude's suite is shaping up to be the sharp tool in the pro's belt. The pipeline that serious builders actually trust for production work.

Framework output

Claude Design previews in JSX (React 18 in an iframe). That's the live preview runtime. But when you're done designing, you can ask it to convert the output to whatever your stack needs.

I tested this directly. My production stack is Laravel Blade + Alpine.js. Claude Design converted the React components to Blade partials with no issues. The tokens, spacing, and visual decisions carried over cleanly. No manual translation step.

The design system itself (CSS variables, SVG assets, spacing tokens) is framework-agnostic from the start. The component layer is the only thing that changes, and Claude handles that conversion on request.

What I'd tell a builder considering this

If you already use Claude Code, try Design. The handoff is seamless and the brand kit generation from a GitHub repo is genuinely useful. Not perfect. But useful in a way that saves real time.

If you're a Figma loyalist, don't panic. Figma is still the better tool for direct manipulation and team collaboration. But watch the pipeline. Claude's design-to-code-to-deploy chain is something Figma doesn't have an answer for yet.

And if you're evaluating both for the first time: try generating a brand kit from your repo at 2am while watching Netflix. That's a pretty good test of whether a tool fits your workflow.

DEV Community: Ben Peetermans