obsidian/raw/_processed/How to Design and Code with Claude Code and Figma MCP in 50 Min Felix Lee.md at main

Vadym/obsidian

Fork 0

Vadym Samoilenko 49525fc6c8 vault backup: 2026-05-15 10:29:55

2026-05-15 10:29:55 +01:00

52 KiB

Raw Permalink Blame History

title

source

author

published

created

description

Transcript

3 products Felix designed and built in Claude Code

0:00 · A lot of designers, first of all, are not freaked out enough. [music] They are really actually not on our cursor today. Majority of them are still on Figma. Cloud code produces a significantly higher quality output than compared to other coding agents they have tried. From a haste perspective, cloud code just wins it all. If you you do use [music] 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.

0:28 · It really becomes converted inside of Figma. 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.

0:45 · Hey, welcome everyone. My guest today is Felix.

0:48 · Felix is the CEO of ADPList, and he's also thousands of designers who have used cloud code given MCP to design amazing interfaces and apps. So, really excited to get Felix to show us exactly how to go from design to product and vice versa. Welcome, Felix. Hi, Peter. I'm very excited to be on your show today.

1:07 · Been a big fan, so thanks for having me.

1:09 · Yeah. So, why don't we get right into it, man? Do you think you can share a few products that you designed using cloud code, what's up? Yeah, for sure.

1:18 · So, let me just share my screen. I think it's a best use case for that. So, I have designed a couple of products and and just for my background information perspective, I have like been cloud coding as a designer for about maybe close to three and a half months today. So, I started at the during the holidays of of 2025 and kind of wrote into you know, 2026 this year.

1:43 · 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, you know, it's it's all about yourself and and and and and and 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, this is my personal website, felixlee.dev.

2:07 · You know, there's dark mode, light mode.

2:09 · So, you know, it it just go auto 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 ADPList?" So, for this, I use sort of super base and built a rag database.

2:29 · You know, with with all the information about myself, ADPList, and everything, right? And as you can see, it populates answer, and it even gives you the sources that it plugs from. Right?

2:42 · 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 um like OpenAI or something or to generate answers?

2:54 · So, so the the the the the API for sort of the the chat is using the cloud cloud AI. Yeah. Anthropic's API. Yeah. I love how we able to get dark mode and light mode. The background changes, too.

3:10 · Yeah. How how do you get that to work?

3:11 · I'm just curious.

3:13 · Yeah. So, um it two different images or yeah?

3:16 · It's actually two different images that I uploaded, but you know, it's it's really interesting because I did not upload the 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 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 in into dark mode. I didn't have to do much. Oh, I got it. I understood. I That's good.

3:48 · Yeah. And then there's some Easter egg as well. Yeah. So, so you could have that as well. It's pretty simple, but it was it was really where I got started.

3:57 · My next website was for was for ADPList, right? So, this is my during the holidays as well, and I cloud coded this platform where we actually connected real life data of our 2025 bookings on ADPList on onto what we call the ADPList rep 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.

4:26 · This is this lines represents the bookings. Like that 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. Um You could just randomly click one. This is in Toronto.

4:47 · It's beautiful.

4:49 · Just click here. This is in Singapore, where I'm at right now. So, and then of course, at at the bottom, you know, we wanted to design something like a live ticker, almost like a stock market, but with the names of the mentors who contributed in 2025. So, that's a little touch here. And of course, these are sort of all the minutes sessions that that are being done in 2025. So, this is relatively simple, but I decided that, you know, for my sort of second project in the sense, it would be something that goes back to the company.

5:21 · So, this this is this is where I landed mix. And and did Can Can you Can you share how you like on a high level how you did this? Like Did you get that globe from somewhere and then just upload your database or Yeah, for sure. So, Yeah. So, what I did was that of course, um I actually plugged So, I actually exported the data of the names of the mentors, you know, when a call is happening from a from a city to country perspective, the minutes, the sessions. All these data from our AWS backend.

5:56 · I exported it as a CSV, and what I what I did cloud cloud code to do is that, "Hey, look, you know, read through all these data and sort of design this globe." Right? So, I actually had a screenshot of the Shopify globe, and I tell that, "You know, I I kind of want this globe where the calls are sort of interlinked through the lines and everything like like Shopify globe." So, I asked it to make make for me a plan.

6:23 · It had it had a great plan to to begin with 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. Oh, so you did not use like a 3D globe asset. It actually just made the globe. It just made a globe by itself. Yes, I did not use a 3D asset for that. Wow.

Building an animated world map from a single screenshot

6:44 · Yeah.

6:44 · Okay. It is insane. Yes, it is insane. So, I I 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'm going to try this thing. Okay. You did one more or Yeah. I I I do have one one last one just to show everyone.

7:03 · This episode is brought to you by Replit. Replit'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. [music] And once your app is built, the agent can generate slide decks, animations, and more from the same project because slides, animations,

7:33 · and documents are all just code under the hood. Check out Replit via the link in the video description and use my code pyang26 to get 3 months free. That's p y a n g 26. Now, back to our episode. So, this is what I call the growth analyzer app, right? So, this is this is something that I I I put on put on X as well. People loved it, you know. Basically, so you have credit system.

Felix's app that analyzes how good your landing page is

7:57 · So, this is really a full-blown app here, Peter, because you got to sign in. You 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, 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 like a quick demo.

8:25 · So, it will come back with something like this where it tells you, "Hey, you know, your your landing page is at about 72%. Some of the things where you can improve on like your copy, you know." And it tells you a little bit of like what kind of copy you should write next, and what would be the expected you know, outcome of of of that new sort of a UX change, right? So, even like the CTA.

8:52 · Yeah. So, instead of saying, "Get started," you could be like, "Start recording free." Right? So, more actionable, you know, like direct to to your value prop rather than just saying, "Get started." So, so I I I designed this, and wow, this this really took me a long time. I mean, it took me maybe about a combined of maybe more than like 48 hours, I think.

9:18 · You know, across yeah, across a span of like across a span of a a good 3 weeks. Of course, I was iterating on that. Yeah. So, that's this one is just like like you have to get a screenshot of the website, I'm guessing. Probably put it into AI with a prompt, and then gives advice.

9:35 · Is that Is that how it's like?

9:36 · Exactly. Yeah.

9:37 · Yeah.

9:37 · Yeah. So, you can upload your screenshot or or you can tell it to capture a screenshot of a website. And then it comes up with all this. Yeah.

9:45 · What's the toughest part about this?

9:47 · Like what aspect for your audience?

9:49 · Yeah.

9:49 · getting the So, Yeah. the toughest part about this, honestly, I think one, and I've been getting DMs about it, uh is that is to get the hot spots right, right? So you see these hot spots. So these hot spots, if you were to use Claude code or you were to use Anthropic's Opus LLM API, for some reason the visual recognition part isn't really the best.

10:15 · So sometimes the hot spot 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, you know, models and the best one for this would be the Gemini Pro, which has Nano Banana.

10:37 · I I I think that that that one was like really good to help with it. So getting the hot spots right was one of the toughest one.

10:45 · And then second, getting it to write really great feedback that makes sense, right? I 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 any any kind of landing page optimization if it was viral on X, okay. Yeah. You can make it viral from site.

11:07 · Yeah. Yeah. Yeah. Yeah. Like like there's a lot of landing page optimization stuff. Yeah. So this is more of like sort of along the lines of like helping you with you with conversions and and just like supporting you with 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 Figma cell or or do you just go straight to this code, so?

11:35 · Well, you know, it's a it's a great question, right? Um frankly frankly I I have not used I have I did not start from Figma for any of these projects that you just seen.

11:49 · Unfortunately, unfortunately.

11:51 · [laughter] Got it. Got it. So so thinking about the starter part of classes, you just kind of iterate it and code, right?

11:59 · It's not part of the process, you know, we have got a lot of things to talk about that.

12:03 · But yes, it 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 that's pretty free at this point. And and like it's almost like I'm not a designer by trade and I was trying to use auto layout. It's a in the ass. So like it's almost easier to just to just like generate a code with like trying to build some box around your 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 Okay.

12:33 · Oh, damn. Yeah, like no, I mean I mean it's it's same for me. Like 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.

12:49 · But you know, after we raised our first round, you know, I I hired a designer and she took a pretty much the bulk of the workload, in fact everything. So I I didn't kind of do that like anymore, yeah. But it was always hard to figure out all the auto layout stuff as well.

13:07 · Okay. Well, I mean, why why why why don't we keep ourselves here? Let's actually try to use Figma other than more. Uh Like you have a you have a MCD, right?

13:16 · Yes. Yes. Can you show like what is MCD cat beer? Yeah, for sure. So maybe just to kind of get get everyone on on speed, right? Like Figma has Figma MCD has like sort of I would say many many different functions, but what we'll be demoing here as we talk about Peter would be two things, right? One would really be using the Figma MCD to get a design to code.

Demo: Figma design to working website in 15 min

13:40 · 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 that's just launched a couple of days ago. So we'll kind of go through both. Now let's let's do the first one maybe. So I'm going to share my screen and and open up something here. I think maybe what would be great is we do a simple landing page, right? From by using Claude code to kind of get that done and and the Figma MCD.

14:08 · So I have a ready-made Let me just bring that here. So I have a ready-made sort of a landing page here for one of our ebook guides that ADPList uh usually promotes, right? It's called a design one-shot landing page.

14:28 · So to kind of give 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, and then you 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 Webflow or Framer, maybe take you like a few hours or you know, if you

14:58 · 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 just kind of like lags behind.

15:22 · gets delayed by a lot. So uh this landing page would have taken me about what it would have took took my team, I think about at least a day or two, right?

15:33 · It isn't long, but but I think it's it's pretty frustrating when you have to go back and forth with different stakeholders. I I think what would be great it would be to kind of show you how Figma MCD can convert this into a working building prototype. Yeah. So let's 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 activate Claude code, but also what we can do is that 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.

16:04 · I can say landing landing page.

16:09 · Landing page.

16:11 · All right. So can create it. What I'll do is that usually I use Claude code within cursor just so that I can see the code and the files within cursor. Yeah, so what you're seeing here is cursor, right? And and I just activated Claude code within cursor. And of course the 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 it's churning out.

16:36 · So I I prefer always using Claude code as the primary coding agent, but I use cursor just as a you know, just as a I 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 MCD, I think it's already installed here. So if I were to just show anyone, Figma MCD is already connected. So AWS MCD is connected, but I will just disable that first. So we have Figma MCD.

17:06 · So what I'll do is just go to Figma at this design and I'm going to go to dev mode. 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 we're waiting, like I also run Claude code in cursor sometimes as well. Maybe I have easy trouble on why. And uh you know, I did the cursor to begin with.

17:33 · [laughter] But that's the best.

17:36 · The way you use your AI is not optimal so. Yeah. Yeah. Usually usually that's the case. But I've I've seen that like, you know, um the interesting thing about Claude code, and I I think a lot of people ask me this, I mean, while while we're waiting for it, is that, you know, Claude code produces a significantly higher quality output than than compared to other coding agents that I've tried.

17:58 · So I've tried like, you know, the one in Gemini AI Studio, you know, even like Codex from cursor. I I I just think that from a from a taste perspective, you know, Claude code just just just wins it all.

18:11 · And of course it produces much higher quality outputs as well from everything from markdown file to codes, right? So so so I continue using Claude code for that reason. Yeah, some people say that Codex was a better at solving hard bugs and stuff.

18:27 · But I'm not familiar with it enough to know, so. Oh, yeah. Yeah, for sure. I 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 Claude code using Opus 4.6 and 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.

18:53 · 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 is showing now is that, you know, Claude code is actually taking Yeah. So this is this is this was just pulled up here and it is it is showing all these elements here right now.

19:12 · Yeah.

19:12 · 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 going to say something, right? I'm going to say, okay, I'm going to take this. Going to copy the link for it because this is the Let me just copy the link here. Oops.

19:31 · Copy link. Okay. So because this is the after state once I submit the form, right? So I'm going to 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 going to say great. Now the after state once I submit the form should be this uh And the logo isn't showing on the preview.

20:01 · And the logo 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 I told it three things. Uh after state.

20:22 · Uh second, of course, the logo isn't showing. And then uh the book should be uh in a sticky format uh rather than rather than just uh you know, floating around. Do you actually have the So, the whole point of this landing page is to download the PDF, right? Like you actually have the PDF in this Yes, I do have the PDF. Yeah, so so I'm I'm actually going to get the PDF like you 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.

20:50 · Yeah, so it's it's going to make all the edits right now. All right. Oh, so logo's a little weird. We'll we'll 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.

21:15 · Okay, yeah. So, now it now works. So, there is a download the report. Uh 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 do like a URL bitly. So, that Yeah, exactly. That's right. Yeah. Okay, so now I think it should be working. Let's just refresh a little bit. Say it Felix Felix this rj um CEO 80 Purity.

21:47 · Yeah.

21:48 · So, it's It is working. It's working.

21:50 · Yeah, yeah.

21:51 · 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 got to you know, uh uh briefly settle it, but but other than that, you know, it's it's really really fast to just get this out of the way. I wonder I wonder like how much better this is than just like copying some screenshots over to Cloud.

22:11 · So, based on my experience the last time, I think when I when I did this landing page. So, this is actually a real case study. Actually, it's it's right here. Uh let me just show everyone.

22:21 · Um it's right here. So, it's a lot better the last time before the new MCP was updated. I'll be honest. Um yeah, yeah, yeah. Like from output perspective, just from output perspective, yeah. But I I think it's 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 minor icons, yeah.

22:47 · So, you end up having to go back and forth a little bit, but if you you do use the MCP, uh it actually automatically fills up all of these things. Okay, that that makes it a clear advantage, right? It's good. Yeah, exactly. Yeah, so that's the advantage of just using MCP because it has all the assets. Cool. This is awesome. Yep. What do you want to go over next?

23:06 · Okay, so the next one is something that I've done it before, but uh I I think we we talked about it in in the edges as well, which is uh going from Figma from FigJam and building a game using FigJam uh directly using Cloud Code. So, so this is really really super cool. It kind of blew my mind a little bit uh when I when I did it. So, let's just clear this project first. Uh we don't need this anymore, not for now.

Demo: FigJam flowchart to a working game

23:30 · Just going to close this folder. So, now I'm going to sort of do a Purist path, right? So, I'm going to go FigJam and I'm going to say like I'm going to like Flappy Bird or something, I guess. Right, Flappy Bird Flappy Bird game. And I'm going to say draw a So, this is this is FigJam's AI.

23:48 · 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.

23:58 · It should include a simple scoreboard uh with highest records and others. Uh cheap uh flow uh simple to simple for users. Okay, now uh meanwhile, we're going to 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 chart. So, it's a little bit messy. Uh I don't usually kind of go through all of this.

24:26 · Uh but what I would do is that, you know, I will just imagine that you are a designer and your product managers just give you a flow chart and be like, do it like this. And if you're lazy to read it, you could just you know, vibe code something and just use it. Or if you want to, of course, uh you can reach to the flow chart. Uh and and but what what why this is really useful and why I like it, Peter, is because uh flow chart is a sort of bread and butter skill for a lot of designers. It's it's necessary in bigger organizations.

24:57 · 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 80 Purity, flow chart is not really a big thing. Uh uh and that's just because we we keep things really simple. There's not really all complications. Uh but we do have some flow charts for more complicated stuff.

25:20 · 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 flow chart and I want you to build the Flappy Bird game reference using this flow chart. Okay, so what it's going to do is that it will go to FigJam 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 MCP. So, it's pretty transparent. This is what I like, you know, it tells you exactly what it's doing.

25:51 · This is still using a Figma MCP, right? Yeah, it is still using the Figma MCP. Yeah. So, there's no uh Figma has just one MCP and and it has smaller functions.

26:00 · Okay, so now it's asking me where do I want to create it, right? So, I'm going to just going to say create a home directory. And if anyone in just wants to see uh while while this is just building up, let me just go back to uh my Vercel and I will show everyone what I did by uh building a game, right? On to Where is that? Okay, I have a Tetris game here. Okay, so there's a scoreboard.

26:24 · Wow.

26:25 · There's a lot of people that just played the game. I did I did not know that. Uh but in Yeah, so so you can basically play a simple game of Tetris uh directly uh for free um on this desktop. Uh I just built this using the same exact flow uh with uh FigJam. So, I'm just going to use it. Okay, so now it's actually building it.

26:48 · Same thing.

26:50 · So, just to give everyone kind of a a little bit of a preview as well. But it will blow your mind when this is ready. Um hopefully it just it it it has a good output Yeah, yeah. Let me just I mean, that that flow chart is pretty difficult for a human to read, man. It's like overlapping lines. So, hopefully Yeah.

27:08 · at this. Look at this. There's a little bit of a Yeah. Yeah, this is what I'm seeing. 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, Flappy Bird, man.

27:21 · So, I'm in Let me see. Yeah, so this is done. Are you seeing it? What's that?

27:24 · Okay. Yeah, look at it. It's Flappy Bird. So, you can play.

27:31 · Oops.

27:32 · It's a two box.

27:33 · Hold on. Scott.

27:35 · Okay, so it's a little bit too sensitive, right? So, I I can adjust that a little bit later. Yeah, 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.

27:50 · Oh.

27:51 · Hey, I got back a fork something. Yeah, that 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 with animations, with clouds and everything else. So, uh if I of course, if I want to adjust it a little bit 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 Tetris or Flappy Bird or anything of sorts.

28:22 · Uh and just by using Cloud Code, yeah. And MCP Figma MCP. Yeah. I think this will but I guess my question would be like how much does it actually use the flow chart versus it just knows how to build Flappy Bird like I mentioned. Maybe it just knows how to build, yeah.

28:39 · Yeah.

28:40 · I I I think there there there is a good chance that it just knows how to build.

28:43 · I mean, uh probably 100% 100% chance that it knows how to build. Um so, you know, as as we kind of get through today's podcast and demos, I 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 would be a little bit of a bottom neck in in some sense to sort of what you're doing.

29:12 · 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. And but what I do see Figma as a good use case would be uh would 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 and and you could like uh you know, collaborate on the finer elements of the case components and whatnot, yeah. Yeah, but it is like the last 10% the last mile of the Like the last mile.

29:44 · Yeah, I mean, my my guess is that at some point the last mile will be gone, right? Because LLMs would get hopefully good enough and and good enough to the point where you could just overlook the last mile or I've got just get through the last mile if the if the AI is good enough. Yeah. I also think like there's a use case to Figma for very closely matched design system a company, right? Yeah. Although I I think LLMs are okay at that now too.

30:11 · But like you want like exactly matched designs and something everything? Maybe like go to your Figma first to get Oh yeah, 100%. Yeah. Yeah. So like design systems I think it's it's going to be big thing. Uh at least with sort of like you know with with everything with Figma into into the cloud code or vice versa. Which is something that I've been trying to solve like so you see this file called taste MCP here.

30:39 · Right?

30:39 · Yeah, yeah.

30:40 · You could see that I screenshot a bunch of tweets like you know everyone is saying like you know you cannot replicate taste, right? It'll be a long time until you can replicate taste and there's a lot of tweets, right? Like like funny tweets and not. My I mean my guess is that at some point it will and like I'm I'm trying to replicate my own taste at least or like taste of really good designers that have publicly shown their work. So that's something that I'm personally building as a side project.

31:11 · I mean it's been really really hard to replicate taste if I'm honest. You know, I spend 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. I don't think it's impossible but let's see. Yeah. Dude, 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 used for platform on a file platform setup.

A UX reviewer skill for design feedback

31:39 · Yes, right? You can have I think I think you have a cut desire you can also or something skill. Yeah, I I don't have that right now but but I'm happy to sort of like show a little bit of the workflow actually of how to build that. Yeah. So maybe let's just cancel this one first.

32:00 · So I I think there'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 there's a multiple flow but I'm going to keep it simple. I'm going to say create a cloud 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.

32:30 · So you have your UX researcher, your your UI designer, the visual polisher and much more. So usually what you want to do is that you want to have all of them review something either simultaneously or taking turns, right? So what I'm doing here is that I'm actually just creating one of it first just to show you an example of how it works.

32:56 · So I'm going to say review screenshots and mockups. Yeah, keep it flexible. So it's asking me you know what frameworks I want to use.

33:06 · Flexible.

33:07 · All this will be for designers or maybe mixed teams, right? And then submit it.

33:11 · And the reason why I'm taking this workflow and and before this I used to write all my skills by the way. But what I've realized in the in in the past month alone is that is that just just cloud has been so good at writing these things that it would be unwise not to tell it to do it for you, right? Uh So so I think that's that's one of the things, right?

33:35 · 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 to put in. Yeah, skill cut and okay, maybe just a structure. Yes, using my MCP. This is pretty great.

33:54 · Okay, submit answers. And if you want to make a council of advisors you just ask it to make a skill for a council of advisors. Yeah. Exactly. Yeah, so so you could always say like I want to add a UI visual polisher into this particular skill as well. Yeah. You have to add an anti-AI slop advisor.

34:13 · Yeah, exactly. Yeah, you you you can you can you can add the anti-AI slop but I don't think it understands what's anti-AI slop because I mean it it just it just treats everything as high quality in this sense. Which which I think makes it even harder. Yeah, yeah.

34:28 · Because it's very hard to quantify what is slop these days from it's very hard to quantify to designers to to to the to the AI itself. But from a human perspective you just know it's slop. Well, it's getting harder. It used to be it used to be like on slop was like purple purple brilliantness, right? And now the latest models is actually getting better at not doing that stuff. So Exactly.

34:51 · It's getting harder and harder.

34:52 · It's getting a lot better and so it's it's getting harder especially when it comes to writing, right? Like we we talked 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? I I think a bulk of the text problem it's already solved. I mean that's really what LLMs are for, right? It's text-based. But when it comes to visual I think it has some way to go. You know, of course of course like you know what this guy Daryl just posted here. You know, we all see this, right?

35:24 · Like we just know this is from AI, right? So so there is still arguably some some room for improvement from from a visual perspective. Yeah.

35:33 · Okay. So it's So just to kind of walk through everyone like it is creating the slot the skill.md right now, right? It is creating the UX review skill.md. It's beautiful. I just love like seeing it run. Yeah. Cool. And and and just to like for people who are not familiar with this, the skill is very just like a text file, right? Text file about the instructions of what you should and should not do.

35:54 · Exactly. Yeah. Skill is really just a set of instructions. So if you just read this 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 cloud skill is which is just a set of instructions for you to perform a task, right?

36:17 · 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.

36:31 · It's packaged to UX skill.reviewer. So maybe what I will do is to show everyone what that skill look like. You know what we should do? I'm I'm going to push on the slop. You should cloud your web website again. Your your landing pages. And just screenshot that and and ask the same.

36:48 · You should ask the skill if it's slop or not or or not. Or like I should ask the the cloud code about my own landing page. Is that what you're saying? Yeah, the Yeah, like the one that you made for review landing page. Oh, this one? Yeah. Okay, let me just take a screenshot of it. I'm going to put it in there. It's a very good idea, right? So we're connecting the dots all together.

37:13 · I'm going to say review this Figma design using the UX reviewer skill. Now, I just want to share why I prompted it this way even though it just say something like review this Figma design. And the reason why I I I say this is because I'm going to edit this first. Review this screenshot, sorry.

37:36 · Okay.

37:37 · 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 on whatever without using the skill. So what I usually advise is like specify that you want it to use the skill in this at recognizing these stuff, so you have to think. Yeah, one of the most of the time I trigger.

38:02 · Yeah, I'm I'm glad I'm not the only one, Peter, because like you know, when whenever I go online and everyone is like oh, skill is so great and everything. But you know, I I I had some troubles getting it to use skill and I have to always manually prompt like hey, use skill, use skill, use skill. Yeah, that's always a a big one.

38:20 · Now, maybe while it's loading I 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 just just like some of the things that I've I've built using skill. So maybe let me just go to my cloud first. Okay. So there's the settings here. Capabilities, sorry.

38:40 · So actually I have what I call the UX viral X vital skill sets, right? Like like I I was like hey, like you know, Nikita Bier has like some principles about writing good stuff on on X. So I usually you know, I I give it some of the references like I example mark down files and everything. So I give it real examples from like Nikita Bier's like advice that he posted and everything else and it just comes out with this and including my own voice, right?

39:08 · So direct, no you know, ADP list AI for 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 with with the with the cloud skill, right? So this is a little bit outside of design but just to show everyone that it you can use it to write your PRDs, your your your your anything that you want basically. Yeah.

39:40 · Okay. Yeah, I have something pretty similar. So, yeah. All right. So, now it's done. So, it actually uses skill. So, as you can see, it successfully loaded the skill. If it used the skill actually, you would see this green dot and the skill here. So, it's it's pretty clear. And now it gives you a high-level structural issues critical that to fixed.

40:01 · Tells you fix and whatnot. So, this is This is just basically how skill works, right? Which is specific set of set of instructions that you wanted to perform a task for you and a certain output as well. Yeah. Awesome. Awesome. Yeah, this is great.

40:15 · Um Okay. Well, I think it's up for the subscription now. Yeah. Uh but we got one last thing, Peter. We got one last thing, which is want to show that thing? Okay. Okay, sure. Yeah. Which is the Figma's latest function of of of converting cloud code to to Figma design. I think that's that's the one where we wanted to to to also demo, right? Yeah. So, let's let's let's try that. So, I got this one. So, let's see.

How to export code back to Figma as editable designs

40:43 · 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 localhost.

41:06 · All right. So, this is the final demo for at least four different workflows using Figma MCP and just use cases for designers. Uh this one is what Figma announced two days ago, 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 why Figma is doing that. Like, why do you want to put code back to canvas?

41:36 · Uh I myself, of course, have some hypothesis about it, um but I don't think it's like, you know, people completely get it. Um so, that's what Right. So, okay. So, now we run run this on localhost. This is not the actual website. This is localhost. Uh I want to say export this to a Figma file. Using Figma FCP. I I think they got this because like I said, it's actually easy to just go from zero to one with code.

42:09 · And then and then you can go from Figma to Figma to like we trees.

42:12 · After it's done.

42:14 · Yeah.

42:15 · And I don't know.

42:16 · But I think like but I think the the irony is like, you still got to somehow bring it back to cloud code. You know, I I I think that's that's really kind of where 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 on the cloud uh cloud code or something. Yeah. I mean, what I I think what people are really want is like, you know, you make a Figma and then and then the MCP actually makes a full stack app. Like, it makes a database and back end and stuff like that.

42:48 · That's what people want. Just Exactly. 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 getting it into into like a proper code from my design. Okay. So, as you can see, it Yeah, it just sent to Figma.

43:06 · 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?

43:20 · So, 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 uh some simple stuff, right? So, set 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.

43:50 · Oh, that's amazing. Yeah. The I the icon as well. Look at that. Yeah, they they they they they they they they should be They they should be like a Chrome extension so I can just say skill stuff.

43:59 · What is that?

44:00 · Yeah, it's it's literally like a Chrome extension, right? Like uh but but it is of course native to to to Figma. I I and I think what is amazing is that all these are like, you know, like vectors, all 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 it really becomes a component inside of Figma and I think that's what designers are looking for.

44:25 · Um but of course, all of these 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's that. Yeah. And and that's all. That's That's This is the new function. Yeah. I'm I'm actually really impressed by the coupon Yeah, coupon bar I can see being very useful.

44:42 · Yeah. Yeah. I I think what I what I wish that it can do is that it can name these layers, right? Otherwise, it's all it's all a little bit like icon icons and there's a lot of stuff here. But, you know, it's it's good for first version, I would say. All right, Ferris. Well, let me let me ask you one more question, man. So, like uh you know, we went from Figma to Chrome, code to Figma. And you also built a bunch of stuff without going to Figma at all. So, what is it like? Do you think designers should do like you know, all the designers out there are like freaked out about all this stuff.

Why most designers aren't adapting fast enough

45:13 · [laughter] Like like like uh what what should I do?

45:15 · Like what should I do because all I know is how to make fake Figmas. Like, what else should Should I like learn to code or Well, I you know, I I 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're not freaked out enough because they are really actually not on cloud code or Cursor today. Um a lot of them, like majority of them are still on Figma.

45:42 · The workflow for them has not drastically changed. Um and they're not learning cloud code outside of work. I mean, you know, to to give you sort of a a little bit of a a data point, right?

45:54 · Like, at ADPList, 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, has only increased maybe for like 10, 20% over the past 6 months, right? It hasn't really dramatically seen the rise of that. But I I think what we do see the rise on is Figma make, right?

46:22 · Uh and and of course, we know that Figma make is not really cloud code because it doesn't have all these uh deep skills and everything of sorts. So, my guess is that designers are over-reliant on Figma as a as a company as a and as a tool. Uh and that's one, right? A second thing is just that cloud code or Cursor uh just looks really daunting, right? I mean, you think about it as a as a designer.

46:48 · You don't want to see terminals. You don't want to see uh you know, the IDE of Cursor. So, that that is a high barrier of entry for a lot of designers. So, uh I mean, they're not freaked out enough, but if they if they see this exact podcast and see what it can be capable of, I I think uh hopefully they feel excited. Yeah.

47:07 · Yeah, I also think uh this is just like a Figma curse to people so designers don't get offended. But I I feel like uh some some of these Figma files I open have like so many explorations. It's like way more confusing than just like using a terminal. Like, terminal I just type in the same thing and then it does stuff, right? But some of these some of these Figma files have like 20 different explorations. I don't even know where to look. Yeah. And and also another thing I would say is like I feel like design has got to a point where it's like so standardized. Like, you have to use a design system. You got to use auto layout.

47:36 · I I I feel like the creative part of design is is almost like gone, man. I I don't know I'm I'm going to be all around, but like we had a wing wing uh we had a wing app and some of these more like out there designs. And now and now I feel like everything's like very standardized. And like you just kind of like working with all these constraints.

47:52 · Yeah. Yeah. And like I I I feel like designers should be free. Should be free from all that stuff. That's like you were freaked out by what? Well, there there is always a real challenge, right? With when we talk about quality and craftsmanship. I mean, it takes a lot of patience and a lot of a lot of intention, right? Like I mean, when when I first started design, I mean, I did not start with software design. I started with industrial design. Um and and and if you were to look at the best designers that uh that Silicon Valley look up to, I mean, particularly Jony Ive.

48:23 · I mean, these are these are really good industrial designers. I mean, the fact that he designed a Ferrari uh and it got sort of the whole tech Twitter talking about it. I 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 is entirely different ballgame.

48:46 · You know, I have a really really good friend who who works as a industrial designer in a in in a firm in in Copenhagen. And and you just look at the details and the patience and the intention behind the design.

48:59 · Everything from the 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.

49:14 · Um and all of these things that industrial designer has to care for. And the reason for that is because you can't really unmanufacture something, right?

49:22 · So, it's really like a one-shot one-shot thing. Whereas whereas for 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, so when you work with industrial designers or ex-industrial designers, it just brings a a fresh level of intentionality that that you don't really find in a lot of softwares today.

49:46 · Interesting. Okay.

49:48 · Yeah. I guess maybe industrial designers will be disrupted by AI next. That's how it sounds. Yeah. I mean I mean I don't know if that that that is Yeah. Cool. All right. Well, before we start, where can people find you online and also, you know, I guess where you can find your startup, right? Yeah.

50:04 · 80please.com.org or just find me on X. I'll always be there. Yeah. Well, thanks so much, man, for being on this demo and showing us all the great work. Of course. Thank you so much for having me, Peter. This was exciting.

52 KiB Raw Permalink Blame History