A practical AI workflow: automate the routine, keep product decisions human

Conversations about AI in design and development often focus on speed: it can write code faster, build interfaces faster and generate visuals faster.

What interests us more is how AI brings design and development closer together. A designer can build the first working version, test it in the browser and continue designing there. But simply uploading a Figma file and asking AI to “build it” isn’t enough.

Over time, we’ve developed a workflow where AI handles much of the routine work without someone guiding it through every step, while we still review and control the result. We tested this approach on one of our recent projects. Here’s how it works and which parts can be applied to other projects.

Design the product first, then bring in AI

The first part of the process hasn’t changed much.

You still need to understand the problem first: what are we building, for whom and why? Then comes the visual direction, references, structure, design and client approval.

We use Pinterest and Mobbin to find references, while AI acts as a more advanced search tool. It helps us identify market leaders and find relevant examples based on ratings, awards, business performance and other criteria.

During this stage, we realised that the visual direction we had proposed didn’t work for the client, so we changed the concept. Better to find that out early than after spending a week on detailed design.

AI doesn’t remove the need to understand the problem, and it can’t decide which product or design solution makes sense. But after that, the workflow changes quite a bit.

Prepare Figma for AI

If you want AI to reproduce an interface accurately, the Figma file needs to be in good shape. We cleaned up the tokens, text styles, components, icons, buttons and grid.

The model then analysed the file and created a UI Kit that it used during implementation.

We gave it one clear rule: don’t invent anything that isn’t in the UI Kit. If you need a new element, first check whether an existing one can be reused. Only then add something new to the system.

That way, AI gets more than a collection of screens to copy. It gets the rules behind the interface. The design needs to be systematic enough that the model doesn’t have to fill in the gaps itself.

That leads to the first principle:

Don’t make AI guess what you can define as a system.

Don’t build every block with AI manually. Set up the workflow once

We used to work with AI quite literally: here’s the first block, build it. Done? Now the second. Then the next.

AI helped, but the designer still had to manage every step.

On this project, we tried a different approach.

We gave the model the page and a sequence of actions: take one block, implement it, take a screenshot, compare it with the design, make corrections and move on.

Why not give it the whole page at once? The more elements AI has to keep in context, the harder it becomes to reproduce each one accurately. A single block gives it a much more focused task.

We summed it up like this:

Large context for understanding. Small context for execution.

But those smaller tasks don’t have to be assigned manually. You can define the whole workflow once and let AI work through it on its own.

Don’t give AI tasks one by one. Build a workflow that can run without constant supervision.

In our case, Claude worked through the page block by block for around three hours on its own. The designer watched a film. By the end, we had the first version of the site, already quite close to the final one.

Keep designing in the browser and test AI prototypes

Once AI has built the first version, you start noticing things that weren’t obvious in Figma.

For example, our first attempt at the responsive layout didn’t produce a proper fluid layout because the instructions were missing intermediate steps. At one breakpoint, three elements wrapped correctly from a technical point of view but looked wrong. We replaced the wrapping with horizontal scrolling directly in the browser.

This creates a short feedback loop:

design → AI implementation → browser review → iteration → another review.

The same applies to complex flows. Instead of designing every state upfront, a designer can use AI to build an interactive prototype, test the hypothesis and show it to the client before full development starts.

An AI prototype isn’t just a polished demo. It’s a design tool.

Sometimes it’s easier to interact with an interface once than draw another ten states and still miss something.

Build controls for complex graphics instead of writing endless prompts

AI can also help with more complex tasks, such as working with WebGL graphics.

Instead of repeatedly telling the model, “Make it a bit bigger. No, slightly smaller. Move it left,” we built tools for adjusting the parameters directly.

The designer changes the settings and sees the result immediately. Once everything looks right, the values are exported to JSON and passed to Claude.

That gives us another rule:

Prompts are good for finding a solution. Controls are better for fine-tuning it.

Let AI handle content synchronisation

Once the site is nearly ready but the client is still editing the copy, another source of routine work appears.

Changes need to be transferred from the document to the site, then reflected in Figma. Otherwise, design and production gradually drift apart.

We decided to remove the manual transfer.

AI exported all the website copy into Markdown that can be opened in Google Docs. Nothing changes for the client: they still work in a normal text document. Titles, meta descriptions and other information that usually sits behind the scenes can live there too.

Once the client makes changes, AI updates the site. Our next experiment is to synchronise the updated content with Figma in the same way.

The workflow we’re aiming for looks like this:

Client → Google Docs (.md) → AI → website → Figma.

For small websites with infrequent updates, this kind of setup could potentially replace a separate CMS altogether.

The principle is simple:

If someone regularly copies the same information from one place to another, take that person out of the loop.

Turn working solutions into reusable skills

We wanted to keep Google PageSpeed high despite using WebGL graphics.

AI found a solution: don’t initialise WebGL until the user first moves the mouse on the page. The final PageSpeed score was 99.

But the more important point for the workflow is that we won’t need to solve the same problem from scratch next time.

The same applies to responsive behaviour, components, SEO, performance and other recurring tasks. Working solutions can gradually become reusable instructions for future projects.

A good solution should become a skill, not stay buried in a chat.

Hand developers more than a design file

Traditionally, a designer hands developers annotated layouts, reviews the result later and comes back with corrections.

With AI, the handover can work differently. Instead of passing over static designs, the designer can hand off the first working version of the interface.

designer designs and builds the first version → developer develops the technical side → designer keeps refining the product in the browser.

On smaller projects, a designer can handle much more of this process independently. On larger ones, developers receive something much more developed than a set of static screens.

The visual side still belongs to the designer: the interface needs to look and behave as intended. The developer is responsible for the technical side — security, performance and stability as the product scales.

Our AI workflow: from problem to working interface

Put together, the process looks like this:

1. Understand the problem and design the product.Research the problem, find references, define the structure and visual direction.

2. Prepare Figma for handover.Clean up tokens, styles, components and the grid.

3. Define the implementation rules.Create a UI Kit and stop AI from adding elements outside the system.

4. Set up the AI implementation workflow.AI works through the page block by block, implements each section and compares the result with the design.

5. Keep designing in the browser.Test responsive behaviour, flows and AI prototypes, spot problems and refine the solution immediately.

6. Build dedicated tools for complex tasks.For example, WebGL controls that let designers adjust graphics using exact parameters.

7. Automate content workflows.AI moves changes from the document to the site and helps keep them in sync with Figma.

8. Save working technical solutions.Turn recurring solutions for responsive behaviour, SEO and performance into reusable skills.

9. Hand over a working version of the interface.The developer develops the technical side while the designer continues refining the product alongside them.

AI brings design and development closer together

AI really does bring design and development closer together. But the more work we hand over to it, the more important the workflow becomes.

If the Figma file is chaotic, the rules aren’t documented and every next task exists only in the designer’s head, AI will simply scale that chaos.

That’s why we’re less interested in writing the perfect prompt. We’re more interested in building a workflow where the next prompt doesn’t need to be written at all.