Complete AI Product Design Workflow 🎨

Hi.

Today I would like to show you how I use AI across a complete design project.

I will not show you a collection of isolated tools, but more connected workflow from the brief to the coding part.

So I've been experimenting for the last few months.

I've been of course trying AI tools but also thinking how I can create a new workflow for myself to create even better, products.

So at the beginning we were mostly afraid of AI, taking our jobs and replacing us, and we didn't really know what's coming next.

but I think that this will give us even more creative leverage so it can help us explore, faster.

We can compare now more possibilities and produce work we could not create alone.

But having more outputs and tools, does not make the task always very easy.

And this is why it makes the direction and your judgment even more important.

So during all my learnings I try to get back to some fundamentals.

I try also to see what makes a solid and good product design process and just see how AI can support me, in this new journey.

so a strong workflow always preserves continuity.

So the AI should know the project context, understand which decisions have been approved for, load a visual system, and use all of that when creating the next output.

So each stage should build on the previous one instead of restarting every time from zero.

So in order to organize my workflow I have three main sources of truth.

So first is the notion workspace.

This is where I think and also learn.

I explore the brief, ask the right questions, write guidelines, describe every part of the process and needs.

It's also great for collaboration and for communication with your client.

And this is just more human friendly and has everything you need to also style your documents.

Then we have the markdown files.

this is where I record all the reviewed decisions and instructions in a format that AI can read.

So you can just see it as a way of communication between you and your AI tool.

And all this is stored inside a local folder with other relevant documents like brand assets or visual references.

and then finally figma.

this is where I store my visual system so where I create my final and cleaned UI interfaces including variables and components.

And yeah all these tools can of course change but what matters is that each kind of decision has a very clear home.

So I define my workflow into six phases.

So we have the brief including user research and ux.

Then we have the brand and the brand strategy.

From there we're going to create our first designs after we have a final design we're going to create our design system then go to the shipping part or coding part and finally maintaining and optimizing our product.

you can follow the complete path or just Enter at the stage your project currently needs.

So for example, if you already have a brief, a brand and a designs and now needs to turn this into a design system to make a more consistent product, you can of course already enter the stage four.

how do I start a design project?

So before I ask AI to create anything I first give it access to the project context.

And for this, so I have my local project folder where I already have structured file system where every phase of the workflow is kind of described inside a markdown file.

I also have some specific AI instructions and I just ask him to explain and understand my file structure first.

You can also add some references or any assets that are related to the project.

And yeah for this task you're gonna mostly use ChatGPT or Cloud.

So the next task will be to define your brief.

So you will collect all the necessary informations from your client and then with your AI tool identify what is confirmed, what is missing and what still requires a decision.

And once the brief is approved we're going to store it inside our MD file and start to explore the brand.

But here is very important that you remain the creative director.

so here in my case I'm mostly using or still using manual mood boards.

Inside figma I will still do some manual research for typefaces for colors and imagery.

But of course AI will assist you to explore and give you even more Options.

I also created an online brand book template that I can use to share with my team or clients and that you will find in the description.

And when this will be then finished you will store this as a brief MD file and also a brand MD file where you're going to store all your final brief and visual decisions.

So then with an approved design brief and brand strategy that will be saved in this MD files you will be able now to use AI to explore different visual directions and and I think this is where AI is really powerful.

So it will give you the possibility to generate in just a few minutes a lot of different options with already like some real content and also some images.

You can also use your markdown file to write some specific rules about the output.

and yeah again this is where I will really accelerate your design process.

and when this is going to be or when you're going to have your first visual direction you're going to then go back to figma.

so import this kind of AI generated design into figma.

I'm also using a FIGMA starter file where I set my different variables, components and templates and ask AI to follow the structure to build my final and clean designs.

So once you have all your different designs ready and finalize your design decision, you will be able then to translate this into a Design MD file.

So the main purpose of design MD is to translate the approved visual system into instructions that AI and development tools can reliably understand and apply.

So this will be basically your source of truth.

that will be, that will translate your design system into a very simple markdown file.

So it will include your different variables, your components and sections, behavior, your different states, interaction, usage rules, voice and tone, etc.

And then you're going to be able to use this MD file with any AI tool to generate consistent designs and that yeah that are basically following your branding rules.

And finally shipping your product online.

And I think this is where AI is really powerful.

So you will be able to turn your design very quickly into HTML prototypes.

and for this I think we already know some good tools.

So we have cloud code, we have codecs, lovable cursor.

so in my case I'm just selecting my Figma design frame, asking to implement this in my AI tool.

And after implementation, make always sure to compare the result with Figma, see if your different variable and component logic is still inside the code.

test the responsiveness, accessibility, the different interaction and then at the end deploy on the production website, as I should notice for larger projects I'm using webflow.

this is like a cms product which has the same logic than that figma.

So we also have the same logic with the variables and components.

So yeah, depending of your project you will maybe need different tools.

but yeah, it is in my case the one I'm using for my clients.

So everything I just show you right now is packed in this solo AI designer starter kit.

so it has the same philosophy and it turns everything into a practical operating system for solo designers.

So it's designed to help one person lead the full journey.

So from the strategy to the brand to the user interface to the design system, shipping and maintenance, while using AI as a supporting team.

So the kit combines the six phase process with a Notion workspace marked on project memory and FIGMA starter files.

So again the Notion will store all your guides and your templates.

The markdown files will be Your bridge with the AI tool and FIGMA will allow you to create more clean and more professional designs, based on design best practices, including design systems.

So in the description I will share with you the waitlist link and also give you access to this notion light version of this notion workspace so you can have already a first impression.

We also share some useful AI tools.

so very shortly about the House of Maestro Academy.

So we teach about the craft of good design using the power of AI.

And for this we are offering different ways of learning.

So we have webinars twice a month where we introduce a new topic for designers and also where you get a chance for some Q and A.

Then we also have workshops.

So it starts from two hours up to one day where you're gonna deep dive, using a real project.

And we're gonna walk through the full process, like starting from a real design brief to shipping online and where we will assist you in every step of the process.

And finally a coaching part.

So these are one to one sessions mostly for solo designers freelancer.

we also have like dedicated tracks for this.

So AI Foundations, AI for Designers and AI for Design systems.

so thanks for watching.

I hope this will help you in your AI Designer journey.

you can join our newsletter.

This is where we share, all news around AI Design and also our upcoming webinars and workshop.

And of course, yeah, subscribe our channel to support us.

And I see you next time.

Bye.