# Could Paper be the Figma Killer? AI-Native Design Tool ## Метаданные - **Канал:** DesignCourse - **YouTube:** https://www.youtube.com/watch?v=GAnP8mtbMas - **Дата:** 02.03.2026 - **Длительность:** 14:35 - **Просмотры:** 24,225 - **Источник:** https://ekstraktznaniy.ru/video/17674 ## Описание Take the Paper challenge: https://designcourse.com/app/foundations/2026-uiux/ Level up your coding skills: https://scrimba.com?via=designcourse (Get 20% off) -- Today, I'm featuring Paper, as they've recently integrated an MCP server for Claude Code, Cursor, Copilot, etc.. It allows you to build layouts yourself, along with AI agents to also build layouts, which enables you to go from code to design, and design to code. https://paper.design It's also the basis of our next design challenge in the AI-Native design challenge series: https://designcourse.com/app/foundations/2026-uiux/ #paper #ai #uiux - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me ## Транскрипт ### Segment 1 (00:00 - 05:00) [] paper perhaps one of the hottest design tools right now for AI native designers AI agenic workflows and it allows you to design here in a canvas and port it to code but also do the opposite so it's a birectional complete workflow I'm going to show you how to use it how to install it and also this is a part of my 30-day AI native design series where you're challenged to take this design right here which we worked on in the previous challenge and use paper to integrate and complete this section of the design. So before we get to that challenge and how you actually participate, let me show you how to actually install paper. So here at paperdesign, go to the doc section and the first thing you want to do is download paper desktop app. All right, just a simple quick app. Then are you using cursor? Are you using cloud code? Are you using codeex copilot? Whatever. Me I use cloud code. Extremely easy to install. You just take this line right here after typing claude and getting it running up in your terminal. Paste it in and it will install it. And you'll know it works if you type in this command slashmcp and you'll see paper right there. You can see pencil as well which we'll cover here in the near term future. Okay. So this is the paper app. Okay. You have to have it open and then you also obviously want to open cursor cloud code and have the MCP connected. So, what is the next step? Well, you can actually use paper in several different ways. Um, you can start off a design in here by using the frame tool, creating your layout. They have a familiar area here. So, if you already understand auto layout from Figma, you'll understand how to structure layouts from scratch here by hand if you want. We're not going to take that approach. We're going to basically ask Claude or whatever, you know, if you're using cursor, whatever. We're going to ask it to use paper, the MCP server, and design a layout for us. And then we're going to elevate the design and make custom changes to it here in paper and then port it back. So now we have to go ahead and ask it to create a layout for some type of fictional business. Now, before I do that, I wanted to do a quick experiment at coolers. co. This has been around forever, but if you click on start the generator and then you hit the space bar, you can come up with different themes or rather the app does itself. And then you can customize the colors if you want yourself. So for me, I'm just going to go ahead and keep on. Okay, this looks interesting. This is like a lighter color scheme. It's kind of it's colorful, etc. What I'm going to do is just print screen. And it has the color codes at the bottom which we can paste in to claude code or whatever you're using as context. And we're going to ask it just to use these colors in order to create a layout when it creates a layout for some type of fictional business. So for the prompt, I'm actually going to use the front-end design skill here in Clawed Code. It usually produces better results, but if you don't get too specific with it, it'll prod it'll usually produce a really cookie cutter result. So, we'll see what it creates and then we're going to elevate that design in paper. So, the first thing I'll do is put forward/frontend design. As you can see here, I believe it ships with cloud code automatically right now, but if not, there is a video I'll link in the description that kind of shows you how to get this integrated as a skill. Now, forward/frontendes. Now, I'm going to specify the prompt. So, here is a very short prompt. Use the paper MCP server. This is very important to request that to design a modern SAS layout for a fictional business that utilizes AI technology for quality assurance across product manufacturing. Sounds boring. It should be designed for desktop and have a navbar in a hero section. And that's it. I want you to use the color scheme. The hex values are shown at the bottom of each color attached in the screenshot which is right here. Now, you don't have to use all the colors. Just ensure proper contrast and that it looks good. That is it. So, I'm going to go ahead and hit enter, and we'll start seeing it spit out information about accessing the paper MCP server, and we can actually load up paper and see what's happening in real time. Now, unfortunately, there's an issue on Windows 11 with my computer specifically where it does this flashing thing. I've already been in contact with the founder, told him about it. You probably will not run into this issue. Okay. And this is what it came up with. It's in my opinion pretty mid and you can really kind of just tell that hey AI generated this for the most part. So we're going to go ahead and use paper to make adjustments to this design visually and then port it back over. So what am I going to do? The first thing I'm going to like increase this just a bit. Okay, give myself some white space over here and next step. So it's like okay you have to get familiar with understanding you know the layers over here. this section. You could see this layers over here. And we can see we have a hero section with two columns inside of it, left and right. I don't want that one. I just kind of want to have an area that's like this um that kind of takes ### Segment 2 (05:00 - 10:00) [5:00] out and just it's a centered column section. And we're going to have an interesting section behind it. But first, all right, we want to take this and we're going to go ahead and center all the text and also increase the width of this. Now up here you can see we have width is set to auto. Now we can also have a fixed. We can have it fill the container or we can have a fit content. So fit content is the same thing. Fill container. Okay. So it it's going to fill this available space in here. And then I'm going to go ahead and take this and right here we could see it's already set up as a flexbox container with a gap of 32 between the elements. So, if we, you know, adjust this, you'll see how everything kind of flies apart. And I want to go ahead and make sure everything's kind of centered in that space. Now, everything isn't working perfect just yet because we have to make some other adjustments. So, if things aren't behaving the way you expect, just keep on inspecting further. So, for instance, this area, um, let's go ahead and center that. And again, I'm just clicking the center stuff. This is text, so we can center that text. Okay. So, that's going good. this over here. Let's go ahead and center this stuff and then I will center this as well. All right. So, I can rightclick and we can hit frame selection. Ah, that automatically worked. So, you just have to be willing to experiment with, you know, all these these, you know, capabilities of the layout. And this is the same thing with Figma like you have to understand how to work with the layout. Um, because this is trying to be a representation of the actual browser in the canvas. So, it can be a little bit tricky moving things around and you're not sure how they all work. So, just spend time with that. Next, I'm going to go ahead and take a screenshot of this um just to integrate some of these colors in a way that I think might be better than whatever it integrated because notice it did take some of the colors, but not all of them. Um not to say that we necessarily need to. Um but I just want to make some just show you just the process of making some adjustments additionally here. So, um, for instance, like if we want to have the header section to have a specific background color. So, I'm going to add I'm going to take this fill right here, and we're going to use that very top one. It is FC6471. Okay, that looks ugly as heck because the text now is thrown off, right? So, I'm going to take this area uh selection colors. We're just going to make this white. We're going to make the black one white as well. And perhaps if we want to, we can take it control leftclick to select it and then make it bold for that one. Okay. Spectral AI. I want to make this black or I'm going to make that black part white. This I really don't like the gradient. So yes, we obviously have gradient support here. I maybe I'll make this one light. This is just some type of generic weird logo, which, you know, no big deal. I'm not too concerned about it. We'll move this over. Okay. And then finally over here, this stuff, this contrast is terrible. Um, so maybe we can use make this white. This one can go black. And then this text right here, we'll make it light. White light, too. Okay. So, as you can see, it's very quick and easy to make adjustments. Um, now let's say for instance we want to take this background and add something cool like some type of shader effect. So right over here you click here you can see shaders. This is one of the really cool things about this tool is we can create very interesting unique shaders of some sort. So like for instance right here this smoke ring. All right let's try that. I'm going to click on it. Now when you do this it's going to add it into just another element into the DOM the document object model. This is, you know, um, front-end developer stuff that you may not have heard of before. This is where it help kind of helps to have a technical background. So, what we want to do is we want to make it position absolute right there. So, when you do this, it kind of breaks outside of the convention box model as it's called. And we can move this thing anywhere. Although, be careful because if you hover over certain things, it'll place it into it. Well, we want to put this in and structure it so that it's at the very top left and right and it fills out this entire hero section. So, to do that up here, first we're going to put the X position at zero and then the Y position at zero as well. And then the width we're going to make 100% and the height we're going to make 100%. Now, when we do this, we hide everything, right? Well, unfortunately, for some reason, there's no Zindex that I can see here. Now z-index is another is a CSS property on position absolute elements where you control the stack uh the the flow of it u not the flow but the order it should be underneath all of this stuff and so unfortunately I don't see that as an option but we can go ahead after we import it into cloud code and back into ### Segment 3 (10:00 - 14:00) [10:00] our browser code HTML and CSS we can make that fix there but for now we can actually still see this if we make the adjustments right here to the parameters. So all the shaders have their individual parameters that they can be affected right over here. So you can change the speed and all this other stuff. Now you can see right here we have a fill that is black. Now if we just change this to 0%. Ah okay. So now we can see stuff behind it. We can't really see the foreground. Well the foreground right here. Let's just uh let's just take this color and we'll grab our smoke ring. We're going to change the fill to that color. Oh no, the foreground rather to that color. Oh, okay. That still looks ridiculous, right? So, let's change some of these other uh elements here. So, we have scale, we have thickness. Oh, that's interesting. We have radius. So, as you can see, I mean, this is so incredibly fun to play around with. So, this actually kind of looks cool. I played around with a little bit. Yeah, I'm kind of happy with it. Um, let's go ahead and experiment with a different shader, though. What's really cool here is if we change any of these values right here to like 0% opacity. Ah, we can kind of see behind it. Now, of course, I don't want that to be the final end result in the browser. So, we will use uh the Z-index property once we can fix that there because I do not see where I can adjust it here yet. All right. So, I'm going to go ahead with this and we'll see what it looks like after we can fix the Z-index issue. So, I think we'll go ahead and just use this one right here. So, what we do is we select it in order to get this, you know, back into cursor or, you know, cloud code or whatever. And then we go back to our terminal. So, here's what I'm going to say. Use the paper MCP server to translate the selected design and paper to working vanilla HTML CSS and JavaScript in an index. html file. Ensure that everything is translated perfectly. I've attached a screenshot of the shader settings to ensure you get it right. This part's important because I sp spoke with the founder and right now it's not passing all the necessary information um at least for my initial tests uh for shaders. Now let's go ahead and hit enter and we'll see what it does. All right, and it's done. Here we go. Here it is. Now, it's not a 100% perfect reflection, especially the uh the shader that you can see in the background. Mine looks um a little bit different kind of like larger, you know, flowing lines. And what you would have to do is just kind of do a screenshot here. Make sure you're screenshotting the gradient settings and the mesh gradient settings or whatever you used and try to get it to iteratively improve it. Now, I believe that this will be fixed very soon as they um properly integrate the shaders and you know how the MCP handles translating that information. So now what I want you to do is go to designcourse. com. It's linked here in the bottom to join up with the 30-day AIA native designer native AI designer challenge series. And I want you to use paper. There's a 100% free account in order to finish this design right here. Now this is the one that we worked on previously in the last challenge. And in this darker section that you can see right here says your design here. I want you to use paper using the same exact uh you know flow that we just did. Download the asset that's right here on the challenge page which has you know this HTML that you see right here and complete the design underneath using paper is the challenge page here in Figma. You can reference this if you wish. You don't have to use it. But here's the instructions. Just create a free account. Download the index. html asset on the challenge page. Use paper to finish the design in the empty space on the section of this right here. This is where your design goes like this. You can design it however you want and you can say whatever you want. It just needs to be seamless. And then you're also free to do, you know, to do what you want next se section. And you're free to integrate animation interactivity if you do upload a video capture for your submissions since our system can handle video uploads. And I'm really interested to see what you guys have. I'll be doing reviews of about eight to 10 of them like I've been doing for most of the challenge. videobased reviews and we'll just see what you come up with. Uh the future of design is really cool. You know, we have a lot of these tools coming out now that are AI agenic workflows. Paper's one of them, pencil's another, and we're going to see a lot more, I think. So, we're going to see who comes up to the top. Could it be Figma? I don't know. We'll see. I'll see you all very soon. Goodbye.