Loading summary
Transcript145 lines
- [00:00]
Felix Lee
A lot of designers, first of all, are not freaked out enough. They are really actually not on cord code or cursor today. Majority of them are still on figma. COD 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.
- [00:33]
Peter
Oh, that's amazing.
- [00:34]
Felix Lee
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.
- [00:46]
Peter
Hey, welcome everyone. My guest today is Felix. Felix is CEO of ADP List and he's also taught thousands of designers on how to use cock code gigabyte 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, Phydex.
- [01:04]
Felix Lee
Hi Peter. I'm very excited to be on your show today. I've been a big fan, so thanks for having me.
- [01:10]
Peter
Yeah, so why don't we get right into it? Nat, do you think you can share a few products that you designed using cogpot itself?
- [01:17]
Felix Lee
Yeah, for sure. So let me just share my screen. I think it's the best use case for that. So I have designed a couple of products and just from a background information perspective, I have been vibe coding as a designer for about maybe close to three and a half months today. So I started at the. During the holidays of. Of 2025 and kind of rolled into, you know, 2026 this year. So the first website that I've really kind of did was my own personal website. And this is where I highly recommend a lot of people to start because of course, you know, it's. It's all about yourself and you know, there is 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 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. 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 Supabase and build a rag database with it with all the information about myself, adplist and everything. Right. And as you can see, it populates the answer and Ed given gives you the sources that it plugs from. So this is all built by myself. There's no sort of third party plugins or anything done directly on Claude code.
- [02:50]
Peter
Is this using like OpenAI or something? Or key generated answers?
- [02:54]
Felix Lee
Yeah. So the API for sort of the chat is using the cloud AI. Yeah, Anthropics API. Yeah.
- [03:06]
Peter
I love how when you put your dark mode and light mode, the background changes too.
- [03:10]
Felix Lee
Yeah.
- [03:11]
Peter
How do you get that to work? I'm just first.
- [03:13]
Felix Lee
Yeah.
- [03:14]
Peter
Is it two different images or.
- [03:16]
Felix Lee
Yeah, it's actually two different images that are uploaded. But you know, it's pretty interesting because I did not upload the dark mode for Claude code. So what I tell cloud code is convert this image, the original image, which is this, into a dark mode version. So, you know, it's so great. I mean it's. Back then it was Opus 4.5 and it was able to just convert it into dark mode. I didn't have to do much.
- [03:45]
Peter
I understood.
- [03:48]
Felix Lee
Yeah. And then there's some Easter egg as well. Yeah. So you could have that as well. It's pretty simple. But it was really where I got started. My next website was for adplist. Right. So this is my during the holidays as well. And I VOD coded this platform where we actually connected a real live data of our 2025 bookings on Adplist on onto what we call the Adplist rep. Right. It's a little bit. It's inspired by Shopify Globe, where Shopify has like, you know, shoppers and everything. In this case we have people calling one another across the globe. This is. This lines represents the bookings, 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. You could just randomly click one. This is in Toronto. It's beautiful. Just click here. This is in Singapore, where I'm at right now. And then of course, at the bottom, we wanted to design something like a live ticker, almost like a stock market, but with the names of the mentors who contributed in 2025. So that's a little touch here. And of course these are sort of all the minutes sessions that are being done in 2025. So this is relatively simple. But I decided that, you know, for my sort of second project, in a sense it will be something that goes back to the company. So this. This is. This is where I landed next.
- [05:26]
Peter
And dude, can you share how you. Like at a high level? How did you do this? Like, did you get that glow from somewhere and then just build your database?
- [05:35]
Felix Lee
Yeah, for sure. So, yeah. So what I did was that, of course, actually plug. So I actually exported the data of the names of the mentors. You know, where the calls are happening from a city to country perspective, the minutes, the sessions. All this data from our AWS backend, I exported it as CSV. And what I did told Clarko to do is that, hey, look, you know, read through all this 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 kind of want this globe where the calls are sort of interlinked through the lines and everything, like Shopify globe. So I asked you to make for me a plan. It had a great plan 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.
- [06:36]
Peter
Also, you did not use like a 3D global asset. It actually just made a globe.
- [06:40]
Felix Lee
It just made a globe by itself. Yes, I did not use a 3D asset for that. Wow.
- [06:45]
Peter
Okay.
- [06:46]
Felix Lee
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.
- [06:56]
Peter
Okay. I'm not a. Trust me. Okay. You did one more.
- [07:00]
Felix Lee
Yeah, I do have one last one just to show everyone.
- [07:03]
Peter
This episode is brought to you by Replit Relet'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 a 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 Replit via the link in the video description and use my code, PYAN26 to get three months free. That's. That's P Y A N G 26. Now back to our episode.
- [07:47]
Felix Lee
So this is why I called the Growth Analyzer app. Right. So this is something that I put on X as well. People loved it. You know, basically so you have credit system. So this is really a full blown app here, Peter, because you got to sign in. You can purchase credit if you want. So if you go here, you can purchase credit. So this is linked to Stripe. You can log in with, 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 a quick demo. 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 that new sort of UX change. Right. So even like the cta. Yeah. So instead of saying get started, you could be like, start recording free.
- [08:57]
Peter
Right.
- [08:57]
Felix Lee
So more actionable, you know, like direct 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. You know, across a, yeah, across a span of, like, across a span of a good three weeks. Of course, I was iterating on that. Yeah.
- [09:28]
Peter
So that's, this one is just like you have to take a screenshot of the website, I'm guessing, and plug it, wing your AI with the prompt and then it gives advice. Is that how it's like.
- [09:37]
Felix Lee
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.
- [09:46]
Peter
What's the best part about binary speech for your art?
- [09:49]
Felix Lee
Yeah. So the tough part about this, Honestly I think one, and I've been getting DMs about it, is that is to get the hotspots right. So you see these hotspots. So these hotspots, if you were to use Claude code or you were to use Anthropic's Opus Lim API, for some reason the visual recognition part isn't really the best. So sometimes the hotspot just goes way off. Right. For example, this one might not be on the copy directly, it might be somewhere on the top right corner. So it's a little bit hard to use that. So I had to try different, you know, models. And the best one for this would be the Gemini Pro, which has Nano Banana, I think that one was like really good to help with it. So getting the hotspots right was one of the toughest one. And then second getting it to.
- [10:47]
Peter
Right.
- [10:48]
Felix Lee
Really great feedback. That makes sense. Right. I think I had to kind of like fine tune the response a little bit as we go. So I did spend a lot of time on the quality of the output here. Yeah.
- [10:59]
Peter
This is amazing, dude. Any kind of landing page optimization usually goes viral on X. Yeah, you're probably making money from this, right?
- [11:07]
Felix Lee
Yeah, there's a lot of landing page optimization stuff. So this is more of like sort of along the lines of like helping you with conversions and just like supporting you with like a second view of your landing page. Yeah.
- [11:24]
Peter
Okay, well this is pretty incredible. So let me ask you about. So when you make stuff like this, you're the designer by trade, right? So like do you actually start with the vid in myself or do you just go straight in this code?
- [11:37]
Felix Lee
Well, you know, it's a, it's a great question. Right. Frankly, I did not start from Figma for any of these projects that you just seen. Yeah, unfortunately. Unfortunately.
- [11:54]
Peter
Okay, so Figma is not a part of classes. You just kind of iterate it and code wrap.
- [11:59]
Felix Lee
It's not part of the process. We have got a lot of things to talk about that. But yes, it wasn't a part of the process when I designed all of these things.
- [12:07]
Peter
Yeah. And it's like this stuff is so good already and code is basically free at this point. It's almost like I'm not a designer by trade and I was trying to use all the layout. It's gooseneck. So it's almost easier to just generate the code to try to build some box around your figma.
- [12:24]
Felix Lee
Yeah. Was it you who tweeted? Did you tweet something like auto layout is a pain in the ass or something a few days ago? Was it?
- [12:32]
Peter
It was me.
- [12:32]
Felix Lee
Okay. Yeah. Oh damn. Yeah, like no, I mean, 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, but you know, after we raised our first round, you know, I hired a designer and she took pretty much the bulk of the workload, in fact everything. So I didn't kind of do that anymore. Yeah, but it was always hard to figure out all the auto layout stuff as well.
- [13:08]
Peter
Okay, well, I mean, why don't we keep ourselves here? Let's Actually try to use Figma a little bit more. They have an mcd, right?
- [13:17]
Felix Lee
Yes.
- [13:18]
Peter
Can you show what does MCD can be?
- [13:20]
Felix Lee
Yeah, for sure. So maybe just to kind of get everyone on speed, right. Like face Figma has figma MCP has like sort of, I would say many, many different functions. But what we will be demoing here as we talk about Peter would be two things, right. One would really be using the Figma MCP to get a design to code and then next thing is like something more new which Figma released which is, you know, getting code into figma. Right. I think that's, that's just launched a couple of days ago. So we'll kind of go through both now. Let's do the first one maybe. So I'm going to share my screen and open up something here. I think maybe what would be great is we do a simple landing page right from by using cord code to kind of get that done and the Figmy mcp. So I have a ready made, let me just bring that here. So I have a ready made sort of landing page here for one of our ebook guides that ADP list usually promotes, right. It's called a design moonshot landing page. So to kind of give, give a little bit of 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 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 were to let's just say get a developer to do it, you gotta maybe write a prd, submit it 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, it gets delayed by a lot. So this landing page would have taken me about, would have took, took my team I think about at least a day or two, right. 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 think what would be great is it would be to kind of show you how figmimect can convert this into a working building prototype. Yeah. So let's get to it. So usually what I Do is I use terminal. So I can use terminal for this. So then you can activate cloud 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 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 the code and the files within cursor. Yeah. So what you're seeing here is 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 churning out. So I prefer always using COD code as the primary coding agent. But I use cursor just as a, you know, just as a 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 mcp, I think it's already installed here. So if I were to just show anyone figma, MCP is already connected. So AWS MCP is connected but I might, I will just disable that first. So we have figma mcp. So what I'll do is just go to figma this design and I'm going to go to dev mode. It's very simple and I'm going to copy example prompt here, let's say implement this design from figma just very straightforward and it's going to start running and
- [17:23]
Peter
while we're waiting like I also run hot cosors and sometimes although maybe I'd easy trouble. No more and more. Yeah, I bet the Cursor team hints
- [17:32]
Felix Lee
this
- [17:36]
Peter
they want you to use their AI. It's just not buckle over here.
- [17:39]
Felix Lee
Yeah, yeah, usually that's the case. But I've seen that the interesting thing about cord code and I think a lot of people ask me this, I mean while we're waiting for it, is that core code produces a significantly higher quality output than than compared to other coding agents that I've tried. So I've tried like you know, the one in Gemini AI Studio, you know, even like codecs from cursor. I just think that from a, from a haste perspective, you know, Claudette just, just, just wins it all. 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 Cloud code for that reason.
- [18:22]
Peter
Yeah. Some people say that Codex will be better at solving narrative logic stuff, but I haven't played with it enough to now, so.
- [18:30]
Felix Lee
Oh, yeah, yeah, for sure. 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 code using Opus 4.6 and it is surprisingly, you know, very different in terms of its output with the exact same prompt. I'm not sure what's the science behind it. I'm not a AI researcher or AI engineer, but I'm quite sure that it is different to a certain extent. Yeah. Okay, so what is showing now is that, you know, code is actually taking. Yeah, so this is. This is. This was just put up here and it is. It is showing all these elements here right now. Yeah, yeah, it is. It is that. Oh, look at this. This is interactive. This is incredible. This is incredible. So 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. 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. And the logo isn't showing on the preview and 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 told you three things. One is the after state. Second, of course, the logo isn't showing and then the book should be in a sticky format rather than, rather than just, you know, floating around.
- [20:32]
Peter
Do you actually have the. So the whole point of this landing page to download the PDF, right? Like, you actually have the PDF?
- [20:39]
Felix Lee
Yes, I do have the PDF, yeah. So I'm actually going to get the PDF. Like, actually, you pointed that perfectly well. So what I'm going to do is I'm going to go get the PDF while it's loading. Yeah. So it's going to make all the edits right now. All right. Oh, so logo is a little weird. We'll handle that later. But what we really want to do is 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 it now works. So there is a download the report. So what we'll do is just to say for download report in after state. It should. Okay.
- [21:30]
Peter
Okay. So you're going to take like a URL bit left.
- [21:33]
Felix Lee
Yeah, exactly. Yeah, yeah. Okay. So now I think it should be working. Let's just refresh a little bit. Say, Felix. Yeah. So it's. It's working. It's working. Yeah, yeah. So if you can see. I mean this whole workflow just took us less than 15 minutes. Of course there are some visual stuff that we got to, you know, briefly settle it. But other than that, you know, it's really, really fast to just get this out of the way.
- [22:06]
Peter
So I wonder, I wonder like how much better this is done and just like copying some screenshots over to clock.
- [22:11]
Felix Lee
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. Let me just show everyone. It's right here. So it's a lot better the last time before the new MCP was updated. I. I'll be honest. Yeah, yeah. Like from output perspective. Just from an 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, all these minor, minor icons. Yeah. So you end up having to go back and forth a little bit. But if you, you do use the mcp, it actually automatically fills up all of these things.
- [22:57]
Peter
Okay. That, that makes this a clear advantage, for instance.
- [23:00]
Felix Lee
Exactly. Yeah. So that's the advantage of just using MCP because it has all the assets. Cool.
- [23:04]
Peter
This is awesome.
- [23:05]
Felix Lee
Yeah.
- [23:06]
Peter
Do you want to come on next?
- [23:07]
Felix Lee
Okay, so the next one is something that. I've done it before, but I think we, we talk about it in the end as well, which is going from figma, from figjam and building a game using figjam directly using Claude code. So this is really, really super cool. It kind of blew my mind a little bit when I did it. So let's just clear this project first. We don't need this anymore. Not for now. Just going to close this folder. So now I'm going to sort of do a purist puff, right? So I'm going to go figjam and I'm going to say like I'm going to like a flappy bit or something I guess, right? Flappy bird. Flappy bird game. And I'm going to say draw a. So this is figjam's AI. So this is pretty good as well. Draw a flow chart of a simple flappy bird game app that doesn't require sign in. It should include a simple scoreboard with highest records and others. The cheap airflow are simple to simple for users. Okay, now 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 flowchart. So it's a little bit messy. I don't usually kind of go through all of this, but what I'll do is that, you know, I will just imagine that you are a designer and your product manager just give 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 you can read through the flowchart. And, and, but what, what, why this is really useful and why I like it, Peter, is because flowchart is a sort of bread and butter skill for a lot of designers. It's, it's necessary in bigger organizations. Engineers require it and many people just want to see it so that they understand how things work. Personally, of course, at ADP list, flowchart is not really a big thing. And that's just because we keep things really simple. There's not really a lot of complications, but we do have some flowcharts for more complicated stuff. But with that said, you know, I'm going to copy this link to this election and I'm going to say using, look at this figma flowchart and I want you to build the Seppi Bertgame reference using this flowchart. 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]
Peter
This is still using the figma mcp, right?
- [25:53]
Felix Lee
Yeah, it is still using the figma mcp. Yeah, so there's no figma has just one MCP and it has multiple functions. Okay. So now it's asking me where do I want to create it. Right. So I'm just going to say create a home directory. And if anyone just wants to see, while this is just building up, let me just go back to my Vercel and I will show everyone what I did by building a game. Right onto. Where is that? Okay, I have a Tetris game here. Okay. So there's a scoreboard. Wow. There's a lot of people that just played the game. I did not know that. So you can basically play a simple game of Tetris directly for free on desktop. I just built this using the same exact flow with FigJam, so I'm just going to use it. Okay, so now it's actually building it. Same thing. So just to give everyone kind of a little bit of a preview as well. But it will blow your mind when this is ready. Hopefully it has a good output. Yeah, yeah, let me just.
- [27:03]
Peter
I mean that. That flowchart is pretty difficult for him to read overlapping ones, so hopefully.
- [27:08]
Felix Lee
Yeah, look at this, look at this. There's a little bit of a. Yeah,
- [27:12]
Peter
this is what I'm seeing.
- [27:12]
Felix Lee
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 let me see. Yeah, so it is done. Are you seeing it?
- [27:24]
Peter
What's that?
- [27:25]
Felix Lee
Okay, yeah, look at that. It's Tabi Bird. So you can play. Oops,
- [27:34]
Peter
hold on.
- [27:35]
Felix Lee
Okay, so it's a little bit too sensitive. Right, So I can adjust that a little bit later. Yeah, you can view the scores settings as well. That's easy. Okay, so maybe I just go to Easy. You can try it. Oh, there you go.
- [27:51]
Peter
I got like a fer.
- [27:52]
Felix Lee
Yeah, yeah, there you go. Right. So it just took like, like, you know, a few minutes to even just build a game like that with animations, with clouds and everything else. So if I, of course, if I 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 flowchart on Figma board to build something as simple as a game like Tetris or Flappy Bird or anything of sorts. And just by using Claude code. Yeah, and mcp. Figma mcp.
- [28:28]
Peter
Yeah, I think this is what. But I guess my question would be like, how much does it actually use the floating Chart. But it just knows how you build. Black people. Maybe it just knows how to build.
- [28:39]
Felix Lee
Yeah, yeah, I think there is a good chance that it just knows how to build. I mean probably a hundred percent, 100% chance that it knows how to build. So, you know, as we kind of get through today's podcast and demos, 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 plot code or like me using figma would, would be a little bit of a bottleneck in some sense to sort of what you're doing. 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, Would, would really be sort of like when it becomes like a collaborative tool between engineers or fraud managers where you could leave comments and, and, and you could like, you know, collaborate on the finer elements of the taste components and whatnot.
- [29:40]
Peter
Yeah, yeah, but it is like the last 10%. The last mile.
- [29:43]
Felix Lee
Like the last miles. Yeah, yeah. I mean my, my guess is that at some point the last mile will be gone. Right. Because lims would get hopefully good enough and, and, and, and good enough to the point where you could just overlook that last mile or if not just get through the last mile or if the, if the AI is good enough. Yeah.
- [30:03]
Peter
I also think like there's a use case to figure out for very closely matching design system accompany. Right?
- [30:08]
Felix Lee
Yes.
- [30:10]
Peter
I think LLMs are okay at that now too. But like you want like exactly match design system for everything. Maybe like going to FINMA first still kit.
- [30:18]
Felix Lee
Oh yeah, 100%. Yeah, yeah. So like design systems I think is going to be big thing at least with sort of like, you know, with, with everything with Figma into, into 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, right? Yeah, yeah, you could see that. I screenshot a bunch of tweets. Like, you know, everyone is saying like, you know, you cannot replicate taste. Right. It'll be a long time until you can replicate taste. And just a lot of people tweets, right? Like, like funny tweets or 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. I mean, it's been really, really hard to replicate taste, if I'm honest. Like, you know, I spent maybe like two weeks now every day I've been trying to replicate it for like 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.
- [31:30]
Peter
Yeah, dude, that's actually a good thing to close on. Like, I would love to see if you only share some of your skill files that you use for platform or like how your platform set up is. Right. I think you have like a desire you console or something. Skill.
- [31:45]
Felix Lee
Yeah, I don't have that right now, but I'm happy to sort of like show a little bit of the workflow actually of how to build that. Yeah. So maybe let's just cancel this one first. So I think that's one of the things that you talk about, which is about the design review panel. Right. Skill. So 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 create a cloud skill for a UX reviewer. 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 reviewers. So you have your UX researcher, your. Your UI designer, your 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. So I'm going to say review screenshots and mockups. Yep. Keep it flexible. So it's asking me, you know, what frameworks I want to use. Keep it flexible. Audience would be for designers, maybe mix teams. Right. And then submit it. And the reason why I'm taking this workflow and before this, I used to write all my skills, by the way. But what I've realized in the past month alone is that, is that just Claude has been so good at writing these things that it would be unwise not to tell it to do it for you. Right. So I think that's one of the things. Right. It's like you could do it, but then of course you could either maybe go and check out some open source stuff on GitHub that might have better skills as well to put in scorecard and okay, maybe just a structured. Yes, useful cp. This is pretty great. Okay, so I'm announces and if you
- [33:56]
Peter
want to make a council of advisors, you just ask it to make a skillful council.
- [34:02]
Felix Lee
Exactly. Yeah. So you could always say, like, I want to add a UI visual polisher into this particular skill as well.
- [34:10]
Peter
Yeah, you have to add an anti AI slot. Provide it.
- [34:14]
Felix Lee
Yeah, exactly. Yeah, you can add the anti AI slot, but I don't think it understands what's anti AI slot because I mean it just treats everything as high quality in this sense, which I think makes it even harder. Yeah. Because it's very hard to quantify what is slob these days from. It's very hard to quantify to designers, to the AI itself, but from a human perspective, you just know it's slop.
- [34:41]
Peter
Well, it's getting harder. It used to be like on a slob was like purple. Purple brilliant.
- [34:46]
Felix Lee
Right.
- [34:46]
Peter
But now the latest models is actually getting better at not doing so.
- [34:51]
Felix Lee
Exactly.
- [34:51]
Peter
It's getting harder and harder.
- [34:52]
Felix Lee
Yeah, it's getting a lot better. And so it's getting harder, especially when it comes to writing.
- [34:58]
Peter
Right.
- [34:58]
Felix Lee
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. I think a bulk of that text problem, it's already soft. 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, 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 there is still arguably some room for improvement from a visual perspective. Okay. So just to kind of walk through everyone. Like it is creating the SKU MD right now, right? It is creating the UX reviewer SKU md. It's beautiful. I just love like seeing it run. Yeah, yeah.
- [35:46]
Peter
And just to like, for people who are not familiar, the skill is very. Just like a text box, right. Text file, a bunch of instructions. Oh, you should and should not do.
- [35:55]
Felix Lee
Exactly. Yeah. SKU 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 core SKU 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 how you want it or how you feel like your workflow should be. So in this case it's done. It's packaged to UXQ reviewer. So maybe what I'll do is to show everyone what that skill look like you always do.
- [36:40]
Peter
I'm going to put you on the slide. You should co op your website again to review landing pages and just screenshot that and ask the same. You should ask the skill if it's about the design or not.
- [36:51]
Felix Lee
Oh, like I should ask the cloud code about my own landing page? Is that what you're saying?
- [36:58]
Peter
Yeah. Like the one that you made for review landing pages.
- [37:02]
Felix Lee
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 are 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. Even though it just says something like review this figma design. And the reason why I say this is because now I'm going to edit this first review this screenshot. Sorry. Okay, so the reason why I prompted it this way is because there will be instances where it doesn't use a skill even when you're clear about 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 SKU in this case. So let's just.
- [37:59]
Peter
Yeah, it's not very good at recognizing.
- [38:04]
Felix Lee
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, SKU is so great and everything but you know, 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 big one. Now maybe while it's loading, I, I would, I would like share a little bit of a behind the scenes as well of what I use a skill for and also just like some of the things that I've built using skill. So maybe let me just go to my cloth first. Okay, so there's the settings here. Capability. Sorry. So actually I have what I call the UX Viral X vital skill sets.
- [38:46]
Peter
Right.
- [38:47]
Felix Lee
Like I was like, hey, like, you know, Nikita Beer 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 Have example markdown files and everything. So I give it real examples from like Nikita Beer's like advice that he posted and everything else. And it just comes up with this and including my own voice. Right. So direct, no bullshit, 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 the cloud skill. Right. So this is a little bit outside of design, but just to show everyone that you can use it to write your PRDs, anything that you want, basically.
- [39:40]
Peter
Yeah.
- [39:41]
Felix Lee
Okay.
- [39:41]
Peter
Yeah, I have something pretty simpler, so.
- [39:43]
Felix Lee
Yeah. All right, so now it's done. So it actually used a skill. So as you can see, it successfully loaded the skill. If it used the sku actually you would see this green dot and the skill here. So it's pretty clear. And now it gives you a high level structural issues critical that the fixed tells you fix and whatnot. So this is just basically how SKU works, right? Which is specific set of instructions that you want it to perform a task for you and a certain output as well. Yeah.
- [40:13]
Peter
Awesome, awesome. Yeah, this is great. Okay, well, I think that's all for the substitution now, but we got one last thing.
- [40:21]
Felix Lee
Peter, we got one last thing which
- [40:23]
Peter
is you want to show that thing? Okay. Okay, sure. Yeah.
- [40:25]
Felix Lee
Which is Figma's latest function of converting quad code to Figma design. I think that's the one we wanted to do also demo, right? Yeah. So let's, 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. 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 use cases for designers. This one is what Figma announced two days ago, which is getting from QR code back to Canvas. I think it's pretty controversial by the way, because a lot of people that I know do not understand why Figma is doing that. Like, why do you want to put code back to Canvas? I myself of course have some hypothesis about it, but I don't think it's like, you know, people completely get it. So that's one thing. Right? So okay, so now we ran this on local host. This is not the actual website, this is localhost. I want to say export this to a Figma file using figma fcp.
- [42:03]
Peter
I think they built this because like I said, essentially easy to just go from zero to one with whole and then you can hopefully don't you pigment you like retrieve as a result.
- [42:14]
Felix Lee
Yeah, but I think like, but I think the irony is like you still got to somehow bring it back to cloud code. You know, I think that's, 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. So you might as well just, you know, design it onto cloud cloud code or something.
- [42:37]
Peter
Yeah, I mean what I think what people really want is like you know, you make a fitbot and then, and then the MCP actually makes a full stack app. Like it makes a database and back into. That's what people want.
- [42:50]
Felix Lee
Exactly, exactly. I've been seeing it in my comments. Like people are like, I'm convinced about the use case but what I really want is just getting it into like a proper code from my design. Okay, so as you can see, it just sent to Figma. So maybe let's just open the file for now for the Figma one and we would be able to see it. Okay, so, 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, so let me, let me show you something a little bit more interesting. Okay, so let's say I want to capture specific elements like the button here, this button I want to capture. It can do a lot more things. Right. But for the interest of time, I'm just going to show some simple stuff.
- [43:36]
Peter
Right.
- [43:37]
Felix Lee
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.
- [43:50]
Peter
Oh, that's amazing.
- [43:51]
Felix Lee
Yeah, the icon as well. Look at that.
- [43:57]
Peter
They should be like a Chrome extension. So I can just skill stuff.
- [44:00]
Felix Lee
Yeah, it's literally like a Chrome extension, right? Like, but it is of course native to Figma. And I think what is amazing is that all of these are like vectors, right? So it's like SVGs, you can edit the colors as well. It's not just a screenshot. It really becomes a component inside of Figma. And I Think that's what designers are looking for. But of course, all of this, at the end of the day, you know, you want it to go back to production. The irony is that it has to go back to cloud code for, you know, again. So that's that. Yeah. And that's all. That's, That's. This is the new function. Yeah.
- [44:39]
Peter
I'm actually really impressed by the component part. Yeah, I can see being very.
- [44:42]
Felix Lee
Yeah, yeah, yeah. 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 icons and there's a lot of stuff here, but, you know, it's good for first version, I would say.
- [44:55]
Peter
All right, Fitz, well, let me ask you one more question, man. So, like, you know, we just went from Figma to cone 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 need to, like, if I was a designer, I'll be like, feed, dump out all the stuff, right? Like, like, what, what should I do? Why should I do this? Because all. All I know is how to make figmas. Like, what measure is that? Like, naughty code or.
- [45:22]
Felix Lee
Well, you know, I would have a really honest view on this is that a lot of designers, first of all, are not freaked out enough, right? Like, they are not freaked out enough because they are really actually not on code or cursor today. A lot of them, like, majority of them are still on figma. The workflow for them has not drastically changed and they're not learning cord 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 Claude code has maybe only like Claude code or Cursor, like deeper AI tools has only increased maybe for like 10, 20% over the past six 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? And, and of course, we know that Figma make is not really COR code because it doesn't have all these deep skills and everything of sorts. So my guess is that designers are over reliant on Figma as a, as a company, as a. And as a tool. And that's one. Right. Second thing is just that plot code or cursor Just looks really daunting. Right. I mean, you think about it as a designer, you don't want to see terminals, you don't want to see, you know, the ide of cursor. So that, that is a high barrier of entry for a lot of designers. So I mean, they're not freaked out enough. But if they, if they see this exact podcast to see what it can be capable of, I think hopefully they feel excited.
- [47:08]
Peter
Yeah. I also think this is just like a proof irons, don't get offended, but I feel like some of these figma files that open have so many explorations. That is way more confusing than just using the terminology terminal. I just type in the same thing and it does something. But some of these figma files have like 20 different aspirations. I don't even know where to look.
- [47:27]
Felix Lee
Yeah.
- [47:28]
Peter
And also another thing I'll say is I feel like design has got to a point where it's so standardized. Like you have to use design system, you gotta use all the layout. I feel like the creative part of design is almost like gone, man. I don't know. I'm a viewer around with like. But we had like, 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're kind of like working with all these constraints. Yeah, I feel like designer should be free, should be free from all of a sudden.
- [48:00]
Felix Lee
Well, there is always a real challenge. Right. When we talk about quality and craftsmanship, I mean, it takes a lot of patience and a lot of intention. Right. Like, I mean, when I first started design, I mean, I did not start with software design, I started with industrial design. And if you were to look at the best designers that Silicon Valley look up to, I mean, particularly Jordy, I've. I mean, these are really good industrial designers. I mean, the fact that he designed a Ferrari and it got sort of the whole tech tweeter talking about it. I mean, first of all, you could be a really good software designer, but you would never design for Ferrari because designing hardware and designing for industrial stuff is entirely different Ball game. You know, I have a really, really good friend who works as a industrial designer in a, 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 the 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, like even the tools used to manufacture and all of these things the industrial designer has to care for. And the reason for that is because you can't really unmanufacture something, right? So it's really like a one shot, one shot thing. Whereas for software designers, I mean, you could always go back to Figma. You could change the colors and everything that you want. It's pretty straightforward. So when you work with industrial designers or ex industrial designers, it just brings a fresh level of intentionality that you don't really find in a lot of softwares today.
- [49:47]
Peter
Interesting. Okay.
- [49:48]
Felix Lee
Yeah.
- [49:49]
Peter
Okay. So maybe industrial designers will be disrupted by AI lags.
- [49:54]
Felix Lee
Yeah, I don't know if that is. Yeah.
- [49:57]
Peter
Cool. All right, well if you're curious, where can people find you online?
- [50:00]
Felix Lee
And also I guess, yeah, adplace.com org or just find me on X. I'll always be there. Yeah.
- [50:10]
Peter
Well, thanks so much, man, for doing all these demos and showing us our remarks.
- [50:13]
Felix Lee
Of course. Thank you so much for having me, Peter. This is exciting.