Big Idea

The argument in one line.

AI can't invent design taste on its own, but it can faithfully clone and iterate on a design system, so the real skill for non-designers is building and refining that system, not writing prompts.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A non-designer builder who needs a landing page or product UI to look intentional instead of AI-generated.
Someone already using an AI coding agent (Claude Code, Cursor, etc.) who wants a repeatable process for handing off design work.
A solo founder juggling multiple products who wants one reusable design language instead of a one-off page every time.

SKIP IF…

You already have design training or an in-house designer; this workflow exists specifically to compensate for not having either.
You want a tool that designs with zero direction from you; the method still requires curating references and writing feedback.

TL;DR

The full version, fast.

Ras Mic argues design is about feeling, not math, so instead of prompting an AI to invent a layout from scratch, he builds a design system first. He screenshots a well-designed site he likes, feeds it into a Figma-alternative called Paper through its MCP server, and has his coding agent extract the system: colors, type, spacing, components. He builds one landing page against that system, leaves inline comments on what to fix, and has the agent tweak the system from the working page rather than editing the system blindly. Once the system is dialed in, he reuses it to generate new pages and layout variants in minutes, and reports Claude's Opus models follow a locked design system especially well.

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 – 00:29

01 · Cold open: design is taste, not math

States that design is judged on feeling, not formula, and previews a repeatable AI design workflow for people without design skills.

00:29 – 01:49

02 · Showcase: portfolio and Pluto redesign

Walks through his own portfolio redesign and a full facelift of his AI agent-builder product Pluto, including dark mode, animation, and an agent-creation flow, all built without writing code.

01:49 – 02:34

03 · The two tools you need

Introduces the only two required tools: Paper, an AI-native design app with an MCP server, and a dedicated screenshot tool for capturing references.

02:34 – 03:17

04 · Step 1: Find inspiration

Recommends browsing X and Mobbin, a searchable catalog of real app and website screenshots, to find two or three reference sites worth cloning.

03:17 – 04:37

05 · Step 2: Build a design system from a screenshot

Screenshots a reference site, pastes it into Paper, and prompts the coding agent to extract a full design system via Paper's MCP: colors, type, spacing, components, plus a first landing page built strictly from that system.

04:37 – 07:15

06 · Sponsor: Firecrawl's Alexandria

Sponsored segment for Firecrawl's Alexandria, a categorized data catalog that gives AI agents structured access to public data across finance, government, retail, and other categories.

07:15 – 09:26

07 · Steps 3-4: Build the landing page, then iterate

Generates a landing page from the design system, then closes the loop by leaving inline comments on the rendered page and telling the agent to address all feedback before updating the system itself.

09:26 – 10:46

08 · Combining two design systems into one

Demonstrates merging a personal portfolio's design system with Pluto's by copying both into a single Paper project and asking the agent to combine them into a new hybrid system.

10:46 – 13:08

09 · Step 5: Exploration, and building new pages fast

Once a system is locked, requests multiple layout explorations of a single feature (a banking page) in one prompt, then generates a fully new page like a product dashboard in minutes against the same system.

13:08 – 15:35

10 · Full recap, and which AI model to use

Recaps the five-step loop end to end, generates alternate color variants of a design system, and states that Claude's Opus models, specifically 5.5, are the most reliable he's used at strictly following an existing design system.

15:35 – 17:36

11 · Iterate to build taste, then close

Frames the whole process as a taste-building loop, deleting colors and fonts he no longer likes, then signs off restating the five steps.

Atomic Insights

Lines worth screenshotting.

AI can't design from nothing well, but it can extract and clone a design system from a single screenshot with near-perfect fidelity.
Building a design system before a landing page stops an AI agent from generating a generic, 'AI-smelly' layout with no visual language of its own.
A design system captures colors, typography, spacing, component states, and layout depth in one reference sheet an agent can build every future page against.
Leaving inline comments directly on a rendered page and telling the agent to 'address all the comments' is a more precise feedback loop than rewriting a prompt.
The correct iteration order is landing page first, design system second: a person can judge a rendered page by eye far better than a spec sheet of tokens.
Two separate design systems can be merged into one by copying both into a single project and asking the agent to combine them.
Once a design system is locked in, generating a brand-new page like a product dashboard or banking screen takes one prompt and a few minutes.
Requesting multiple design explorations in a single prompt turns one iteration into several ready-made layout options to choose from.
Claude's Opus models were reported as unusually good at strictly following an existing design system instead of overriding it with a default style.
A dedicated screenshot tool is treated as a required part of the stack, on par with the design app itself, because every step starts from a captured reference image.

Takeaway

The five-step loop for AI-designed UI

WHAT TO LEARN

A design system built from a screenshot, proven on one landing page, and refined from real feedback becomes a reusable spec that turns every future page into a five-minute prompt.

01Cold open: design is taste, not math

Design is judged on feeling and instinct, not formula, which is exactly the part AI still can't invent on its own.
Software gets judged by its cover first, so learning to shape that cover matters even if you'll never call yourself a designer.

02Showcase: portfolio and Pluto redesign

A consistent visual language, not raw polish, is what makes a redesign read as intentional rather than default AI output.
Small interaction details, like an animated character in a chat interface or a confirm-to-next transition, do more for perceived quality than the base layout does.

03The two tools you need

The entire workflow rests on two tools: an AI-native design app with an agent connector, and a reliable way to capture screenshots of references.
A dedicated screenshot tool is worth treating as a core part of the stack, since every later step starts from a captured image, not a live link.

04Step 1: Find inspiration

Undirected prompting produces generic layouts; browsing a curated interface library first gives the agent a concrete visual target to clone instead of inventing one.
Picking two or three reference sites, even from adjacent niches, gives more raw material to build a design system from than a single reference does.

05Step 2: Build a design system from a screenshot

A single screenshot fed through an MCP connector can make an agent extract full design tokens, colors, type, spacing, and component states, into one reference sheet.
The output of this step isn't a page, it's a spec the agent can be pointed back to for every page built afterward, which keeps later pages consistent.

07Steps 3-4: Build the landing page, then iterate

Leaving a comment directly on a rendered element, like 'more spacing, more rounded,' and telling the agent to address all comments beats rewriting the whole prompt from scratch.
The correct sequence is page first, system second: a person can judge a rendered page by eye far better than they can judge a spec sheet of tokens.

08Combining two design systems into one

Two separate design systems can be merged by copying both into one project and asking the agent to combine them into a new hybrid style.
This is how a personal visual signature compounds across projects instead of starting from a blank system every time.

09Step 5: Exploration, and building new pages fast

Once a design system is locked, asking for an 'exploration' of one feature in a single prompt returns several full layout options to compare, not just one.
A brand-new page like a dashboard or a banking screen takes one prompt and a few minutes to build once the system already answers most design decisions.

10Full recap, and which AI model to use

The complete loop is five steps: find inspiration, build the design system, build a landing page, iterate on the page while tweaking the system, then explore new pages.
Claude's Opus models, specifically 5.5, were reported as unusually reliable at strictly following an existing design system instead of overriding it with a default AI look.

11Iterate to build taste, then close

No first prompt produces a finished design; expect several rounds across multiple days before a system and its pages feel right.
The method is ultimately a taste-building exercise: deleting colors and fonts you don't like over time is how a personal style emerges instead of a generic one.

Glossary

Terms worth knowing.

Paper: An AI-native Figma alternative with an MCP server that lets a coding agent create projects, extract design systems, and build pages directly inside it.
MCP (Model Context Protocol): The connector standard that lets an AI coding agent read from and write to a separate tool, here letting Claude control the Paper design app directly.
Design system: A single reference of a product's colors, typography, spacing, and component styles, used so every new page an AI builds looks consistent with the last one.
Mobbin: A site that catalogs real app and website interfaces by category, used as a searchable library of design inspiration to clone from.

Resources

Things they pointed at.

01:40productPluto (AI agent builder) ↗

02:34toolPaper

02:35toolMobbin ↗

05:07productFirecrawl / Alexandria ↗

15:29toolClaude Opus 5.5

Quotables

Lines you could clip.

00:08

“design is less about math, more about feeling, emotion, vibes, dare i say sauce”

punchy contrarian thesis, works as a cold open hook→ TikTok hook↗ Tweet quote

02:29

“this all was made with AI. I did not write a single line of code. I'm not a designer.”

concrete proof claim, no setup needed→ IG reel cold open↗ Tweet quote

07:50

“here's an amazing way to tweak that I love about paper: you can click on this tool right here, leave a comment”

specific, actionable workflow tip→ newsletter pull-quote↗ Tweet quote

15:46

“you're never going to get something perfect off the first prompt. get that out of your head. it needs constant iteration.”

quotable mindset reset that applies beyond design→ TikTok hook↗ 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

design is one of those things ai still hasn't cracked and i don't think it ever will you see design is less about math more about feeling emotion vibes dare i say sauce there's a saying out there where people say don't judge a book by its cover but when it comes to software we are a hundred percent judging the book by its cover so you and me even though we might not be designers better learn how to design and that's why in today's video i'm going to show you how with ai i designed pretty good looking websites if i say so myself i'm going to show you what I've designed and I'm going to explain to you my workflow so you can do the same.

This video, if you watch the end, will make you a better designer, even if you're not one like myself. Let's get into it. First things first, I'm going to open paper and I'm just going to show you some of the things that I've been designing.

We'll go simple. This is a redesign of my portfolio. Nice, sleek, simple, dark and white.

And then we're going to go to the big dog, which is Pluto. Pluto has got a beautiful facelift. This is the light mode.

I know most of you don't like light mode. So I'll just show you the dark mode where like the font is elegant. The spacing is nice.

We have this nice animation. I'll actually show you the live version to make life easier. But if you go on the landing page, which you can check out, by the way, we're in beta right now, beta .higherpluto .ai.

You can see this nice animation right here. You can even see this one right here where confirm goes to the next and then it's done, right? beautiful animation explaining how the product works and functions but when you're going to see the product itself there's a lot of beautiful things first and foremost this little cute character that moves around the chat interface is pretty nice the streaming is really good oh my favorite right now is actually how you create agents specified agents look at that isn't that cute like and after you create one i'm just going to create one random one right now look what happens This all was made with AI.

I did not write a single line of code. I'm not a designer. Sure, can things be improved, but the fact that with me with no design skills was able to do this, this is pretty incredible, right?

And just one more to show you, this is one of my company sites that I'm redesigning. You notice that I'm starting to develop this style, and that's because I'm, again, iterating on my designs little by little. Now, in order to get started, you're going to need two things.

You're going to need to... download paper, right? Paper is a Figma alternative, very AI friendly, one of my favorite tools right now.

And you need a screenshot tool. I vibe coded my own, basically a simple way being able to take screenshots is 100 % necessary. That being said, let's get into it.

Step number one. is find inspiration. And I would say go on X, you know, follow people, follow designers, but a great website that you can use is mobbin .com.

They've sponsored a video before. They're not the sponsor of this video, but I genuinely enjoy their product. They basically aggregate all the beautifully designed websites all in one collection for you.

They even have an MCP server, but I can basically browse and find inspiration for my app. As an example, I've found Devin. Devin's website looks beautiful, right?

So I would find a couple. of these sites that look good to you that you want to redesign or like let's see your there's an app like this for example there's one of my side projects let's say i wanted to redesign this i would literally go on mobbin and find apps in that niche or in even different niches and find inspiration.

Let's say you found the info, right? Step number one is done. Step number two is the most important part, and that's building a design system.

And the way we're going to go about building the design system is as simple as this. You're going to take the screenshot of the website you like. In this case, I took a screenshot of Devin.

And then you are going to type this prompt in your harness, right? I'm using T3 code, been loving it using the nightly version. I just wrote, create a project on paper using the MCP, create this website and its design system.

Basically, paper has an MCP that allows your AI agent to build stuff on paper. And what this prompt did, the reason why I prompted it in advance, because you could see it took 28 minutes. What paper did is it built a design system.

It built out the components. It explains the spacing, the font that's used, right? The spacing between different products, the spacing between different UI elements.

And then we even have colors. fonts space all everything the layouts the shades the depth all that stuff is here created for us so what this does for us is this basically extracts everything that we like about a site and puts it out in the sheet that explains how this site is configured that is what a design system is and i even told the agent to build out a landing page using the design system and you can see that it's following the design system to the teeth and it's already building out something that's production ready but this is not where it ends here because this is just copying straight off rip we're going to iterate on this and i'm going to show you the process but before i do diapers are really expensive and my baby's going through them for for the sake of my child let's hear a quick word for today's sponsor imagine we had 75 million dollars you and me we'd probably be at the beach at santorini we'd probably be in tanzania drinking virgin mojitos we'd probably rent some lambo

trucks doing donuts in the parking lot with no insurance well when i tried to get my friends at firecall to do that instead they dropped a banger product called alexandrium first things first we need to give a congratulations to firecall for raising 75 big ones but we need to talk about alexandra no it's not an ai girlfriend but what it is is it's a catalog for your ai agents better i show you than tell you this is how alexandra works you can connect your agents to the source that it needs.

We're talking about company data, product catalogs, government contracts, code and docs. The agent basically gets richer data. Now, Firecrawl already made accessing the web easier, but that doesn't mean all the data that lives in the web is accurate.

I mean, you and I get to post whatever you want, but with Alexandria, what you're getting is a knowledge library for superintelligence. Let's say you wanted to search the Shopify catalog. For me, example, one thing that I'm using is the finance catalog.

There's a bunch of information. here that's going to allow me to make better decisions instead of max giga chatting buying random options because i someone posts on twitter but now i get actual information live because they have categorized it and it's so simple to give my agent access i just click this And I'm ready to go.

And I just want to show you how many available categories that they have. We're talking public record like government information, company information, retail information, places, finance, travel, people, jobs, news, restaurants, apps, AI models, sports for you, sports gambling degenerates. All the information is here for us.

Developers, tools, social, health, web analytics, research. We're talking science papers. You can literally give the AI agent all the information it needs.

But let's say the big if that. the information does not exist in the catalog. Firecrawl will scan through partners, people, and other agents to get you the information you need.

Models will keep getting smarter, but they need the right information. Set up Firecrawl to get the job done. The link is in the description down below.

Let's get back to the video. So we found our inspiration. We created our design system, right?

After you create your design system, you'll probably get... like a components tab and a foundations tab. The landing page was created because I asked it to create a landing page.

When it's creating the landing page, notice how it's following the design system to a T. Now, this is where step three, we already did step three, build a landing page with the design. Step four is the most important.

You're going to iterate on this landing page and tweak the design system. And I'm just going to show you examples, right? For example, let's go to Pluto and...

you're going to see on this left tab, Pluto grayscale. So this was originally the first version of the site. Notice how there's not really any color, right?

It's pure black and white. So what I told the agent is I want us to explore adding color, right? and it gave me a couple versions a couple iterations and then we landed on this you see the accents of blue you see colors over here you see the colored buttons and it did the same thing for light mode light modes right here so what you're going to do is once the landing page is created you're going to tweak on the landing page and here's an amazing way to tweak that i love about paper you can click on this tool right here leave a comment whatever comment you leave You can go back to your agent and you can say, agent, address all the comments I left.

So you can literally look at this. I'll give you an example, actually. You see these cards right here where the spacing between the outer and the picture is pretty tight.

So basically what I did was I came here and I literally left a comment saying, I like this card, but I'd like there to be a little bit more spacing and for it to be rounded. And I told my agent, go address the feedback I left. And it came up with this version.

So it's very important that once. your landing page is built like this one, start to give feedback. First and foremost, a simple thing is maybe changing the images, right?

These images I'm pretty sure are similar to Devin's or it's just generated random images. You can even use paper to generate those images, right? That's number one.

Number two, maybe adding a bit more color. Like for example here, the code is just black text. It should be colored, right?

There should be colors signifying the syntax and all that stuff, right? the site. And a great way to do this is by adding other inspiration.

For example, this site, Goshen, is a mix of my portfolio site plus Pluto, right? So I took my portfolio site design system, literally. So this is my portfolio site design system.

I copied it, right? Because you can, by the way, I don't know if you know this, but I can literally copy this and then I can paste right here, right? So paper is amazing like this.

So I literally did that. And I told the agent, combine these two design systems. and build me a new page, right?

But the design system has to be there. And it's from the design system where you build a landing page, you tweak the landing page. And once the landing page is a place where you like it, you then tell the agent to make sure the design system is up to date, right?

Don't just tweak the design system because you and I do not have the eyes to see what a design system looks like on an actual page. That's why we build the landing page first. We have the landing page.

We see what it looks like. We tweak the landing page then we tweak the design system if you're a designer then this advice doesn't apply to you but if you're not you're probably watching this if you're not then this is what you and i have to do so yeah iterate on the landing page and tweak the design system go multiple rounds multiple days this will take time and then once you're at a point where you'd like your design system, you like the design, step five is exploration.

And exploration is probably the most beautiful part. Let me give you an example. Pluto has this feature where you can connect your bank account.

And I didn't really like the layout. It was pretty ugly. So I literally told the agent, can we do an exploration of the banking page, right?

Can we just do an exploration? Basically means let's test out different layouts and designs based on the design system. And look what it came up with, right?

This is version one. It calls it balance sheet. This is pretty good, where you have the balances of different currencies, right?

This is ledger by bank, so it's categorized by bank. This one gives you a little summary, right? So I have all these different styles and...

This really took one prompt. And the only reason it took one prompt is because I did the legwork of building out the original design system and tweaking it. And what's cool is once you're at a state where you like the design system and your landing page, then creating the other pages is so simple.

Let me show you. I'm going to go to three code and I'm going to say build out the product dashboard using the paper MCP on the paper project. You already have access to the code, so you know what the app can do.

But using the design system. in the landing page that was created, design for me the product, which is the dashboard. That was actually a terrible prompt, design for me the product, which is the dashboard.

But you're going to see how in just a few minutes, the agent is going to design something beautiful using this design system. While that's being cooked, I really want to emphasize on these two steps again, on the inspiration and building the design system. I really want to press on these two steps.

Like you don't understand how many different... projects that I have. I even do my thumbnails.

And anytime I like a site, I'll literally just paste the entire site here. And then I'll tell my agent, create a design system. So let's say I really like this app.

And I really like this design system. What I'll do is I'll delete the landing page because what I want is the design system. And I could literally tell my agent, actually, let me spin up a separate thread and I'm going to say.

please go on the GitPog project on paper using the MCP. And I want you to change the design system. I actually want different versions because the base color is orange.

I like everything else. I'm just not a fan of orange. Can you give me, create for me different versions with different colors?

So this is what I mean. I have this base design system. I can now tweak it.

Let's say the one thing I don't like is this color or maybe I don't like the font or maybe I don't like the roundedness of these buttons. This is your source of truth. This is what you want to tweak on.

What makes this design workflow special is that I'm actually doing what designers, you know, in a much more scrappy way are doing. We create a design system, a design language. We tweak that to our liking.

We create a couple of. beta versions of our site. We see if we like it.

We tweak the site. Then we take that information, update the design system. And then we use that to build all our different pages.

With Pluto now, I'm just telling you to build different pages. That's literally it, right? Here's another version of the finance.

This is an empty state. And this is... Unlinking a bank account.

You can see how building the design system once and then continuously tweaking on it and getting it to a state that I like means I can design as many beautiful pages following that consistent design system, that design language in just a couple of minutes. By the way, here's the dashboard it's creating for my project bezel of computer.

Look at how beautiful that is. Just a rounded corner with the spacing. I love how tight things are.

And again, it's because it's following the design. system now i can continuously tweak on this and when i've made tweaks on this i'm going to ask my agent to tweak the design system basically making it mine because you and i are not designers we're going to need some inspo like a base design system on which we build upon right and something you can do is also combine design systems i've done that before but again you follow this workflow and over time you're going to find yourself building your own sauce your own taste your favorite fonts your favorite spacing so find inspo build the design system build a landing page with the design system iterate on the landing page once you're done iterating tweak the design system so it becomes a standard language and then start exploration building the different pages building the different sides of the product i would never build one version i would ask ai to build you multiple versions now while we're waiting on some results you might be wondering what model am i using and i'm using the cloud models the anthropic models opus 5 5 honestly generally the cloud models are the best at design i've used astra for this before as well as long as you have a design system and you're telling it to follow the design system open ai models should be good as well what happens is when you give them no design system and they design on their own then it's

very AI smelly, right? But Opus in particular, 5 .5, is really great at following design system and instructions. Remember how earlier we told our agent to give us different versions of the design system for colors?

Originally it was orange. Now it's giving us a version of blue. And by the way, I have it also working on the Devon design system where it's building out the product.

Again, very beautiful looking, very clean. There's still some AI next to it with like, you know, these colors. And this is where the constant iteration and the constant tweaking happens, right?

You're never going to get something perfect off the first prompt. Get that out of your head. It needs constant iteration.

But the more you iterate, the more you start to develop taste, the better you become at this. And it just becomes easier, right? So look, I have different variations of.

my design system you know what screw the orange I'll just delete the orange and I really like the whatever this color is, Tide, and the blue. I don't even really need the purple.

I could delete the purple, right? So this is what iteration looks like. And then maybe I'm not a fan of the font, or maybe I don't like how too rounded the buttons are, right?

Like I'll build a landing page, tweak the landing page, and then I get it to tweak the design system. Please stick to this workflow because it will train your brain to learn how to build a design language and design systems and think design forward. Find inspo.

Literally, you can take a screenshot. You can paste your screenshot in a new project on paper, then build the design system, then build the landing page with the design system, iterate on the landing page. After that iteration, tweak the design system and then start exploration.

And once you're done, it's just a matter of telling your agent, build this up on the app. And that's it. That's how you design beautiful looking apps using AI as a non -designer.

I trust that this video will help. I covered every single corner that I can think of. Let me know if you have any questions down below.

Let me know if you want to watch these type of videos. You've been awesome. My name is Ross.

Thank you so much for watching. I'll see you in the next one. Like, comment, subscribe and peace.

The Hook

The bait, then the rug-pull.

Ras Mic opens with a claim that should unsettle any builder: AI still can't design, because design is feeling and taste, not math. What follows is his workaround, a five-step system for cloning a design language from any site he admires, then using it as a leash so an AI agent's output stops looking generic.

Frameworks

Named ideas worth stealing.

03:17list

The Five-Step AI Design Workflow

Find inspiration
Build a design system
Build a landing page with the design system
Iterate on the landing page and tweak the design system
Exploration (multiple layout variants)

A repeatable loop for producing consistent, non-generic UI with an AI coding agent: clone a design language from a reference site, prove it on one page, refine the system from what you see, then reuse it to generate unlimited additional pages.

Steal forany AI-generated landing page or app screen that currently looks like default AI output

CTA Breakdown