How I Make AI Designs That Don't Look Like AI (6 Claude Code Skills)

0:00Have you ever wondered how you can make

0:01your AI produce generally good designs,

0:05whether it's HTML, websites, or whatever

0:08you're doing? Well, in this video, I'm

0:10going to go through the six different

0:12skills that I'm using to create what I

0:14think is unbelievably good designs

0:17purely generated through AI. Now, of

0:21course, I'm not saying that they are

0:22world-class and it will replace humans,

0:25but this is getting dangerously close

0:27and has been bringing a massive value

0:29add for all of my agents. Primarily

0:32because of the design systems and making

0:34it stay on par with my company

0:36Triggerfy's brand and designs. So, it

0:39feels like something that my marketing

0:40team would produce.

0:42So, let's dive into the six different

0:44skills. Before we do that, I want to go

0:46over what we're typically getting with

0:49AI and what we're going to get hopefully

0:50instead. So, you probably would have

0:53seen a lot of the AI that produces is

0:55typical highlights of certain boxes,

0:58certain radiuses, certain fonts that are

1:00used. There's this kind of like a fake

1:02browser, kind of Chrome with dots

1:04everywhere, testimonial metrics. It's

1:08very same-same.

1:10Whereas, what we're wanting to get

1:11instead instead is we're going to get 21

1:14distinct macro structures to rotate

1:17through. So, that's basically we're

1:18going to provide examples of structures

1:21so it's not just

1:22uh in stone. We're going to have 22

1:24named themes with access diversification

1:27as well. So, again, this is all

1:29providing it. We're going to provide it

1:30with a lot more examples to open up its

1:32design capabilities. We're going to give

1:34it certain skills to follow a design

1:37composition. So, what I mean by that is

1:39certain color gradings, highlights, what

1:41it needs to follow, how it should follow

1:43that as well. Um and how we can create a

1:46level of memory to prevent repetition.

1:48And lastly, how we can then actually do

1:50the what we call like the slop test at

1:53the end.

1:54So, this is the skill stack that I use

1:57and I use all skills in tandem and my

1:59agents, whether that's Clawback code or

2:01Hermes or whatever you're using.

2:02Typically, I use Hermes for a lot of

2:04this. Hermes is the orchestrator. It It

2:07routes it through Clawback code and then

2:08looks over what Hermes is what Clawback

2:10code has done and then gives it some

2:12feedback until Hermes is basically

2:13happy.

2:15But the first thing is Google's open

2:17spec. So, they open-sourced a thing

2:20called design.md

2:21and I'm going to put all of the links

2:23into a docs. So, if you want that, let

2:25me know. I will share the design MD plus

2:28all the skills with you as well, so you

2:30don't have to go searching for these

2:31things.

2:32But Google off the back of there, I

2:34think it's snitch or stitch. I can't

2:35remember the tool that they did for

2:37design, which is very similar to

2:38Clawback design. They actually open spec

2:41this kind of design memory system for

2:43AI. And in here, you can basically

2:46upload your color scheme. So, you can

2:49use different tools if you're just

2:50starting the journey to help work out

2:52what is your design system that you

2:53should be using. Maybe you're more of a

2:55established company and you've worked

2:57with a graphic designer in the past and

2:59you have that. All you need to do is

3:01basically go ahead and upload that into

3:03here and it's going to basically start

3:06to give you the

3:08or follow the design functionality for

3:10you.

3:12So, you can see here, we were also then

3:14providing it with skill number two with

3:1754 real design systems extracted from

3:20production sites. So, what we're doing

3:22is we've uploaded examples of Stripe,

3:25Spotify, Airbnb, Linear, Superbase, so

3:28on and so on. All of these kind of

3:30really well

3:31thought out companies that have had

3:33great and probably God knows how much

3:35money they spent on their design

3:36systems. We're going to use that as

3:38reference points for the AI to follow

3:41when it comes to structuring everything.

3:43Then with skill three, we're using a

3:46open-sourced skill essentially, which is

3:49marked the anti-slop

3:51engine called Hallucinate. And this is

3:55really, really powerful. If there's If

3:57you're going to use any of them, this is

3:58the one that you probably want to use.

4:01This has great kind of

4:03context to inject into your agent

4:05system. So, it injects it with 21 macro

4:08structures, which is really cool. And

4:10then 22 different themes, different axes

4:13as well. We've got like paper, display,

4:15accent, and it will kind of like rotate

4:17essentially through them, which is

4:19pretty cool.

4:20With this, it also has an anti-slop

4:23built in. So, once it produces

4:26something, it calls this skill and will

4:29detect if it's kind of defaulted back to

4:31something that it typically does as

4:33well. It's never perfect. You will get

4:35things that creep through, but the idea

4:37is it keeps iterating until it feels

4:40like the design has moved away from the

4:42typical AI intricacies and given you

4:45something that is generally human

4:47proofed in the sense of a human could

4:49have made that and that's what it would

4:51pass as.

4:53From there, we then also have obviously

4:55Claude design systems. Um so, here we

4:59are actually using This one we don't use

5:01every single time, but here we use the

5:04agents that will actually power and

5:06control through browser use Claude

5:08design. So, if they don't want to use

5:10the other skills and kind of create

5:12their own kind of custom HTML page,

5:13maybe they want to go through Claude

5:14design, then they have this capability

5:17to do that as well. Typically, this

5:19isn't called on every single time. Nine

5:22times out of 10, we're doing everything

5:23self as well. And then we have the

5:25sketch. So, before committing to any

5:26direction, we're going to generate two

5:28to three throwaway HTML files, different

5:32layouts, different density, different

5:34tone. And I essentially pick which

5:36direction that we want to go in. So,

5:37think of it like a graphic designer or a

5:40UI/UX individual comes up with a couple

5:42of ideas. It then basically says, "Hey,

5:44which kind of direction do you want to

5:46go down?" And then from that point I

5:48say, "I really like option A." It's then

5:50going to start and build that out into a

5:52more fully fledged kind of prototype.

5:54And then lastly is the humanizer skill.

5:56So, you probably all

5:58seen this humanizer skill, but this is

6:00starting to try and you can see here

6:01it's giving like the examples with M

6:03dashes and things like that. This is

6:05where it starts to take the copywriting

6:07element and obviously starts to try and

6:09humanize it to a certain degree. So,

6:11again, typical

6:14intricacies that AI will

6:16bake in. M dashes really isn't the one

6:19anymore. Like a lot of it now is

6:22full stop statement, full stop

6:24statement. Like that's kind of like a

6:26big pattern with with AI. So, again,

6:28humanizer allows us to try and eradicate

6:31elements of that and just make what

6:33we're producing to be a little bit

6:35better.

6:37And this is how they then compose all

6:38together and we can see how it kind of

6:40goes through this kind of systematic

6:42workflow. So, it starts with the brief.

6:45Does the preflight scan. Then we go into

6:47the design context. It asks three

6:49things: audience, use case, tone, or

6:51infers them. It picks the theme. It

6:53loads the design. It previews it. It

6:55builds it. It does the SLOP test. It

6:58then uses vision. So, it takes like

7:00screenshots and basically analyzes how

7:02good it is. It reiterates until it comes

7:04back to something that it's happy with.

7:07And that effectively is like the the

7:10the essential SLOP test that we're

7:11trying to do, which is this last part.

7:14It's got to pass those gates and do the

7:15vision component. So, it kind of loops

7:17back and forth on each other until you

7:19have something that is incredibly

7:20powerful.

7:22Now, I'm going to do another video on

7:23this another time, but I've started

7:25using this massively for explaining

7:28things. Obviously, we've kind of

7:30done it to a degree here today.

7:32But, I've been using it for follow-ups

7:35to sales calls. So, I take my call

7:37recording notes that we got from the

7:39call and I go to my Hermes agent or you

7:41can go to your clerk code, and you can

7:42say, "Hey, draft me up using all the

7:44design skills a HTML which explains

7:47exactly what we're going through, how

7:48they could get more value out of us, and

7:50let's build something personal." And

7:51then I just host it on a Vercel link,

7:53and then I send it away. Like, I think

7:55gone are the days of crappy generic

7:58PowerPoints. This is generally the

8:00future for kind of custom value tidbits

8:03that you want to provide to people, or

8:05just to understand, you know, how was

8:07the code made? Anything like that. Just

8:10simple kind of explainers that puts a

8:11little bit of visualization on top of

8:14something that's potentially quite hard

8:16to visualize.