How I Use Claude Code as a Designer

For most of my career as a designer, my workflow started in Figma. Seven years of work across legaltech, healthtech, insuretech, and B2B SaaS, and Figma was where every project began. Over the last year, that has quietly changed.

I use Claude Code for design by reaching for it at three points in my workflow. Prototyping a UI from a single prompt instead of starting in Figma. Building design systems with Claude Code and Figma MCP. And shipping production work, like the Fifty Five and Five website you’re reading this on. Some of design still belongs in Figma and Miro. A lot of what I used to do there now starts in Claude Code.

The shift isn’t unique to me. According to UX Tools’ State of Prototyping Spring 2026 survey of 1,478 designers, 38.4% now use Claude Code weekly, and five of the top ten weekly design tools are now AI (UX Tools ). A year ago, none of those five were on the list.

This post is one part of how an AI marketing agency uses Claude Code , covering the design side. My colleague Owen has covered the marketing side, and Chris is writing the partner marketing one. Quick note in case you haven’t come across Claude Code before. It’s a terminal-based AI coding tool from Anthropic. It runs locally, reads and writes files, and works alongside developer workflows. Designers haven’t traditionally been the audience. I’m writing this because I’ve found a clear set of design tasks where Claude Code for designers earns its keep, and a clear set where it doesn’t.

From figma starts to claude code UI: my new prototyping workflow

I used to start all of my work in Figma. I still do a lot of the time. But I have noticed myself reaching for Claude Code to plan out an idea and build a prototype off the bat. More often, I find myself sketching out ideas in a notebook first, and using those to feed into the work I do in either Figma or Claude Code. The decision point isn’t “which tool do I open?” any more. It’s “which tool fits this sketch?”

A lot of the design work I used to start in Figma now starts in Claude Code. That isn’t because Claude Code replaces Figma. It’s because the design process is different now, and Figma is still the right tool for some of it.

The Claude Code UI prototype that changed how I think about this came from a recent partnerships project at Fifty Five and Five. We wanted a flexible colour palette so partner brand colours could really shine. A colleague was worried about how this would work in practice, with so many possible partner colour combinations. I one-prompted a solution in Claude Code that previewed what the branding would look like across a full spectrum of colours. It took less than ten minutes, and it helped me show how the proposed branding could actually work in real life. Communicating ideas instantly is a design problem, not a coding problem. The prototype is for stakeholders, not engineering. Figma is great for a polished mockup; for fast iteration of an interactive idea, Claude Code is now usually faster.

Quick note on the wider landscape. Designers are reaching for several AI coding tools, and they don’t all mean the same thing. Cursor and Claude Code are full coding environments designers are using for prototypes and small applications. Figma Make sits inside Figma and generates working prototypes from natural language. Lovable, V0, and Bolt are designer-first prompt-to-app tools. The UX Tools data has Claude Code at 38.4% weekly use among designers, Figma Make at 34.8%, and ChatGPT at 48.2% (UX Tools ). I’ve experimented with most of them. What I keep coming back to with Claude Code is how flexible it is in the terminal and how it integrates with the workflows of our developers. The other tools have their place. For me, the integration matters more than the visual interface.

That brings us back to design judgement. Choosing Claude Code over Figma for a prototype is a deliberate decision. The right tool for the right job. The colour palette previewer was a Claude Code job. A polished sign-off mockup of the same screen would still be a Figma job. The work is the same. The tool changes.

Claude code + figma mcp: building the Avalara design system

Setting up a design system is normally one of the more daunting stages of a project. Guidelines need to be followed closely, and any early mistakes are painful to fix later. With Claude Code and Figma MCP (Model Context Protocol, which lets Claude work directly with your Figma files), the slow, repetitive parts of that work compress dramatically. On the Avalara design system I generated colour and typography variables from a few prompts, and then created form input components by feeding Claude Code the Avalara website and design guidelines as reference. There was still some manual effort, mostly renaming things and turning designs into reusable components. The grinding part of the job went.

This is the kind of work where Claude Code’s strengths line up with the job. Structured output. Brand consistency under reference. Faster iteration. A clean answer to where Claude Code earns its keep for designers.

This isn’t my first design system. I led the design on Farillio at Inktrap and contributed to Dolphin, the Novartis design system used across 30+ platforms (Dolphin case study ). The Avalara setup is what those projects look like with Claude Code in the stack.

If you want the full mechanics (the prompts, the components, what stayed manual, and what shipped), I’ve written that up in AI design systems: from Figma to production-ready code .

Claude Code use cases beyond prototyping: critique, decks, and design copy

Most of the conversation about Claude Code for designers focuses on prototyping or design systems. There’s a quieter category of Claude Code use cases. Small daily tasks where it removes friction. Three I now reach for without thinking.

Claude as a critique partner. Getting Claude to critique initial ideas helps me get instant feedback that nudges me in the right direction at an early stage of the project. It can save loads of time down the road and suggest genuinely useful ideas. It’s not a replacement for human critique. It’s an instant first pass when no colleague is free, before I commit to a direction. It fits the way I tend to work anyway: validate before you commit.

Cowork for PowerPoint. I find PowerPoint horrible to use. Cowork (Anthropic’s friendlier Claude interface alongside Claude Code) now lets me get a deck going painlessly. I don’t start putting a deck together without it any more. It gives me a great starting point that I can then tweak. I get to a finished deck far faster than I used to.

Generating placeholder text instead of Lorem ipsum. This sounds small. It isn’t. Designs reviewed with realistic copy land differently than designs reviewed with greeked Latin. Lorem ipsum hides the layout decisions that matter most: where text wraps, where lines break, and what the rhythm of real prose does to the page. Claude Code can generate sector-appropriate placeholder copy in seconds. Stakeholders react to designs that look like the real product, not designs that look like a template.

A fourth Claude Code use case is worth mentioning briefly because it shows what’s possible when off-the-shelf AI tools fall short. I built two small tools using Claude Code: a texture-brush tool that adds grain and colour overlays to AI-generated images, and a pixelation tool. They came from getting frustrated with how flat AI image outputs can feel and wanting something more textured. The point isn’t the tools themselves. It’s that Claude Code lets a designer build their own creative tool when an off-the-shelf one doesn’t exist. I’ve written about that elsewhere (The AI image generation tools designers are actually using ).

None of these Claude Code use cases are revolutionary. They’re small, repeatable wins. Stack them up and a chunk of the design week looks different.

The Claude Code workflow behind the FFF website

Two of the most demanding design projects of my last year both started in Figma and ended up shipped from Claude Code. The Fifty Five and Five website (production, 100/100 on Google PageSpeed). And the TCS London Marathon Avatar App, which won 2025 Drum Awards Bronze in Campaigns Powered by AI (TCS Marathon case study ). Same person designed each, and shipped each.

When the designer can ship the front end themselves, the boundary between design and build moves. The Claude Code workflow doesn’t remove the designer-developer handoff. It changes its shape. The handoff becomes selective. What gets handed off is the harder work: production infrastructure, complex backend, and scale. The visual work, the interaction details, and the small refinements that used to require tickets and turnaround time, those stay with me. Less ceremony. Faster iteration. The result is the same design quality with fewer tools and fewer steps in between.

The FFF site is the meta proof of this. You’re reading this on it. The TCS Marathon avatar app went from Figma flows to a working Expo experience used by thousands of runners. Same workflow shape on both.

If you want the full story (the FFF site build, the Marathon Expo, and what shifted in the design-build boundary), I’ve written that up in How designers are using AI coding tools to build real products .

When not to use Claude Code: Figma make vs claude code, honestly

Most pieces about Claude Code for designers leave you with the impression it does everything. It doesn’t. Two parts of design still belong somewhere else.

Complex UI flows. There are still complex UI flows that I need to work out using mind-mapping tools like Figma and Miro. Flow logic is a spatial problem. Claude Code’s terminal-first interface doesn’t map well to spatial thinking. Figma’s canvas and Miro’s mind-map UI do. When I’m trying to understand how five screens fit together, or where a user can fall off a journey, the right tool is the one I can see all the screens on at once.

Visual exploration. Selecting fonts and colour palettes still requires instant visual examples that would be a waste of tokens and time using Claude Code. Visual exploration is an iteration problem where you need 30 options on a canvas, not one generated at a time. Figma’s plugins, font libraries, and side-by-side comparisons exist precisely because that work is iterative and visual. Trying to do it through prompts is the wrong shape.

I’ve played around with other design tools like Google Stitch, Figma Make, and a few of the prompt-to-app tools. I keep coming back to Claude Code because of how flexible it can be in the terminal and how it integrates with the workflows of our developers. Stitch and Figma Make are designer-first tools. They have a clear use case, and they do it well. Claude Code is a designer-and-developer tool. For an agency designer who works alongside engineers, the integration matters more than the visual interface. Different jobs.

I imagine it’s only a matter of time before big platforms bring out AI workflows that help with the parts of the design process Claude Code doesn’t. Figma Make is already at 34.8% weekly use among designers, just behind Claude Code at 38.4% (UX Tools ). The visual exploration limit will close. The flow-mapping limit might too. For now, Claude Code is a tool, not the tool. It’s not something I default to. It’s something I consider, and I think about the best way to use it. Tool selection is design judgement.

Where the design lane sits now

I use Claude Code for design by reaching for it where the work is design-and-code: prototyping a UI from one prompt, building design systems with Figma MCP, shipping production sites and apps. I keep using Figma and Miro for the parts of design that are visual exploration or spatial flow logic. The right tool for the job is itself a design decision.

Three areas of my work changed because of Claude Code. Prototyping a UI where I used to start in Figma. Design systems with Figma MCP, on a project like Avalara. Production builds where I design and ship the same thing, like the FFF site and the TCS Marathon avatar app. The smaller daily wins (critique, decks, and placeholder copy) sit alongside those.

This is what Claude Code looks like in a small B2B agency. The agency context matters. Variety, multiple clients, fast turnaround, and working alongside engineers on every project. Claude Code is a force multiplier for a senior designer who’d otherwise have to choose between depth and breadth. At Fifty Five and Five we’re a small team, and the work spans research, content, partner marketing, and design. Owen runs that on the marketing side, Chris on partner marketing. The post you’re reading is what that looks like in practice on the design side.

It’s not about having all the answers. It’s about asking the right questions and being willing to change direction when the answer isn’t what you expected. Claude Code earned a place in my workflow because I tested where it fits and where it doesn’t. Considered, not bandwagon. Tool selection has always been a design decision. Now there are more tools.

If you’re a designer thinking about where Claude Code for designers fits in your work, my colleagues Owen and Chris cover their views in the wider piece on what running a marketing agency on Claude Code looks like in practice . If you’re trying something similar and want to compare notes, you can find me on LinkedIn .

Frequently asked questions