13:00Jack Roberts · Tutorial
Claude Video 2.0 Just Changed Everything (FREE Skill)
A three-level system for turning Claude into a motion graphics and video editing studio, using a free skill, real media and Claude as the editor.
October 24thThe argument in one line.
Claude Design only produces premium work when you hand it taste it cannot invent: real references, a written brand system, curated inspiration, and a critic loop that checks output against a gold standard before it returns.
Read if. Skip if.
READ IF YOU ARE…
- You already use Claude Design or Claude Code for websites and your output keeps landing in the recognizable purple-gradient AI look.
- A founder or solo marketer who needs on-brand social posts, decks and landing pages without hiring a designer.
- A creator making Instagram Reels or YouTube graphics who wants looping motion pieces instead of static slides.
- Someone who has never written a brand guideline and wants a fast way to build one from brands they admire.
- A builder who wants a bookmarkable list of free design galleries for fonts, icons, navbars, footers, CTAs and app flows.
SKIP IF…
- You are a working designer who already maintains a design system; most of the galleries and principles will be familiar.
- You want a step-by-step Claude Design tutorial; this is a fast tour, and several hacks hand off to separate prompts, skills and full videos.
- You want vendor-neutral advice; Higgsfield and Linearity are featured heavily as sponsors and the paid masterclass is pitched mid-video.
The full version, fast.
Most Claude Design output looks like slop because Claude is given a vague prompt and no taste to copy. The fix is to supply the taste: a reference clip and a plan for motion, loops that end on their first frame, small premium touches like hover lifts and counting numbers, and a single brand file holding colors, type and rules. Feed it real inspiration from galleries for fonts, icons, navbars, footers, CTAs, 404 pages and full app flows on Mobbin and Refero. Then enforce quality: a design loop where a critic sub-agent compares output to a gold-standard reference, a five-agent checklist, a Don't Make Me Think simplicity test, and an anti-slop pass on all copy.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:57
01 · 15 Claude Design hacks
Promise of 15 hacks from simple to advanced, with a prompt pack for every one.
00:57 – 02:31
02 · Hack 1: Motion graphics from a reference
Give Claude a reference clip, your brand assets and a short plan, then direct it like a camera crew.
02:31 – 03:34
03 · Hack 2: Looping animations
One idea per looping graphic that starts and ends on the same frame; always request three style variations.
03:34 – 05:17
04 · Hack 3: Premium micro-interactions
Hover lifts, soft presses and counting numbers, plus motion libraries like LottieFiles, transitions.dev, 60fps and Motion Primitives.
05:17 – 07:58
05 · Hack 4: Build a brand guideline
Model a guideline on Spotify or Adobe, find decks on deck.gallery, and build a logo collage from logosystem.co for Claude to riff on.
07:58 – 09:47
06 · Images and video inside Claude
Connecting Higgsfield via MCP so Claude can generate on-brand campaign images, with visualjournal.it and rebrand.gallery for references.
09:47 – 13:48
07 · Hack 5: Edit your AI designs
Linearity imports a brand from its URL and generates editable social posts you can tweak on a canvas.
13:48 – 14:41
08 · Connect your brand to Claude
Linearity's MCP connector exposes the extracted brand system and assets to Claude Desktop.
14:41 – 17:18
09 · Hack 6: Fonts and icons
Typewolf, Fonts In Use, WhatTheFont and Fontshare for type; Flaticon and Icons8 to replace text-heavy explanations.
17:18 – 19:48
10 · Hack 7: Design inspiration galleries
Section-by-section galleries: navbar.gallery, footer.design, cta.gallery, 404s.design, Unsection, bento grids, 60fps.
19:48 – 21:04
11 · Hack 8: Mobbin and Refero
Every screen of real apps like Duolingo and Revolut to show Claude complete flows by category.
21:04 – 24:32
12 · Hack 9: The design loop
A critic sub-agent judges output against a gold-standard reference from Savee; recreations of a poster, a Porsche spot and an animated 404.
24:32 – 24:52
13 · Hack 10: Five-agent design check
Every design runs past five specialist reviewer agents before approval.
24:52 – 25:29
14 · Masterclass pitch
Pitch for the paid Claude Code and Claude Design masterclass plus the Agentic OS.
25:29 – 26:45
15 · Hack 11: Don't Make Me Think
Simplicity bias and the glance test; text density was the top flaw across hundreds of roasted sites.
26:45 – 28:44
16 · Hack 12: Slop Monster
A free repo that rewrites AI-sounding copy across vocabulary, sentence patterns, punctuation and three-item lists.
28:44 – 29:51
17 · Simplified Technical English
Using the aerospace ASD-STE100 standard to make Claude talk and write plainly.
29:51 – 31:42
18 · Hack 13: Recreate any poster
Drop a Savee poster plus your own brand screenshots into Claude and get an on-brand poster with your content.
31:42 – 32:38
19 · Hack 14: 3D websites
A 3D website skill that asks questions and generates scroll animations like fruit falling into a smoothie cup.
32:38 – 33:17
20 · Claude motion design
Interactive generated elements, including a Claude mascot that follows the cursor and jumps on click.
33:17 – 34:36
21 · Hack 15: Your design operating system
A personal design library with metadata and visual search that feeds references straight back into generation.
34:36 – 34:51
22 · Do this next
Hand-off to the next video on combining design with business systems.
Lines worth screenshotting.
- Using Claude Design without a reference and a plan is like driving a Ferrari stuck in first gear.
- A motion graphic that starts and ends on the same frame turns a static slide into a loop that holds attention on Reels and in presentations.
- Always ask Claude for three style variations of a graphic, then pick, because choosing is faster than describing what you want.
- Claude will not add hover lifts, soft presses or counting numbers on its own, and those small touches are what make a design feel expensive.
- Put every color, typeface and rule into one brand file you can hand to Claude anywhere, and consistency stops depending on your memory.
- Paste a famous brand's guideline structure into Claude and ask for your own guideline in the same structure with entirely unique content.
- Most people cannot describe the logo they want, so drop a collage of logos you like into Claude and ask for nine options inspired by them.
- Fonts are the fastest tell of sloppy AI design, so screenshot a font you like and ask Claude for the closest free-license match.
- Design sections one at a time from dedicated galleries for navbars, footers, CTAs and 404 pages, then assemble the page.
- How a brand treats its 404 page signals how seriously it treats its paid product.
- Mobbin and Refero capture every screen of apps like Duolingo and Revolut, so you can show Claude a whole real sign-up flow instead of one screenshot.
- A design loop gives Claude a gold-standard reference and a critic sub-agent, and Claude only returns once the critic agrees the output matches.
- You can often tell a design looks great without knowing why; making Claude deconstruct the reference turns taste into a written blueprint.
- After roasting hundreds of community websites, the single most common problem was text density: too much going on per page.
- A page passes the glance test when one image explains the offer, like a globe with cash for a global money-transfer app.
- AI copy gives itself away through three-item adjective lists, 'not just X but Y' contrasts and puffed-up verbs, and each can be replaced with a concrete fact.
- ASD-STE100 Simplified Technical English, the aerospace maintenance-manual standard, has about 900 approved words and one instruction per sentence, which makes it a strong style rule for an AI assistant.
Give Claude taste before you ask for design
WHAT TO LEARN
Claude's design quality tracks the references, rules and review loops you give it, so the work is curating inspiration and enforcing standards, not writing longer prompts.
02Hack 1: Motion graphics from a reference
- Brief motion like a director: a reference clip, your logos and colors, and a short plan beat a single clever prompt every time.
03Hack 2: Looping animations
- Ask for three style variations of any graphic, because picking between options is faster and more accurate than describing taste in words.
- Make looping graphics start and end on the same frame so they replay seamlessly in Reels, slides and video b-roll.
04Hack 3: Premium micro-interactions
- Request micro-interactions explicitly; hover lifts, soft presses and counting numbers will not appear unless you name them.
- Pull ready-made motion from libraries like LottieFiles, transitions.dev and Motion Primitives instead of asking Claude to invent every animation.
05Hack 4: Build a brand guideline
- Copy the structure of a respected brand guideline such as Spotify's and ask Claude to fill it with entirely original rules for your brand.
- Show Claude a collage of logos you like and ask for nine options, since most people cannot articulate a logo style but can recognize one.
06Images and video inside Claude
- Connect an image and video generator to Claude through MCP so campaign images can use your exact logo and color scheme in one step.
07Hack 5: Edit your AI designs
- Generated designs need an editable layer; a canvas tool that imports your brand from a URL lets you resize, restyle and retype AI output.
08Connect your brand to Claude
- Exposing your brand system to Claude through an MCP connector keeps every later generation on-brand without re-uploading assets.
09Hack 6: Fonts and icons
- Swap default AI fonts first; screenshot a typeface you love and ask Claude for the closest free-license alternative.
- Replace explanatory text with icons from libraries like Flaticon or Icons8 so a page communicates without paragraphs.
10Hack 7: Design inspiration galleries
- Design a page section by section, borrowing from dedicated galleries for navbars, footers, CTAs, bento grids and 404 pages.
- Treat the 404 page as a quality signal; the detail on minor pages tells visitors how much care went into the product.
11Hack 8: Mobbin and Refero
- Show Claude a complete real app flow from Mobbin or Refero, not a single screenshot, when building onboarding or sign-up journeys.
- Browse references by category, such as finance or language learning, to model the best app in your exact niche.
12Hack 9: The design loop
- Pair every ambitious design request with a gold-standard reference and a critic sub-agent that blocks output until it matches.
- Have Claude deconstruct why a reference works, such as palette, overlay and focal point, so the recreation follows a blueprint instead of a vibe.
13Hack 10: Five-agent design check
- Run finished designs past several specialist reviewer agents, each checking one dimension, before you approve anything.
15Hack 11: Don't Make Me Think
- Cut text density first; it is the most common flaw on real sites, and a page should be understood at a glance.
- Test whether one image could carry the message, like a globe with cash for global payments, and generate several simpler versions to compare.
16Hack 12: Slop Monster
- Run all copy through an anti-slop pass that replaces adjective triplets, 'not just X but Y' contrasts and puffed verbs with concrete facts.
- Turn your anti-slop rules into a reusable skill so every page and post gets the same check by name.
17Simplified Technical English
- Instruct Claude to write in Simplified Technical English: active voice, one instruction per sentence, short paragraphs and a small vocabulary.
18Hack 13: Recreate any poster
- Recreate any poster style by pairing the reference image with screenshots of your own brand and the exact information it must contain.
19Hack 14: 3D websites
- Image-led scroll sites, like fruit falling into a cup, come from chaining generated image and video frames into the page, not hand animation.
21Hack 15: Your design operating system
- Keep a searchable personal library of every design you generate, tagged with metadata, so past work becomes the reference for the next piece.
Terms worth knowing.
- Claude Design
- Anthropic's visual design surface inside Claude that generates websites, slides, graphics and motion pieces from prompts and references.
- Micro-interaction
- A small animated response to user input, such as a button lifting on hover or a number counting up, that makes an interface feel polished.
- Lottie file
- A lightweight JSON-based animation format that plays vector animations on websites and apps, with large free libraries at LottieFiles.
- Brand guideline
- A document that records a brand's logos, colors, typography, voice and usage rules so every asset stays consistent.
- Bento grid
- A layout made of rectangular tiles of different sizes, each holding one stat, image or feature, popular for dashboards and feature sections.
- MCP
- Model Context Protocol, a standard way to connect outside tools and services to Claude so it can call them directly from a chat.
- Design loop
- A prompt or skill where Claude spawns a critic sub-agent that compares each draft to a reference design and keeps iterating until the critic approves.
- Gauntlet loop
- The general technique the design loop adapts: an agent's output is repeatedly checked by reviewer agents and revised until all of them pass it.
- System 1 thinking
- Fast, automatic, low-effort thinking; designing for it means a visitor understands a page at a glance without reading closely.
- ASD-STE100
- Simplified Technical English, a controlled-language standard from aerospace maintenance writing with a limited vocabulary, active voice and one instruction per sentence.
Things they pointed at.
Lines you could clip.
01:36
“Using Claude without motion design is like having a Ferrari stuck in first gear.”
18:25
“How you do anything is how you do everything. If this is the level of detail they put into a 404 page, how seriously do they take their actual paid product?”
23:41
“You may say this looks awesome, right? But you can't say why.”
26:05
“I did literally hundreds of these, and the biggest issue I found across all of them is text density.”
27:40
“Trusted, reliable and built to last turns into six nails per shingle, every shingle.”
29:18
“It was designed so that a stressed human can read fast and act without misunderstanding, which is exactly what you want from an AI assistant.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogy
I'm going to show you exactly how to build beautiful websites, design, and motion graphics with Claude Design 2 .0. And after hundreds of hours building with Claude Design, I'm going to show you 15 Claude hacks that will save you hours and turn Claude into a design genius. Starting from simple and building to advanced, and it will include stuff I haven't seen anywhere else.
So if you haven't already, grab that beautiful coffee and let's dive straight in. So let's begin with the very first Claude Design hack. Now, Claude Design itself...
has genuinely got brand new capabilities with Opus 5 .5. It can design incredible things like this. You can do so many different kinds of art style.
And yet most people look like slop. You can do these kinds of things in one shot. And by the end of the video, you're going to be able to use and build beautiful motion graphic animations, everything that you could possibly imagine like this.
Beginning though, of course, with the first thing we're going to cover, which is going to be the workflow. And I've got so many hacks, guys. I hope you're buckled in and ready.
My level one is motion graphics. And I'm also going to include down below for you guys the full Claude design prompting system. So everything we talk about in this video, guys, is going to be available for a prompt that you can literally come down, grab whenever you want to, and essentially replicate some of the stuff that we're going to talk about in this video.
So what do I mean when I say Claude motion design? Well, a lot of it is similar stuff that you've seen. just come over here to the GenZig operating system.
Let me show you the kinds of things that you can do with motion design. Now, the question, look, good motion design is one thing, but the question is, how do I actually go and build it? Everything that you're seeing on screen right now is something that I created with motion design.
How do you physically do that? Well, using Claude without motion design is like having a Ferrari stock in first gear. So the first thing that we're going to do is give Claude a reference and a plan.
We do this because you essentially want to explain what you want those motion graphics to look like. You hand it around. reference you explain what you want that thing to do and then essentially you just direct it for whatever the thing is that you want and the system to do this is give it a reference clip that you like something you find interesting provide it with your brand your different logos your colors and then sort of briefly explain it so you can do is literally copy this prompt by coming down to section one copy this right here and then you're ready to go for example this thing here that i built with glider all i did is gave it my own website so it came down and i said glider .com i pretty much just gave this website and said i want you to build me some beautiful birds a glowing logo and it generated this asset entirely and you can see here these are all the other kinds of motion graphics that people have generated using this entire system people have essentially gone ahead and created horses they've animated loads of different things which brings us on to level two level two essentially is the ability to get graphics to loop for you so the idea here is that we have one idea and one looping graphics instead of giving presentations we can actually create these beautiful animations that have the same start frame and end frame um it's basically
you know if you think about why we do this a still slide itself is quite static and not interesting and what is a good example of this this very thing that i'm showing you right now so essentially it can make any presentation doing significantly more engaging and all you're going to do to essentially go ahead and build this guys is very simple essentially you just explain what you want the thing to explain um ask for three different style variations and then essentially you're going to make sure that it finishes on a loop and for example if you're doing this with instagram reels which is something that i did when i get it go ahead and create for me different graphics i always ask it to generate three different styles so you can actually have a look through find out the ones you like the best and then select it and i have gotten tens and tens and tens of thousands of views using this exact strategy and even things like youtube videos it is pretty handy that you can do that again i'll put the prompt to the link so you can just go ahead and copy that now hack number three is how you can make any of your designs feel a lot more expensive so the idea is we're going to give small touches hover lift soft presses counter numbers how can you actually make the
vibe and feel of any design with cloud design just feel that little bit extra about a little bit premium a good example of that is this exact thing that i built here for my startup now check this out if i run you through this this entire thing i pretty much just prompted with cloud design using opus 5 .5 if you look at things like this you look at the hover animation you can see this for example was built with this all this sort of stuff here so part of the philosophy here was it goes through and checks the apps every one of these animations now you see this rolling animation and tech that looks super premium.
Now, cloud design wouldn't do that by itself, for example, right? So the question is, how do you go ahead and do that? Well, you can do things like this.
So this is an example, I'm having the birds go to the animation, come down and things are repairing. One of the sort of resources you can use is something called Lottie files. And what's cool about this is these are graphics that used to be included in websites.
But actually here, you can just go ahead and integrate them anywhere you want to say you'd like this cash emoji, right? So you'd like this, whatever the thing is, you can go ahead and save them this success. look familiar?
Brilliant. All you do is find the right one that you like. You can literally come down and copy it, even copy the URL and share that.
And they have loads of free resources on here too. Other good options are transitions .dev that show you some really cool crisp transitions. If you want to go and grab that, you also have this.
Again, all these websites will be down below in the description. You have 60 frames per second design, which is great. So you can see all these different kind of graphics and motions and how that all moves across.
You've got kinetics that essentially covers motion, how different things move. There are so many different things. You even have motion primitives.
There's a really crisp, nice set of designs that you can go. head and steal here. Now, hack four is how you can actually take any one of your businesses and create an incredible brand guideline for it.
Because without a proper brand guideline, it's tough to get any kind of consistency. So what we're going to do here, we're going to have one file that holds all of your colors, your types, your rules that you can hand to Claude anywhere. And this basically means Claude will remember exactly how you want things.
And all you're going to do is just go ahead and develop that. Now, thinking and knowing that you need a brand is one thing. But the question is, well, how do I actually go ahead and do that?
Well, we can build together something called a brand book using some pretty incredible resources that are completely free. So effectively, what we're going to do is find inspiration, we're going to turn them into a file.
And then essentially, we're just going to share that with Claude, whatever service we're using. And I've got again, a prompt here, you can go ahead and copy and share that with Claude and it'll do it. And again, you can go ahead and literally get so many different things.
So some of the places I highly recommend you go and check out when building out your brand, we start by finding existing brilliant brand guidelines. So you can go ahead and find some of the best brands online and actually see what they're doing to model it.
So this is, for example, all the brand guidelines for Spotify. What I could do is literally copy this, head over to Claude, and I could say... I really love the way that Spotify have laid out their brand guidelines.
I would like you to help me to develop my own brand guidelines using this exact structure, but make everything completely unique. So I just finished with Glider that come down and I give that as a sort of like a reference file, right? And then it can go ahead and use the documentation for Spotify.
Or maybe you prefer Adobe. You can do the exact same thing. As you see, they have a lot more kind of a text in it, but more purpose, vision, that kind of thing.
Then you may want to go ahead and build a beautiful deck design with Claude to do that. What you can do is this way. website here, which is deck .gallery.
And you can see all these beautiful decks that exist to get inspiration and inspiration is really important when building things. So you can come through here, find ones you think great, you've got Instacart, some of the best, fastest growing brands essentially on the planet. And it also includes overviews of slides.
So eventually any kind of slide that you want to go and find, maybe you like the look of this one. Again, there's like paid options, there's free options, you can play around with it. And the next thing is to lock down your logo because a website without a logo isn't a website at all.
Logosystem .co is really cool. can come down here and essentially just browse and find good inspiration so what you would often do is just come down and copy the images come back over to claude and essentially you're looking for a bit of a collage so let's say i like the near right let's say we come down and i love the simplicity of lift we'll come and grab that check that one out come over and just drop down a few different logos that you actually like once you've gotten a few that you think are decent because not everybody can articulate what they look like even if it's cool open claw one here for example maybe like this with the graphic bird then you come back over to claude and just say i really love these of designs inspired by these give me nine options of a logo for a speech to tech startup that is all about generating beautiful images now the way that i'm actually generating these images inside cloud and i do this for everything is using the higgs field cli if you know already feel free to skip this bit but if not essentially what higgs will let you do is use the best image generation models video generation models it is unbelievably simple i do all my generation over here in fact you can even come over here if you haven't set it up and i'll put a link down below so you can
can do this you just click over to mcp this section right here you're going to see this you're just going to click on cloud or chat gpt and you just click on connect higgs field and then this page will open you click on continue come down to the bottom click on add it'll check the connection you click on connect this will then open it up for you in a new window and then you can do anything and you'll notice like all the presentations graphics i bought in this video were using higgs field essentially so it just makes it way easier to go ahead and build things and then effectively it will all be completely connected and you can generate anything and whilst that's cooking the background If you're looking for inspiration, different campaign, you can go to visualjournal .it.
This effectively is just a collection of beautiful different designs that you like. So say, for example, I like the look of... I don't know, this bottle, right?
So say I like this image. I can just copy this image, come back over to Claude, for example, drop that in and say, hey, I love this. I want to do something similar for Glido.
Could you add a Glido logo to one of the bottles using our exact color scheme? And just go ahead and use Higgs field for that. Thank you.
And then it comes back and it's generated these beautiful images like so. And I think it's great. It's really captured the essence of the examples that we gave it.
And using Claude design, you can build beautiful graphics like this. And then likewise, we've gone ahead. It's gone to my website, understood what that's about and added the logo.
to these beautiful bottles. Does Clouder do bottles? No, it doesn't.
But you get the idea. You can effectively build all of this stuff with core design. Then for visual identities, you can move to rebrand .gallery to see all the different kind of brand styles to see.
All these beautiful different ways that you can do it. And again, this is all stuff that you can feed to Claude to build essentially your own unique brand identity. Now, Claude is incredible at building and generating websites and graphics and images and designs.
But sometimes with a brand, we need to get everything. We need to get X posts, we need to get LinkedIn posts, Instagram, and we need the ability to edit it, which is where the next tool comes involved here. And this is something called linearity.
So what linearity will let us do is only create tools with Claude or whatever models we want, but essentially then... edit it share it with our teams and make it highly configurable they've got a really cool flashy 3d website so you can prompt and design logical things go ahead describe the thing that you want tweak it and then ahead basically go ahead and use that anywhere you want to so to begin you can actually go over to linearity and create an account now once you land inside linearity come over first of all to the side on the left and click on brands here for example you can actually go ahead and create your own brand for example if i click on this and click on new brand it's actually pretty impressive how it does this.
So I can enter in a website brand name. So let's go ahead and enter glido .com as a for instance, once you've done that, you can actually view the brand. Now I'm already set up for this.
But again, it could be anything that you want. Let's say for example, monzo .com, whatever the thing is, I literally come down here and I click on import. And essentially, I can do use this set up pro brand feature, I can upload my own design books if I want to.
Now the idea here is it goes ahead and imports all the assets, all the color schemes, typography, every thing from that brand and has it in one design system that we can basically use whenever we want to and to show you what that looks like in reality if i come onto glado for example you can see it's captured the logo it's got typography colors all this kind of stuff and essentially it's kind of if you like the magnum opus of the glado brand so i can do this whatever i want to but what we want to do is to actually create stuff so if you come down then and click on create and then click on generate design you're gonna land on a page like this with some nice curly arrows so let's go ahead and ask it to build something using this brand system so i would like you to go ahead and create for me a Instagram post announcing that Glido is now live on Windows.
Give me three different ideas or designs based on my design palette. And then right here, we can select the individual brand that we're using, which of course is Glido, and then just go ahead and send that off. And just like that, you'll almost see this thing appearing now in the background.
Now, the way that I would think about linearity as a platform using Claude here is I find this a combination of in a way because it looks very similar to canva in the sense that you get this huge canvas style where i can double click in and see things move things around and edit them once they're there now we have to clarify what format we want now this is asking the questions so we're going to go with the classic standard one by one come down and click on submit obviously you can if you want to just go and find the exact thumbnails that you need the exact proportions you need for whatever the thing is that you're actually building and as you can see guys we now have these images that are being dropped in that we can use for instagram now three different designs and style ideas but what's really cool here is we can actually come down and edit it say for example we think well this is great but what if we want to make that slightly larger well we can do that we can edit it around and do this and this is really one of the cool things that we can do here is the editability and the fact that we can make things different so we're not just kind of firing up a pipe we get to do it maybe we want to make this windows release larger okay cool and then we want to edit this text and come down and do that
We can basically change the fonts to anything we want to. And maybe you want to make this logo a bit more prominent. We can bring that over.
Essentially, it's editable in any way that you want to. And if you've ever used something like, I would say, Photoshop or any of these kind like Figma, a lot of this will be really familiar for you. But essentially, you can build these designer.
and then just make tweaks very easily. And what we can do when we have the designs we like is come over and click share down on the right -hand side, share that with teams, download them, do whatever we like. And then on the left -hand side, you can click templates if you want inspiration and have a look at some pre -existing things.
You can also go down and add elements. Again, it's got that kind of Canva kind of style where you can bring things into it. You can text and even upload images to effectively be able to design yourself whilst also using AI.
But then the cool thing is if you actually come back, you can come down here on the right -hand side and click on connect to. And you can connect this to Claude via the MCP by clicking on, say, Claude Desktop. You come down and then click on Continue.
an app that gives you all the instructions you need to follow. You can copy this, follow the instructions, and then you'll actually be able to connect to your entire brand system. The core point being with this, guys, is that it has everything for your team, whatever it is that you're trying to build, any different kind of design systems, any kind of projects or different formats, different sizes, you can go ahead and build in one design system.
And then on the left -hand side, if you come and click on brands, for example, you can see now I've got the Monzo thing here. I can even check out the Monzo assets. And essentially, these are all the assets that is extracted from it.
Again, I could come down. and check out Glido and see the different assets that it has for the brand. Now, bear in mind, I didn't actually go and add these.
I just went ahead and extracted them itself. And now it all sits there. So I've got all this beautiful imagery.
I can edit it. I can create to it and do anything that I like. Now, this takes us nicely onto level six.
Now, the fastest way that you can actually go ahead and level up the quality of your designs with Chord Code and Chord Design is to use fonts and icons. Now, you'll know that you can easily spot a bad, sloppy AI design based on the fonts that it's used. very kind of looking film.
So some places you can do this if you want to. Obviously, first option is if you want. You can generate these using Higgs field or any AI image video generator.
Obviously, I use Higgs field for this sort of stuff. Now look how gorgeous this is. This has all been generated by Higgsfield.
So this is a unique way of generating different images, which is gorgeous. Look at this, we've got down here, you've got Otto, Hugh, Canto. This is if you want to invent your own typeface and you can completely do that.
Now for the text on your website, you can go ahead and use things like typo. This will show you lots of different... fonts that are crushing it right now and you can pick ones that you like.
In addition to that, you can also go ahead and check out fontsanduse .com. I really like this website because let's say that you love Halo because every sane person loves Halo. I love the way that they've integrated that font.
I have a specific project that would look great from that. You can go ahead and do it. Now, let's say, for example, you like this one.
All you can do is come over and you can literally copy this image like so. Then simply come over to Claude and say, hey there, I want to build a landing page. Could you please do so with...
text from this image. I'm really inspired by it. Find for me the closest available free license to use this exact font.
And then you can come down, guys, paste in the link or paste in the image, and then you can actually go ahead and use that. Obviously, you just have to check the licensing for all the different fonts. But what I often do is get Clover to generate for me, you know, six to nine different versions of fonts that I might like.
Another good one here is What The Font, which is a pretty helpful website. You also have FontShare, which is loads of gorgeous fonts. You can literally come through and find one that you like.
And if you're ever not sure, you can pretty much come here and screenshot this and say, hey there, Claude, I really like this. Could you tell me what font this is and build mine in a similar way.
Then another great way to level up a design on your website is to use icons. I personally like using flat icon. You can get loads in different styles.
So instead of saying something like, hey, there are three things you can do, or hey, this is as popular as Lord of the Rings, or this will save you three hours. You can just use beautiful graphics and icons and you can download these. Another option is something called icons eight that show you illustrations icons.
And I actually use this in my first tech startup on the website to help illustrate basically the idea. And I even built these into the app, which is great.
So you can come down and search for different things. Let's say I'm looking for popcorn. You can find visual styles that bop with you.
And then basically, once you get a subscription on these platforms, you can go ahead and download them. And I think some of them let you do it for free if you give them attribution as well. Level nine is all about getting excellent inspiration -filled designs because a strength of a design is largely determined by what we're actually looking at with this.
So what's the idea? here is that we can actually go ahead and find different aspects and different sort of inspirations to go ahead and build websites, assets, graphics, anything that you like.
Navbar .gallery is a great place to, believe it or not, find out the best navigation bars on the planet. So if you seriously want to look at the navigation bar and navigation system you have, you can check out this website. Then we have a really cool one, which is called footer .design.
So this is going to show you some of the most beautiful footers that exist on websites, which I think is really cool and crisp. The idea is you can kind of Frankenstein out and build out your dream footers based on this. stuff.
So you can kind of treat it like I showed you here. For example, you kind of think about each one is an individual thing and you snipe and build for that specific section itself really helps close to do that. We also have cta .gallery cta .gallery basically just shows you a combination of the most gorgeous, potentially high converting different call to actions that exist.
So if you're thinking, damn, I want to get people to sign up, but I don't know what that would look like. You can come here and find different examples of that. Then you've got 404s .sdesign.
Now, this is an interesting one because generally speaking in marketing and design, how you do anything is how you do everything. And the reason why brands put such a good emphasis onto 404 pages. is largely because if this is the level of detail and attention they're willing to put into a 404 page how seriously do they take their actual paid product itself so you want 404 inspiration you can find one here for example and lean on these designs to build your own on section .com is another great example of where you can get some fantastic design inspiration from maybe you want to do some bento grids which is a really cool in sort of um if you like style right now which effectively is instead of having a big block you show multiple different assets this can be great for dashboards this can be for websites to show different features.
Again, you can come down here, find one that you think is cool, a combination of images and numbers and dates. You can do this in your operating systems. For example, hey, Gledo, open up my agentic operating system, Jarvis.
This is the exact same thing that I do in my own operating system, just mainly because I find the Bento grid is a really helpful way to do this. So you can see I have different numbers here and systems, and I'm using fictitious data, but you get the idea. It just makes it easy to use and understand because it just looks better.
If you want to get designs from good apps, you can try 60fps .design. This is just basically going to show you wonderful different animations about how they're doing, basically not just a screenshot, but the videos behind it and the graphics and how that all links together.
Then this takes us very clearly onto level nine or hack number nine. Now this one's really interesting. So the idea with this one essentially is that we can find...
Basically, who are the best people in the world at doing the thing that you want? Maybe a finance app. Maybe it's a language learning app.
Well, there are actually systems and places we can go to go ahead and use these. Two that I've been using a lot recently are Mobin and Refero. They are fantastic.
So for example, mobin .com is a really interesting one. You can come down here and search by, let's say, finance. Okay, you can do by apps, you can do by sites.
So say, for example, I want to grab an app. I can now come down and look at this. So here's one for Duolingo, for example, and here is one for Revolut.
So if I'm building an app or a journey, I can come down and actually look at this, copy this and say, hey, I love this. And it's great because it just adds different details. And essentially here, they've captured every screen that exists for that particular app, which is great.
They've also got a section here for sites, which is really freaking helpful because you can go and search for sites as well. I also really love, as you can see, Duolingo. So maybe you want to do a, hey, you've leveled up page.
Well, you can use this as. inspiration to see what that looks like equally you've got referral .design if you click on styles on the left hand side you can come down and see all of these different beautiful designs look fantastic and find websites that really kind of lean in with the thing that you're building now level nine is one of the most powerful actual design systems that i have ever used and it's called the design loop and when you combine the design loop with higgs field for generating images and videos it genuinely creates stuff that is going to blow your mind i have never seen anything that i can do literally on a one shot that creates something that is absolutely spectacular.
So the idea with this is with the design look is that you give Claude what great looks like. So you give it a gold standard design and effectively you're going to give it a prompt. Now that prompt down here is going to be linked as you can see on the left hand side.
So you can just literally copy and paste this one and essentially what it will do for you is get Claude to create a sub agent which is going to be a critic and effectively rather than coming back and forth with you it then assesses its output against your reference material and it will only come back once it's reached it and all of the agents have agreed that it hits the design brief.
So let's say, for example, you're on save .com, which is a great, actually like a repository. Designers love this. I freaking love this.
And you want to look for something like poster videos, okay? Whatever the thing is. And you're looking for some kind of design inspiration that you want it to hit.
I'll give you an example of one that I did previously just to show you how powerful this is. So for example, I had this one here, which I thought was gorgeous, right? thing.
It's got this beautiful red flame effect, 1957, Aurovic, whatever the thing is. All you're going to do is let you come down and copy this video, or we can let you come down and just download it. Then go down below and grab this free skill for you in your resource pack and just copy and paste all of it.
Then head over to Claude. And in Claude, you'll have it here. And you're going to say, hey there, I want to go ahead and use my design loop skill with Higgs field image and video generation to recreate this for me.
But instead of that text, I want it to have 1992. and have jr in it all right you're going to come down and then you're going to paste that text in if you don't have a skill it's fantastic and essentially it's a design version of a really cool technique called the gauntlet loop which is fantastic i've done a full video on this i'll link it on screen if you want to learn more about it and i'm not joking you literally using higgs field this is the output that i got back with 1992 as you can see look at how carefully it's gone ahead and done this and this is all generated using Higgs field and the design loop prompt.
That's it. I am amazed at how freaking good it's done this. Essentially, there's nothing that you can't recreate.
You can judge for yourself to see just how similar they are. And you can do it in any kind of dimensions that you want to. If I like that idea, but I wanted to use yellow instead, or I wanted to have it in something that would fit the Instagram, I can do that using this with Claude as well.
It is fantastic. Likewise, guys, I did the exact same thing. Now, this on the left here, for example, looks fantastic.
And this is why the design loop is so powerful because... You may say this looks awesome, right? But you can't say why.
Now, it turns out there's a few things going on with this. The dimensions, it matched identically. Again, I just used Hicksfield and Claude for this.
And literally it said it needs a muted palette with this kind of overlay. Awesome. And then you'll notice, can you see how the focus point is all in the middle?
So Porsche is this beautiful design. I did the same thing with Claude. Basically, how do I show Claude and imagery and photography?
And again, it built this entire thing that's 23 seconds long. How to do that? It just generated, I think it was like loads and loads of images with a certain time difference.
So the cool thing that the design loop does is it deconstructs everything that's happening. So you're giving Claude the actual design blueprints. This is by far the best, most powerful design skill that I've ever seen.
I did the same thing to design this 404 animated page, guys, just from an image so it can be used literally. for anything. Hack number 10, guys, is about using essentially an agent checklist to go ahead and make sure that everything is fine.
So effectively, this prompt will basically run any design that you make through five very specialized agents that will check for completely different things. And only when it's done all of those individual checks will it then go ahead and approve the design. And by the way, guys, if this sounds like I'm speaking , I'm going to put a link down below for my full Claude Code and Claude Design masterclass that will take you from complete foundations.
It includes stuff that I have never shared on YouTube, including a brand new design systems masterclass that I'm literally recording this week. It's going to go through power features, how to build memory systems, build beautiful websites. And you also get access to my entire agentic operating system that breaks down all this in detail.
You get access to all of my memory systems here that go through everything on the rings, the design, all this stuff in practice is in media access. I'll put a link down below so you can use that to level up and absolutely crush it. Now, after we've understood...
these five agent principles that run through multiple different tracks to actually improve the quality of your output we need to look at the next one now this one is really important remember these are getting more important as we go along this one is a design principle that will drastically improve the quality of any core design thing that you do now the idea with this is called don't make me think.
It's based on a book that effectively says that you want to be using system one thinking rather than system two. So essentially, we want to have a simplicity bias. You know, I asked everybody in my community to post their website so I could roast it.
I did literally hundreds of these, by the way. And the biggest issue I found across all of them is text density. There was way too much going on each page.
Don't make me think things about if I land on the page, let's say I'm on this and I'm checking out a website here, for example, can I understand what it's actually about. Does it pass a glance test?
For example, this money for here, there and everywhere, right? The point is that your money can be transferred globally. And the way it shows you that is a globe with cash.
Really, really important. And you can use some of the prompts in the system to make sure does it actually pass a simplicity test? And are we not taking the user's attention for granted?
And what you can do with this goal, guys, is generate multiple versions of the same design to make sure that you're using the simplest that actually goes ahead and communicates the process as simply as possible. Now, level 12 solves the biggest... AI slop issue that exists right now.
And that is actually making something sound like it has been written by a human. Now effectively to do this, we're going to go ahead and use a very, very powerful repo called slop monster. I actually created this.
It's 100 % for free for you to use. I use it for. everything.
And the way that I built this is I found the top anti -slop AI writing repos. And I basically took the best aspects from all of them and combined it into the slop monster to destroy AI slop once and for all. But then I took it one step further and I solved something that I didn't see anyone else doing, which is the sales and marketing system.
And essentially this will come through and check it across four or five levels, vocabulary, sentence patterns, punctuations. three item lists absolutely everything and just to show you what that looks like so you can understand what the before and after looks like check this out ai slop will say something like this trusted reliable and built to last turns into six nails per shingle every shingle.
Instead of saying, you know, not just X, but Y, not just a roof, but peace of mind becomes a written scope and a fixed number before anybody climbs a ladder. Pulled Verbs, we leverage industry -leading materials to deliver unparalleled protection. We source materials from manufacturers who test for wind, hail, and sun.
Again, you can see the examples of how this has bled into it. All you're ever going to do, guys, if you have a website, is just copy the link for this basically this repo here and head over to Claude. And then literally say, hey there, I would like you to go ahead for me and run all the copy through the slop monster, okay?
You can even turn this into a skill by the end by saying, turn this into a skill such that when I say slop monster, you basically run all the copy through this. And not only will this make it sound like it's been written by an actual human because we even use the right models for that, it will also understand the context you're in.
If it's a post, if it's a website, and make sure you're using the correct sales copy. I use this one all the time. My community absolutely loves it.
I highly recommend it. recommend you add it to your cloud design. And then you can go one step further by using this.
Now, essentially what this does here is it also solves the cloud verbosity problem, which means it talks to you more like a human and it's not, you know, it just gives you sort of responses that require you to think so much about it. And what we can do here with any text to produce is what we call the ASD -ST100 simplified technical English.
So this is a real writing standard from the aerospace industry. Airlines use it for maintenance manuals because when you're fixing a plane, you don't want to hear about Shakespearean English. and you don't need to be written like, you know, Emily Bronte wrote it essentially.
It has 900 approved words, one meaning... per word active voice one instruction per sentence maximum six cents per paragraph there's no phrasal verbs and it was designed so that a stressed human can read fast and act without misunderstanding which is exactly what you want from an ai assistant again just copy all of this head over to claude and say hey there going forward i would like for you to communicate to me in this style and when requested i also want you to improve my copy such that it actually communicates in the below standard and with that guys it will then go ahead and essentially improve the way that it communicates with you in your designs and also natural conversation.
Now, hack 13 is the fact that Cloud itself and using Cloud Design can recreate essentially any kind of graphic that you want to. So let's take, for example, save .com. Now again, save is pretty fantastic.
If I want to come down and find a poster, let's say I want to go and find one that's really interesting to me, right? I can find any style I literally want. So let's say, for example, I come down and I pull one up here as an example, this one here.
And I love the design. design and vibe of it. Well, what you can do with cloud now is you can actually copy the image.
Go over there, drop it in and say, hey there, I would like you to create for me an image in this style using my own references and I want you to break down the following information. Okay, then just give it loads of information that you want the poster to say. Then what you can do if you want to is you can actually go over then to any website you want.
Let's say that you're in my community, for example, and I want to say, hey, I've got all these beautiful courses and I really like my own design style that kind of guides people through learning everything, right? I can screenshot this. I can come back over to Claude and I can drop that in there.
say hey i've attached some design references that i would like you to integrate into the image all right and then you can say hey talk about the fact that i've got a brand new agentic operating system i'm doing it every week and i've got all these incredible courses that are dropping all right then you drop all the information and then essentially when it's done it can come back and give you an image like this everything dropping this month and you can see basically claude's gone and grabbed the wizard Is the wizard there?
Yeah, the wizard's there. Awesome. It's got for us the dragon.
It's got the two ninjas. It's even been able to capture the fact that it's got a beautiful clawed ninja on his head, which is really freaking cool. And on top of that, it's also in one shot and got all of the new courses and systems I'm dropping, the agentic OS, the essentials, life, business, learning, creative automation, just the stuff that I'm dropping this month inside the community.
And you can use this to essentially build any kind of product or poster or image that you like, which just takes it to a completely new level. And speaking of... levels, we need to talk about level 14, which is 3d websites.
Now, what's really fascinating about 3d websites, guys, is that we can combine core design and graphic design with the ability to create beautiful show stopping animations. And I'm going to put a link for you down below. So you can go ahead and grab my 3d website skill.
Again, I built this using Higgs field and the best models that exist. And essentially what this skill will do guys, is it will go ahead. and ask you questions, okay?
So say, for example, I'm this website here, and I'm like, I want to build something that shows that we're a smoothie brand. And you can see we've got the fruit dropping down. It comes all the way through, lands in a cup, and have this beautiful interactivity.
Again, all I'm doing is just calling one API or using CLI with Higgs field, and it builds everything like this. So this is a really easy, crisp way to do it. I have spent hundreds and hundreds of dollars on image generation.
So take this skill from me so you don't have to worry about it, and you can just let you generate stuff like this. whenever you want to. Now, the new level up really is how you can actually use Claude motion graphic design to take this to a completely new level.
And I've got a video coming out on that very shortly. If it's posted, I'll link it here. If not, you need to check on that one as well tomorrow.
For example, let's say that you've got a nap bar and you want to choose design. This is completely generated by Claude, guys. How ridiculous is that?
I even created this one here, guys, where this Claude will literally follow you around and try and capture everything. And you can even click and make him jump. I mean, this is the stuff.
that you literally could not have done before. And you can adopt Claude if you want to. And he freaking loves it.
So what a great way to be able to click to your stuff. This is absolutely insane. And again, I've got a full video breaking this down if you want to check that one out.
And level 15 is how we can take this to a completely new level using something called the agentic operating system. So if I land on this agentic operating system, you can see in design now, guys, you can build anything you want to. I have the library of everything I built.
I even built, guys, a studio. So essentially where this really gets interesting is you can usually do anything. So this is one of the...
I built out for Instagram Reels that just auto -generates everything for me. You can do things to basically view all the designs. all these different beautiful motion graphics.
So when I'm doing my Instagram content, I can go ahead and do that. And again, all this is powered by Claude design. And what's really interesting here, guys, is I have my own library.
So I can come down here and search for burger. What's interesting is anything, okay, that has the word burger in the metadata, or for example, just looks like a burger will pop up. And let's say that I now want to go and use this with Claude to build out a website, I can click on reference.
And now I've built my own Higgs field here that I can use with the Higgs field API if I wish and just say, hey there, go ahead and build me and turn this into a beautiful video or whatever I want to do, right? I can choose the model.
I can do anything I want to in the design operating system. And very importantly, guys, it combines design with functionality. So you can see all your numbers, all your metrics.
I can come down to the memory sections. I can even go ahead and find things. For example, I can ask it questions and those things will pop up.
I can see all in beautiful detail. And this is where we bring both things together. But understanding design hacks is one thing.
But if you don't know how to combine design with your own business and productivity systems, you're going to fall behind, which is why the next thing that we're going to do is learn how to do exactly that inside this video right now.
The Hook
The bait, then the rug-pull.
The title promises a top-1% skill level, and the first line backs it with a number: 15 hacks distilled from hundreds of hours inside Claude Design. The opening montage shows meadow landing pages and poster recreations so the promise is visible before a single hack is explained.
Named ideas worth stealing.
01:38list
Reference + plan motion workflow
- A reference clip you like
- Your brand: logos and colors
- A short plan of what it should do
- Direct it like a camera crew
One prompt gives the average clip; a reference, a plan and a brief give a professional one.
Steal forany motion graphic or animated hero
03:00list
Looping graphic recipe
- One idea per graphic
- Ask for three style variations
- Same start and end frame
Replace static slides with animations that loop seamlessly for Reels, presentations and YouTube.
Steal forInstagram Reels b-roll and slide decks
05:46model
Brand book from inspiration
- Find a great guideline (Spotify, Adobe)
- Copy its structure into Claude
- Ask for a unique guideline in that structure
- Add decks, logos, campaigns and identities as references
Find inspiration, turn it into one file, and hand that file to Claude wherever you work.
Steal forany new brand or product launch
21:20model
The design loop
- Pick a gold-standard reference
- Paste the design loop prompt or skill
- Claude spawns a critic sub-agent
- Critic compares output to the reference
- Return only when the critic agrees
A design-specific version of the gauntlet loop that deconstructs a reference into a blueprint and iterates without human back-and-forth.
Steal forrecreating posters, ads and landing sections from a reference
24:31concept
Five-agent design check
Every design passes through five specialized reviewer agents that each check something different; approval only when all pass.
Steal forQA before shipping any page
25:48concept
Don't Make Me Think glance test
Design for System 1 thinking: a visitor should understand the page at a glance, so cut text density and let one image carry the message.
Steal forlanding page hero sections
27:20list
Slop Monster checks
- Vocabulary
- Sentence patterns
- Punctuation
- Three-item lists
- Sales and marketing context
An anti-slop rewrite pass that swaps AI tells for concrete specifics, combining the best open anti-slop writing repos.
Steal forall website and social copy
29:12list
ASD-STE100 rules
- About 900 approved words
- One meaning per word
- Active voice
- One instruction per sentence
- Max six sentences per paragraph
- No phrasal verbs
An aerospace writing standard built so a stressed human can read fast and act without misunderstanding.
Steal forassistant style instructions and help docs
How they asked for the click.
VERBAL ASK
24:52product
“I'm going to put a link down below for my full Claude Code and Claude Design masterclass that will take you from complete foundations.”
Dropped mid-video right after the most technical hack, framed as help if the jargon felt like 'design Spanish'; a soft but well-timed pitch. Free prompt packs are offered repeatedly as lead magnets throughout.
MENTIONED ON CAMERA
Visual structure at a glance.
