Transcripts
1. Prototyping Foundations with Figma Make, ChatGPT and Lovable: Is there a future for product managers who
can't work with AI? Honestly, no. We've just entered a
whole new different era of AI powered PM, a different breed
that moves faster, that's smarter and turns ideas into prototypes
within just hours. If you want to stand out, if
you want to stay relevant, and if you want to lead, you need that skill set. I created this course just
after two directors in two different
companies told me that my AI prototypes look
like agency work. And all of this was done in a day without developers
and without waiting. That gave me the courage to share all that I've
learned with you. This course isn't theory. This isn't recycle frameworks, and it's definitely not
something that you'll find in a book. This is real. This is practical. And it's the edge that separates top
PMs from everyone else. And I made it for you.
So you can become the kind of product
manager that teams want, startups need, and
the future demands.
2. Build your GPT and UX Patterns: Alright. Welcome
to this lecture. The first one of building
a prototype with AI tools. And what is the best
place to start? Of course, it's a
Google search window. So in order for us to start, we need to get hantPT
in shape to provide us with good prompts for either
Lovable or Figma Make. And there is no easier
way to do that than to first download
Lovable Prompting Bible. Here it is. You can see
there is a lot to it. But with Control A, Control C, then going to ChatGPT is the first thing
that you need to do. Now, next we're going
to create a GPT in Cha GPT. This
is under Explore. Then we create we'll call it Figma and flower both
prototyping GPT. What you can do is
upload files to create the knowledge
for the GPT. But I think that we can
skip that and create it. Only me for this
thing and then safe. We'll wait a couple of seconds, view GPT, and now we're going
to start training our GPT. The first thing that we're
going to say is you are a seasoned UX expert that
is proficient and has read the most
sophisticated books for software UX. Got it? Gives me a list
of prominent UX books. You need to think about
it as you're talking to a kid and educated in
fighting Speed mode. We then tell it now, get three good practices
each and give me good lengthy detailed
explanations of them. Wait for a little bit. Tell this store this
in your knowledge. Okay, then we have to think of what we're going to prompt
for, what type of product. And for this
exercise, we can make a quick observability tool based on Datadog and Grafana
and Dina traces tooling. So what we're going
to tell the GPT is analyze Datadog Grafana, Dina traces, UX patterns, look into forms and isolate best UX patterns, navigation,
feature, discoverability. Experience and formulate it into observability UX bible. Be extremely detailed
as you are explaining these two distracted pregraduate in UX with good
understanding of UX, but limited attention
span that can easily drift are we Remind to remember the
easily drift away part, because this is how we're going to treat lavaba Figma Make. And these are fantastic helpers
for building prototypes. They're just really
easily distracted, and you need to give them
sufficient amount of details before they start understanding
what they're doing. So this is exactly what
we are saying here. Let's see what the
GPT will come. And here is our UX Bible. It tells us exactly what an observability solution should do in terms of user experience, so it can be mean. That's a good
observability solution by the users using it. Let's wait for the GPT to
finish, and then again, we're going to tell it to store the data in its knowledge. I'll scroll slowly, so you can stop the video and see what
the GPT is coming up with. I'm reading in real time,
and the sound quite decent for Lovable and for
Figma make to make a good prototyping so let's
wait for it to finish. See, hallucinate it here. Being part of the observability
field, this is gold. Okay, now we say sort
in your knowledge. There we go. Then we go to
the Lovable prompting Bible. We're going to tell
the GPT This is the Lovable prompting Bible. Store it in your knowledge
and always adhere to these best practices
when asked to create a prompt for
Lovable Dev or Figma Make. Because I don't know about the same kind of
Bible for Figma Make, I'm going to again, ask the GPT to go through forums
and articles, et cetera. And create it on its own. There we go. It's a
lengthy document. But you can just click. And it should be done
in a couple of seconds. Now, what we're going to
ask you is look into read it and other forms for experts that have given good advice for Figma Make and how to create
the best prompts for it. Create the same style
of prompting Bible as the lovable one that you have in your knowledge.
Okay, so let's prompt it. It's going to think
for a while and spell the prompting Bible
for Figma Make it will take it just
a little bit of time to generate the big
document and store it, and then we're going to be
almost good to go. All right. Now this is finished. You officially have both punting bibles
stored in your GPT. This is your little monster
for building you pants, and you need to treat it
with care and nurture it. So every time that you read a book or have a nice article, just come here and give your GPT some little love
and some more articles, so it can become even smarter. Okay, now, after we
are done with this, we can start building our first. This is the most
strategic thing. So just to recap, what we
did was, we created a GPT, we told it to go and search for the best UX patterns and
knowledge and good practices. Then we have added the Lovable
Prompting Bible to it. We have asked it to create
the Figma prompting Bible, the same style, asked it
to store all of it in. Then we chose the field that we're going to be
creating products from. So currently this is going
to be observability, but maybe this can be
some business tools. Maybe this can be a
music listening app. Maybe this can be something to create personal websites
for different people. You need to find
the best they are. And prompt the GPT to
analyze these websites, get the best practices
and best patterns, store it in its
knowledge, so it knows what to see and how to build the prompt, so
it's actually good. When everything is in
the knowledge now, we can start with building
our first prompt. So in order to start, I'm going to gather a couple of links and a lot of screenshots
for things that I like. What we're going to be creating is an app to monitor Spacecraft. So what I'm going
to do is look for the best search apps that exist
and feed the GPT with it. Alright, so I found a couple
of articles that are talking about Spacecraft missions and monitor different
spacecraft. So I've put their
links in here first. Then I've put
different articles and the images in it for
Spacecraft monitoring like Ds in Grafana, this in data Dub, this space control
software for these people, more Spacecraft software, even
more Spacecraft software. All of these are here. This one is not.
It's added as well. And now comes the prompt, which is as follows, you're building a Figma
Make first prompt. It needs to be detailed
and give so much that a US pregraduate can follow through without
being distracted. What we are building
is a prototype for a Spacecraft monitoring tool in the theme of Gufan really important to pick a team and tell the GPT which them. You need to analyze Grafana, its structure, its UX, its UI in details and tell IgMa make how to
create the prototype. The prototype
essentially will have three screens, one for overview, one for operational analysis, and one for launch
and landing analysis. Make sure to give an
excessive amount of details, so no error incur. And here's a tip that I
want to show you 100%. When you're doing this, make
sure to do a deep research. Currently, I've put
it in the thinking. We're going to put it for even more like extended thinking. Now we're going to
create our first prompt, which is super strategic
and without it, as I told you in the beginning, your prototype can
drift away so badly. So this is the one
that you need to do. Sometimes it takes
several runs where you ask ChatGPT to
create it, then read it. Then print it again and
read it again and edit it, so you finally have
what you need. So let's see what it
comes up with. All right. And now after some
thinking, again, if you have the option here to not only use
extended thinking, but to make a deep analysis, you can do it for sure, and
it's going to be better. But now we have the
thing that we need, and this is our first prompt, content, tasks,
guidelines, everything.
3. Perfecting the Figma Make Prototyping Bible: Success criteria is blank, so this needs to be for sure, but in and what I'm going to do, and if you want to, you can do it as an extra mile as well. You can copy this from here, start a normal chart
from Chan GPT, click here, say Deep
Research and tell it. Make a deep research, make
sure this complies to the highest standards of UX and AI prompting for being
Mmeic and Lovable. Check your knowledge to
make sure it adheres to success criteria
that will encompass easy discoverability and
excessive feature usage. You paste the big tank, and it's going to make a deep, deep research for this. Are you looking for a
detailed Figma Make prompt? Yes, a full exoted. Yes. Simulated fema layout. No. And restart the research, it
will take it a little bit. But the prompt will
be even better. So let's wait for the research. Once the research is done, once the prompt is done, we're going to go and
actually apply it. See what Figma Make is
going to do with it. And of course, then test
it out and lovable, see what the difference
is going to be. But just wait for a bit, and then we're going to go
to our next lecture where we're going to bring
this prompt to life and make it happen. This will be your
first screen for our perfect satellite aircraft and spaceship monitoring tool. Stay tuned. See you
in the next lecture.
4. The PM Prototyping Mindset : Can you get a solid
prototype out of AI without giving
it proper context? Exactly. You can. In this lecture, we're
going to focus on the single most important
piece of the process. And this is building your
primary prototype prompt. The one that will create
the first visual, the one that acts as foundation for
everything that follows, your most strategic hit throughout the whole
creation process. This is your brief.
If you mess it up, your prototype will be
all over the place, and it will drift ever more
with every next prompt. I'll show you how to use Cha
GPT like a smart assistant, how to give it the
right ingredients, and how to make sure
it behaves more like a senior UX thinker rather
than a distracted teenager. Let's set your prototype
up for success. Let's get your building.
See you inside.
5. The Core "Visuals & Logic" strategy: Syncing prompts & images with AI.: Okay, now, after
the deep research, we have our master prompt. This is the holy grail. We just take it, Oop, til the bottom, copy
it, and there we go. On the left hand side,
this is lovable. On the right hand side,
this is figma make. Let's see what's going
to happen when we put in the master prompt and a
couple of screenshots. So let's put the big
prompt in both places, and then attach the screenshots. We have agreed that what we're doing is doing a
grafana prototype. So I've gathered five good
screenshots from Grafana. So lovable and Figma make. We'll be able to understand, Oh, we'll have to
do this one by one. Okay, one, two, three. Okay, there is our
first difference. Here you can add up to three, here you can add up to five. So are you ready to
see our first screen? Again, I've got the most important and most
representative screenshots, the huge master prompt, three, two, one, let's
go. And let's go. Let's see what happens
after this is done. Both systems are working.
Design iterations from lovable. On the right hand side,
Figmme writing the code. Let's see who does it first. Let's see who does it
better. There we go. Lovable was first. Let's
wait for Figma made now. And now the moment of truth. Let's see what happens with Figma just a couple
of more seconds. There we go. I'd say that
this is rather similar. Now, when we look at
it on both sides, it really feels quite similar. Provides you with a dashboard. Let's expand let's
expand and see it all. Yeah, this is a lovable one. And this is the Figma one. I would say that somehow the figma one looks a little
bit more like grafana, but so they're quite off, and there is absolutely
nothing clickable. Let's try a couple of prawns, just so we feel how
things go. Let's see. Let's bring Chan chi PT again. Go to our prompt
generator and tell it, I want a prompt that will make
the prototype applicable, similar to the scenes
framework of Pana. Make sure that you give me a figma lovable front
that will get reasonable. Throw down menus, all
my peoples and charts. Let's see what Cha GPT
is going to come with. Make sure to enrich
the prompt with asking the to make the polo
protester type more fun. Now, just as we wait, I want to check out one of these screenshots
that I like more, so I can show you how
picture means 1,000 words. Let's see which one shall we pick. It's always the last one. Okay, let's copy this posted
on both places here lovable. And let's get the one from the actual space
mission from Grafana, this one, posted here, posted here. I
think I missed one. Okay. And we forgot
to feed lovable. Here you go, lovable. And now let's get this Brant,
which is inti. Come on, he GPT.
Pages, dashboards. Go prompt lovable. Let's prompt Figma mic. Now, it should give us
a sufficient amount of clickability around
the prototypes. Let's see how it
vetoing thinking. And now, just to make a recap, here we have the space status, the communication,
the thermal system, the altitude control. We have biographs and time
series just like Igufan has gotten the idea from all of the different
mockups and provided power system and
thermal monitoring, a good good dashboard
for such launch control. Here, it is rather the same, but I had the
strange feeling that it really wanted just
to mimic the black. And, again, it's common
health power thermal. Essentially, it knows
what it visualizes, but there are some deviations. This took far more inspiration from Grafana and this is a lot similar even though
this liquid glass type of design is not my favorite, but we're going to
prompt it some more, and it's going to provide
far better visualization. I'm almost certain that with this prompt, it's
going to happen. If not, we're just going
to prompt it some more, see what happens next. Okay, Volvo is ready. And again, reviewing
latest, there we go. Have these, but it really
doesn't feel clickable. Nothing is clickable, and I cannot choose
anything interesting. Let's see what Figo will do. Give another prompt
while waiting. Give me a selection, drop
down, filter on top. That will give me the ability to choose from the four
spacecraft names. Also make the filter interactive and able to
filter the dashboards below, make the battery, SOC, P generation, and the
other boxes on top, clickable and leading to redefine dummy
dashboards drill down. See if Figma did something, or it is still thinking. There we go. There is
even a prototype guide. Everything looks
good. Maybe it is Oh, see, it is clickable,
and it goes somewhere. Things on the right
are flicable. Interesting. It killed it. It has some kind of
a service on top. We'll revert. Okay. Now here, as we have all of
these, they're all clickable. When I click in, I have another dashboard,
which is amazing. Give me a back button that is liquid glass
style in the middle, lower end of the sing so I can
go to the previous screen. We'll have more convincing to do with the Figma
make prototype. Usually, I'm really
happy with figma make. Today, I think that I confuse
it with the latest prompt. There we go, and when I click, it's going to be nice
if I hit a back button. There it is. The
little back button. Fantastic. So we're done with the lovable for this session. I think this time, it has provided a
really good experience. Now, let's focus on the Figma making and
see what happens there, whether it's going
to go out of a coma. Alright, it's white now. I
like it more when it's white. Arrange everything better. Follow the side navigation of Kafana which I'll give
you a screenshot of. And then I pause the same
promptna side navigation. Or we can do something else. Play dog krafana.com, open it. Open side navigation.
Let's do this. We'll give this in the first
menu on the left airspace. And this dashboard should be it. Finally, follow the general
grafana outlook and styling. So it peels and navigates
as grafana screenshot, two. Now, let's give it another one. Let's do grenades. Yes. Okay. That will do. Don't mimic the text
and measurements. You just styling. Let's see how it goes now.
It should be far better. Sometimes it takes a little
bit more convincing. A little bit of a
forceful reboot. And there you go.
This is more like it. Se Finger Make really likes more screenshots and
telling it what to do. And yet again, you see, when you click, it has
the little back button. It provides you with exactly Grafana style
visualizations. All of these are here. This is marvelous. So
with this in hand, we have our first page, and we can go forward with it. In our next lecture,
we're going to see which one to choose. Which one is better,
even though, hey, these are both
phenomenal tools, phenomenal tools, and having the good knowledge how
to prototype is amazing. But there we go. We
have covered based one. Have your main screen. You
have your main prototype. Now let's go see whether
we're going to use Figma make all over bow in
our next sessions, and what's the difference? What's the similarities
and how to go forward. See you in the next lecture.
6. Building your Master Prompt & Recap of the method.: Nice. That was the
most important part of the whole build process. You now know how to sculpture your first prompt with
precision and not guesswork. You've seen how to
combine visuals, links, and logic to guide Cha GPT into doing
exactly what you need. And remember, garbage
in equals garbage out. A great prototype
stands with a smart, well fed AI in the next lecture, we'll turn that prompt
into actual screens using bold visuals and smart
instructions. Let's go.
7. Figma Make vs. Lovable: The Showdown: You now have much more control, and I'm sure you can feel it. By combining visuals and
detailed instructions, you're steering the AI like a creative director and
not just prompt writer. This approach helps
you build in flow, maintain consistency,
and get screens that feel just like
the same product. Next, we'll talk about
which tool to use, whether Figma mak or lovable and what are the
differences and similarities. So stay tuned and
see you inside.
8. The definitive comparison in practice: And we're back to the
screen of lovable figma, lovable on the right side,
Figma make on the left. Now, this lecture is all
about choosing a tool. And I'm really here
to tell you that regardless of which
one you're going to choose you're going to
choose the right one. These two are both fantastic
Air prototyping tools, and they have so much in common, but also there are quite
a few differences. So even now, when you
look at the screen, you can see that on the left, Figma make looks a little
bit more structured, a little bit more
like professional with a design that
was embedded into it. It is clean and is Figma
compatible for sure. Yeah, yet again, it can
need some convincing, as you saw, that we had to do one or two more
prototype prompts. But at the end, the result
is really, really stunning. It is a little bit slower. It takes a little bit more
time to figure things out. But when it figures things out, you can see that it is
really easy to use. And for me, and going forward, Figma most probably is
going to be my choice for continuing the
course, but lovable. There we go. Here is lovable. Ovable is amazing because
it has a mind of its own. It is extremely quick
because it relies on design patterns that are really widely applicable and
they're emotional. They're like, the design
patterns of its own thing. Lovable always has
its own thing, that it is really close
to what you ask from it. But still, it is
really suitable for your visual, fast AI ideas. Again, it's emotional, and
it provides you really, really quick results that are so close to what you ask for it and sometimes extremely
professional. Both of them are working
fantastically well. Ma cha GPT, as you saw, but you should never forget that lovable has this fantastic prompting Bible that you need to get and feed to your GPT, so it knows how to prompt. And the even better thing
is that the prompting Bible from lovable
works both for lovable, for Figma make, as well. Finally, the UX
knowledge behind it all. You saw that when we
started teaching our GPT, we provided it with
different links and with different screenshots, not only related
to AI prompting, but for good UX in general. And I'll leave you with this. You always need to prompt
your GPT with things like the Silicon Valley Product
Group loved book that has really enormous amounts of
knowledge around UX and how to build products that
your users will love or anything else that it
is out there that you like, that you like, the theory of it. Just get screenshots
from these books, get quotes from these books, and feed it to your GPT. Afterwards, the choice
of tools is easy because figmomcN all lovable, mixed together with cha GPT, and the correct articles and correct knowledge are
the holy trinity of AI prototyping of this really interesting
period of human civilization, which is the AI part of history
that we are living now. So, from today onwards, from this lecture onwards, we're going to use Figma
make for continuing our prototyping experience
and our prototyping journey. Stay tuned where we make this spacecraft
prototype even better. See you in the next lecture.
9. Who wins and what to use?: Have you ever built a
prototype from an AI tool? That kind of works, but doesn't really feel right. That happens when you work with only texts or only visuals. In this lecture, we're
going to combine both. You'll learn how to prompt AI tools screen by
screen using screenshots and detailed instructions
to get exactly what you need without letting AI drift. This is where your prototype starts becoming real. Let's go.
10. Building Flow First End-to-End AU Prototypes with Figma Make: Have you ever been so stuck
and tangled in your prototype that AI builds strange screens and always ties them up badly, and you need to revert, rework so often that
you finally give up. This usually means it was built screen first
instead of flow first. And in this lecture,
we'll use tools to map actual user journeys so your
prototype can follow them. You'll learn how to
build one flow at a time and how to connect screens based on
real interactions and not guessing what
the user should do. This step is the bridge between
strategy and execution. So let's get you
building, see you inside
11. Creating User Flows to help you Build a Comprehensive Prototype: Welcome to the next thing
that we're going to do with our fantastic thing make prototype the spacecraft
observability tool. Now, even though we
have some graphs and we have some interactions
with the buttons, we want to get even
more out of it. We don't want it to
be so static and want it to be
interactive and actually provide us with far more details about this spacecraft and how
we're going to observe it. Get this with a grain of
salt, and think of it. There's every other
prototype that you're going to do
where users can interact in a different way with the product that
you're building. Need to strategically know and technically know what will happen when a user
clicks here or there, where they're going
to be led and what their user journey
is going to be. So for today, we're going to have three different journeys around clicking under
the different resources like common Health
power battery thermal. Additionally, we're going to ask for a couple of buttons on these graphs that
are going to show us predictions for the
different resources. Finally, we'll make
the event timeline clickable so that we can see the more details
for the events. However, even if we have
this vague idea in our head, what we can do so we can ease
ourselves and we can have a good visual is here in
Mirror, we can start a board. There is a really nice
out of the box board, which is called
website Template. This one, which is the
website flow chart and the website wire framing. For this, I'm going to use
the website flowchart. We're going to use
it pre filled. And now let's keep
it super simple. Going to delete some stuff
just so we keep it easy. These we don't need these. Okay. There we go,
don't need these. We just need the first screen. So our first screen is
as in sitting here, I'm just going to copy it. Here we go. Put it here. And we said that we're going to have three different
connections. One is here. Let's give it
a little bit of color so it is more visible and give
it some weight. There we go. Which color is the
best, this one. So this one will go here, this one will go here, and this one go here. Come on. Here, when we click, we can put some text, so it's easier for us. When a user clicks
on a card above, you should be able to see
a subset of dashboards and alerts related to the
common health, power, energy. What was it and thermal? And more. Now, we are here,
and we know that currently the prototype is
opening this dashboard. However, we have just
random things in it, and we want to make
it more actionable and provide actual data that
it is useful to the people. So we're not going
back to lovable, we're going to ChenEPT. We're going to go to our friend, the figment lovable prototype.
Going to ask it something. We're going to ask it give
me feasible metrics and visualizations
with thresholds or spacecraft that indicate
overall health. What was the other
one? Overall health, power energy and thermo, power, energy, and thermo, they will be used for an observability prototype in Figma make give
me a gray prompt, just like we did before or a pregraduate easily
distractable UX student. The graph built out of
these are going to show in an embedded view a drawer when clicked on a certain card
on top of the design. Let's see what's
going to happen. While we're waiting
for the prompt, we can do something even better. As we said, pictures
worth 1,000 words, so we want to see
the graph type. So let's see we can
do the following. We can see drawer
dashboard, images, and for the sake of it,
we can just look for something that we
like out of these. I'd say that this
is good enough. And it is as simple
as doing this. We're going to copy it.
We're going to go back here. But see what prompt we have. Copy and paste to prompt. But in figma M, and wait for it. So this is going to open
from all of these here. Here, there is one trick
that I want to show you, and let's get rid of
the screens from now, just so we can clear
space for our text. When you add the screens later, it's going to look
better if you want to. But in events, what
you want to see when an event opens and when it is related to a thermal overall health
or power resource, you essentially need to link the same inside view and open
a drawer when you click on. I'm ready with this prompt. We can go ahead and check out that every single card of
these needs to be clickable. And when you click on the
card and inside you appears, but when you click on the
event, a drawer appears. These two will be
linked together. And this is that
type of relationship that I want to show you here and the fact that you need to
make this user journey tree so you can be successful best places to make it visually here in Mirror. With that in mind, we can now go again back to our
prototype and prompted, see what is going to happen. Once this happens, we
can go and try and build the events little prompt. So I get what I had previously. I see that events timeline
is the header of the card, so I definitely need to prompt CHANGPT to build
insights views for the events tab and
make sure that always you put the correct name
in event timeline widget. Then we post the initial prompt. Let's say it again when an event opens and it is related to one
of the three cards on top, it should link to a drawer. We need to give HAGPT the essence behind
the usage journey. When a user clicks on an event, it should open a dashboard. It should be a predefined
dashboard for now, a the M one, so it can
have good visualizations. It should provide some
KPIs for these events, and afterwards, we're
going to link it back to the insights views for
the four cards above. So let's see what's
going to happen now. Getting this, pasting it to chat GPT, to have a really good, nice lengthy prom for both per overall health and battery, so we can have all these links. So I'm going to take
the previous prompt because this is going to
be the linking prompt, and I'm going to just leave
the fact that Figma make needs to create these inside
views within the event stab. Afterwards, we're going
to do the linking. So are you ready? We click it and Chad GPT
gives us the prompt. See what Figma make is
doing during that time. It's still working. So let's see how this will go after
the prompt is finished.
12. Build a Comprehensive Prototype by connecting User Flows: Okay, now Figma
Make is thinking. And what we need to
do here now is take this chan GPT prom that
we have previously made. So the KPIs within
the top four cards or the insights views are similar to what we're going
to build for events later. Our mingle here is for the
top four cards for thermal, health, battery, et cetera. Be clickable and to open
an inside view that we see later link to event
timelines on the right. Now, Figma Make is almost done, and once it is done, we're going to prompting
it with the KPIs. Again, think of it as a tree. We're going to link parts of the insides views from the cards on top to
parts to the events timeline so we can
have an event when a certain threshold from
the inside view is reached. There we go. Now when we click
it, oh, there is an error. Give it a second. Try again. When we click it. There we are. These are the inside views. But yet again, they don't show the same KPIs that we want. So what we're going to do is prompt Figma
Make to make sure the different views adhere to the same KPIs that we have
provided it previously. We're paste big prompt from Chan GPT with all the Lambdas, all the thresholds, and
it starts working again. See, all of the
different KPIs that we can link to an event when a
certain threshold is reached. And it's easy to grasp, right? If a spacecraft gets overheated
or it loses battery, there should be an
event telling us, Hey, it may go down or hey,
something bad can happen. Okay, Figma Make is finishing now, just a little bit more. Slighter that's
going to fix itself. Maybe a little bit more time. But now when it's
finished, you'll see that the same KPIs
that we had in ChatGPT will be into the dashboards for
the insights view. Okay, finishing it
now. Almost there. And it's done. Let's click it. And they have it. We can see
the KPIs that we wanted. We can see the event timeline within the insights dashboard, and we're ready to connect them. One thing that really annoys me is this ground
tracking situation. I wanted to have a map with
a little mockup inside, so it is not that
black little window. I want to see the
spacecraft and where it is going within that widget, so it is far more actionable. And we can see its position. So make Ground
Track situation map with a small aircraft mockup
and show its position. And again, let's
prompt it human like. It's really nice that once you have a good initial prompt, then you can start
conversating with Figma in a human readable way. And within the miracle of time, it should now provide us
with a far better visual, and we will see our aircraft on a little map in
this widget in 21. There we go. Here is our little aircraft
and where it can go, where it has been so much
better, so visually pleasing. Now, the last thing
that we have to do is to start building
our events tab. And when we're doing
this, we want the drawer. Yes, we have already
built the prompt for the drawer and what it
needs to do with ChatGPT. Again, we copy the prompt, and we give it to Figma
Make so it can make the events clickable and opening a drawer from
the left to the right. They need to open the
predefined little drawers that we can link to
the top four cards when a threshold is exceeded. So let's see what
happens when Figma Make finishes working
on these drawers, and this will be the
last step before we link both of these and
have an actual usage journey. Figma Make is finalizing a little error that
we have to fix. Alright, let's see
now what happened with our events timeline,
and are they clickable? They are clickable, but
they don't look clickable. See the drawer opens
just a little bit. I really wanted I want them
to look more clickable, and this is what I'm
going to prompt Figma. I want the events to appear clickable being
highlighted in blue like hyperlinks and
also the drawer to open more to the left
deal, the middle of the page. And again, through the magic of fgnomc understanding humans, we'll be able to see if
it's able to do that by simply prompting it
with human language. Let's see how it goes. Our primary prompt is solid, and I feel that Figma
Make now understands what it's doing and where
we're going with this. Let's see. Figma
Make is finalizing. And yeah, there we go. They're blue. They
appear clickable, and the drawer opens
to the middle of the screen with all of
the KPIs that we wanted. This is a great result. See
you in the next lecture.
13. Congratulations! You've built it! Next we will go all-in!: That's how you keep
your prototype grounded in real user behavior. You now have a working blueprint for what your users
actually experience, and that makes every screen
you build next easier, faster and more focused. In the next lecture,
we'll put all of it together and go from blank
to a working prototype. Let's build it. See you inside.
14. Build your brand, strategy and master prompt: Ever wonder what it actually
looks like to go from zero to working prototype
in hours, not days. Well, this is it. In this lecture, I'll
take you through the full process of combining your initial prompt
with your visuals and extra prompts to your flows
and all of the AI tools, the Holy Trinity,
Lovable pigmmic had GPT. You'll see how everything
we've talked about actually comes
together step by step. This is the magic
happens. Let's go.
15. Getting from 0 to 1 for your personal website with Lovable: Again, we're in the
screen for Lovable and the prototype for the mission
control AK Spacecraft. But today, we're not going
to be talking about it. We're going to do
something totally different so we can explore
not only Figma Make, but also we can explore
lovable superpowers. What we're going to do today
is build your own website, build your brand, and build
your presence online. This is extremely
important because every big professional emictally
has their own website. And now from start to finish, let's have a full experience of Lovable and everything that we have learned in the
previous lectures. Oh, without further ado, as we said, we're not
going to be doing that. We're going to go to Dashboard and start
something totally different. But as we have learned,
first, we need to plan. And this is why I have planned. Now Miro. I have
this mind map of how someone's website should look and what I wanted to have. This is the experience tree, the user journey tree that
we have been talking about. It is simplified because
at the end of the day, there are not so many
things that you can do on a product managers or product consultant's
page. So here it is. First, we have a lending page with my favorite
stick figure, images, a logo, and a name, which goes into three main
chapters into the website. One is the call to
action buttons, which are first,
the services that are second and contacts
that are third. Under action buttons,
we have LinkedIn, medium, and Substack
where people can see me and follow
me in LinkedIn. They can read my
articles in medium and subscribe both
medium and to Substack, depending on their preference. On the services, this
is where money is made. If we think about what services, let's say, I provide, this is hiring aid
for companies, helping them hire the best BMs, training aid for both
companies and people. Well, we are in this
training course, so I'm providing
this service to you. And finally, tailoring CVs for aspiring product
managers so they can hit and achieve their
first or next job. Under contact, two
things cently or any meeting scheduler that
you want to use and an email, so people can send you emails. So with this, I have a general idea of what
my website should do, which is the first thing.
It is really important. But then, apart from
what it should do, we need to know how
it should look like. And I was thinking,
should I prepare a couple of links prior to
people that I like, et cetera. But this would be super
biased and super subjective. So what I thought of doing
and what we're going to do now is super improv,
together with ChatGPT. So let's go to ChatGPT. We want to tell it, I've
set it to thinking, so it gives me better answers. And now let's think
strategically. The main purpose for this
website is marketing. It's not product management. So if we think about the
components of such a website, best place to look
is someone who is a great marketer and has
their personal website, someone who is a
great product manager and has own website
and a website, a personal website that
is extremely influential. So this is what I'm going
to prompt ChatGPT with. So give me three websites. One for famous Market Make that has the most
traffic of visitors. Three personal Personal Website. Of people, one for
farmers marketer, one for famous product manager or product management
consultant, and one super influential person on YouTube that has a
well regarded profession. I want these websites to
be highest in traffic and influence among
their target group and to be wildly recognized. There we go. Three people. We prompted, see where it leads. Let's see now where
it is going to go. It has a good thinking
pattern, and let's see. Here we go. These are
the three people, Neil Patel, Product Manager,
Marty Keegan, amazing. Andy Torsa Ali Abdaal. If you haven't watched the Lee's podcasts,
they're really good. Okay. We have those three. Let me see if the links
work. Yep, they do. One VPG is working. Let's just see.
Alright. Good. Amazing. So we now know approximately how our website is going to look
and what it is going to do. So now I'm going to
do one more thing. I'm going to get this. I want to screenshot, just to try to save myself some work. I'm going to go
again to Chan GPT. Oh, tell it, please explain
the structure of a website and wording that we will later use or lovable
pump. There we go. Fantastic. GPT
explained exactly what we had into the Mockup. Now, what we are going to GPT
is repair Lovable prompt, such as you are talking
to a pre graduate of a high school that is
somewhat skilled in UX, but it is extremely recycable. Make sure that it follows the Lovable dot Dev
Prompting Bible. It is extremely detailed, and the result is a perfect
self brand website. A product management consultant. Use this website structure. We copy the website
structure as examples for positioning and
the way it looks, use a blend of the
following websites. We said Nopatel SVPGF the stick figure morphobs each
from the following links, and I'm going to give
it some links articles. These are things that
I have done myself, more or less with the help, of course, of some GPT. But essentially, these are the stick figures
that I love using. They're part of my brand, and I like them sufficiently to, to put them in my website. I'm going to put here
deep research as we do so it can have a deeper
research and a better brand. And now let's see what magic will happen. Oh, one more thing. Make sure to use the colors of the stick
figures for the website. Alright. Well, let's
see what happens then. Okay, before we start, what are the nicknames that should be used and
the logo? All right. So the name is Seal
calf and F. You can generate a logo that consists
of the initials, VK. Do you want a tone and the feel? Use the tone and feel from the
three websites that I ted, namely, I'll be
extremely directive, so it doesn't think
of something else. Should I write a prompt, assuming the site will be built in Webflow framer or code, the site will be built in lovable dot Dv Any specific plot line slogan you
want under your name, generate the slogan and be inspired by set,
Godin, purple, cow. Okay. We think that we're good?
That will be interesting. Let's see now where the research is going to finally start. Great. Says, Where
is gonna get it, the color from my themes
with the stick figures, generate the slogan,
generate the logo. Let's go. Let's see how
it goes. Fantastic. Now finally, after 13 minutes
of thinking and tin sauces, we have the Lovable prompt. I have read it, and it's really, really good, just
like last night. Oh, we've got a car plan. Time to make it happen is what a GPT says. We go to Lovable. We give it the prompt, but I would add several
screenshots as well, because image is 1,000 words. Let's compose a
quick set of images. You can do this into
No, straightaway Nuro. I'll just take the ones
that I like the most. Oops. Then we go. I'll compose one image out of all of these to see
whether it's going to fly just so we don't exceed
the limit of three images. I think we have a good
subset of stick fig images. Plank space? Okay.
Images are ready. Lovable is here. Oh, so let's get two images. Let's do Aileen. And finally, S VPG. Okay. Now when we have the
three screenshots, the prompt, let's see
what's gonna happen. Lovable starts to work now. And once it is done, we'll have hopefully a
really good personal website for me with stick figures
and a good functionality, everything in one place.
Let's see how it goes. A. It's a bit of a shock, once Lovobo spilled out thing. And, oh, my God, I saw this and I was
like, This is the end. This is the end of the course. Lovo is not doing what
I'm asking it to do. But when we scroll down, we see that it actually made a decent website follow my work. It says Linked in
media newsletter. It says hiring support, training and workshop,
civil career coaching. It provides really,
really good stuff. Book a call with my calendar integration
straight into it. Email me. I'll check
out this later. But the general
website is fantastic. We have is these things, which is extremely ugly. Now, what we're going
to do is go back to ChatGPT and tell her Let's do three personal websites with phenomenal landing pages. Field of play is product management,
marketing and consulting. But with a little
bit more prompting, I'm sure that it's going to end up this beautiful website. Let's see what ChatGPT
will provide you with. Which are those three
personal websites that have phenomenal landing
pages according to ChatGPT? Okay. And with the
magic of time, we have our contenders. First one, No. Second one. And again, this
is my personal preference. It really depends on how you wanted to to just look
like. This one was better. Oh, Lenny. There is Lenny. Fantastic. I want to get inspiration from
Lenny as I always do. If you don't follow Lenny,
you know what to do. Alright. So we'll
tell Lovable make the landing page with name similar and the blend of
those two screenshots. This is one and I like
April Dun fold for sure. You can use some of those **** figures instead
of the one you created. I in screenshots, too. What I'm going to do is go back to Miro, download
these one by one. Okay. Done. Let's see if this
is gonna be better, and let's hope it's
gonna be better. This is a little bit better, but the text is just stolen. And V even better, I feel. Let's go back to NGPT. Let's use our prototyping
one, and I'll tell it. I want a pronto lovable, but to tune only
the landing page for a personal
website to be similar to the screenshots and generate the stick figure instead of
the human in the picture. It needs to use the
goers and stick figures, similar to the screenshots, I will give needs to simple but people
want to scroll down. Okay, let's try
this one more time. This time we're first
going through Chachi pet, these ones, and that one. Oh, one more thing.
Make sure to comply to the Bible in your
knowledge and to be super detailed as you are explaining to a
preschool graduate with limited UX understanding that is super easily indistractb. Okay, let's do this
one more time. Alright. We have the prompt. There we go. Let's copy it. Let's copy it and
see what happens. Alright, much better. Now, maybe we'll be able to
just make this, edit spacing. Nope, this is fine, but padding. Okay, let's try another thing, N. Let's delete King empty white spaces above and below
the landing page slimmer. So the positioning, worry
and strategy buttons are almost touching the
top of the page. Confirm.
16. Pitfalls and things to be aware while finetuning prototypes to products: Okay, now it's time
for something funny. We left at the
point where we had this with so much pacing
on top and on the bottom, it was hard to scroll. I will tell you a hidden secret. I tried when I ended
the lecture to edit it, and I was like, getting
visual tools and seeing that there is
nothing I can do. See, when I click
on it, I cannot delete the empty spaces behind. Write everything that I could, and then accidentally,
I scrolled in, and I saw that I
was on 90% Zoom. So essentially, this will look as this rather than what
I showed you previously. So more of the
story is there are a lot of moving parts,
so take care of it. Let's see what we can do now. Maybe we can add some padding. No, we cannot. This wasn't good. So let's discard it. I
feel that we can leave it that away for the time
being, one more try. And let's see
something different. Make this bigger
and make the font larger is what we
want to do. Amazing. Okay, this looks fantastic now. What we have to do now is just change the text,
make these buttons. This is the wrong color so
we can get the visual edits and start doing this one by one so we can have
more targeted prompts. Make this button
with the pink style of all other buttons
style and hover over. Okay, now it's pink, but still make it same as medium. Let's
call it that away. Visual edits, make it same style as the button
behind medium. Let's see how it
is going to react. No, this is not what we wanted, so we're going to see
revert the last change, make it dark pink once of Dv. Okay. Me learn how it worked button look more
clickable and like a button. Make it look the opposite
of work with mean button. So there is some contrast. Then I'm going to start
prompting it for this thing. Positioning stories
need to be buttons, and they need to be called. Help you there with this. Contact, they need to link to the respective parts of the page according
l. Okay, I like it. So these things
should change now. I like this better
than what is it here. So make learn how it works. Same style as the buttons. I help you service and frontag so we can
have some consistency. Yes. Okay, super nice. I want the scroll to
see how I help bold. Okay. Nice. Now we can change the text, dig this, go to Chat
GPT, and tell it. This is the heading
of my website. Make it more influential,
shorter and punchier. And the fact that it is product
management consultancy. Click Word product management
consultancy. I like that. Let's change it. Click Word product
management consultancy. Okay. Can you even call it click Worth
product management. Click Worth product
management is fine. Tins to be shorter and sharper. Again, you can do whatever
you want with the wording. It is extremely important. But you can do, as we did for the lovable, prototyping, GPT. Just go ahead and teach it. Marketing knowledge,
teach it how to make these phrases hit well. I turn complex products I
into positioning that sells. I help you turn complex products
into simple positioning. I help founders and
leaders turn complex into positioning that sells.
Okay, let's use this. And again, this is mainly
for testing purposes, so it will be fine. Then we can go down.
These are nois. I don't like the fact that
they are not clickable. So make clarify position and communicate buttons
that open pop ups with text and then generate
good pop up text that provides details around
the subheading and heading. The idea is that when
I click as a user, I'll get some more information
about how I help you. Let's see how it
goes. Here we go. Fantastic. Make the
icons appear pink as in d in and mediums below
so we can have consistency. The icons pink. Make them dark pink when the
user hovers over them just as the hover over the medium icon works to
being even more punctual. Nope, nothing. Let's
try once again. Make them appears in the screenshot styling
when hovered over. Sometimes little things
take a lot of clicking. Okay, I did something.
Yeah, it makes it darker, not the same color, but if I
prompted several more times, it's going to happen,
let's try and get more important
things done before we continue prompting
it if we want to. So now I want to
add the links for my medium and my
newsletter behind the buttons and the following
link to the medium button. So when I click, it opens in a new damp. Let's put I'm in there and put the following link behind the newsletter button
where it opens. I tab, Substack at my substack or just at this
one for the sake of time. Let's see how it goes.
Alright. Let's see. Does it open? Yep.
News letter. Yep. Works. Services.
Now, I would ask you to when I click on hiring
support trainings and workshops and CV and career open a nice pop up with additional text that
explains how I do it. Okay, nice and even change the style the
way I wanted it to. So when I click, Go
to get in touch. When I click, it goes to get in touch and when I click,
it goes to get in touch. I will tell you, whenever
someone clicks on Get in Touch, it should always
open book a call gallantly link **** in
Street away Book call. Let's see. Then we'll
have to just fix the buttons below.
That would be good. And maybe these
buttons will be done. This is going to be a
phasing new website. Okay, it's done. Let's
see. Book a co. Fantastic. This is good stuff. Now, make the and email
me buttonsctively, look like the work with me buttons in style and hover over. Actually start to like these here that they have a different style
because they forward. They are actually
redirecting you. So I'm okay with it. Make the email me button
as big as the book button. Oop, finally. All right. Alright, right, right. Nice. I feel that with this, we're really good to go, see
how I help you Services. Book a call that we're good. This is how you essentially use lovable
to make your own site. And when you hit Publish,
you can add your URL and go public with it.
This is fantastic. Thank you very much for staying with me during those
several lectures. I am absolutely
certain that you'll kill it with AI
prototyping from now on, and that you understand
quite well how the relationship between
Chan GPT lovable Figmamk is being done and how well
you can communicate with all these three tools to generate amazing both
prototypes and actual products. See you in the next lecture.
17. CONGRATULATIONS! YOU HAVE UNLOCKED INFINITE LEVERAGE. GO BUILD THE FUTURE!: And just like that, you build it a working prototype
using AI in no time. This is the new standard. You now know how to brief
AI, structure user flows, and turn ideas into tangible,
testable products fast. Whether you're
prepping for a pitch, supporting design or
validating an idea, this workflow gives you an edge. You're not just using tools. You're using strategy. Happy prototyping, and see
you soon. Amazing job.
Vasil Kaftandzhiev, null
