Big Idea

The argument in one line.

The reason AI-built apps look inconsistent is not bad prompting — it is the absence of a design system with tokens, and Claude Design solves this in one screenshot-to-system pipeline.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You build apps with AI and your pages look visually inconsistent — buttons have different radii, dashboards do not match landing pages.
You want to use Claude Code or a similar AI agent to build UI, and you are tired of telling it to make things more rounded on every page.
You are a developer who has always known design systems are important but never actually built one.
You are building a SaaS or client project and want a defensible way to maintain visual consistency without hiring a designer.

SKIP IF…

You already have a mature design system and are comfortable with Figma tokens or Storybook.
You are looking for deep CSS architecture or design-engineering theory — this is a practical workflow demo, not a fundamentals course.

TL;DR

The full version, fast.

AI-built UIs get inconsistent because developers skip the design system step. The fix is a four-stage pipeline: gather a reference site you like, feed it to Claude Design to auto-generate a token-based design system, spend time tweaking colors and components until the system feels right, then use Claude Design's built-in Send to Claude Code feature to implement it in one shot. Once tokens are baked into the codebase, every future AI coding session inherits them automatically — so fixing a spacing issue fixes it everywhere, and adding dark mode no longer breaks half your components.

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 →

Chapters

Where the time goes.

00:00 – 01:23

01 · The problem: AI-designed apps look inconsistent

Hook that names the AI smell in UI, then demonstrates the inconsistency in the author's own Pluto app — different button radii, dashboard vs landing page mismatch.

01:23 – 03:22

02 · Design systems and tokens explained

Defines what a design system is and why tokens (semantic variable names instead of hardcoded values) are the core mechanism for consistency, theming, and centralized maintenance.

03:22 – 05:25

03 · Step 1: Collect inspiration

Twitter bookmarks via GatherOS, Mobin, and reference sites. Uses family.co as the demo inspiration source.

05:25 – 06:56

04 · Step 2: Generate the design system with Claude Design

Screenshots family.co, uploads to Claude Design, prompts it to generate a token-based design system with components on one page.

06:56 – 08:24

05 · Sponsor: Scriba AI Engineer Path

Scriba learning platform for AI engineering — agents, MCP, scalable multi-tool systems.

08:24 – 11:16

06 · Step 3: Tweak the design system

Reviews the generated Family Design System and uses the markup tool to remove confetti decorations and the AI logo. Also shows the Vercel design.md approach as an alternative starting point.

11:16 – 15:00

07 · Adding more components and finalizing

Asks Claude Design to generate dialog, form, checkbox, dropdown, tooltip, and step components. Reviews the expanded system before handing off to code.

15:00 – 19:00

08 · Step 4: Build with AI using Claude Code

Spins up a SvelteKit app. Uses Share to Send to Claude Code to export the design system. Claude Code imports via MCP and builds landing page, auth page, and dashboard in one prompt.

19:00 – 21:20

09 · Results and spicing up with UI libraries

Reviews the three generated pages with consistent tokens throughout. Introduces BUI for micro-animations layered on top of the design system.

21:20 – 22:09

10 · Summary and CTA

Recaps the four-step workflow and emphasizes adding your own aesthetic input — use AI as a tool, not a replacement for taste.

Atomic Insights

Lines worth screenshotting.

AI-built apps have a recognizable smell — weird borders, inconsistent radii, mismatched dashboards — and the root cause is always the same: no design tokens.
A design system built for AI is not a Figma file — it is a set of semantic token names that a language model can actually follow in code.
Claude Design generates a full token-based design system from a single screenshot, giving you a starting canvas in minutes rather than hours.
The goal when using a reference site is not 1:1 replication — it is getting a canvas with the right aesthetic DNA that you then own.
Spending time in Claude Design tweaking the system before touching code means every page the agent builds inherits the corrections automatically.
vercel.com/design.md is a public markdown design system anyone can paste into Claude Design as a clean professional foundation.
Claude Design's Share to Claude Code button generates a prompt that imports the entire design file via MCP — a full system handoff in one copy-paste.
UI component libraries like BUI let you add micro-animations while keeping your own design system's colors and spacing — just give the agent the URL.
If you build without tokens and later want dark mode, you will find specific buttons and badges do not convert cleanly — that is the cost of skipping the system.
Consistency is not a design skill — it is an architecture decision, and tokens are the architecture.

Takeaway

A design system turns AI into a consistent builder.

WHAT TO LEARN

When tokens are established before coding begins, every AI session that touches the app inherits the same visual rules — fixing one component fixes all of them.

Design tokens replace hardcoded values like padding: 16px with semantic names like spacing-medium, so one change propagates everywhere automatically.
Dark mode and theming fail without tokens because each component has a hardcoded value that has to be hunted down and changed manually.
Claude Design can generate a token-based system from a single screenshot of a site you like; the result is a starting canvas you shape to your own taste, not a copy.
The markup tool in Claude Design lets you annotate the generated design and prompt for specific removals or fixes before the system ever touches your code.
vercel.com/design.md is a free, professional markdown design system you can paste directly into Claude Design as a clean neutral foundation instead of copying an existing brand.
Claude Design's Send to Claude Code export generates a ready-made MCP-backed prompt that imports the full design file into your coding session — no manual token migration.
Once a design system is in the codebase, you stop negotiating with the AI about border-radius on every page and start directing it at feature work — the system enforces the aesthetic.

Glossary

Terms worth knowing.

Design system: A single source of truth for all visual decisions in a product: UI components, design guidelines, brand colors, and typography. Keeps a product looking consistent across pages built by different people or AI sessions.
Design token: A named variable that stores a single design decision. Instead of hardcoding padding: 16px everywhere, you write padding: spacing-medium — and changing the token updates every instance at once.
Claude Design: Anthropic's visual design tool that generates token-based design systems from screenshots or markdown, with an interactive markup editor and a direct export to Claude Code.
Semantic color: A named color role tied to meaning rather than appearance — for example, color-success (green) or color-danger (red) — so swapping themes does not require rewriting component logic.
GatherOS: A bookmark aggregation app that collects saved posts from Twitter and other sources into a single organized library, used here as an inspiration-gathering tool.
Mobin: A subscription UI inspiration platform with curated examples of onboarding flows, hero sections, and dashboards from real products.
Claude Design MCP: A Model Context Protocol server that lets Claude Code read a Claude Design project directly, importing the full design system file into the coding session without manual copy-paste.

Resources

Things they pointed at.

04:03toolGatherOS

04:20toolMobin ↗

05:00linkfamily.co ↗

11:11linkvercel.com/design.md ↗

20:48toolBUI (UI component library)

07:57productScriba AI Engineer Path

Quotables

Lines you could clip.

00:08

“You can look at a web or mobile app, and you can tell if it's just fully been designed with AI because it has that smell.”

Instantly relatable hook — every developer has seen this→ TikTok hook↗ Tweet quote

11:10

“If you use AI to design the entire thing, no sauce or input from you, your site's gonna look like everybody else's.”

Punchy take on the risk of fully passive AI usage→ IG reel cold open↗ Tweet quote

19:56

“Because you have a design system, once you fix one thing, it affects the entire thing. The fix is applied everywhere.”

The payoff line — lands the whole thesis in two sentences→ newsletter pull-quote↗ Tweet quote

The Script

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

00:00Building with AI has never been easier. With the models and the harnesses we have now, you can truly build something exceptional fully using AI, but that does not apply to design, unfortunately. You can look at a web or mobile app, and you can tell if it's just fully been designed with AI because it has that smell.

00:16It has those weird borders. You can you and I can tell fugly designed by AI. But in today's video, I'm gonna be sharing with you my design workflow for consistent and good looking design.

00:27Now what do I mean by consistent? When I say consistent, this is what I mean. I'm gonna take you to my Pluto app.

00:33Uh, this is an app I've been working on for two months. Super excited to launch this. And you can see, I got a pretty nice hero section.

00:39I got a pretty nice landing page. Right? You click this and the video pops up.

00:44You know, you hover on the button, you see the emoji explosion, you got the little glass liquid metal thing over the button. I would like to think that this is an exceptional nice looking page and that you got a light mode, dark mode. Cool stuff.

00:57Then I go to dashboard and this looks nothing like the home page.

01:03Right? And even on the dashboard, you you see this button right here, new agent right here.

01:08It's pretty, I think, maybe rounded small. Okay. And then if I go to chat, this is a lot more rounded.

01:16Right? So there's inconsistency in my app.

01:19And the reason why there's inconsistency when I was designing my app, I did not build out a design system nor did I use design tokens. And understanding these two things is going to be very imperative when I share with you my workflow.

01:33So what is a design system? A design system is a single source of truth for all things design. It contains your UI components, It contains design guidelines, and it also contains your brand identity.

01:45Right? Colors, copy, whatever it may be. Right?

01:47So that's a design system, and I think we all understand what a design system is. But core to a design system, especially for you as someone building the application using AI or a developer, is we need tokens. And what tokens essentially are is they're a representation of a specific design decision.

02:04For example, instead of having padding 16 pixels and color being this specific hex number, the design token would look like padding spacing medium and color brand primary. So the specific design decision is defined to, like, almost like a variable.

02:20Right? Why this is important? Google puts it this way.

02:23Global theming. Tokens make it incredible easy to introduce a dark mode. You simply change the underlying token value and the update propagates everywhere automatically.

02:32If you have built a page and let's say it's light mode by default and you wanted to add dark mode, you're gonna find certain buttons, certain badges are not reflecting or converting nicely and that's because you just didn't use tokens. Right? Centralized maintenance.

02:46If a brand changes its primary colors, developers and designers do not need to manually search and replace hex codes. Right? For example here, if I wanted to change how the roundedness of this button is, I would have to then go manually and remember to change this button and that button.

03:06Right? Because I don't have a design system. I'm not using tokens.

03:10Right? So understanding the value of a design system and design tokens, and if you're a designer, this is home to you.

03:16But for us non designers, this is very important. Now understanding all this, let's start going through my design workflow.

03:25I'm actually gonna be designing something with you. So step one of this is I gotta collect inspo and there's many places you can collect inspo.

03:34First place I would say is Twitter. I have a pretty seasoned Twitter following where I follow a lot of devs, AI people, you know, there's soccer content, there's Jesus content, there's dev designer content and usually when I like something, what I'm going to do, for example, this is a page by Jack.

03:54I think he's about to get married. Shout out to you, my g. I would bookmark this.

03:58I don't wanna bookmark this because it's weird bookmarking this. Right? But I would bookmark it and then I have an app called GatherOS by a designer actually, and this app basically propagates all my bookmarks.

04:11Right? So I have a place where I have all my bookmarks and I can store inspiration like this icon GIF right here.

04:18I liked it. And there's plethora of other things that I will bookmark on Twitter. Another place is Mobin.

04:25Now I don't pay for Mobin, although it's a subscription platform you can pay. Mobin has a lot of great examples. Right?

04:32Onboarding flows, hero sections, like dashboards, they literally have everything.

04:37Right? So I can click on sites and, like, just even some of the examples they have, like, for example, this right here is a beautiful site.

04:45Right? So I could, like, click on sections and then I could, like, save this section. Right?

04:50Or I I guess you would have to pay, maybe you take a screenshot, whatever it is. Right? So you have Mobin for inspiration.

04:56So that's step number one is collect inspo. And one site I can share with you that's an inspiration of mine, we're going to use to build a design system is family.co. It's some crypto wallet app site, but really I just love the funness and the, like, cuteness and, like, just how cartoony but very tasteful the site is.

05:15So this is, for example, a site that I'm gonna use to build a design system. So step one is collect inspo. Step two is we're going to create the design system.

05:25And the way we're gonna create the design system is we're going to use Design. Y'all remember Claude Design came out a couple weeks ago? Claude Design is absolutely amazing for creating design systems.

05:37As you can see, I've been using it heavily the last couple of days. Alright. So what I'm gonna do is I'm gonna go to family.co.

05:43I'm using the Zen browser. One of the cool things about Zen is it has the screenshot feature. So I'm gonna take a screenshot of the entire page and as you can see, I have the entire page screenshot it I'm and just gonna download this and then we're gonna go to Claude design.

05:57Right? And I'm gonna click start with a file and we're just going to click on our downloaded image and then I'm going to prompt as follows. Please create a design system with the attached page.

06:08Please do create components using the design system and display the tokens. I want this displayed on one page. So a simple prompt, basically, we've prompted Claude to create a design system using the screenshot.

06:22Let me see attached picture. Please and then I say create components using the design system and display the tokens, and I want this displayed on a page. I basically want us to see the design system that we want generated, and then I'm going to click on start project.

06:38Now while this is cooking, I'll tell you this much, Claude design is great for building design systems. You know what else is great? The sponsor of today's video.

06:45Now before I introduce today's sponsor, I'm gonna be sharing with you this clip. It's a clip of Mark Cuban explaining the best way to make money in this AIH.

06:53I've been through every single technology, you know, event and evolution, and this blows them all away. Mhmm. Now how you implement it in business is a whole different issue.

07:01Like, literally, when I was 24, I was walking into companies who had never seen a PC before in their lives and explaining to them the value and having these guys going, well, son, I got this receptionist right there. I got that secretary. I'm never gonna need that shit ever.

07:11Right? And but then, you know, my business then was helping them figure out how to implement it to give them an advantage. Yep.

07:16There are gonna be integrators that particularly young kids. Like, when I'm telling my kids who are 15, 18, 21, or 19, 21, and kids going to school, what should I do? What should I do?

07:23I'd be like, so

07:25all you can about AI, but learn more on how to implement them in companies. Right? So I wanna pause right there.

07:31Learn more on how to integrate them with companies. And the reason why I'm sharing this with you, I do this as a business. I have a product studio slash AI consultancy where this is what we do for a lot of businesses, particularly medium to large sized businesses.

07:43Now our website is ugly, and the reason why it's ugly is we're busy making money. But how would you get started? That's where I wanna introduce today's sponsor, Scriba.

07:51Scriba is a learning platform for those who are looking to get into engineering, particularly in the age of AI, and their AI engineer path is by far one of the best courses that they have. Now every chapter of this course is something that me and my product studio have implemented for other companies.

08:07If you're looking to build agents for businesses, look no further. If you're looking to understand MCP technically, look no further. If you're looking to build agents with multiple tools that can scale, look no further.

08:17Again, if you're someone who's looking to build agents for businesses, I highly recommend you check out Scribble. The link is in the description, particularly the AI engineer path.

08:26Now let's get back into the video. Okay. So we got the first version of our design system.

08:31Let's see what was generated. It's calling you the family design system because obviously I used family.co. So we see the colors right here.

08:37There's different shades of blue. It shows you, you know, the type of shades of black you use, the sticker accents, the semantic colors, what success, warning, danger info looks like.

08:48You get the typography as well, like what font it should use, how it looks, you know, at different sizes. You also get like the, you know, like the sizing of the text.

08:58Right? So display size with h one, h two, h three, all the different sizes look like. And then you get spacing, radius, some example components that you could see a button here.

09:09You could see some badges here. This new badge looks off. We're gonna get that fixed.

09:13You see what the input and the controls look like, avatars, and and there's just some examples. So this, ladies and gents, is a design system.

09:22Now I can ask it to continue to generate more components like, you know, a dialogue or a form, this, that, and the third. So you can go wild as much as you want.

09:31And thing that I also want you to notice is this isn't really one to one this site. And it's not supposed to be.

09:40Like, that's not the goal. Reason being is AI right now is not good at capturing a screenshot and getting it one to one. What it is good though, it's good at giving you a canvas for a design system that you can tweak.

09:52So what you can do right now, for example, let's say, I don't like these little dots. I know it's trying to do like basically what the site has here. I don't really like that.

10:01So I can click on markup and then I can draw on the screen. So I'm just draw there.

10:08I'm gonna draw there. Maybe I could just include both right here, and I'm gonna draw this right here.

10:15So I've marked up all the places here, and I'm gonna say, please remove this from the design system.

10:24Right? I don't want there to be any random confetti like things. So I highlighted that.

10:29I said, please remove this from the design system. And in short, AI is going to remove this for me. So as you can see, the confetti stuff was removed.

10:37I'm not a fan of the logo, so I'm gonna say remove this logo will have no logo. Right?

10:44I don't want AI to design my logo. That looks very AI. I don't want that there.

10:49So I'll have that marked up. Now I can also say, fix the alignment of the text in this batch.

10:59Right? So that's another thing we're gonna send off. Right?

11:02So this is what building out your design system looks like. Right? You're on Claude design and you're tweaking things to your liking.

11:09Let's say, like, you don't have a specific inspiration or a site that you wanna build off of or, like, use as a foundational base. Let me give you one example that you can use. So if you go to vercel.com/design.md, they basically have their design system.

11:25Right? Uh, this is for light theme. You want for dark let's let's actually do dark mode.

11:30You can copy this, and you can use this as the basis on which you build on top of. It's not for you to copy this. It's for you to have a foundation, and then you can tweak the design to your exact liking.

11:42Here's the thing. If you use AI to design the entire thing, no sauce or input from you, your site's gonna look like everybody else's. But I trust and I know that we all have our individual taste sauce and we're gonna use that and we're gonna build with AI some fire design.

11:57So I can literally copy this entire thing and I can open this in a new tab and I can say, build me a design system using the design dot markdown file I've attached below. And then I'm just gonna paste this and I'm gonna hit send and we're going to see a design system being built off the markdown text that I just sent.

12:17Let's go back to our original design system. So I have this right here. The badge was fixed.

12:24Right? What else was there an issue? I forgot what the other issue was.

12:27Oh, the logo. The logo's removed. I like this.

12:30Let's say I wanted more components created. Can you create for me a dialogue component, a form component, and any other component that I might have missed that is important for a design system?

12:42So I like how things look, but I want more components added to my design system. So when I port this over to Claude code and I'm getting the agent to use the design system, it knows exactly how things are supposed to look and feel.

12:55And right now, if you're wondering where we are in the design workflow stage, we created the design system. We generated the components and tokens. We're now tweaking it to our liking.

13:04And make sure to stick around at the very end because I'm gonna show you how we build this all out with AI. I guess while the AI is working, a couple of things we can talk about. Anybody watching World Cup games?

13:14I would love to know what your World Cup team is. Let me know in the comments down below. Very disappointed with the Ivory Coast and Germany game.

13:21I think Ivory Coast could have won. That was pretty sad. Sweden getting belt to cheek by The Netherlands was a beautiful thing to watch.

13:28I loved seeing that. And then what else was a a fire game? Egypt and New Zealand was pretty fire.

13:34Egypt coming back. That was insane game. Wonder who you're watching.

13:37Wonder who you're supporting. If you support Messi in Argentina, please unsubscribe.

13:42Actually, was joking. Don't do that. We're about to hit 100 k subs.

13:44You should be subscribing if you're watching right now. Now finally, we have some new components added. Let's check them out.

13:50We have a dialogue component. This looks very clean. We have a form right here.

13:55Very, clean. We have alerts and notifications. This looks clean.

13:59Now you might think the colors feel a little AI. If you wanna change them, you change them. I'll show you how you do it.

14:04You mark it up and then you change. We have, oh, check boxes, radios. Okay.

14:08We have all that stuff right here. We have a drop down menu and we have tool tips and steps. Right?

14:14So this looks good to me as a design system. Now you can keep on tweaking to your liking. You don't like the spacing, tell the agent to fix the spacing.

14:23You don't like the colors, tell the agent to fix the colors. You don't change your design system once you've passed it over to Claude Code or whatever agent you're using. Change it and tweak it here to your liking, then you move it over there.

14:36Now, before we start building out, let's go back to our design system here, and we can see it's building out Vercel's design system based on the markdown we gave it. And this can be the foundation on which we build on top of. Right?

14:51So you can use some inspiration. Right? Some site like family.co or some screenshot you found from x or Maubin, or you can use Vercel's design .md or some other design.md, have that as the base layer, the foundational layer, and then tweak it to your liking.

15:07So now since we're getting ready to build the design system out into our actual app, I'm gonna spin up a quick SvelteKit app. We're gonna call it SvelteDesign. I want it super minimal.

15:16TypeScript, we'll use a bunch of this stuff. Great.

15:19Yes. Great. We'll use NPM for simplicity.

15:23Uh, Svelte is my framework of choice. SvelteKit is my framework of choice. So we're gonna be using, uh, SvelteKit for the app.

15:30And what I want AI to do is I want it to build me a landing page. I want it to build me a sign up and sign in page, and then I also want it to build me a dashboard. And what we're going to look for is that is it following the design system and is it consistent throughout.

15:44So we have that created. Let's c d into Svelte design, and we're going to use Cloud Code in dangerously skip permissions mode because that's the way to live, and we have this ready.

15:57So going back to Cloud Design, I'm gonna click share, send it to, and we're gonna click send to Cloud Code. It's going to give me this prompt.

16:05I'm gonna copy this prompt. Gonna go back to Ghostie and paste this here.

16:10We're gonna hit enter, and let's see what happens.

16:15So I noticed here that it's using the Claude Design MCP to import the project. It lists out the project.

16:22It reads the project metadata, and it found the family design system. And okay.

16:27Well, the file's too large. Let me read the full content from the saved output to understand the complete design. So it's basically reading the design file, and it's going to implement our design system.

16:37Then we're going to create, again, our landing page, our sign up page, and our dashboard. Okay.

16:42So it finally has the full design now. It identifies as family design system, and you could see here it says that he finds the hero, the color tokens, type pography, spacing, radius, elevation, large component section like buttons, badges, inputs, avatars, token list, balance card, dialogue form.

16:59So we've given it everything it needs to build a cohesive and clean looking landing page, dashboard, and sign up page identifies it's a Svelte project, now it's going to start cooking. While this is cooking, any of y'all miss Fable five?

17:14Man, those two, three days with Fable five. Incredible. Incredible.

17:19And if you think it's pretty much the same as Opus 4.8, you either use Fable five to build a to do list app or you barely use it at all. Like, I've been using it at pretty large old code bases and, you know, converting them over to modern tech. Some things to Rust, some things to Affect, and it just beautifully it just understands you.

17:37It's fast. It's man, I really miss it.

17:40And I hope they bring it back, uh, because, uh, I hate GPT five five and Opus four eight now. So hopefully, they bring it back and hopefully, it's not just US people because I am Canadian. I'll have to move to The US expeditiously if that's the case.

17:54But in the meantime, we got GTA six coming out. We got the new Spider Man. We got new Avengers.

17:59It's a lit 2026. It's a great 2026. And most of all, if you're going through it, you know the one thing you can do?

18:05You can pick up this beautiful bible and you can read the scriptures to just encourage yourself. Let me read you some.

18:12In Hebrews 13 verse five, it says, don't love money. Be satisfied with what you have. For God said, I will never leave you.

18:19I will never abandon you. So we can say with confidence, the Lord is my helper, so I will have no fear.

18:26What can mere people do to me? Be encouraged. So I can see here on the landing page that it's basically placed the design system page here, which is good.

18:37It means it understands the design system and all the components look exactly the same. So what we're going to do now is we're gonna tell it to build a landing page, sign up, sign in page, and the dashboard. So now that you understand the design system, please build out a landing page.

18:51I want you to build out an off page with sign in and sign up, and I want you to build a dashboard page. Now I'm gonna run UltraCode so it gets this done all at once. But, also, look, I I didn't tell it to use the design system.

19:03It's baked into the code base. So now you're going to see that it's going to use it and the entire landing page, sign up page dashboard is going to look cohesive and consistent. So Cloud Code finished, and if we go to our new tab, we'll see our three pages.

19:19Our landing page, our off page, and then our dashboard.

19:27Now this isn't me saying this is beautiful design. This is me showing you how in one prompt, I got consistent components all around.

19:38Right? It followed the colors. It followed the font.

19:42It followed the spacing. It followed everything. And so I am able to build consistently a consistent looking app using this workflow.

19:51But in terms of the sauce, in terms of it looking good, you spend time in the design system page. So you continue to tweak this, go back and forth, and there's gonna be places where AI is not going to get the design system a 100% correctly, so you enforce that. But here's the thing, because you have a design system, once you fix one thing, it affects the entire thing.

20:12Right? So the fix is applied everywhere.

20:15You can see the auth page is pretty consistent with the landing page. Although we did get the confetti buns and that stuff right there, and I'll tell Cloud Code to remove it. But, again, this is a great or a better starting point than me telling it, oh, make it rounded here and do this and do that because then you're gonna have a messy designed app like I have with Pluto.

20:33Now one thing that you can do on top of all this is using UI libraries to spice up your application. I'll link a couple down in the description. For example, I found this one recently called BUI and something simple as this accordion that has a little you see that little animation, a little oomph, a little bounce, you can or this drawer right here having you open nicely to the left, to the right, or I can add this tilt card where when I hover on it, it tilts.

20:58There's a lot of cool stuff here. Right? Like, all these little things, all these micro animations, all you have to do is literally just you could copy the code and give it to your agent or you can literally give your agent the URL and tell it to add this component, but to use the design system for the design.

21:15So you can get all these cool animations out the box using your design system with just a few clicks and tabs. So to summarize, collect inspo, create a design system using Claude design, tell it to generate components and tokens, tweak to your liking, you're gonna spend a lot of time here, and build with AI.

21:35Now this isn't me telling you copy some random site and use that site and just build a design system because that's basically I just used family.co. But find inspiration and use that inspiration as a basis point and then give it your sauce, your swag, your style.

21:50But we also are going to be using AI, so it needs to be structured and clean, and a design system with tokens is the best way to do it. This is my design workflow. I hope it makes sense.

21:59Let me know in the comments down below what else you'd like to see before I miss anything. Thank you so much for watching this video. You've been awesome.

22:06My name is Ross. I'll see you in the next one. Peace.

The Hook

The bait, then the rug-pull.

You can always tell when a web app was designed entirely by AI. It has that smell — weird borders, a landing page that looks polished and a dashboard that looks like a different product entirely. In this video, one developer shows you why the fix is not better prompts, it is the step you have been skipping: a token-based design system built before you write a single line of app code.

Frameworks