A 12-minute screen-share tour of nine free component libraries and templates, with a closing method for turning any one component into a whole AI-extracted design system.
Pick one beautiful component library, give it to an AI agent, and ask it to extract the design system so every other element in your app inherits the same visual language and feel.
Beautiful web app design is no longer a craft bottleneck because free component libraries plus an AI agent can generate a cohesive look in minutes. The video tours nine free sources � Liquid Metal, Style UI's Axis and Notia templates, Skiper UI, Ali Mam, Watermelon UI, Cult UI, dot-matrix loaders, Componentry, and a Convex example app � each offering copy-paste components you hand to your coding agent rather than writing yourself. The real method comes at the end: pick one component whose feel you love, drop it into your codebase, and instruct the agent to extract a design system from it and apply that system across the rest of the app, giving you a consistent foundation instead of mismatched parts.
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 →
Reverses the 'don't judge a book by its cover' saying, name-drops his prior banger UI videos, promises nine free, AI-installable libraries.
Animated liquid-metal border component. 'Feels so premium I expect $500/mo, anything less is a scam.' Use with caution and wisdom.
Two free templates from his own team's library. Axis = B2B SaaS template (logos, pricing, cards). Notia = consumer-app template, originally purple, now also forest green / sunny orange because 'purple got ruined by AI.'
Pivots to Skiper UI before cutting into the CodeRabbit sponsor.
Jensen Huang / NVIDIA name-drop, then demo of running `coderabbit` in a feature branch to get an AI review BEFORE opening the PR. Copy the suggested-fix prompt into Claude Code.
Image hover/glide cards (horizontal + vertical), scroll-like-Star-Wars-credits animations, stacking cards, card-swipe carousel, and the killer: an inline video player that expands on click.
Free shader hero backgrounds, bento grids, iPhone/iPad device frames, page patterns, logo reels, typewriter effect, and an Apple-Intelligence-style glow component.
Gauge component + Apple-style onboarding springy click + card swiper. 'Feels like you're using an iPhone.'
Colorful hero sections, the standout 'family button' that nicely animates, and a creative light-board component. Pro tier exists; free pieces still strong.
Animated loader pack — 'make loading great again' — drop-in code per loader, AI agent installs it.
Tactile Mac keyboard component with downloadable keypress audio (he wired it into his own Convex 'Ship' feature-voting app), flight-status tracker, GitHub-style activity tracker. Side detour: he demos balloons + 'Here Comes the Money' on the Ship spin-the-wheel, credits Balloons.js for the floating-balloon effect.
Recap: nine libraries, all free. Pivots to the real payoff — how to USE these without your site looking like a mismatched Frankenstein.
Pulls up Excalidraw mid-video. The trick: download your favorite component, then prompt the AI agent: 'Extract the design system from this component and make the rest of my app match.' AI becomes the consistency engine; you only have to pick the seed.
A nine-item listicle is a great delivery vehicle, but the unlock is the 90-second meta-method at the end that turns the whole video into a tool, not just a list.
“I click this and I expect the pro plan to be $500 a month. In fact, if it's anything lower than $500 a month, I actually think it's a scam.”
“Notia originally was actually purple before purple got ruined by AI.”
“Let's not all generate the same slop. Let's add some sauce, some feng shui to our apps.”
“Everyone can ship nowadays, but I am telling you, it is so easy to stand out. Just a little bit of quality, just a little bit of time investment, and your app'll stand out like no other.”
“If AI is your foundation, it becomes a problem. But if you use AI to build on that foundation, I think it works out great.”
“There's no excuse to not have a beautiful site.”
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.
Ras Mic opens by demolishing the proverb — yes, people *do* judge an app by its cover — then promises nine free component libraries he’s sourced for you. The whole video is the listicle, but the real payload is the last 90 seconds: a tiny method for letting AI extract a full design system from any one component you like.
Pick the single component whose vibe you love most (liquid metal, glassy, whatever). Download it into your codebase. Then tell the AI agent: 'Extract the design system from this component and make the rest of my app site look the exact same.' Use the component as the seed; AI propagates the visual language.
Nine free sources to swipe modern, app-feel components from — all installable by handing the CLI install URL to an AI agent.
“Make sure to like, comment, subscribe. Hit the notification bell. Hope to see you in the next one.”
Soft, standard YouTube outro — the real CTA is implicit: 'all links in the description.' Description-link CTA is repeated 6+ times throughout the video, which is the smart move for a listicle where the conversion is a click out, not a purchase.
00:00
00:10
00:20
00:30
00:4000:42
00:52
01:02
01:12
01:22
01:25
01:29
01:3601:46
01:51
01:53
02:00
02:08
02:18
02:2502:31
02:34
02:4402:46
02:56
03:06
03:16
03:22
03:32
03:34
03:44
03:54
04:0404:07
04:16
04:26
04:32
04:39
04:49
04:5905:02
05:09
05:15
05:15
05:2505:36
05:46
05:5606:06
06:16
06:26
06:36
06:46
06:5607:06
07:16
07:26
07:3607:46
07:49
07:5508:05
08:15
08:20
08:3008:4008:5009:00
09:02
09:1209:22
09:32
09:42
09:5110:01
10:04
10:14
10:24
10:2910:39
30:18A builder walks through every infrastructure decision behind his own AI-agent product, arguing that system design - not AI - is what separates a prototype from an app that survives real users.
July 2nd
22:09A 22-minute live-demo tutorial showing how design tokens and Claude Design eliminate the inconsistency that makes AI-built apps look cheap.
June 23rd
14:42A 14-minute first-impressions report on the best coding model available — and the 12-day window before it stops being free.
June 11th
12:53A 13-minute breakdown of one builder's agentic engineering stack: three Claude Code skills, an agents.md file, and the token-math that explains why they are not the same thing.
June 9th
23:11A 23-minute field test of the four Claude skills that actually move the needle for web designers — with before/after demos and a live skill build.
May 18th
27:47A reluctant 28-minute tour of the Claude Code features every competing harness should steal.
June 17th