Designing for AI Engineer — Vincent Wendy, AI Engineer

AI Engineer · 16 min · 197 sentences · from YouTube's caption track

Each timecode opens YouTube at the start of that sentence. Line anchors (#s42) are the cue ids in the WebVTT, and every line carries its start and end seconds. All transcripts has every talk, and the whole corpus as one file.

00:12All right.
00:14Hello everyone.
00:15Hope you guys having a good time at the conference.
00:18So, before we start how many of you are actually uh designers?
00:23Like a product designer.
00:24Hey, one hands and another.
00:26Okay.
00:28And how many I assume that the rest of you are engineers?
00:32Is that correct?
00:33Yeah, pretty much.
00:34Okay.
00:35So, 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.
00:50And so, the talk today is one designer plus AI, which is me as the designer, and hundreds of deliverables.
01:00All right, let's start.
01:02So, my name is Vinson Weng.
01:03I am a senior creative designer at AI Engineer.
01:07And at AI Engineer, it's a very small team.
01:11So, we only have around 12 people to 15 people at the moment.
01:16And 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.
01:29And at if for if an at this scale we have a problem, obviously, right?
01:35And the problem is the scale problem or I would call the challenges.
01:40And how to overcome it?
01:43It's basically automation and we get to that in the later part of this talk.
01:49So, when I prepared this talk, we only expected 6,000 attendees and now it's 7,000.
01:57Well, good for us.
02:00And then we have 140 sponsors.
02:03More.
02:04140 plus sponsors.
02:06And then 300 plus speakers, 600 plus sessions, and one designer.
02:11And everybody needs every designs, right?
02:15Like every single thing needs design.
02:18Sponsor needs assets, speaker needs graphic.
02:20You need sign it so you don't get lost.
02:23And this is basically what we do, what I do.
02:28So, from stickers, do you like your swag, your stickers?
02:32Well, I hope you do because I create that design, too.
02:35And 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
02:51a deliverable.
02:52And a thousand details means a thousand way to fail, right?
02:58Because I'm missing sponsor logos, going to be a huge issue.
03:04And speakers that have a wrong schedule, also a huge issues, right?
03:09And it seems impossible to handle that many kind of deliverables, but yeah, meet my design team.
03:17So, it's me and Devin, GPT, and Figma.
03:26And 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.
03:34So, for example, when someone asked me, "What inspired you when designing in AI engineer?"
03:41I 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.
03:49And we'll get to that in the latter part of this talk.
03:54So, have you guys seen the talk by Simon Wilson like in 2025?
04:00Yeah.
04:02Yeah, and it's pretty interesting, right?
04:04He asked to He asked every LLM to create an a vector file, which is basically a pelican riding a bicycle.
04:14And it is basically to test and I tested again and it's still doing this for the basic model.
04:21And it's not usable for me as a designer.
04:23But as a designer, we have to think outside the box.
04:27And 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.
04:36And we can ship that now.
04:38So, we have to think outside the box here regardless the capabilities of the LLM.
04:44And So, how to solve this scale problem, right?
04:52Basically five five things.
04:54So, foundation first, reusable designs, automated workflows, validated output, and also remove frictions.
05:02The foundation is definitely the core part that we need to set up right.
05:07Like the design system, typography, colors, components, like other stuff.
05:12And once this is set up, like for example, when we create the website, it's all set up within this thing.
05:20And yeah, this is just an example.
05:22Like we have the colors, primary, and then also the accent colors, the typography, and also the tagline, all the other stuff.
05:32And also, have you guys Are you guys familiar with the atomic designs?
05:38So, yeah, my previous background is I'm a product designer.
05:41So, I'm pretty familiar with the thing where we need to create a user-centric design and also like atomic designs, right?
05:48Where we create the smallest part possible and then combining it into like basically a LEGO pieces and then into a deliverables.
05:57And this is pretty useful in my job desk right now.
06:02So, once we set up all of those foundation, we basically need to create for example, we use Defont a lot.
06:11In at the office, we everybody use Defont.
06:14Everybody like abusing Defont for example.
06:17Yeah.
06:18And 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
06:35font size, right?
06:36And if we don't define it, it just delivering a slope like the previous slope.
06:42And yeah.
06:45Typography, color and stuff and and then it comes to reusable design.
06:51So, 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
07:03can create everything basically.
07:05Like they can create an email design based on that.
07:08They can create a flyer, a document just based on the website because it's already defined like it defined early.
07:19And yeah, once you get the design, you can just rinse and repeat.
07:24For example, the mascot, it's all has the pretty much the same design and it's rinse and repeat.
07:29And if you already defining those things, you can basically like create one design that works for all.
07:38And this is the part that I'm most interesting to talk about, which is the automated workflows.
07:44Before, for example, if you take a look outside the room, there's a schedule, right?
07:49The schedule for each and everyone.
07:52So, we used to do it manually on Figma, but now we use Devin for it.
07:58And let me show you.
08:04Hey.
08:06So, right now we just pull the latest data.
08:09I just asked Devin like, "Hey, I want this room at these days."
08:15And 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.
08:25And it was like impossible before because the friction is just too much between the designers and the developers.
08:34We
08:34[snorts]
08:34cannot make things like pixel perfect because once we tell the designer, "Hey, this is the design."
08:39And then Sorry, the the engineers that created the design, for example.
08:45"Hey, I need this to be delivered."
08:47And then they don't create it pixel perfect, it's a lot of feedback loop, right?
08:53But with Devin, we just say, "Hey, can you make this more accurate?"
08:59We 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
09:12font size, etc. And this is what we do to for the speaker announcement.
09:19So, we have 300 plus speakers, and it's impossible for me to like handle one by one, right?
09:26So, we create this thing, which is called which you can also access to speaker announcement, and you can also try it yourself.
09:36Like this one, for example.
09:38You can select it right here.
09:40And then you can also change your name.
09:42Well, that Yeah.
09:44For example, this you can change the name to whatever you want.
09:48And we also have the landscape mode which can be also loaded.
09:53If the speaker also have the headshot and all the details, it will automatically export.
09:59And we also have the trading cards which is surprisingly pretty popular.
10:05And we have a different team.
10:07And this is all pixel perfect.
10:10All right.
10:10For example, this one.
10:14This is inspired by TBPN, so Yeah.
10:19And how do I deliver this in pixel perfect?
10:23Let's jump into it.
10:25So, 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?
10:42And then feedback loop and stuff like that.
10:45But right now, it's it's just outdated for me.
10:49Like 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.
11:01[snorts]
11:01Like 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
11:13interested.
11:15It's free and it's basically give an annotation to the PDF.
11:20And 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.
11:31And it's basically defining all this spacing, all this font size, and then all the colors and stuff.
11:40It's definitely going to help you develop a pixel-perfect product.
11:44And we also have just recently like today have uh photos which we have to create the thumbnail for its speaker, right?
11:55And then we ask Devin like, "Hey, who is this person?"
11:58And yeah, it kind of did.
12:01Like I make a Tinder kind of you know, detection if this is the same person or not.
12:09And I think it's pretty accurate.
12:11It's Jason Liu.
12:12Yes.
12:13And then we can use this to like for context.
12:17Like 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.
12:27But now we can just like, "Oh, this is Jason Liu.
12:30Download that photo."
12:31And then we can paste it into the thumbnail, right?
12:34And it's pretty amazing.
12:36I 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?
12:48I mean, we already have things to automate, we already have things to create the design fast.
12:53Basically, all you need is a problem because once you have a problem that worth solving, you can basically solve anything.
13:02And back to my talk, I got sidetracked right there.
13:06Yeah.
13:07And then yeah.
13:08And this is also the amazing thing that we test.
13:11So, as you know, we have like hundreds of sponsors, right?
13:16Like 140 plus.
13:18And as you can see on the at the lobby, we have the banner with all the sponsors.
13:24And I basically tell Devin like "Hi, could you compare could you check if there are any missing logos in this graphic?"
13:33And the accuracy is 100% based on the test that I do.
13:38So, which is pretty well.
13:40And we use the same thing for the T-shirt that you got for your swag.
13:48And yeah, surprisingly, Devin knows how to like visualize things, right?
13:54Like how to detect things visually.
13:57And that is very surprising because as a human, we can like give errors.
14:02Oh, turns out there's one small something that is missing.
14:05But with this kind of thing, we can like double-check.
14:09So, human plus AI, combine it, well, you got your own QA team.
14:15And then remove fiction.
14:17So, this is just uh the way of thinking.
14:21So, as a designer, we have to think as a user, not as a designer, all right?
14:27Because every user has its needs.
14:29You can walk through the for example, the map plan here.
14:33So, 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.
14:46Basically, everything needs to be connected so you guys don't get lost and knows how to find your rooms and other stuff.
14:55And the real job is handling exceptions.
14:59So, for example, oh, I have Yeah.
15:03[snorts]
15:03For example, um there is a schedule update, all right?
15:09And when we create this thing, it doesn't has an edit button.
15:13And then one morning, it just "Hey, this schedule needs to be updated and we don't have those edit buttons."
15:20I could just ask Devin, "Hey, can you add me an edit button?"
15:24And then it did.
15:25So, we can change everything now and then ship it to PNG and replug it to the screen, which is pretty convenient, right?
15:34And those exceptions, right?
15:36It it's not possible before when we have to do it manually and stuff.
15:41But now it's just get easier.
15:44And so, the takeaway here is that to solve the scale problem, you have to actually think small.
15:51Think all the smallest thing possible.
15:53Think everything that can go wrong and will go wrong and then try to solve it before.
15:59And also, like yeah, right now basically you can automate everything.
16:05And 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
16:17good.
16:18And yeah, I think that's all that I can share.
16:20Hope my talk has some benefits to you and yeah.
16:25That's all.
16:26Thanks, guys.
16:27[applause]
16:46[music]