YT YouTube2Text

YouTube2Text → Transcripts → Design Engineering Night 10: Don’t ask AI to design for you with Alex Barashkov

Design Engineering Night 10: Don’t ask AI to design for you with Alex Barashkov — Transcript

by Granola · 2,872 words · 483 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:01So, hello everyone. I'm Alex
0:04and I run branding design agency called
0:07Pixel Point.
0:08We use AI a lot in our design processes.
0:13And I think we know quite well its
0:14strengths and weaknesses. And in my view
0:17right now
0:19is that AI is much better in building
0:22environments for you where you can
0:24design better and faster, rather than
0:27entirely designing for you. For that
0:29reason I
0:31called my today's talk, "Don't ask AI to
0:34design for you."
0:37Oh, give me a second.
0:38Ask it to build you a tool.
0:41So, for over a year
0:42we've been uh building lots of different
0:45custom design applications for the
0:47projects we've been working on.
0:49>> [snorts]
0:51>> And we built apps for brand, web,
0:54product, 3D, and motion design.
0:57Here are a few examples of what we have
1:00created with the help of apps that we
1:03built with AI.
1:05For example, uh
1:08we created an app that helped us to
1:10design a brand signature visual.
1:14Another app helped us to explore faster
1:17brand's visual direction.
1:19For Recraft, uh we created multiple
1:23applications that helped us to explore
1:26and experiment faster with WebGL and
1:28shaders and animations right on the
1:31landing page uh for their new model
1:34release.
1:35For neon.com,
1:37uh we built plenty of different
1:39applications. We built one to scale up
1:42the production of marketing assets.
1:44Another one we built to create the
1:46graphic uh for the video on the home
1:48page. And we did some applications for
1:52managing and maintaining uh design
1:54system and editing the there. and uh
1:57another one basically for
2:00just visually checking it's a micro tool
2:04different UI component states right in
2:06the product.
2:08So, today I want to explain why you
2:11might want to build your own custom
2:13design applications. Uh, show you in
2:16detail what can you do with them and of
2:19course how can you get started with
2:21that.
2:23I think there are three main reasons why
2:25you want to build uh, your custom design
2:29software. The first one is create what
2:31existing software is not built for.
2:34Uh, the second reason is explore ideas
2:37more efficiently and the third one is
2:39make your design repeatable and
2:41accessible.
2:43I think it's much easier to explain on
2:45real examples.
2:46So, here we go.
2:48During our work on new brand identity
2:51project for Polar Signals, we had a an
2:53idea uh, of using flame graphs as a main
2:58brand signature visual.
3:00And of course during the design process
3:02you typically start from gathering some
3:04references and inspiration and just
3:08having a rough idea in your head.
3:10But then you have to design it somehow
3:13and uh,
3:15obviously for us
3:17manual drawing like bunch of rectangles
3:20and experimenting with different
3:22gradients, color mixing and the shape of
3:24the chart in Figma
3:27will not be very efficient if we do it
3:29there.
3:30So, instead we decided to build an
3:33application that would allow us to do
3:34that.
3:36So, we build an app and there how it
3:39looks.
3:40Uh, it's a final state of it and as you
3:42can see here there are a bunch of
3:44different controls and parameters that
3:46you can play with. You can change the
3:48size of bars, you can change color, you
3:51can change the way how gradient works.
3:53Uh you can change of course the shape of
3:55that pattern and even try multiple
3:58versions of layout. So, uh the big
4:02advantage of such approach is that
4:04instead of blindly prompting AI and
4:07hoping for the best that it will
4:09eventually decide something that you
4:11imagine, uh you can actually create an
4:14environment which will help you to make
4:16decisions on your own
4:18and make it faster.
4:21Uh yeah, and create some beautiful
4:23things there.
4:24So, and you're not just stopping there
4:27because it's an app, by tweaking
4:29multiple parameters once you finished
4:31with it, uh you can basically generate
4:34dozens of different variation of that
4:36patterns and start scaling it up and
4:39using it in variety of different like
4:42marketing materials or web app.
4:45Another example is
4:48again from our branding world. Uh
4:51one of our clients wanted to have their
4:53new brand identity be inspired by a
4:56light, uh by a visual of a light that is
4:59coming through the glass and creating
5:01all sorts of fractions, aberrations, and
5:03halation effects. And also they liked a
5:06lot the graphic on the Stripe web page
5:09and wanted to have something similar.
5:11So, we again started from gathering some
5:12references and inspirations and again it
5:16was quite obvious that designing it in
5:18Figma will be insanely inefficient
5:21because we wanted to have it animated,
5:24maybe even interactive. We wanted to
5:25have it in code and basically Figma
5:28doesn't allow it to do that.
5:30So, we created another application
5:33that made it happen. So, that one has
5:36probably 30 to 40 different controls and
5:39parameters that you can experiment with
5:42and you can adjust pretty much
5:44everything. Uh the size of that thing,
5:47tilt, rotation, you can play with some
5:50configuration for animation and timings.
5:54Uh, you can of course apply some visual
5:56effects to it like grain, halation, blur
5:59effects. And once you find the
6:01combination that works, you can again
6:04scale it up and uh
6:07do like multiple of those versions and
6:10bring it to the home page, bring it to
6:12some marketing materials.
6:14Uh, and yeah, and really easy to scale.
6:17So, uh another example uh can illustrate
6:21how can you build your own design
6:23applications, but for different purpose,
6:25for scaling up uh
6:27production of
6:29uh
6:30brand assets. So, for many years we've
6:33been designing different covers and
6:36marketing materials for our clients.
6:39And typically those materials have some
6:43unique combination of uh colors,
6:45typography, techniques, layout
6:48compositions, and some image stylization
6:51effects.
6:52And
6:53uh it was quite painful to manage it in
6:55Figma. Uh, every asset was created there
6:59by designers manually. Uh, and often
7:02like not often, but sometimes we were
7:04actually exporting this to Canva even
7:07because uh
7:08like to make it easier for the clients
7:11to maintain some at least assets on
7:13their own. But right now, you can create
7:16applications with AI and help your team
7:19to manage your marketing assets in much
7:22easier way. Uh, there are few examples
7:25from Neon Database and Anki project. And
7:28you can see here that you can select
7:30multiple templates. You can of course
7:32type your title, description, or
7:34whatever else. And in Neon you even have
7:37a dedicated application that allow you
7:39to much faster to apply certain certain
7:42image processing pipeline to get that
7:45look and brand feel that they have.
7:48So, uh
7:50what else?
7:51Another example, if you're more into
7:53product, uh that probably will be for
7:55you. Uh
7:57for Neon, we created a app that helps us
7:59manage their new design system directly
8:02in code. So, there is no middleman,
8:04there is no Figma. You can uh visualize
8:07all of the components that you have
8:09inside your product in the environment
8:11that you want and fully control. And the
8:15main advantage here is that it runs
8:17exactly in the same code base. It runs
8:19on the exactly same stack as your
8:21production build. So, uh
8:24and by spicing up a little bit with
8:26additional utilities, you can get an
8:29easy management of your color tokens, uh
8:31typography styles, and themes. For
8:33example, in that specific application,
8:35we have a color tokens page where you
8:38can basically edit or add
8:40any new color token. And once you press
8:42save, it immediately saves that value
8:45into a configuration file that the front
8:48end it uses. So, like no middleman, no
8:52additional requests to AI to apply that
8:54style to something, or no even any
8:56additional synchronization engine
8:58between, let's say, Figma and your code.
9:01Uh so, uh
9:03that one app, uh I think it's my
9:05favorite way right now to
9:07mm visually test UI components uh in the
9:10product. It's another app that we built.
9:13It's a micro app, actually, that we
9:14built again for Neon.
9:16And it's basically just a sidebar that
9:19displays for you in the product all sets
9:21of components that you have within your
9:23product page and with different
9:25variations of uh like properties that
9:28can be there. So, and just by hovering
9:31on it, browsing through all of them, you
9:33can really easily identify
9:36what works and what doesn't, and improve
9:38if there is a need for that.
9:41So,
9:42I think it's time to talk about how can
9:44you build your own design applications.
9:48Of course, uh the most simplest way is
9:49that you can go and ask AI to do that.
9:53And your prompt would look something
9:55like that. Build me an app to apply an
9:58ASCII effect to an uploaded image. And
10:01after 20 or 30 minutes of work, AI agent
10:05will probably return with something like
10:07that.
10:08And [snorts]
10:09it doesn't look nice, really.
10:12And it doesn't work good, either.
10:15>> [snorts]
10:15>> So, I think after seeing something like
10:17that, there are two ways. You either
10:19will uh keep iterating until you get to
10:21a decent shape, or you will never ask AI
10:25again to do something.
10:26Uh
10:27so, uh and it's not just an issue in UI
10:30that it looks terrible, of course, but
10:32you will get I like many other issues as
10:35well. Let's say exporting functionality
10:37won't work correctly. Uh controls can
10:40lack. The performance of the app itself
10:42can be really not good. And uh the image
10:45that it will be drawing or with the
10:46style effect that you want will be
10:48slightly blurry because AI just didn't
10:50consider that you like working from
10:52reading on display.
10:53And uh
10:55the main thing here is that before you
10:57even started building or like designing
10:59something inside that app,
11:02you have to spend a lot of time actually
11:05polishing and making your work split
11:08workspace behave correctly.
11:11Uh which leads us to our next point that
11:13most of design application consists of
11:15two main pieces, uh the workspace and
11:18design output. By workspace, I mean
11:22canvas, controls, toolbars, timeline,
11:25keyframes, layers. And by design output,
11:29I mean uh uh the place where you create
11:32something on your own by utilizing those
11:35things from the workspace that you have
11:37created.
11:38And if you take a look on the Figma
11:40examples,
11:41the workspace in Figma is basically your
11:44like layers panel, properties panel,
11:46toolbar,
11:48and the design output is that canvas on
11:51which you're trying to draw something.
11:55So,
11:56if you just will follow that approach
11:59simply trying to prompt AI to build you
12:02an app, uh you probably will end up with
12:05something like this.
12:06Uh you will spend 50% of your time
12:08managing and maintaining your workspace
12:10and the remaining 50% of your time
12:12you'll be actually working on the design
12:14itself, which it doesn't look good. And
12:17so, can we improve that?
12:20And can spend less time on the
12:21workspace?
12:22The answer is yes, and there are
12:24multiple options for that. You can start
12:26with a Figma sketches
12:28uh or more detailed prompts. It will
12:30definitely improve the quality of an
12:32output, but you will anyway have to
12:34spend some time preparing those sketches
12:37and creating that perfect prompt,
12:40uh but I doubt that it will anyway
12:42one-shot anything for you.
12:44Uh so, another approach is use UI
12:46libraries like Tweek Pane or Dial Kit.
12:50Uh those are both really great options.
12:52Uh those UI libraries that bring you a
12:54set of really well-made and well-looking
12:57uh controls.
12:59And I think the best use of them if you
13:02have already existing web app and you
13:04want to experiment on some animations or
13:07graphics that already lives within that
13:09application,
13:10you can
13:12add any of those tools and create a
13:14small widget with controls that will
13:16allow you to quickly experiment with
13:18some sliders on it. Uh however, those
13:20are just UI libraries, and as we already
13:23talked about, the workspace is much more
13:25than just controls.
13:26So, uh
13:28alternative way is to use Toolcraft.
13:32Uh Toolcraft is uh open source, 100%
13:35free, uh
13:37MIT license starter kit, UI library, and
13:41AI harness for building your own custom
13:44design applications.
13:46Uh we built Toolcraft uh for ourselves
13:49at Pixelpoint
13:50because
13:52uh after realizing that
13:54we spend a lot of time over and over
13:55again on fixing the same issues that AI
13:58is coming back to us with.
14:00Uh
14:01so,
14:02Toolcraft is starter kit.
14:04And uh by that I mean that once you
14:07create a new application starting with
14:09Toolcraft, it brings the whole code
14:11source inside your folder, and
14:13uh in that folder you get the full
14:15architecture, different modules for
14:18canvas behavior, uh timeline components,
14:20keyframes, layers, whatever else, and
14:24it's based on React, 10 Stack Router,
14:25TypeScript, Tailwind CSS, and Base UI.
14:30Uh but it's not just starter kit, it's
14:31actually also UI library, and we have a
14:33massive set of different controls that
14:35you could imagine and probably would
14:38need in your design workflows. We have
14:40sliders, we have curves, we have
14:43uh radio buttons, drop-downs, of course,
14:45we have some phone pickers, image
14:47uploading functionality, and much, much
14:50more. So, but it's also AI harness. By
14:53that I mean that once you create an
14:54application with Toolcraft, it also
14:56brings to you set of skills and rules
14:58specifically designed to AI to make the
15:00experience of working on your design
15:02applications much smoother.
15:05Uh so, we bring to you um
15:08skills for planning, debugging, testing,
15:11uh
15:12performance optimizations, and uh UI
15:14checks.
15:15So, and with all of that in place, uh we
15:18finally can
15:20uh instead of spending 50% of the time
15:22on maintaining the workspace, we can
15:24start actually spending most of our time
15:28for working on the design itself, which
15:31is, I think, really great result.
15:33And, uh,
15:34to show you how you can get started with
15:36Toolcraft, you can simply type that NPX
15:39pixel point Toolcraft create command in
15:41your terminal. And after following few
15:43very simple questions,
15:45uh, you will get the full starter kit
15:47inside your folder that you were writing
15:50it from.
15:51And then you can bring that folder to
15:52your agent. It works with any agent,
15:55cursor, cloud, codex, whatever else.
15:57And, uh, then from that point, uh, you
16:01no longer need
16:03to focus on, uh, actually explaining to
16:07AI how your workspace should work, what
16:10the buttons should be there, and how
16:12they should look, or sketching anything
16:14in Figma.
16:15You can actually start with a very
16:16simple prompt like that, as you can see
16:19here. I want to build an app that
16:21generates a 3D globe for landing page,
16:22use a black background, and 90 20 pixel
16:25white canvas. Like, really like simple
16:27prompt as a starting point. And, uh,
16:29this example from what we have built,
16:32uh, for Neon homepage, for testimonial
16:34section. It's an animated globe with
16:37some logos on it. And within
16:40approximately 30 to maybe 40 different
16:43prompts, yeah, I have it somewhere in
16:45the Twitter,
16:46uh,
16:47we got to the really good looking
16:49result.
16:50And, uh,
16:51that's another example again from Neon.
16:54So, again, the main point, you don't no
16:57longer start from explaining or creating
16:59a really massive prompt to get a really
17:01decent environment you can work in. You
17:03start with a really simple one, just
17:04explaining the basic and focusing on
17:06what you actually want to design with
17:07that app that you're going to create.
17:09So,
17:11and then again, like after 65 prompts in
17:13that case,
17:14uh, we got to the point that we got this
17:17really wonderful graphic and our style
17:19for that iceberg and animation of it.
17:22And it's there are so many different
17:24parameters that you can tweak in order
17:26to get it to the look and feel you like.
17:29So,
17:30typically we spend between 2 hours to 2
17:33days on every app that we build.
17:37And the important thing here is that
17:40maybe not obvious that
17:43you don't spend that 2 days entirely on
17:45actually prompting constantly your AI
17:48agent to do such applications. The main
17:51point here is that you time to time
17:53returning to agent prompting some ideas
17:55that you have in mind. And then after
17:57let's say 2 days, you have a perfect
17:59environment in which you actually can
18:01create things really quickly. And
18:03another thing is that while AI agent is
18:05working on the apps or sometimes even
18:08multiple ones,
18:09you can work on parallel, let's say in
18:12Figma, to actually draw something by
18:14yourself.
18:16I think it's also important to mention
18:18that you should not of course build your
18:20own applications, design application for
18:22every little design task. If something
18:25takes 10 minutes in Figma, just do it in
18:27Figma.
18:29But of course like right now
18:31if you approach any task that requires
18:34slightly different like approach or have
18:37a different set of requirements and
18:38there's no existing software that can
18:39solve your need, you can now build your
18:42own tool with the help of AI by
18:45following some of those tips from that
18:47presentation.
18:49So, don't ask AI to design for you.
18:52Ask it to build you a tool.
18:55Thank you. That's it.
18:57>> [applause]

About this transcript

This page contains the full transcript of Design Engineering Night 10: Don’t ask AI to design for you with Alex Barashkov by Granola, generated from the public captions YouTube serves with the video. The transcript has 2,872 words across 483 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.