Master Claude Code + Figma MCP for Design in 50 Min | Felix Lee

A lot of designers, first of all, are not freaked out enough.

They are really actually not on Claude code or cursor today.

The majority of them are still on Figma.

Claude code produces a significantly higher quality output

than compared to other coding ages they have tried.

From a haste perspective,

Claude code just wins it all.

If you do use the MCP,

it actually automatically fills up all of these things.

So that's the advantage.

All of these are like vectors, right?

So it's like SVGs.

You can edit the colors as well.

It's not just a screenshot.

It really becomes a component inside of Figma.

Oh, that's amazing.

It just made it glow by itself.

The most that I did was just provide a screenshot.

If they see this exact podcast,

they see what it can be capable of.

Hopefully, they're few excited.

Hey, welcome everyone.

My guest today is Felix.

Felix is the CEO of ADP List.

And he's also got thousands of designers

with a happy card code, pick up an NCP,

designed based on interfaces and apps.

So really excited to get Felix to show us

exactly how to go from design to product

and vice versa.

Welcome, Felix.

Hi, Peter.

I'm very excited to be on your show today.

Being a big fan.

So thanks for having me.

Yeah.

So why don't we get right into it now?

Do you think you can share a few products

that you've designed using Copper itself?

Yeah, for sure.

So let me just share my screen.

I think it's the best use case for that.

So I have designed a couple of products

and just from a background information perspective,

I have been vibe coding as a designer

for about maybe close to three and a half months today.

So I started doing the holidays of 2025

and kind of wrote into 2026 this year.

So the first website that I've really kind of did

was my own personal website.

And this is where I highly recommend a lot of people

to start because of course, it's all about yourself

and it's not for any clients or anything.

So you could just be experimental with it, right?

So this is my personal website, philixly.deaf.

There's dark mode, light mode.

So it just goes to dark mode as well if it's at night.

And I also built an AI chat for myself.

So for example, I could say, why did you start ADP list?

So for this, I use sort of super base

and build a REC database with it

with all the information about myself, ADP list,

and everything, right?

And as you can see, it populist answer

and it even give you the sources that it plucks for.

So this is all built by myself.

There's no sort of third party plugins or anything

done directly on Cloud Code.

Is this using like OPAI or Sambanger?

Can you turn around?

Yeah, so the API for sort of the chat

is using the Cloud AI, yeah, and tropics API.

I love how when you put your dark mode and light mode,

the background changes too.

Yeah, how do you get that to work?

I'm just first.

Yeah, so it's a two different images or yeah.

It's actually two different images that are uploaded,

but you know, it's pretty interesting

because I did not upload the dark mode for Cloud Code.

So what I tell Cloud Code is convert this image,

the original image, which is this,

into a dark mode version.

So you know, it's so great.

I mean, it's, back then it was Opus 4.5

and it was able to just convert it into dark mode.

I didn't have to do much.

What?

I'm just to die, I'm just dead.

Yeah, and then there's some Easter egg as well.

Yeah, so you could have that as well.

It's pretty simple, but it was really where I got started.

My next website was for ADP list, right?

So this is my, during the holidays as well.

And I've uncoated this platform

where we actually connected a real life data

of our 2825 bookings on ADP list,

on onto what we call the ADP list red globe, right?

It's a little bit, it's inspired

by Shopify globe, where Shopify has like, you know,

shoppers and everything.

In this case, we have people calling one another

across the globe.

This is, this lies represents the bookings,

that, that, you know, global bookings.

And if you just click into the yellow dots though,

if you click in the yellow dots,

it shows you the meetups that are organized

by our community around the world.

Wow.

You could just randomly click one.

This is in Toronto.

It's beautiful.

Just click here.

This is in Singapore, where I'm at right now.

So, and then of course, at the bottom,

you know, we wanted to design something like a live ticker,

almost like a stock market,

but with the names of the mentors

who contributed in 2025.

So that's a little touch here.

And of course, these are sort of all the minutes sessions

that are being done in 2025.

So this is relatively simple,

but I decided that, you know,

for my sort of second project in the sense,

it will be something that goes back to the company.

So this is, this is where I landed mix.

And did he, he, he share how you,

I kind of high level, how do you,

do you just like, did you get that glow from somewhere?

And then just build your database.

Yeah, for sure.

So, yeah.

So what I did was that of course,

actually plot, so I actually exported the data

off the names of the mentors,

you know, where the calls are happening

from a, from a city to country perspective,

the minutes, the sessions,

all these data from our AWS backend.

I exported it as CSV,

and what I did,

co-clock on to do is that,

hey, look, you know,

read through all this data

and sort of design this glow, right?

So I actually had a screenshot of the Shopify globe,

and I tell that, you know,

I kind of won this globe,

where the calls are sort of interlinked through the lines

and everything like a Shopify globe.

So I asked you to make, make for me a plan.

It had, it had a great plan to begin with

with all these data sets,

and then it just began building from there.

So this project took me about,

I would say, combine,

it's about 12 hours,

so it's relatively straightforward in that sense.

Yeah.

So you did not use like a 3D globe asset,

it actually just made a globe.

It just made a globe myself.

Yes, I did not use a 3D asset for that.

Wow.

Okay.

It is insane, yes, it is insane.

So I think the most that I did

was just provide a screenshot.

You know, it wasn't anything more than a screenshot.

Yeah.

Okay, I'm not gonna try this thing.

Okay.

It did one more.

Yeah, I do have one last word just to show everyone.

This episode is brought to you by Replet.

Replet's new agent for is the best way

for teams to collaborate with AI agents.

There's a new infinite canvas

where you generate design directions,

compare them and take your favorite

straight into a working app.

From there, you can spin up multiple AI agents

in parallel to build different features at the same time

and track them on task board

where you can review and approve what ships.

And once your app is built,

the agent can generate slide decks, animations,

and more from the same project

because slides, animations, and documents

are all just code under the hood.

Check out Replet via the link in the video description

and use my code PN26 to get a three months free.

That's PYANG26.

Now back to your episode.

So this is why I called the Growth Analyzer app, right?

So this is something that I put on X as well.

People loved it, you know, basically.

So you have credit system.

So this is really a full blown app here, Peter,

because you gotta sign in, you can purchase credit

if you want.

So if you go here, you can purchase credit.

So this is linked to Stripe.

You can log in with your Google accounts.

So what it does is that you can actually

upload your landing page image or even your website URL.

And what it does is that it will come back

with something like this, right?

This is a quick demo.

So it will come back with something like this

where it tells you, hey, your landing page

is at about 72%, some of the things

where you can improve on, like your copy.

And it tells you a little bit of what kind of copy

you should write next and what it would be the expected outcome

of that new sort of a UX change, right?

So even like the CTA, yeah.

So instead of saying, get started,

you could be like start recording free, right?

So more actionable, like direct to your value

prop rather than just saying, get started.

So I designed this.

And wow, this really took me a long time.

I mean, it took me maybe about a combined of maybe more

than like 48 hours, I think, across a span of a good three weeks.

Of course, I was iterating on that, yeah.

So this one is just like you have to do a speech

on the website.

I'm guessing and pocket when you're AI with a prompt

and then gives advice.

Is that how it's like?

Exactly.

Yeah.

So you can upload your screenshot

or you can tell it to capture a screenshot of a website.

And then it comes out with all this, yeah.

What's the first part of our business?

Like, let's say it for our docs.

Yeah.

So the tough part about this, honestly, I think one

and I've been getting DMs about it,

is that it's to get the hotspots, right?

So you see this hotspots.

So this hotspots, if you would have used clot code

or you would have used entropics, opus, LIM API.

For some reason, the visual recognition part

isn't really the best.

So sometimes the hotspot just goes way off, right?

For example, this one might not be on the copy directly.

It might be somewhere on the top right corner.

So it's a little bit hard to use that.

So I had to try different models.

And the best one for this would be the Germany Pro,

which has Nano Banana.

I think that one was really good to help with it.

So getting the hotspots right was one of the toughest one.

And then second, getting it to write really great feedback

that makes sense, right?

I think I had to kind of like fine tune the response a little bit

as we go.

So I did spend a lot of time on the quality of the output here.

This is the best dude.

Any kind of landing page optimization

if it equals viral on X.

Yeah, probably we can monitor from this.

Yeah, yeah, yeah.

Like there's a lot of landing page optimization stuff.

So this is more of like a sort of a longer lives of helping

you with conversions and just like supporting you

with like a second view of your landing page here.

OK, well, this is pretty credible.

So let me ask you about.

So when you make it stuff like this,

let me your designer by track.

So do you actually start with debate in myself

or do you just go spray this coaxa?

Well, you know, it's a great question, right?

Frankly, frankly, I have not used,

I did not start from thick math for any of these projects

that you just seen.

Yeah.

Unfortunately, unfortunately.

Got it.

OK.

So I think what's a lot of part of the cost

is you just kind of iterated and called rap.

It's not part of the process.

We have got a lot of things to talk about that.

But yes, it wasn't a part of the process

when I designed all of these things.

Yeah, and it's like this stuff is so good already

and like, you know, code is this bit free at this point.

And like, it's almost like I'm not a designer by trade.

And I was trying to use on a layout.

It's a good thing to ask.

So like, see, it's almost easy to just like generate a code

to like try to build some box around me, break mine.

Yeah.

Was it you who tweeted, like, did you tweet something

like auto layout is a pain in the ass or something?

A few days ago, was it?

It was me, me.

OK.

Yeah.

Oh, damn.

Yeah, like, no, I mean, I mean, it's the same for me.

Like, I wouldn't claim that I am like a full blown designer

from a perspective of that.

I spend time on design every other day.

I mean, I did do that in the first two years of founding

our startup.

But you know, after we raised our first round, you know,

I hired a designer.

And she took pretty much the bulk of the workload.

In fact, everything.

So I didn't kind of do that, like, any more.

Yeah.

But it was always hard to figure out all the auto layout

stuff as well.

OK.

Well, I mean, why don't we keep our sounds here?

And let's actually try to use Figma the more.

Like, they have an MCD, right?

Yes.

Yes.

Can you show like this MCD can't be here?

Yeah.

For sure.

So maybe just to kind of get everyone on speed, right?

Like, Figma has, Figma MCP has like sort of,

I would say, many, many different functions.

By what we will be demoing here as we talk about Peter

with the two things, right?

One would really be using the Figma MCP

to get a design to code.

And then next thing is like something more new,

which Figma released, which is, you know, getting code

into Figma, right?

I think that's just launched a couple of days ago.

So we'll kind of go through both.

Now, let's do the first one, maybe.

So I'm going to share my screen and open up something here.

I think maybe what would be great is we

do a simple landing page, right?

From by using code code to kind of get that done

and the Figma MCP.

So I have a ready-made, let me just bring that here.

So I have a ready-made sort of a landing page here

for one of our ebook guides that ADP usually promotes, right?

It's called a design mode shot landing page.

So to kind of give a little bit of a sort of broader

understanding of this landing page is that, you know,

you could feel in your email address, full name,

job title, company, and then you, you know,

you could just claim your stuff here.

So to give everyone some perspective is that, you know,

usually a landing page like that, if you were to, you know,

learn web flow or framework, I've made me take you

like a few hours or, you know, if you were to, let's just say,

get a developer to do it.

You got to maybe write a PRD, submit it, and, and, you know,

and then you get a developer to prioritize it.

It might not even be high up the priority list

as compared to any other thing.

So end up, you know, a lot of growth teams

or marketing or even product managers

who wants to just experiment with things,

it's just kind of like legs behind, it gets delayed by a lot.

So this landing page would have taken me about,

would have took my team, I think about at least a day or two,

right?

It isn't long, but I think it's, it's pretty frustrating

when you have to go back and forth with different stakeholders.

I think what would be great, it would be to kind of show you

how FICMIME CT can convert this into a working

during prototype, yeah.

So let's get to it.

So usually what I do is I use Terminal.

So I can use Terminal for this.

So then you can make a code code,

but also what we can do is we can go to cursor,

if anyone wants to see, and usually I use an IDE for it

because I can preview the code.

So I can create a new, new directory.

I can say landing, landing page, landing page.

So you can create it.

And what I'll do is that usually I use Cloud Code

within cursor just so that I can see the code

and the files within cursor.

Yeah, so what you're seeing here is cursor, right?

And I just activated Cloud Code within cursor.

And of course, the simple reason for that is, you know,

you always want to use an IDE to preview your code,

to preview some of the things that is turning out.

So I prefer always using Cloud Code

as the primary coding agent.

But I use cursor just as a, you know,

just as I sort of like a preview, yeah, in that sense.

So let's get started.

So first of all, I think for anyone wanting to see that,

MCP, I think it's already in stock here.

So if I'll just show anyone,

Figma MCP is already connected.

So AWS MCP is connected,

but I might, I will just disable that first.

So we have Figma MCP.

So what I'll do is just go to Figma, this design,

and I'm going to go to death mode.

It's very simple.

And I'm going to copy example prompt here.

Let's say implement this design from Figma.

Just very straightforward.

And it's going to start running.

And while I'm waiting, like I also run

Hockville Incursor, since sometimes

I'll leave you at the easy trouble number one.

And, you know, I get the cursor tip, he insists.

Right?

That's the best.

You want to use it?

Yeah, it's just not far, far, far, far, far, far.

Yeah, yeah, usually that's the case.

But I've seen that, like, you know,

the interesting thing about CodCode,

and I think a lot of people ask me this,

I mean, what we're waiting for it is that, you know,

CodCode produces a significantly higher quality output

than compared to other coding ages they've tried.

So I've tried like, you know,

the one in a Gemini AI studio,

you know, even like codecs from cursor.

I just think that from a, from a haste perspective,

you know, CodCode just, just, just wins it all.

And of course, it produces much higher quality outputs

as well from everything from now on file to codes, right?

So, so I continue using CodCode for that reason.

Yeah, some people say that CodCode is a better at solving

guarded bugs and stuff.

But I haven't figured with it, you know, too though.

So, oh yeah, yeah, for sure.

I mean, I mean, there is a case to be made as well

about how different models also work differently

and has different outputs on different machines.

So you could have cursor using Opus 4.6

or you could have CodCode using Opus 4.6

and it is surprisingly, you know,

very different in terms of its output

with the exact same prompt.

I'm not sure what's the size behind it.

I'm not a AI researcher or AI engineer,

but I'm quite sure that it is different

to a certain extent, yeah.

Okay, so what I'm showing now is that, you know,

what CodCode is actually taking, yeah.

So this is, this is, this was just put up here

and it is showing all these elements here right now.

Yeah.

Yeah, it is, it is that, oh, look at this.

This is interactive.

This is incredible.

This is incredible.

So, so what I'll do next is that, you know,

what I'll do next is that I'm gonna say something, right?

I'm gonna say, okay, I'm gonna take this,

I'm gonna copy the link for it

because this is the, let me just copy the link here.

Oh, copy link, okay.

So because this is the after state,

once I submit the form, right?

So I'm gonna go here and say,

as you can see, it's just 10 minutes, okay?

It's way faster than going to any developers.

So I'm gonna say, great.

Now, the after state once I submit,

the form should be this,

and the logo isn't showing on the preview

and the logo isn't showing on the preview.

So make that work.

And finally, the book should be sticky

at the site until as I scroll down.

Okay, so I just, what I did was just like,

you know, I, I told it three things.

One is the after state, second, of course,

the logo isn't showing, and then the book should be

in a sticky form it, rather than, rather than just,

you know, floating around.

Do you actually have the,

so the whole part of this interface

is down on the Hindi app, right?

Like, do you actually have the PDF with this?

Yes, I do have the PDF.

Yeah, so I'm actually gonna get the PDF,

like, actually, you parted that perfectly well.

So what I'm gonna do is I'm gonna go get the PDF

while it's loading, yeah.

So it's gonna make all the edits right now.

All right.

Oh, so logo's a little weird.

We'll handle that later.

But what we really wanna do is, you know,

this part, right, this is the main part.

I mean, the rest is visual.

We have to edit it a little bit.

But let's see if this works right now

from the after state perspective.

Okay, so let's see.

Okay, yeah.

So not it now works.

So there is a download, the report.

So what we'll do is just to say for download report

in after state, it should, okay.

Okay, so you're gonna take like a URL is a bit left.

Yeah, exactly, yeah.

Five, yeah.

Okay, so now I think it should be working.

Let's just refresh a little bit.

So it feel like it's a little bit slightly sort of RG.

So you're being a piece.

Yeah.

So it's, it is working, yeah.

It's working, yeah, yeah.

So if you can see, I mean, this whole workflow

just took us less than 15 minutes.

Of course, there are some visual stuff

that we gotta, you know, briefly settle it,

but other than that, you know, it's really, really fast

to just get this out of the way.

So let's.

I wonder how much better this is than

and just like copy some screens also over the clock.

So based on my experience the last time,

I think when I did this landing page,

so this is actually a real case study.

Actually, it's right here.

Let me just show everyone.

It's right here.

So it's a lot better the last time

before the new MCP was updated.

I'll be honest.

Yeah, yeah, yeah.

Like from output perspective, just from output perspective, yeah.

But I think it's still okay.

I mean, if you want to put screenshots,

I mean, what it would require

from a screenshot perspective is that it will start asking you

for all these assets, right?

Like the book, all these minor icons, yeah.

So you end up having to go back and forth a little bit,

but if you do use the MCP,

it actually automatically fills up all of these things.

Okay.

That makes this a square advantage for them to, yeah.

Exactly.

So that's the advantage of just using MCP

because it has all the assets.

Cool.

This is awesome.

Would you want to come on next?

Okay.

So the next one is something that I've done it before,

but I think we talked about it in the end as well,

which is going from FickMum from FickGem

and viewing a game using FickGem directly using slot code.

So this is really, really super cool.

It kind of blew my mind a little bit when I did it.

So let's just clear this project first.

We don't need this anymore, not for now.

Just gonna close this folder.

So now I'm gonna sort of do a purest puff, right?

So I'm gonna go FickGem and I'm gonna say,

like I'm gonna like a flappy butt or something, I guess.

Right, flappy butt, flappy butt game.

And I'm gonna say draw a, so this is FickGems AI.

So this is pretty good as well.

Draw a low chart of a simple flappy butt game app

that doesn't require sign-in.

It should include a simple scoreboard

with highest records and others.

The keep a flow simple to simple for users.

Okay, now meanwhile we're gonna open up terminal.

So this is where it gets interesting.

Okay, so we got, now we got two things, right?

So we got our terminal here open

and we got our flow charts.

So it's a little bit messy.

I don't usually kind of go through all of this,

but what I'll do is that, you know,

I will just imagine that you are a designer

and your product managers is give you a flow chart

and be like, do it like this.

And if you're lazy to read it,

you could just, you know, wipe code something

and just use it or if you want to, of course,

you can reach with a flow chart.

But why this is really useful

and why I like it, Peter, is because flow chart

is a sort of bread and butter skill

for a lot of designers.

It's necessary in bigger organizations,

engineers require it.

And many people just want to see it

so that they understand how things work.

Personally, of course, at ADP list,

flow chart is not really a big thing.

And that's just because we keep things really simple.

That's not really all complications.

But we do have some flow charts for more complicated stuff.

But with that said, you know,

I'm going to copy this link to this selection

and I'm going to say using a look at this Figma flow chart

and I want you to build the SAP,

but game reference using this flow chart.

Okay, so what it's going to do is that it will go to FIGGEM

and it will start reading the Figma board, as you can see.

So it's fetching the Figma board now

and it has a Gek FIGGEM NCP.

So it's pretty transparent.

That's what I like.

You know, it tells you exactly what it's doing.

This is still using the Figma MCP, right?

Yeah, it is still using the Figma MCP.

So there's no Figma has just one MCP

and it has multiple functions.

Okay, so now it's asking me where do I want to create it, right?

So I'm just going to say create a home directory.

And if anyone just wants to see

while this is just building up,

let me just go back to my Vasell

and I will show everyone what I did by building a game, right?

On to where is that?

Okay, I have a Tetris game here.

Okay, so there's a scoreboard.

Wow, there's a lot of people that just played a game.

I did not know that, but yeah,

so you can basically play a shipboat game of Tetris directly

for free on desktop.

I just built this using the same exact flow with a fake gem.

So I'm just going to use it.

Okay, so now it's actually building it, same thing.

So just to give everyone kind of a little bit of a preview as well,

but it will blow your mind when this is ready.

Hopefully it just, it has a good outlook.

It works out with, yeah, let me just...

I mean, that flow chart is pretty difficult

for I hear me to read that.

I don't know if it's overlapping ones.

So hopefully, yeah, look at this, look at this,

there's a little bit of a, yeah, this is what I see.

Yeah, this flow chart is not that simple.

Okay, so it's building the HTML file right now, as you can see.

Oh, look at that, right?

So it's time and time and time, yeah, yeah.

Something, let me see.

Yeah, so it is done.

Are you seeing it?

What's that?

Okay, yeah, look at that.

It's time you bird.

So you can play.

Oops.

It's a box.

Oh, let's go.

Okay, so it's a little bit too sensitive, right?

So I can adjust that a little bit later.

Yeah.

You can view the scores settings as well.

That's easy.

Okay, so maybe I just go to easy.

You can try it.

Oh, there you go, I got back the first.

Yeah, there you go, right?

So it just took like a few minutes to even just build a game

like that with animations, with clouds and everything else.

So if I, of course, if I wanna adjust it a little

a little bit further, you know, you can do that.

So what I'm trying to show here is how quick it is

to get from a flow chart on Figma board

to build something as simple as a game,

like Tetris or Flippy Bird or anything of sorts.

And yeah, because by using Cloud Code, yeah,

an MCP, Figma MCP.

Yeah.

I think this is what, but I guess my question would be like,

how much is that she's the fully charged,

but it just knows how to heal Black people.

Black men.

Yeah, maybe it's just that's how to go, yeah.

Yeah, I think that there is a good charge

that it just knows how to build.

I mean, probably a hundred percent,

hundred percent charge that it knows how to build.

So, you know, as we kind of get through today's podcasts

and demos, I think designers will start to realize

that the use case of Figma really isn't what is like a year ago

or even a few months ago, right?

Like if you're on Cloud Code like me,

using Figma would be a little bit of a bottleneck

in some sense to sort of what you're doing at.

And I think that as we kind of get through

of course today's podcast, you know,

we start to realize that a little bit more, right?

It becomes a little bit clearer.

But what I do see Figma as a good use case

with the would really be sort of like

when it becomes like a collaborative tool

between engineers or product managers

where you could leave comments and you could like,

you know, collaborate on the final elements

of the taste components and whatnot, yeah.

Yeah, but it is like the last 10 percent,

the last mark of like the last mark.

Yeah, yeah.

Yeah, I mean, my guess is that at some point

the last mark will be gone, right?

Because LIMs would get hopefully good enough

and good enough to the point where you could just overlook

the last mark or if not just get through the last mark

or if the AI is good enough, yeah.

I also think like there's a use case to Figma

for a very closely matching design system,

the company, right?

Yes.

Although I think LIMs are okay at that now, too.

But like, you know, I'm like,

exactly match design since some for everything,

maybe like what you've been my first stoker.

Oh, yeah, 100%.

Yeah, yeah.

So like design systems, I think it's gonna be big thing

at least with sort of like, you know,

with everything with Figma into the code or vice versa.

Which is something that I've been trying to solve.

Like, so you see this foul caught taste MCP here, right?

Yeah, yeah.

You could see that I screenshot a bunch of tweets,

like, you know, everyone is saying like,

you know, you cannot replicate taste, right?

It'll be a long time until you can replicate taste

and that's just a lot of tweets, right?

Like, like a funny tweets and not.

My, I mean, my guess is that at some point it will

and like, I'm trying to replicate my own taste at least

or like taste of really good designers

that have publicly shown your work.

So that's something that I'm personally building

as a slight project.

I mean, it's been really, really hard to replicate taste

if I'm honest.

Like, you know, I spent maybe like two weeks now,

every day I've been trying to replicate it for like,

the good four hours and it's just been really hard.

So I can see where these people are coming from.

I don't think it's impossible,

but let's see, yeah.

Yeah, that's, that's actually a good thing to close on.

Like, I would love to see if you only share

some of your skill files that you use for platform

or like, are you part of setup?

Yes, right?

Do you have, are they, are they a bit of a designer

you counsel or something, skill?

Yeah, I don't have that right now,

but I'm happy to sort of like show a little bit

of the workflow actually of how to build that, yeah.

So maybe let's just cancel this one first.

So I think that's one of the things that you talk about

which is about the design review panel, right, skill.

So, so what I'll do is that usually what I do is that

I, I, there's a multiple workflow,

but I'm going to keep it simple.

I'm going to say create a slot skill for a UX reviewer.

And, and one of the things that everyone wants to kind of

take note is that a design review panel

is made up of multiple sort of reviewer.

So you have your UX researcher, your UI designer,

your visual publisher, and much more.

So usually what you want to do is that you want to have

all of them review something either simultaneously

or or taking turns, right.

So what I'm doing here is that I'm actually just creating

one of it first, just to show you an example

of how it works.

So I'm going to say review screenshots and mockups.

Yeah, keep it flexible.

So it's asking me, you know what,

for example, I want to use flexible audits

would be for designers, maybe mixed teams, right.

And then some of it.

And the reason why I'm taking this workflow

and before this, I used to write all my skills, by the way.

But what I've realized in the, in the past month alone

is that, is that this, this cloud has been so good

at writing these things that it would be unwise

not to tell it to do it for you, right.

So I think that's that's one of the things, right.

It's like, you could do it, but then of course,

you could either maybe go and check out some open source

stuff on GitHub that might have better skills as well

to put in, yeah, call card and, okay, maybe just a structure.

Yes, using my MCP.

This is pretty great.

Okay, some answers.

And if you want to make a council of advisors,

you just ask it to make a skill for a council of the vice.

Yeah, exactly.

Yeah, so, so you could always say like,

I want to add a UI visual publisher

into this particular skill as well.

Yeah.

You have to add an anti-AI slot advisor.

Yeah, exactly.

Yeah, you can, you can add the anti-AI slot.

But I don't think it understands what's anti-AI slot,

because I mean, it just treats everything

as high quality in this sense, which I think makes it even harder.

Yeah.

Because it's very hard to quantify what is slot

these days from, it's very hard to quantify

to designers to the AI itself.

But from a human perspective, you just know it's slot.

Well, it's getting harder.

It used to be, it used to be like on a slab,

but it's like purple, purple brilliant and stuff, right.

And now, the latest model is actually getting better.

I don't do that stuff.

Exactly.

It's getting harder.

It's getting a lot better.

And so it's getting harder, especially

when it comes to writing, right.

Like we talk about this, but when it comes to writing

and coding, it's becoming very hard to distinguish

between what is slot and not slot, right.

I think a bulk of that text problem, it's already soft.

I mean, that's really what LOMs are for, right.

It's text-based.

But when it comes to visual, I think it has some way to go,

of course, like, what this guy Darro just posted here,

we all see this, right.

We just know this is from AI, right.

So there is still arguably some room for improvement

from a visual perspective, yeah.

Okay, so it's, so just to kind of work through everyone,

like it is creating the skill.md right now, right.

It is creating the UX reviewer skill.md.

It's beautiful.

I just love like seeing it run, yeah.

And just to like for people who are not coming here,

the skill is there, it's just like a text box, right.

Text all bunch of instructions.

Oh, we should mention it here.

Exactly.

Yeah, skew is really just a set of instructions.

So if you just read these green color lines, right.

Like it is really just, hey, overview, conduct UX review

of UI designs, to do your workflow.

So this is really just what are called skew is,

which is just a set of instructions

for you to perform a task, right.

A specific set of instructions.

So you could, you could write it in your own language

to customize it, how you want it,

or how you feel like your workflow should be.

So in this case, you know, it's done.

It's packaged to UX skew.reviewer.

So maybe what I would do is to show everyone

what that skew looked like.

You know what's there?

I'm on the couch on the slot.

You should go up your website again.

You review landing cages and just screenshot that

and ask the same.

You should ask the skew if it's about the design or not.

Oh, like I should ask the slot code

about my own landing pitch.

Is that what you're saying?

Yeah, like the one that you made for review, land,

okay.

Oh, this one?

Yeah.

Okay, let me just take a screenshot of it.

We're gonna put it in there.

It's a very good idea, right.

So we're connecting the dots all together.

I'm gonna say a review this Figma design

using the UX reviewer skew.

Now, I just wanna share why I prompted it this way,

even though we just say something like review this Figma design.

And the reason why I say this is because

now I'm gonna end it this first.

Review this screenshot, sorry.

Okay, so the reason why I prompted it this way

is because there will be instances

where it doesn't use the skew,

even when you're clear about reviewing something

like UX, right?

So it will just automatically give you feedback

on whatever without using the skew.

So what I usually advise is like specify

that you want it to be used to skew in this case.

So let's just...

Yeah, it's not very good.

Recognizing that he's stuck.

See what's it?

Now, one of us is on a narrow treacher.

Yeah, I'm glad I'm not the only one Peter

because whenever I go online and everyone is like,

oh, skew is so great and everything.

But, you know, I had some troubles getting it to use skew

and I have to always manually prompt like,

hey, you skew, you skew, you skew.

Yeah, that's always a big one.

Now, maybe while it's loading,

I would like share a little bit of a behind the scenes as well

of like what I use a skew for.

And also like just like some of the things

that I've viewed using skew.

So maybe let me just go to my client first.

Okay, so there's the settings here.

Keep it busy, sorry.

So actually, I have what I call the UX

Viral X Ritals skew sets, right?

Like, I was like, hey, like, you know,

Nikita Beer has like some principles

about writing good stuff on X.

So I usually, you know, I give it some of the references,

like I have example MacGal files and everything.

So I give it real examples from like Nikita Beer's advice

that he posted and everything else

and it just comes out with this

and including my own voice, right?

So direct no bullshit, you know, ADP list, AI for school,

so and so forth.

So a lot of my tweets, I wouldn't say 100% AI

because I adjusted a lot, right?

So this skew is really not perfect.

But what I like about it is that it gives you a starting point

to begin somewhere with the Cloud skew, right?

So this is a little bit outside of design,

but just to show everyone that you can use it

to write your PRDs, your anything that you want.

Basically, yeah.

Okay.

Yeah, something pretty center.

So yeah.

All right, so now is done.

So it actually used a skew.

So as you can see, it's like a fully loaded skew.

If it used a skew, actually,

you would see this green dot and the skew here.

So it's pretty clear.

And now it gives you a high-level structural issues,

critical that the fixed does your fix and whatnot.

So this is just basically how skew works, right?

Which is specific set of instructions

that you wanted to perform a task for you

and the set of output as well.

Yeah.

Awesome.

Yeah, this is great.

Okay.

Well, I think it's all part of the substitution there now.

But we got one last thing, Peter.

We got one last thing.

Wishy's.

We want to show that thing.

Okay, that's sure.

Yeah.

Wishy's Figma's latest function of converting Cloud Code

to Figma design.

I think that's the one way we want to do also demo, right?

Yeah.

So let's try that.

So I got this one.

So let's see.

Okay.

So let me just reset this a little bit first.

Now previously, we did talk about one of the websites

that I built, which is the growth analyzer, right?

So it is here.

That's the last one.

Just gonna go where is it?

Tell me now.

Okay.

Brand this on local host.

All right.

So this is the final demo for at least for different workflows

using Figma MCP and just use cases for designers.

This one is what Figma announced two days ago,

which is getting from Cloud Code back to Canvas.

I think it's pretty controversial, by the way,

because a lot of people that I know do not understand

why Figma is doing that.

Like, why do you want to put code back to Canvas?

I myself, of course, have some hypothesis about it,

but I don't think it's like, you know,

people are completely get it.

So that's one thing, right?

So, okay.

So now we run this on local host.

This is not the actual website.

This is just local host.

I want to say export this to a Figma file.

This is a Figma MCP.

I think they go this because, like I said,

it's actually easy to just go from zero to one with hope.

At that, hopefully, it won't take a month

to like retreats, as there's that, you know?

Yeah.

And, but I think, like,

but I think the irony is like,

you still got to somehow bring it back to Cloud Code.

I think that's really kind of where people think like,

hey, it's a little ironic, right?

You got to design it and you got to bring it back

to Cloud Code somehow.

So you might as well just, you know,

design it on the Cloud Code or something.

Yeah.

I mean, what I think what people really want is like,

you know, you make a feedback and then,

and then the MCP actually makes a full stack app.

Like, it makes the database impact.

Oh, yes.

That's what people want.

Exactly.

Yeah, exactly.

I've been seeing it in my comments, like, people are like,

I'm convinced about the use case,

but what I really want is just getting it into,

like, a proper code from my design.

Okay.

So as you can see, it, yeah, it just sent to Figma.

So maybe let's just open the file for now

for the Figma one and we would be able to see it.

Okay, so it has created a new Figma file for me

and it's called Growth Analyzer.

As you can see, I got everything.

Wow, look at that.

You see this, right?

That's great.

Yeah.

So let me, let me show you something

a little bit more interesting.

Okay, so let's say I want to capture specific elements

like the button here, this button.

I want to capture, it can do a lot more things, right?

But for the interest of time,

I'm just going to show some simple stuff, right?

So I said this, great.

And then I can select element, like,

I want this whole, this part here.

Okay, and let's go back to Figma.

Now you can see everything is just neatly tied up here.

Oh, that's amazing.

Yeah.

The icon as well.

Look at that.

Yeah, they should make like a Chrome extension

so I can just scale stuff up.

Look at that.

Yeah, it's literally like a Chrome extension, right?

Like, but it is of course native to Figma.

And I think what is amazing is that all of these are like,

you know, like vectors, right?

So it's like SVGs, you can edit the colors as well.

It's not just, it's not just a screenshot, right?

It really becomes a component instead of Figma.

And I think that's what designers are looking for.

But of course, all of this at the end of the day,

you know, you want it to go back to production,

the irony is that it has to go back to Cloud Code for, you know,

again, so that's that, that's that, yeah.

And that's all, this is the new function, yeah.

I'm actually really impressed by the coupon.

Yeah, but more importantly, I can see being very weak.

Yeah, yeah.

I think what I wish that it can do is that

it can name these layers, right?

Otherwise, it's all a little bit like icons

and there's a lot of stuff here.

But, you know, it's good for first version, I would say.

All right, Phil, let me ask you one more question, man.

So like, you know, we just went from Figma to Code to Figma.

And you also feel a bunch of stuff

without going to Figma at all.

So what do you think, like, do you think designers

that you, like, if I was a designer,

I'll be like, fit out by all of the stuff.

Right, like, like, uh, what should I do?

Why should I do this?

Because all I know is how to make Figma's, like,

well, I should, so they're like, not a code or?

Well, you know, I would, I would,

I would have a really honest view on this is that

a lot of designers, first of all,

are not freaked out enough, right?

Like, they are not freaked out enough

because they are really actually not on

Code or cursor today, a lot of them.

Like, majority of them are still on Figma.

The workflow for them has not drastically changed.

And they're not learning Code outside of work.

I mean, you know, to give you sort of a little bit

of a, a data point, right?

Like at 80 pillars, I mean, we have mentorship sessions.

We have more than 55,000 bookings every month today.

And I would say that the conversations

from designers regarding code code has maybe only,

like, like, code code or cursor, like, deeper AI tools,

has only increased maybe for, like, 10, 20 percent

over the past six months.

It hasn't really dramatically seen the rise of that.

But I think what we do see the rise on is FigmaMick, right?

And of course, we know that FigmaMick is not really

Code code because it doesn't have all these deep skills

and everything of sorts.

So, my guess is that designers are over-reliant on Figma

as a company, as a tool, and that's one, right?

A second thing is just that Code code or cursor

just looks really daunting, right?

I mean, you think about it as a designer.

You don't want to see terminals.

You don't want to see the IDE of cursor.

So that is a high barrier of entry for all designers.

So, I mean, they're not freaked out enough,

but if they see this exact podcast,

they see what it can be capable of.

I think, hopefully, they're few excited, yeah.

Yeah, I also think this is just like a far-crested

piece of the science, don't get offended.

But I feel like some of these Figma files

that open have so many explorations

that is way more confusing than just using a terminal trick.

Terminal, I just type in the same thing and it does something.

But some of these Figma files have 20 different aspirations.

I don't even know where to look.

Yeah.

And also, another thing I'll say is I feel like design

has got the point where it's so standardized.

Like, yeah, if you just design since then,

you'll use all the layout.

I feel like the creative part of the design

is almost gone, man.

I don't know, I'm gonna be around with like,

but we had a wing app and some of these more

like out there designs.

And now I feel like everything's like very standardized.

Like, he's kind of like working

with all these constraints, you know?

Yeah.

And like, I feel like designers should be free.

It should be free from all of this.

I just like, you were afraid of what?

Well, there is always a real challenge, right?

With when we talk about quality and cross-manships,

I mean, it takes a lot of patience

and a lot of intention, right?

Like, I mean, when I first started design,

I mean, I did not start with software design.

I started with industrial design.

And if you were to look at the best designers

that Silicon Valley look up to,

I mean, particularly Jody Eiff,

I mean, these are really good industrial designers.

I mean, the fact that he designed a Ferrari

and it got sort of the whole tech tweeter talking about it.

I mean, first of all, you could be a really good software designer,

but you would never design for Ferrari

because designing hardware and designing for industrial stuff

is entirely different ball game.

You know, I have a really, really good friend

who works as a industrial designer in a firm in Copenhagen.

And you just look at the details

and the patience and the intention behind the design

are everything from the click of a sound of the pen, right?

Like, is it supposed to feel luxurious, right?

It's a sound supposed to feel luxurious, like all of these things

and even the manufacturing cost,

like even the tools used to manufacture.

And all of these things, the industrial designer has to care for

and the reason for that is because you can't really

un-manufacture something, right?

So it's really like a one-shot thing,

whereas for software designers,

I mean, you could always go back to Figma,

you could change the colors and everything that you want.

It's pretty straightforward.

So when you work with industrial designers or X industrial designers,

it just brings a fresh level of intentionally

that you don't really find in a lot of software today.

Interesting.

OK.

Yeah, because maybe the industrial designers

will be disrupted by AI lacks.

Yeah, I mean, I mean, I don't know if that is, yeah.

Cool.

All right, well, 50 years, where can people find you online

and also, you know, I guess, it'll suck up, right?

Yeah, 80Please.com.org or just find me on X.

I'll always be there, yeah.

Well, thanks so much, man, for being all these demos

and showing us all over the box.

Of course, thank you so much for having me, Peter.

This was exciting.