# 25 Tricks to Level Up Claude Design in 13 Mins

Channel: Jay E | RoboNuggets
Video: https://www.youtube.com/watch?v=_SVU3oC4JX8
Duration: 14 min
Language: English
Words: 2737
Transcript page: https://viewrankai.com/tools/youtube-transcript/_SVU3oC4JX8

---

[0:00] These are the Claude design tricks that can take you from a complete beginner to creating beautiful websites, user interfaces, and motion graphics like the ones you're seeing in this video. So, today we're going from the easy stuff that anyone can do within minutes all the way to some advanced power user [music] tricks including some bonus ones that I haven't heard anyone else talk about. And if you're new, my name is Jay. I spent over a decade working with brands you may know, have been in AI since my master's in data science. Now, I'm running an AI business in one of the largest AI communities globally. So,

[0:30] let's dive into it starting off with the easy ones. Number one, design systems. So, this is where everything starts when you use Claude or really any AI agent when it comes to design. The simplest way to create one is to open Claude design at claude.ai/design, go to design systems and hit create. Here, you can describe your business, add your fonts, logos, and assets. And you don't even need to start from scratch because you can drop in a deck that you like, a website, or just a screenshot, turn that design system, and Claude pulls out the colors, the fonts, and the components for you. Number two, give Claude 2000+ design styles. So,

[1:09] there's a site called styles.referral.design, and it's a gallery of over 2000 real design systems like the ones from Mercury, Linear, and Apple, and they're written in a way that Claude can actually read with the colors, the type, and spacing all laid out. And so, what you can do is open the one that you like, copy the design system, paste that into Claude, mention any tweaks that you want, and Claude creates a high-quality design system for you in one go. Number three, let Claude shortlist the top three. Now, here's a trick with that referral gallery and really any gallery of design systems that you find on the

[1:43] web. It's that you do not need to browse it yourself because there are thousands of designs in that list, right? Instead, what you can do is to give Claude the link and say to just go through this gallery and find me three design systems that is closest to my business and give me the links to those. It then filters them down to your niche in one go, which

[2:01] is just much easier for you to find. Number four is to build design systems directly in Claude Code. Now, the Claude design web app that you may be used to, the web version at this URL, it is great, but it does have its limits. A big one is that it's web base, so it can't really get to the files on your computer unless you upload them individually. The good news is if you're already using Claude Code or even Claude Co-work, creating a design system is just a matter of making a custom skill that holds that design system. For example, you can send this prompt to make a {slash} Duolingo skill, which

[2:34] creates material in that Duolingo style every time you invoke it. In fact, most of the other tips in this video also work in Claude Code just because of how flexible that tool is. Number five, fonts. So, the fastest way to spot a vibe-coded design is the font because beginners just leave whatever default Claude gives them. A good tip then is to go to sites like FontShare or Fontesk, which are both free. Grab a font that actually fits your brand, and if you need a pairing of fonts, Font Joy will generate heading and body combos for you automatically. Then you can name these fonts in the prompt or upload the font

[3:08] file to your design system, and it instantly would upgrade the look of your designs. And by the way, I've put every one of these tips into a detailed PDF guide including all of the resources that I mentioned in this video. You can just send that to your AI agent and ask it which ones apply to your setup. And the link for that is just in the description below. Number six is about copy. So, if the words in your designs sound like AI wrote them, then you've already lost your audience even when the visuals look perfect. And so, what you should do is send a prompt like this

[3:39] where you ask Claude to study the top five players in your niche, note the patterns in what they all do in their copy, and then bake that into your design system. That way you start from best practice instead of AI speak that your audience can spot straight away. Number seven is to mix design systems. One way to come up with an original professional design of your own is to mix and match design systems. Just open the system that you are working on, add other design systems to that chat, and tell Claude which bits to take from each like the type from design number one and the color and motion from design number

[4:14] two, and it can merge them. So, what you actually end up with is a blend that looks like yours instead of a straight copy of a brand that you like. Okay, so those are the basics, and if you only did those, you'd already be ahead of most people using Claude and AI agents for design. But, the next ones are some intermediate tips to make your front-end designs and marketing materials even more professional. And by the way, if you want to learn how to build and sell AI systems that businesses actually pay for, then that's pretty much all we do over at the Robo Nuggets community, where not only do you get access to the

[4:45] Claude Living Masterclass, which we update every week and takes you from zero to mastery with the latest on AI, but you also get access to our agents as a service course, which walks you through how to actually get paid for all these AI skills that you are learning. You also get to be part of a genuinely great community of AI builders. In fact, you can see just some of the recent wins our members are getting from the program right here. So, if you want to start earning from AI, then check that just in the pinned comment below. Now, back to the video. Number eight are images and

[5:11] the videos. So, Claude design can't make images or videos on its own, but what you can do is to link Claude to a generator. Personally, I use Key AI, which gives you most of the big image and video models in one place, and you also only pay for what you generate. Key AI is also one of the cheapest providers out there. So, the easiest way to connect to it is to send a prompt like this to Claude code and let it set Key AI for you. Number nine is to reference another project. So, in Claude design, when you start something new, a good move is to grab the URL of a project

[5:43] that you already finished in Claude design, paste it into the new session, and just say to use this project's design system and assets for what you're about to build. And by the way, this also works in Cloud Code, so you just give it the name of a previous session, or even ask Claude to find it for you, so that any work you've already done in a previous session can become your starting point. Number 10 is to curate your own reference library. In my view, your taste gets better the more great designs that you see. So, to help with this, one of the best things that you

[6:12] can do is to build yourself a reference library from places like Dribbble, from Awards, and even X or Twitter. Basically, anywhere that you see designs that you like. For me personally, I built a simple Chrome extension called Rubric References, so that one click saves the page I'm on with a screenshot and a note to my own reference library, which I can then open for inspiration, or even have Claude reference for future builds. Number 11 is Impeccable. So, Impeccable is a design skill with a whole set of commands that promise to deslop a website. When you run it, it audits things like hierarchy, spacing, type, and accessibility, even empty

[6:48] states, and then it fixes them. It's really good for polishing, and it turns a good draft into a professional one. Number 12 a tone of voice skill. AI writing is really easy to spot, especially if you don't refine it with your own tone of voice. So, what you should do is to build a tone of voice skill with Claude with your list of banned words, the way you speak, and your own lines. And here's a prompt that you can use to start that process. You can even add ready-made rules like best practice guides that are already out there, like for example, the ASD-STE 100 Simplified Technical English Standard,

[7:21] even Google's developer documentation style guide, or even Apple's writing style. Number 13 is 21st.dev. So, this is a library of UI components. A lot of them shared by the open-source community, and the best part is they're made to be handed straight to an agent. So, you just copy one that you like, paste it into Claude, and tell it to use this component, and Claude would drop a proven section into your page instead of designing one from scratch, which also saves you tokens. Number 14 is React Bits. This is the same idea, but more specialized. reactbits.dev is also a component library, but the ones here are a bit edgier. So, animated texts, glass

[8:00] cards, cursor effects, the kind of thing that you would see on high-end sites. A good tip is to find one you like, copy the code, and give it to Claude to add to your front end or save it as part of your design system. Number 15 is Canvas UI. So, canvasui.dev has 35 effects that are really unique. So, if you want to

[8:18] stand out, it's a great free resource. For example, it has liquid, glass, shatter, and particle reveal effects, all for free. Number 16 are icons. So, Claude can't draw good icons most of the time. So, instead, what you can do is to go to Iconify or Flat Icon, download one whole pack as single style, and hand the folder to Claude to use across your design system. And not only do you get made icons when you do this, but you've also given Claude good references for any future icons you wanted to make in that same style. Number 17 is to ask for SVGs. So, when you ask Claude for new

[8:54] icons, illustrations, or diagrams, one of the best things you can do is to ask for them in the SVG format. That stands for scalable vector graphics, so that it scales to any size without going blurry. You can open the file and change the color by hand, and you can even have Claude animate these icons. So, with SVGs, every graphic that you get back

[9:13] from Claude is editable and animatable. Number 18 is Lord Icon. So, lordicon.com is a library of animated icons, and thousands of them are actually free. So, what you can do is find one, download it as a Lottie file, which is basically a small animation written as code, and drop it into Claude to use it. Lottie files are like an upgrade on normal SVG icons because the animation here is already baked in. Number 19 is the Creator's Toolbox. So, if you only bookmark one thing from this video, make it creatorstoolbox.com,

[9:46] specifically their resources section. It's one directory of over 150 free design resources. So, you have animated components, 3js effects, SVG icons, logo galleries, and even mock-up kits. It even lists a couple of the ones I mentioned in this video like referral.styles. So, overall, it's a great resource to bookmark. All right. Now, let's go to some advanced tips. And remember, if any of these get too complex, you can grab that PDF guide in the description and just have Claude

[10:13] explain any of these in more detail. Number 20 is to feed your agent Apple's human interface guidelines. So, Apple publishes its human interface guidelines for free, which is basically their whole rulebook for layout, type sizes, tap targets, and color. So, a good tip would be to turn that into a skill with a prompt like this so that when you design an app screen or a user interface screen, Claude can follow Apple's rules

[10:38] instead of guessing. Number 21 is GSAP. So, if you want the motion and interactivity on a site to feel world-class, what you should do is tell Claude to use GSAP, which stands for GreenSock Animation Platform. It's a fast, reliable JavaScript library for smooth animations on web pages, and it's the animation library that a lot of top agencies use. So, you have scroll-driven sections, text that reveals as you view

[11:02] the page. GSAP handles all of that. Number 22 is /design in Claude Code. So, this one's for Claude Code users specifically because there's now an official /design command for us. If you just [clears throat] type /design, give it an idea or a screenshot, and it opens a canvas with editable artboards a bit like what you would be used to in something like Figma. But, the difference is that here, because it's Claude Code, it would know your whole workspace, your rules, as well as your memory. So, when you iterate on a design, it already knows what you want and what you don't. Number 23 is {slash} tweak. So, Claude design has this built

[11:38] in, which is the tweaks panel, where your design gets controls for things like type, spacing, and color. So, you can adjust it by hand through a slider. But, if you're in Claude code, a good tip is to just build your own tweak skill, which is a skill that drops a slider panel onto any HTML page or front end that you make. That lets you polish your work and also hide the parts that you don't want. Then, it bakes the values back into the design when you're done. Number 24 is transcript to motion graphics. So, this one's a crowd favorite, and it's also how I make the

[12:08] animations in videos like this one. But, if you get the transcript of a video you just recorded with word-level timestamps, which you can do for free with a tool called Whisper, then ask Claude to find the moments where an animation would help. It can then build the graphics for those exact moments. It does this through a tool called Hyperframes, and it comes back with clips timed to what you said. And as a bonus tip, if you already have a strong system, then use it so that the final animations don't look like vibe-coded AI designs. And number 25 is to build your own design operating system. So, this is

[12:41] the last one, and it's where all of it comes together. Because what you can do is to have Claude build you a small micro app where every design that you finish shows up, where every image and video you generate is indexed so that you can easily find visual styles and references that Claude can reach as well. This differs per person, but for our own work, for example, built this element library where we reuse the 3D assets, motion animations, and SVG icons that fit our brand. So, that is all of them. As usual, thanks for watching till the end. And let me know if that was useful and what you think about this

[13:13] type of video. This is the second video where all of these animations that you saw were created by AI. So, I'm also interested to know what you think about them. I'll see you all next time. [music] Cheers.

[13:31] Mhm.

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt