If you run a newsletter, you know the visual gap.
The article’s done, the argument’s tight — and then you need a hero image, a one-pager for LinkedIn, a comparison graphic for a tool review. Ashwin Francis and I have a grab-bag of workarounds for this: prompting Claude for SVGs in chat, running a custom Claude Skill I built specifically for hero images and then leveraging Gemini’s Nano Banana to do the heavy lifting in cover image creation. It works. We could keep doing this indefinitely.
Last Friday, Anthropic launched Claude Design, and it made us rethink our visual workflows. The headlines called it a Figma competitor. It’s not — or at least, that’s not the interesting frame. It’s the first tool built for people who were never going to open Figma in the first place. PMs, founders, content creators, anyone who produces visual work as a means to an end rather than the end itself. Whether it actually closes the gap is the question worth testing.
I’ve spent the weekend running it against real Cash & Cache work — not to overhaul our workflow, but to see where it earns a place in it.
What we will cover today…
What Claude Design Actually Is 🎨
Not Figma, not an image generator
Claude Design is not a Figma replacement. If you’re a professional designer running multiplayer workflows with live cursors and version history, Figma is still your tool. It’s also not an image generator — it doesn’t produce photos, illustrations, or raster graphics the way Nano Banana 2 or Midjourney do.
Think of it this way. If Figma is a fully equipped art studio — easels, oil paints, colour theory charts on the wall — Claude Design is more like having a skilled illustrator sitting next to you who can sketch what you describe, in your brand’s style, and hand you something polished enough to frame or pass to the studio for finishing. You don’t need to know how to hold the brush.
A quick note on the market panic
Figma’s stock dropped 7% on launch day. Adobe fell in sympathy. Wix lost nearly 5%. If you follow markets, you’ll recognize the pattern — retail traders pricing in a category-killer before anyone’s shipped real work with the tool.
Having worked in financial markets before starting Cash & Cache, I’ve seen this movie enough times to flag it: the pessimism looks overblown. Claude Design has no multiplayer editing, no live cursors, no version history, no Figma export, and ships as a research preview with a weekly usage cap that burns through fast. Figma still holds the vast majority of professional UI/UX workflows. The stock move tells you more about how jumpy the market is around AI disruption narratives than about the actual competitive threat.
What the output actually looks like
Claude Design produces live, interactive HTML. Not a static mockup. Not a flattened PNG. When you prototype a landing page, buttons are clickable, hover states work, dark mode toggles actually toggle. The output is functional enough to user-test, share as a live URL, or hand directly to Claude Code for production implementation. It ships at claude.ai/design — chat on the left, live canvas on the right. You describe what you want, Claude builds a first version, you refine through conversation.
Access and the meter that matters
Powered by Claude Opus 4.7, Anthropic’s most capable vision model. Available as a research preview for Pro, Max, Team, and Enterprise subscribers (Enterprise needs admin activation). Usage is metered separately from your regular Claude chat and Code limits, on a weekly reset. The short version: Pro users should expect to hit the cap in about 30 minutes of serious use. Max is the realistic tier for regular work.
The Features That Matter ⚙️
Here’s what those features actually mean if you’re a non-designer trying to get visual work done.
Flexible inputs: start from whatever you have
You can type a text prompt, upload an image (a napkin sketch, a competitor’s screenshot, a wireframe), drop in a document (DOCX, PPTX, XLSX), or use the web capture tool to grab elements directly from a live website. That last one is the quiet power move: point it at your existing site and prototypes automatically inherit real DOM elements so the output looks like your actual product, not a generic mockup. Think of it like commissioning a painting — with most tools you’re limited to verbal description, but Claude Design lets you also hand over references, color palettes, and existing work to match against.
Brand consistency on autopilot
During onboarding, Claude reads your codebase or uploaded design files and infers a design system: your colours, typography, component patterns, spacing. Every project after that inherits this automatically. The hardest part of producing visual work without a design background isn’t making something that looks good once — it’s making it look consistent across everything you produce. Before Claude Design, that required a designer enforcing standards or you manually copying hex codes into every new project. It’s the difference between an artist who paints whatever they feel like and one who’s studied your portfolio and paints in your established style.
Caveat: the system is inferred, not imported from a formal spec. Clean source code produces clean design output. Messy repos produce generic output.
Refinement that feels like a conversation
Four channels running in parallel: global chat, inline comments on specific elements, direct text editing on the canvas, and custom sliders Claude generates on demand — font size, padding, colour hue, border radius. The sliders are the closest analogy to mixing paint on a palette: you adjust live until it looks right, then ask Claude to propagate the change everywhere. Your first prompt doesn’t need to be perfect. You describe the rough shape, then have a real conversation about what to change.
Exports and the Claude Code closed loop
Send finished work to Canva (fully editable), PDF, PPTX, standalone HTML, org-scoped URLs, or hand everything off to Claude Code. The handoff packages the components, the full chat log capturing your design intent, and a starter prompt. Brilliant, the education platform, reported their most complex lesson pages went from 20+ prompts in competing tools to 2 in Claude Design.
Because the output is real HTML, prototypes can also embed video, 3D elements, working AI calls, and shader effects. Overkill for newsletter work. Genuinely useful when demoing an AI product feature to stakeholders.
That’s the product. Now here’s what happened when I actually used it.
Putting It to Work: What I Built (and What Broke) 🧑💻
I ran Claude Design against five real tasks from our newsletter workflow. Three worked immediately, one surprised me, and one failed completely. All of it was useful.
🖌️ Use case 1: Turning an article into a shareable one-pager
The job: take our recent collab piece on Claude Cowork workflows and turn it into a single-page visual summary for LinkedIn.
Prompt 1: “Create a one-pager summarising this article. Include the title, 3-4 key takeaways, one pull quote, and Cash & Cache branding. Portrait orientation. Use our colours — Primary Navy: #0A1628 to #1A2838 gradient, Cyan/Teal: #00D9FF, Warm Orange: #FF8C42, Soft Purple: #9B72FF. Logo in the footnote.”
First output nailed the structure but the hierarchy was flat — everything had equal visual weight.
Prompt 2: “Make the article link clickable. Add interactive buttons — let readers tap to jump between Cowork use case categories instead of scrolling. Revert background to navy blue, restore previous colour treatment for fonts and accents.”
Claude Design added toggle buttons that let readers switch between content categories directly on the one-pager. On PDF, these render as clean sections. On the HTML version, they’re live and clickable. One prompt gave me a document that works in two formats.
Two prompts in total. Under 10 minutes. The Canva equivalent takes 20-30.
One of the most interesting features: the tweaks button on top right:
You can click on it and add a slider instruction to a text or an image to toggle between fonts, sizes, colour styles and more:
But the real unlock isn’t speed — it’s the export format. Save as HTML and readers can navigate directly to specific sections without scrolling. PDF/image for a polished attachment, HTML for an interactive experience — both from the same source.
❌ Use Case 2: Where it fell flat- hero images
I tried Claude Design for article cover visuals. Unusable. It produces structured HTML layouts, not the photorealistic imagery a hero image demands. For hero images, cover art, social graphics — Nano Banana 2 is still the right tool and it’s not close. This is the mistake a non-designer is most likely to make in the first session: reaching for the new tool for everything.
🖌️ Use case 3: Giving a tool evaluation visual teeth
We run tool evaluations through a custom AI Tool Evaluator — structured scoring that produces a thorough but visually plain comparison report. I tested whether Claude Design could turn that output into something worth interacting with, using a Cursor vs. Bolt comparison.
Prompt: “I evaluated Cursor and Bolt for developer use. Here’s the output [attached]. Turn this into a visual breakdown — each tool as a column, rows for pricing, best use case, key limitation, verdict. Use colour coding for quick scanning. Landscape orientation. Use interactive charts and toggle buttons where they add value.”
Claude Design built a four-tab interface: a spider graph scorecard, a head-to-head comparison, a strengths-and-limitations breakdown, and a verdict tab. The spider graph communicates in one glance what takes three paragraphs of prose.
The immediate thought: this could improve my AI Tool Evaluator’s output layer permanently. The evaluator does the hard work — structured scoring, consistent dimensions. What it doesn’t do is present that work visually.
If I pipe the output into Claude Design as a standard step, every review gets an interactive visual companion. The evaluator becomes the engine; Claude Design becomes the showroom.
🖌️ Use case 4: A sponsor pitch deck
Every newsletter eventually needs to pitch. The job usually means opening Google Slides, staring at a blank deck, spending an afternoon making it presentable.
Prompt: “Cash & Cache has 1,186 subscribers, 87 posts on AI, and a 32% open rate. Create a pitch deck — newsletter name, tagline, creator info, audience profile (AI practitioners, tech leaders, PMs), key metrics, value proposition for sponsors. Interactive buttons linking to our website. Attached brand logo. Clean, professional, on-brand.”
One prompt. Clean multi-slide deck, branding applied, metrics scannable, interactive links working in HTML, PPTX ready for email. Structure and layout solid enough that refinement took minutes. This extends beyond newsletters — any team lead presenting to C-suite, any PM pitching a feature direction, any AE preparing a proposal faces the same job: substance exists, visual wrapper doesn’t. Claude Design handles that wrapper fast enough that “I’ll just talk through it” stops being the default.
I saved our pitch deck in PPTX format and here’s what we can see:
📬 Like what we’re building at Cash & Cache? Our paid subscribers get deeper implementation guides, the actual Claude Skills and workflows behind articles like this one, and early access to the tool evaluations we run. If the practitioner detail in this piece is useful to you, the paid tier is where we go further.
🖌️ Use case 5: Bringing an old article to life
This was the biggest surprise. I took an older Cash & Cache article about building an AI agent using Make.com — connecting ChatGPT and Perplexity API calls and routing output to Google Docs. Strong content, but the workflow is text-heavy and sequential. The kind of process that belongs in a diagram but never got one.
Prompt: “Attached: step-by-step workflow to build an agent using Make.com. Create a workflow diagram — connected steps with brief labels, decision points where applicable, top-to-bottom flow. Clean, minimal. Interactive elements for readers. Navy blue background (#1A2838). Create a 1-minute animated video of the process in motion.”
Claude Design built the static diagram I expected — clean, connected, decision forks labelled.
But it also generated a one-minute animated walkthrough. The animation steps through each stage, highlighting connections as they activate, showing data flowing from API calls through to Google Docs. It’s as if the article were fully realised — a reader can watch the entire process instead of reading five paragraphs of sequential instructions.
This shifted my mental model. The other use cases are production shortcuts. Turning a text tutorial into an animated explanation is a different category — it takes published content and gives it a second life in a format that reaches readers who’d never sit through the article.
Use case 6: The step I wish I’d done first — building a design system
After four use cases of manually pasting hex codes and attaching logos, I finally set up a custom design system for Cash & Cache. Claude Design has a dedicated onboarding flow for this: you provide your brand name, link your codebase or upload design files, attach assets like logos and colour palettes, and add notes describing your visual identity. Claude infers a reusable system that every future project inherits automatically
I fed it our Substack site via web capture, the full colour palette as text, our logo, and a few notes about tone:
“Clean and professional but not corporate. Navy backgrounds are our default canvas. Cyan and orange are accents, not dominant. Authority without pretending to be bigger than we are.”
Then I pushed it further — I asked Claude Design to build a full website prototype for Cash & Cache using the design system. Newsletter name, branding, sections for free and paid subscribers, backlinks to published articles. It took a few iterations to get the logo placement right, fix some broken links, and adjust font sizes. But the result was a working website prototype with consistent branding, functional navigation, and clickable links — all generated from conversation.
The prototype isn’t a replacement for a production website — you’d still need Claude Code or a developer to harden it for real traffic. But as a starting point? It cuts the creative phase dramatically.
You go from “I have an idea for what my site should look like” to “here’s a working interactive prototype I can hand to engineering” in an afternoon. The handoff bundle to Claude Code includes the design intent, so the next step isn’t starting over — it’s refining what’s already there.
The design system itself is the compound-interest move. Every use case in this article would have taken one fewer prompt if I’d set it up first. No more pasting hex codes. No more attaching the logo. No more describing our colour treatment from scratch. Twenty minutes of setup; hours saved across every future project.
When to Reach for Claude Design (and When Not To)
Claude Design earns its place when the job is structure — a one-pager, a comparison visual, a pitch slide, a workflow diagram, a website prototype. The pattern: the more structured your input, the better the output. Feed it a finished article, evaluation data, metrics, or a process walkthrough — strong results. Type something vague — generic output, wasted prompt.
For photorealistic hero images, illustrations, social graphics — Nano Banana 2 remains the right call. If the output should be a picture, use an image generator. If it should be a layout or interactive visual, use Claude Design.
The trade-offs are real. Usage metering is the biggest friction. One of our readers, Claire Machado, put it well: she built a full subscriber hub with her brand design, working passwords, everything as she envisioned — then ran out of tokens after a couple of hours and had to wait a week to use them again. Her workaround: she grabbed the HTML code and is tweaking it in regular Claude over the week.
That’s the current reality. Pro’s weekly cap burns fast; Max ($100-200/month) is the practical tier. Collaboration is basic — no live cursors, no simultaneous editing. And the Claude Code handoff generates working code, not production-ready code. Security, accessibility, and testing still need human judgement.
But the Claude Code handoff feature is still one of the most useful features in how you can access/download your work.
Where This Sits in the Bigger Picture
Anthropic has been building a closed loop: Cowork handles complex tasks, Claude Code handles implementation, Claude Design handles the visual layer. Each is useful standalone. The value compounds when they connect.
The one-pager took two prompts. The tool evaluator, pitch deck, and animated workflow each took one. The website prototype took a few iterations but produced something I’d have spent a week on otherwise. None required a design tool, a designer, or an afternoon in Canva.
That said — research preview. Usage caps are tight, collaboration is thin, scope is narrower than the marketing suggests. Claude Design isn’t replacing our workflow. It’s earning a specific seat: structured, on-brand visual output from content we’ve already produced. Whether that seat gets bigger depends on what Anthropic ships next.
For now, if you produce visual content without a design background, Claude Design is worth an hour to test against one real task from your own workflow. Start with something specific. Feed it structured input. Set up your design system first — I didn’t, and I wish I had.
If the output surprises you the way that animated workflow surprised me, you’ll know exactly where it fits.
Some essential reads on this topic from our community 👐
Claude Design Review: 48-Hour Builder’s Test + Hero Prompts by Karo (Product with Attitude)
I tried building a presentation in Claude Design by Karen Spinner
Claude Design. by Ruben Hassid
Have you tested Claude Design? I’m curious what use case you tried first — and whether the output was good enough to use or just good enough to be interesting. Drop a comment below. 💬
💡 Enjoying this article or other ones about frameworks to work with AI? Share this piece with someone who can benefit.
This absolutely blew my mind. Thank you for such a detailed breakdown, it was immensely useful!
A question.. are you going to use the $100-200 version of the product going forward? Is it worth it for the amount of work you have it produce for you?
This is one of the clearest takes I’ve seen on where this actually fits.
The framing that clicked for me: it’s not a design tool, it’s a translation layer from thinking → visual structure.
That’s why it works so well for one-pagers, comparisons, and flows- you’re feeding it organized thought, not just vibes.
Feels like the real unlock is upstream;
the better your input is structured — argument, sections, hierarchy — the better the output becomes.
So it’s less “non-designers can design now” and more:
people who can think clearly can now show it visually without friction.
That’s a pretty meaningful shift.