Make Your Coding Agents Expert Designers

WEBVTT
00:00:00.000 --> 00:00:00.001
It's
00:00:00.001 --> 00:00:00.100
It's
00:00:00.100 --> 00:00:00.540
like we're
00:00:00.540 --> 00:00:00.719
so
00:00:00.719 --> 00:00:00.819
we're
00:00:00.819 --> 00:00:01.495
terrible.
00:00:01.495 --> 00:00:02.095
Oh my god.
00:00:02.095 --> 00:00:02.234
it's
00:00:02.234 --> 00:00:02.274
[laughter]
00:00:02.274 --> 00:00:03.415
so bad. [laughter]
00:00:03.415 --> 00:00:03.575
It's so
00:00:03.575 --> 00:00:03.814
When
00:00:03.814 --> 00:00:03.895
bad.
00:00:03.895 --> 00:00:10.660
I saw it Once you understand the actual production pipeline, you can replace individual stages, or accelerate them with AI.
00:00:10.660 --> 00:00:10.939
It's so
00:00:10.939 --> 00:00:11.199
[laughter] Look
00:00:11.199 --> 00:00:11.679
good. It's
00:00:11.679 --> 00:00:11.740
at
00:00:11.740 --> 00:00:11.820
so
00:00:11.820 --> 00:00:12.460
the difference.
00:00:12.460 --> 00:00:13.314
it's so much different.
00:00:13.314 --> 00:00:16.989
finally a front-end that doesn't look like those generic AI slop.
00:00:16.989 --> 00:00:25.309
anything that you're making that that can be designed if you figure out the workflow then you can make quality a- artifacts of any kind.
00:00:25.309 --> 00:00:30.684
I gave myself multiple places along the way where I could now judge and steer it
00:00:30.684 --> 00:00:32.424
This is the secret.
00:00:30.684 --> 00:00:32.704
People are not using this enough.
00:00:33.405 --> 00:00:34.145
OK? What do I mean?
00:00:59.340 --> 00:01:10.079
Hey everyone. This episode we're looking at how to build better design workflows with AI and how that can help you create beautiful, delightful and usable artifacts for your projects.
00:01:10.739 --> 00:01:12.579
We'll show you through three real examples.
00:01:13.840 --> 00:01:21.359
So, if you've tried building front-ends with AI, there's a good chance that you've run into this. Well, at least I've run into this really often.
00:01:22.000 --> 00:01:26.439
You give a coding agent a prompt like, build me a website.
00:01:26.959 --> 00:01:28.500
And technically it can.
00:01:29.000 --> 00:01:39.170
But what often comes back feels super generic. Like you always see the same layouts, the same visual language, the same AI feel.
00:01:40.094 --> 00:01:49.114
So the other day, Brendan and I came across this Hacker News post and it linked to this website and I thought it was really funny.
00:01:49.394 --> 00:01:49.415
I'll
00:01:49.415 --> 00:01:49.614
Yeah,
00:01:49.614 --> 00:01:49.655
share
00:01:49.655 --> 00:01:49.855
this one.
00:01:49.855 --> 00:01:50.334
it.
00:01:51.015 --> 00:01:51.394
Every
00:01:51.415 --> 00:01:51.555
[laughter]
00:01:51.555 --> 00:01:53.454
f-ing website, slop edition.
00:01:54.055 --> 00:01:56.555
And it just it looks terrible, doesn't it?
00:01:59.075 --> 00:02:02.015
we're used to it now.
00:01:59.075 --> 00:02:10.754
It's there's the boxes, there's logos, there's the same kind of language, there's buttons that look the same, there's monospace fonts, which we also have on our website. [laughter] But
00:02:10.754 --> 00:02:10.854
[laughter]
00:02:11.134 --> 00:02:30.180
[UM] but yeah, it it[UM] it's lazy[UH] and I think it makes it's something that a lot of people don't know how to fix. They don't know how to build websites that aren't shit[UM] they don't know
00:02:30.180 --> 00:02:30.240
[sniff]
00:02:30.240 --> 00:02:31.120
how to design with the agents.
00:02:31.120 --> 00:02:31.379
[breath]
00:02:31.379 --> 00:02:32.500
I mean, this is something.
00:02:33.039 --> 00:02:43.979
Let me share a few tweets[UM] this is just tweet- tweets from the last few days. So[UM] OK, look at this[UH] I hate building front-ends with AI.
00:02:44.764 --> 00:02:47.544
Cloud, Codex, and Kime can generate a dashboard in thirty seconds.
00:02:48.025 --> 00:03:00.245
Then I spend the next six hours explaining that the main button is invisible, the table breaks on mobile, every screen looks like the same pile of rounded cards, et cetera This is from this is from the boring marketer.
00:03:00.884 --> 00:03:05.125
As good as AI is at coding, damn, it still sucks at design.
00:03:05.870 --> 00:03:09.349
And then there's a nice response on that.
00:03:10.155 --> 00:03:16.655
I'm not a designer but I understand the struggle. The output is still pretty mediocre. It feels like something new needs to be built here.
00:03:17.461 --> 00:03:24.140
I see it so often as well around me, like so many people are complaining about the design by AI.
00:03:25.145 --> 00:03:30.966
does so much AI-generated design still look so AI-generated, I guess?
00:03:31.045 --> 00:03:32.026
Mm-hmm. Mm-hmm.
00:03:32.145 --> 00:03:37.086
I I know you've run into this too, Brandon, since we talk a lot about it.
00:03:34.366 --> 00:03:39.385
Do you think the models are actually bad at design?
00:03:39.945 --> 00:03:42.165
Or are we just asking them to work in a wrong way?
00:03:43.015 --> 00:03:44.256
We're asking them to work in the wrong way.
00:03:44.415 --> 00:03:45.475
[laughter] So this
00:03:45.575 --> 00:03:45.695
Mm-hmm.
00:03:45.695 --> 00:03:56.256
this this is something that, you know, like everyone I've faced[UH] a lot[UM] especially early on when I started using agents and it bothered me.
00:03:56.756 --> 00:04:29.396
And I I tried lots of different things. I banged my head on the wall for months trying different techniques. I think this was you know back in December December, January, like early winter times[UM] I had a a variety of different workflows over the over the the months[laughter][UM] but you know like everything you know you you can't expect to just one-shot stuff right? I mean this whole podcast exists because one-shotting is not enough right?
00:04:30.016 --> 00:04:30.415
This is the point
00:04:30.415 --> 00:04:30.995
Mm-hmm.
00:04:31.516 --> 00:04:47.281
[UM] when we talk about harness engineering when we talk about all the different techniques and ideas and workflows and tools and steps that you do when you're writing software, like these things actually affect the quality of the output.
00:04:48.115 --> 00:04:48.735
Right? So.
00:04:48.735 --> 00:04:51.136
One-shotting is great for prototyping though, right?
00:04:51.456 --> 00:04:52.235
But once you want
00:04:52.235 --> 00:04:52.336
Mm-hmm.
00:04:52.336 --> 00:04:56.115
to build something more serious, then it often falls short.
00:04:56.865 --> 00:05:14.701
Yeah, like sometimes, well, yes. [laughter] What, when, when you want to build something serious, it falls you can apply these ideas that probably you're familiar with in the context of software engineering to other domains[UM] so like design, right?
00:05:15.475 --> 00:05:30.860
So like if if if we think about it, OK, what's the difference between one-shotting some bad software and the workflows that all of us do to actually produce something that's of some higher quality?
00:05:31.360 --> 00:05:40.776
And I think it's it's just breaking stuff down, thinking about what are the ways that people solve this problem?
00:05:41.901 --> 00:05:43.221
What are the things that they do?
00:05:43.966 --> 00:05:48.745
What responsibilities do different people have when they're working together to write software?
00:05:49.490 --> 00:05:52.810
And that leads to some interesting harness engineering stuff.
00:05:53.555 --> 00:05:54.276
Not this episode.
00:05:55.036 --> 00:06:00.196
But the point is we can do the same thing for design.
00:06:01.076 --> 00:06:01.475
And.
00:06:02.286 --> 00:06:02.386
Well,
00:06:02.386 --> 00:06:02.805
Mm, yeah.
00:06:02.805 --> 00:06:03.446
we can do the same thing
00:06:03.446 --> 00:06:03.526
That makes
00:06:03.526 --> 00:06:03.706
for design.
00:06:03.706 --> 00:06:04.165
sense.
00:06:05.120 --> 00:06:14.261
I think that r- approach approach really makes sense and we a- actually also applied this to our workflow for designing the superlier- superlinear website
00:06:15.036 --> 00:06:22.786
it's real, you know, like our website is something that we're using for this podcast, we care about the podcast, we put effort into it.
00:06:24.430 --> 00:06:25.230
And [UH]
00:06:25.980 --> 00:06:26.701
Yeah, we really wanted
00:06:26.701 --> 00:06:27.100
it's not a toy.
00:06:27.100 --> 00:06:31.221
it to be good. Yeah, we really want it to be good and nice [laughter] And
00:06:31.581 --> 00:06:31.680
Yeah
00:06:31.680 --> 00:06:32.081
if we
00:06:32.081 --> 00:06:32.221
[UH]
00:06:32.221 --> 00:06:43.701
had simply told a coding agent, make superlier- superlinear a great website, w- it probably wouldn't have built a great website. At least, you know, we'd we'd both of us didn't believe that.
00:06:42.240 --> 00:06:43.701
We'd end up with
00:06:43.701 --> 00:06:43.761
Yeah.
00:06:43.761 --> 00:06:51.110
something really generic. But we wanted something that was like unique to us, unique to the show that conveys like our intents Yeah,
00:06:52.011 --> 00:06:52.511
So how do we do
00:06:52.511 --> 00:06:52.512
we
00:06:52.512 --> 00:06:52.651
that
00:06:52.651 --> 00:06:59.891
we were we tried to be really thoughtful, like how does a good process look like to create a new brand identity basically.
00:07:00.951 --> 00:07:05.600
And it's really important to build a good foundation before you jump into
00:07:05.761 --> 00:07:05.901
[UH]
00:07:05.901 --> 00:07:06.440
the design.
00:07:06.940 --> 00:07:10.740
There are actually a lot of upstream decisions before the visual design.
00:07:11.221 --> 00:07:13.661
And when you just one-shot it, you skip all of those.
00:07:14.321 --> 00:07:19.841
And [UM] I've worked with various start-ups and brand agencies to build their brands before.
00:07:20.500 --> 00:07:31.540
And typically before a brand agency starts designing things, there are usually a bunch of ups- upstream questions like [UM] what are we trying to achieve?
00:07:32.060 --> 00:07:33.641
Who exactly are we trying to reach?
00:07:34.440 --> 00:07:39.781
What do we want those people to feel or believe about us? And what do we stand for?
00:07:40.880 --> 00:07:40.920
And
00:07:40.920 --> 00:07:40.940
I
00:07:41.021 --> 00:07:41.221
only
00:07:41.221 --> 00:07:41.380
mean,
00:07:41.401 --> 00:07:47.821
then[UM] comes the question what visual identity expresses all of that.
00:07:48.565 --> 00:07:49.826
For example, a visual
00:07:49.826 --> 00:07:49.846
I
00:07:49.846 --> 00:07:51.826
identity intended to create urgency
00:07:51.826 --> 00:07:51.846
think
00:07:52.105 --> 00:07:52.706
or some
00:07:52.706 --> 00:07:52.725
it's
00:07:52.886 --> 00:07:53.086
fear
00:07:53.086 --> 00:07:53.105
a
00:07:53.466 --> 00:07:55.586
of missing out would look completely
00:07:55.786 --> 00:07:55.786
good
00:07:55.786 --> 00:07:58.266
different from one intended to make something feel
00:07:58.665 --> 00:07:58.706
idea to
00:07:58.805 --> 00:07:59.485
calm and
00:07:59.485 --> 00:07:59.545
do that. I
00:07:59.545 --> 00:07:59.846
easy to
00:07:59.846 --> 00:07:59.865
mean,
00:07:59.946 --> 00:08:00.146
use
00:08:00.146 --> 00:08:00.386
I think it's
00:08:00.466 --> 00:08:01.505
and trustworthy.
00:08:01.745 --> 00:08:01.865
a good idea
00:08:02.165 --> 00:08:03.706
So, yeah, the
00:08:03.706 --> 00:08:03.766
I
00:08:03.766 --> 00:08:15.475
important thing is that the website isn't actually the beginning of the design process. It's actually downstream of all these decisions[UM] and yeah [UM] actually all these
00:08:15.475 --> 00:08:15.576
mean, I
00:08:15.615 --> 00:08:15.755
decisions,
00:08:15.755 --> 00:08:16.175
think it's
00:08:16.175 --> 00:08:19.456
all these steps that I just mentioned, they can be done with AI too.
00:08:19.555 --> 00:08:19.576
a
00:08:20.016 --> 00:08:24.315
And let's let's show you through [UM] the superior
00:08:24.315 --> 00:08:24.336
good
00:08:24.536 --> 00:08:26.156
how we did this for Superlinear's
00:08:26.156 --> 00:08:26.175
idea
00:08:26.435 --> 00:08:26.516
brand
00:08:26.516 --> 00:08:26.536
to
00:08:26.815 --> 00:08:27.115
and website
00:08:27.115 --> 00:08:27.896
do that. I
00:08:28.036 --> 00:08:56.365
because we certainly didn't pay a brand agency to build our brand first, Brennan and I did the signal workshop where we asked ourselves and got [UM] got really clear for ourselves[UH] things like what are we trying to achieve and[UM] who are we trying to reach[UM] and during this process we did use AI to do research or we used AI for the thinking process and [UM] we also thought
00:08:56.365 --> 00:08:56.725
And we had a
00:08:56.725 --> 00:08:56.726
about
00:08:56.726 --> 00:08:57.046
conversation,
00:08:57.046 --> 00:08:57.285
ok-
00:08:58.025 --> 00:08:58.225
right?
00:08:58.225 --> 00:08:59.265
Yeah. Yeah.
00:08:59.405 --> 00:08:59.546
We
00:08:59.546 --> 00:08:59.566
Yeah.
00:08:59.566 --> 00:08:59.765
just we
00:08:59.765 --> 00:08:59.865
It w-
00:08:59.865 --> 00:08:59.905
just
00:08:59.905 --> 00:09:00.966
a lot of conversation.
00:09:01.326 --> 00:09:04.966
yeah, we we just talked to each other, we brainstormed together.
00:09:05.711 --> 00:09:16.811
Yeah. It's just to get these [UM] just to align it amongst us and also define it because[UH] as we said earlier, this all
00:09:16.811 --> 00:09:16.831
Yeah,
00:09:16.971 --> 00:09:16.990
defines
00:09:16.990 --> 00:09:17.730
I think that's a good point.
00:09:17.730 --> 00:09:30.551
the downstream visual identity[UM] so yeah and we we talk through like OK how exactly do we want those people who are going to listen probably to feel or believe about us after listening to the podcast?
00:09:31.291 --> 00:09:44.635
And what do we stand for you know what are [UM] our values and belief because that will decide a visual identity that's unique to you and not just a generic [UH] AI design
00:09:45.296 --> 00:09:45.676
And you know
00:09:45.676 --> 00:09:45.796
[UM]
00:09:45.796 --> 00:09:49.096
for the for the for the listeners[UM]
00:09:49.096 --> 00:09:49.296
Mm-hmm.
00:09:49.296 --> 00:09:50.916
who can't see[UM]
00:09:50.916 --> 00:09:51.416
Oh, right.
00:09:51.655 --> 00:09:51.755
it's
00:09:51.755 --> 00:09:51.796
[laughter]
00:09:51.796 --> 00:09:59.850
probably interesting just to just to say what we ended up on[UM] do you wanna do you wanna just read read out the the the last slide
00:09:59.850 --> 00:10:00.171
Yeah. [UM]
00:10:00.171 --> 00:10:03.910
and this one the [UM] starting from maybe the v- the values.
00:10:06.596 --> 00:10:06.615
Or
00:10:06.615 --> 00:10:06.655
yes.
00:10:06.655 --> 00:10:07.135
you can or
00:10:07.316 --> 00:10:07.395
S-
00:10:07.395 --> 00:10:07.716
you could
00:10:08.515 --> 00:10:08.576
[laughter]
00:10:08.576 --> 00:10:09.336
or anywhere. Go ahead
00:10:10.480 --> 00:10:23.780
Yeah, so for the people who who were not seeing my screen, I was just scrolling through like some of the notes that we made during our workshop[UH] where we just talked to one another and just put down like the notes and things that we believe.
00:10:24.360 --> 00:10:25.620
So [UM] the
00:10:26.140 --> 00:10:26.221
I'm
00:10:26.480 --> 00:10:32.400
the s- for for example this podcast in- is intended for software engineers who are already
00:10:32.441 --> 00:10:32.500
sorry.
00:10:32.500 --> 00:10:32.880
building with
00:10:32.880 --> 00:10:33.020
I'm
00:10:33.020 --> 00:10:33.171
AI
00:10:33.171 --> 00:10:33.201
not
00:10:33.301 --> 00:10:33.341
but
00:10:33.341 --> 00:10:33.421
sure what
00:10:33.480 --> 00:10:34.081
want to stay
00:10:34.260 --> 00:10:34.301
you're
00:10:34.301 --> 00:10:34.421
close
00:10:34.421 --> 00:10:34.461
talking
00:10:34.520 --> 00:10:35.221
to the frontier.
00:10:36.061 --> 00:10:46.081
And [UM] we were thinking that maybe people don't want to wade through all the endless noise and try a bunch of crap before finding the real ideas that actually matter.
00:10:46.801 --> 00:10:58.961
And we wanted to help people to discover[UM] see new angles[UM] trying better approaches so they can, like, build more things than before.
00:10:59.785 --> 00:11:07.285
OK, yeah. And [UM] and here we have our values and belief that defines our identity, like what is unique to us.
00:11:07.806 --> 00:11:21.846
So we believe that while we really want our podcasts to be accessible and easy to understand for our audience[UM] we want we are we are and also want to convey our honesty. We don't have hidden agendas.
00:11:22.346 --> 00:11:31.066
We want our podcasts to be grounded, like grounded in first principles, facts, logic, like not not hype[UM] we are also very optimistic.
00:11:31.645 --> 00:11:34.105
We see possibilities and are excited about them.
00:11:34.806 --> 00:11:51.206
And then personality-wise, we are curious, always looking for new approaches, always trying to understand things, possibility-seeking, practical. We always want to bring ideas back to usefulness and actually actual building and practices to improve the craft.
00:11:51.745 --> 00:11:59.706
And [UH] we also want to be generous. We want to share our knowledge and make difficult ideas and concepts easier to understand[UM]
00:11:59.706 --> 00:12:00.806
And and like
00:12:01.166 --> 00:12:01.206
mhm.
00:12:01.206 --> 00:12:20.471
if you if if you're thinking about this, like this stuff is really sort of abstract and far away from the actual thing that we're delivering which is a podcast. But[UM] I guess before AI I think this stuff was still helpful cuz it helped align people in an organization.
00:12:21.110 --> 00:12:30.711
But now maybe you can start to see like if we give these words to the LLM it will steer the agent in the right direction.
00:12:31.610 --> 00:12:31.890
Anyway,
00:12:31.890 --> 00:12:31.931
Yes.
00:12:31.931 --> 00:12:33.510
we're we're we're about to see more of that but
00:12:34.270 --> 00:12:34.750
Yeah, no no,
00:12:34.750 --> 00:12:34.951
go ahead
00:12:34.951 --> 00:13:18.250
exactly. So we gave all this what I just walked [UM] you know, all this about our goals, our who it's intended for, the our our identity, we gave all this context to actually I gave it to just CBT[UM] and then we asked [UH] so it was like above I I built this context above and then the prompt that I gave JetTPT is OK now give me different suggestions for the visual brand[UM] and I asked for guidelines a lot of typos by the way but I asked [laughter] it for guidelines for the visual brand, the style, the feel, the vibe, the color palette[UM] guidelines for visual assets that we may create down down the line
00:13:18.510 --> 00:13:18.610
Oh.
00:13:18.850 --> 00:13:19.250
[UM] I
00:13:19.250 --> 00:13:19.370
[breath]
00:13:19.410 --> 00:13:23.730
also asked about metaphors, typography[UM] and all of that.
00:13:24.291 --> 00:13:29.471
And then[UM] AI gave us different five different individual brand directions.
00:13:30.941 --> 00:13:51.995
before we knew which one wanted[UM] we we we tried we tried a couple I think[UM] we've we we've kind of dug back through our history[UM] so I I I think I think at this point Christine[UM] I ended up with some copy of this result from
00:13:51.995 --> 00:13:52.255
Yes,
00:13:52.255 --> 00:13:52.475
from your
00:13:52.475 --> 00:13:52.615
exactly.
00:13:52.615 --> 00:13:53.196
chat GPT
00:13:53.990 --> 00:13:54.091
This
00:13:54.091 --> 00:13:54.191
and
00:13:54.191 --> 00:13:58.831
is where actually you you took [UM] this part[UH] where we were like,
00:13:58.831 --> 00:13:58.971
Mm-hmm.
00:13:58.971 --> 00:14:04.530
OK, we like field notes from the frontier, we like this direction, and then basically you took you took it from here.
00:14:04.551 --> 00:14:05.971
I think you fed it to Claude?
00:14:06.533 --> 00:14:10.378
OK, so at this point I like to loop in Claude.
00:14:11.227 --> 00:14:23.577
So so here I've taken the output from Christine's chat GPT and I said, can you make the design doc again but with these two instead?
00:14:21.317 --> 00:14:31.383
Be very detailed[UH] and then I I pasted the Signal Workshop vibe and Field Notes from the Frontier. What what Christine said.
00:14:32.298 --> 00:14:36.793
Why is that? I think Claude adds more human language
00:14:36.793 --> 00:14:36.972
Yeah.
00:14:36.972 --> 00:14:45.732
that I think is more descriptive for for visual things[UM] so so Claude then produces a document with more detailed basically a more detailed prompt.
00:14:46.498 --> 00:14:59.427
But the real interesting thing the real interesting part of this workflow the key to designing good front-end applications using AI tools is using Chats GPT image.
00:15:04.048 --> 00:15:04.148
Yeah.
00:15:04.148 --> 00:15:12.793
I pasted the signal workshop direction from that doc[UM] it turns out we didn't like this one, so we tried another one.
00:15:13.548 --> 00:15:14.087
But bear with me.
00:15:14.852 --> 00:15:17.513
So all this long thing was generated from Cloud.
00:15:18.052 --> 00:15:20.092
But at the very bottom I said, draw this website homepage.
00:15:21.072 --> 00:15:23.033
You can also say draw this with the Create Image tool.
00:15:23.812 --> 00:15:29.763
And what you get is you get a website that actually looks like a website. It doesn't look like garbage.
00:15:30.653 --> 00:15:30.812
You know
00:15:31.072 --> 00:15:31.352
[laughter]
00:15:32.097 --> 00:15:38.798
[UM] you you get garbage if you just ask your your coding agent to build you a website.
00:15:39.357 --> 00:15:44.513
Even even using that nice prompt from Claude, you you get garbage.
00:15:42.602 --> 00:15:45.283
But you don't get garbage with the Create Image tool.
00:15:46.028 --> 00:15:49.732
Anyway, it turns out this particular mock-up is garbage-like.
00:15:50.232 --> 00:15:50.472
So.
00:15:50.793 --> 00:15:50.812
[laughter]
00:15:50.812 --> 00:15:53.913
But it's decent, right?
00:15:50.812 --> 00:16:01.332
It's decent. And [UM][laughter] and at least, you know [UH] we have enough experience to know that if you keep trying this with more ideas, then sometimes you get something good.
00:16:02.077 --> 00:16:05.477
For example, here is the field notes from the frontier.
00:16:06.057 --> 00:16:08.562
And look, it's something kinda good.
00:16:09.307 --> 00:16:10.567
Christine and I thought it was kinda good.
00:16:11.347 --> 00:16:21.307
I remember when I saw this and I thought, oh my gosh, really? You know, I I really really like this one.
00:16:22.148 --> 00:16:22.207
Yeah.
00:16:22.207 --> 00:16:32.888
I think the important thing is that we could react to these design directions before the coding agent even wrote a line of front-end code.
00:16:33.368 --> 00:16:41.248
Right? Like, we we saw the first one and w- and before we put the coding agent to work we were we were already like we don't we don't like this. This is this one
00:16:41.248 --> 00:16:41.347
And
00:16:41.347 --> 00:16:41.727
is out.
00:16:42.347 --> 00:16:44.467
And th- and then we saw this one and we were like this is it.
00:16:45.552 --> 00:16:50.692
I there there's something about like the the latest like image gen tool by ChachiBT where
00:16:50.692 --> 00:16:50.832
[laughter]
00:16:50.932 --> 00:16:55.357
it's just really good at imagining the thing that you want.
00:16:56.057 --> 00:17:11.307
It doesn't have to doesn't have to understand HTML or figure out how to write the HTML and CSS to make it look like this. It's just kind of I don't know. It's it's magical. It's amazing[UM] so so we we we liked this direction but we didn't we didn't like it exactly
00:17:11.307 --> 00:17:11.347
[laughter]
00:17:11.667 --> 00:17:11.928
as is.
00:17:12.708 --> 00:17:14.682
And so we said add
00:17:14.682 --> 00:17:14.742
[laughter]
00:17:14.762 --> 00:17:17.623
more modern elements like a terminal. Make it more minimalist.
00:17:18.798 --> 00:17:19.698
And look, it's a little better.
00:17:20.458 --> 00:17:25.353
You know? It feels a little better[UH] and then we gave it more feedback.
00:17:26.073 --> 00:17:30.732
And if you're watching this[UM] you'll see something that kinda looks like our website
00:17:31.732 --> 00:17:32.113
[laughter]
00:17:32.113 --> 00:17:47.032
[UH] and and then and then we just gave we just gave some direction to update the copy and you literally get like our exact website out[UM] we we we removed one of the components here but otherwise this is almost exactly our website.
00:17:47.692 --> 00:17:48.673
I mean, look at it.
00:17:49.417 --> 00:17:49.798
It's so
00:17:49.798 --> 00:17:49.837
Here's.
00:17:49.837 --> 00:17:51.617
cool. I really I really like it.
00:17:52.317 --> 00:17:52.458
Yeah,
00:17:52.458 --> 00:17:52.657
It's
00:17:52.657 --> 00:17:52.698
and look
00:17:52.698 --> 00:17:52.837
[UM]
00:17:52.837 --> 00:17:54.238
here's here's [UH]
00:17:54.258 --> 00:17:54.278
Yeah.
00:17:54.278 --> 00:17:55.897
here's our website just for comparison.
00:17:56.728 --> 00:17:59.242
It looks the same, right[UM]
00:17:59.482 --> 00:17:59.863
Yeah.
00:17:59.942 --> 00:18:32.038
but yeah, yeah I mean we're we're happy with this, right? Like I I I mean just to let's just brag about our website. I mean look you can hover over stuff and there's blue scribbles, there's like there's kind of this friendly blue scribble that reminds you of writing in a notebook in school, there's a highlighter effect[UM] the the fonts are kind of interesting. There's some of this monospace thing that I guess we should remove cuz it's kind of sloppy but you know it's just it feels polished but also approachable.
00:18:33.073 --> 00:18:33.313
Right
00:18:34.242 --> 00:18:34.942
I agree.
00:18:35.563 --> 00:18:51.948
I feel like because we separated like deciding what it should look like from implementing it in code, that gave us like a a much higher bandwidth[UM] or a much higher bandwidth way to steer the design.
00:18:52.827 --> 00:19:06.532
And [UM] yeah, that way we could also steer [UH] the coding agent in a way where we we could steer it in a direction[UM] to a direction[UH] where we think the website should look like.
00:19:07.053 --> 00:19:20.752
And [UH] in this case we used ChetTPT image generation for it[UM] I actually tried giving this prompt to other AI tools too but the results are not looking as nice[UM]
00:19:20.752 --> 00:19:21.393
[lipsmack]
00:19:21.913 --> 00:19:33.942
Yeah and with yeah and with this direction like the ChetTPT image the the coding agent produced such a better design, a great a website that looks great and also works great.
00:19:35.123 --> 00:19:58.782
Yeah, I think I think it's really it's not only the fast feedback. I mean that's that's nice. That's like a nice bonus because it takes a little bit longer to build a web page but but even you know you can ask Fable like, oh give me a make you know prototype this for me and it'll it'll be almost the same time like in my take a minute and a half in the same way it takes a minute and a half to do a create image call from Chatsy-Petey sometimes.
00:19:59.603 --> 00:20:14.772
But there's something about the level of fidelity, the level of detail that you can get in one shot that it seems like unreachable with other design tools or with other tools at all with with coding agents directly with some of these other products.
00:20:14.772 --> 00:20:15.232
Right.
00:20:15.752 --> 00:20:18.073
I mean we won't shame the other products. They're just
00:20:18.073 --> 00:20:18.373
[laughter] So
00:20:18.373 --> 00:20:21.712
like nothing and trust me I mean we've tried everything.
00:20:22.212 --> 00:20:23.633
Every time there's a new tool we're trying it.
00:20:24.113 --> 00:20:28.532
The best the best thing you can do is asking ChachiBT to draw it for you
00:20:29.387 --> 00:20:41.708
you really think it's because jetty-beaty's able to like express maybe like has a broader range to express things because it's not taking into a- account like how to code it, how to create it.
00:20:42.452 --> 00:21:17.837
Yeah, there's something about you can ex- ChachiBT can explore or the the models. The models can like do s- things that are more advanced in fewer tokens, I guess? Like the the reasoning that the model is doing in image space can get something that's way more detailed with I guess the same amount of of tokens[UH] compared to[UM] compared to other models trying to draw it[laughter] other image models or just[UM] prototyping it as a website.
00:21:18.417 --> 00:21:18.817
Mm-hmm.
00:21:19.597 --> 00:21:26.077
OK. So we basically were off-loaded, like, deciding what the design should be to a much better tool
00:21:26.698 --> 00:21:26.958
Mm-hmm.
00:21:27.097 --> 00:21:27.438
[UM]
00:21:28.258 --> 00:21:28.397
Yeah.
00:21:28.798 --> 00:21:28.897
and
00:21:28.897 --> 00:21:29.178
And and.
00:21:29.178 --> 00:21:32.397
and after we have that we give it to the coding agent. Mm-hmm.
00:21:32.397 --> 00:21:47.202
Yeah, and I I I think it's important to note too, I guess it wasn't just to be really clear, I jumped from showing you the image to hey the website's done[UM] and obviously there's a step in between which is asking your coding agent to build it.
00:21:48.053 --> 00:21:57.548
In this case for this website[UM] we tried a few things because it was right when Fable came out is when we were building this website.
00:21:58.208 --> 00:21:58.209
And
00:21:58.209 --> 00:21:58.428
Mm-hmm.
00:21:58.428 --> 00:22:19.778
before Fable I had other tools in my pipeline to take the image and turn it into something that [UM] well basically there there were other steps before it got to the coding agent to make something good but I've found now Fable is so good that you can give it give it an image and it'll give you the website and doing anything in between just slows it down.
00:22:20.577 --> 00:22:24.917
So so so maybe we should just like summarize this workflow really quickly.
00:22:25.712 --> 00:22:26.032
What
00:22:26.252 --> 00:22:31.093
And and it's fractal too, which I think is cool, right? So[UH]
00:22:31.093 --> 00:22:31.252
do
00:22:31.252 --> 00:22:31.292
so
00:22:31.292 --> 00:22:31.432
you mean
00:22:31.432 --> 00:22:31.512
what do
00:22:31.512 --> 00:22:31.593
with
00:22:31.593 --> 00:22:31.673
I [UM]
00:22:31.673 --> 00:22:32.373
fractal?
00:22:33.252 --> 00:22:35.593
I mean there's like a workflow inside of a workflow.
00:22:36.472 --> 00:22:38.932
Because in the beginning we talked about a brand workflow.
00:22:39.688 --> 00:22:40.028
Mm-hmm.
00:22:40.028 --> 00:23:05.768
So [UH] so Christine is very familiar with these these brand exercises and so she understood OK instead of just one-shotting like with with an LL give me my give me my values for example[UM] we broke that down into a bunch of steps and the human was in the loop, a few humans were in the loop, Christine and I worked together and
00:23:05.768 --> 00:23:05.907
Mm-hmm.
00:23:05.907 --> 00:23:06.768
we got something
00:23:06.768 --> 00:23:07.008
Mm.
00:23:07.788 --> 00:23:10.548
I think really strong out of that because we spent more time breaking
00:23:10.607 --> 00:23:10.627
That's
00:23:10.667 --> 00:23:10.847
it down.
00:23:10.847 --> 00:23:10.867
right.
00:23:11.728 --> 00:23:17.182
And that that whole process was just one step of this design workflow,
00:23:17.682 --> 00:23:17.843
Yeah. That's
00:23:17.843 --> 00:23:18.163
which again,
00:23:18.163 --> 00:23:18.323
right. That's right.
00:23:18.502 --> 00:23:20.123
we didn't just try and one-shot
00:23:20.242 --> 00:23:20.643
Uh-huh. Mm-hmm.
00:23:20.242 --> 00:23:20.643
Mm-hmm.
00:23:20.863 --> 00:23:21.022
with an
00:23:21.022 --> 00:23:21.023
That's
00:23:21.023 --> 00:23:21.403
LM.
00:23:21.722 --> 00:23:21.742
right.
00:23:22.063 --> 00:23:22.363
First
00:23:22.363 --> 00:23:22.383
Mm-hmm.
00:23:22.383 --> 00:23:23.502
we did this brand exercise,
00:23:23.502 --> 00:23:23.843
Mm-hmm.
00:23:24.143 --> 00:23:25.282
then we
00:23:25.623 --> 00:23:25.962
That's right.
00:23:26.083 --> 00:23:26.182
turned
00:23:26.182 --> 00:23:26.272
That's right.
00:23:26.303 --> 00:23:26.323
that
00:23:26.323 --> 00:23:26.363
That's right.
00:23:26.462 --> 00:23:26.482
into
00:23:26.482 --> 00:23:28.768
That's right. That's We're gonna get that sorted out
00:23:28.887 --> 00:23:42.673
[UM] we we we s- well in this case we fed that to Chachi BT, Christine talked to it a few times and got something out around some design directions, we took that and flushed it out and put and then we took those and drew them with Chatsy-BT image.
00:23:43.272 --> 00:23:46.032
And from that we can give that to a coding agent and get the website.
00:23:46.965 --> 00:23:59.796
I really love this example, but there's also another example that I also really, really like our own custom podcast editor and it has this mini-map that lets you navigate through a
00:23:59.796 --> 00:23:59.855
[throatclearing]
00:23:59.855 --> 00:24:00.756
long episode.
00:24:01.441 --> 00:24:05.480
In this case I had an idea for something that I wasn't sure could work but it might.
00:24:06.230 --> 00:24:06.911
So, OK.
00:24:08.090 --> 00:24:09.830
So yeah, so let me let me let me set the stage here
00:24:10.111 --> 00:24:10.431
Mm-hmm.
00:24:10.730 --> 00:24:21.605
[UM] so like like Christine said[UH] I've been working on a podcast editor to edit our podcast because editing sucks.
00:24:22.246 --> 00:24:22.365
[laughter]
00:24:22.546 --> 00:24:22.806
[laughter]
00:24:22.806 --> 00:24:23.625
It's very frustrating.
00:24:24.105 --> 00:24:26.266
So[UM][UH]
00:24:26.425 --> 00:24:26.506
And
00:24:26.506 --> 00:24:26.566
and
00:24:26.566 --> 00:24:27.965
it takes a lot of time. [laughter]
00:24:27.965 --> 00:24:30.405
it takes so much time.
00:24:27.965 --> 00:24:32.286
It's so much time. That is worth building software to help you do it faster.
00:24:32.997 --> 00:24:43.856
guess like the way that we are editing the podcast is by looking at the looking at the transcripts. This is like a modern way that people are editing these days.
00:24:44.685 --> 00:24:46.026
But it's very easy to get lost
00:24:46.921 --> 00:24:47.101
Mm-hmm.
00:24:47.101 --> 00:25:00.955
where you know like our our raw footage is over an hour usually sometimes much longer than that and and I thought, OK, I'm constantly lost.
00:25:01.715 --> 00:25:12.895
How can I understand where I am in the context of the episode, number one, and number two, easily jump to some other part of where I want to go?
00:25:13.701 --> 00:25:13.921
OK?
00:25:14.695 --> 00:25:16.635
And so that th- this is the problem.
00:25:17.536 --> 00:25:17.915
And
00:25:18.730 --> 00:25:18.750
Mm.
00:25:19.467 --> 00:25:25.287
An analogist problem came to my head[UH] that has been solved by text editors.
00:25:25.826 --> 00:25:28.067
OK? So[UM] I'm an engineer.
00:25:28.707 --> 00:25:35.047
Sometimes you open up a source code file that's like ten thousand lines long and it's hard to know where you are in it.
00:25:35.646 --> 00:25:35.787
Mm-hmm. Mm. Mm-hmm
00:25:36.247 --> 00:25:42.106
And the[UH] something that originally was popularized by the Sublime text editor a long
00:25:42.126 --> 00:25:42.127
[UM]
00:25:42.127 --> 00:25:43.886
time ago is showing a mini-map.
00:25:43.967 --> 00:25:44.186
[breath]
00:25:44.932 --> 00:26:04.596
So showing[UM] on the side a silhouette, a shape of the code[UH] where you it's it's too zoomed out to actually see what the text says, but you can see the you know the shape of it, like the tab, if there's a function[UM] you know how how indented it is. And you can learn the shape of the file if you're in it enough.
00:26:05.336 --> 00:26:09.457
And that can give you a sense, well one you can see where you are and then you can see where you wanna jump to easily.
00:26:10.251 --> 00:26:10.652
Mm-hmm.
00:26:10.652 --> 00:26:10.781
And so
00:26:10.781 --> 00:26:10.852
[breath]
00:26:10.852 --> 00:26:24.442
so that this this was the this was the idea and and and this is where[UM] I started another design workflow that that you know Christine and I think is interesting.
00:26:25.734 --> 00:26:30.934
So actually I'm gonna share I had one of my agents generate
00:26:31.890 --> 00:26:32.089
[breath]
00:26:32.150 --> 00:26:57.904
a[UH] recreation of the conversation I had with the agents to solve this or or to to start off this kind of design pass so I can I can kind of talk over it. So I've I've I've shared my screen[UM] and I'm just gonna I'm just gonna like skim and and talk around it. So so it starts with[UM] you know what I was doing at the time which was prototyping the the new version of this editor.
00:26:58.684 --> 00:27:03.569
And then I said in a in a side-chat[UM] can you give me a
00:27:03.569 --> 00:27:03.589
Mm-hmm.
00:27:03.589 --> 00:27:04.450
prompt for my
00:27:04.450 --> 00:27:04.569
Mm.
00:27:04.569 --> 00:27:09.950
design agent to design a beautiful mini-map that we can put on the right? So I I wanted a mini-map on the right.
00:27:10.549 --> 00:27:11.230
And I gave it some more context.
00:27:11.230 --> 00:27:11.890
Mm-hmm [breath]
00:27:12.634 --> 00:27:19.539
I said ultimately we want as much info in there that we can as long as we can show it in a beautiful way.
00:27:20.119 --> 00:27:29.532
Let's tell the designer everything I started with this and I then used ChachiPT image because that's what you always need to do when you're designing.
00:27:30.212 --> 00:27:30.492
And this
00:27:30.492 --> 00:27:30.613
Cool.
00:27:30.613 --> 00:27:30.833
is what
00:27:30.833 --> 00:27:31.873
So so AI was
00:27:31.893 --> 00:27:31.894
[UM]
00:27:31.894 --> 00:27:31.952
not
00:27:31.952 --> 00:27:32.053
[UM]
00:27:32.252 --> 00:27:34.992
just rendering an idea that you already had.
00:27:35.813 --> 00:27:41.553
It was actually participating in a design process with you. So it was AI was a design partner.
00:27:42.317 --> 00:27:42.758
Is that right?
00:27:43.538 --> 00:27:47.778
Yes. AI was a design partner in designing this one particular component
00:27:48.633 --> 00:27:48.634
Mm-hmm.
00:27:48.634 --> 00:27:50.133
[UM] of of
00:27:50.133 --> 00:27:51.012
It's almost like what would
00:27:51.032 --> 00:27:51.034
of
00:27:51.034 --> 00:27:51.212
happen
00:27:51.212 --> 00:27:51.512
this website.
00:27:51.512 --> 00:27:51.803
in a in
00:27:51.803 --> 00:27:51.992
Mm-hmm
00:27:52.212 --> 00:28:04.553
a product team, right? Like someone identifies some user problem and then the team explores some different approaches and then a designer brings something back and everyone reacts and then it gets refined.
00:28:05.298 --> 00:28:05.577
Exactly.
00:28:06.038 --> 00:28:07.337
Exactly. This is the.
00:28:08.127 --> 00:28:20.363
This empowers one person. It empowers the the builder to work with I guess to to be to start a product conversation.
00:28:20.942 --> 00:28:27.423
To start a product conversation with another product person, with a designer and with an engineer, essentially.
00:28:27.423 --> 00:28:27.782
Mm-hmm.
00:28:28.123 --> 00:28:37.462
And so that this first conversation is sort of I guess you could say with a with another product person, cuz we're riffing and we're coming up with a brief, a design brief
00:28:37.462 --> 00:28:37.762
Yeah.
00:28:38.282 --> 00:28:39.262
that we would give a designer.
00:28:39.982 --> 00:28:40.883
And who's the designer?
00:28:41.633 --> 00:28:43.532
Chat GPT. [laughter] Draw image.
00:28:43.532 --> 00:28:43.692
[laughter]
00:28:43.893 --> 00:28:48.873
Draw image is our designer[UM] and then and then eventually you give it to an engineer to build it.
00:28:47.732 --> 00:28:48.873
Right?
00:28:49.472 --> 00:28:52.053
So[UM] Yeah.
00:28:52.053 --> 00:28:54.553
Yeah, this is cool.
00:28:52.053 --> 00:28:56.053
I've not I've not used I've not done this before.
00:28:57.093 --> 00:29:15.262
And this is this is different, right? This isn't saying[breath] in our last example we had a particular[UM] we had a particular design in mind from Claude. You know, we had a it's like, hey, draw this particular thing for me. This this time we are giving a design brief.
00:29:16.042 --> 00:29:16.282
OK?
00:29:16.803 --> 00:29:17.282
We're designing
00:29:17.282 --> 00:29:17.522
Mm-hmm.
00:29:17.532 --> 00:29:23.542
one component[UM] we want[UH] let me scroll in here.
00:29:24.307 --> 00:29:25.647
Well anyway this is so long.
00:29:26.432 --> 00:29:32.597
Well anyway [UH] I'm not gonna I'm not gonna dig through the prompt. But the point is a a design brief can give
00:29:32.597 --> 00:29:32.617
Wow.
00:29:32.617 --> 00:29:33.077
you.
00:29:34.732 --> 00:29:34.952
Yeah.
00:29:35.813 --> 00:29:37.712
How cool is this? OK, let me let me zoom in.
00:29:37.712 --> 00:29:43.593
Wow. It is this looks so cool. I've not seen it in our video editor yet.
00:29:40.992 --> 00:29:45.432
[laughter] I think you've you've s- you've seen it.
00:29:43.712 --> 00:29:45.432
I've not seen it yet.
00:29:45.893 --> 00:29:47.593
But this is this looks so cool.
00:29:48.432 --> 00:29:48.873
I would.
00:29:49.472 --> 00:29:49.813
Yeah.
00:29:50.667 --> 00:29:53.127
Well, this is the bad version, so it's not that cool.
00:29:53.127 --> 00:29:53.428
Is it?
00:29:53.428 --> 00:29:53.887
But it's good.
00:29:53.907 --> 00:29:54.208
It looks
00:29:54.208 --> 00:29:54.688
I mean it's so
00:29:54.807 --> 00:29:56.288
it does look cool.
00:29:54.807 --> 00:29:56.288
[laughter] It
00:29:56.367 --> 00:29:56.667
so
00:29:56.667 --> 00:29:56.948
does look
00:29:56.948 --> 00:29:56.968
I
00:29:57.028 --> 00:29:57.708
cool to me.
00:29:58.587 --> 00:30:10.272
mean look look so [UH] the designer iterated on a few different ideas, right? It said, OK, what if we had two different spines of conversation[UM]
00:30:10.272 --> 00:30:10.893
Mm-hmm.
00:30:11.032 --> 00:30:23.607
what if we were using edges[UH] what if we just saw the edits and then and then it chose a particular direction by combining different ideas that it got in the exploration.
00:30:24.107 --> 00:30:48.863
So the reasoning what we're what we're seeing here is a visualization of the reasoning trace of the agent reflected in the drawing that we got back, which I think is like crazy[UM] but and and then as a human as the as acting as the product person I guess you could say I asked for something else.
00:30:50.262 --> 00:30:59.238
Right[UM] I guess this is where I said hey the waveform is not useful because the waveform shape when you zoom out just looks like noise.
00:31:00.147 --> 00:31:21.907
So this was like some direction I gave to the the designer[UM] and and I said you know there are other things that can that can help with the visual shape maybe like the scene assignments chapters other intents that's what we're calling like cuts or mutes or[UM] different kinds of[UH] modifications to the to the the the feed.
00:31:22.923 --> 00:31:22.962
Oh
00:31:23.222 --> 00:31:25.682
And and then I asked for another design brief.
00:31:26.428 --> 00:31:26.948
And
00:31:28.573 --> 00:31:35.623
wait, it didn't show that? I thought when I looked at it I thought I saw those [UM] symbols and I thought they represented those different
00:31:35.623 --> 00:31:35.682
the
00:31:35.682 --> 00:31:35.742
moments.
00:31:35.742 --> 00:31:40.893
symbols were in there[UM] but but now it's way better.
00:31:41.452 --> 00:31:41.732
So.
00:31:43.073 --> 00:31:44.093
Mm.
00:31:44.847 --> 00:31:45.248
So now.
00:31:45.248 --> 00:31:46.788
Oh yeah, this is even better.
00:31:47.387 --> 00:31:47.567
Yeah.
00:31:48.653 --> 00:31:53.853
So now there's again there's these different concepts. So the shrunk manuscript, that's interesting.
00:31:54.617 --> 00:32:01.397
Cuz that that has more of a shape. There's like the turn rhythm, so seeing who's talking left Brandon, right Christine.
00:32:02.357 --> 00:32:19.198
Or if we're talking over each other there's it's on both[UM] [laughter] then there's like maybe [UH] the different scenes or the chapters[UM] and this kind of final refined direction combines these things in a nice way, I thought. So[UM]
00:32:20.137 --> 00:32:20.417
I would
00:32:20.417 --> 00:32:20.438
you
00:32:20.438 --> 00:32:20.538
love
00:32:20.538 --> 00:32:20.857
can see the
00:32:20.857 --> 00:32:20.858
to
00:32:20.858 --> 00:32:20.978
scenes,
00:32:20.978 --> 00:32:23.238
see the actual graphs for our
00:32:23.238 --> 00:32:23.239
you
00:32:23.239 --> 00:32:23.317
episodes.
00:32:23.317 --> 00:32:28.698
can see the turns, yeah[UH] well, you can't see it yet because I'm not done building
00:32:28.798 --> 00:32:28.837
[laughter]
00:32:28.837 --> 00:32:29.557
it, but [laughter]
00:32:29.698 --> 00:32:29.897
But
00:32:30.817 --> 00:32:31.097
[UM]
00:32:31.798 --> 00:32:31.998
yeah,
00:32:31.998 --> 00:32:32.157
[UH]
00:32:32.157 --> 00:32:40.778
I I feel like I'm a very [UH] visual learner and also like when I see something f- when I try to understand something as soon as I see something visually it just helps a lot.
00:32:41.397 --> 00:32:48.377
And this would I think this this helps a lot with[UM] just seeing at a glance different things about how we did the podcast.
00:32:49.097 --> 00:33:13.837
Yeah, I I think I mean I think this solves the problem because just like source code, seeing a reflection of the transcript of who's saying what, well not seeing exactly what we're saying but seeing like, oh this person talked for a long time in a row and you know Christine interrupted right here when Brandon was monologuing. That is reflected in the silhouette of the episode, which is exactly what I want. And so I
00:33:13.837 --> 00:33:14.258
Yeah.
00:33:15.002 --> 00:33:25.883
[UM] I'm pretty sure this is gonna be very helpful once it's once it's done being built. It's you know it's in it's it's being built in the background. It needs a maybe another day.
00:33:26.603 --> 00:33:27.083
But [UH]
00:33:27.163 --> 00:33:27.403
It's
00:33:27.603 --> 00:33:27.604
yeah.
00:33:27.604 --> 00:33:38.022
it's it's so cool that the design brief turned that like vaguish idea into something concrete, like and also con- concrete enough to explore it visually.
00:33:39.275 --> 00:33:45.375
And once you had a design that you liked then then it it just became an implementation problem for the coding agent
00:33:46.234 --> 00:33:46.634
Exactly.
00:33:46.634 --> 00:33:46.734
[UM]
00:33:46.734 --> 00:34:08.105
And and and like we said, you can give you can give images to Fable and[UM] you know, you need to set up your feedback loops, you need to do proper harness engineering, we've talked about that a a million times[UM] and if you do that, you'll eventually get something that looks and feels exactly like the you know exactly like the screenshot wants
00:34:09.204 --> 00:34:15.304
Yeah. I I had the[UM] I had the same experience building a a custom three-D model for a game.
00:34:16.139 --> 00:34:21.239
Maybe maybe I can[UH] yeah maybe I can show that too[UM] as a real example.
00:34:21.820 --> 00:34:21.900
Yeah
00:34:21.900 --> 00:34:27.019
So, yeah, I'm building a game and I ran into basically the same problem as you.
00:34:27.539 --> 00:34:35.539
So the main character of my game is a chicken[laughter] and because you're staring at this character the entire time when you play [UM] I really wanted to get that right.
00:34:36.119 --> 00:34:41.760
So, my first attempt was basically, hey coding agent, make me this chicken.
00:34:40.559 --> 00:34:49.280
[laughter] And it did, but it was just not the chicken that I wanted. It was, yeah, it
00:34:49.280 --> 00:34:49.360
m-
00:34:49.360 --> 00:34:50.400
was, OK, let me just show you.
00:34:50.400 --> 00:34:50.519
show
00:34:50.519 --> 00:34:50.599
[laughter]
00:34:50.599 --> 00:34:50.920
everyone.
00:34:50.920 --> 00:34:51.039
My
00:34:52.699 --> 00:34:52.840
[laughter]
00:34:52.920 --> 00:34:53.920
ugly chicken.
00:34:54.480 --> 00:34:56.900
I actually did show it to you, Brendan[UM]
00:34:56.900 --> 00:34:57.260
Oh yeah.
00:34:58.079 --> 00:34:58.659
It's really ugly.
00:34:58.659 --> 00:34:58.960
Yeah.
00:34:59.679 --> 00:34:59.719
It's
00:34:59.719 --> 00:34:59.820
[laughter]
00:34:59.820 --> 00:35:00.840
so ugly. Let me
00:35:00.840 --> 00:35:00.880
[UH]
00:35:00.880 --> 00:35:02.539
[laughter] I'm excited to see it again.
00:35:03.500 --> 00:35:04.360
let's see.
00:35:04.820 --> 00:35:05.440
Oh, here it is.
00:35:06.519 --> 00:35:07.019
Sure.
00:35:07.780 --> 00:35:08.460
Yeah, it's,
00:35:10.900 --> 00:35:11.000
So
00:35:11.000 --> 00:35:11.099
I was
00:35:11.099 --> 00:35:11.159
bad.
00:35:11.159 --> 00:35:11.679
like, oh
00:35:11.699 --> 00:35:11.701
It's
00:35:11.701 --> 00:35:11.840
my
00:35:11.840 --> 00:35:11.880
so
00:35:11.880 --> 00:35:11.980
god.
00:35:11.980 --> 00:35:12.360
bad.
00:35:12.739 --> 00:35:13.500
Yeah, this
00:35:13.500 --> 00:35:13.559
It
00:35:13.559 --> 00:35:13.639
is
00:35:13.639 --> 00:35:13.679
I
00:35:13.679 --> 00:35:13.860
like not
00:35:13.860 --> 00:35:14.159
I mean,
00:35:14.159 --> 00:35:14.739
good.
00:35:14.800 --> 00:35:15.179
look at it.
00:35:15.179 --> 00:35:15.300
Mm-hmm.
00:35:15.300 --> 00:35:24.679
It's it's it's like the equivalent of that that website we showed earlier. It's like it's like the clearly AI slop feel but but in the three-D model.
00:35:25.835 --> 00:35:26.135
Yeah.
00:35:26.914 --> 00:35:34.454
Yeah, so so[UM] Yeah, I think the reason why this w- this turned out so bad is[UM] this game, I was building this game for Roblox,
00:35:34.454 --> 00:35:34.514
[laughter]
00:35:35.215 --> 00:35:47.114
so the coding agent probably tried to use the building blocks available in Roblox, which are very limited[UM] to construct that three-D model of the chicken character and it just didn't work[UM] yeah.
00:35:47.835 --> 00:35:52.275
So so I tried m- to prompt my way out of it and that also did not work.
00:35:52.755 --> 00:35:54.614
And then I took a different approach.
00:35:55.355 --> 00:36:04.974
I I looked at how[UM] a good three-D model[UH] or a good three-D three-D model [UH] or a good three-D character would actually get made.
00:36:05.514 --> 00:36:11.675
And then I reconstructed the production workflow that you'd normally use to create a game character properly.
00:36:12.635 --> 00:36:34.994
So basically [UM] you start with a goal and audience, you know, just just like our whole [laughter] our whole [UM] workflow when we decided on a brand[UH] strategy or brand identity for[UM] Superlinear's podcast. For basically when you're building a game it's it's similar. You have a goal, you have to think about your audience. So for me it was teenagers.
00:36:35.594 --> 00:36:44.594
And that determines the style. Like if it's for kids you might want it to be more cartoonish. If it's for adults you might want it to be[UH] have a more realistic style.
00:36:45.434 --> 00:36:54.855
And then [UM] I actually did use ChattyPT as well to create the character direction[UM] and then
00:36:54.855 --> 00:36:54.994
It's
00:36:54.994 --> 00:36:55.014
I
00:36:55.014 --> 00:36:55.315
always
00:36:55.335 --> 00:36:55.335
asked
00:36:55.335 --> 00:36:55.594
Chachi
00:36:55.594 --> 00:36:55.614
ChattyP-
00:36:55.614 --> 00:36:57.094
PT image. That's the secret.
00:36:57.094 --> 00:36:57.114
[lipsmack]
00:36:58.175 --> 00:36:58.394
That's the
00:36:58.394 --> 00:36:58.454
Yeah!
00:36:58.454 --> 00:36:59.494
secret design tool.
00:37:00.460 --> 00:37:13.880
So I I actually used ChattyPT to create like this[UH] character direction and [UM] and that now I have the proper reference material. So this is a turn-around sheet[UM] and then
00:37:13.880 --> 00:37:14.440
Now it looks good.
00:37:14.440 --> 00:37:31.224
you c- Yeah, well [laughter] the one that Chatty-BT creates is good. And now I need to turn it into an actual three-D model. So instead of asking[UH] the coding agent to build it, I used[UM] another AI tool called Meshi.
00:37:32.119 --> 00:37:32.559
So here it is.
00:37:33.260 --> 00:37:45.019
And in Meshi basically you can like [UM] paste or drag and drop the image that you created using Chatty-BT, like the turn-around sheet with the different like front view, side view, back view.
00:37:45.800 --> 00:37:59.670
And then you can just generate the three-D model[UM] And that's what I tried and I think let me show you the results[UM] yeah.
00:38:00.250 --> 00:38:01.949
So this, look at this.
00:38:02.820 --> 00:38:03.000
This
00:38:03.000 --> 00:38:03.079
Isn't
00:38:03.079 --> 00:38:03.269
is amazing.
00:38:03.269 --> 00:38:03.400
this?
00:38:04.599 --> 00:38:04.679
This
00:38:04.679 --> 00:38:04.800
Well,
00:38:04.800 --> 00:38:04.860
is
00:38:04.860 --> 00:38:04.880
yeah.
00:38:04.880 --> 00:38:05.619
quality.
00:38:06.219 --> 00:38:06.300
Yeah.
00:38:06.300 --> 00:38:36.139
Right[UM] Yeah, I really I really like this. I when I saw this I was like, yes![laughter] Finally[UM] a a design that looks great [UM] But [UM] there are technical constraints, like for example [UM] Roblox puts limits on how complex an individual mesh can be[UM] so your tool h- the the model has to be created for the environments it's eventually going to.
00:38:36.900 --> 00:38:41.659
And [UH] a single mesh in Roblox case can have up to twenty thousand triangles
00:38:41.659 --> 00:38:41.719
[laughter]
00:38:42.760 --> 00:38:47.460
[UM] or or twenty thousand faces and if you look at this it's seven hundred thousand.
00:38:48.039 --> 00:39:04.039
So then you can [UM] change the settings in Meshi and then I regenerated another one and you can see like this one has [UM] twenty twenty thousand faces. So this would fit for my for my for the game engine that I'm going to use.
00:39:04.563 --> 00:39:13.023
and once you've done that [UM] you can also like also you already see it here you can rig the character and then you can also like [UM]
00:39:13.702 --> 00:39:14.123
And rigging
00:39:14.123 --> 00:39:14.302
[UH] af-
00:39:14.302 --> 00:39:18.228
w- w- rigging is [UM] explain that to us?
00:39:19.128 --> 00:39:34.788
Yes [UH] so when when you rig the character you can like[UM] you can decide like where the joints are in that three-D model so then when you[UH] and when you know where the joints are you can like make like animations like this [laughter] like a dancing
00:39:34.788 --> 00:39:34.987
Yeah.
00:39:35.108 --> 00:39:44.822
chicken and it and it looks and it looks nice and fun[UM] and then basically after that you just export it[UM] and then import into your game.
00:39:45.702 --> 00:39:51.318
And you know look at this. The quality is so much better than this one.
00:39:53.938 --> 00:40:03.722
I yeah and I mean like this is so cool right? Cuz I I think this example shows that it's really anything that you need to design.
00:40:04.568 --> 00:40:14.108
Like it could be it could be a website, it could be a part of a website or a part of an app, but it can also be something different like a like a three-D model[UM] and you know maybe you're not using
00:40:14.108 --> 00:40:14.128
[laughter]
00:40:14.128 --> 00:40:48.108
three-D models in your projects but but the idea is anything if you if you figure out, OK, what is it that people usually do to make this thing properly and then try and map that workflow to different AI tools and pipe them together and actually put effort into it, right? It's not free, you know, you have to spend some time[UM] then I I think that's
00:40:48.108 --> 00:40:48.568
Yes.
00:40:48.807 --> 00:40:50.753
like that's the key thing here
00:40:51.507 --> 00:40:51.947
Yes.
00:40:56.748 --> 00:41:28.478
all those steps, all those indivi- or And [UM] yeah, I guess instead of asking one model to somehow jump from just the PROMs, like, hey, in my case I need a design for my character to and then and then instead of just expecting the model to just jump from that to the finished asset[UM][UM] to get that final result that I would be happy with.
00:41:29.137 --> 00:41:36.478
Every step is a steering point and also every step is an opportunity to use a different tool, the right tool, for that point in time
00:41:37.282 --> 00:41:37.623
Yes.
00:41:38.382 --> 00:41:41.467
Yes[UM] Yeah.
00:41:42.148 --> 00:41:52.007
And I guess if we[UM] zoom back out and look at all these you know the three examples that we mentioned they they look like completely different things.
00:41:50.907 --> 00:41:52.007
Like
00:41:52.007 --> 00:41:52.027
[throatclearing]
00:41:52.027 --> 00:41:56.628
it's a website, it's a podcast editing interface and there's a three-D game character.
00:41:56.628 --> 00:41:56.748
[throatclearing]
00:41:57.447 --> 00:42:00.268
But like Brendan mentioned the structure's basically the same.
00:42:00.887 --> 00:42:02.387
So quick comparison
00:42:02.827 --> 00:42:02.887
[sniff]
00:42:03.088 --> 00:42:07.487
[UM] website was brand and then the concepts and then implementation.
00:42:07.487 --> 00:42:07.507
[throatclearing]
00:42:08.827 --> 00:42:13.728
With the minimap we had problem, brief, visual exploration, and then implementation.
00:42:14.288 --> 00:42:14.307
[sniff]
00:42:15.128 --> 00:42:16.987
And for and then for the character we have art
00:42:16.987 --> 00:42:17.188
[throatclearing]
00:42:17.507 --> 00:42:28.188
direction, reference, model, and then implementing it into the game. So in every case we created this intermediate artifacts that made the next decision
00:42:28.228 --> 00:42:28.268
[sniff]
00:42:28.427 --> 00:42:33.208
easier and gave us somewhere to steer or to choose a different tool to use that's better at
00:42:33.208 --> 00:42:33.248
[throatclearing][throatclearing]
00:42:33.257 --> 00:42:36.083
that step[UM] Yeah.
00:42:36.503 --> 00:42:42.887
Yeah. And and I guess another maybe another point here is like coding agents by themselves are not good designers.
00:42:43.427 --> 00:42:59.398
But coding agents paired with other tools like ChatGPT Image[laughter][UM] or or if you're doing something more in more exciting like a three-D model then tools like Meshi you can combine those with coding agents and you can get quality out of it.
00:43:00.143 --> 00:43:00.623
Yes.
00:43:01.588 --> 00:43:14.163
Yes. And[UM] if we go down this line of thinking, something that comes up in my mind is [UM] I feel my instincts are almost the opposite of one-shotting.
00:43:15.273 --> 00:43:25.233
Whenever I'm building something important with agents, I want to first understand, like, how would really competent humans do this? Like, what is the actual workflow?
00:43:25.833 --> 00:43:29.233
What are the important decisions and deliverables along the way?
00:43:30.012 --> 00:43:37.172
And once I understand that, I use AI to accelerate or re- replace parts of that process.
00:43:38.132 --> 00:43:46.512
And I I really like working this way because I know where the important decisions happen, I understand what I'm building, and I know where to intervene if something goes wrong.
00:43:47.213 --> 00:44:00.293
Brandon, I also know you do something so different sometimes, like when we talk I get the impression that you you give it often give an agent a goal, you let it run overnight and then you wake up to something that works?
00:44:01.268 --> 00:44:03.967
And then it makes me wonder, am I am I overengineering this?
00:44:16.208 --> 00:44:21.987
I struggle with sometimes because I'm too lazy[UH] [laughter] but but one way to
00:44:21.987 --> 00:44:22.047
Or
00:44:22.047 --> 00:44:22.088
think
00:44:22.088 --> 00:44:22.188
just
00:44:22.188 --> 00:44:22.307
about
00:44:22.307 --> 00:44:22.407
too
00:44:22.407 --> 00:44:22.427
it
00:44:22.427 --> 00:44:22.487
quick,
00:44:22.487 --> 00:44:22.708
is
00:44:22.947 --> 00:44:23.347
I guess.
00:44:23.347 --> 00:44:23.668
yeah.
00:44:24.588 --> 00:44:29.788
The the a- the approach you're describing I think of as maybe going bottom-up.
00:44:27.507 --> 00:44:42.568
Like you you wanna deeply understand how something works and then once you have that you can say OK it's these five steps or these ten steps and then you can say OK what should I do in these different steps. And if you do that and you learn that and you do it well you're gonna get something good at the end of it.
00:44:43.313 --> 00:44:56.688
What I what I like to do is I go top-down[UM] so what do I mean by that? I start by just one-shotting and then and then[UM] sometimes that's fine.
00:44:54.467 --> 00:45:15.038
Like it it it depends what you're doing. If you're building an internal tool, yeah it can be vibe-coded crap, it doesn't matter[UM] but [UH] but then you know for whatever I'm trying to do I judge the output, I judge the artifact that comes out and is it is it good or is it bad? [laughter] And if it's bad then then [UM] I decompose it.
00:45:15.788 --> 00:45:27.108
OK? And I I think design is a really good example of this because no matter h- every single time I tried to to one-shot something I had to decompose it into into different steps.
00:45:27.913 --> 00:45:49.503
And and you know you start with two steps and then you say OK the first step is bad so I'm gonna break that into two different steps or five different steps. And I just keep decomposing and breaking down things into more and more steps and then try different tools until I get the thing that I want out of it [UM] so so I don't think you're overdoing it.
00:45:50.318 --> 00:46:20.268
I think I think spending that time to make the process better where it matters is really valuable[UH] and and it sounds like you're doing that. And look, you you you started with that ugly chicken and you ended up with a beautiful chicken. So [UH] so so that's good. I think where it where it could go wrong is if you if you take this to the extreme and you spend all this time breaking down work that could be done in one shot[UM] and and you spend a lot of time on it when it's unnecessary.
00:46:20.974 --> 00:46:21.215
Yeah,
00:46:21.215 --> 00:46:21.275
[laughter]
00:46:21.275 --> 00:46:35.855
I do I do think that's true. I think, yeah, I think I am I think I do agree that[UM] we do not need to reconstruct some giant professional workflow every time we ask AI to do something.
00:46:36.514 --> 00:46:36.534
And
00:46:36.534 --> 00:46:36.614
[laughter]
00:46:36.614 --> 00:46:48.695
I I guess if if if the model, you know, would have created that AI character correctly right away, then I wouldn't I wouldn't have dived into like that workflow how how people properly create three-D characters
00:46:49.855 --> 00:46:49.894
[UM]
00:46:49.894 --> 00:46:54.494
[UM] So yeah, I think I think I agree, actually agree with that approach.
00:46:52.994 --> 00:47:14.635
Start simple, but when the quality isn't there, don't just keep, you know, rewriting the PROMs. Maybe expose more of the hidden process, like [UM] ask what process would produce this if it were really done if it were done really well, and what intermediate artifacts am I skipping right now?
00:47:15.135 --> 00:47:24.945
Because like we said, every useful intermediate artifact gives you another place to apply your own judgment and steer the result and maybe find a better tool to use that's better at
00:47:24.954 --> 00:47:24.974
I'm
00:47:24.974 --> 00:47:25.144
that task.
00:47:25.144 --> 00:47:27.000
sorry. I'm not sure what you're
00:47:27.260 --> 00:47:27.760
I [UH] while
00:47:27.760 --> 00:47:27.780
talking
00:47:27.800 --> 00:47:28.000
you
00:47:28.000 --> 00:47:28.019
about.
00:47:28.019 --> 00:47:59.139
were talking I I also got reminded I think it I think it's also like really true what you're saying like your observation. I'm really trying to learn because[UM] basically what we're doing here is building software and I don't have like that rich software engineering experience that you have, so I also intentionally want to slow down for my own understanding, for my learning, so I know what I'm doing[UM] that that kind of rem- reminds me of a of a blog post that I've seen from Mario Zechner, the creator of Pi. I don't know if you remember, you probably have seen it
00:47:59.139 --> 00:47:59.170
Mm-hmm.
00:47:59.170 --> 00:48:02.119
too, like, slow the F down. [laughter]
00:48:02.280 --> 00:48:02.380
Mm-hmm.
00:48:02.380 --> 00:48:02.400
You
00:48:02.980 --> 00:48:03.059
Mm-hmm.
00:48:03.059 --> 00:48:03.840
remember that one?
00:48:04.619 --> 00:48:04.639
Yeah
00:48:04.639 --> 00:48:05.059
I do.
00:48:05.800 --> 00:48:15.980
[UM] I think I yeah, sometimes I'm lazy too, or I'm i- impatient and I want to one-shot it, but often I try to be really intentional about understanding what I'm doing or what's happening.
00:48:16.619 --> 00:48:16.800
Yeah.
00:48:17.320 --> 00:48:28.139
I mean, doing this podcast helps us slow down because we in order to explain something we really have to understand it[laughter] maybe something for everyone to think about.
00:48:28.900 --> 00:48:33.530
OK, on the surface what we talked about was design and how to design properly.
00:48:34.110 --> 00:48:45.344
And hopefully you can actually take this away and and solve design problems that you run into now that you know use Chatshubuti image basically [UH] and then as we were saying decompose things properly et cetera.
00:48:46.454 --> 00:48:50.500
But but just remember this is not just about design.
00:48:51.650 --> 00:48:53.510
It's about anything really. So
00:48:53.510 --> 00:48:53.730
[laughter]
00:48:54.050 --> 00:49:03.840
the point is in the same way that you can decompose[UH] you know you can turn a one-shot prompt to vibe code something into harness engineering and build good software.
00:49:04.340 --> 00:49:19.684
You can turn a one-shot design task that's that gives garbage results into a proper workflow that produces a quality asset or a quality artifact by putting effort into it.
00:49:17.844 --> 00:49:23.804
And you can do the same thing for any any kind of problem that you run into if you if you kind of take this approach.
00:49:25.324 --> 00:49:25.784
Agree.
00:49:26.574 --> 00:49:26.835
Yeah.
00:49:27.554 --> 00:49:48.855
Well, that's it for this episode of Superlinear[UM] a few of you told us you wanted more real examples of how we're actually using the ideas that we're sharing during the episodes. So in this one we tried showing you how we applied the practices and things that we've been building ourselves[UM] let us know if you want us to do more episodes like this.
00:49:49.434 --> 00:50:01.155
And I'm also especially curious[UM] if anyone of our listeners have found a workflow where breaking down the task into stages also improves what your agent could produce.
00:50:02.034 --> 00:50:06.474
Please tell us in the comments and subscribe if you want to catch the next episode.
00:50:07.275 --> 00:50:07.894
See you next time.
00:50:08.715 --> 00:50:09.474
Bye everyone.