EP. 97 - 2,000 Users. Zero Engineers. Just Vibe Coding. w/ Yuno Myung

Yuno Myung shares how he built a real, working mobile app with AI—from prompt engineering to full-stack development. He dives into tools, failures, breakthroughs, and what it’s really like building with Claude and ChatGPT. No hype, just a raw look into AI-assisted product creation. 

You can find Yuno here: https://www.linkedin.com/in/kmyung91

Interested in joining the podcast? DM Behrad on LinkedIn:
https://www.linkedin.com/in/behradmirafshar/

This podcast is made by Bonanza Studios, Germany’s Premier Digital Design Studio:
https://www.bonanza-studios.com/

Chapters

• 0:00 Intro
• 0:00 Intro
• 3:00 Meet Yuno: Product, UX, and AI Journey
• 7:30 The Tool Stack That Actually Works
• 14:10 The EasyPeezy Origin Story
• 21:00 Building an MVP with Claude
• 28:00 Figma, GoodNotes & UI Process
• 34:00 The Pain and Power of Prompting
• 42:00 Components, Cards & AI Confusion
• 50:00 Why Design Systems Matter Early
• 57:00 What's Next & Closing Thoughts

Transcript

1
00:00:00,000 --> 00:00:09,920
Welcome to UX for AI. All right, so let's kick off with a bit of an introduction of what this

2
00:00:09,920 --> 00:00:15,440
weekly jam sessions are and what these things are not and what we don't want to do. First of all,

3
00:00:15,440 --> 00:00:19,760
we don't want to waste your time. There is no presentation. None of those things that you get

4
00:00:19,760 --> 00:00:24,880
to see in other places. This is just basically us playing around with things. And you know,

5
00:00:24,880 --> 00:00:30,320
was in the last week's session and saw it is, it's a, it's cool. And he said, like, I want to take

6
00:00:30,320 --> 00:00:34,800
over next week. So in case you have, you're working on stuff and you want to take over

7
00:00:35,520 --> 00:00:42,880
and basically have a session. In case you, you're working with these things, tools like, um,

8
00:00:42,880 --> 00:00:50,640
cursor, serve, just the names, scores and all that. Basically, if you would like to experiment,

9
00:00:50,640 --> 00:00:57,280
mean and take over. That's a very easy call. Okay. All right. So do I just jump in to my project and

10
00:00:57,280 --> 00:01:01,920
show you how I would go about it? Yes. I would just like introducing to the rest of the folks

11
00:01:01,920 --> 00:01:07,200
that are new here. I'll pass it on to you. Just take a bit of a housekeeping everyone in case

12
00:01:07,200 --> 00:01:15,440
you are new. Um, we have a Slack channel that is becoming active more and more as we run more of

13
00:01:15,440 --> 00:01:22,000
these weekly sessions in case you would like to join. Let me just share with you what is the

14
00:01:22,000 --> 00:01:28,800
channel is. So let's move this thing forward. If you're a close bunch of people, so in case you

15
00:01:28,800 --> 00:01:35,520
would like to join, join us please. There you go. Um, a bit about myself and, you know, I think

16
00:01:36,320 --> 00:01:42,640
needed my name is Barrett and I run a product studio based in Berlin to experiment with things,

17
00:01:43,600 --> 00:01:51,760
um, develop enterprise softwares. That's how we pay the bills and this is our website in case you

18
00:01:51,760 --> 00:01:58,880
would like to get to know us a cool fact. If you go to our inquire page, you see this crazy thing,

19
00:01:59,600 --> 00:02:05,680
we build this just by coding. So leave it up to you how you want to, if you want to go and play

20
00:02:05,680 --> 00:02:12,080
around with it. First thing first, a bit of a plug for our guests. Why not? You know, LinkedIn is

21
00:02:12,080 --> 00:02:18,400
here. Connect to him. Yes. So cool stuff and work on budget, good stuff. Yeah. That's a bit

22
00:02:18,400 --> 00:02:24,000
about housekeeping. More faces are here. Pleasure. In case you would like to give it a go and

23
00:02:24,000 --> 00:02:28,560
introduce yourself in the chat, but why are you here? What are you doing? That would be also really

24
00:02:28,560 --> 00:02:34,480
useful for me and Yuno, and also, you know, it's going to cater his conversation to your curiosity

25
00:02:34,480 --> 00:02:39,680
and challenges. This is a weekly jam session. So we basically, when we are not here, we are

26
00:02:39,680 --> 00:02:45,280
dealing with cursor, windsurf, whatever the case may be, and resetting with those tools. So in case

27
00:02:45,280 --> 00:02:52,800
you have curiosity, challenges, nice finds, also very welcome, we would be much appreciated. Yuno,

28
00:02:52,800 --> 00:02:59,360
I'll pass it on to you. I think let's take every chance of every minute here and dive deep.

29
00:02:59,360 --> 00:03:04,480
All right. Yeah. Thanks, Barra, for having me over. It's nice to meet you all. So my real name is Kevin

30
00:03:04,480 --> 00:03:10,000
Myeong. I go by Yuno. I'm based in Berlin and I've been here for the last eight years working at

31
00:03:10,000 --> 00:03:14,800
various startups, mostly as a product manager, but I have a background in business administration.

32
00:03:14,800 --> 00:03:19,520
I studied UX UI design and also full stack web developments. And so my work philosophy towards

33
00:03:19,520 --> 00:03:25,760
product has always been to have a holistic, generalist understanding of what the development

34
00:03:25,760 --> 00:03:32,560
process looks like. And I've been experimenting with AI technology since the day it came out back

35
00:03:32,560 --> 00:03:38,080
in like November, 2022. So I've been tinkering with the technology. I've seen how it's been evolving

36
00:03:38,800 --> 00:03:44,560
and I am using it very actively still to this date. And there's been one project that I've

37
00:03:44,560 --> 00:03:49,120
been working on for the past couple of months. Yeah. Right now I'm a founder of

38
00:03:50,000 --> 00:03:56,320
an app called Easy Peasy. But first let me just share with you my portfolio. You can check my past

39
00:03:56,320 --> 00:04:04,960
works. It's yuno-what.com. You know-what.com. That's my work. And currently I'm working on a social

40
00:04:04,960 --> 00:04:09,680
project called Easy Peasy. And Easy Peasy is just a mobile app that helps people find toilets. If

41
00:04:09,680 --> 00:04:13,760
you need a restroom while being out and about, I find you one in five seconds, wherever you are.

42
00:04:13,760 --> 00:04:17,840
So I advise you so that you don't waste any time and we do the work for you. So I've been just,

43
00:04:17,840 --> 00:04:23,440
you know, looking for an excuse to, yeah, use AI and this whole five engineering thing to see what

44
00:04:23,440 --> 00:04:27,120
works, what doesn't. And I've been experimenting quite a lot and I think I've had, you know,

45
00:04:27,120 --> 00:04:32,000
a lot of breakthroughs with this and I've seen others do things and I don't quite agree with

46
00:04:32,000 --> 00:04:35,520
their methodology and their conclusions that they're reaching. And what I want to do today is maybe

47
00:04:35,520 --> 00:04:39,440
share with you the process that I've been through, where the app is at right now, and why I think

48
00:04:39,440 --> 00:04:43,040
the technology will just get better and better from this point on and why I think anybody could

49
00:04:43,040 --> 00:04:46,640
really jump into this. And if done the right way, I think there could be a lot of good things that

50
00:04:46,640 --> 00:04:51,760
come out of this. So yeah, that being said, maybe, yeah, maybe I should just do like a quick demo.

51
00:04:51,760 --> 00:04:56,000
Sorry. You know, what's your current tool stack right now?

52
00:04:56,000 --> 00:05:05,120
I use Cursor using Cloud for 3.5. It's not 3.7. Sorry. And for general questions, I use ChatGPT.

53
00:05:05,120 --> 00:05:10,720
Cursor is just more for just like diving deep into the code. And I use Perplexity to do any like

54
00:05:10,720 --> 00:05:16,960
legal or market research that might be, you know, big questions. So I think when it comes to AI tools,

55
00:05:16,960 --> 00:05:23,840
those are mainly it right now. I love how limited your tool stack is. Is there any intention behind

56
00:05:23,840 --> 00:05:28,960
it? I think some of my experiences that ChatGPT came out and then the whole tech scene kind of

57
00:05:28,960 --> 00:05:34,000
hopped onto this like AI trend, they're basically branding regular technology that's existed for a

58
00:05:34,000 --> 00:05:37,920
while just as AI. And so I've been kind of skeptical about AI products. It doesn't get out

59
00:05:37,920 --> 00:05:43,200
there. So I've been reluctant to adopt them. And that's for me. Yeah. So for me, it's like if it

60
00:05:43,200 --> 00:05:48,480
works, I stick with it. And, you know, the last guest you had last week was Tia, who we worked

61
00:05:48,480 --> 00:05:54,080
together with. And he was the one who introduced me to Cursor in the time when I was skeptical

62
00:05:54,080 --> 00:05:58,080
everything else going on. So we hopped on a call. He gave me like a one hour demo of how he was using

63
00:05:58,080 --> 00:06:03,520
it. I got inspired, decided to use it. And back then, this was, I think January of this year,

64
00:06:03,520 --> 00:06:11,120
and we still had Cloud 3.5 Sonnet and 3.7 got announced and Cursor already had the 3.7 already

65
00:06:11,120 --> 00:06:16,160
integrated in the system. So I think that's when I just became a loyal customer. They're on top of

66
00:06:16,160 --> 00:06:20,960
things. If new language models are coming out, they just have it. Nothing's disrupted. And I think

67
00:06:20,960 --> 00:06:26,640
Cursor was a weapon of choice because Tia has the developer background. I have some developer

68
00:06:26,640 --> 00:06:31,600
background as well. So I've been using text editors to write my own code as well. So when

69
00:06:31,600 --> 00:06:37,200
you go from a very, you know, mainstream tool, like VS Code, and has all these plugins to customize

70
00:06:37,200 --> 00:06:42,160
your coding experience. And when you download Cursor, there is no friction. It feels exactly

71
00:06:42,160 --> 00:06:47,600
like VS Code. It has all the plugins available for you. The only thing is that AI lives inside

72
00:06:47,600 --> 00:06:51,280
it. And so that was just like the main benefit. So it was like such an easy thing to switch to.

73
00:06:51,840 --> 00:06:57,600
And, you know, start playing around with it. And for me, it just works. So I just stick with it.

74
00:06:57,600 --> 00:07:02,880
I've heard good things about Lovable, Bolt, you know, V0. I am not so inclined to try it because

75
00:07:02,880 --> 00:07:07,600
I'm satisfied with the results that Cursor has given me. So I'm just sticking with it. And I'm

76
00:07:07,600 --> 00:07:11,760
sure, you know, in the future, I might try toing out with other tools, but there's just so much out

77
00:07:11,760 --> 00:07:15,840
there. I don't have all that time. So just sticking to what I think is working best.

78
00:07:15,840 --> 00:07:21,360
The reason I asked this question and I bumped into another person on LinkedIn posts,

79
00:07:21,360 --> 00:07:30,240
and he said that, which I really resonate with, is that do not diversify, pick few tools and really

80
00:07:30,240 --> 00:07:37,120
go deep in it. And then you just mentioned your tool stack. Basically you're using Cursor and then

81
00:07:37,120 --> 00:07:43,520
chat you into, you know, general purpose stuff and perplexity for research and law. And also again,

82
00:07:43,520 --> 00:07:48,800
having that, having heard that one earlier, and then you're saying this to me, another basically

83
00:07:48,800 --> 00:07:55,360
resounding confirmation that, Hey, do not diversify, really go deep in certain tool stack and work with

84
00:07:55,360 --> 00:08:02,480
it continuously to get it, basically get into the ins and outs of it. Yeah. I think, I mean, this is,

85
00:08:02,480 --> 00:08:05,600
we're still very early with this. I don't want to pretend like I know everything. There's a lot that

86
00:08:05,600 --> 00:08:11,120
I don't know, but I tend to agree with that statement. I think they're all different beasts

87
00:08:11,120 --> 00:08:15,200
and you've got to kind of learn how to attain each one. So I think it just takes time and I think it's

88
00:08:15,200 --> 00:08:21,120
best to just focus on a few at a time. And my last question before you jump into and folks, if you have

89
00:08:21,120 --> 00:08:26,400
questions right now, just put it in the chat and try to get get them in as much as possible. You

90
00:08:26,400 --> 00:08:31,680
didn't mention anything about Figma and your developing a API? Sorry, I should have mentioned

91
00:08:31,680 --> 00:08:36,640
Figma. Figma is a big part of what I do. I was just thinking within the context of development.

92
00:08:37,520 --> 00:08:44,000
Figma is where I spend most of the time before I even open any, you know, five calling tool. So I

93
00:08:44,000 --> 00:08:52,640
use Figma for all the UI designs and FigJam for just some flow charts and stuff. But I think for

94
00:08:52,640 --> 00:08:58,400
the most part it starts from my iPad, you know, just have like this iPad mini six, really portable,

95
00:08:58,400 --> 00:09:02,640
contains all my notes. I use an app called GoodNotes and it just contains, you know, pages and

96
00:09:02,640 --> 00:09:07,680
pages of just raw dots, just diagrams and stuff. And I think most of the design thinking happens

97
00:09:07,680 --> 00:09:12,720
on the iPad and then I translate it over to Figma where I refine the things. And then after

98
00:09:12,720 --> 00:09:16,880
some lengthy discussions with, I think, chat GPT, just like asking, you know, if I were to flow this

99
00:09:16,880 --> 00:09:21,360
way, you know, why would you think about that? What should I be considering, you know, option A or B?

100
00:09:21,360 --> 00:09:26,480
What are the benefits? And tends to do a good job at entertaining these UX UI design debates.

101
00:09:26,480 --> 00:09:29,840
And then from that, I just take that feedback and then just like refine those designs a bit more.

102
00:09:29,840 --> 00:09:34,800
And then once I have solid designs and flow charts, I'll figure it out. That's when I jump into

103
00:09:34,800 --> 00:09:39,600
Cursor. I say, thanks for sharing this. All right, showtime, huh? Let's take over. Okay, cool. It

104
00:09:39,600 --> 00:09:44,480
seems like I can't share my screen. I'm wondering where I should begin from. Maybe I can just show

105
00:09:44,480 --> 00:09:49,680
the app right now and I just try to develop the next thing. Just try to show you how I'll go about

106
00:09:49,680 --> 00:09:54,240
it. Easy. Okay then. All right. So everybody can see my screen, right? So this is the product that

107
00:09:54,240 --> 00:09:58,480
I'm currently working on. Like I said, it's called EasyPZ. Works in Berlin and New York City. If you

108
00:09:58,480 --> 00:10:02,880
need a restroom, just let us know. Within five seconds, we get you a restroom strategy for free.

109
00:10:02,880 --> 00:10:06,880
It's going to enable vacation. We'll make an account. Just skip it. I think I need to make this

110
00:10:06,880 --> 00:10:10,880
a skipable, but basically the whole branding behind it is that there's a Magic Hat that helps

111
00:10:10,880 --> 00:10:15,920
you find restrooms. That's it. So choose this. Of course I have Dark Mode and this whole app,

112
00:10:15,920 --> 00:10:22,080
by the way, was created with AI. I had a backup engineer and I had some engineering leads,

113
00:10:22,080 --> 00:10:25,680
hop on calls with me just to discuss like technical architecture and feasibility of stuff.

114
00:10:25,680 --> 00:10:29,920
But then the whole mobile client that you see on iOS and Android was developed by AI.

115
00:10:29,920 --> 00:10:34,080
And there's a bunch of features. So currently you just enter the app. You just see where you are.

116
00:10:34,080 --> 00:10:38,800
This is in the middle of New York. Just hit the search and yeah, I just animated that on my iPad,

117
00:10:38,800 --> 00:10:41,600
put it in there just for fun. And then these are all the restrooms that you would have in

118
00:10:42,240 --> 00:10:46,000
around Soho in New York. Otherwise, if you've been to New York, you kind of know this,

119
00:10:46,000 --> 00:10:49,920
you're kind of screwed. There's no signage for restrooms. There's no public restrooms.

120
00:10:49,920 --> 00:10:53,200
So this is a big problem in New York. If you have any friends there, if you plan to visit,

121
00:10:53,200 --> 00:10:56,720
you should probably download my app. And so yeah, let's just say you just want to go to this one. I

122
00:10:56,720 --> 00:11:01,360
tell you, hey, this is a private establishment, which is FYI. And then just give you the navigation.

123
00:11:01,360 --> 00:11:07,200
There it is. And hold on, I think I need to change some thresholds. So yeah, I'm trying to gamify this

124
00:11:07,200 --> 00:11:12,640
experience so that the community has a platform to help each other out, let people know, you know,

125
00:11:12,640 --> 00:11:16,560
if you went to the restroom, how it was. So the next person will have an IVF, whether or not they

126
00:11:16,560 --> 00:11:21,600
should go to it. And so if you visited, you can open this little gift box. Oops, sorry. You can

127
00:11:21,600 --> 00:11:25,840
open this little gift box, you get a fish, which you can then later give it to the cat that you just

128
00:11:25,840 --> 00:11:31,280
saw. And then we ask you how it was, if it was good, we ask you why it was clean, nice and

129
00:11:31,280 --> 00:11:37,760
supplies, business owners were nice, submit it. And then yeah, we ask them to rate the app. So

130
00:11:37,760 --> 00:11:43,200
that's like the general flow. We also have this an app survey that we created. If you click this

131
00:11:43,200 --> 00:11:50,400
button here, you can just select, I don't know, this museum, say museum ice cream, autofill this

132
00:11:50,400 --> 00:11:55,440
category address all there. I can just say, I don't know, go up the stairs, quote is, I don't know,

133
00:11:55,440 --> 00:12:00,160
anything. And then just a quick survey, is it public restroom? It wasn't ultra accessible. I

134
00:12:00,160 --> 00:12:04,240
mean, I said stairs, but okay. Anyways, baby station, gender troll. I'm not sure. This is more

135
00:12:04,240 --> 00:12:08,160
of a European question. I need to refine this a little bit. Cause I have most users in Berlin

136
00:12:08,160 --> 00:12:13,200
right now. Does it require a key? Does it require a code? No, actually yes. But yeah, you just fill

137
00:12:13,200 --> 00:12:18,160
out the survey and then the users are actually letting us know where the restrooms are. And so

138
00:12:19,120 --> 00:12:26,000
yeah, we create this app where we just get restroom data from the government, distribute to

139
00:12:26,000 --> 00:12:32,240
the people, what only was relevant. And we depend on them to understand how they performed. And if

140
00:12:32,240 --> 00:12:36,080
there's any more restrooms that we can distribute to people. And so it searches a one kilometer

141
00:12:36,080 --> 00:12:41,120
radius around you. And so yeah, wherever you are, we just find restrooms in your area. Just go as

142
00:12:41,120 --> 00:12:45,280
soon as possible. You can use these filters up here. If you want to go to the hotel, if you need,

143
00:12:46,160 --> 00:12:51,520
I don't know, something that's for your baby, in the diapers and yeah, that's the basic feature.

144
00:12:51,520 --> 00:12:55,280
There's a menu where you can just read more information about us on the website. Send us

145
00:12:55,280 --> 00:13:01,280
feedback. You can go right to the app in the stores. There's the settings you saw in the onboarding

146
00:13:01,280 --> 00:13:05,520
and then just the link to the Instagram. This is the announcement section. It's very subtle. You

147
00:13:05,520 --> 00:13:09,920
can just read more about stuff here. But yeah, I think that's about it. And all of this was just

148
00:13:09,920 --> 00:13:13,920
made with the app, just step by step. And so I think it's a relatively complex app. I think in

149
00:13:13,920 --> 00:13:18,960
terms of technology, nothing too crazy. You know, it's a robust app with full features. Tech-depth

150
00:13:18,960 --> 00:13:22,960
right now is pretty minimal. There's not that many bugs and I think this was developed.

151
00:13:22,960 --> 00:13:28,580
Um, you know, not at a full time capacity, just tinkering with AI step by step.

152
00:13:28,580 --> 00:13:30,420
And it was able to reach this point.

153
00:13:30,700 --> 00:13:33,340
And, uh, so far we have a little over 2,000 users.

154
00:13:33,360 --> 00:13:35,720
We haven't spent anything on marketing and it seems like

155
00:13:35,720 --> 00:13:37,300
there's new users joining every day.

156
00:13:38,600 --> 00:13:38,840
Yeah.

157
00:13:38,840 --> 00:13:42,580
For me, this is just, I dunno, for me personally, it's evidence that prompt

158
00:13:42,580 --> 00:13:46,280
engineering and five coding can work if you can take the appropriate steps.

159
00:13:46,520 --> 00:13:48,800
I dunno if others will see it that way, but I definitely do.

160
00:13:48,880 --> 00:13:51,440
And this is not the only project that I've worked on.

161
00:13:51,440 --> 00:13:54,360
And I've worked on some other things, and I think in the future I will continue

162
00:13:54,360 --> 00:13:58,200
developing just tools that I may not serve to others, but just tools that I

163
00:13:58,200 --> 00:14:01,780
want to use for my own private life just to make my life better, but now I feel

164
00:14:01,780 --> 00:14:05,400
empowered to create whatever technology comes to mind and I think it's feasible

165
00:14:05,400 --> 00:14:08,080
to do it now, and I think it's just going to get easier and easier from, from this

166
00:14:08,080 --> 00:14:08,440
point on.

167
00:14:08,440 --> 00:14:13,160
So, um, yeah, I just wanted to show you this and yeah, I don't know if you have

168
00:14:13,160 --> 00:14:16,080
any questions at this point before I proceed with the next steps.

169
00:14:16,160 --> 00:14:17,440
Many questions.

170
00:14:17,500 --> 00:14:20,240
Uh, well, first of all, very, very cool stuff.

171
00:14:20,320 --> 00:14:24,760
The consistency I see across different screens, I mean, the, the look and feel

172
00:14:24,760 --> 00:14:26,040
is very consistent.

173
00:14:26,320 --> 00:14:29,240
There is no bugs and that's, that's really cool.

174
00:14:29,240 --> 00:14:34,120
I mean, it seems like, how long it's been, it's like you've been not working

175
00:14:34,240 --> 00:14:39,400
at, on this app at full capacity, working, tinkering here and there, but like from

176
00:14:39,400 --> 00:14:45,280
the start to finish, let's say 20, 30% capacity, how long it take you to get to

177
00:14:45,280 --> 00:14:46,600
this level that you can publish?

178
00:14:46,760 --> 00:14:49,840
I mean, back when I published the MVP, they didn't have this many features, but

179
00:14:49,840 --> 00:14:52,600
I think then we took like, it'd be like a month and a half.

180
00:14:52,800 --> 00:14:53,440
Yeah, a month and a half.

181
00:14:53,560 --> 00:14:59,840
And would you sort of peak Flotsona 3.7 to use or...

182
00:15:00,200 --> 00:15:01,320
Yeah, actually, yeah.

183
00:15:01,320 --> 00:15:06,680
The story actually is that I had partnered up with the former co-founder like two,

184
00:15:06,680 --> 00:15:08,960
three years ago and then we launched MVP together.

185
00:15:09,000 --> 00:15:13,120
And when we were first developing it, he discovered ChatGPT like few days after

186
00:15:13,120 --> 00:15:17,880
it came out and he was using ChatGPT heavily to basically work on the client.

187
00:15:18,120 --> 00:15:21,720
And then he unfortunately had to step step out and in the meantime, I was just

188
00:15:21,720 --> 00:15:25,880
working on other, other projects and the project was dead and a lot of the users

189
00:15:25,880 --> 00:15:28,360
and people around me told me to just continue working on it.

190
00:15:28,440 --> 00:15:32,560
And I tried making sense of it with ChatGPT, tried rewriting with ChatGPT,

191
00:15:32,560 --> 00:15:33,600
but didn't quite succeed.

192
00:15:33,800 --> 00:15:36,480
And there was around the time when people were telling me that on Tropic's

193
00:15:36,640 --> 00:15:38,880
quad was just much better for writing in general.

194
00:15:39,120 --> 00:15:42,440
And so I gave it a shot and they were making a lot more sense.

195
00:15:42,480 --> 00:15:46,040
I was following their instructions more carefully and I was making progress.

196
00:15:46,120 --> 00:15:50,080
You know, just getting the basic structure of an app made, you know, just taking those

197
00:15:50,080 --> 00:15:53,440
small steps of putting out Google maps in there, putting on marker in there,

198
00:15:53,480 --> 00:15:56,720
running a search, you know, faking everything, but then still following

199
00:15:56,720 --> 00:15:58,560
Claus instructions to, to make it happen.

200
00:15:58,720 --> 00:16:01,940
And so I think that's when I switched over from ChatGPT completely to

201
00:16:01,960 --> 00:16:05,520
cloud when it comes to coding and in my experience, also the marketing copy has

202
00:16:05,520 --> 00:16:07,840
been better on Claude than it is in ChatGPT.

203
00:16:07,920 --> 00:16:12,280
So ChatGPT is just for me to just write to without limits, cause Claude actually has

204
00:16:12,280 --> 00:16:13,920
a pretty strict token limits.

205
00:16:13,920 --> 00:16:15,440
So you hit that quite frequently.

206
00:16:15,520 --> 00:16:21,320
And so I kept both, but yeah, converted to chat, sorry, Claude full-time for coding.

207
00:16:21,480 --> 00:16:22,840
And the profile was great.

208
00:16:22,880 --> 00:16:29,320
And I would say that this entire app was made with Claude from the beginning to the end.

209
00:16:29,440 --> 00:16:33,660
So I had the old project, I killed it, started completely new with Claude, and

210
00:16:33,660 --> 00:16:36,560
then it got to this point, you know, in a very stable, stable manner.

211
00:16:36,760 --> 00:16:38,540
Isn't it wasn't, it wasn't a smooth ride.

212
00:16:38,540 --> 00:16:43,660
I think people need to realize that this is not an easy way to dig gold.

213
00:16:43,880 --> 00:16:45,280
This is a very painful path.

214
00:16:45,360 --> 00:16:46,440
A lot of things will go wrong.

215
00:16:46,560 --> 00:16:47,360
A lot of things will break.

216
00:16:47,360 --> 00:16:48,920
A lot of things are going to frustrate you.

217
00:16:49,320 --> 00:16:53,480
But you know, after many iterations and because I do have the experience of developing,

218
00:16:53,480 --> 00:16:59,080
you know, end-to-end software kind of knew how to manage all these potential events.

219
00:17:00,320 --> 00:17:04,360
In the end, yeah, 3.5 for me was reliable and the 3.7 came out.

220
00:17:04,480 --> 00:17:08,680
And, you know, there are some things when you're developing a feature or you want to

221
00:17:08,680 --> 00:17:13,320
develop a certain experience as a certain transition, and sometimes the AI can crack

222
00:17:13,320 --> 00:17:17,680
it, no matter how well you explain it, no matter how much you reset and try in different

223
00:17:17,680 --> 00:17:20,680
ways, there's certain things that the AI for me couldn't crack.

224
00:17:20,920 --> 00:17:25,800
And then when 3.7 rolled out, I asked them to like tackle the same case and they were

225
00:17:25,800 --> 00:17:27,480
able to actually make a breakthrough.

226
00:17:27,580 --> 00:17:31,080
And so yeah, it was, I think it was a submission flow that I showed you that whole like

227
00:17:31,080 --> 00:17:31,760
submission thing.

228
00:17:31,800 --> 00:17:37,480
I've seen people kind of, they kind of oversimplify what they want expecting that the AI

229
00:17:37,480 --> 00:17:41,780
will understand and build it like building a clone or whatever.

230
00:17:41,880 --> 00:17:44,160
For me, it's usually not the best approach.

231
00:17:44,160 --> 00:17:47,680
I think if you have something really specific in mind, because when I showed this, I'm

232
00:17:47,720 --> 00:17:48,480
still sharing my screen.

233
00:17:48,480 --> 00:17:48,880
Sorry.

234
00:17:49,080 --> 00:17:52,720
So when I made this, I actually wanted a typeform clone.

235
00:17:52,880 --> 00:17:54,600
And that's what I almost asked it to do.

236
00:17:54,920 --> 00:17:58,280
I wanted one thing at a time, you know, why is the type form better than Google maps?

237
00:17:58,280 --> 00:17:59,160
It just feels more polished.

238
00:17:59,160 --> 00:18:00,920
It's just nicer to look at and nicer to use.

239
00:18:01,080 --> 00:18:03,720
And I had to kind of dictate every little thing.

240
00:18:03,880 --> 00:18:06,080
When I start, I just want to see one card at a time.

241
00:18:06,080 --> 00:18:07,080
The other should be visible.

242
00:18:07,280 --> 00:18:10,480
When I click it, it should, you know, animate out, do all these transition things.

243
00:18:10,520 --> 00:18:12,760
And with 3.5, I couldn't make it happen.

244
00:18:12,760 --> 00:18:14,480
So I just had a very basic survey.

245
00:18:14,600 --> 00:18:15,240
You just press it.

246
00:18:15,260 --> 00:18:16,200
Next question, press it.

247
00:18:16,200 --> 00:18:16,840
Next question.

248
00:18:16,960 --> 00:18:20,160
And the 3.7 asked it to do all these like fancy animations and it just cracked it in

249
00:18:20,160 --> 00:18:20,800
like one go.

250
00:18:20,960 --> 00:18:22,760
So I don't know what the next model is going to be.

251
00:18:22,760 --> 00:18:26,100
I don't know when that's going to come out, but I think, you know, you can park

252
00:18:26,100 --> 00:18:29,560
certain problems you're not able to have breakthroughs on and then just work on some

253
00:18:29,560 --> 00:18:31,160
other things that matter.

254
00:18:31,280 --> 00:18:34,480
And then if the model improves, maybe come back to it and take another crack at it.

255
00:18:34,780 --> 00:18:37,160
And I think this is what I'm going to continue to do.

256
00:18:37,440 --> 00:18:41,480
I think, you know, it's just, yeah, I tend to be a bit of a perfectionist.

257
00:18:41,480 --> 00:18:44,840
And I think with AI, because things are so fast and so efficient, I think I tried to

258
00:18:44,840 --> 00:18:45,520
make them perfect.

259
00:18:45,680 --> 00:18:49,440
But, um, yeah, just putting a pause on things, just shipping things faster.

260
00:18:49,440 --> 00:18:51,680
Just, if they work, just release them.

261
00:18:51,680 --> 00:18:55,280
And then if there's anything fancy that you want to do, wait until a better model

262
00:18:55,280 --> 00:18:59,280
comes out and you know, see if you can actually apply those like fancy improvements.

263
00:18:59,280 --> 00:19:02,720
Then, but, um, yeah, I mean, there's a very limited time that I've had experience with

264
00:19:02,720 --> 00:19:05,420
this, but I really think that the next model when it comes out, I'm probably going to have

265
00:19:05,420 --> 00:19:07,040
an easier time developing things.

266
00:19:07,080 --> 00:19:07,680
At least that's my hope.

267
00:19:07,680 --> 00:19:09,000
Two follow up question.

268
00:19:09,160 --> 00:19:13,040
Um, is your building it on React or building it on native?

269
00:19:13,400 --> 00:19:17,280
Yeah, React native, using expo stk51.

270
00:19:18,400 --> 00:19:20,400
And we're using AWS for the backend.

271
00:19:20,520 --> 00:19:28,700
And regarding the, um, are you using a specific UI library or, or are making the, the, the

272
00:19:29,080 --> 00:19:31,080
interface elements yourself on Figma?

273
00:19:31,360 --> 00:19:33,480
Yeah, I'm making everything custom.

274
00:19:33,520 --> 00:19:40,200
Um, it's a bit messy, but I maintain like, uh, I think it's a bit outdated actually, but

275
00:19:40,200 --> 00:19:45,040
yeah, I tend to just make all the components here and I just specify what it is I want, but

276
00:19:45,280 --> 00:19:49,080
yeah, I'm just making everything custom because, um, one thing that I found, and I think other

277
00:19:49,080 --> 00:19:53,200
people tend to agree is that AI is not the best at using libraries.

278
00:19:53,360 --> 00:19:54,880
It seems like they are not the best at detecting.

279
00:19:54,880 --> 00:19:58,320
If sometimes, sometimes it might not be compatible with everything else you got going on.

280
00:19:58,560 --> 00:20:03,280
So I've had this habit of trying to avoid dependencies and using external libraries for,

281
00:20:03,280 --> 00:20:03,720
for things.

282
00:20:03,760 --> 00:20:07,720
I think in some cases that's probably recommendable and I don't have enough experience

283
00:20:07,720 --> 00:20:12,480
with the development side to really be able to have like a objective opinion on this.

284
00:20:12,480 --> 00:20:16,920
But yeah, I tend to avoid them because most times when it suggests a library and we use

285
00:20:16,920 --> 00:20:19,400
it, there's a lot of bugs that tend to occur.

286
00:20:19,480 --> 00:20:23,960
And it hasn't been that challenging to create all these things like custom for me in most

287
00:20:23,960 --> 00:20:24,360
cases.

288
00:20:24,400 --> 00:20:26,840
So yeah, currently no, no external libraries.

289
00:20:26,880 --> 00:20:28,880
So I resonate with this a lot.

290
00:20:28,920 --> 00:20:37,600
Last night I was going back and forth trying to ask AI to, I'm using chatgbt 4.1, which

291
00:20:37,600 --> 00:20:44,720
I prefer it to cloud sonar 3.7, because it's applies more arc in terms of, in terms of

292
00:20:45,000 --> 00:20:47,240
building a robust application.

293
00:20:47,440 --> 00:20:51,680
Chatgbt 4.1 has been surprising me to a great extent.

294
00:20:51,920 --> 00:20:54,200
Cloud sonar 7 is like a bulldog.

295
00:20:54,280 --> 00:20:58,120
You just want to like, it's super creative, but it assumes a lot.

296
00:20:58,120 --> 00:21:05,560
But chatgbt 4.1 is very careful and offer really structural build, which I really like.

297
00:21:05,680 --> 00:21:10,560
But that AI could not get a drop down hover right.

298
00:21:10,760 --> 00:21:12,000
And it took me an hour.

299
00:21:12,520 --> 00:21:15,280
Like I was actually almost close to tears.

300
00:21:15,480 --> 00:21:17,240
It's like, this is a drop down hover.

301
00:21:17,320 --> 00:21:20,240
It needs to be similar to every other forward that we are using.

302
00:21:20,440 --> 00:21:23,960
So my question for you, okay, you're creating the component here.

303
00:21:24,240 --> 00:21:28,800
How do you translate it? How do you bring it to your coding environment and making sure

304
00:21:28,800 --> 00:21:33,480
whenever you want to use the same card, it goes and pull that card and like use it.

305
00:21:33,480 --> 00:21:33,840
Okay.

306
00:21:34,080 --> 00:21:39,520
So what were the process of me instructing the AI to implement like a new component?

307
00:21:39,600 --> 00:21:39,840
Yeah.

308
00:21:39,840 --> 00:21:43,880
And then not creating a new component, but also reusing it.

309
00:21:44,120 --> 00:21:45,400
How do you ensure that?

310
00:21:45,760 --> 00:21:46,000
Okay.

311
00:21:46,000 --> 00:21:51,800
Whenever you want the card, it goes, for example, pull from your card library or you

312
00:21:51,800 --> 00:21:55,520
recognize that there is a card already being built and it can pull it.

313
00:21:55,640 --> 00:21:55,880
Sorry.

314
00:21:55,880 --> 00:21:56,960
I'm not sure if I followed.

315
00:21:57,120 --> 00:22:02,800
So for example, like in, right now, if you scroll up on your Figma file, so you got a

316
00:22:02,800 --> 00:22:04,040
bunch of cards here, right?

317
00:22:04,240 --> 00:22:04,560
Yeah.

318
00:22:04,680 --> 00:22:08,880
So, and you're probably going to use this card multiple times in the, for different

319
00:22:09,160 --> 00:22:11,960
purposes as you grow and scale the app.

320
00:22:12,240 --> 00:22:12,600
Right.

321
00:22:12,760 --> 00:22:19,000
So first question would be, how do you translate your Figma component into code?

322
00:22:19,520 --> 00:22:19,840
Okay.

323
00:22:20,080 --> 00:22:21,480
That's a big question for me.

324
00:22:21,720 --> 00:22:26,600
And then how do we ensure that for the next uses, when you want to build similar

325
00:22:26,600 --> 00:22:33,760
component that needs a card, it goes pull that card and then not doing another card again.

326
00:22:33,840 --> 00:22:34,520
Right, right, right.

327
00:22:34,600 --> 00:22:35,320
I see what you mean.

328
00:22:35,400 --> 00:22:35,640
Okay.

329
00:22:35,640 --> 00:22:38,080
So I think I have a couple of answers.

330
00:22:38,160 --> 00:22:42,440
I've tried those, like different plugins or different like AI tools that claim that

331
00:22:42,440 --> 00:22:45,640
they can take whatever is in Figma and then just make it code.

332
00:22:45,920 --> 00:22:46,640
I've tried them.

333
00:22:46,680 --> 00:22:49,120
They're not that reliable yet in my opinion.

334
00:22:49,240 --> 00:22:52,520
I'm open to trying them, but then I think I will still not trust them because I

335
00:22:52,520 --> 00:22:56,760
think I would have to manually check if the, if the, uh, the design was carried

336
00:22:56,760 --> 00:22:59,240
over correctly, so I've done two things.

337
00:22:59,280 --> 00:23:04,080
There's a way to just copy these things as images, like command shift C, and you

338
00:23:04,080 --> 00:23:09,320
can just copy as PNG and you can actually drop this into, um, you know, cursor or

339
00:23:09,320 --> 00:23:13,520
whatever AI tool, and then they can look at the component and then figure out, uh,

340
00:23:13,520 --> 00:23:14,240
what they're looking at.

341
00:23:14,480 --> 00:23:16,760
And then you can say, Hey, I want this on this part of the app.

342
00:23:16,800 --> 00:23:20,240
And then they just do their best job at creating something similar.

343
00:23:20,320 --> 00:23:24,400
And then the basis is there for you to just like, um, refine afterwards.

344
00:23:24,600 --> 00:23:26,240
But that's not my preferred way.

345
00:23:26,320 --> 00:23:29,400
I think, let me try to pull up the visual.

346
00:23:29,440 --> 00:23:29,720
Yeah.

347
00:23:29,720 --> 00:23:33,640
So that card you saw, when you take the anatomy, it kind of breaks down into

348
00:23:33,640 --> 00:23:34,400
something like this.

349
00:23:34,520 --> 00:23:38,560
So what I try to explain to the AI is try to talk to it like an engineer.

350
00:23:38,640 --> 00:23:42,080
I think I always try to talk to it like, like the AI is an engineer.

351
00:23:42,140 --> 00:23:46,360
And you know, because this, um, design is a bit complex, there's like different

352
00:23:46,360 --> 00:23:49,040
typographies purposely styled the way they are.

353
00:23:49,240 --> 00:23:53,000
I need to instruct them how this is going to be structured and how this is going to

354
00:23:53,000 --> 00:23:55,680
be a responsive component that works in any size.

355
00:23:55,920 --> 00:23:59,600
And so I break it down to, you know, there's this, this first container.

356
00:23:59,760 --> 00:24:02,480
It fills up with these badges on the right side.

357
00:24:02,520 --> 00:24:05,240
I mean, this is an old design, but the right side has this icon.

358
00:24:05,520 --> 00:24:09,080
And then there's the middle container that has this one full row of just

359
00:24:09,080 --> 00:24:10,720
the category of the restroom.

360
00:24:10,960 --> 00:24:16,000
There's this second column or second row inside and contains two columns.

361
00:24:16,160 --> 00:24:19,160
This column fills up with text maximum of two rows.

362
00:24:19,360 --> 00:24:22,680
This one hugs the contents, but then, you know, and then there's a third row,

363
00:24:22,680 --> 00:24:24,360
which has also got two columns.

364
00:24:24,520 --> 00:24:26,360
The left one fills up the second one hugs.

365
00:24:26,560 --> 00:24:27,480
And then the button.

366
00:24:27,720 --> 00:24:30,920
And then if you explain it like that, then they kind of understand the

367
00:24:30,920 --> 00:24:34,480
requirements more accurately, and they tend to kind of structure it better.

368
00:24:34,520 --> 00:24:38,080
And this is something that's been working for me, just thinking about, you know, how

369
00:24:38,080 --> 00:24:42,520
the engineers would have to think about this to structure properly and yeah.

370
00:24:42,520 --> 00:24:44,140
So that's, that's been what's working for me.

371
00:24:44,200 --> 00:24:49,600
And I know the, the temptation is to have like a cart container, let's say bottom sheet.

372
00:24:49,720 --> 00:24:52,360
I have this like bottom sheets, a container that I've created.

373
00:24:52,360 --> 00:24:54,640
And then I fill it up with like different menu items.

374
00:24:54,680 --> 00:24:56,320
I can fill it up with information.

375
00:24:56,360 --> 00:24:58,600
I can fill it up with models and other things.

376
00:24:58,720 --> 00:25:00,120
This took some time.

377
00:25:00,120 --> 00:25:02,960
This took, I had to refactor it because in the beginning I had one bottom sheet.

378
00:25:02,960 --> 00:25:04,520
So I didn't really need to think about this.

379
00:25:04,640 --> 00:25:04,880
Yeah.

380
00:25:04,880 --> 00:25:10,040
This, um, atoms like, um, atoms and molecule type structure just had

381
00:25:10,080 --> 00:25:11,880
a bottom sheet for the menu and that was it.

382
00:25:12,040 --> 00:25:15,120
And then slowly I started introducing more bottom sheets and I would just ask it,

383
00:25:15,120 --> 00:25:17,360
Hey, look at my bottom sheet menu.

384
00:25:17,560 --> 00:25:21,280
I want something like that, but instead of a menu, I want this stuff inside.

385
00:25:21,520 --> 00:25:23,600
And then it would just take that as inspiration.

386
00:25:23,600 --> 00:25:27,680
It would just copy it and then it would just, you know, plug in this in there.

387
00:25:27,840 --> 00:25:31,220
Oh, maybe I can just show you real quick.

388
00:25:31,280 --> 00:25:32,520
Uh, how, how can we try to do this?

389
00:25:32,560 --> 00:25:36,480
Let me think say I have a, I'll make this bigger for the audience.

390
00:25:36,560 --> 00:25:37,000
Bigger.

391
00:25:37,120 --> 00:25:38,240
That's as big as it goes.

392
00:25:38,320 --> 00:25:39,400
It wasn't quite working.

393
00:25:39,480 --> 00:25:43,640
The button in the home screen of the, what is it called?

394
00:25:43,680 --> 00:25:44,000
Yeah.

395
00:25:44,000 --> 00:25:45,880
But can you add a placeholder there for me?

396
00:25:46,120 --> 00:25:49,200
And then I just do this quick little exercise just to see if you can like

397
00:25:49,200 --> 00:25:52,160
pinpoint visually, like what I'm looking at, if it understands what I'm looking at.

398
00:25:53,440 --> 00:25:54,240
It's interesting.

399
00:25:54,280 --> 00:25:56,280
Even you have both for add button.

400
00:25:56,280 --> 00:25:59,320
You have a TSX file, which is interesting.

401
00:25:59,440 --> 00:26:00,280
I kept it separate.

402
00:26:00,360 --> 00:26:03,680
I've tried things where like I had a button and then it had like the

403
00:26:03,680 --> 00:26:06,480
round variants and then the certain icon variants.

404
00:26:06,560 --> 00:26:10,280
Yeah, I feel like that kind of added more complexity for the AI to understand.

405
00:26:10,600 --> 00:26:11,240
At some point.

406
00:26:11,360 --> 00:26:11,520
Yeah.

407
00:26:11,520 --> 00:26:12,440
I think, I think it's bugging out.

408
00:26:12,440 --> 00:26:13,720
Maybe that's not the best sample.

409
00:26:13,840 --> 00:26:14,080
Yeah.

410
00:26:14,080 --> 00:26:16,520
I don't know how to explain it to you.

411
00:26:16,680 --> 00:26:16,880
Yeah.

412
00:26:16,880 --> 00:26:20,800
I think my recommendation is to, you know, I have these round buttons and I intend

413
00:26:20,800 --> 00:26:24,640
to add more round buttons in the future because currently this is the recenter

414
00:26:24,640 --> 00:26:29,160
button, this one with the icon is just for the, for add, I could change it to a plus

415
00:26:29,160 --> 00:26:32,360
sign, but another thing that users have been requesting is they want to search

416
00:26:32,360 --> 00:26:33,520
a remote area right now.

417
00:26:33,520 --> 00:26:37,120
I only let people search in their, in their vicinity, but they want to search

418
00:26:37,120 --> 00:26:38,040
wherever they're going next.

419
00:26:38,400 --> 00:26:42,280
And so I haven't finished the designs, but it could be like a search button here.

420
00:26:42,400 --> 00:26:44,840
And I think I'll create an entirely new component for that.

421
00:26:44,880 --> 00:26:47,440
I have like a very long list of components that you can see here.

422
00:26:47,600 --> 00:26:48,720
It's kind of long.

423
00:26:48,760 --> 00:26:52,080
I don't know if it's good practice, but this is just how I maintain it.

424
00:26:52,200 --> 00:26:54,040
I mean, the client is just me developing it.

425
00:26:54,040 --> 00:26:57,120
So I don't know if it really needs to be so clear for others as long

426
00:26:57,120 --> 00:26:57,960
as I know what's happening.

427
00:26:58,160 --> 00:27:01,720
And I guess once I have more teammates, then maybe this would matter more, but I

428
00:27:01,720 --> 00:27:06,160
have this one component called common card and it's the little thing that appears up

429
00:27:06,160 --> 00:27:06,560
here.

430
00:27:07,480 --> 00:27:08,840
And I use it here.

431
00:27:09,200 --> 00:27:14,920
I also use it in the home screen to show announcements and also, um, when the

432
00:27:14,920 --> 00:27:20,760
users are leaving reviews, I use it to, yeah, show them the rating because it was

433
00:27:20,760 --> 00:27:24,280
positioned in the same place, because it was going to kind of look the same.

434
00:27:24,520 --> 00:27:29,320
I started by having a new component called common card and then added all this variance

435
00:27:29,360 --> 00:27:33,200
and the file now has like, yeah, a lot of logic in it.

436
00:27:33,360 --> 00:27:37,280
And whenever I work with this component, it's a nightmare because the AI has too

437
00:27:37,280 --> 00:27:37,960
much to process.

438
00:27:37,960 --> 00:27:40,040
They don't understand the context of why everything is in there.

439
00:27:40,240 --> 00:27:43,480
And so it requires me to explain, you know, this is used for announcements.

440
00:27:43,520 --> 00:27:44,880
It's also used to display comments.

441
00:27:44,920 --> 00:27:49,320
It's also used to ask for a rating and I've, I need to refactor this.

442
00:27:49,320 --> 00:27:50,920
It's like one of the things I need to refactor.

443
00:27:50,920 --> 00:27:54,800
So I need to break this down to announcement card, rating card, review card,

444
00:27:54,800 --> 00:27:57,400
whatever that would be my recommendation.

445
00:27:57,400 --> 00:28:00,520
If you have a company that you're working on, just make it to something super

446
00:28:00,520 --> 00:28:04,560
specific, like don't worry about over-engineering and making a component that can do

447
00:28:04,560 --> 00:28:06,720
various things, depending on the different States.

448
00:28:06,760 --> 00:28:11,360
I think the maintainability of having many components is not so bad.

449
00:28:11,400 --> 00:28:15,560
If you really invested in a design system, I think this is something that I will.

450
00:28:15,840 --> 00:28:19,360
This is a hill that I'll die on, but if you start a new project, I think design

451
00:28:19,360 --> 00:28:22,640
system is probably the first thing you've got to have sorted out.

452
00:28:22,760 --> 00:28:25,440
Like you got to, you got to figure out like how you want to structure the files

453
00:28:25,440 --> 00:28:28,080
and stuff, but I think the design system should be the very first thing you work

454
00:28:28,080 --> 00:28:31,400
on and then I think the maintainability of everything else you build afterwards.

455
00:28:31,400 --> 00:28:32,520
It becomes much more manageable.

456
00:28:32,840 --> 00:28:37,240
Cause even if you notice something that's any discrepancies, you just ask the AI

457
00:28:37,240 --> 00:28:41,040
like, Hey, this component should look like this component and the shadow or the

458
00:28:41,040 --> 00:28:45,000
borders look different, look into it and fix it and they get the job done.

459
00:28:45,080 --> 00:28:48,160
Like that's super easy for them to figure out because it's just aesthetics.

460
00:28:48,160 --> 00:28:50,480
But then if you have all this like logic baked into it, I think they

461
00:28:50,480 --> 00:28:52,160
start kind of getting confused.

462
00:28:52,440 --> 00:28:53,880
That's a really good advice.

463
00:28:53,920 --> 00:28:58,000
What, what you're saying, cause actually I am at a point with my project that I

464
00:28:58,000 --> 00:29:03,040
started building an app with no design system in place, no components, and I

465
00:29:03,040 --> 00:29:05,720
am getting to a point that is becoming nightmare.

466
00:29:07,360 --> 00:29:12,360
And so what you were saying here is like on Figma or whatever the case, maybe

467
00:29:12,520 --> 00:29:14,240
create a design system.

468
00:29:14,600 --> 00:29:19,640
It doesn't need to be basically very complex component, just like your menu,

469
00:29:19,640 --> 00:29:26,520
your button, your dropdown and translate into basically react components.

470
00:29:26,560 --> 00:29:31,120
Whenever you need that, you need a component, you can pull it from component

471
00:29:31,120 --> 00:29:36,040
library and ask the AI to build that future or that page or whatever the case

472
00:29:36,040 --> 00:29:41,040
may be using certain components that are already built as part of the ReactOS

473
00:29:41,040 --> 00:29:41,840
component library.

474
00:29:41,920 --> 00:29:42,360
Exactly.

475
00:29:42,360 --> 00:29:42,840
Exactly.

476
00:29:43,000 --> 00:29:47,200
So it doesn't need to be super extensive, but yeah, this was also vibe coded.

477
00:29:47,200 --> 00:29:49,600
I just gave it my, you know, I just asked it.

478
00:29:49,600 --> 00:29:55,760
Hey, here is my styles folder contains my, my colors, my shadows, the theme

479
00:29:55,760 --> 00:29:56,720
for light and dark mode.

480
00:29:56,800 --> 00:30:00,160
Also, if you're starting a new project and want to dark mode, implement this

481
00:30:00,160 --> 00:30:01,960
first, before you do anything else, please.

482
00:30:02,080 --> 00:30:05,520
And then topography, if you ask Claude to do it for you, it'll do it for you.

483
00:30:05,560 --> 00:30:06,400
It just did for me.

484
00:30:06,520 --> 00:30:09,160
And it's just kind of, um, set the basics.

485
00:30:09,320 --> 00:30:10,880
So I said, Hey, I want a colors file.

486
00:30:10,880 --> 00:30:11,920
I want a typography file.

487
00:30:11,960 --> 00:30:13,360
I want dark mode eventually.

488
00:30:13,440 --> 00:30:15,160
And then suggest that, okay, I'm going to create a theme file.

489
00:30:15,160 --> 00:30:16,000
I was like, all right, perfect.

490
00:30:16,000 --> 00:30:16,320
Do that.

491
00:30:16,560 --> 00:30:17,440
And they created a theme file.

492
00:30:17,640 --> 00:30:21,880
Shadow came later, but yeah, I suggest you set these up and, um, it doesn't

493
00:30:21,880 --> 00:30:22,760
need to be anything crazy.

494
00:30:22,760 --> 00:30:25,920
It can be basic fonts, but just have that in place so that everything can trickle

495
00:30:25,920 --> 00:30:30,000
down and then, you know, I just took these files and I asked, Hey, I just

496
00:30:30,000 --> 00:30:34,120
want a single HTML file that visualizes my style guide and I said, okay.

497
00:30:34,360 --> 00:30:36,600
And then this was made like in five minutes.

498
00:30:36,840 --> 00:30:38,720
And if I click it, I just copy the color.

499
00:30:38,760 --> 00:30:42,000
I just use this, um, to reference, to create content also.

500
00:30:42,160 --> 00:30:45,480
And then down here, although topography, you know, it downloads the Google

501
00:30:45,480 --> 00:30:49,160
fonts for you, and this was just done like in, in an instant, but, you know,

502
00:30:49,160 --> 00:30:52,320
this is, I think the very basics you gotta have before you start by putting anything,

503
00:30:52,320 --> 00:30:55,720
just have some idea of, yeah, what colors you want to use and typography

504
00:30:55,960 --> 00:30:57,040
and then, and then get started.

505
00:30:57,240 --> 00:30:59,960
Yeah, I think then everything else just kind of falls in place.

506
00:31:00,040 --> 00:31:00,120
Yeah.

507
00:31:00,120 --> 00:31:01,200
Whatever else I could show you.

508
00:31:01,800 --> 00:31:03,240
Is there anything people want to see?

509
00:31:03,520 --> 00:31:04,400
Any, any questions?

510
00:31:04,600 --> 00:31:08,040
If you have any questions, you can easily unmute yourself and come on the

511
00:31:08,040 --> 00:31:11,640
chat and have a conversation, you know, on me, that component.

512
00:31:12,040 --> 00:31:18,640
So maybe look, walk us, at least walk me through, um, the components that you built

513
00:31:18,640 --> 00:31:21,360
here, because that's something I could really use.

514
00:31:21,520 --> 00:31:25,840
So basically you have, I don't have, I think I have, I think my app is more

515
00:31:25,840 --> 00:31:29,920
extensive than yours and has little, as less component than yours.

516
00:31:30,000 --> 00:31:32,240
Um, and I'm like really frightened.

517
00:31:32,240 --> 00:31:35,920
I think first thing I'm going to do, I'm going to go, create the design system

518
00:31:35,920 --> 00:31:37,760
and create component, all the components.

519
00:31:37,800 --> 00:31:40,080
I have to do, I have to do a lot of refactoring.

520
00:31:40,240 --> 00:31:44,360
Yeah, I think, I think the introduction of AI doesn't really change the

521
00:31:44,360 --> 00:31:46,040
process of software development.

522
00:31:46,080 --> 00:31:47,560
I think I'm a bit of a purist.

523
00:31:47,600 --> 00:31:50,560
So I always think that design always comes before development.

524
00:31:50,720 --> 00:31:55,360
And I think just because AI can prototype things quickly, I'm not really sure if

525
00:31:55,680 --> 00:31:58,400
prototyping with AI is the best move forward.

526
00:31:58,480 --> 00:32:01,640
I really do believe that people should take some time with pen and paper, figure

527
00:32:01,640 --> 00:32:04,720
out the different flows, come up with some components and then once they have a

528
00:32:04,720 --> 00:32:06,400
concrete idea, then jump into AI.

529
00:32:06,720 --> 00:32:10,920
Because I think people, you know, fire up cursor or whatever with the intent to

530
00:32:10,920 --> 00:32:12,400
create something that's in their mind.

531
00:32:12,640 --> 00:32:17,760
They have some kind of vision and then they want the AI to bring it to life.

532
00:32:18,000 --> 00:32:21,280
But then, you know, we can't outsource that task to AI.

533
00:32:21,320 --> 00:32:24,280
In my opinion, we've got to have ourselves a really concrete idea of what we want

534
00:32:24,360 --> 00:32:28,560
and then instruct the AI and then not overloaded with like a bunch of different

535
00:32:28,560 --> 00:32:31,280
things at once, but you know, if you need a certain component, say, Hey, today,

536
00:32:31,280 --> 00:32:32,480
we're going to make this component.

537
00:32:32,840 --> 00:32:33,800
It's going to look like this.

538
00:32:33,840 --> 00:32:35,200
It's going to be similar to this component.

539
00:32:35,240 --> 00:32:36,320
This is how it's going to behave.

540
00:32:36,440 --> 00:32:37,480
And then it just creates it.

541
00:32:37,680 --> 00:32:40,320
And then yeah, once it's created, then plug it into the app.

542
00:32:40,440 --> 00:32:44,160
But then, you know, I think it's always best to try it out in design first.

543
00:32:44,160 --> 00:32:47,760
And yeah, you yourself try to figure out what it is that you want the AI to do

544
00:32:47,760 --> 00:32:50,400
for you before jumping into, into coding.

545
00:32:50,560 --> 00:32:50,720
Yeah.

546
00:32:50,720 --> 00:32:53,840
I think what are the advantages of this by coding?

547
00:32:53,840 --> 00:33:00,760
It's, it can give you, it can give you, it can provide you an image of what

548
00:33:00,760 --> 00:33:06,960
that vision look like so you can see something that is more than a, let's say

549
00:33:07,360 --> 00:33:12,920
a Figma screen that is not clickable, it's just that it gives you something

550
00:33:12,960 --> 00:33:15,920
interactive, that some functionalities work, right.

551
00:33:16,040 --> 00:33:19,160
But that's how much you can push the ceiling.

552
00:33:19,240 --> 00:33:25,400
Then to your point, if you want now the output, the finish work will be, so I

553
00:33:25,400 --> 00:33:27,240
think it's a process of backend.

554
00:33:27,360 --> 00:33:32,440
So I think what I'm trying to say is that you start with a vision or idea or a

555
00:33:32,440 --> 00:33:38,400
hunch or seed, you get it, you get a feel for it, one shot effect or two shot

556
00:33:38,400 --> 00:33:40,160
effect, whatever the case may be.

557
00:33:40,200 --> 00:33:46,280
Then I think the process of app development with AI start from there.

558
00:33:46,880 --> 00:33:51,680
It's like, okay, I got a feel of how that's, that vision could look like.

559
00:33:51,800 --> 00:33:58,040
Now I have to go back and forth with AI to refine my vision, to translate

560
00:33:58,040 --> 00:34:04,880
it into a MVP if I may, and then start from there and to get the MVP.

561
00:34:05,000 --> 00:34:11,560
I may just like, vibe code the MVP, but I cannot go one step further from there

562
00:34:11,560 --> 00:34:14,600
because I haven't laid the groundwork.

563
00:34:14,720 --> 00:34:15,040
Right.

564
00:34:15,040 --> 00:34:15,200
Right.

565
00:34:15,200 --> 00:34:15,440
Right.

566
00:34:15,760 --> 00:34:16,880
Yeah, totally.

567
00:34:17,040 --> 00:34:22,520
So I think you can create MVPs, quick prototypes, check out ideas, try to sell

568
00:34:22,520 --> 00:34:26,520
it, but then the reality is once you reach that point, you want to continue.

569
00:34:26,600 --> 00:34:29,800
You're not ready to kill that project and start, start that over and set the

570
00:34:29,800 --> 00:34:31,920
right foundations to have something sustainable.

571
00:34:32,120 --> 00:34:34,280
People get to that stage and they just want to continue building.

572
00:34:34,600 --> 00:34:36,800
And I think that's kind of where the main issues come from.

573
00:34:36,920 --> 00:34:39,160
Like we really cannot skip the design work in my opinion.

574
00:34:39,240 --> 00:34:45,720
If you really want to create something that can sustain itself, it needs to have

575
00:34:46,560 --> 00:34:49,920
a good design behind it.

576
00:34:51,160 --> 00:35:01,200
I think my main thing is UX UI for me is a way for the company or whoever's

577
00:35:01,200 --> 00:35:04,880
making the app to deliver their intent to the end user.

578
00:35:04,920 --> 00:35:06,840
This is what I want it to do for you.

579
00:35:06,840 --> 00:35:08,000
This is what I want to show you.

580
00:35:08,000 --> 00:35:09,320
This is the experience I wanted to give you.

581
00:35:09,600 --> 00:35:10,280
And here it is.

582
00:35:10,800 --> 00:35:16,400
And you know, I think a lot of UX doesn't need to be unique, doesn't need to be,

583
00:35:16,880 --> 00:35:18,840
you know, specific if like, if it works, it works.

584
00:35:18,880 --> 00:35:22,800
And I think in a lot of cases, the AI also knows good UX practices and can deliver on

585
00:35:22,800 --> 00:35:29,160
it, but I think the more intentional your design is, the more powerful it becomes

586
00:35:29,160 --> 00:35:30,400
for the end experience.

587
00:35:31,800 --> 00:35:36,280
I think people should not take AI as something that can do that for you.

588
00:35:36,320 --> 00:35:39,720
So if you, if you want to just, you know, quickly make prototypes, get out there,

589
00:35:40,120 --> 00:35:42,680
test it, validate it, by all means do it.

590
00:35:43,120 --> 00:35:47,560
But if you think you'll be one of those people who wants to continue it, when

591
00:35:47,560 --> 00:35:52,520
you reach that point, I think you need to start with the basics and the design

592
00:35:52,520 --> 00:35:55,160
groundwork, you need to talk to some users.

593
00:35:55,280 --> 00:35:57,800
I got some flow charts.

594
00:35:58,000 --> 00:35:59,760
Let me show you a quick little flow charts.

595
00:35:59,760 --> 00:36:01,080
Maybe it can give you some inspiration.

596
00:36:01,440 --> 00:36:04,480
Yeah, that's some early stuff, but you know, before you vibe code anything,

597
00:36:04,520 --> 00:36:05,880
ask yourself, should I?

598
00:36:05,920 --> 00:36:07,840
Is someone else in the market doing it already?

599
00:36:08,120 --> 00:36:09,040
Is it competitive?

600
00:36:09,200 --> 00:36:11,040
Is it, you know, do people even want it?

601
00:36:11,080 --> 00:36:12,200
Is there any good signals?

602
00:36:12,240 --> 00:36:14,000
Is there any gap in the market that I can fill?

603
00:36:14,200 --> 00:36:16,080
I think that's probably the first thing you should ask yourself.

604
00:36:16,120 --> 00:36:18,960
If you intend to make a business out of it, or if you want to, you know,

605
00:36:19,040 --> 00:36:21,400
dedicate your life to this, make sure that there's a market

606
00:36:21,400 --> 00:36:22,240
for it that people want it.

607
00:36:22,280 --> 00:36:25,040
And, you know, I think you should look into your competitors.

608
00:36:25,040 --> 00:36:26,000
I was doing a toilet app.

609
00:36:26,040 --> 00:36:28,720
So I was looking at the other toilet apps that are out there, you know, some

610
00:36:28,760 --> 00:36:31,960
basic information about them, how they're doing the app stores, how old they are,

611
00:36:32,000 --> 00:36:34,440
what are they doing well, what's bad about them?

612
00:36:34,560 --> 00:36:38,680
Some screenshots to remember what they look like, some personal comments, and

613
00:36:38,680 --> 00:36:40,800
then a conclusion like, Oh, I shouldn't worry about these guys.

614
00:36:40,800 --> 00:36:42,280
These guys are doing something interesting.

615
00:36:42,480 --> 00:36:45,760
Should watch out for them and then start mapping out user experiences.

616
00:36:45,880 --> 00:36:49,920
Like, you know, if they need to, they open the app, they go through an onboarding.

617
00:36:50,040 --> 00:36:50,200
Okay.

618
00:36:50,200 --> 00:36:51,560
They're going to do a search.

619
00:36:51,600 --> 00:36:52,360
They're going to get results.

620
00:36:52,360 --> 00:36:53,320
They're going to browse the results.

621
00:36:53,320 --> 00:36:54,200
They're going to select one.

622
00:36:54,400 --> 00:36:57,080
And then this is where you kind of, you know, test different things

623
00:36:57,080 --> 00:36:59,160
and see like what might work, what might not.

624
00:36:59,240 --> 00:37:02,080
Um, you know, if it's public, just let them go.

625
00:37:02,160 --> 00:37:05,600
If it's at a Starbucks or McDonald's, if it's a private restaurant, maybe you

626
00:37:05,600 --> 00:37:08,560
need to collect their information, make sure that they're not messing around.

627
00:37:08,760 --> 00:37:10,200
Maybe you need to introduce like credits.

628
00:37:10,240 --> 00:37:11,520
Do we make them watch ads?

629
00:37:11,640 --> 00:37:11,960
Don't worry.

630
00:37:12,040 --> 00:37:14,440
I don't make anybody watch ads, but this was just, you know, in the

631
00:37:14,440 --> 00:37:17,800
beginning you have to figure out how will the user flow through my product.

632
00:37:17,840 --> 00:37:19,480
And does it make sense?

633
00:37:19,640 --> 00:37:20,520
Would I do this?

634
00:37:20,600 --> 00:37:23,440
And does my monetization strategy make sense?

635
00:37:23,600 --> 00:37:24,440
Would they stick around?

636
00:37:24,440 --> 00:37:25,320
Would they tell their friends?

637
00:37:25,360 --> 00:37:26,400
Would they participate?

638
00:37:26,400 --> 00:37:27,520
What are their incentives?

639
00:37:27,560 --> 00:37:30,240
You gotta really ask these questions because the AI is not going to figure this out for you.

640
00:37:30,560 --> 00:37:33,720
So these are all, you know, the basics of UX design that I think people

641
00:37:33,720 --> 00:37:35,320
need to do their homework on.

642
00:37:35,440 --> 00:37:38,080
Sight map is just like a thing to show you, like the different

643
00:37:38,080 --> 00:37:38,720
screens you'll need.

644
00:37:39,000 --> 00:37:39,960
I'll need a splash screen.

645
00:37:40,000 --> 00:37:41,080
I'll need an onboarding screen.

646
00:37:41,200 --> 00:37:42,120
I'll need a home screen.

647
00:37:42,280 --> 00:37:43,400
I'll need a profile screen.

648
00:37:43,600 --> 00:37:45,840
I'll need a search results screen, a navigation screen.

649
00:37:45,920 --> 00:37:48,400
If there's going to be rewards, like reward screen, maybe a referral screen.

650
00:37:48,440 --> 00:37:50,800
So these are the different screens that I know that I need to build.

651
00:37:51,040 --> 00:37:54,040
And then, you know, the way I approach it is, you know, just step-by-step.

652
00:37:54,120 --> 00:37:56,600
If we launch an app, the splash screen comes with it already.

653
00:37:56,800 --> 00:37:58,160
And maybe I can skip the onboarding.

654
00:37:58,160 --> 00:37:59,360
I'll just get to homepage.

655
00:37:59,640 --> 00:37:59,800
Okay.

656
00:37:59,800 --> 00:38:03,200
So I start working on the homepage and then I'll add a toolbar and add a

657
00:38:03,200 --> 00:38:05,920
button for the profile and now I have a place for the profile.

658
00:38:06,200 --> 00:38:09,920
And then after I'm done with the homepage, maybe I say, okay, I want to work on onboarding.

659
00:38:10,040 --> 00:38:10,760
You ask the AI.

660
00:38:10,800 --> 00:38:15,400
Hey, after the splash screen, if it's the user's first time, show them the onboarding.

661
00:38:15,480 --> 00:38:17,480
And then once you're done with the onboarding, bring them to home.

662
00:38:17,520 --> 00:38:19,480
If it's not their first time, just bring them to home.

663
00:38:19,720 --> 00:38:22,080
You just give the task to the AI and the AI just does it.

664
00:38:22,280 --> 00:38:25,200
You know, it might not be the final product, but then it figures out this

665
00:38:25,200 --> 00:38:28,800
whole thing without you needing to know how to code and then you just, you know,

666
00:38:28,840 --> 00:38:30,120
polish it up, make it look pretty.

667
00:38:30,200 --> 00:38:31,040
Add your copywriting.

668
00:38:31,240 --> 00:38:34,720
And then, you know, once you're done with that, you can add the search results

669
00:38:34,720 --> 00:38:38,920
screen, just add a button, run a search with this mock data and put it in this card.

670
00:38:39,160 --> 00:38:41,880
And then, you know, we just stopped there and then just try that.

671
00:38:42,080 --> 00:38:45,680
So you press the button, a basic card all ugly comes out, contains the

672
00:38:45,680 --> 00:38:48,880
information, but at least you know that it can read data from a source and then

673
00:38:48,880 --> 00:38:50,720
display it and that just make it look pretty.

674
00:38:50,840 --> 00:38:53,600
And then, you know, if you hit navigation, how would that work?

675
00:38:53,680 --> 00:38:55,280
Oh, you need Google places API.

676
00:38:55,320 --> 00:38:55,800
Okay.

677
00:38:56,000 --> 00:38:56,680
How do I do that?

678
00:38:56,920 --> 00:38:58,160
Give me step-by-step instructions.

679
00:38:58,320 --> 00:39:00,800
I don't know anything explained like I'm five, you know, there's all these

680
00:39:00,800 --> 00:39:04,240
like different prompts to make it sound less technical, and then you just follow

681
00:39:04,240 --> 00:39:06,880
the instructions and you get it done.

682
00:39:06,880 --> 00:39:08,920
I think it's more effective than YouTube videos nowadays.

683
00:39:09,000 --> 00:39:11,920
Before I used to prefer watching YouTube videos and you know, following along.

684
00:39:12,520 --> 00:39:16,360
But now you just ask, chat, GPT step-by-step instructions

685
00:39:16,360 --> 00:39:17,840
and it tends to be pretty accurate.

686
00:39:17,920 --> 00:39:20,040
Oh, I think this is what people need.

687
00:39:20,040 --> 00:39:23,240
You just need to be able to like visualize the steps you need to

688
00:39:23,240 --> 00:39:24,480
take to get to what you want.

689
00:39:24,720 --> 00:39:28,320
And I think if you try to prompt and figure out a magic spell to skip all this,

690
00:39:28,360 --> 00:39:30,360
I think your product will crash.

691
00:39:30,400 --> 00:39:31,080
That's my take.

692
00:39:31,320 --> 00:39:34,240
So if you want to skip all this and then just get a concept out there to see,

693
00:39:34,240 --> 00:39:39,280
how it responds or how people respond to it, go for it, but then be prepared to

694
00:39:39,280 --> 00:39:41,560
kill it and start over doing this proper.

695
00:39:41,760 --> 00:39:45,120
And so if you think you'll be doing this after the MVP launch and you want to

696
00:39:45,120 --> 00:39:47,320
create something more sustainable, this is my recommendation.

697
00:39:47,320 --> 00:39:49,480
You should be starting with this kind of stuff before you can fire

698
00:39:49,480 --> 00:39:51,080
up cursor or whatever else.

699
00:39:51,280 --> 00:39:54,560
And then yeah, the journey will evolve over time, but then this is what, what

700
00:39:54,560 --> 00:39:58,800
will keep you and the AI clear on what the expectations are, if you're going

701
00:39:58,800 --> 00:40:02,920
to change certain flows, if you're going to inject the new flow into an existing

702
00:40:02,920 --> 00:40:04,440
flow, how's that going to work?

703
00:40:04,600 --> 00:40:08,240
And this is what will determine what kind of prompt you'll give to the, to the AI.

704
00:40:08,400 --> 00:40:08,600
Yeah.

705
00:40:08,600 --> 00:40:11,160
I was wondering if I should offer like premium offerings, if I have like

706
00:40:11,160 --> 00:40:15,280
partnerships, if the user doesn't care, just give them public restrooms if they

707
00:40:15,280 --> 00:40:17,920
want it, you know, maybe you will ask them for like credits or whatever, just,

708
00:40:17,920 --> 00:40:21,120
just like some conceptual stuff and see how it fits and you can experiment a lot,

709
00:40:21,240 --> 00:40:23,040
try to simplify it, see what works.

710
00:40:23,120 --> 00:40:26,200
If there's new features, just plug them in and see how they flow.

711
00:40:26,360 --> 00:40:29,640
And you really need to put yourself in the user's shoes to see how this whole

712
00:40:29,640 --> 00:40:33,400
thing is going to flow because the product you create with the AI is going to create

713
00:40:33,400 --> 00:40:33,880
this path.

714
00:40:33,920 --> 00:40:38,640
And if it doesn't know what the path is for, it's probably not going to do the,

715
00:40:38,880 --> 00:40:39,520
the right things.

716
00:40:39,760 --> 00:40:40,640
So cool.

717
00:40:40,760 --> 00:40:47,760
A question here, how did you translate your flow chart into a prompt that AI

718
00:40:47,760 --> 00:40:48,760
could understand?

719
00:40:48,760 --> 00:40:54,720
So did you just basically went by step by step, wrote down, put down the prompt or

720
00:40:54,720 --> 00:40:59,640
did you try to make a PNG out of it and give it to your clients or?

721
00:40:59,760 --> 00:41:03,240
So I keep it on a strictly need to know basis.

722
00:41:03,400 --> 00:41:07,480
In my experience, the longer the conversation gets with one agent, the more

723
00:41:07,480 --> 00:41:08,640
they start hallucinating.

724
00:41:08,880 --> 00:41:10,720
So I try to keep it short and sweet.

725
00:41:10,800 --> 00:41:13,080
I tell them what I'm working on, what needs to be done.

726
00:41:13,240 --> 00:41:14,720
And then once they're done, they're done.

727
00:41:14,760 --> 00:41:17,600
Like I move on to the next agent and this is how I manage it.

728
00:41:17,640 --> 00:41:21,280
So if I tell them too much at a time, then I think they'd start processing

729
00:41:21,280 --> 00:41:23,280
information that is not relevant right now.

730
00:41:23,400 --> 00:41:27,360
And so I think what, what helps is to have like a product mindset.

731
00:41:27,600 --> 00:41:32,320
When you're sitting on the chair and dealing with AI, I am a product manager,

732
00:41:32,720 --> 00:41:38,000
Gordon Ramsey, and I'm asking the chef to bring me a dish that, you know, that I

733
00:41:38,000 --> 00:41:45,120
want, I think the AI is kind of like a super talented 14 year old, super talented.

734
00:41:45,160 --> 00:41:47,560
It's very good at coding, but it has no real life experience.

735
00:41:47,560 --> 00:41:51,000
It's very apologetic, very polite, a little scared, but it does a good job,

736
00:41:51,000 --> 00:41:52,240
but it needs guidance.

737
00:41:52,320 --> 00:41:54,880
And you know, once it does one task, he's dead.

738
00:41:55,000 --> 00:41:58,800
Like he wakes up the next morning, has like a amnesia, but he wakes up

739
00:41:58,800 --> 00:42:00,840
every day as like a super genius 14 year old.

740
00:42:01,080 --> 00:42:04,520
But then this is kind of how I treat the, the agents because I think it works best

741
00:42:04,520 --> 00:42:06,920
when they just perform like a simple task and then that's it.

742
00:42:07,120 --> 00:42:10,320
And then next person, next agent, you train it again on the next topic.

743
00:42:10,400 --> 00:42:13,120
And then you make them just do that and then they're out.

744
00:42:13,160 --> 00:42:16,800
And then the next, and the next, so when I do this, it's just, um, you know, once

745
00:42:16,800 --> 00:42:20,640
you, once you just create the basic, uh, app structure, you get the splash

746
00:42:20,640 --> 00:42:21,920
screen and then the homepage.

747
00:42:21,960 --> 00:42:22,620
And I think that's it.

748
00:42:22,960 --> 00:42:24,360
And so I already have this too.

749
00:42:24,520 --> 00:42:26,700
I work on the homepage, what it's going to look like and stuff.

750
00:42:27,000 --> 00:42:30,760
And then once that homepage is done, this agent is, is, is killed.

751
00:42:30,920 --> 00:42:34,120
I go to the next agent and I ask the next agent, Hey, today we're going to work on

752
00:42:34,120 --> 00:42:34,680
onboarding.

753
00:42:34,960 --> 00:42:36,320
This is all I have, check out my files.

754
00:42:36,520 --> 00:42:39,880
And then we do the onboarding and then next next time I say, okay, I'm going to

755
00:42:39,880 --> 00:42:40,920
look on the search today.

756
00:42:41,160 --> 00:42:42,120
Hey, look at the homepage.

757
00:42:42,160 --> 00:42:43,160
There's this blue button.

758
00:42:43,200 --> 00:42:47,080
If you press it, start the search using this database and then that basic stuff

759
00:42:47,080 --> 00:42:47,280
works.

760
00:42:47,280 --> 00:42:47,560
Okay.

761
00:42:47,680 --> 00:42:48,040
Kill it.

762
00:42:48,280 --> 00:42:51,280
Until the next one, if they select the search results, if they want to start

763
00:42:51,280 --> 00:42:54,480
navigating to navigation, and then I break through navigation, where it's okay.

764
00:42:54,520 --> 00:42:55,280
And this one's done.

765
00:42:55,320 --> 00:42:56,800
Get it out, bring the next agent.

766
00:42:57,160 --> 00:43:00,240
If I need to improve it, I'll just tell the next agent, like, this is what we have

767
00:43:00,240 --> 00:43:00,680
currently.

768
00:43:00,680 --> 00:43:04,040
This is where I want to get to and then provide the specifications.

769
00:43:04,040 --> 00:43:06,400
And that's, that's how I tend to, to work with it.

770
00:43:06,520 --> 00:43:08,280
So it's so fascinating.

771
00:43:08,600 --> 00:43:10,600
Just give me, give me a goosebumps.

772
00:43:10,680 --> 00:43:15,480
So basically folks, if you don't, if you're not sure what, what you know, it's

773
00:43:15,720 --> 00:43:20,360
means by killing agents, when you open up your cursor, you can always start a new

774
00:43:20,360 --> 00:43:21,280
conversation.

775
00:43:21,320 --> 00:43:25,960
So what you know is doing, and you know, correct me if I'm wrong, as soon as you

776
00:43:26,000 --> 00:43:31,640
created your basically splash screen and you come back tomorrow, you start a new

777
00:43:31,640 --> 00:43:33,800
conversation and start all over again.

778
00:43:34,000 --> 00:43:34,320
Yeah.

779
00:43:34,400 --> 00:43:34,680
Exactly.

780
00:43:34,680 --> 00:43:40,080
That's what I haven't been doing because I felt like all the past conversation is

781
00:43:40,080 --> 00:43:46,360
going to help the agent to make a better decision today, but actually has been

782
00:43:46,400 --> 00:43:47,400
backfiring.

783
00:43:47,400 --> 00:43:48,680
So much for me.

784
00:43:48,720 --> 00:43:49,000
Yeah.

785
00:43:49,000 --> 00:43:50,040
I think it's the opposite.

786
00:43:50,080 --> 00:43:53,680
At least right now, I think chat, she said that now they improve the memory and it's

787
00:43:53,680 --> 00:43:55,480
going to remember every conversation.

788
00:43:55,760 --> 00:43:56,240
Yeah.

789
00:43:56,400 --> 00:44:01,200
That's why I think sometimes even if I work on a, on a new feature and I tell it

790
00:44:01,200 --> 00:44:04,720
exactly like the full end game goal of what this feature is going to look like,

791
00:44:04,840 --> 00:44:07,040
it doesn't really focus on what's important.

792
00:44:07,120 --> 00:44:10,520
So you really need to try to simplify instructions as much as possible, like

793
00:44:10,520 --> 00:44:11,840
what's needed right now.

794
00:44:11,920 --> 00:44:15,800
Like, how is this feature going to evolve from the first iteration to the second and

795
00:44:15,800 --> 00:44:16,080
third?

796
00:44:16,280 --> 00:44:21,480
So if you are, um, yeah, trying to develop with AI, I think you also need to keep in

797
00:44:21,480 --> 00:44:24,720
mind that it's not going to give you the final product in one go.

798
00:44:24,800 --> 00:44:29,520
In some cases it might, but you should try to take this end thing that you want to

799
00:44:29,520 --> 00:44:31,680
have, and then just break it down into little chunks.

800
00:44:31,720 --> 00:44:32,600
That still makes sense.

801
00:44:32,800 --> 00:44:37,520
So yeah, let's say I want it like this component and I want it to have a certain,

802
00:44:37,960 --> 00:44:40,000
uh, border color on certain shadow.

803
00:44:40,040 --> 00:44:41,760
I want a certain animation.

804
00:44:42,080 --> 00:44:43,200
It doesn't work so well.

805
00:44:43,560 --> 00:44:46,160
Um, because there's too many details to take care of.

806
00:44:46,160 --> 00:44:49,640
So what I start with is, Hey, I want to first work on the positioning of this

807
00:44:49,640 --> 00:44:50,160
component.

808
00:44:50,200 --> 00:44:53,760
Like in this screen, put me a red rectangle where you think I want this

809
00:44:53,760 --> 00:44:58,040
component and then it'll just place like a big red rectangle as a place for the

810
00:44:58,040 --> 00:44:59,120
component that I want to insert.

811
00:44:59,200 --> 00:45:02,640
And then I know, okay, this AI like understands what I'm looking at, where I

812
00:45:02,640 --> 00:45:03,040
want this.

813
00:45:03,200 --> 00:45:06,640
And then I say, I want this component to look like my car component here in the

814
00:45:06,640 --> 00:45:07,080
composer.

815
00:45:07,080 --> 00:45:08,520
I can just tag files.

816
00:45:08,720 --> 00:45:12,880
So I say, there's this, um, common car component and then it's just like, looks

817
00:45:12,880 --> 00:45:13,760
into it, reads it.

818
00:45:13,840 --> 00:45:18,000
And then I can start styling it and then I can add some logic, add some hooks.

819
00:45:18,080 --> 00:45:20,440
And yeah, that's how I, how I tend to do it.

820
00:45:20,440 --> 00:45:21,360
Just like step by step.

821
00:45:21,400 --> 00:45:24,160
And I think animations and stuff that's like nice to have.

822
00:45:24,160 --> 00:45:29,080
So leave those for last and just focus on the core functionality and yeah, just

823
00:45:29,080 --> 00:45:29,840
take baby steps.

824
00:45:29,880 --> 00:45:33,440
Don't don't try to feed it too much because sometimes mid development, you can

825
00:45:33,440 --> 00:45:36,480
also kind of change your design direction, which is valid, you know, you

826
00:45:36,480 --> 00:45:39,200
start making things and then the AI interprets your instructions in a different

827
00:45:39,200 --> 00:45:42,720
way, but you realize like that's better than what you thought, but then it's still

828
00:45:42,720 --> 00:45:44,800
referencing your original instructions.

829
00:45:44,960 --> 00:45:49,520
And then it's trying to, you know, pass those acceptance criteria that you said

830
00:45:49,520 --> 00:45:52,320
in the beginning, which might have become irrelevant in your brain.

831
00:45:52,320 --> 00:45:53,200
You already registered.

832
00:45:53,280 --> 00:45:53,720
Okay.

833
00:45:53,840 --> 00:45:54,920
I was wrong initially.

834
00:45:55,320 --> 00:45:56,760
I liked the direction the air is going.

835
00:45:56,760 --> 00:45:58,760
I'm going to keep it there, but you haven't really specified it.

836
00:45:58,880 --> 00:46:00,560
So I think, um, yeah.

837
00:46:00,680 --> 00:46:03,720
If the more information you give it, the more it tries to satisfy.

838
00:46:04,400 --> 00:46:04,600
Yeah.

839
00:46:04,600 --> 00:46:06,640
Just keep it simple, as simple as possible.

840
00:46:06,680 --> 00:46:12,320
You mentioned that that along your journey to get to the MVP and releasing it.

841
00:46:12,640 --> 00:46:17,680
You'll have, there are certain moments that you needed to bring in developers,

842
00:46:17,680 --> 00:46:20,800
you know, tech leads to consult you on certain stuff.

843
00:46:20,880 --> 00:46:23,080
What were those areas?

844
00:46:23,120 --> 00:46:26,480
I mean, maybe the most important ones that you were like, okay, this

845
00:46:26,480 --> 00:46:28,080
is beyond my pay-to-rate.

846
00:46:28,520 --> 00:46:32,480
I mean, I need to bring in someone that understands what's going on.

847
00:46:32,640 --> 00:46:32,960
Yeah.

848
00:46:34,960 --> 00:46:39,200
I have a background in product management, some design and business, a

849
00:46:39,200 --> 00:46:41,720
little bit of development, but not too much in the backend is kind of like

850
00:46:41,720 --> 00:46:45,200
my like weak areas when it comes to like infrastructure and whatnot.

851
00:46:45,240 --> 00:46:50,240
And so I needed to know if the services that I was going to use from AWS would

852
00:46:50,240 --> 00:46:52,840
fit my needs, am I getting the best bang for my buck?

853
00:46:52,920 --> 00:46:54,120
Am I using the right services?

854
00:46:54,480 --> 00:46:56,520
And are they secure?

855
00:46:56,560 --> 00:46:59,880
Will the information of the customers that I collect, will they be safe?

856
00:47:00,000 --> 00:47:01,800
Also, will I be breaking any laws?

857
00:47:01,840 --> 00:47:04,800
You know, if I'm storing any information about users, am I storing anything

858
00:47:04,800 --> 00:47:07,800
that I shouldn't be storing and if so, am I storing them securely?

859
00:47:08,040 --> 00:47:12,940
And also just, just generally just trying to think about the eventual

860
00:47:13,080 --> 00:47:16,760
scalability of the app, just trying to understand if I'm doing the best I can

861
00:47:16,760 --> 00:47:21,640
be doing yeah, initially I developed a backend with the AI, released MVP with

862
00:47:21,640 --> 00:47:26,520
it, nothing fancy, it was just like a database that would come in the app and

863
00:47:26,520 --> 00:47:28,320
they would just read it, nothing too fancy.

864
00:47:28,360 --> 00:47:33,400
And, no, I had some developer friends look at it and they told me that I was

865
00:47:33,400 --> 00:47:34,720
riding a Ferrari for no reason.

866
00:47:34,760 --> 00:47:36,640
And then they changed that Ferrari for a bike.

867
00:47:36,840 --> 00:47:39,600
Like that AWS service that we were using in the back.

868
00:47:39,920 --> 00:47:41,200
So they saved me money.

869
00:47:41,240 --> 00:47:46,880
I'm burning a lot less now and they have, yeah, helped me understand how the data

870
00:47:46,880 --> 00:47:50,960
travels, which services are being used to do what and they helped me gain a better

871
00:47:50,960 --> 00:47:54,760
understanding of what actually happens to the backend and set things up to make

872
00:47:54,760 --> 00:47:56,040
things more scalable and efficient.

873
00:47:56,520 --> 00:47:59,800
For me, it's just like, just magic.

874
00:47:59,880 --> 00:48:03,920
Like I don't fully understand what's going on and how they know this, but then.

875
00:48:04,800 --> 00:48:09,440
I don't have the technical background to be able to create something that reaches

876
00:48:09,440 --> 00:48:10,800
millions and millions of people.

877
00:48:11,240 --> 00:48:16,080
Since, you know, with this also, it could also, you know, eat up my costs, but

878
00:48:16,080 --> 00:48:17,680
it's something I need to be careful about.

879
00:48:18,640 --> 00:48:22,040
It's not the area that at the most knowledge in I try learning through AI how

880
00:48:22,040 --> 00:48:25,560
to teach me what this is, try to evaluate my situation and give me advice.

881
00:48:25,600 --> 00:48:29,280
But a lot of times I was just trying to pull my hair out because I didn't fully

882
00:48:29,280 --> 00:48:32,880
understand it, so I needed someone, someone with more experience to guide me through

883
00:48:32,880 --> 00:48:37,160
it, so just arrange some, some calls and then they just hopped on and then we just

884
00:48:37,160 --> 00:48:41,400
discussed things together and yeah, after the MVP, I needed to work on the next

885
00:48:41,480 --> 00:48:48,200
phases and, um, you know, just a lot faster to have someone who's done this a

886
00:48:48,200 --> 00:48:49,520
million times to help you out.

887
00:48:49,680 --> 00:48:52,560
So we reached out to some developers who were interested in the project and then

888
00:48:52,560 --> 00:48:56,080
we just like, you know, hung out all weekend and then just like hashed it out.

889
00:48:56,280 --> 00:49:00,240
But, yeah, I think I wouldn't be here right now if I, if it weren't for those

890
00:49:00,240 --> 00:49:01,040
people who helped me.

891
00:49:01,080 --> 00:49:05,560
It's relatively easy now to create a front end that passes and people can be

892
00:49:05,560 --> 00:49:10,520
convinced that something works, but then, you know, you never know if it's secure.

893
00:49:10,560 --> 00:49:16,160
You never know if it's a, something that can scale and yeah, I, I, I would suggest

894
00:49:16,160 --> 00:49:17,840
to reach out to a developer.

895
00:49:18,120 --> 00:49:22,520
Um, who might be interested in discussing interesting things because,

896
00:49:22,520 --> 00:49:25,600
uh, because yeah, I think that they can tell you a lot and I think right now it's

897
00:49:25,600 --> 00:49:26,840
a good time to do so.

898
00:49:26,920 --> 00:49:28,600
There's been mass layoffs and whatnot.

899
00:49:28,640 --> 00:49:32,760
There's a lot of disgruntled, um, both designers and developers can reach out

900
00:49:32,760 --> 00:49:34,040
to them with some interesting topics.

901
00:49:34,040 --> 00:49:38,120
They're dying to also explore the AI scene, also, um, looking for more

902
00:49:38,120 --> 00:49:41,760
stimulation, so if you bring some interesting topics, they're very happy to

903
00:49:41,760 --> 00:49:43,200
jump on and discuss things with you.

904
00:49:44,280 --> 00:49:44,480
Yeah.

905
00:49:44,520 --> 00:49:47,480
If you have any ideas, I think, yeah, try to reach out to some developer

906
00:49:47,480 --> 00:49:48,560
friends and see what they say.

907
00:49:49,920 --> 00:49:50,080
Yeah.

908
00:49:50,080 --> 00:49:53,440
Don't rely on the AI too much to figure out that technical stuff for you.

909
00:49:53,520 --> 00:49:54,720
I don't think we're quite there yet.

910
00:49:54,880 --> 00:49:55,040
Yeah.

911
00:49:55,040 --> 00:49:55,600
How's it going?

912
00:49:55,800 --> 00:49:56,200
Very good.

913
00:49:56,200 --> 00:49:56,600
Thank you.

914
00:49:56,800 --> 00:49:58,240
You want to jump into the conversation?

915
00:49:58,320 --> 00:50:04,080
I don't know, I was listening and watching the master at work, showing the process.

916
00:50:04,200 --> 00:50:06,000
He's doing things differently than you.

917
00:50:06,200 --> 00:50:10,840
You create a document, you feed it in, but, you know, it's very calculated

918
00:50:10,880 --> 00:50:17,480
in how much he's exposing to the AI, which is like sort of like a two different camp.

919
00:50:18,960 --> 00:50:20,440
A contrast in camps.

920
00:50:20,520 --> 00:50:25,560
And I'm tending to side with, you know, on this, after all this hallucination

921
00:50:25,560 --> 00:50:28,200
I've been facing in my projects.

922
00:50:28,200 --> 00:50:30,520
I think I'm going to give Juno's approach a try.

923
00:50:30,520 --> 00:50:33,400
I'm like, okay, don't worry about the end station.

924
00:50:33,560 --> 00:50:34,320
Look at this.

925
00:50:34,320 --> 00:50:35,400
I want to build.

926
00:50:35,520 --> 00:50:36,480
Let's get it built.

927
00:50:37,120 --> 00:50:37,360
Yeah.

928
00:50:37,360 --> 00:50:40,520
You know, I think that Juno is more precise than me.

929
00:50:41,360 --> 00:50:49,400
I try to explore and then go back and forth on stuff as my mind suggests me.

930
00:50:50,000 --> 00:50:55,400
So I think that what I can try to, I don't want to stay still, but learn from Juno is

931
00:50:55,400 --> 00:50:59,560
the approach he has on the methodology of organizing everything.

932
00:50:59,840 --> 00:51:06,400
I know that is something that he also has in himself, you do the storytelling talent,

933
00:51:06,400 --> 00:51:06,840
he has.

934
00:51:07,040 --> 00:51:13,080
So I think that he's doing this also with AI because he's talking with AI in a

935
00:51:13,080 --> 00:51:15,960
certain way, following certain steps.

936
00:51:16,200 --> 00:51:19,840
So I think that this is something that is helping him, but I see a lot of

937
00:51:19,840 --> 00:51:24,320
similarities also on, you know, how to tag component, how to use one single

938
00:51:24,320 --> 00:51:26,360
feature for this single feature.

939
00:51:26,480 --> 00:51:34,280
So I think that at some point, everyone was converged on a single path that will

940
00:51:34,280 --> 00:51:42,520
be, let's say successful, you know, as we have different methods to understand the

941
00:51:42,880 --> 00:51:49,240
vibe coding, basically you have different results, just switching small steps.

942
00:51:51,480 --> 00:51:55,680
You were saying last time your work for living more and more because you are

943
00:51:55,680 --> 00:51:58,520
testing new tools and new approach.

944
00:51:58,560 --> 00:52:03,840
And this will be something that at some point will find us all together at the

945
00:52:03,840 --> 00:52:09,080
same table and say, okay, yes, you know, we start doing the same steps because

946
00:52:09,200 --> 00:52:09,800
the result.

947
00:52:09,880 --> 00:52:14,280
You know, just to add to this, and I think I've been, so, you know, when you

948
00:52:14,280 --> 00:52:20,400
show me this floater, I've been thinking continuously, how can we, for example,

949
00:52:21,040 --> 00:52:27,920
help non-technical, non-product managers, just like, you know, entrepreneurs to

950
00:52:27,920 --> 00:52:34,360
come and create, lay down the flow chart of their applications using some, some,

951
00:52:34,400 --> 00:52:36,040
some app for the potential.

952
00:52:36,040 --> 00:52:41,920
So I was thinking about, and then based on this, we laid a roadmap for them and

953
00:52:41,920 --> 00:52:45,880
then say, okay, out of all these things that you're telling us, here's the MVP

954
00:52:45,880 --> 00:52:48,880
that you need to be building first and then start from there.

955
00:52:48,920 --> 00:52:56,200
I don't think that could be for the ties because there's a consultancy piece in it

956
00:52:56,400 --> 00:53:01,280
that is case by case and you cannot really program it unless I'm wrong here.

957
00:53:01,320 --> 00:53:07,640
So my question for you can we turn this into a product tie service that for or

958
00:53:07,840 --> 00:53:12,480
there is a human element in this that this cannot be replaced and programs.

959
00:53:12,720 --> 00:53:13,360
What do you think?

960
00:53:14,000 --> 00:53:19,480
I think because, like I said earlier, I tend to only share things with AI on

961
00:53:19,480 --> 00:53:20,840
a strictly need to know basis.

962
00:53:20,880 --> 00:53:25,560
I think if we, I mean, I always talk to them about what the immediate need is,

963
00:53:25,640 --> 00:53:29,520
but I also tell them, you know, certain user stories and like why I want this

964
00:53:29,600 --> 00:53:33,160
for the users, how I expect them to behave and what I want to prevent.

965
00:53:33,280 --> 00:53:36,120
And then it takes all those things into account and comes up with good solutions.

966
00:53:36,160 --> 00:53:41,120
But if you're trying to like map out this entire experience, I think it's just too

967
00:53:41,120 --> 00:53:44,440
much for an AI, at least right now, to take everything into consideration because.

968
00:53:45,440 --> 00:53:49,920
I think they have general knowledge of how things should flow, but I think every

969
00:53:50,000 --> 00:53:52,320
app needs flow in different ways.

970
00:53:52,360 --> 00:53:56,080
And I think it's not wise to have AI provide this for you.

971
00:53:56,080 --> 00:54:00,720
I think this is a part where you need to invest some time and realize that whatever

972
00:54:00,720 --> 00:54:03,920
you're building, whatever you ship out, you do it for another human.

973
00:54:04,120 --> 00:54:05,920
And so the end user is a human.

974
00:54:06,080 --> 00:54:09,280
And so you need to bring that fact into the design process.

975
00:54:09,320 --> 00:54:12,600
I think you need to understand that whatever experience the end user is going to have,

976
00:54:12,600 --> 00:54:14,000
it's going to be a human experience.

977
00:54:14,160 --> 00:54:18,400
And so you need to chart these out and just try to put them to put yourself in their

978
00:54:18,400 --> 00:54:21,840
shoes and figure out, you know, if I were this person with this problem, downloaded

979
00:54:21,840 --> 00:54:25,080
my app for this specific purpose, where would I begin?

980
00:54:25,200 --> 00:54:29,040
And I think a lot of people have used enough apps to kind of figure that out.

981
00:54:30,360 --> 00:54:31,640
And then just, just look at.

982
00:54:32,720 --> 00:54:35,200
Some templates out there just to get started.

983
00:54:35,600 --> 00:54:37,160
And then, you know, it's just a flow chart.

984
00:54:37,200 --> 00:54:42,080
You also do this in business and then just like try to see how the experience is

985
00:54:42,080 --> 00:54:45,000
contained and then just like walk yourself through all the possibilities.

986
00:54:45,120 --> 00:54:46,320
There's all these different arrows.

987
00:54:46,360 --> 00:54:48,360
Okay, I can go to profile, come back, go here.

988
00:54:48,360 --> 00:54:51,320
I can go back to the home screen and then see if it makes sense.

989
00:54:51,440 --> 00:54:53,120
But I think this is the part where.

990
00:54:54,440 --> 00:54:54,840
I don't know.

991
00:54:55,120 --> 00:54:56,840
Maybe I can take over eventually.

992
00:54:56,960 --> 00:55:01,560
And I think AI has helped me figure this stuff out, you know, chunks by chunk.

993
00:55:01,640 --> 00:55:05,200
Like down here, I have, um, the homepage experience.

994
00:55:05,200 --> 00:55:09,680
I've got the search section, got the login, authorization, and then directions.

995
00:55:09,720 --> 00:55:12,480
And I don't know.

996
00:55:12,560 --> 00:55:15,200
I don't know if this can be all that automated.

997
00:55:15,360 --> 00:55:18,320
Because again, you need to explain to the AI in a way it'll understand.

998
00:55:18,480 --> 00:55:22,160
And I don't know if this is so easy to explain it like, yeah, one go.

999
00:55:22,280 --> 00:55:26,280
You know, I think what I would say and maybe like get, get your

1000
00:55:26,360 --> 00:55:29,920
and to your input on this and then we can end the today.

1001
00:55:29,960 --> 00:55:36,760
Come through a phase of AI can do any everything, and everyone's trying to do everything with AI.

1002
00:55:36,920 --> 00:55:39,120
Now we're getting to a point of all-land second.

1003
00:55:39,480 --> 00:55:43,120
The number of hallucinations that we are getting from this or the number of

1004
00:55:43,360 --> 00:55:48,080
hitting dead ends is getting to this, that we actually need a product manager.

1005
00:55:48,160 --> 00:55:50,280
We actually need a UX researcher.

1006
00:55:50,280 --> 00:55:55,280
We actually need a UX designer to come in because he says really nicely, you

1007
00:55:55,280 --> 00:55:57,240
know, that these things are beasts.

1008
00:55:57,680 --> 00:56:02,840
If you don't tame it is going to basically destroy all your code base in one, in one

1009
00:56:02,840 --> 00:56:04,880
prompt, which happened to me last time.

1010
00:56:05,520 --> 00:56:05,920
Right.

1011
00:56:05,960 --> 00:56:08,280
So I had to basically revert, revert, revert, revert, revert.

1012
00:56:08,280 --> 00:56:12,400
I get to the, luckily I had a commit on GitHub so I can pull it.

1013
00:56:12,400 --> 00:56:13,400
revert it to.com.

1014
00:56:13,480 --> 00:56:17,240
But now I feel like now it's becoming clear.

1015
00:56:17,280 --> 00:56:21,840
Why do we need UX researcher and designer and product manager?

1016
00:56:21,880 --> 00:56:25,240
Why we still, why we have access to this piece?

1017
00:56:25,280 --> 00:56:31,960
Because actually before AI before let's say, cloud center 3.5, if you had like a

1018
00:56:31,960 --> 00:56:40,800
human product team, all they could do is one bad prompt, commits or few over, over

1019
00:56:40,800 --> 00:56:43,040
the course of a day, you can revert it.

1020
00:56:43,040 --> 00:56:48,600
There is like, you know, you know, play in structure in place, but with AI, one

1021
00:56:48,600 --> 00:56:51,560
shot misery guaranteed could be.

1022
00:56:52,000 --> 00:56:52,280
Right.

1023
00:56:52,280 --> 00:56:56,880
So I think now I'm getting to a point now actually we need to research this.

1024
00:56:57,040 --> 00:56:58,720
I need to actually create a flow chart.

1025
00:56:58,760 --> 00:57:03,400
I need to make sure that when we get to the AI side, everything's clear on our

1026
00:57:03,400 --> 00:57:04,200
analytics stuff.

1027
00:57:04,200 --> 00:57:05,200
Yeah, yeah, yeah.

1028
00:57:05,360 --> 00:57:05,560
Yeah.

1029
00:57:05,560 --> 00:57:09,720
I think personally, design is more important now with AI.

1030
00:57:09,880 --> 00:57:10,640
I really think so.

1031
00:57:10,720 --> 00:57:11,120
How so?

1032
00:57:11,200 --> 00:57:15,400
I don't want to downplay anybody else that makes AI happen, but we have to kind

1033
00:57:15,400 --> 00:57:20,760
of admit the fact that anybody now can create products if they, if they want.

1034
00:57:20,800 --> 00:57:24,280
Like they could vibe code anything, whatever it is, they could ship it.

1035
00:57:24,720 --> 00:57:28,800
And quality aside, we live in a world now where people can just think of ideas

1036
00:57:28,800 --> 00:57:30,760
and then create them into working apps and websites.

1037
00:57:31,280 --> 00:57:34,400
And if it's something that is easy and anybody can do it, I think

1038
00:57:34,400 --> 00:57:35,960
inherently has low value.

1039
00:57:36,040 --> 00:57:40,640
And I think technology is no longer going to be the mode of companies and brands.

1040
00:57:40,760 --> 00:57:44,920
I think what's going to really stand out is an experience and a product that is

1041
00:57:44,920 --> 00:57:48,640
really molded for the AI and human experience.

1042
00:57:48,800 --> 00:57:53,040
So I think what I see even before AI, you know, what a lot of companies do is

1043
00:57:53,040 --> 00:57:56,160
they'll get this product, which is essentially a box and they want to fill

1044
00:57:56,160 --> 00:57:59,680
it up with humans and, you know, this tends to not work very well because, um,

1045
00:57:59,720 --> 00:58:04,200
I think humans are also beasts, you know, we flow in a certain way and we don't

1046
00:58:04,200 --> 00:58:07,520
like friction and then when, if you introduce products that don't really make

1047
00:58:07,520 --> 00:58:11,720
their lives easier, that causes friction, they'll end up not adopting your product.

1048
00:58:11,760 --> 00:58:15,520
And I think user researchers and UX designers are the ones who are going to

1049
00:58:15,520 --> 00:58:21,400
be able to figure out, you know, what is the vibe of the end, if you create a

1050
00:58:21,400 --> 00:58:25,560
product that flows without clashing in a harmonious way, and then they live life

1051
00:58:25,560 --> 00:58:29,400
too. And I think have that design thinking that customer obsession.

1052
00:58:29,520 --> 00:58:33,560
Then I think it's going to be very hard for a machine to figure out that for you.

1053
00:58:33,640 --> 00:58:37,720
Yes, development matters, sales matters, marketing matters, but I think we live in

1054
00:58:37,720 --> 00:58:40,840
a time where if you don't design things properly, which I think it really is a

1055
00:58:40,840 --> 00:58:41,320
first step.

1056
00:58:41,400 --> 00:58:44,040
I mean, maybe not the first step, but something that you should do before you

1057
00:58:44,120 --> 00:58:46,520
develop anything you might be in for a bad ride.

1058
00:58:46,680 --> 00:58:51,720
I think, um, yeah, companies not more than any, any, anytime before.

1059
00:58:51,720 --> 00:58:53,960
I think it should be really focusing on design because I think this is gonna be

1060
00:58:53,960 --> 00:58:55,080
the main differentiator.

1061
00:58:55,640 --> 00:58:58,880
Um, yeah, going forward in a market that will continue being more and more

1062
00:58:58,880 --> 00:58:59,920
saturated, in my opinion.

1063
00:58:59,960 --> 00:59:02,040
Thanks a lot, you know, thanks a lot for this.

1064
00:59:02,080 --> 00:59:06,520
I would love to have you back on when you want to start a future and just

1065
00:59:06,520 --> 00:59:06,720
learn.

1066
00:59:06,720 --> 00:59:07,600
Sure, anytime.

1067
00:59:07,640 --> 00:59:08,720
I don't know if I was very helpful today.

1068
00:59:08,760 --> 00:59:09,840
I hope it was useful.

1069
00:59:11,480 --> 00:59:12,440
Yes, it was useful.

1070
00:59:12,680 --> 00:59:17,400
I agree with you very much that the first process of designing the application

1071
00:59:17,520 --> 00:59:22,360
should be created by the human because, because I think it would be too

1072
00:59:22,400 --> 00:59:26,720
complicated to explain to the AI that what we want and maybe he's not able to

1073
00:59:26,720 --> 00:59:29,080
understand these human aspects.

1074
00:59:29,320 --> 00:59:30,600
These complex human aspects.

1075
00:59:30,640 --> 00:59:31,320
Right, totally.

1076
00:59:31,560 --> 00:59:32,800
I think we're not quite there yet.

1077
00:59:33,680 --> 00:59:38,000
Maybe, maybe because the thing we need to realize is that this AI thing is

1078
00:59:38,000 --> 00:59:39,400
actually quite crazy.

1079
00:59:39,560 --> 00:59:43,720
I think the accelerated pace of this technology is going to be, you know,

1080
00:59:43,840 --> 00:59:47,480
bigger than our grandparents seeing a smartphone for the first time being

1081
00:59:47,560 --> 00:59:48,840
children of the analog age.

1082
00:59:48,920 --> 00:59:51,080
But I think this AI age is something completely different.

1083
00:59:51,160 --> 00:59:52,760
I think we're going to see a completely different world.

1084
00:59:52,840 --> 00:59:54,480
So I don't want to downplay anything.

1085
00:59:54,720 --> 00:59:58,400
I'm open-minded and I think AI could evolve into something that could, you

1086
00:59:58,400 --> 01:00:00,840
know, discuss every, you know, do everything that we discussed today.

1087
01:00:00,840 --> 01:00:02,600
Maybe you can make flow charts perfectly.

1088
01:00:02,800 --> 01:00:05,800
Maybe it understands human emotions and experiences perfectly.

1089
01:00:06,000 --> 01:00:07,560
I don't know for right now.

1090
01:00:07,640 --> 01:00:09,280
I don't think that's quite possible.

1091
01:00:09,440 --> 01:00:14,960
And I kind of hope that we still have the human advantage, the competitive edge of

1092
01:00:14,960 --> 01:00:15,520
being humans.

1093
01:00:15,600 --> 01:00:15,760
Yeah.

1094
01:00:15,760 --> 01:00:19,760
But in the meantime, I implore people don't rely on AI to create human experiences.

1095
01:00:19,800 --> 01:00:23,640
Try to really have a human understand humans and design around their human needs.

1096
01:00:23,840 --> 01:00:24,680
That's, that's my advice.

1097
01:00:25,240 --> 01:00:28,320
Now that's, that's, that's a good place to end it.

1098
01:00:28,320 --> 01:00:32,200
I don't think we can find a better ending for this than what you said, you

1099
01:00:32,200 --> 01:00:33,480
know, appreciate a lot.

1100
01:00:33,640 --> 01:00:38,800
You can call it invitation, whenever you want to build a future, why, why code it

1101
01:00:38,800 --> 01:00:39,640
in front of us.

1102
01:00:39,960 --> 01:00:44,120
That's entertaining content and educational content, at least for me.

1103
01:00:44,400 --> 01:00:46,000
You're so fast with cursor.

1104
01:00:46,080 --> 01:00:46,840
Oh my God.

1105
01:00:47,000 --> 01:00:48,320
I don't think I need that fast.

1106
01:00:48,880 --> 01:00:49,280
Thanks a lot.

1107
01:00:49,280 --> 01:00:50,520
You know, I appreciate it.

1108
01:00:50,680 --> 01:00:51,400
Yeah, you're welcome.

1109
01:00:51,680 --> 01:00:52,160
See you guys.

1110
01:00:52,480 --> 01:00:52,960
Thanks for joining.

1111
01:00:53,160 --> 01:00:53,480
Thank you.

1112
01:00:53,920 --> 01:00:54,280
See you.

1113
01:00:54,720 --> 01:00:57,000
Thank you for listening to UX for AI.

1114
01:00:57,400 --> 01:01:01,520
Join us next week for more insightful conversations about the impact of

1115
01:01:01,520 --> 01:01:06,520
artificial intelligence in development, design, and user experience.

1116
01:01:06,520 --> 01:01:16,520
[MUSIC]