Becoming an AI-ready Product Designer: Building Products (Part 3)
Going from idea to working product in a matter of minutes
Hey everyone, Filippos here 👋. I originally started writing this as one post but it became so big that I decided to split into multiple parts. I had an incredible time writing this series of posts and hopefully it will be as insightful to you as it has been for me.
If you are new to product design, I also recommend checking out my product design masterclass, a self-paced, end-to-end product design course for beginners and mid-level designers.
Prologue
This is the third part of a series of posts on becoming AI-ready as a Product Designer. The series explores tools, workflows and methods that, as product designers, we should familiarize ourselves with, so that we are ready for a new AI-powered era in product design and development.
3: Building Products & Prototypes (this post)
5: Mindset
Let’s dive into it.
Prototyping & building
(Method: Building)
This is my favorite part.
If there is a must-read in the series, it’s this post.
There is an unprecedented opportunity for designers (and anyone really) to build their own ideas and products by leveraging AI coding tools.
What’s working well:
You can create really well functioning products from chains of prompts.
You can build prototypes very quickly.
What’s not working well yet:
Going from refined design to prototype is still not solved. There are a few Figma integrations at the moment but none achieves a high-level of accuracy consistently.
Using a custom design system. Most coding tools use a predefined front-end framework such as ShadCn or Tailwind, but don’t allow you to integrate a custom design system or codebase. This is one of the areas that I personally think will be extremely disruptive in the next year, but right now it hasn’t been solved.
What that in mind, my recommendation is for every designer to spend a bit of time every week to play around with AI Agents and build a small product.
Available tools
In summary, the most designer-friendly tools in the market at the moment are:
v0 by Vercel — https://v0.dev/
Lovable — https://lovable.dev/
Replit — https://replit.com/
Bolt — https://bolt.new/
There are small differences between them, but ultimately they are all quite similar and don’t require any engineering knowledge. What’s great about all these tools is:
You don’t have to worry about setting up a dev environment
You can build anything from simple to highly complex products
You can immediately preview changes
You can automatically deploy to a website
Some tools I’m not including in my recommendations are Cursor (steep learning curve for non-engineers), Claude (it doesn’t work once you surpass some code length thresholds) and Whindsurf (cause I haven’t tested them extensively).
Things you can try
A mini-app that solves a small problem for you.
Replicating a product you use on a day-to-day basis.
A product you’d like to launch as a side hustle.
I tried building things like a color palette generator for people with accessibility needs (easy, a few prompts), a detailed accessibility checker for websites and web apps (hard, more than 50 prompts), and a personal finance calculator (easy, 10-15 prompts).
The key thing to remember here is you aren’t trying to build a successful product (yet). You are simply trying to become AI-ready by learning how to build products through prompting.
💡 Tip: Please note that the easiest way to start is by building a web app. Other types of apps (desktop, mobile, hybrid) are also very much possible, but require a bit more tinkering and can get overwhelming for a first project. So I highly recommend starting with a web app and then exploring more types as you go.
I believe that all these tools will see drastic change over the next few years, and their capabilities will improve exponentially, so don’t get hung up on mastering them right now, but rather learn to be comfortable using them.
How to start
The first thing you will want to do is create a detailed requirements prompt for building products. Some things that I have found very useful are:
- Outlining the goal
- What data screen should include
- What are the available actions to a user
- Is there a specific navigation pattern you would like to use?
- Any framework or design style you would like to use.
- An image reference if you’d like to mimic another product or a design.
Some people have found success in using ChatGPT (or any LLM) to help create a Product Requirements Document (PRD) before using it as a prompt in a coding tool. I haven’t found this to be significantly more effective than just creating my own prompts, but it’s definitely worth a try.
Once you have your basic prompt, I advise going into a few of these tools and testing them out. It will give you a first feel of how each product operates and you’ll start identifying each of the nuances and pros/cons.
💡 Tip: One important piece of advice is to start simple and add as you go. At the moment these tools are very capable of tackling one user flow and a few screens at a time, but struggle to tackle multiple flows at once. If you ask the agent to build Google Maps it will struggle, but if you ask it to build a map view where you can set your current location and get directions to a destination, it will easily tackle it.
When you are satisfied with your initial results, pick the tool where you recognise the highest potential and start refining.
Try visual refinements. Some tools like v0 allow you to select a specific area and refine it. Others, like Lovable, have a visual editor where you can make changes yourself.
Try adding secondary flows. Once you get your first flow right, try making it a complete product by thinking of secondary flows, unhappy paths and other use cases.
Try adding authentication and/or a database to save user information.
Example use case: This is a real use case of mine; I was trying to generate a color palette for data visualisation and charting.
I starting by giving the same prompt to V0, Lovable and Replit and looking at early results.
🤖 Prompt: Create a web app for UX designers to generate a color palette for data visualisation. The user should fill in one to two brand colours, and the generator should create a palette of 8 colors to be used in charts. The first of these colours should be the main brand colour.
After some refinement, I was able to create a palette generator tool that takes one brand color, generates an accessible data visualisation palette, simulates color blindness, and allows exporting to CSS variables or SVG.
I picked one feature at a time and tried to refine it until I was happy, then moved on to the next one:
I started by creating a simple palette generator.
I tried different prompts for generating the colors until I was happy.
I then added examples of bar charts and pie charts using a chart library.
I then added a color blindness simulator.
I then added exporting functionality.
I enhanced the export functionality by including options for SVG and CSS.
I then added some useful settings such as number of colors and dark mode.
I also added nice-to-haves such as keyboard shortcuts.
Some example refinement prompts:
🤖 Prompt: Right now all the colors are very similar to one another, e.g. if I pick red, all colors are shades of red whereas they should cover as much of the color spectrum as possible (since it's for data visualisation and color coding)
🤖 Prompt: Is it possible to add an export button that generates an SVG with all these different color shades?
Visual refinements
Most of these tools allow you to select a particular element in your preview and suggest changes. I have found this to be a very effective way to refine the interface with a relatively high level of specificity.
Some tools also allow importing from Figma. I personally didn’t have a lot of success in doing that, and was much faster when starting from scratch and asking the agent to use a component library such as Shadcn to make everything look modern and slick.
Having said that, I strongly believe that we will soon see a much better integration between Figma and these tools, and Figma is also very likely to release something in the space. So we just need to wait and see.
Comparing between tools
I tried building the same tool with three agents at once (v0, Lovable, Replit). I preferred the more streamlined interface and deployment workflow of v0, but Replit managed to get to a workable result much faster.
Ultimately, I highly suggest trying out a few of these agents at once and seeing what results you are getting before you commit to one tool.
Wrap up
Overall, this is one of the most important methods to start incorporating in your workflow.
Firstly, it introduces a completely new paradigm of how to build real products through prompting, which I believe will be one of the most transformative changes in our industry.
Secondly, this space will advance so rapidly that it’s really important to start familiarizing yourself from now, so that you can leverage the opportunity as these tools become more advanced, more designer-friendly, and are able to better integrate to an existing product suite and codebase.
Verdict: One of the biggest advancements in technology we have ever experienced. Game-changing. 🥳
Skill to learn: Prompt engineering, refining builds, specifying requirements, visual refinements through prompts, building products as a whole.
Hope you enjoyed this post in the series, I had a blast writing it. If you’d like to see more in-depth content on any of the above areas, I’d love to know in the comments. As always, if you found this insightful, consider restacking ♻️.
If you are new to product design, I also recommend checking out my product design masterclass, a self-paced, end-to-end product design course for beginners and mid-level designers.
Thank you 🤗
Really good post! Thanks Filippos for putting the work in finding & writing all of this for us, really appreciate it.