Overcoming the Blank Canvas with AI: A UXUI Designer's Workflow

Overcoming the Blank Canvas with AI: A UXUI Designer's Workflow

Ai

Xin Chen

,

UX/UI Designer

A portrait

The blank canvas is rarely a creativity problem. It's a friction problem. The ideas usually exist, but what's missing is a cheap way to externalise the first one fast enough to judge it. The gap between intent and first draft is where a surprising amount of design time disappears. 

This is the part of the process AI has changed the most. With AI tools (specifically Claude Code and Claude Design), that first hour compresses significantly, and the work downstream tends to be stronger for it. 

What follows is a workflow for moving from a fresh brief into Figma. 

Where AI actually helps 

Claude will not design for you. Prompted like a generator - ‘make me a landing page’ - it returns something generic and indistinguishable from every other AI-generated mockup. 

Where it's especially strong is volume and speed at the thinking stage. The first ten ideas anyone reaches for are the first ten everyone reaches for; the interesting work tends to begin around the twentieth. AI clears the obvious ones cheaply, so judgment is spent where it counts. 

Claude Design - prototyping and visual exploration. 

Claude Code - layout and interaction. 

Same intent in both: explore widely and cheaply before committing to anything. 

The workflow 

This sits in front of structured design work, not in place of it - a thinking layer bolted onto the start of the process. 

1. A brief before opening any tool 

Before Claude, before Figma: open a plain text file and write down the problem in plain language. Who is this for, what job does it do, what does success look like, and what constraints are fixed. It can be three sentences or a full page - length is irrelevant. The value is in forcing yourself to articulate what you're making. 

The brief is also where the thinking that actually distinguishes a designer happens. Before any pixel, you need a clear picture of the intended journey - the actions a user is likely to take, where each one leads, and the variations that branch off along the way. Most products aren't entered from a single front door; users arrive from different places, in different states, with different intentions, and a design that only accounts for the obvious path will quietly fail the others. Mapping those entry points, the decisions they trigger, and the edge cases that follow is the part of the work that AI cannot do for you. It's also the part that makes the rest of the workflow productive: a model can generate a hundred variations of a screen, but only a designer who has thought through the journey can tell which variation actually serves it. This is the skill the brief exists to externalise - and the foundation everything downstream is built on. 

2. Diverge with Claude Design and/or Claude Code 

With the brief in hand, you generate five to ten directions in minutes and scan them for one thing: surprise. The version that puts a secondary metric somewhere unexpected, reaches for a typeface you'd have dismissed, treats a card as a list. That's the goal - the move that wouldn't have happened on your own due to time limitations. 

3. Curate, don't accept 

This is the step most people skip, and it's the line between a designer using AI and a designer used by it. Everything the model produces is a draft, and the work at this stage is critique. 

Models are trained to predict the most likely answer, which means their default output drifts toward the median - the safe, the broadly acceptable, the centre ground. For design, the median pull produces competent generic-ness: outputs that look fine alone but are indistinguishable in a crowd. In a market quietly filling with that kind of work, distinctiveness becomes a scarce resource, and curation is where it's earned. 

The job here is to name what's working and what isn't. Often the sharpest move is to feed that judgment straight back: keep the hierarchy from one, the typography from another, discard the rest, and ask for new variants. Naming what's wrong is half the work. The other half is throwing out anything that doesn't earn its place. Taste is the thing being applied here, and it's the part no tool replaces. 

4. Translate back to Figma 

Now Figma opens, and the move that matters is rebuilding rather than pasting. Not because the AI output is unusable, but because pasting imports the model's defaults along with its good ideas: a component vocabulary that isn't yours, the spacing it always settles into, that faint sameness you start to recognise across AI-assisted work. So you carry across principles, not pixels - the hierarchy that worked, the typographic rhythm, the interaction feel already confirmed - and rebuild the rest with your own components, the client's tokens, and your own decisions. What lands in the file is then a point of view rather than a default, and it sits cleanly inside the system the rest of the product is built on. 

This is where Figma's real strengths come back: precision, systems, and a clean handoff. The workflow above doesn't replace any of that. It just gets you there faster, and surer of what you're building. 

A moving target 

Everything above is a snapshot, not a rule. The tools are improving faster than the habits built around them, and any honest account of a workflow has to admit that its details have an expiry date. So hold the specifics loosely. This is how the work goes today; before long, the seams between these steps may close entirely - the diverging, the prototyping, the rebuilding folding into something faster than can currently be described. 

What won't expire is the layer beneath: understanding what the work needs to do, recognising when something is right, knowing what to keep and what to cut. Better tools raise the floor for everyone, which only makes that judgment scarcer and more valuable. 

Beyond the workflow 

A design workflow, however well-tuned, is one strand inside a larger system - and a beautifully crafted screen only earns its keep if it sits inside a business case that justifies it and a delivery model that can ship it. This is the thinking behind the Codehouse AI DXPlaybook, a discovery framework that treats digital transformation as a connected set of plays rather than parallel workstreams. The workflow described here belongs to Play 2 - Experience Design & Development - which sits deliberately between Play 1 (Business & Digital Context) and Play 3 (Experience Development & Delivery). Each play follows the same rhythm: where things stand today, where they need to be, and the gap currently in the way. Design without Play 1 produces beautiful work that's commercially irrelevant. Design without Play 3 produces beautiful work that can't be built. AI raises the ceiling on all three, but only if the connections between them are designed as carefully as the screens themselves. 

GENERATIVE SEO

Want to ensure your website doesn't get left behind in the future of SEO?

GENERATIVE SEO

Want to ensure your website doesn't get left behind in the future of SEO?

GENERATIVE SEO

Want to ensure your website doesn't get left behind in the future of SEO?

Talk to us about your challenges, dreams, and ambitions

X social media icon

Talk to us about your challenges, dreams, and ambitions

X social media icon

Talk to us about your challenges, dreams, and ambitions

X social media icon