Leveling Up Design with Claude: 25 Practical Tricks in 13 Minutes

The first thing that gives away an AI-generated design is not the colors but the blandness: default typeface, generic sentences, mismatched icons. The speaker starts from this observation and splits 25 tricks into three layers: basics, intermediate, and advanced. The thesis is simple but bold; with the right context material, an agent can lift a beginner's hand to showcase-level work. I take this framing seriously, because the problem usually sits not in the model's talent but in what we hand it.

Basics: design systems and style borrowing

The first stop is setting up a design system . Opening a new system in Claude's design interface (claude.ai/design) and uploading the brand's colors, typefaces, and logo lays the ground for everything produced later. The pleasant part is that starting from zero is unnecessary: you can upload a deck you like, a site, or a screenshot and have the colors and components extracted. According to Anthropic's own help docs, Claude Design generates conversationally and leans on the attached design system automatically; the speaker's insistence rests exactly on this. The second trick is one of the most efficient shortcuts around: Refero's gallery at styles.refero.design hosts agent-readable recipes of real products such as Mercury and Linear, with color, type, and spacing values as copyable text. You copy a system you like, paste it into Claude, add the changes you want, and land quality ground in one shot. The third trick goes one step further: instead of getting lost among thousands of options yourself, hand the gallery link to the model and have it pick the three systems closest to your business.

The fourth trick recalls the limit of the web interface: the browser design app cannot reach the files on your computer. The proposed fix is defining the design system as a custom skill on the Claude Code or desktop-agent side; a Duolingo-style command, for instance, speaks the same language on every call. Per the speaker, most tricks in the video work in the code agent too thanks to this flexibility, so the point is a way of working rather than a single product.

The fifth trick concerns typefaces, and I see the cheapest win of the list here. Work that keeps the default font exposes itself instantly; picking a fitting family from a free service such as FontShare, naming it in the prompt, or uploading its file into the system pulls the look together at once. FontShare's backer, the Indian Type Foundry, states these fonts are free even for commercial work; tools like FontJoy generate headline-body pairings for those seeking matches. The speaker further suggests embedding this in the system rather than doing rival analysis mid-conversation. The sixth trick is about copywriting: even with flawless visuals, sentences that smell of AI lose the audience. The suggestion is asking Claude to study the five best rivals in your field and bake the patterns into the design system. That way production feeds on the sector's real language instead of the model's ready-made phrasing. The seventh trick continues this logic: deliberately merging two systems, taking the typeface from one and color plus motion from the other and having the model blend them, yields an original idiom that never looks like a copy.

Mid-level: type, copy, and visual completion

The eighth trick closes the design tool's blind spot: Claude Design cannot generate images or video on its own, but it can connect to an external generation service. The speaker cites Kie.ai as an example; the service bundles many major visual and video models under one roof with pay-as-you-go pricing, and the setup is left to Claude Code. Kie.ai's current model market spans text-to-video through image editing, so the connection never depends on a single model. The ninth trick pastes a finished project's link into a fresh session to inherit the same system and assets; past work becomes the new work's starting point.

The tenth trick systematizes taste: building a personal reference library that collects admired work from venues like Dribbble, Awwwards, and X. The speaker describes a one-click browser extension he built, Rubric References; the saved page enters the archive with screenshot and note, and later Claude can consult that archive. The eleventh trick is an audit skill called Impeccable: it scans a site across hierarchy, spacing, type, accessibility, and empty states, then fixes them, turning a good draft polished.

The twelfth trick pins tone of voice: building a tone skill with a banned-word list, personal phrases, and speaking style. Ready-made rules can join in; the ASD-STE 100 standard for technical English, Google's developer documentation style guide, and Apple's writing style are cited as examples. The thirteenth trick is 21st.dev: interface components shared by the open-source community, ready to hand straight to the agent. You copy a piece you like and paste it to the model; instead of drawing from scratch it embeds a tested section into your page, and 21st's MCP support allows doing this without leaving the editor. The fourteenth and fifteenth tricks run in the same vein: the ReactBits site offers bold pieces such as animated text, glass-effect cards, and cursor play; CanvasUI.dev hosts around thirty-five free effects, with broken-liquid-glass and particle-reveal samples. The logic is identical: take the code of what you like, hand it to Claude, have it added to the interface or saved into the design system. This is how touches seen on top-tier sites land on your page without burning tokens.

Component and icon libraries

The sixteenth trick states a bitter truth: Claude often cannot draw good icons. The fix is downloading a whole set in one style from a source like Iconify and handing the folder to the model; you get ready icons and the model gains consistent reference for whatever it draws next. Iconify's universe spans hundreds of sets and hundreds of thousands of icons, loading only the icons used on a page. The seventeenth trick makes SVG format a condition when requesting new drawings: being vector, it stays crisp at every size, its color changes by hand, and it can even be animated. The eighteenth trick covers animated icons with Lordicon: icons, thousands of them free, download as Lottie files and drop into the project; since the animation arrives embedded in the code, it counts as a step above plain SVG. Lordicon's library has reached tens of thousands of icons with adjustable color, speed, and size on export. The nineteenth trick is a single-bookmark suggestion: a guide called Creator's Toolbox collecting over 150 free design resources in one list: animated components, 3D effects, SVG icons, logo galleries, and mockup kits.

The twentieth trick brings in Apple's interface guidelines : the company publishes these rules openly, with layout, type sizes, tap targets, and colors defined up front. Turning them into a skill and running the model through them while drawing an app screen removes guesswork errors. Apple's Human Interface Guidelines give per-platform default and minimum sizes for legibility and demand hierarchy through weight and color balance. The twenty-first trick is GSAP: GreenSock's JavaScript library smooths jobs like scroll sections and revealing text, and big agencies favor it too. Its site says you can animate anything, and with the scroll plugin complex choreographies shrink to a few lines.

Advanced: rules, motion, and commands

The final four cover the code agent's design front. The twenty-second trick is the /design command: a virtual drawing board opens with an idea or a screenshot, editable workspaces reminiscent of Figma arrive, but the difference is the agent knowing the whole project and its rules. The twenty-third is /tweak: building the slider settings panel of the web side as your own skill on the code side, playing with type, spacing, and color values and committing the result into the design. The twenty-fourth is text-to-animation: extracting a word-stamped script with Whisper, asking Claude to pick the moments that deserve animation, and producing voice-matched clips through Hyperframes. The speaker says this video's own animations were made this way.

The twenty-fifth and last trick gathers everything into a design operating system : a small app exhibiting finished work and indexing every generated visual and video; you find the pattern you seek while Claude reaches the same archive. The speaker's team runs this as an element library, with on-brand 3D materials, animations, and SVG icons waiting for reuse. The list closes here and ties back to the first item: without a system the tricks stay scattered numbers, with a system they compound like interest.