5 November 2026 · 7 min read

My AI design workflow in 2026: from brief to a live product

Short answer: the biggest change isn’t a tool, it’s that a designer can now take a project from brief to a tested, live product with AI as a pair. I spend less time on pixels and hand-off, and more on framing the problem, making decisions and checking the result. AI does the typing; I stay responsible for what ships.

Designers keep asking me how my process has changed, so here it is, step by step, as I actually use it on real projects, including this website. It’s not a list of tools that will be out of date in three months; it’s the shape of the work.

I’m not alone in working this way. In the 2026 AI in Design Report, a survey of 906 designers, 91% use AI every week, about half have already shipped AI-generated code to a live product, and Claude overtook ChatGPT as the assistant designers use most.

The loop, in one line

Brief → research → design direction → build with an AI pair → test on every screen → ship a preview → measure → improve. The loop is short now, often a day instead of a sprint, so I go round it many times instead of trying to get everything right on paper first.

1. Write the brief like a spec

The quality of what AI gives you is mostly the quality of the brief. I write prompts the way I’d brief a junior designer I trust:

• Goal: what should change for the user or the business.
• Who it’s for and what they’re trying to do.
• Constraints: brand, existing components, performance, what must not break.
• Done means: how I’ll check it, on which screens.

I also keep a running project document with decisions, rules and what’s left to do. Every new session starts by reading it, so the AI doesn’t “forget” that we never publish prices in articles or that a page address must not change. That one habit saves more time than any tool.

2. Research and synthesis

AI reads faster than I do: competitor sites, reviews, interview notes, Search Console exports. I ask it to summarise, group and count, then I check the claims against the source. It’s great at “what are people complaining about in these 200 reviews” and dangerous at “give me a statistic”, because it will invent one. Every number that goes into a design or an article gets a source.

3. Design direction

I still open Figma from time to time, but more and more I design straight in code, because that’s where the workflow is heading in 2026 and 2027. Instead of drawing every screen first, I make working prototypes and pages with Claude Code: something you can click, resize and test on a phone the same day. The result is only as good as two things: how well the tool is set up and how well you can brief it.

• Set-up: a project instructions file with the rules (brand, tone, what never changes, how to test), the design tokens, and the checks it must run before saying “done”. Set it up once and every session starts from the same place.
• Prompting: the same skill as briefing a person. Say the goal, the user, the constraints and how you’ll judge the result, then review and push back like you would in a design critique.

I still decide the direction myself: structure, hierarchy, tone, what the product is not. AI helps me explore: alternative layouts, copy variations, edge cases (“what does this screen look like with 40 items, or none?”), and states I might forget. My design decisions live as tokens and components, such as colours, spacing and type as CSS variables, so when AI builds, it reuses the system instead of inventing a new shade of blue every time.

For judging options I use the same lens as always, my Hexagon framework: is it useful, clear, trustworthy, does it fit the business? AI can generate ten options; it can’t tell you which one is right for these users.

4. Build with an AI pair

This is where the workflow changed the most. I build in the real codebase with Claude Code, and I treat it like a fast developer who needs clear direction:

• Describe behaviour, not code. “On phones, the tabs stick under the header while you read the section, and disappear at Contact.”
• One change at a time, each one checked before the next.
• Ask why. When something breaks, I ask for the cause, not just a fix. Half the bugs are a rule somewhere else quietly overriding the new one.
• I review every change myself. AI writes most of the lines, but no code goes live until I’ve read and checked it. That part is never optional.
• Preview before live. Every change goes to a preview link first; nothing goes straight to the real site.

5. Test on every screen

This is the step most designers skip, and the one AI makes cheap. Before anything ships, I run automated checks that open every page on a set of real screen sizes, from small phones to 2560px monitors, take screenshots, and flag errors, sideways scrolling, overlapping elements and layout shifts. Then I look at the screenshots myself.

On my own redesign, that sweep found a page that could slide sideways on laptops, cards that overlapped at exactly 1024px, a typing cursor that pushed words onto the next line and a layer that silently blocked every click. None of them were visible on my own screen. AI writes bugs confidently; the testing is how you catch them.

6. Ship small, then measure

I batch changes, publish, and then look at real data: Search Console for what people search and where pages rank, and session recordings for where people get stuck. That data goes straight back into the next loop. For example, when a local article had hundreds of impressions but sat on page four, the next loop was rewriting it around what people were actually searching for.

What I never hand to AI

• Framing the problem. What we’re solving, for whom, and what we’re leaving out.
• Code review. Every change is reviewed by me before it ships. AI can suggest and check, but it doesn’t approve its own work.
• Taste and the final call. AI drifts towards the average. The point of a designer is to not be average.
• Final copy and facts. Especially prices, claims and anything legal.
• Accessibility judgement. Automated checks catch some issues; a person has to decide if it actually works with a keyboard or a screen reader.
• Client conversations and client data. Nothing private goes into a tool without the client knowing.

The mistakes AI makes (and how I catch them)

• Confident, wrong answers. Fix: ask for the reason, and test.
• Fixing one thing, breaking another. Fix: re-run the full screen sweep after every batch, not just the page you touched.
• Losing context between sessions. Fix: the project document with decisions and rules.
• Over-building. Ask for a button, get a framework. Fix: say what you don’t want.
• Same-looking output. Fix: a real design system and your own direction before any generation.
• Hidden costs. Previews, builds and tools all have limits. Fix: batch your changes.

How to start if you’re a designer

1. Pick one real, small project. Your portfolio is perfect: low risk, and you’ll use the result.
2. Learn the basics of the materials: enough HTML, CSS and Git to read what’s happening and undo a mistake.
3. Turn your styles into tokens so AI builds with your system.
4. Write a checklist of what “done” means and test against it every time.
5. Keep notes of decisions and rules, and start every session with them.
6. Look at real data after launch, not just Dribbble likes.

The skills that matter more now: writing clear briefs, judging options, reading code, testing, and understanding the business. The skill that matters less: producing screens by hand.

Common questions

Will AI replace UX designers?

It’s replacing a lot of production work. Designers who frame problems, make decisions and own the result are more valuable, because generating a generic interface is now easy and getting the right one still isn’t.

Do designers need to code now?

You don’t need to be a developer, but reading code, using Git and testing what you ship is becoming part of the job. Surveys in 2026 show many more designers taking part in development work than a year earlier.

Which AI tool is best for designers?

It changes every few months. Pick one general assistant for thinking and writing, one way to build (a coding assistant or a builder like Framer), and a way to test. The workflow matters more than the brand.

Is AI-generated code safe to ship?

Only after a person has reviewed and tested it. I review every change myself before it goes live. Treat it like code from a fast new colleague: usually fine, sometimes subtly wrong, never unchecked.

How do I keep AI-built sites accessible?

Ask for accessible patterns from the start (real buttons, labels, focus states, contrast), run automated checks, then test with a keyboard and a screen reader yourself.