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

0:00A 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

1:02and 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?

2:03So 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.

3:05I 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

4:09of 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

5:10that 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,

6:11I 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

7:12where 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.

8:13So 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

9:14than 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.

10:15So 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

11:16you 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.

12:17It'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.

13:18Can 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

14:20for 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.

15:24So 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?

16:25And 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

17:26I'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.

18:27But 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.

19:30Oh, 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.

20:32Do 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.

21:33Yeah, 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.

22:35But 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?

23:37So 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.

24:37And 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

25:39and 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.

26:43So 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.

27:44That'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,

28:45hundred 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

29:47the 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?

30:49It'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

31:50of 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.

32:50So 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.

33:51Yes, 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.

34:51It'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.

35:52Oh, 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

36:55about 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.

37:57So 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.

38:59So 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.

40:02So 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.

41:05All 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,

42:05it'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.

43:06So 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.

44:07And 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

45:07that 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,

46:10has 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

47:10piece 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,

48:11I 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,

49:11like 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.

50:13Of course, thank you so much for having me, Peter. This was exciting.