How to Design and Code with Claude Code and Figma MCP in 50 Min | Felix Lee

A lot of designers first of all are not freaked out enough. They are really actually not on clot code or cursor today. Majority of them are still on Figma. Code produces a significantly higher quality output than compared to other coding agents that I've tried from a haste perspective. Cod 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 component inside of Figma. — Oh, that's amazing. — It just made a globe 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 feel excited. Hey, welcome everyone. My guest today is Felix. Uh Felix is CEO of ADP list and he's also taught thousand of designers and how you use C code gigab to design amazing interfaces and apps. So really excited you could finish to show us exactly how to go from design to product and vice versa. Welcome FedEx. — Hi Peter. I'm very excited to be on your show today. I've been a big fan. So thanks for having me. — Yeah. Um so why don't we get right into it. N do you think you can share a few products that you designed using carbo? — Yeah, for sure. So let me just uh 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 uh perspective I have uh been vibe coding as a designer for about maybe close to three and a half months today. So I started at the uh during the holidays uh of 2025 and kind of rode into uh you know 2026 this year. So the first website that I've uh really kind of built was my own personal website. And this is where I uh highly recommend a lot of people to start because of course you know it's all about yourself and and it you know there's no it's not for any clients or anything. So it's you could just be experimental with it, right? So uh this is my personal website felix. dev. Um you know there's dark mode, light mode. So you know it just go auto goes to dark mode as well if it's at night. Um and I also built an AI chat for myself. Um so for example I could say uh why did you start uh ADP list? So uh for this I use sort of uh superbase uh and built a rack database um you know with it with all the information about myself ADP list and everything right uh and as you can see it populates the answer and it given gives you uh the sources that it plucks from right so this is all built uh by myself there's no sort of third party plugins or anything uh done directly on cloud code — is this using um like open AI or something or keep generating answers. — Yeah. So, so the the the API for sort of the chat is uh using uh uh the CL clot AI. Yeah. Entropics uh API. Yeah. — I love how when you get dark mode and light mode, the background changes too. — Yeah. How do you get that to work? I'm just very — Yeah. So, — is it two different images or Yeah, — it's actually two uh different images that I uploaded. But, you know, it's pretty interesting because I did not upload uh the dark mode for cloud code. So, what I tell cloud code is convert this image uh the original image, which is this uh into a dark mode version. So, you know, it's so great. I mean, it's uh back then it was Opus 4. 5 and it was able to just convert it in into dark mode. I didn't have to do much. — Understood. I — Yeah. And then there's some Easter egg as well. Yeah. So, so you could have that as well. It's uh pretty simple. Uh but it was really where I got started. Uh my next website was for ADP list, right? So, this is my uh during the holidays as well. And I've unccoded this platform where we actually connected uh real live data of our 2025 uh bookings on ADP list on onto what we call the ADP list rep globe right it's a little bit uh it's inspired by Shopify globe where Shopify has like you know shoppers and everything uh in this case we have people uh calling one another across the globe uh this is this lines represents uh the bookings uh that you know global bookings and if you Just click into the yellow dots though. Uh if you dots, it shows you the meetups that are organized by our community around the world. Um you could just randomly click one. This is in Toronto. It's beautiful. Um just click here. This is in Singapore where I'm at right now. Um 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 uh with the names of the mentors uh who contributed in 2025. So uh that's a little touch here and of course these are sort of all the minutes sessions that are being done uh in 2025. So this is relatively simple but I decided uh that you know for my sort of second project in the sense uh it will be something that uh goes back to the company. So this is this is where uh I landed next — and dude can you share how you like at a high level how did you just like did you get that glow from somewhere and I just built your database? — Yeah for sure. So — yeah, — so what I did was that of course um I actually plugged uh so I actually exported the data of the names of the mentors uh you know where the calls are happening from a city to country perspective uh the minutes the sessions uh all this data from our AWS uh back end um I exported it as CSV and uh what I did uh co clocker to do is that hey look um you know uh read through all this data uh and can uh sort of design this globe, right? So, I actually had a screenshot of the Shopify globe and I tell that, you know, I kind of want this globe uh where uh the calls are sort of uh interlin through the lines and everything like Shopify globe. So, — I asked it to make for me a plan. Uh it had a great plan to begin with uh with all these data sets and then it just begin building from there. So, this project took me about I would say combined it's about 12 hours. So it's relatively straightforward in that sense. Yeah.

— Also, you did not use like a 3D globe asset. It actually just made a globe. — It just made a globe by itself. Yes. I did not use a 3D asset for that. — Wow. — Yeah. Okay. — Uh it is insane. Yes, it is insane. So I 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'll try this new. Okay. You do one more. — Yeah. I I do have uh one last one just to show everyone. This episode is brought to you by Replet. Replet's new agent 4 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 pan26 to get three months free. That's P Y26. Now, back to our episode. Uh, so this is why I call the growth analyzer app

right? So, this is something that I I put on X as well. Uh, people loved it, you know. Uh, basically, so you have credit system. So this is really a full-blown app here Peter because uh you got to sign in you can purchase credit if you want. So if you go here uh you can purchase credit. So this is linked to stripe uh you can log in with you know your Google account. 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 you know it will come back with something like this. Right? This is again a quick demo. So it will come back with something like this where it tells you hey you know your landing page is at about 72% uh some of the things where you can improve on uh like your copy you know and it tells you a little bit of like what kind of copy you should write next uh and what would be the expected uh you know outcome of 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 uh you know like direct to your value uh prop rather than just saying get started. So I I designed this and wow this really took me a long time. I mean uh it took me maybe about a combined of maybe more than like 48 hours I think. uh you know across a yeah across a span of like a good three weeks. Uh of course I was iterating on that. Yeah. — So that's this one is just like uh like you have to take a screenshot of the website I'm guessing and private window AI with a prompt and then gives advice. Is that how it's like — exactly? Yeah. 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 toughest part about business for second? — So yeah, — the tough part about this honestly I think one and I've been getting DMs about it uh is that is to get the hotspots right. So you see this hotspots. So uh these hotspots if you were to use uh clot code or Entropics uh Opus LM API u uh for some reason the visual recognition part isn't really the best. Um, so sometimes the hot spot just goes way off, right? For example, uh, 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, you know, models. Uh, and the best one for this would be the Gemini Pro uh, which has nano banana. Uh, I I think that that one was like really good to help uh, with it. So getting the hotspots right was one of the toughest one. Um and then second getting it to write uh really great feedback. Uh 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. — Yeah. This is amazing, dude. This is uh any kind of landing page optimization usually goes viral on X. So yeah. — Yeah. You're probably making money from site. — Yeah. Yeah. Like there's a lot of landing page optimization stuff. Yeah. So this is more of like uh sort of uh along the lines of like helping you with conversions and just like uh supporting you with like a second view of your landing page. Yeah. — Okay. Well, this is pretty incredible. So let me ask you about so when you make stuff like this I mean you're the designer by trade, right? So like do you actually start with the vaas or do you just go straight this coa? — Well, you know it's a great question, right? Um uh frankly I have not used uh I have I did not start from Figma for any of these projects that you just seen. Um uh unfortunately — crap. Okay. — So Figma is not a part of cones. You just kind of iterated and called rep. — It's not part of the process. You know we have got a lot of things to talk about that. Uh but yes it wasn't a part of the process when I designed all of these things. — Yeah. And it's like uh this stuff is so good already and like you know code is distributed free at this point and like it's almost like I'm not a designer by trade and I was trying to use all the layout. So like see it's almost easier to just like generate the code to like try to build some box around in Figma. — 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. — Okay. — Yeah. Oh damn. Yeah. Like no, I mean it's 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. Uh but you know after we raised our first round uh you know I hired a designer uh and she took uh pretty much the bulk of the workload in fact everything. So I didn't kind of uh do that like anymore. Yeah. But uh it was always hard to figure out all the auto layout stuff as well. — Okay. Well, I mean why don't we uh cube ourselves here? Let's actually try to use Figma a little bit more. Uh — like they have a MCT, right?

— Yes. — Can you show like this MCD kit beer? — Yeah, for sure. So, uh maybe just to kind of get everyone on speed, right? like Figma has uh Figma MCP has like sort of I would say many different functions but what we will be uh demoing here as we talk about Peter would be uh two things right uh one would really be uh using the Figma MCP to get a design to code and then uh next thing is uh like something more new which Figma uh released which is uh you know getting uh code into Figma right I think that's just launched a couple of days ago so we we'll kind of go through uh both now Let's do the first one maybe. Uh so I'm going to share my screen and open up something here. I think maybe what would be great is uh we do a simple landing page right from a uh by using CO code to kind of uh get that done uh and the fake my MCP. So I have a readym made uh let me just bring that here. So, I have a readym made sort of a um a landing page here for one of our ebook guides uh that ADP uh usually promotes, right? It's called a design mode short uh landing page. Um so to kind of give a little bit of a a sort of broader understanding of this landing page is that you know you could fill in your email address, full name, job title, company uh and then you you know you could just claim your stuff here. So to give everyone some perspective um is that you know usually a landing page like that if you were to you know uh learn web flow or framer it maybe 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 uh 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 uh it just kind of like lags behind uh it gets delayed by a lot. So uh this landing page would have taken me about would have took my team I think about at least a day or two right uh it isn't long but I think 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 FigmT can convert this into a working building prototype. Yeah. So let's get to it. So usually what I do is I use uh terminal. So I can use terminal for this. So then you can activate cloud code. But also what we can do is that we can go to cursor if anyone wants to see uh and usually I use an IDE for it because I can preview the code. So uh I can create a new directory. I can say landing page landing page right so can create it and what I'll do is that usually I'll use clock code within cursor just so that I can see uh the code and the files within uh cursor yeah so what you're seeing here is uh cursor right and I just activated clot 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. Uh so uh I prefer always using CO code as the primary coding agent. Uh but I use cursor just as a um you know just as an I uh sort of like a previewer. Yeah, in that sense. So let's get started. So first of all, I think for anyone wanting to see that uh MCP I think it's already installed here. So if I would to just show anyone uh Figma MCP is already connected. So uh 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 uh this design and I'm going to go to deaf mode. It's very simple and I'm going to copy example prompt here. Let's say implement this design from Figma. So it's very straightforward. Uh and it's going to start running. And uh while we're waiting like I also run Hakov cursor in sometimes later in trouble no more and uh you know I the cursor team insist right that's the best they want you to use their yeah it's just not bo — yeah usually that's the case but I've seen that like you know um the interesting thing about C code and I think a lot of people ask me this I mean while we're waiting for it is that you know C produces a significantly higher quality output than compared to other coding agents that I've tried. So I've tried like you know the one in Gemini AI studio uh you know even like Codex from cursor I I just think that from a taste perspective you know cloud code just just wins it all uh and of course it produces much higher quality uh outputs as well from everything from markdown file to codes right so so I continue using cloud code for that reason — yeah some people say that uh coded are better at solving policy stuff but I'm afraid with you know up till now. So, — oh yeah. Yeah, for sure. I mean I mean there's 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 uh cursor using Opus 4. 6 or you could have CL code using Opus 4. 6 and it is surprisingly you know very different in terms of it output uh with the exact same prompt. Uh I I'm not sure what's the size behind it. I'm not a AI researcher or a AI engineer but I'm quite sure that it is different to a certain extent. Yeah. — Okay. Um so what it's showing now is that you know quad code is actually taking Yeah. So this is this was just pulled up here and uh it is showing all these elements here right now. — Yeah. It is that oh look at this. This is interactive. This is incredible. So what I'll do next is that uh you know I'm going to say something right. okay I'm going to take this going to copy the link for it because this is the uh let me just copy the link here oops copy link okay so because this is the after state once I submit uh the form right so I'm going to go here and say as you can see it's just 10 minutes okay uh it's way faster than going to any developers so I'm going to say uh great now the after state once I submit the form should be his uh and the logo isn't showing on the preview preview. So, make that work. And finally, the book should be sticky at the side until as I scroll down. Okay. So, I just what I did was just like, you know, I I told it three things. Uh one is the after state. Uh second of course the logo isn't showing and then uh the book should be uh in a sticky format uh rather than just uh you know floating around. — Do you actually have the So the whole point of this land is to download the PDF, right? Like you actually have the PDF in this. — Yes, I do have the PDF. Yeah. So I'm actually going to get the PD like actually you pointed that uh perfectly well. So what I'm going to do is I'm going to go get the PDF while it's uh loading. Yeah. So it's going to make all the edits right now. — All right. Oh, so logo is a little weird. We we'll handle that later. Uh but what we really want to do is um 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 now it now works. So there is a download the report. Um so what we'll do is just to say uh for download report in after state it should Okay. — Okay. So you're going to take like a URL is a bit left to — Yeah. Exactly. Yeah. — Drive. — Yeah. — Okay. So now I think it should be working. Let's just refresh a little bit. Say Felix um baby puris. — Yeah. So it's it is working. — It's working. Yeah. — So if you can see I mean this whole workflow just took us less than uh 15 minutes. Of course there are some visual stuff that we got to you know uh uh briefly settle it but other than that you know it's really fast to just get this out of the way. So — I wonder like how much better this is than just like copying some screenshots over to clock. Yeah. 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. Uh, let me just show everyone. Um, it's right here. So, it's a lot better the last time before the new MCT was updated. I I'll be honest. — Um, yeah. Yeah. Like from an output perspective. Just Yeah. But I think it's still okay. I mean if you were to put screenshots I mean what it would requires from a screenshot perspective is that it will start asking you for all these assets right like the book uh 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 uh it actually automatically fills up all of these things. — Okay. That makes a square advantage right. — Yeah. Exactly. Yeah. So that's the advantage of just using MCP because it has all the assets. — Cool. This is awesome. Yep. Do you want to come on next?

— Okay. So the next one uh is something that I've done it before but uh I think we talk about it in the end as well which is uh going from Figma from Fig Jam and building a game using Fig Jam uh directly using clot code. So this is really super cool. It kind of blew my mind a little bit uh when I did it. So let's just clear this project first. Uh we don't need this anymore. Not for now. Just going to close this folder. So now I'm going to sort of do a purist puff, right? So I'm going to go f jam and I'm going to say like I'm going to like a flappy bird or something I guess, right? Flappy bird. Flappy bird game and I'm going to say draw a So this is Fig Jam's uh AI. So this is pretty good as well. Draw a flow chart of a simple Flappy Bird game app uh that doesn't uh require sign in. It should include a simple scoreboard uh with highest records and others. We'll keep airflow uh simple to simple for users. Okay. Now uh meanwhile we're going to open up terminal. So this is where gets interesting. Okay. So we got now we got two things, right? So we got our terminal here open and we got our flow chart. So it's a little bit messy. Uh I don't usually kind of go through all of this. Uh but what I'll do is that you know I will just imagine that you are a designer and your product manager just gave you a flowchart and be like do it like this and if you're lazy to read it you could just you know vibe code something and just use it or if you want to of course uh you can read through the flowchart uh and but what why this is really useful and why I like it Peter is because uh flowchart is a sort of bread and butter skill for a lot of designers. it's necessary in bigger organizations. Uh engineers require it and many people just want to see it um so that they understand how things work. Uh personally of course at ADP flowchart is not really a big thing. Uh and that's just because we keep things really simple. There's not really a lot of complications. Uh but we do have some flowcharts for more complicated stuff. Uh but with that said, you know, I'm going to copy this link to this selection and I'm going to say uh using uh look at this Figma flowchart and I want you to build the Zappy bird game reference using this flowchart. Okay. So what it's going to do is that it will go to Fig Jam and it will start reading the Figma board as you can see. So it's fetching the Figma board now and it has a get Figjam NCP. So it's pretty transparent. This is what I like. You know, it tells you exactly what it's doing. — This is still using the Figma MCP, right? — Yeah, it MCP. — Yeah. — So, there's no uh 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 in just wants to see uh while this is just building up, let me just go back to uh my VLE and I will show everyone what I did by uh building a game right on to where is that? Okay, I have a Tetris scheme here. Okay, so there's a scoreboard. Wow, there's a lot of people that just played the game. I did not know that. Uh but yeah so you can basically play a simple game of Tetris uh directly uh for free um on desk desktop. Uh I just built this using the same exact flow with fake jam. 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. Um hopefully it just it has a good output. — Yeah. Let me just — I mean that flowchart is pretty difficult for human me to view like a little overlapping ones. So hopefully Yeah. — Yeah. Look at this. There's a little bit of a Yeah. What? — Yeah. This flowchart is not that simple. Okay. So it's building the HTML file right now as you can see. Oh, look at that. Right. So — yeah, — let me see. Yeah. So it is done. Are you seeing it? — What's that? Okay. — Yeah. Look at that. this tubby bird. So you can play Oops. — Bucks. Oh, look. — Okay. So, it's a little bit too sensitive, right? So, I can adjust that a little bit later. — Um, you can view the scores settings as well. That's easy. Okay. So, maybe I just go to easy and you can try it. — Oh, — hey, I got a f. — Yeah, there. Yeah, there you go. Right. So it just took like uh like you know a few minutes to even just build a game like that uh with animations with clouds and everything else. So uh if I of course if I want to adjust it 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 uh to build something as simple as a game like Tetri or Flappy Bird or anything of sorts uh and just by using clot code. Yeah. And MCP think MCP. — Yeah. — I think this but I guess my question would be like how much does it actually use the fully char? But it just knows how to kill black people. May maybe build. Yeah. — Yeah. I I think that there is a good chance that he just knows how to build. I mean uh probably 100% chance that he knows how to build. Uh so, you know, as we kind of get through today's podcast and demos, I I think designers will start to realize that the use case of Figma really isn't what it's 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 a 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 would be uh would really be sort of like when it becomes like a collaborative tool uh between engineers or product managers where you could leave comments and and you could like uh you know collaborate on the finer elements of the case components and whatnot. Yeah. — Yeah. Then it is like the last 10% the last good. — Yeah. I mean my guess is that at some point the last mile would be gone, right? Because l would get hopefully good enough and uh and good enough to the point where you could just overlook the last mile or if not just get through uh if the AI is good enough. Yeah. — I also think like there's a use case to Figma for very closely matched design system. Right. Yes. Although I think LM are okay than LQ but like you want like exactly mass design system for everything maybe like going to Finma first. — Oh yeah 100%. Yeah. So like design systems I think is going to be big thing uh at least with uh sort of like um you know with everything with Figma into CL code or vice versa. uh which is something that I've been trying to solve like so you see this file called taste MCP here right yeah you could see that I screenshot a bunch of tweets like you know — uh everyone is saying like you know you cannot replicate taste right it'll be a long time until you can replicate taste and just a lot of tweets right like uh funny tweets and not uh 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 their work. Uh so that's something that I'm personally building as a side project. I mean it's been 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 a good four hours and it's just been really hard. So I can see where these people are coming from. Uh I don't think it's impossible but let's see. Yeah

— dude. that that's actually a good thing to close on. Like I would love to see if you share some of your skill files that you use for cloud bone or like how your part was set up. — Yes. Right. Do you have I think you had like a designer view console or something skill. — Yeah. Uh I don't have that right now. Uh but okay. But I'm happy to sort of like uh show a little bit of the workflow actually of how to build that. Yeah. So maybe let's just um cancel this one first. So I think that's one of the things that you talk about which is uh about the uh design review panel right skill. So what I'll do is that usually what I do is that I there's a multiple workflow but I'm going to keep it simple. I'm going to say uh create a clot skill uh for a UX uh reviewer. Uh and one of the things that everyone wants to kind of take note is that a design review panel is made up of uh multiple uh sort of reviewer. So you have your UX researcher, your UI designer, your visual polisher and much more. Uh 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? Uh so what I'm doing here is that I'm actually just creating one of it first just to show you uh an example of how it works. So I'm going to say uh review uh screenshots uh and mockups. Yep. Keep it flexible. So it's asking me, you know, what frameworks I want to use. Keep it flexible. All this will be for designers, maybe mix teams, right? And then submit it. Uh and the reason why I'm taking this workflow and before this I used to write all my skills uh by the way. But what I've realized in the in in the past month alone is that just Claude has been so good at writing these things uh that it would be unwise not to tell it to do it for you, right? Uh uh so I think that's one of the things, right? It's like you could do it. Uh 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 uh to put in yeah score card and uh okay maybe just a structured yes use MMCP this is pretty great. Okay. So answers — and if you want to make a council of uh advisors you just ask it to make a scale for council buy. — Yeah. — Exactly. Yeah. So you could always say like I want to add a UI visual polisher into this particular skew as well. Yeah. — You have to add anti- AAI slot other it. — Yeah. Exactly. Yeah. You can you can add the anti-AI slot. I don't think it understands what's anti-AII uh slop because I mean it just it just treats everything as high quality in this sense which I think makes it even harder. Yeah. — Uh because it's very hard to quantify what is lo these days from a uh it's very hard to quantify to designers to to the AI itself. But from a human perspective you just know it's lop. — Well it's getting harder. It used to be like on the slop was like purple — purple brillian right but now the latest models is actually getting better at not doing that so — exactly — it's getting harder and harder yeah — 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 slop and not slop right uh I think a bulk of that text problem it's already solved I mean that's really what LM are for, right? It's text based. Uh, but when it comes to visual, I think it has some way to go. Uh, you know, of course, like you know what this guy Daryl — just posted here, you know, we all see this, right? Like we just know this is from AI, right? So, so there is still arguably some room for improvement from a visual perspective. Yeah. Okay. So, it's so just to kind of walk through everyone like it is creating the slot uh the skew. md right now, right? Uh it is creating the UX review skill. md. It's beautiful. I just love like seeing it run. Yeah. — And and just to like for people who are not familiar, it's a skill is literally just like a text box, right? Text file a bunch of instructions. Oh, we should and should not do. — Exactly. Yeah. SK is really just a set of instructions. So if you just read this uh 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 a core skew is which is just a set of instructions for you to perform a task right a specific set of instructions. So you could write it in your own language to customize it uh 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 uxq. reer. So maybe what I'll do is to show everyone what that skew look like. — You know what you should do? I'm I'm going to put you on the slot. You should go up your web website again to review landing pages and just screenshot that and and ask the same you should ask the skill if it's about the design or not. — Oh, like I should ask uh the the clot code about my own landing page. Is that what you're saying? Yeah, the Yeah, like the one that you made for review land. — Oh, this one. Yeah. Okay, let me just take a screenshot of it. We're going to put it in there. It's a very good idea. Right. So, we're connecting the dots all together. We're going to say review this Figma design using the UX reviewer skill. Now, I just want to share why I prompted it this way. Um, even though it just says something like review this Figma design. And the reason why I I say this is because now I'm going to edit this first. Uh, 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 a skill even when you're clear about, you know, reviewing something like UX, right? So, it will just automatically give you feedback and whatever without using the skill. So what I usually advise is like specify that you want it to use the skill in this case. So let's just — Yeah. It's not very good recognizing tender. — Yeah. I'm glad I'm not the only one Peter because like you know when whenever I go online and everyone is like oh skew is so great and everything. Uh but you know I had some troubles getting it to use skill. Uh and I have to always manually prompt like hey use skill use skill. Yeah that's always a big one. Now maybe while it's loading I would I would like share a little bit of a behind the scenes as well of like what I use a skill for and also like uh just like some of the things that I' I've built using skill. So maybe let me just uh go to my clot first. Okay. So there's the settings here capabilities. Sorry. So actually I have what I call the UX uh viral xrital skill sets, right? like I was like hey uh 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 markdown files and everything. So I give it real examples from like Nikita's like advice that he posted um and everything else and it just comes out with this and including my own voice right so direct no you know ADP list AI first school so and so forth. So, so a lot of my tweets, I wouldn't say 100% AI because I adjust it a lot, right? So, this skill is really not perfect, but what I like about it is that it gives you a starting point to begin somewhere uh with the with the uh cloud skill, right? So, this is uh a little bit outside of design, but just to show everyone that you can use it to write your PRDS, your your anything uh that you want basically. Yeah. Okay. — Yeah, I have something pretty simple. So yeah. — All right. So now it's done. Uh so it actually used a skill. So as you can see it successfully loaded the skill. If it used the skew actually you would see this uh green dot and the skill here. So it's pretty clear and now it gives you a high level structural uh issues critical that to fixed uh tells you fix and whatnot. So this is just basically how skill works, right? Uh which is specific set of instructions that you want it to perform a task for you uh and a certain output as well. Yeah. — Awesome. Yeah, this is great. — Um — Okay. — Well, I think I'll put this up now.

Yeah. — Uh but we got one last thing, Peter. thing which is — Oh, you want to show that thing? Okay. Sure. Yeah. which is uh Figma's latest function of uh of converting cloud code to uh Figma design. I think that's the one we wanted to to also demo, right? Yeah. So let's 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 going to Oh, where is it? Terminal. Okay. Run this on local host. All right. So this is the final demo for at least for different workflows using Figma MCP and just uh use cases for designers. Uh this one is what Figma announced two days ago uh which is um uh getting from cloud code back to canvas. I think it's pretty controversial by the way uh because a lot of people that I know do not understand uh why uh Figma is doing that like why do you want to put code back to canvas? uh I myself of course have some hypothesis about it um but I don't think it's like you know people uh completely get it um so that's one way right so okay so now we run ran this on local host uh this is not the actual website this is localhost uh I want to say export this to a Figma file using Figma FCP — I need to go this because like I said it's actually easy to just go from zero to one with hole And then you can hopefully don't want to pigma to like retrace after that. — 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 you know I think that's really kind of where people think like — hey it's a little bit ironic, right? You got to design it and you got to bring it back to cloud code somehow. Um so you might as well just you know design it on on cloud uh cloud code or something. Yeah, — I mean what I think what people really want is like you know you make a fitbot and then the MCP actually makes a full stack app like it makes a database and back — that's what people want. — Exactly. I 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 uh getting it into like a proper code uh for my design. Okay. — So as you can see it yeah it just sent to Figma. Um, 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? — So 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 uh some simple stuff, right? So send 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, dude. They should there should be like a Chrome extension so I can just say skill stop. Yeah, it's it's literally like a Chromeback session, right? Like uh but it is of course native to 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. — Uh it's not just — it's not just a screenshot, right? It really becomes a component inside of Figma. And I think that's what designers are looking for. Um, 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. Yeah. And that's all that's this is the new function. Yeah. — I'm actually really impressed by the coupon. Yeah. More part I can see being very 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 just a lot of stuff here. But, you know, it's good for first version, I would say. — All right. Well, let me ask you one more question, man. So, like uh you know, we just went from Figma to con code to Figma and you also filled a bunch of stuff without going to Figma at all. So, what do you think like do you think designers to like if I was

designer, I'll be like freaked out by all the stuff, right? Like uh what should I do? Why who should I do? cuz all I know is how do you make hmas like what I should I like know the code or — well I you know I 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're because they are really actually not on clot code or cursor today um a lot of them like majority of them are still on Figma the workflow for them has not drastically changed um and they're not learning cloud code outside of work. I mean, you know, to give you sort of a little bit of a data point, right? Like at ADP list, 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 cloud code has maybe only like uh like cloud code or cursor like deeper AI tools uh has only increased maybe for uh like 10 20% uh over the past uh 6 months right it hasn't really dramatically uh seen the rise uh of that but I think what we do see the rise on is Figma make right uh and of course we know that Figma make is not really CO because it doesn't have all his uh deep skills and everything of sorts. So my guess is that designers are over reliant on Figma as a company as a and as a tool. Uh and that's one right a second thing is just that CL code or cursor uh just looks really daunting right I mean you think about it as a designer you don't want to see terminals uh you know the IDE of cursor so uh that is a high barrier of entry for a lot of designers so uh I mean they're not freaked out enough uh but if they see this exact podcast they see what it can be capable of I think uh hopefully they feel excited yeah — yeah I also think Uh this is just like a trial court thing so the designers don't get offended but I feel like uh some of these spikma files that I open have like so many explorations that it's like way more confusing than just like using the terminal tree like terminal I just type in the same thing and it does right but some of these spikma files has like 20 different expirations I don't even know where to look. — Yeah. — And also another thing I'll say is like I feel like design has got to a point where it's like so standardized like you have to use design since them got use all layout. I I feel like the creative part of design is almost like gone, man. Like I don't know I'm a viewer around but like but we had like wake uh we had a wing app and some of these more like out there designs and now I feel like everything is like very standardized and like you kind of like working with all these constraints. — Yeah. — And like I I feel like designers should be free from object whoever they want. — Well there is always a real challenge right with when we talk about quality and craftsmanships. 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. Um and and if you were to look at the best designers that uh that Silicon Valley look up to. I mean particularly I mean these are really good industrial designers. I mean the fact that he designed the Ferrari uh and it got sort of the whole tech Twitter talking about it. I I I mean first of all you could be a really good software designer but you would never design for Ferrari. Uh because designing hardware and designing for industrial stuff uh is entirely different ball game. You know I have a really good friend who works as a industrial designer in a uh 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? Is the sound supposed to feel luxurious? Like all of these things and even the manufacturing cost uh like even the tools used to manufacture um and all of these things the industrial designer has to care for. And the reason for that is because you can't really unmanufacture something, right? So it's really like a one shot oneshot thing. Uh whereas for software designers, I mean you could always go back to Figma, you could change the colors and everything that you want. uh it's pretty straightforward. So, so when you work with industrial designers or ex-industrial designers uh it just brings a fresh level of intentionality uh that you don't really find in a lot of softwares today. — Interesting. Okay. Yeah. Okay. Maybe uh the digital designers will be disrupted by AI lacks. — Yeah. I mean uh I don't know if that that is Yeah. — Cool. All right. curious where can people find you online and also you know I guess where Ed right — yeah uh eddy please uh. com or just find me on x uh I I'll always be there yeah — well thanks so much man for all these demos and showing us how everything works — of course thank you so much for having me Peter this is exciting