Video of the Day20:40Ras Mic · Tutorial
My Complete Codex Agentic Engineering Workflow
Ras Mic walks through the seven habits, plugins to slash commands, that turn OpenAI's Codex from a prompt box into a full agentic coding workflow.
August 14thThe argument in one line.
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.
Read if. Skip if.
READ IF YOU ARE…
- A vibe coder or indie developer building web apps with AI who wants a curated shortlist of free, polished component libraries to steal from immediately.
- You are building a SaaS landing page or consumer app and want premium-feeling UI components — animations, shaders, card effects — without writing them from scratch.
- A developer who uses AI agents for code generation and wants to learn the design-system extraction method: drop one component in, have the agent inherit its style across the whole app.
- Someone currently shipping visually generic AI-default UIs who wants concrete examples of how to differentiate aesthetically without a designer.
SKIP IF…
- You are a senior frontend engineer with an established design system — this is a discovery-and-inspiration tour aimed at builders starting from scratch, not a deep implementation guide.
- You are looking for accessibility, performance benchmarks, or bundle-size analysis of these libraries — none of that is covered.
The full version, fast.
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.
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:47
01 · Cold open + promise
Reverses the 'don't judge a book by its cover' saying, name-drops his prior banger UI videos, promises nine free, AI-installable libraries.
00:47 – 01:32
02 · 1. Liquid Metal
Animated liquid-metal border component. 'Feels so premium I expect $500/mo, anything less is a scam.' Use with caution and wisdom.
01:32 – 02:31
03 · 2. Style UI — Axis + Notia (his team's free templates)
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.'
02:31 – 02:36
04 · 3. Skiper UI — intro
Pivots to Skiper UI before cutting into the CodeRabbit sponsor.
02:36 – 04:07
05 · Sponsor: CodeRabbit CLI
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.
04:07 – 05:36
06 · 3. Skiper UI — components
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.
05:36 – 06:56
07 · 4. Ali Mam library
Free shader hero backgrounds, bento grids, iPhone/iPad device frames, page patterns, logo reels, typewriter effect, and an Apple-Intelligence-style glow component.
06:56 – 07:26
08 · 5. Watermelon UI
Gauge component + Apple-style onboarding springy click + card swiper. 'Feels like you're using an iPhone.'
07:26 – 08:44
09 · 6. Cult UI
Colorful hero sections, the standout 'family button' that nicely animates, and a creative light-board component. Pro tier exists; free pieces still strong.
08:44 – 09:22
10 · 7. Dot-matrix loaders
Animated loader pack — 'make loading great again' — drop-in code per loader, AI agent installs it.
09:22 – 10:42
11 · 8. Componentry.fun — keyboard, flight tracker, GitHub heatmap + Balloons.js detour
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.
10:42 – 11:03
12 · 9. Recap + transition to the method
Recap: nine libraries, all free. Pivots to the real payoff — how to USE these without your site looking like a mismatched Frankenstein.
11:03 – 12:29
13 · Method: extract a design system from one component
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.
Lines worth screenshotting.
- Copying a single component from a free library and passing it to an AI agent is now the fastest path from design idea to working code.
- Liquid Metal is a free animated border component that signals premium pricing before a user reads a single word of copy.
- Axis and Notia are two free full SaaS templates (B2B and consumer) from Style UI that can be installed via a single command passed to an AI agent.
- Skipper UI's free tier includes card stacking, video expand-on-hover, and Star Wars-style scroll animations — all with copy-paste installation.
- The design-system extraction method: pick one component you love, point your AI agent at it, and tell it to extract the design system so every other component inherits the same visual language.
- 71 brand-grade design systems are now available in open-source tools like OpenDesign, including Apple, Stripe, Linear, Tesla, and Spotify.
- An animated metal border component communicates higher price tolerance in the user's mind before they evaluate any feature.
- CodeRabbit's CLI lets you get AI code review before creating a PR — the review happens at the local branch level, not at the GitHub review stage.
- Watermelon UI, Cult UI, and Componentry are three additional free component sources worth bookmarking alongside the more prominent libraries.
- Bento grid components with logo reels and typewriter effects are now standard marketing page patterns available as free, copy-paste components.
- Paying for premium Skipper UI components is justified once you have paying users — start with their free tier and upgrade when the product generates revenue.
- The right UI library doesn't just make the app look better — it changes the price point users accept as reasonable before they read the pricing page.
Steal the format.
Listicle + closing meta-method
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.
- Open with a reversed proverb. 'Don't judge a book by its cover' — then immediately violate it. Cheap, memorable, sets the stakes in 8 seconds.
- List nine items, but front-load your own product. Style UI Axis/Notia is item #2 disguised as a gift — he gets the credit-for-sharing posture *and* a top-3 promo slot.
- Bury the real payload at the end. The design-system extraction prompt is more useful than any single library — but putting it at 11:00 keeps retention all the way through.
- Pull up Excalidraw mid-video as a pattern interrupt. After 10 minutes of screen-share, switching to a whiteboard signals 'this is the important part.'
- Repeat the action verb. 'Copy. Give it to your AI agent. AI takes care of it.' Said maybe 8 times — reinforces that the install path is one-shot, no thinking required.
- Sponsor at minute 2:30, not minute 8. Audience hasn't dropped off yet, and the CodeRabbit CLI demo riffs on the same 'let AI do it' theme, so the read doesn't feel like a tonal break.
- End with 'no excuse.' Closing line is a moral instruction, not a CTA — 'there's no excuse to not have a beautiful site.' Lands harder than 'check the links below.'
Terms worth knowing.
- Component library (UI)
- A collection of pre-built, reusable interface elements — buttons, cards, modals, navigation bars — that developers can drop into a web or mobile app to speed up design without starting from scratch.
- Template library
- A set of complete, ready-to-use page or app layouts that can be customized and deployed as starting points for a project, often including multiple pages and a consistent design system.
- Design system (extracted)
- A coherent set of design rules — spacing, color, typography, component style — inferred from an existing component and applied consistently across the rest of an app to achieve visual unity.
- B2B SaaS template
- A pre-designed website or app layout built specifically for business-to-business software products, typically including pricing tables, feature grids, testimonials, and a hero section.
- CodeRabbit
- An AI-powered code review agent that automatically analyzes pull requests, identifies bugs, suggests improvements, and posts review comments directly in a GitHub or GitLab workflow.
- Pull request (PR)
- A proposal to merge code changes from one branch into another in a version-controlled repository, typically reviewed by teammates or an automated tool before the merge is approved.
- Light mode / Dark mode
- UI color scheme variants — light mode uses a white or pale background with dark text; dark mode reverses this for reduced eye strain in low-light environments. Most modern component libraries ship both.
- Liquid metal (UI component)
- An animated border effect for web components that simulates a shimmering metallic fluid, used to give interactive elements a premium, high-end visual feel.
- AI agent (code context)
- An AI system that can accept instructions, read files or documentation, write code, and make changes autonomously — used here to install and adapt component library code without manual configuration.
Things they pointed at.
00:47toolLiquid Metal (animated metal border component)
02:36toolCodeRabbit (AI code-review CLI, sponsor)
04:07toolSkiper UI
05:36toolAli Mam component library
06:56toolWatermelon UI
07:26toolCult UI
08:44toolDot-matrix loaders
09:22toolComponentry.fun (Mac keyboard, flight tracker, GitHub heatmap)
09:51toolConvex — used in his 'Ship' feature-voting app demo
09:51productShip (his Convex feature-voting demo app)
09:55toolBalloons.js (one-line balloon celebration effect)
11:03toolExcalidraw (used mid-video to whiteboard the method)
Lines you could clip.
01:00
“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.”
02:08
“Notia originally was actually purple before purple got ruined by AI.”
07:56
“Let's not all generate the same slop. Let's add some sauce, some feng shui to our apps.”
08:04
“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.”
12:03
“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.”
12:20
“There's no excuse to not have a beautiful site.”
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.
metaphor
You know the saying ? A very beautiful saying, but that does not apply to both web and mobile apps. People definitely judge a book by its cover.
I will definitely judge a site by its cover, and that's why in today's video, I'm gonna be sharing with you some fire component and template libraries that I've sourced completely for free for you. Now some of you might be new to the channel and you're not familiar.
I have shared a lot of banger UI components with my audience. I'm talking about this video, this video, and this video. And today, ladies and gents, I've done it again.
All of these are free. All of these are fire, and all of these are easy to use in your site. Thanks to AI.
Sit back, relax. Let's get into it. First things first, we have liquid metal.
Now this is just one simple thing. It's this beautiful border floating metal.
Like, it just feels so premium. It feels so rich. Like, I click this and .
In fact, if it's anything lower than $500 a month, I actually think it's a scam. Use this with caution and wisdom. This looks fire.
By the way, all the links are in the description down below. Liquid metal justice. Again, I don't even know how to describe it.
Oh, it says here it's an animated liquid metal border component. Liquid metal border component. Ladies and gents, there you have it.
Completely for free for you to use. Number two, this one is actually a gift from my team to you, a gift from me to you, and these are two free templates. We have both Notia and Axis.
Let's start with Axis first. Axis is your b to b SaaS for businesses.
If I refresh, you're gonna see the animation nicely hover in. You're going to see the cards. You're gonna see the logos, the numbers, the people talking about you, the beautiful pricing card.
This is for your b to b SaaS dreams completely for free. Light mode included as well. All you have to do is just copy this installation link, give it to your AI agent, and it's gonna take care of it for you.
The second one is Notia. Now Notia originally was actually purple before .
I like the dark mode better if I'm gonna be honest. But purple, everybody thinks of purple as AI now, so we added different colors. We have forest green and sunny orange.
And, again, this is for your consumer app dreams. You see things animating nicely, the numbers coming in nicely. These are two beautiful templates completely for free, a gift from me to you.
Again, the link is in the description style ui.dev. Now the third component library I wanna share with you is Skipper UI, and Skipper UI is really amazing. You know what else is amazing?
The sponsor of today's video. Do you know what an NVIDIA engineer and me have in common? No.
I don't make $500,000, and no. They're not handsome.
But what we have in common is that every NVIDIA engineer uses CodeRabbit, which is the sponsor of today's video. Jensen Huang himself said, we are using CodeRabbit all over Nvidia.
And there's a reason for that because CodeRabbit is one of the best AI code review agents to exist. Now most of you are already familiar with the review it gives you every time you create a PR when you have CodeRabbit set up. Today, what I wanna share with you is a new workflow that I've been using, and it's their actual CLI.
So I have a feature I've been working on on a super secret project, and all I'm gonna do in the feature branch is type Codebabbit. And then what I'm going to do is I'm going to hit return. And what's going to happen is before I even make the PR, the Codebabbit review agent is going to review my code.
Before you were used to getting your code reviewed at PR level, now we're even doing it at the CLI. We're not even getting to GitHub and we're going to get a review. Okay.
We see that the review was complete, and there are three potential issues. Now I can click the drop down here, and let's look at this particular problem. So I get a breakdown of the review.
Now there's two things I can do. I'm going to click on see, and essentially what I've done is I've copied the prompt that I can pass to my agent to fix this issue. So let's say I'm using Cloud Code.
I can click paste. And if I hit enter just for you to see, this is a prompt to help me fix the issue. So instead of getting to GitHub to get code review, I can get code review here on the CLI, and that's all thanks to Codebabbit.
So make sure to click the link in the description down below and check it out and make sure to use their CLI. It's awesome. Now let's get back to the video.
Now Skipper UI has both free and paid components. I'm gonna show you the free components, but if you got some money on, definitely invest in the paid components. They're pretty fire.
Now I'm gonna share with you some of my favorite. The first one is this image hover card pushing gliding thing.
I really like it. They have a horizontal and a vertical one. I low key kinda like the vertical one, especially if you're doing something artsy fartsy.
Definitely take a look at this component. Another one is the different skull animations. This is like the ain't this like the Starbucks?
No. Not Starbucks. Sorry.
Star Wars end credits animation, so you can use that component as well. You also have, like, cards stacking. Again, this just chef's kiss, and all of the code is here for you.
Again, you just copy. You give it to your AI agent. It takes care of it for you.
Know, back then, we used to write the code. Now we just tell the AI agent to just install. Right?
So it's pretty simple stuff. Again, you have these nice card swipes. I really like how Skipper handles all the cards.
Really nicely animated. My favorite one though, and this is one I'm definitely gonna be using, is the video player.
So the video itself is playing in this little square thing. I hover over and then you see the play button, and then when I click it expands. Hopefully, that's not copyrighted music, but very clean, very beautiful.
We love Skipper UI. Link is in the description. And then we have I believe this is by someone named Ali mom.
Again, I apologize if I butcher your name, but couple of banger components here. First and foremost, let's talk about the shaders. You know, shaders are cool nowadays.
You add a little shader in your hero section. All of these are free for you to use. You just click on code.
Again, copy paste. Give it to your agent. Your agent will take care of it.
Help you set up some bento grids. That's available for you as well. I did not look at device.
This is fire. This is fire.
So if you wanted to have an iPhone or an iPad or whatever on your page, you can easily do that. You want some patterns on your page, you can easily do that. These are basically, you know, your logo reels, like, you know, you can have your logo nicely animate.
Make sure these are companies actually using your product. You got a nice typewriter effect. Right?
Like, you can add this in your marketing pages. Looks pretty cool. And if you have some AI stuff on your app and you wanna add, like, glow, you know how, like, Apple intelligence, like, when you click on the thing and the Apple intelligence things pops up and it's glowing, that's basically the same thing here.
But, anyway, that is Alimam. Again, the links in our description. There are more components here.
Again, you have this gauge component feels very iPhone like, very clean, very nicely animated. So all that stuff, again, the links are in the description. And then you have watermelon UI.
I don't know. Calling you watermelon felt wrong for a second. But my favorite one out of all the components they have, again, I wanna, for the sake of time, share with you my favorite one, Is this, like this basically feels like an Apple component.
You can probably use this in some sort of onboarding flow. It's very nicely animated. Like, the click is very springy.
And, again, all the code is here for your AI agent to ingest and use. There's also this, like, card swiper, so, like, you could, like, just nicely animates, very nice spring animation.
Almost feels like you're using an iPhone. So highly recommend you check out watermelon UI. And then we have cult UI.
Again, questionable name, but fire components. You got a couple of these colorful hero sections.
One of the ones that I was actually pretty rocking with oh, it's this one right here, the family button. Like, you can see I click that nicely animates. Like, again, this might not be for every use case, but definitely you could be creative with your apps.
You know, let's not build the same thing. Let's not all generate the same slop. .
Yes. Everyone can ship nowadays, but ladies and gents, 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 Apple stand out like no other.
And finally, something for you to check out very different is this light board. Again, I wouldn't know where I would use it, but it's pretty different and creative. So make sure again to check out CultUI.
They have pro components. If you got a little bit of money on, check it out. Worth the investment, but all the free stuff will be linked down below.
And then you have these dot matrix loader. So this is basically if you got a site that has a lot of data that needs to be loaded in, let's make the loading fun. Let's let's make loading creative.
. And you can use these different loading animations. All you have to do is click them and all the code is there.
You can use the CLI. Again, give it to your AI agent. We don't write code anymore.
Times have changed. Link in the description for those. And then you have componentry.fun.
These are some pretty unique ones. Like, for example, this keyboard is fire. Right?
You could see it's very tactile, and you can also download key press sound. So, like, every time you click, you can hear the sound.
I actually did this for, um, one of my work projects ship, which is, like, our basically a place for Convex customers or people who just like Convex, use Convex to vote on the different things that they want shipped. Right? And, like, if I log in, I'll show you just quickly.
You're gonna hear the click sound. Okay? I'm gonna increase the volume.
It just feels nice. You know what I'm saying? Oh, another cool feature I added.
And, this is about being creative. We have a spin the wheel where you get convex coins credits where you can basically vote on features. You need to place these coins to boost to basically support a feature.
I know I'm not explaining it properly, but just looking to spin the wheel. Here's how I'm bet. And when I win Here comes the money.
Here we go. Money talks. Here comes the money.
By the way, I didn't include it originally, but the way I got the balloons to pop up is Balloon JS. Just search it on Google. It's literally just installing that, and you get to have these cool balloon animations, or you can get to have these text, which is pretty awesome.
I'll make sure this is linked in the description down below. But going back to our component library, you have the keyboard, you have this flight status tracker. Again, very clean, very Apple like, very free, which is awesome.
You have the GitHub, uh, tracker. Again, you can use this for a multitude of reasons, not just GitHub, a great way to actually keep your users engaged. And there's a plethora of other fire things.
If you wanna be all matrix y and cool, this is available for you as well. But ladies and gents, that is pretty much it. I shared with you not one, not two, not four, not five, but nine different component libraries and templates, all free for you to make your applications fire.
Now how do you go about using these? Let me actually share with you the method. Before, you would use one of these components, and you would sort of have to handwrite the code for the other components to match this.
But what you can do now and, actually, maybe we're just gonna you know what? We're gonna pop up Excalidra. I was actually gonna close out for the video, but I just wanna explain to you the method.
What you're going to do is you're going to download, uh, let's say this is a component. Right?
You're gonna download this into your code base, and then what you're going to do is you're going to tell the AI agent, hey. Listen. Create a design system design system based on this component.
Right? So what you're going to do is and this is what makes AI cool now when it comes to design is before when we downloaded a component, you would have to make sure that the rest of your site matches that component by hand. Now you could tell the AI, extract the design system from this component and make the rest of my app site look the exact same.
So now you have it's much easier to design really good looking apps if you have a good source of truth, meaning if you have a good foundation. If , it becomes a problem.
But if you use AI to build on that foundation, again, I'm talking about design, I think it works out great. And I've done this a couple of times where I've given it some inspo, a particular component, and it builds, uh, a design system using that component, and it's pretty good at sticking to it. Right?
So let's say you wanted the glassy feel, the liquid metal feel. You download this component, and then you tell it, alright. For everything else, I want this around.
Now don't make everything, you know, have the liquid metal thing. It should be unique and maybe your call to action buttons. But what I'm saying is there's no excuse to not have a beautiful sight.
I hope you enjoyed this video. Make sure to like, comment, subscribe. Hit the notification bell.
Hope to see you in the next one. Peace.
The Hook
The bait, then the rug-pull.
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.
Named ideas worth stealing.
11:03concept
Design-System-From-One-Component method
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.
Steal forAny indie-dev sales page or app shell where you want a cohesive look without hiring a designer.
00:47list
The 9-library swipe (free UI source-of-truth)
- Liquid Metal (liquid-metal border)
- Style UI — Axis (B2B template) + Notia (consumer template)
- Skiper UI (hover/glide cards, stacking cards, expanding video player)
- Ali Mam library (shaders, bento, device frames, Apple-Intelligence glow)
- Watermelon UI (gauge + Apple-style onboarding)
- Cult UI (colorful heroes + family button + light-board)
- Dot-matrix loaders (loader pack)
- Componentry.fun (Mac keyboard w/ sound, flight tracker, GitHub heatmap)
- Balloons.js (one-line celebration balloons)
Nine free sources to swipe modern, app-feel components from — all installable by handing the CLI install URL to an AI agent.
Steal forBuilding any landing page, app shell, or sales page without paying a designer or buying a template.
How they asked for the click.
VERBAL ASK
12:20subscribe
“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.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
