WEBVTT

NOTE Sentence-level transcript of https://www.youtube.com/watch?v=O1FN4awNEtM

NOTE One cue per sentence. Cue ids are the line anchors on /transcripts/O1FN4awNEtM.html. A cue ends where the next begins, or 2 s after its last word.

s1
00:00:12.400 --> 00:00:14.560
All right.

s2
00:00:14.760 --> 00:00:15.720
Hello everyone.

s3
00:00:15.720 --> 00:00:18.400
Hope you guys having a good time at the conference.

s4
00:00:18.400 --> 00:00:23.320
So, before we start how many of you are actually uh designers?

s5
00:00:23.320 --> 00:00:24.120
Like a product designer.

s6
00:00:24.120 --> 00:00:26.560
Hey, one hands and another.

s7
00:00:26.560 --> 00:00:28.400
Okay.

s8
00:00:28.400 --> 00:00:32.560
And how many I assume that the rest of you are engineers?

s9
00:00:32.560 --> 00:00:33.520
Is that correct?

s10
00:00:33.520 --> 00:00:34.440
Yeah, pretty much.

s11
00:00:34.440 --> 00:00:35.440
Okay.

s12
00:00:35.440 --> 00:00:50.960
So, today's talk is a non-technical talk, but more of a real-world experience how I created the design for AI Engineer this conference and our other past conference as well and how AI has helped me.

s13
00:00:50.960 --> 00:01:00.400
And so, the talk today is one designer plus AI, which is me as the designer, and hundreds of deliverables.

s14
00:01:00.400 --> 00:01:02.040
All right, let's start.

s15
00:01:02.040 --> 00:01:03.560
So, my name is Vinson Weng.

s16
00:01:03.560 --> 00:01:07.480
I am a senior creative designer at AI Engineer.

s17
00:01:07.480 --> 00:01:11.000
And at AI Engineer, it's a very small team.

s18
00:01:11.000 --> 00:01:16.040
So, we only have around 12 people to 15 people at the moment.

s19
00:01:16.040 --> 00:01:29.280
And everyone has been doing their own thing and I think AI has been like has been a really helpful way to like helping everybody doing everything.

s20
00:01:29.280 --> 00:01:35.760
And at if for if an at this scale we have a problem, obviously, right?

s21
00:01:35.760 --> 00:01:40.520
And the problem is the scale problem or I would call the challenges.

s22
00:01:40.520 --> 00:01:43.200
And how to overcome it?

s23
00:01:43.200 --> 00:01:49.640
It's basically automation and we get to that in the later part of this talk.

s24
00:01:49.640 --> 00:01:57.680
So, when I prepared this talk, we only expected 6,000 attendees and now it's 7,000.

s25
00:01:57.680 --> 00:02:00.120
Well, good for us.

s26
00:02:00.120 --> 00:02:03.160
And then we have 140 sponsors.

s27
00:02:03.160 --> 00:02:04.320
More.

s28
00:02:04.320 --> 00:02:06.280
140 plus sponsors.

s29
00:02:06.280 --> 00:02:11.720
And then 300 plus speakers, 600 plus sessions, and one designer.

s30
00:02:11.720 --> 00:02:15.720
And everybody needs every designs, right?

s31
00:02:15.720 --> 00:02:18.000
Like every single thing needs design.

s32
00:02:18.000 --> 00:02:20.920
Sponsor needs assets, speaker needs graphic.

s33
00:02:20.920 --> 00:02:23.280
You need sign it so you don't get lost.

s34
00:02:23.280 --> 00:02:28.840
And this is basically what we do, what I do.

s35
00:02:28.840 --> 00:02:32.680
So, from stickers, do you like your swag, your stickers?

s36
00:02:32.680 --> 00:02:35.720
Well, I hope you do because I create that design, too.

s37
00:02:35.720 --> 00:02:51.600
And to a landing page, speaker announcement, track mascot, all the stuff that you see, most of the stuff that you see here, from a sign it to a digital sign it, landing page, everything is

s38
00:02:51.600 --> 00:02:52.920
a deliverable.

s39
00:02:52.920 --> 00:02:58.480
And a thousand details means a thousand way to fail, right?

s40
00:02:58.480 --> 00:03:04.480
Because I'm missing sponsor logos, going to be a huge issue.

s41
00:03:04.480 --> 00:03:09.800
And speakers that have a wrong schedule, also a huge issues, right?

s42
00:03:09.800 --> 00:03:17.560
And it seems impossible to handle that many kind of deliverables, but yeah, meet my design team.

s43
00:03:17.560 --> 00:03:24.680
So, it's me and Devin, GPT, and Figma.

s44
00:03:26.600 --> 00:03:34.920
And right now we are at the stage where tools isn't the like it's not a problem anymore, but having a real problem is our advantage.

s45
00:03:34.920 --> 00:03:41.720
So, for example, when someone asked me, "What inspired you when designing in AI engineer?"

s46
00:03:41.720 --> 00:03:49.680
I don't know the answer back then, but after I think about it, it's actually a problem that inspired me to like designing in this AI engineer.

s47
00:03:49.680 --> 00:03:54.280
And we'll get to that in the latter part of this talk.

s48
00:03:54.280 --> 00:04:00.680
So, have you guys seen the talk by Simon Wilson like in 2025?

s49
00:04:00.680 --> 00:04:02.160
Yeah.

s50
00:04:02.160 --> 00:04:04.600
Yeah, and it's pretty interesting, right?

s51
00:04:04.600 --> 00:04:14.680
He asked to He asked every LLM to create an a vector file, which is basically a pelican riding a bicycle.

s52
00:04:14.680 --> 00:04:21.000
And it is basically to test and I tested again and it's still doing this for the basic model.

s53
00:04:21.000 --> 00:04:23.600
And it's not usable for me as a designer.

s54
00:04:23.600 --> 00:04:27.320
But as a designer, we have to think outside the box.

s55
00:04:27.320 --> 00:04:36.280
And we could simply ask ChatGPT create a still image like a PNG for a pelican riding a bicycle and then I can vectorize it on on Figma.

s56
00:04:36.280 --> 00:04:38.520
And we can ship that now.

s57
00:04:38.520 --> 00:04:44.919
So, we have to think outside the box here regardless the capabilities of the LLM.

s58
00:04:44.919 --> 00:04:51.760
And So, how to solve this scale problem, right?

s59
00:04:52.720 --> 00:04:54.200
Basically five five things.

s60
00:04:54.200 --> 00:05:02.640
So, foundation first, reusable designs, automated workflows, validated output, and also remove frictions.

s61
00:05:02.880 --> 00:05:07.440
The foundation is definitely the core part that we need to set up right.

s62
00:05:07.440 --> 00:05:12.240
Like the design system, typography, colors, components, like other stuff.

s63
00:05:12.240 --> 00:05:20.080
And once this is set up, like for example, when we create the website, it's all set up within this thing.

s64
00:05:20.080 --> 00:05:22.400
And yeah, this is just an example.

s65
00:05:22.400 --> 00:05:32.720
Like we have the colors, primary, and then also the accent colors, the typography, and also the tagline, all the other stuff.

s66
00:05:32.720 --> 00:05:38.720
And also, have you guys Are you guys familiar with the atomic designs?

s67
00:05:38.720 --> 00:05:41.720
So, yeah, my previous background is I'm a product designer.

s68
00:05:41.720 --> 00:05:48.760
So, I'm pretty familiar with the thing where we need to create a user-centric design and also like atomic designs, right?

s69
00:05:48.760 --> 00:05:57.040
Where we create the smallest part possible and then combining it into like basically a LEGO pieces and then into a deliverables.

s70
00:05:57.040 --> 00:06:02.880
And this is pretty useful in my job desk right now.

s71
00:06:02.880 --> 00:06:11.160
So, once we set up all of those foundation, we basically need to create for example, we use Defont a lot.

s72
00:06:11.160 --> 00:06:14.160
In at the office, we everybody use Defont.

s73
00:06:14.160 --> 00:06:17.840
Everybody like abusing Defont for example.

s74
00:06:17.840 --> 00:06:18.600
Yeah.

s75
00:06:18.600 --> 00:06:35.320
And So, in this case, I just need hey, we use this desktop typography and this mobile typography because we know Cloud or like any other LLMs love to like throwing some random

s76
00:06:35.320 --> 00:06:36.160
font size, right?

s77
00:06:36.160 --> 00:06:42.440
And if we don't define it, it just delivering a slope like the previous slope.

s78
00:06:42.440 --> 00:06:45.160
And yeah.

s79
00:06:45.160 --> 00:06:51.160
Typography, color and stuff and and then it comes to reusable design.

s80
00:06:51.160 --> 00:07:03.440
So, once we set up it right, like the website is has the the branding to it, all the other teams on the AI engineer, like for example, the marketing teams

s81
00:07:03.440 --> 00:07:05.480
can create everything basically.

s82
00:07:05.480 --> 00:07:08.000
Like they can create an email design based on that.

s83
00:07:08.000 --> 00:07:18.880
They can create a flyer, a document just based on the website because it's already defined like it defined early.

s84
00:07:19.080 --> 00:07:24.280
And yeah, once you get the design, you can just rinse and repeat.

s85
00:07:24.280 --> 00:07:29.720
For example, the mascot, it's all has the pretty much the same design and it's rinse and repeat.

s86
00:07:29.720 --> 00:07:38.160
And if you already defining those things, you can basically like create one design that works for all.

s87
00:07:38.160 --> 00:07:44.480
And this is the part that I'm most interesting to talk about, which is the automated workflows.

s88
00:07:44.560 --> 00:07:49.720
Before, for example, if you take a look outside the room, there's a schedule, right?

s89
00:07:49.720 --> 00:07:52.720
The schedule for each and everyone.

s90
00:07:52.720 --> 00:07:58.520
So, we used to do it manually on Figma, but now we use Devin for it.

s91
00:07:58.520 --> 00:08:03.320
And let me show you.

s92
00:08:04.160 --> 00:08:06.080
Hey.

s93
00:08:06.080 --> 00:08:09.000
So, right now we just pull the latest data.

s94
00:08:09.000 --> 00:08:15.040
I just asked Devin like, "Hey, I want this room at these days."

s95
00:08:15.040 --> 00:08:25.840
And then we can just export it, download it PNG, and the data is all accurate, and then we can just ship it to the flash drive, and then put it on the screen.

s96
00:08:25.840 --> 00:08:34.159
And it was like impossible before because the friction is just too much between the designers and the developers.

s97
00:08:34.159 --> 00:08:34.180
We

s98
00:08:34.180 --> 00:08:34.200
[snorts]

s99
00:08:34.200 --> 00:08:39.960
cannot make things like pixel perfect because once we tell the designer, "Hey, this is the design."

s100
00:08:39.960 --> 00:08:45.400
And then Sorry, the the engineers that created the design, for example.

s101
00:08:45.400 --> 00:08:47.560
"Hey, I need this to be delivered."

s102
00:08:47.560 --> 00:08:53.400
And then they don't create it pixel perfect, it's a lot of feedback loop, right?

s103
00:08:53.400 --> 00:08:59.720
But with Devin, we just say, "Hey, can you make this more accurate?"

s104
00:08:59.720 --> 00:09:12.720
We can just connect it to MCP, and then if it doesn't work, we can just always like give a spec sheet or something that can be defined like what's the spacing, what's the

s105
00:09:12.720 --> 00:09:19.920
font size, etc. And this is what we do to for the speaker announcement.

s106
00:09:19.920 --> 00:09:26.480
So, we have 300 plus speakers, and it's impossible for me to like handle one by one, right?

s107
00:09:26.480 --> 00:09:36.120
So, we create this thing, which is called which you can also access to speaker announcement, and you can also try it yourself.

s108
00:09:36.120 --> 00:09:38.200
Like this one, for example.

s109
00:09:38.200 --> 00:09:40.600
You can select it right here.

s110
00:09:40.600 --> 00:09:42.680
And then you can also change your name.

s111
00:09:42.680 --> 00:09:44.840
Well, that Yeah.

s112
00:09:44.840 --> 00:09:48.720
For example, this you can change the name to whatever you want.

s113
00:09:48.720 --> 00:09:53.440
And we also have the landscape mode which can be also loaded.

s114
00:09:53.440 --> 00:09:59.360
If the speaker also have the headshot and all the details, it will automatically export.

s115
00:09:59.360 --> 00:10:05.400
And we also have the trading cards which is surprisingly pretty popular.

s116
00:10:05.400 --> 00:10:07.520
And we have a different team.

s117
00:10:07.520 --> 00:10:10.480
And this is all pixel perfect.

s118
00:10:10.480 --> 00:10:10.920
All right.

s119
00:10:10.920 --> 00:10:14.240
For example, this one.

s120
00:10:14.360 --> 00:10:19.840
This is inspired by TBPN, so Yeah.

s121
00:10:19.840 --> 00:10:23.240
And how do I deliver this in pixel perfect?

s122
00:10:23.240 --> 00:10:25.800
Let's jump into it.

s123
00:10:25.800 --> 00:10:42.680
So, the process here is before when I start my career as a product designer, it used to be just okay, we need to research, we need to build product like design thinking in general, right?

s124
00:10:42.680 --> 00:10:45.200
And then feedback loop and stuff like that.

s125
00:10:45.200 --> 00:10:49.640
But right now, it's it's just outdated for me.

s126
00:10:49.640 --> 00:11:01.557
Like in my case, we just go to Slack, Figma, and then send it back to Slack because Devin or Devin live in Slack, and then ship all the things that he need.

s127
00:11:01.557 --> 00:11:01.720
[snorts]

s128
00:11:01.720 --> 00:11:13.960
Like for example, if we can connect the MCP or also the spec document, which is for example the spec sheet like this, which is uh plugin in Figma if you

s129
00:11:13.960 --> 00:11:15.240
interested.

s130
00:11:15.240 --> 00:11:20.400
It's free and it's basically give an annotation to the PDF.

s131
00:11:20.400 --> 00:11:31.800
And yeah, all designers don't name their layers, so yeah, this is just like some random frame three, frame four, but the LLM will get it.

s132
00:11:31.800 --> 00:11:40.280
And it's basically defining all this spacing, all this font size, and then all the colors and stuff.

s133
00:11:40.280 --> 00:11:44.560
It's definitely going to help you develop a pixel-perfect product.

s134
00:11:44.560 --> 00:11:55.120
And we also have just recently like today have uh photos which we have to create the thumbnail for its speaker, right?

s135
00:11:55.120 --> 00:11:58.320
And then we ask Devin like, "Hey, who is this person?"

s136
00:11:58.320 --> 00:12:01.880
And yeah, it kind of did.

s137
00:12:01.880 --> 00:12:09.560
Like I make a Tinder kind of you know, detection if this is the same person or not.

s138
00:12:09.560 --> 00:12:11.400
And I think it's pretty accurate.

s139
00:12:11.400 --> 00:12:12.320
It's Jason Liu.

s140
00:12:12.320 --> 00:12:13.480
Yes.

s141
00:12:13.480 --> 00:12:17.960
And then we can use this to like for context.

s142
00:12:17.960 --> 00:12:27.680
Like before, when we create the thumbnail, we have to search all the codes that photographer have and search it one by one and maybe by time if possible.

s143
00:12:27.680 --> 00:12:30.760
But now we can just like, "Oh, this is Jason Liu.

s144
00:12:30.760 --> 00:12:31.640
Download that photo."

s145
00:12:31.640 --> 00:12:34.800
And then we can paste it into the thumbnail, right?

s146
00:12:34.800 --> 00:12:36.680
And it's pretty amazing.

s147
00:12:36.680 --> 00:12:48.120
I mean, the world that we live in right now is actually like the state for me as a designer is already at the peak because what what else can you ask for, right?

s148
00:12:48.120 --> 00:12:53.960
I mean, we already have things to automate, we already have things to create the design fast.

s149
00:12:53.960 --> 00:13:02.839
Basically, all you need is a problem because once you have a problem that worth solving, you can basically solve anything.

s150
00:13:02.920 --> 00:13:06.240
And back to my talk, I got sidetracked right there.

s151
00:13:06.240 --> 00:13:07.600
Yeah.

s152
00:13:07.600 --> 00:13:08.880
And then yeah.

s153
00:13:08.880 --> 00:13:11.680
And this is also the amazing thing that we test.

s154
00:13:11.680 --> 00:13:16.760
So, as you know, we have like hundreds of sponsors, right?

s155
00:13:16.760 --> 00:13:18.160
Like 140 plus.

s156
00:13:18.160 --> 00:13:24.240
And as you can see on the at the lobby, we have the banner with all the sponsors.

s157
00:13:24.240 --> 00:13:33.400
And I basically tell Devin like "Hi, could you compare could you check if there are any missing logos in this graphic?"

s158
00:13:33.400 --> 00:13:38.720
And the accuracy is 100% based on the test that I do.

s159
00:13:38.720 --> 00:13:40.800
So, which is pretty well.

s160
00:13:40.800 --> 00:13:48.600
And we use the same thing for the T-shirt that you got for your swag.

s161
00:13:48.600 --> 00:13:54.360
And yeah, surprisingly, Devin knows how to like visualize things, right?

s162
00:13:54.360 --> 00:13:57.040
Like how to detect things visually.

s163
00:13:57.040 --> 00:14:02.840
And that is very surprising because as a human, we can like give errors.

s164
00:14:02.840 --> 00:14:05.880
Oh, turns out there's one small something that is missing.

s165
00:14:05.880 --> 00:14:09.240
But with this kind of thing, we can like double-check.

s166
00:14:09.240 --> 00:14:15.160
So, human plus AI, combine it, well, you got your own QA team.

s167
00:14:15.160 --> 00:14:17.360
And then remove fiction.

s168
00:14:17.360 --> 00:14:21.280
So, this is just uh the way of thinking.

s169
00:14:21.280 --> 00:14:27.040
So, as a designer, we have to think as a user, not as a designer, all right?

s170
00:14:27.040 --> 00:14:29.520
Because every user has its needs.

s171
00:14:29.520 --> 00:14:33.440
You can walk through the for example, the map plan here.

s172
00:14:33.440 --> 00:14:46.320
So, basically, I'm imagining myself as an attendee to go to the registration, go to the see the wayfinding and the QR code and then all the stuff.

s173
00:14:46.320 --> 00:14:55.760
Basically, everything needs to be connected so you guys don't get lost and knows how to find your rooms and other stuff.

s174
00:14:55.760 --> 00:14:59.960
And the real job is handling exceptions.

s175
00:14:59.960 --> 00:15:03.255
So, for example, oh, I have Yeah.

s176
00:15:03.255 --> 00:15:03.560
[snorts]

s177
00:15:03.560 --> 00:15:09.200
For example, um there is a schedule update, all right?

s178
00:15:09.200 --> 00:15:13.880
And when we create this thing, it doesn't has an edit button.

s179
00:15:13.880 --> 00:15:20.960
And then one morning, it just "Hey, this schedule needs to be updated and we don't have those edit buttons."

s180
00:15:20.960 --> 00:15:24.920
I could just ask Devin, "Hey, can you add me an edit button?"

s181
00:15:24.920 --> 00:15:25.840
And then it did.

s182
00:15:25.840 --> 00:15:34.240
So, we can change everything now and then ship it to PNG and replug it to the screen, which is pretty convenient, right?

s183
00:15:34.240 --> 00:15:36.600
And those exceptions, right?

s184
00:15:36.600 --> 00:15:41.800
It it's not possible before when we have to do it manually and stuff.

s185
00:15:41.800 --> 00:15:44.200
But now it's just get easier.

s186
00:15:44.200 --> 00:15:51.920
And so, the takeaway here is that to solve the scale problem, you have to actually think small.

s187
00:15:51.920 --> 00:15:53.640
Think all the smallest thing possible.

s188
00:15:53.640 --> 00:15:59.680
Think everything that can go wrong and will go wrong and then try to solve it before.

s189
00:15:59.680 --> 00:16:05.320
And also, like yeah, right now basically you can automate everything.

s190
00:16:05.320 --> 00:16:17.920
And at this moment, having a problem is actually going to benefit you because that's going to help you ship a better product, going to ship uh things that are

s191
00:16:17.920 --> 00:16:18.600
good.

s192
00:16:18.600 --> 00:16:20.800
And yeah, I think that's all that I can share.

s193
00:16:20.800 --> 00:16:25.680
Hope my talk has some benefits to you and yeah.

s194
00:16:25.680 --> 00:16:26.120
That's all.

s195
00:16:26.120 --> 00:16:27.751
Thanks, guys.

s196
00:16:27.751 --> 00:16:29.751
[applause]

s197
00:16:46.091 --> 00:16:48.091
[music]