(Claude) Design is my Passion
Two weeks with Anthropic's new design tool: on-brand decks, a morning website redesign, and a Nano Banana workaround for image generation.
Two weeks ago I started incorporating Claude Design into my workflow, replacing Gamma in the process. This is the longer write-up I promised after my first impressions on LinkedIn: how the design system setup actually feels, why the output doesn't look like everyone else's, the morning I redesigned the work.flowers website with it, and the workaround for Anthropic’s lack of an image-generation model.
Quick context for anyone who hasn't seen it yet. Claude Design is a new Anthropic Labs product, currently in research preview, for collaborating with Claude on visual work: slide decks, prototypes, landing pages, one-pagers. It runs on Opus 4.7, ships with inline editing on a live canvas, and exposes the underlying HTML and CSS for every asset it produces.
I've been using it near-daily since launch, primarily for slide decks but also (more on this below) for our website. Here's what's worked, what's still rough, and the bits that surprised me.
Building the design system before you build anything else
The first thing Claude Design wants you to do is set up a design system, and that turns out to be the most important thing you can do.
When you create a workspace, Claude walks you through capturing your brand: colours, typography, spacing, illustration style, tone, components you reuse, patterns you avoid. You can point it at a Github repo of existing assets or a Figma design file, and it will read the system out of those directly. You can also feed it screenshots of your existing site or marketing assets and let it reverse-engineer the system.
I gave it our website, a repo containing our CSS style sheet, existing images we’d generated for blog posts and client proposals, and a few of the long-form decks I had drafted in Gamma. It pulled out a usable first cut on the first pass.
You can refine the system over time, and you can maintain more than one per workspace. Mine now has named colour tokens, two heading typefaces, body type, accent illustrations in the work.flowers palette, and a small set of slide templates I keep coming back to. I also have a separate system for one client engagement where the deliverables need to look like their brand, not mine.
This is one area where Claude Design really outshines Gamma. Gamma has customisable themes, but only up to a point: you're still working inside Gamma's idea of what a slide or document should look like, and the customisation options are very much on rails. For example, you can configure your brand colour palette, but Gamma still chooses its own colour palette for charts and graphs, which you can only override with a limited set of pre-defined options.
Claude Design treats your brand as a first-class input that gets re-applied to every project after that. After two weeks I haven't had to nudge it back to my colour palette or typography once.
Output that doesn't look like everyone else's
Every Gamma deck I've ever made still looks like a Gamma deck. The fonts, the layouts, the slightly templated feel; there's a Gamma-shaped silhouette under every theme.
A Claude Design deck looks like whatever style you've defined. Slides are generated as HTML and CSS, all 16:9 by default, and the layouts are composed from your components rather than slotted into a fixed grid. The same prompt produces visibly different output depending on which design system is active, which is exactly what you want.
The biggest practical side effect of the HTML/CSS approach is that the full code is exposed. Every slide has its underlying HTML and CSS visible alongside Claude's chain of thought, so if something is off, you can edit the code directly or tell Claude exactly what to change. There's no black box where Gamma decides how to render your slide for you.
In day-to-day use, this translates to much more granular control. Any spacing value, font weight, colour token, gradient stop, or layout rule is reachable and adjustable down to the individual property, and Claude can propagate a change across the whole deck once you've agreed what it should be. You don’t have to settle for "close enough to what I want" because the theme picker doesn't expose the right knob.
I should call out here that I know next to nothing about design, and haven't seriously looked at HTML since around 2003. So a nice side benefit of working in Claude Design is that I'm picking up CSS, HTML, and design fundamentals as I go. Claude explains what it's changing and why, and over enough iterations it has started to feel like pairing with a patient design engineer who happens to also be doing the typing. My favourite aspect of AI tools is not just using them to get work done for me, but to help me learn in the process.
The trade-off is speed. Generation and edits take longer in Claude Design than in Gamma, partly because every change is real code being rewritten and partly because Opus 4.7 isn't fast. It has felt noticeably faster over the past week, although that could be wishful thinking on my part. I'm happy with the trade because the output is genuinely on-brand on the first try; the time I save not redesigning every Gamma slide more than makes up for it.
A website redesign in a morning
I didn't start out planning to use Claude Design for our website. I built the company intro deck first, liked the result, and then thought about whether the same design system could drive the work.flowers site.
The site runs on Bullet.so on top of Notion as a CMS, with a small repo of custom CSS and HTML snippets injected through Bullet's custom code settings. So the surface area for a redesign is mostly a CSS file and a handful of edits to the source Notion pages, which suits Claude Design fine.
Like I said, I don’t know much about design, which meant I didn’t really have the language to clearly articulate to Claude what I wanted. So, just like working with a real-life designer, I started by simply telling Claude that I liked the deck it had created, and I wanted the website to look more like that. It then asked me a few clarifying questions, and then it mocked up and presented three different design directions for me to choose from:
From there, one clearly jumped out at me, and then I worked with Claude to refine it. The final output was an updated CSS style sheet, and a markdown file of instructions for things I would need to change on my source Notion pages. And, to take it a step further, I simply opened up the page in Notion and handed Notion AI those instructions to execute, so I wouldn’t have to make the edits manually. (Like an animal.)
The whole thing took a morning, multi-tasking on other projects while checking in on Claude periodically. There were a few rough edges, of course, but the iteration loop was fast enough that fixing them was trivial, and it was genuinely fun. By the end of the morning the site looked appreciably better, and the underlying CSS was far tidier than what I'd Frankensteined together over the past year.
This is the part I keep coming back to. I've used Claude Code for site work before, and the loop of "change CSS, refresh page, screenshot back into the chat, iterate" is functional but slow. Claude Design collapses that loop because the visual is the canvas. Comment on the live preview, watch it change, move on.
The Nano Banana hack: image generation via Zapier MCP
The single biggest gap in Claude Design is that Anthropic doesn't ship its own image generation model. For a tool aimed at decks, prototypes, and landing pages, that's a real hole. You can drop your own images in, but you can't ask Claude to generate the hero illustration for slide three.
The workaround took about five minutes to set up. Zapier MCP exposes any Zap as a tool that an MCP-compatible client (like Claude) can call directly. I wired up a Zap that calls Google's Gemini image model (a.k.a. Nano Banana, which is genuinely good and very fast) and pointed Claude Design at it. Once that connection was live, Claude immediately knew how to use it: when a slide needed an illustration, it called the Zap, got the image back, and dropped it into the deck without me having to choreograph the handoff.
A few things to note about this:
- The same trick works for any image generation provider Zapier supports. Gemini is what I'm using because Nano Banana is fast, cheap, and currently the best of the lot for the kind of stylised illustration I want. But I’m hearing great things about the new ChatGPT Images 2.0 model, and swapping them out would be trivial.
- Claude Design respects the design system when prompting the image model. I didn't have to tell it to ask for "a flat editorial illustration in the work.flowers palette"; It already knew.
- Once you have one MCP-exposed Zap working, you can add others (calendar lookups, CRM reads, link previews) and Claude Design picks them up the same way. The image-generation case is the obvious one, but you can connect any other tool you want.
It's a slightly hacky solution, but hacky solutions are my love language.
Other things I noticed in two weeks
A few smaller observations from the social post that didn't need their own section but are worth recording:
- Export is still rough. PowerPoint, PDF, and Canva are all available as export targets, but Claude has to translate HTML and CSS into each format and fidelity is hit-or-miss. PDF was wonky for the first week and is now near-instant and faithful, which is encouraging. Canva and
.pptxstill need work, but Canva also worked much better when I tried it again last week. The most reliable way to share a deck externally is as a standalone HTML bundle, which I host from a private GitHub repo behind gated access via a small Lovable app for client work. (More on that setup in a separate post.)
- No external sharing yet. You can share a design with anyone in your Claude workspace, but there's no view-or-comment link for external collaborators. That's the single biggest blocker for using Claude Design directly in client-facing workflows. The Lovable app gets me past it; native sharing would be better.
- The token bucket is its own thing. Claude Design draws from your overall token usage but has a separate session limit. Hit the Design limit before your overall limit and you start spending overage tokens, even if you have plenty of headroom on the main subscription. It generates a lot of code for everything, so it burns through that allowance fast; just setting up my design system on the first day blew right through that week’s usage limit. This may just be a research-preview thing; either way, it's worth knowing before you start a deep edit session and run out halfway.
- Memories, skills, and connectors all carry over. I wasn’t sure if they would, but they do, which is fantastic. Claude Design shares the same context as your Claude account, so it can read your Notion workspace, look up a case study, and pull a client's brand notes from your memory files without any additional setup. When I built the company intro deck, it pulled our NTUC case study from Notion on its own without any special prompting.
Verdict
Claude Design is still a little rough in places and a bit slow in others, but the it’s already improved markedly since launch. Three to six months from now it should easily be a serious Gamma replacement for anyone whose design system is more than a colour palette and a logo. For me, it already is. Decks come out on-brand on the first try, the website got a meaningful upgrade in a morning, and the Nano Banana workaround papers over the biggest gap.
If you spend a lot of time fighting Gamma's templated look, or you want a deck tool that actually understands your brand instead of theming around it, this is worth a real run.
If you want help wiring Claude Design (or Claude Cowork, or Claude Code) into the way your team actually works, get in touch.