No design skills? Use this free AI powered design tool from Google | The Agent Factory

0:01 Today I'll be chatting with David East who's a Devril engineer at Google Labs.

0:05 David worked on Firebase Studio and drove

0:07 aentic coding experiences before moving to Google Labs.

0:11 He's also the creator of the Bad at CSS podcast,

0:14 which spoiler alert tells you everything you need to know about this episode.

0:18 We're diving into Stitch, Google's AI powered UI generation tool

0:22 that can create beautiful interfaces on demand.

0:25 And by the end of this episode,

0:26 you'll know exactly how to plug it into your own

0:28 AI agents so they could generate stunning UIs on the fly.

0:32 No design skills needed.

0:34 If you've ever shipped something that worked perfectly but looked

0:37 like it was built in 2003, this one's for you.

0:40 I'll be honest, David has always been my go-to for design advice,

0:44 but lately I've been going straight to Stitch instead.

0:47 David, have you noticed I've been reaching out

0:49 to you a little bit less frequently these days?

0:51 I have, and I don't know.

0:53 I guess that's I guess that's good, you know,

0:55 if you're if you're getting good results with Stitch uh instead of asking me.

0:59 I you know, I think that a lot

1:01 of people would think that your intro is uh performative.

1:03 Like, oh, I'm reaching out to him last

1:05 I went from a like this is legitimately true.

1:08 Like knowing and I worked on Firebase together.

1:11 I used to run the Firebase blog.

1:13 I got to help build that from scratch uh pre- AI.

1:17 So, I was all handcoded and got to help design that.

1:20 And yeah, Noi would always send up a PR and he'd be like, "It doesn't look good.

1:24 Can you make it look good?" And so this is true.

1:27 Like none of this is like, "That makes a good intro." Uh,

1:31 no, he he legitimately would do that all the time.

1:34 So uh why don't you tell us uh more about Stitch?

1:36 Like for somebody that's never seen it before or heard of it, what is it?

1:39 How do I use it?

1:40 Uh and and what's what's the intro guide to Stitch?

1:44 So with Stitch, what I like to tell people is

1:46 you often like if you're using an AI coding agent,

1:49 uh you take your pick of whatever one you are sending it

1:53 prompts and reviewing what it says back and then it's writing files,

1:57 executing code, doing all these things and you are orchestrating this agent.

2:01 You are acting like the tech lead

2:04 and pointing it towards getting like better results.

2:08 Uh, with Stitch, it's very similar except you're doing that uh,

2:11 instead of being a tech lead, you're doing that as a creative director.

2:16 You're uh, letting Stitch be the design agent doing all the design work,

2:20 but you are still directing the creative process.

2:25 And so when you go in with that hat on and saying like I'm going to be

2:28 the creative director today and it's my job

2:31 to establish some like uh you know some aesthetic,

2:37 some exploration, something like that.

2:39 You have some objective that you know

2:40 you're doing and you're just sending that off

2:42 to uh the designer uh which will be Stitch uh and reviewing and refining.

2:47 That tends to set you up with better results.

2:50 And sometimes that can be kind of daunting because you'll get

2:53 back a result and you can look at it and be like,

2:56 I don't like that or there's something about that I want to change,

3:00 but I don't know what.

3:02 And uh that's takes a lot of like design vocabulary and design eye.

3:06 Uh but it the good news is like once you start seeing it,

3:10 it can be quickly learned.

3:12 Uh you know that used to be the old debate.

3:14 Can design be learned?

3:15 Can it be taught?

3:16 Like yes, yes it can.

3:17 Any anything can be taught.

3:19 Uh, so yeah.

3:21 So it's it's kind of like when I would reach out to you and I would say,

3:23 "Hey, like I have this design.

3:25 Um, I don't know what I don't like about it.

3:27 Can you tell me what you don't like about it?" And you would say,

3:29 "Oh, everything, right?" Uh, but but there's there's some like specific

3:34 language that you could give it to say, "Oh, like this needs to be okay."

3:38 Very very early on in my uh career, actually.

3:42 It was like right after I joined Firebase when it was a little startup.

3:45 Uh we had this uh the the the VP of UX at the time,

3:49 this guy Alex Wolf, shout out Alex Wolf.

3:51 Uh I sent him this design that someone had sent me

3:55 and because someone had asked me to evaluate this design and and tell

3:59 me what they thought and I actually didn't have the words

4:01 for it at all and but I did not like it.

4:05 And I didn't want to respond back to them like I don't

4:07 like it and then have be very vague because that just sounds insulting.

4:11 So, I went to Alex and I was like, "I don't like this.

4:14 Can you please tell me why I don't like this?" Because he was very good.

4:18 And then he just was like, "Yeah." Um,

4:20 he's like, "It's very structurally sound." He's like, "So,

4:23 you're not having any immediate uh rejections of the way it

4:27 was laid out because it's very good." He's like, but he's like,

4:31 what you have problems with is that he's like,

4:33 these lines right here, they indicate motion,

4:36 and it's upsetting to your eyes because this is

4:40 supposed to be more of a calming uh aesthetic,

4:43 but these lines uh conflict with that.

4:47 Uh so it's creating like, you know, excitement, motion, action.

4:51 And he's like, "So you don't like that?" And he was like,

4:53 and then also the way that they're doing the tonal layering

4:56 of the colors clashes also with the like

5:00 with with this calming aesthetic approach.

5:01 He's like, it's getting more colorful and like like and darker as you go down

5:07 instead of it actually getting lighter and becoming

5:09 more of a uh like calming looking experience.

5:13 He's like, "So the brand is betraying its own aesthetic." And I was like,

5:18 "Can you can you say that one more time?" I wasn't I wasn't taking notes.

5:22 Um but but it was stuff like that where I was like you start to see

5:26 uh the matrix so to speak and and every time you get one of those little

5:30 bits of an understanding it uh it helps you look at things differently and um

5:37 and it's like you get one and then you'll see a hundred more just from that one.

5:42 Uh so like that's my experience and I and I

5:45 think that holds really and so yeah happy to look

5:48 into stuff like that today or you know but yeah

5:51 that's that's my theory of how to improve with design.

5:57 So uh maybe you could take us through a quick demo

5:59 of how to like just get started with Stitch in the UI right

6:02 through the stitch.withgoogle website and I actually have the website up uh

6:07 if you just want to tell me and I can drive it.

6:10 Okay.

6:10 Yeah, let's do that.

6:11 If you're going to design something, that sentence needs to be followed.

6:16 You have to design something.

6:18 So, what are you going to design?

6:20 You're going to design a site.

6:21 Well, a site has content.

6:23 If you just start without any idea of what the content is,

6:28 you are in a state of exploration.

6:30 And that's fine, but just understand that you are in a state of exploration.

6:33 So when you see AI generated content and stuff like that, it

6:37 is not going to fully reflect what you're trying to do.

6:42 But if you can start with some design, some content in there,

6:47 even if it's just this is what the heading should be,

6:50 this is what the name of this is, all that type of stuff.

6:54 It's not only makes things more real,

6:57 but it also gives Stitch some creative liberty

7:00 to work with the actual content because what we

7:05 forget about if we're not designing with the content

7:07 is that the actual content of, you know,

7:10 the actual character of the content can drive the design.

7:14 is because if you're writing a newspaper

7:16 article about some new I don't know like

7:20 if it's a local newspaper and you're trying to show the impact of this new uh

7:25 like development in town there's actual going

7:29 to be space for design for visualizations

7:31 of this or the way this should be laid out and and all that type of stuff.

7:35 So the content itself will dictate the design or the way

7:39 that it like you know whether if it's form whether it's the aesthetic.

7:42 So if you can start with real content even just little bit it's important.

7:46 Uh so okay this is good.

7:51 So actually if you want to do this go type that copy that and go into Gemini.

7:57 All right so paste that in.

7:58 Tell me.

7:59 Yeah tell me or just like yeah the best places for crabbing

8:03 in the Chesake Bay which by the way you should know this.

8:06 I am.

8:06 Uh

8:09 I should I you know it's been a while since I've gotten on the bay.

8:13 You can take uh yeah take the let's do Maryland

8:18 if because I know that's what you're really looking for.

8:20 Uh you're not looking for the crabbing in Virginia.

8:23 Uh so we will so copy that in.

8:27 Let's go back to Stitch and then uh site

8:31 for the best places crabing Ches Bay for Maryland.

8:35 Uh or and then let's see uh in so in between

8:40 that let's write a prompt that's like um who who's the site for?

8:45 Is it for Marylanders?

8:46 Is it for people visiting Maryland?

8:48 Anybody that likes crabs?

8:50 Yeah, but like why would I go to this site?

8:53 Oh yeah, I guess I guess getting started with crabbing.

8:56 So like new new crabbers.

8:58 But are you taking me on tours or like am I going to go

9:01 to the site or is it this is just like a guide book?

9:05 Let's let's have it be uh a tour like a tour company.

9:09 Okay.

9:09 So, all right.

9:10 See See this is two totally different lenses.

9:13 So, now instead of saying a site, you're going to say a site for uh a touring

9:22 the best places provides tours of the best places to go crapping.

9:27 So, now we're starting to ground it in something real.

9:30 And there's further ways we could like go into this for like

9:34 call to action and all that type of stuff.

9:36 Uh but right now we're we're trying to make this more real.

9:40 So what is easier to do is to actually say what you don't want

9:45 and because now we can start eliminating parts.

9:49 So like here's a good example.

9:51 Do you want it to be stereotypical Maryland colors?

9:55 Are we going to get lots of red and black and yellow or Absolutely.

10:00 Okay.

10:01 So, we want to go all out.

10:02 So, we want this to like we we want to drench this in Maryland.

10:06 Yes.

10:07 Absolutely.

10:07 Okay.

10:08 The Maryland flag, I think,

10:09 has a lot of really good uh colors to bring out in this, but we want

10:14 to make sure that it doesn't take it the wrong way or get too busy with it.

10:18 Um, okay.

10:20 Because this is a tour site,

10:21 I would say that it needs to be a light theme because you want

10:24 to give the uh the the feeling of like out in the open in air,

10:29 unless this was like night tours of crabbing, uh which you do not recommend.

10:35 Um then that makes sense to have it.

10:37 Like if this was like stargazing or something

10:39 like that out in like Moab or whatever,

10:41 then then then I think night theme works really well for that.

10:44 So, it needs to be light and that goes counter to Marilyn's

10:47 colors because now we have a lot of clashing against white.

10:52 See, these are the things to think about before you you

10:55 do this because now we have accessibility contrast to to consider.

10:59 But that doesn't mean we're, you know, like we don't have options.

11:03 It just means we need to consider this.

11:06 Uh, and I'm sorry for everyone who's like,

11:07 when are you going to press the button and when am I going to see the pixels?

11:10 But this is this is design.

11:13 or if you're like, "Hey, Stitch should do this for me." Uh,

11:16 Stitch will do a whole lot for you.

11:17 But if you can think about what you don't

11:19 want and what you do want up ahead of time,

11:22 we can actually focus on the real more creative details where you

11:26 get more gas out of it rather than trying to eliminate some,

11:32 you know, like right now I'm thinking

11:33 through these color combinations or things to avoid.

11:35 If I can think get those out of the way up front, those are table stakes.

11:38 So what we should do right here is we want to think about

11:41 one tertiary color and tertiary being like the accent but uh you know

11:49 probably red

11:51 as I'm thinking but you have a white so we need

11:54 uh so red and white not super great unless you unless you

11:58 kind of turn down the saturation sorry turn up the saturation

12:02 and then down the brightness then you get more of a dull red.

12:06 But there's but there is there is a lot of good ones out there.

12:08 We just want to make sure it feels Marylandy.

12:10 So that will be let's just go with that and we will figure it out.

12:13 Um, so what we'll do is we'll say like

12:15 a tertiary color should be a red that uh, you know,

12:24 contrast well with a cream white background and say

12:31 warm cream and cream is with a with an a.

12:36 Yeah, you know, come on, man.

12:38 Don't be fancy and you don't need the e at the end.

12:41 Um, it's the uh the royal spelling, I think.

12:44 All right.

12:45 So, this right here, um, or it's the crispy spelling.

12:49 Um, uh, say it should be a Maryland red.

12:55 Okay.

12:55 And so those things I was going to give you another instruction, but okay.

12:58 All right.

12:58 It's fine.

12:59 Uh, and so, uh, so those are kind of, uh, All right.

13:03 Let's see what it does here.

13:04 This is an interesting palette.

13:07 Um, there's a there's a brand that is very similar to these colors.

13:15 The red is often associated with crabs.

13:18 The red I can't tell if it's from the screen share or not.

13:21 Um, I'm going to have to like load that up on mine.

13:24 Uh, or I'll get you to share it with me.

13:26 Uh, looks like it needs a little bit more dullness, but okay.

13:32 Is there a sharing option in Stitch?

13:34 If I wanted to share this, see that?

13:35 We see where it says share.

13:37 Oh, okay.

13:38 Yeah.

13:38 Yeah.

13:38 Yeah.

13:38 But once you do, you make it public.

13:40 Uh, which is fine, but it's it's read only.

13:42 Um, and so you copy this link, you send it to me,

13:45 and uh I can pull it up on mine.

13:48 And here, go over to that little swatch to the left.

13:50 We we'll we'll get to.

13:51 So, this right here is a design system.

13:53 And a design system in Stitch is sort

13:56 of the thing that roots all your designs in together.

13:58 So, if you click on that

14:00 and then hit E.

14:05 E.

14:05 Yeah, there we go.

14:05 So this pulls up.

14:06 So this is called Chesapeake Heritage is the name

14:09 of the design system and that it has these uh

14:13 token representations right here where we can see the seed

14:16 color which is stuff for stuff gets mixed off of.

14:18 We we'll probably end up changing that.

14:20 Um and then uh we have the color palette which has primary,

14:25 secondary, tertiary and neutral.

14:27 Now these are aspects of a color hierarchy or color system and there

14:32 are different ways you can assign uh importance or roles to each color.

14:37 Uh and so now if you go to the top though, this is real important.

14:41 You see where it says design MD?

14:45 Yep.

14:44 Yeah.

14:44 So this right here is uh an artifact that Stitch creates.

14:49 It's very similar to agents MD,

14:51 but instead of it being instruction for coding agents,

14:55 it's instruction about the design.

14:57 Now, this what you're scrolling through right now are token values.

15:01 And uh this is very similar if you've used like um uh uh like design token

15:08 uh spec uh DTCG that is or if you use Tailwind configs and stuff like that.

15:13 But what's important to understand here is that this is a markdown

15:17 file that interlees or associates the token values with the design intent.

15:26 And this is critically important that we have the token values mixed with pros.

15:31 And the pros is the intent.

15:34 It's the reason it is the invisible uh

15:39 descriptions of why things are the way they are.

15:41 So when I was saying to you about like, oh,

15:43 we want it to feel light, so it feels like a theme.

15:46 So it feels like the the the outside,

15:49 so it's like daytime, that is something you could express inside MD,

15:54 but that's not something you could infer

15:56 from just a hex value of a background color.

15:59 Have a conversation with a designer of a site and you got all these reasons

16:03 to why they are the way they are as they like annotated through the code.

16:06 That is what design MD is for.

16:08 And it can be ported.

16:09 It can be used in stitch.

16:10 It can be used in all other sorts of coding agents.

16:13 And it's just sort of a document of truth between

16:17 the values you want to use and the intent behind them.

16:21 So this is the Chesapeake Krabbing Co, which is, you know, pretty good name.

16:24 Um, all right.

16:25 So it went with a hero image, which is, you know, whatever.

16:31 Uh, I I'm not a big fan, but it's okay.

16:33 I got ways to fix that.

16:34 It's a It's a good start.

16:36 Um, that's another thing, too.

16:37 A lot of times you get designs and they're like, "Okay,

16:39 there's something to work with here, but we can improve." So, let's scroll down.

16:44 The heart of blue crab culture.

16:47 Okay, that's a good crab thing.

16:48 Top crab spots.

16:49 Okay, that this is cool.

16:51 Um, I do.

16:53 I kind of like this little bentomasonry grid thing.

16:57 That That actually is kind of nice.

16:58 Uh, ready to cast your line.

17:00 Okay, so that's the red in action.

17:02 What do you think about the red, Noey?

17:03 like you're the you're the you're the Marylander.

17:06 Uh I I feel like there's not enough red on the page, but that might just be me.

17:11 But the problem is, and I can tell you what the problem is here.

17:13 Uh so let's let's scroll out.

17:17 And actually, one of the things you might want

17:18 to do is uh click on any one of these.

17:20 It doesn't matter which one really.

17:22 And then now hit shift P.

17:26 Shift P.

17:27 Boom.

17:27 And now it goes into a preview.

17:29 And this is like a one you can do responsiveness.

17:31 But what I my favorite is is that if you

17:33 go to the top uh little toolbar for the stitch,

17:36 there's the one that like links out.

17:39 Oh, links out.

17:40 Okay, I see that.

17:41 Yeah, this takes it into full screen.

17:43 Yeah, this is what I like to do.

17:45 I like to get a good nice full screen as I like this a lot.

17:48 And because this is all just uh HTML and CSS

17:52 or tail one CSS tail one config with it,

17:55 we have to start thinking about what do we want

17:57 the user to think about the site when they appear on it.

18:01 So no, what what would you want the user?

18:03 You're the you're the crab coe.

18:07 What do you want them to know about your site?

18:09 They land on the site and they go, I think this company is this.

18:14 I think as a Ches Peak crabbing company,

18:17 I want my customers to feel like they will

18:20 have a unique experience on the water with us

18:24 that day and just being able to see

18:27 a side of Maryland that nobody's ever seen before.

18:29 All right, I loved that.

18:31 Uh that was really good.

18:33 That was a very good response.

18:35 Um and I wrote that down because those type of things should be captured.

18:39 Uh that can go in the overview of a design MD.

18:42 Um, and you say you said many things in there

18:47 in that sentence that I think translates well to the design.

18:51 Uh, and and where to push it forward next when Okay.

18:55 Uh, experience on the water that day.

18:58 So, unique experience on the water that day.

19:00 And then secondly, you said and see a side

19:03 of Maryland that they have never seen before.

19:08 That right there, that's your hero.

19:11 see a side of Maryland you've never seen before.

19:14 There's probably like a more tur way of or concise

19:16 way of saying that, like punchy, but it's okay.

19:19 Like, we'll get there.

19:19 We're not we're not designing and like nailing the slogan,

19:23 but that feels like a that feels like a a way

19:28 for you to communicate immediately in a very attention-grabbing way.

19:31 See a side of Maryland you've never seen before.

19:34 That's a great first anchor for your message.

19:39 So just by saying

19:41 so just by saying that right now though you you've now gone from

19:46 you know like o what do I want to do with this design?

19:48 How do I move it forward to like oh okay

19:51 but let's let's uh let's unpack that you know let's unpack it.

19:55 Uh you said a unique experience on the water

20:00 and see of Maryland I've never seen before.

20:03 So what are the aspects of that?

20:07 A unique experience is is that luxury?

20:12 Is that earthy?

20:14 Is that like what is the unique experience?

20:17 And what would you want them to feel?

20:19 Is it like um are they getting picked up uh or you know they roll onto your boat

20:27 and there's uh a spread of food and drinks

20:31 and it's a little like glamping on the water.

20:34 You know what I mean?

20:35 And it feels very like high experience like uh hey look at us

20:41 like we're out on the water and that guy's crabbing for us but we

20:44 at some point walk over there and hold the net and now I can

20:48 tell everyone I crabbed uh you know or is it like a much more uh

20:54 I think it's you know a much more real experience right where

20:56 you go out in the boat and you and you throw the crab

20:58 lines over uh or not lines but you know the cages over

21:02 uh and then you pull them back up onto the boat Right?

21:04 Like that's that's the whole thing.

21:06 You come out hours later to pull them

21:08 back up after the crabs have swarmed the cages.

21:11 So like an authentic uh experience.

21:14 So you want your users to know that they

21:17 are going to be having their hands on the nets.

21:19 They're going to be, you know, they're going to be sitting there out on the day.

21:23 They're going to be getting the crabs.

21:25 Like they are they are a crabber.

21:27 Just like, you know, like as soon as you're on that boat,

21:29 you're you're one of us.

21:32 Yep.

21:31 Then yeah, that's very different.

21:33 And those are uh you know that's something to think about here.

21:37 Um so this is authentic but it's also immersive.

21:42 Let me send you a prompt that I think will work really well.

21:48 Okay.

21:48 So this one Oh, so we're going to do this differently too.

21:51 Uh click on that page and hit shift V.

21:57 Now take that prompt and paste it into the custom instructions.

22:02 So this is a variant.

22:04 And before we do anything, uh let's I'll walk you through this.

22:08 So you can specify the number of like results that you want.

22:12 So yeah, we can go to five.

22:14 Yeah, we'll just do we'll just go to five.

22:16 And then we can specify the creative range.

22:19 Now, I find that there's really only two that I use.

22:23 Uh, I haven't found any prompts that quite work really well with Reimagine,

22:29 uh, as far as custom instructions go.

22:32 Like I think you can go with Reimagine,

22:34 but I have never found a way to really drive it because it goes out there.

22:37 It goes wild.

22:38 It grabs everything.

22:39 And yeah, exactly.

22:40 So I don't know like I don't think it it's hard to rein it in.

22:43 Um, because that's that's it's not it's not not what it's meant to do.

22:46 It has to be rained in.

22:47 So,

22:48 but if I'm not very good at prompting, right, and I I can't iterate with Gemini,

22:52 I might do reimagine to just get a a fresh pallet of everything, right?

22:57 You can, but you may not like what

22:58 you get back because like there's more variance there.

23:01 So, like you can like, you know,

23:03 so what I like to do though is uh is

23:05 to use explore uh when I'm in this stage phase.

23:09 When you have something you like, refine becomes your best friend.

23:13 But before you have something you like, you use explore.

23:16 uh it's like a very good uh sweet spot of finding

23:20 new stuff but not quite uh doing anything totally new.

23:23 Uh and so now we have aspects to vary and so this instruction is

23:28 uh like if we like the color scheme then we'll just click layout and if

23:34 and the whole images text font actually actually do layout and do text font

23:40 because I don't love the font and we haven't even gotten into fonts yet.

23:44 Um, so we'll we'll do that.

23:46 And then now just click uh generate uh variations.

23:53 Okay.

23:52 And now we're going to do another one

23:54 because we can do concurrent edits in stitch.

23:56 So this is the whole ideation process like I

23:59 generate one and now it's going to here in just

24:01 a second it's going to like introduce five skeleton

24:04 loaders and we are going to just do another variant.

24:09 And so we will have all these ones generating at once and we can

24:13 just like find what works and then continue to ideulate on the ones that work.

24:19 And so it's basically like branching off ideas until you get somewhere.

24:22 I try to like visually organize the branches in my stitch projects.

24:26 And if you ever see them, they just kind of like, you know,

24:29 they just keep drilling down down down down down

24:32 until uh I get to like something I like.

24:34 So yeah, pull up one you like in in a shift P.

24:37 We'll go to like a full page here.

24:40 Open it in full screen.

24:42 Actually, there's a there's a couple things I like about this.

24:45 Okay.

24:45 I like the typography on the split, like navigating the tides of tradition.

24:52 Um, this is good.

24:54 And I I like the symmetry.

24:57 Uh, works really well.

24:59 Uh, like you see how it has Oh, man.

25:02 I'm gonna I'm gonna say something here.

25:04 Uh, that's kind of wild.

25:05 So, scroll up just a little.

25:07 Yep.

25:08 Yeah.

25:08 Yeah.

25:08 No.

25:08 Scroll down again.

25:09 Just a little.

25:10 Scroll.

25:10 Oh, no.

25:11 No.

25:11 No.

25:11 Yeah.

25:11 I want you to scroll between.

25:13 So, scroll up tiny.

25:14 Scroll up tiny.

25:15 Scroll up tiny.

25:15 Okay.

25:15 Stop.

25:17 Look at the four grids like the the four squares.

25:23 Yeah.

25:23 And do you see how you have the white

25:25 and then you have the images like creating the cross pattern?

25:31 Yeah.

25:30 When you go crabbing and then you go eat the crabs, what do you do?

25:35 You lay down a tablecloth on the table.

25:40 Newspaper.

25:40 You do use newspaper, but a lot of times you do lay down the tablecloth that has

25:47 this cross checkered padding and so does the flag itself.

25:52 So this becomes a way to this is where you start

25:56 seeing that these are the little details where like opportunity lies.

26:00 And so like the framework is down here.

26:02 We haven't done much, but it already kind of creates that checkered

26:05 pattern that gives us some latent association.

26:07 It's a little big.

26:08 So, you could start thinking about like what if I found

26:11 ways to uh kept this to keep this uh mosaic uh

26:16 this see that's another word right there is now we start looking

26:19 into uh we can look into mosaic patterns and stuff like that.

26:23 Okay.

26:23 So, let's uh let's go back into stitch.

26:25 So, this one we're going to say this one is our uh our current winner.

26:30 So when I get a winner, what I like to do is I like to duplicate it.

26:33 Uh so like click on it and hit uh command D.

26:37 Command D.

26:39 Yeah.

26:39 And so now it's putting it over.

26:40 So now like just drag it like below these.

26:43 Okay.

26:43 Yeah.

26:44 Yeah.

26:47 And so now uh uh like uh we want to work for this one.

26:53 If we want to like further hone in on that on like what we're trying to do,

26:58 click on it and hit E.

27:00 E.

27:01 Okay.

27:01 Yeah.

27:02 So now it says navigating the tides of tradition.

27:05 Let's change that back to the thing that that state

27:09 that uh you said see a side of Maryland.

27:14 Uh you've like like see the side of Maryland.

27:20 See this is too long.

27:21 Explore the unseen side of Maryland.

27:28 Okay.

27:27 Out of the edit mode.

27:30 Yep.

27:29 And then Yeah, it's sometimes it takes a second to go back, but it's okay.

27:33 We'll we'll fix that.

27:34 Um, what we want to do next is is we either want to like I I don't think like

27:39 refining the design is fully the right idea until you

27:44 have some of the more of the pages laid out.

27:46 So what we want to do now is let's

27:48 let's go back to that uh initial prompt we had

27:53 where we created the um we added those uh

27:58 lists of the crabbing pages because it it lost that.

28:01 So to do that actually you can go

28:04 yeah go to the very bottom.

28:05 So that's the agent log and it has everything that's being done.

28:08 So if you click on the very first one

28:10 see and see that there's a little copy button.

28:14 Yep.

28:14 You click on the little copy button.

28:16 We're going to have to delete some stuff.

28:17 So, don't do anything totally crazy yet.

28:19 But what we're going to do is click on the one we like down there.

28:26 Okay.

28:25 And then now we're going to write this prompt.

28:29 Say this is a targeted edit.

28:33 Create a list of crabbing spots page using

28:42 the same uh layout and aesthetic of this catalog page.

28:51 Use these crabbing spots below for content.

28:56 Yeah, just fire it off.

28:57 And so this is going to just do one, which is fine for now.

29:00 I like to do this before I jump

29:01 into a variant um because I haven't established this page.

29:06 And I could just send this off by itself,

29:08 but I like to root it in a page I like.

29:11 And so that's like a an edit.

29:13 It's like an edit, but it's not editing the same page.

29:16 It's like a directed edit or I call like a targeted edit.

29:19 Um so if you really like something

29:22 and you want something somewhat consistent with it,

29:25 this is a good way of grounding it in an existing context.

29:28 This is just context engineering.

29:30 Okay.

29:30 So, so in order to like create secondary pages or third pages,

29:33 I just select the page I like and I can just edit

29:36 it right here or and say this is a targeted edit do this.

29:39 Okay.

29:40 Yeah.

29:40 It's like a spectrum of creative freedom.

29:43 From there, this allows you to like share

29:46 a lot of this like look how consistent that looks.

29:48 That's like uh matches that really well to the point the point where

29:53 like I'm actually kind of bored with that level of consistency.

29:56 I'm like, just added a top square.

30:00 Uh, but you know what?

30:01 That's not bad.

30:02 Like, if we had real imagery from like this real,

30:06 you know, crabbing co that we were doing,

30:10 we would be like in business because these images would

30:13 sell much better this design than anything else we would do.

30:18 So, let me ask you this.

30:20 Uh, you you mentioned being able to extract this to HTML.

30:23 Does it already come out?

30:24 Compon component componentized.

30:27 Componentized.

30:28 Yeah, actually uh click on that one.

30:33 More.

30:33 Oh, click on this.

30:34 Yeah.

30:34 Yeah.

30:35 Yeah, it is right there.

30:35 Click more.

30:36 I always forget which one it is because I do a I I always right click,

30:39 but yeah, click view code.

30:40 Yeah.

30:40 And it's shift C.

30:42 This is it.

30:43 That's all it is.

30:44 It's a full HTML document with a Tailwind config and everything is linked out

30:49 like so you could literally copy this code

30:52 and paste it into a local environment.

30:54 It would run.

30:55 Um or you can use the MCP server that would get

30:58 that uh you it would look at your you get the project ID

31:03 and then it would list the screens or get the specific screen

31:05 from the project and you could start

31:08 integrating that directly into your code editor.

31:10 And since it's just HTML that if you're building with a React app

31:14 or something like that, it's quite easy

31:16 to start composing that into a React component.

31:19 Yeah, I've learned uh more about building, you know,

31:22 just designing a website sitting here with you uh in the last,

31:27 you know, 30 minutes than the the four plus hours

31:32 of conversations we used to have uh over Firebase blog.

31:36 So, this is good.

31:37 and and and you you've given me a good guide on how to go and prompt the models

31:43 about what specifically I'm looking for because I think

31:46 a lot of people suffer with this idea that, oh,

31:49 I just want a website that, you know,

31:52 sells candles, but they never get beyond selling candles.

31:54 They never think about what kind of emotion they want

31:56 to evoke or like what kind of feeling they want, right?

31:59 Maybe a candle website should have a dark theme because they

32:02 want to have uh candles off in the distance or something, right?

32:07 and and being the light.

32:09 So, when it comes to doing designs,

32:14 uh I know that I also and and I'll I've I've said this more than than once,

32:20 uh just for image generation, I will have Gemini prompt or write the prompt

32:25 to write the prompt for an image generation model.

32:31 So, I will go to Gemini and say, "Generate me a picture of crabs,

32:34 right?" and it might show rail and blue crab or it

32:37 might show a king crab or it might show this other thing.

32:39 But if I say write an image generation prompt

32:43 for crabs at the bottom of the Ches Peak Bay,

32:46 it will get very specific about everything that it

32:49 should be able to see in the bay.

32:52 Yeah.

32:51 And it might be like realistic or it's like use

32:54 this is from this kind of lens and this kind of thing.

32:57 Yeah, exactly.

32:58 The ones that you would just not have.

32:59 Yes.

33:00 Right.

33:01 like 8K, Ultra HD, and like things that just escape my mind.

33:06 Yeah.

33:06 And I think a lot of that it too is like how many of those words

33:09 mattered in that and how much were

33:11 just like performative or just like extra asurances.

33:15 Uh, I've done that exercise before where I've

33:18 gotten like a really verbose prompt about like

33:21 a layout that I'd want and then I kept uh making it more concise, more concise,

33:27 more concise and seeing like what gets lost uh what

33:30 you know what how lossy is it as it gets uh

33:32 and then the term that I've uh come up with this uh

33:36 which is super uh I love uh is semantic compression.

33:41 So, how much can you uh how much of the semantics

33:45 of what you're trying to convey can be compressed into that sentence?

33:52 It's the one I always do, but I I remixed yours and then I got this.

33:55 This is this is the ID.

33:56 There's there's all these other different ways I could do this.

33:58 Uh, actually, this is exactly what I'm doing.

34:01 I'm going to do it the other way.

34:02 Uh, I built this.

34:03 This is something I built this little export MCP.

34:08 Oh, if you need set up the MCP, you can do this, too.

34:10 allows you to uh select see like Gemini CLI all

34:14 these ones and then it can give you the config for it.

34:17 Sorry, it's copy prompt.

34:18 Yeah, we cut that out.

34:20 Uh so I click copy prompt.

34:22 Yeah, actually this works pretty well.

34:23 Uh I wrote this uh and so uh I wrote the code that did this the whole

34:28 the thing and that's so you know so I'm like showing off my own features.

34:32 Uh, and so yes, I'm going to allow.

34:36 So, basically, I have the StitchMCP server set up and I sent this prompt in.

34:40 Get the images and code for the following stitch screens.

34:43 Uh, title, remix of the Chesape Bay, that's the name of the project.

34:46 This is the project ID.

34:47 These are the screens.

34:48 So, each screen has its own ID.

34:50 Uh, and then it gives it a little extra advice for using curl-shell.

34:54 Sometimes it tries to you it needs to uh follow

34:56 through the screen and sometimes it um and then get

34:59 the bytes from the screen and and so if you

35:01 and sometimes they try to get agents try to get too fancy.

35:04 If you just get a little hint, they're like, "Hey,

35:05 just just use curl-shell." And it's like, "Oh, okay." Uh, all right.

35:08 So, we'll just So, now it's calling get screen for for these.

35:13 Boom.

35:14 And it found them.

35:16 And so, we have a download URL.

35:18 Yes, this is the image.

35:20 And this is the HTML code.

35:22 And so, let's uh Yep.

35:26 Let's for this.

35:28 So, hold

35:33 I need to one second.

35:34 You just you you entertain the audience.

35:36 I I realize I knocked my um charger out and uh I got so many things plugged in.

35:41 It's like draining power.

35:44 Oh, yeah.

35:45 But it's also striker.

35:47 So, I guess the one question that I do have is if you

35:51 uh this is you fetching our existing designs and bringing them into a project.

35:55 If you want to create a third screen without going back to the stitch UI,

36:00 is that possible with Gemini CLA?

36:02 Totally.

36:03 Uh I could say um I was trying to look at the screens to see

36:08 which ones uh we have already and which ones were missing.

36:11 So I know that we have like the tours uh the bay and then like

36:16 uh the tours maybe something about like recipes

36:21 uh based on the screen two uh since

36:28 screen two uh I'm going to lead the uh lead the agent here by telling

36:37 it to use edit screens because I specifically

36:39 because it might use generate screen from text.

36:41 So I just like Oh, okay.

36:43 I just like to do that.

36:44 Uh so working.

36:46 So using a new screen.

36:51 Uh but we need to say now like what what what's so you

36:55 want to do uh create a recipes uh screen of crab based meals.

37:06 I don't know.

37:07 This is not gonna be Chicken Chesapeake.

37:10 Chicken Chesapeake.

37:11 Is this a thing?

37:12 Yeah, it is a thing.

37:15 I'm I'm gonna come over your house one day.

37:16 I'll make it for you.

37:19 Chicken like this.

37:21 Uh I think there's an E at the end of Chesapeake.

37:23 Yeah.

37:24 Yeah, you're right.

37:24 Yeah.

37:24 Sorry.

37:25 You got I got you on Korean.

37:26 You got me on Chesapeake.

37:27 But that's typical Maryland.

37:29 You're like you spell Chesapeake wrong.

37:31 Um All right.

37:34 What one one thing that I noticed here is that you were

37:36 using the existing stitch project to yes read to design the next page.

37:42 If I didn't have an existing stitch project with this server

37:47 okay there's a create project tool.

37:49 Oh built into the MCP server and then it

37:51 would load in my existing um designs or look

37:54 at my existing designs and then maybe prompt

37:56 the model to create a new screen that way.

37:58 Is that the correct understanding?

38:00 Okay.

38:01 I can't hit enter right now because it's being cued.

38:03 Yeah.

38:04 Yeah, exactly.

38:05 Uh there's a whole set of tools.

38:08 Uh it looks like it did this.

38:10 Uh so I could go to the page and check it out.

38:13 But I also could try to just serve it locally or something like that.

38:16 Let me just go to the page to uh need to refresh

38:20 to see the um new one if it did create it.

38:24 Oh, I see it right there.

38:26 Where is it?

38:28 Uh bottom right.

38:30 Oh, yeah.

38:30 Right.

38:30 Yeah.

38:31 Yeah.

38:31 In the center.

38:32 You know, this is good.

38:33 There's so many Yeah.

38:35 From this page.

38:36 This is like I like a lot about this and there's a lot

38:38 of things I would want to change like seeing this in full now.

38:40 I'd probably like I don't love that this is the headline because

38:44 what it does is it breaks this on the fold, but that's okay.

38:48 These are things that we can work on.

38:51 Um, but I do like Yeah, I do like the way this is forming.

38:56 This is a really nice lookbook.

38:57 as I scroll, it's like look look and then it's a nice alternating geometry.

39:03 Um, this could get changed up a bit, but it but it is nice.

39:07 I do like this idea like this is

39:09 something I didn't think about um and Stitch did

39:12 and this is something as you provide your own content in you get a lot of that

39:17 having that context.

39:18 So, so your advice would be if if you're starting out with a new app,

39:22 get like maybe a brutalist design for an app where you just have

39:25 the functionality there and then come in with Stitch and like reimagine it.

39:29 So that way you know how to lay out the content and you say, "Oh yeah,

39:32 I know like users are going to have

39:33 this and things are going to have this layout." Okay,

39:36 that makes a lot more sense to This is Oh, it made it into

39:43 this is like not the greatest example because it's like fixing like

39:45 a bug it had or it rendered the the style thing wrong.

39:50 But what's great about this is is that you you want

39:52 to use it for more creative purposes for like look at the grid.

39:56 What would it take to turn this into a three column grid?

39:59 Uh, and then they can provide very specific

40:01 instruction for like getting those things laid out

40:04 well that you may not have the words

40:06 for because if you say like update the columns

40:08 to three and the middle one should be

40:11 like you're you're not you're you need to have

40:15 a lot of semantic meaning like you have

40:18 to be a very good describer which is mentally taxing.

40:22 So if you can get AI to fill out a lot of these instructional bits for you,

40:26 it's and if it can do that rooted in the code like look at the code as like

40:30 a you know serialized form of what's going on and then

40:34 your design MD is the intent behind that you

40:38 know serialized instruction and so you kind of marry

40:41 those things together like I have this instructionalbased syntax

40:44 HTML CSS and I have a design MD

40:48 and my own intuition my own language of what I want y

40:53 of like what should happen and why that starts driving that because

40:59 mo you cannot just rely on CSS alone or any rendering

41:05 for that matter like jetack compose swift UI uh whatever platforms

41:10 we're talking about because you need intent intent gives you that result

41:16 thank you uh so having said all of that we've

41:20 seen uh Stitch uh with a deep dive,

41:23 deep drive I should say, cuz uh you were telling me how to drive Stitch.

41:26 Uh then we had the Gemini CLI driving Stitch uh

41:30 to generate new images or or new screens I should say.

41:33 Uh and next what I'd like to do is hot takes with David East.

41:36 So uh I'm going to have a few questions for you.

41:39 You answer agree, disagree, or it's complicated uh as quick as you

41:44 can to just let me know what you're thinking.

41:48 Okay, sound good?

41:48 All right.

41:48 I'm a little scared, but only a little.

41:50 But and I kind I kind of like it.

41:52 I gotta try harder to make it more scared then.

41:54 Yeah.

41:54 No, no, it's good.

41:55 I'm like, you know, I'm like All right.

41:57 All right.

41:57 Let's go.

41:58 Ready?

41:59 So, uh, app development is gone.

42:01 It's all agents now.

42:03 Ooh.

42:04 Um, somewhere between it's complicated and disagree.

42:10 Is that the one again?

42:12 I think.

42:12 Yeah.

42:14 Yeah.

42:14 Yeah.

42:14 Like uh it is complicated because like agents are a new surface

42:19 uh and have a useful surface but like at the same time

42:24 uh we still have the other surfaces like uh if you're pulling

42:30 up certain apps certain things might work really well through an Asian surface.

42:36 uh and if that's the best use case for them, that's great.

42:39 That that's a good uh that's a good scenario

42:42 for that uh type of like app gone to agent,

42:45 but that's not the case for a lot of things and um especially if you're

42:49 making games and stuff like that or especially

42:50 if you're wanting more of an immersive experience.

42:53 And uh the experience determines everything.

42:56 And uh so I would say that yeah like a lot

43:00 of things can be agents but some things just can't

43:03 be like um you know like we still read physical books

43:07 because the experience is for many uh you know is great.

43:12 Um, not me.

43:14 I have to listen to everything because I don't have

43:15 the uh like I literally have to listen to everything.

43:18 When I read, I'm literally thinking I don't

43:20 want I don't I can't concentrate on reading this.

43:23 But if I'm listening, I'm like I'm like completely captured.

43:27 But yeah, so I guess this is experience.

43:29 So that's my thing.

43:31 That's fair.

43:31 Uh I still need a sense of style to have a greatlook app.

43:37 No.

43:37 Uh that is totally disagree.

43:39 Uh because style is one thing uh but empathy is what

43:46 I say and empathy is just like understanding what your user

43:50 wants and also like if you go out and look

43:52 at like some of the most popular apps used in the world.

43:56 They serve a utility.

43:58 Not every single app looks amazing and not everything I think

44:02 a lot of times we see the dribble shots of the world.

44:06 Um and I keep you know I feel like I'm being negative

44:08 to triple but true those dri they're amazing looking and they are aspirational.

44:12 They're inspirational but not everything needs to do be like that.

44:18 But I do think a lot of times when people come to design that's what they think.

44:21 they're like, "Well,

44:22 I was I was uh on Dribble or I was on social media and I saw these amazing

44:27 designs and so I want my designs to be

44:29 like that." But that's not always the case.

44:32 Like uh not every house is the most,

44:36 you know, you know, big designed architectural endeavor.

44:39 Like there's a lot of times where you find the right thing and the right

44:44 like the the right site hitting the right message for the right person.

44:50 That's design.

44:50 Design is literally you are designing some artifact,

44:54 some object to fit its use case and to resonate uh with its users.

45:00 You know, you are architecting it.

45:03 So, you got to know what it's like to live in that building.

45:06 And you can't let people, you know,

45:08 you can't be an architect who doesn't know what it's like to live

45:10 in the building because everyone's going to move in the building and hate it.

45:12 And so, that's you gota can't just design and walk away.

45:17 Okay.

45:18 Yeah.

45:18 Uh the best way to interact with Stitch is through another agent.

45:25 I would say it's complicated because uh there's a lot

45:30 of really good results you can get by doing that.

45:33 But sometimes as we saw earlier, it's really good to sit and think with it.

45:39 And where I asked you actually uh you know what

45:42 what do you want your user uh to to do?

45:46 And if you're going with an agent,

45:47 the agent's going to be eager and it's going to try to drive things.

45:50 And if you let it pull you along instead of you directing it,

45:56 then you it might get away from you a little bit.

45:59 And uh an agent's just trying to be eager, trying to be helpful.

46:02 So you have to make it go slow or or ground it really well in your goals.

46:06 And you need to take pre-work to ground it in your goals,

46:11 which just means you have to have them.

46:13 And uh so it's complicated.

46:15 I I would say that agents really help you a ton,

46:18 but you still but there is no precursor,

46:22 you know, there's no agent for the pre-work, you know.

46:24 Um you could you could have an agent help you design those things,

46:27 but then now you're doing work before that one.

46:29 So at some point you have to think that is my point.

46:32 You have to sit and think about your goals, what you're trying to create,

46:35 what you want people to feel like, all that type of stuff.

46:38 So it's complicated,

46:39 but I think it's just more like what role fits what you're doing.

46:44 Okay.

46:44 Yeah.

46:44 Yeah.

46:45 That's fair.

46:45 Uh the next question, hopefully this does not leak how little I know about CSS,

46:50 but CSS grid is better than flexbox.

46:55 H that is that even a valid question?

46:59 You know, I think it's complicated.

47:00 No, I mean they're they're just different uh different use cases.

47:04 Um flexbox has a lot of really great properties

47:07 to it for certain types of layouts and grid the same.

47:12 I think grid works really well when you look

47:14 at it uh as a macro layout of a page.

47:16 Like grid is tends to be very good for macro layouts

47:19 where you're saying like I can lay out this whole page

47:23 with a grid and then inside these grid items I can use

47:27 flexboxes in many cases to uh to to lay out this component level.

47:34 You can do the same with flexbox, but flexbox the keyword is flex.

47:40 Um, grid sounds rigid, which is not totally the case.

47:45 You have fractional units in grid.

47:47 Um, and you have uh intrinsic sizing units or intrinsic

47:50 sizing functions in grid like min, max, min, max.

47:54 uh what I would say is a flexbox has this aspect of growing

48:00 and shrinking and that's where you uh if there's if you can take advantage

48:05 of grow and shrink uh then flexbox is your is is the right choice

48:11 there whereas like is the content growing

48:13 and shrinking within this one otherwise when you

48:15 look at a lot of the ways that grid and flexbox lay things out

48:18 outside of setting up the the rows and tracks that is they're they're using

48:21 the same axis base orientation ations where it's like flex or it's like uh

48:26 align items justify content they both use

48:29 that um so that becomes a common denominator.

48:33 So you have to look at it like is

48:34 it beneficial for me to have rows and columns defined.

48:40 If it is then grid is very good

48:42 for that and and macro page layouts tend to do that.

48:44 With flexbox tends to be like well how do I get

48:46 this thing to grow and shrink based upon uh the sizing?

48:50 Well that's really tends to be really good for components.

48:52 So, uh, yeah, there you go.

48:56 Perfect.

48:56 Uh, three more questions.

48:58 Uh, knowing CSS is no longer important.

49:02 Very not true.

49:03 Uh, and strong disagree.

49:05 It's super important because it's more important than ever.

49:08 Uh, because that's what happens.

49:12 That's the thing gets that gets rendered, you know,

49:14 like and the more you know about that, uh, the stronger you can be with it.

49:19 Like I literally like I said I have this whole uh you know Dion Almare and I

49:23 have a whole talk at Google IO on a video session that's all about this having

49:28 CSS even just vocabulary and conceptual understanding will

49:31 drive you so much further because it'll give

49:33 you concepts to use in your prompt to understand

49:37 like oh this is possible with CSS alone.

49:40 Uh otherwise like or I was talking about

49:42 scroll driven animations that used to be a JavaScript

49:45 listener on the page and not super great

49:47 for performance and now it's all driven through a compositor.

49:50 So like it's just super fast.

49:52 Uh you know what those things mean.

49:54 You do.

49:55 You know that.

49:56 So you're like I don't know anything about CSS but you

49:58 know everything what I mean when I'm talking about the compositor.

50:00 Um that's that's I know you know that.

50:03 Um and so uh yeah like knowing those things is important.

50:08 I I don't think you need to know every single

50:10 keystroke and and every like it's a different art form now.

50:15 Um but knowing a lot about CSS is still very important.

50:18 CSS and design have always had massive overlaps over each other.

50:22 Gotcha.

50:22 So uh this leads into the next question.

50:25 Stitch replaces the need for front-end engineers.

50:29 No.

50:29 Uh very much not the case.

50:31 As you saw like I there was so much of the mix and match of components.

50:36 how that ends up happening and like what does front end mean like

50:39 you know what I mean like uh I think that a lot of times

50:41 people are like front end means that I'm building react well what about

50:45 like jetack compose what about swift like what if I have one app across

50:49 three different platforms what if I'm

50:50 building with flutter like all these different

50:52 types of things that becomes an engineering

50:54 effort because that's complicated to get one

50:56 design working across three different ones uh and a lot of times too

51:01 the design language from one platform

51:03 to the other is going to shift like intentionally.

51:06 Uh so the navigation will shift from one to the other.

51:10 Also go like would it be really cool if uh like or you know my customer

51:15 base really they all really have foldables because it's a map app or a video

51:21 app and something and so they want

51:22 a really good foldable experience like that's going

51:24 to change stuff and that's now we're talking about a lot of if statements here.

51:28 Actually I hope it's better than if statement but like uh

51:31 you know like there's a lot of different stuff to think about.

51:33 It's an engineering problem.

51:34 So front-end engineering has it still very much needs to be engineered.

51:39 This is just a really good way of of sourcing

51:43 of that and and generating and iterating to these points.

51:47 Perfect.

51:48 And then uh the final question.

51:49 Noi is my favorite colleague.

51:52 Noi is my favorite colleague.

51:53 Let me see here.

51:53 I'm like I'm just quickly doing the power rangings.

51:58 Well, you know, like we don't technically work in the same or together anymore

52:06 anymore, but but I guess we're in the same company.

52:07 So, like I said, make sure you're my colleague, so it's just uh Okay.

52:11 Sorry.

52:12 Monus pones at P and Q.

52:15 Um and Q.

52:17 Yeah.

52:17 Yeah.

52:17 Yes.

52:18 Yeah.

52:18 Okay.

52:18 I just I did the I did the discrete logic on it.

52:21 It works out.

52:21 Yes.

52:22 No.

52:22 No.

52:22 Is Yeah, you got it.

52:24 You did it.

52:25 And I I You heard it here first.

52:27 I I just wanted to make sure it was true, you know, so I had to read through.

52:30 You couldn't just say yes, then you wouldn't believe it was genuine.

52:33 Yeah, that's fair.

52:33 Yeah.

52:33 Yeah.

52:34 Perfect.

52:34 Uh thanks for those answers.

52:36 And then uh Oh, I'm actually sorry.

52:39 There is one final question.

52:40 What is the one AI tool that has made your day-to-day job easier?

52:47 One, it's a really good question.

52:50 And I'm trying to think about that because

52:51 like I I could I could easily be like, "Oh yeah, like Jewels and Stitch,

52:55 which I work on daily." Um and uh but exactly I use them.

53:01 So I'm trying to think about and I do use a lot of jewels to get

53:06 build stuff for jewels and I do use a lot of stitch to build stuff for Stitch.

53:11 Um you know, can I go with an concept?

53:17 I think this is more profound than it is a tool.

53:21 Uh the concept is uh basically uh benchmarking and evaluation

53:28 has uh greatly changed uh my perspective of things because what

53:33 has allowed me to do is to form less opinions about

53:38 things uh about like oh I think this is really good.

53:42 Uh that was that was like a very big way

53:44 I would always be like I feel like this is good.

53:46 I want to build this thing.

53:46 I want to do this thing and I would like really go towards that.

53:49 But what I've learned is nowadays with AI uh I can uh I can establish a lot

53:56 of benchmarks and and evaluations and stuff like

53:59 that in cases or cases and therefore get benchmarks.

54:02 Um and that allows me to actually go

54:05 through a objective uh scientific sort of method process

54:10 of like my uh what I think is good

54:13 is now an hypothesis no longer than an opinion.

54:16 And I don't become a validation of my hypothesis.

54:20 I become a truth seeker.

54:22 And so with AI I'm allow I can generate all these things.

54:25 I can get thinking traces.

54:26 I can get all these sorts of results back and I can get them analyzed.

54:30 And there's a lot of sometimes not always truth,

54:33 but it's a lot of data and a lot of things that can drive you to a place.

54:36 And so the things I've changed more than than anything is trying to make things

54:40 as observable and measurable as possible

54:43 and and to to take those insights from it.

54:45 Uh that has changed everything from me.

54:48 And so uh it's made yeah downstream has made everything way better because I

54:53 it's allowed me to work seeking the truth

54:55 of something the way something should work.

54:57 the way this is better because of this, not just like

55:00 I think this is better or I feel that it's better.

55:04 I might have to come and interview you outside of the podcast

55:07 setting just to learn more because this sounds very interesting.

55:09 I want to see your like workflow all broken out.

55:12 Yeah, I don't know if it's quiet.

55:14 It's that that's a little more messy.

55:16 Um but yeah, gathering gathering data.

55:19 Actually, I you know, last thing I'll say is I'm I'm trying to release

55:21 this uh I just got the PR merged yesterday.

55:24 I have a I have a CLI uh for stitch stitch MCP.

55:28 I'll put it in the repo.

55:29 And um basically a lot of the tool calls

55:32 allows you to directly invoke them through the CLI.

55:34 Helps you kind of set up the stitch MCP.

55:36 Um but one of the things I added to it

55:39 uh sort of additively behind the scenes is that uh

55:42 you can opt into logging and so it logs every

55:46 call and stuff you make and then logs the results out.

55:49 And I did this kind of selfishly for me, but it it's my CLI.

55:52 It's not it's not the official stitch CLI.

55:54 So I get to do that.

55:55 Uh and I do that because now I'm automatically seeing

55:59 the stepbystep traces at least from me running it on the client.

56:04 It's not a sing there's no like server

56:05 thing it pulls down from but uh everything I'm

56:08 running in that session gets logged and then

56:11 I can start sourcing like I ran this prompt.

56:14 I got these results and then I can observe

56:16 that I liked screen ID this one and that one

56:19 and then now later I can then associate

56:22 that these prompts were good and then I can try

56:26 to go and verify them again and then if

56:28 I get another good result and I can correlate it

56:29 I'm like okay this is really good and then that's

56:31 what goes into the library that I was showing earlier.

56:33 So it's stuff like that where it's like the library is way more

56:35 data driven or like validation driven than than um not every single one.

56:40 Sometimes I store ones that I want to try out later.

56:43 Uh but a lot of them are like, "Yes,

56:45 I've done this and I saw good things from it." Oh, lovely.

56:48 Excellent.

56:49 Yeah.

56:49 So, uh with that, um as someone who lacks any design sense,

56:53 I am so glad that you came today to show me

56:56 uh how to make beautiful designs with Stitch uh not only

56:59 in the UI and and you gave me like a crash course

57:01 on prompting Stitch uh but also through Gemini CLI, which was great.

57:05 Yeah.

57:06 Uh, is there anything else you want to say before we

57:08 uh we let you get back to building building with Google Labs?

57:13 Oh man, I think I've said a lot.

57:15 I uh this is one of those ones where like

57:16 if we took the uh the pie chart of speaking time,

57:21 it would be disproportionate and so I should say less.

57:24 So, uh I've I've I've Thank you.

57:26 That's that what I wanted to say.

57:28 Thank you.

57:28 This was this was a whole lot of fun.

57:30 I could, as you can tell, I could nerd out about this type of stuff for ever.

57:34 So, I'm glad that this uh was a part of my job today.

57:36 So, thank you.

57:38 Absolutely.

57:38 Yeah.

57:39 So, uh for everyone watching,

57:40 please check out David East on their personal blog, which I'll link down below,

57:43 and stay uptodate with all the latest from Google Labs,

57:47 uh by tuning in to IO coming up soon.

57:49 And uh if you're still here, let's uh watch this next video on how

57:53 to quickly build AI agents with a new agent CLI.

57:55 Thank you so much for tuning in.