# Show Me Your AI — Episode 13

Full transcript: How to create non-AI looking designs using AI.

---

Welcome to show me your AI with Dan Gilbert. Today we're talking about all things design and how to make your design not generic.

And how to make your AI generated design not completely suck.

I'm here with Liz, who's an expert at not sucking at design. Hello. Show us your AI. Yes. Very excited to get going here. So many of you have probably seen the slop AI design flips that is happening on the internet, and we are very committed to combating that. A really key point when it comes to designing with AI enabled tools is using a code base or a reference library, so we use one.

Our friends at Variant are really good at combining all of the different code bases with some really great design. So we're going to walk you through a workflow where we actually design a welcome screen for one of the events that we did in September with our friends at TikTok, where we took a code base design from Variant so I could show you what that design looked like initially.

And.

yeah. So most Claude design is not great out of the box. If you just give Claude code a prompt and say, hey, go design this invite for me and, you know, build it with different components, here's the copy.

This is a generic example of what it will give you. You'll see there's a bunch of em dashes used throughout. There's the infamous two back slashes, which I've been seeing all over the internet. All the call to actions have a little arrow. You have these interesting characters. It's super generic, right? Is this horrible to look at? Yeah, yeah.

Agreed. Also black, I feel like is the default color for anything that Claude builds from a design perspective. So of course this isn't something that you want to go to market with. You don't want to socialize this, you know, with your prospects and clients. So what you would do then to not have design look like this is have a really strong reference.

And this is where working in Claude Code and having a really strong design library base and a code base is really, really helpful. So we use Variant. Variant is a code library that has a bunch of amazing designs and showing here on the screen we have this really nice design that we actually used as inspiration for our Brainlabs event that we had a couple of weeks ago, where we took the code base from this design.

We copied it over into Claude Code. We gave it a very clear instruction. Use this exact code base build at the top there list. So you're loading the design in and you're just saying look at the code of this design in order to have a reference file for what I'm about to build. Exactly. Yes. Yeah. It's actually quite good to start from that place instead of giving it too much context upfront on what you want to build.

First, you want Claude Code to understand what it is that you're building, and then you want to start layering in all of the very specific instructions. So you can see, as I start building this, I start telling it, okay, I need to create a certain type of format. It's going to go on a TV. I need it to say Brainlabs times TikTok.

Here are all the requirements for the actual creative and then it starts cooking it up. So this was the first iteration it went through. Not great. But yeah, you go through a few more changes. Yeah, exactly. Then we were like, oh, maybe we should add a QR code because we want people to be able to connect with us from the graphic itself.

It again went through a couple of iterations, and then if we scroll all the way down to the bottom, we finally get our final product here, which is quite a good welcome sign for a happy hour. Fit perfectly on the TV. It was sparked exactly for that. Nothing got cut off, which was great, and this whole creation process took probably about five ten minutes of just going back and forth.

Perfect. And I can see exactly how that works, like start to finish. You just get the speed to create something quite basic. Obviously. Be cool if we can apply that principle to something a bit more ambitious. Not the most ambitious today, but like, let's let's let's look at some other examples. But I think that that describes the process perfectly.

Right. Like start with a reference file like LLMs are very good when they know exactly what they're doing. But if you just take the default, it just takes the average of everything that's ever been designed. It's the same thing with writing where it will like, look up. It will produce this like horrible sounding prose because it's the average of everything that's ever been written.

Yeah. Sounds terrible. The same thing with design. Yeah. And I mean, I think the models are getting better when it comes to design and giving instructions and natural language. But I do think using Claude Code with actual design that is code based is really the most. It's like the ultimate set of instructions because it removes, removes like ambiguity, doesn't it?

From language. Exactly, exactly. Cool. So what's this one? Yeah. So for this one I'm going to show you guys first the inspiration for this. So we were hosting a demo day for some of our consultants and our, our clients. And we wanted to put together a really cool experience for them based on some of the things that we were showing them.

So again, using a code based template here from Variant, we thought this one was really cool. We went back into Claude Code gate. It gave it that reference. It started building the existing template. You can see here. I've started then giving it some feedback on. All right, now that you've built this fully, I want to make some changes to it.

I want certain elements spinning. I was pretty specific about wanting these cards that are spinning in this spiral format to be links back to different pieces of content. So it was a very interactive experience, and I also wanted to use this welcome screen or this kind of demo day intro screen as a way of introducing everyone in the room as well.

So then that way when someone comes in into the room and we're about to present, you have everybody's name and picture there so everyone knows who each other is. And also all of this content is all available here. And it also creates for a really good interactive experience. So each presenter can pop in and out of different sections, as you know, as the room kind of sees fit.

And you can skip sections too, which is nice depending on what the room cares about. Let's skip to the end. What's the I presume you deployed this on? We did. Yes. So the other cool thing here was that we also pulled in other elements from different Brainlabs experiences. So here we said, okay, we want to have like a really cool floating flask in the middle.

And now we've started inputting the cards with the different content. And then if we skip over to what the final product looks like, here it is in all of its glory. It has. Each one of these is a click out. So we could show the click out to the section. Here was one of the sections where we introduced ourselves as an agency of the future, which we're actively doing now.

And yeah, so we had all of these different cards here. We had our our people in the room. And yeah, we had this really cool experience that centralized everything in one place. And you can see going back to the previous example, it's pretty similar. But we did have our Brainlabs brand guide associated with it. We have all of that codified as well, which is great.

So all of our own design references are code based. So it's really easy to take a template code and then reskin it and actually make it. You're merging like the two references together. And that's clear instructions to the LLM that you can kind of produce something like this. And the interesting part is that like anything we would ordinarily have created, this is a website, right.

Like it's a it's deployed on Vercel like it's it's live and accessible. And anything we would ordinarily have made a brand new website for an event day, like a single day event. So it's kind of unleashed just for the people that think it's like a you're going to end creativity or remove the need for people, that actually increases what's possible and allows you to create things that you wouldn't have done before, which is a really nice application of it.

And like you click on the creative lever. So each of those you just basically fill in and then you can go back to the main page. It's like super cool. Exactly. Well, I also know that you've done even cooler design work than this, but maybe we'll save that for another episode where we talk about storyboarding and video generation.

But that's really cool to see how quickly you can create something tasteful like, I love both of those designs, even though they were the first one was simple, but it's like it's clearly better than the generic version that you get from the internet. So thank you. Liz. Yeah, thanks for having me.

Liz has put a bunch of this on a link that you can find below. The design, references and guides on how to do exactly what you've seen today, and make sure you subscribe for future episodes where we go even deeper on the world of design.