00:00:00Paper, perhaps one of the hottest design tools right now for AI-native designers,
00:00:05AI-agenic workflows.
00:00:06And it allows you to design here in a canvas and port it to code,
00:00:11but also do the opposite.
00:00:13So it's a bi-directional complete workflow.
00:00:15I'm going to show you how to use it, how to install it.
00:00:17And also, this is a part of my 30-day AI-native design series,
00:00:22where you're challenged to take this design right here,
00:00:25which we worked on in the previous challenge,
00:00:27and use paper to integrate and complete this section of the design.
00:00:32So before we get to that challenge and how you actually participate,
00:00:36let me show you how to actually install paper.
00:00:38So here at paper.design, go to the Docs section.
00:00:41And the first thing you want to do is download paper desktop app, all right?
00:00:46Just a simple, quick app.
00:00:48Then, are you using cursor?
00:00:50Are you using Clod Code?
00:00:51Are you using Codex, Copilot, whatever?
00:00:54Me, I use Clod Code.
00:00:55Extremely easy to install.
00:00:57You just take this line right here after typing Clod
00:01:00and getting it running up in your terminal,
00:01:03paste it in, and it will install it.
00:01:05And you'll know it works if you type in this command, /mcp,
00:01:10and you'll see paper right there.
00:01:13You can see pencil as well, which we'll cover here in the near-term future.
00:01:17Okay, so this is the paper app, okay?
00:01:19You have to have it open.
00:01:21And then you also, obviously, run open cursor, Clod Code,
00:01:24and have the MCP connected.
00:01:26So, what is the next step?
00:01:27Well, you can actually use paper in several different ways.
00:01:31You can start off a design in here by using the frame tool,
00:01:35creating your layout.
00:01:37They have a familiar area here.
00:01:39So, if you already understand Auto Layout from Figma,
00:01:41you'll understand how to structure layouts from scratch here by hand if you want.
00:01:46We're not going to take that approach.
00:01:48We're going to basically ask Clod or whatever, you know,
00:01:52if you're using cursor or whatever,
00:01:53we're going to ask it to use paper, the MCP server,
00:01:58and design a layout for us.
00:02:00And then we're going to elevate the design
00:02:02and make custom changes to it here in paper,
00:02:05and then port it back.
00:02:06So, now we have to go ahead and ask it to create a layout
00:02:09for some type of fictional business.
00:02:10Now, before I do that, I wanted to do a quick experiment at coolers.co.
00:02:14This has been around forever.
00:02:16But if you click on Start the Generator,
00:02:18and then you hit the space bar,
00:02:20you can come up with different themes,
00:02:22or rather the app does itself.
00:02:24And then you can customize the colors if you want yourself.
00:02:28So, for me, I'm just going to go ahead and keep on,
00:02:31okay, this looks interesting.
00:02:32This is like a lighter color scheme.
00:02:33It's kind of color, it's colorful, etc.
00:02:36What I'm going to do is just print screen.
00:02:39And it has the color codes at the bottom,
00:02:41which we can paste in to Clod code or whatever you're using as context.
00:02:46And we're going to ask it just to use these colors in order to create a layout
00:02:51when it creates a layout for some type of fictional business.
00:02:53So, for the prompt, I'm actually going to use the front-end design skill here in Clod code.
00:02:59It usually produces better results.
00:03:01But if you don't get too specific with it,
00:03:04it'll usually produce a really cookie cutter result.
00:03:08So, we'll see what it creates,
00:03:10and then we're going to elevate that design in paper.
00:03:12So, the first thing I'll do is put forward slash front-end design,
00:03:15as you can see here.
00:03:17I believe it ships with Clod code automatically right now,
00:03:19but if not, there is a video I'll link in the description
00:03:22that kind of shows you how to get this integrated as a skill.
00:03:25Now, forward slash front-end design.
00:03:28Now, I'm going to specify the prompt.
00:03:29So, here is a very short prompt.
00:03:32Use the paper MCP server.
00:03:34This is very important to request that.
00:03:36To design a modern SaaS layout for a fictional business
00:03:39that utilizes AI technology for quality assurance across product manufacturing.
00:03:43Sounds boring.
00:03:43It should be designed for desktop and have a nav bar and a hero section.
00:03:47And that's it.
00:03:47I want you to use the color scheme.
00:03:49The hex values are shown at the bottom of each color attached in the screenshot,
00:03:53which is right here.
00:03:54Now, you don't have to use all the colors.
00:03:56Just ensure proper contrast and that it looks good.
00:03:59That is it.
00:04:00So, I'm going to go ahead and hit enter,
00:04:02and we'll start seeing it spit out information about accessing the paper MCP server,
00:04:07and we can actually load up paper and see what's happening in real time.
00:04:11Now, unfortunately, there's an issue on Windows 11 with my computer specifically,
00:04:15where it does this flashing thing.
00:04:16I've already been in contact with the founder,
00:04:18told him about it, you probably will not run into this issue.
00:04:21Okay, and this is what it came up with.
00:04:23It's, in my opinion, pretty mid,
00:04:25and you can really kind of just tell that,
00:04:27"Hey, AI generated this for the most part."
00:04:30So, we're going to go ahead and use paper to make adjustments to this design visually,
00:04:34and then port it back over.
00:04:36So, what am I going to do?
00:04:37First thing, I want to like increase this just a bit.
00:04:39Okay, give us self some white space over here.
00:04:42And next step, so it's like, okay,
00:04:45you have to get familiar with understanding, you know, the layers over here.
00:04:48This section, you could see this layers over here,
00:04:51and we can see we have a hero section with two columns inside of it, left and right.
00:04:56I don't want that one.
00:04:57I just kind of want to have an area that's like this,
00:05:01that kind of takes out in just, it's a centered column section,
00:05:05and we're going to have an interesting section behind it.
00:05:08But first, all right, we want to take this,
00:05:11and we're going to go ahead and center all the text,
00:05:15and also increase the width of this.
00:05:17Now, up here, you can see we have width is set to auto.
00:05:20Now, we can also have a fixed,
00:05:23we can have it fill the container,
00:05:25or we can have a fit content.
00:05:26So, fit content is the same thing.
00:05:28Fill container.
00:05:29Okay, so it's going to fill this available space in here,
00:05:33and then I'm going to go ahead and take this,
00:05:36and right here,
00:05:38we could see it's already set up as a flexbox container with a gap of 32 between the elements.
00:05:44So, if we, you know, adjust this,
00:05:46you'll see how everything kind of flies apart.
00:05:48And I want to go ahead and make sure everything's kind of centered in that space.
00:05:53Now, everything isn't working perfect just yet,
00:05:55because we have to make some other adjustments.
00:05:57So, if things aren't behaving the way you expect, just keep on inspecting further.
00:06:01So, for instance, this area.
00:06:04Let's go ahead and center that.
00:06:06And again, I'm just clicking this center stuff.
00:06:08This is text, so we can center that text.
00:06:10Okay, so that's going good.
00:06:12This over here, let's go ahead and center this stuff.
00:06:15And then I will center this as well.
00:06:18All right, so I can right-click, and we can hit Frame Selection.
00:06:21Ah, that automatically worked.
00:06:24So, you just have to be willing to experiment with, you know, all these, you know, capabilities of the layout.
00:06:30And this is the same thing with Figma.
00:06:31Like, you have to understand how to work with the layout,
00:06:35because this is trying to be a representation of the actual browser in the canvas.
00:06:40So, it can be a little bit tricky moving things around,
00:06:43and you're not sure how they all work.
00:06:44So, just spend time with that.
00:06:46Next, I'm going to go ahead and take a screenshot of this,
00:06:49just to integrate some of these colors in a way that I think might be better than whatever it integrated.
00:06:55Because, notice, it did take some of the colors, but not all of them.
00:06:58Not to say that we necessarily need to.
00:07:00But I just want to make some, just show you just the process of making some adjustments additionally here.
00:07:05So, for instance, like, if we want to have the header section to have a specific background color.
00:07:10So, I'm going to add, I'm going to take this fill right here,
00:07:13and we're going to use that very top one.
00:07:15It is FC6471.
00:07:19Okay, that looks ugly as heck, because the text now is thrown off, right?
00:07:23So, I'm going to take this area, selection colors.
00:07:27We're just going to make this white.
00:07:28We're going to make the black one white as well.
00:07:31And, perhaps, if we want to, we can take it, CTRL left click to select it,
00:07:35and then make it bold for that one.
00:07:37Okay, spectral AI.
00:07:39I'm going to make this black, or I'm going to make that black part white.
00:07:43This, I really don't like the gradient.
00:07:45So, yes, we obviously have gradient support here.
00:07:48Maybe I'll make this one light.
00:07:51This is just some type of generic weird logo, which, you know, no big deal.
00:07:56I'm not too concerned about it.
00:07:57We'll move this over.
00:08:00Okay, and then, finally, over here, this stuff, this contrast is terrible.
00:08:04So, maybe we can use, make this white.
00:08:11This one can go black, and then this text right here will make it light too.
00:08:20Okay, so, as you can see, it's very quick and easy to make adjustments.
00:08:23Now, let's say, for instance, we want to take this background and add something cool,
00:08:29like some type of shader effect.
00:08:30So, right over here, you click here, you can see shaders.
00:08:34This is one of the really cool things about this tool,
00:08:38is we can create very interesting, unique shaders of some sort.
00:08:42So, like, for instance, right here, this smoke ring.
00:08:45All right, let's try that.
00:08:46I'm going to click on it.
00:08:47Now, when you do this, it's going to add it into just another element into the DOM,
00:08:51the document object model.
00:08:53This is, you know, front-end developer stuff that you may not have heard of before.
00:08:57This is where it kind of helps to have a technical background.
00:09:00So, what we want to do is we want to make it position absolute right there.
00:09:05So, when you do this, it kind of breaks outside of the convention box model, as it's called.
00:09:09And we can move this thing anywhere, although be careful,
00:09:11because if you hover over certain things, it'll place it into it.
00:09:14Well, we want to put this in and structure it so that it's at the very top left and right,
00:09:20and it fills out this entire hero section.
00:09:23So, to do that up here, first, we're going to put the X position at zero,
00:09:28and then the Y position at zero as well.
00:09:31And then the width, we're going to make 100%, and the height, we're going to make 100%.
00:09:35Now, when we do this, we hide everything, right?
00:09:39Well, unfortunately, for some reason, there's no Z index that I can see here.
00:09:42Now, Z index is a CSS property on position absolute elements
00:09:47where you control the stack, the flow of it.
00:09:50Not the flow, but the order.
00:09:52It should be underneath all this stuff.
00:09:54And so, unfortunately, I don't see that as an option,
00:09:57but we can go ahead after we import it into Clod code and back into our browser code, HTML and CSS,
00:10:04we can make that fix there.
00:10:05But for now, we can actually still see this if we make the adjustments right here to the parameters.
00:10:10So, all the shaders have their individual parameters that they can be affected right over here.
00:10:15So, you could change the speed and all this other stuff.
00:10:18Now, you can see right here, we have a fill that is black.
00:10:21Now, if we just change this to 0%, ah, okay, so now we can see stuff behind it.
00:10:26We can't really see the foreground.
00:10:28Well, the foreground right here, let's just take this color and we'll grab our smoke ring.
00:10:36We're going to change the fill to that color.
00:10:39Oh, no, the foreground, rather, to that color.
00:10:43Oh, okay, that still looks ridiculous, right?
00:10:46So, let's change some of these other elements here.
00:10:50So, we have scale, we have thickness.
00:10:54Oh, that's interesting.
00:10:56We have radius.
00:10:58So, as you can see, I mean, this is so incredibly fun to play around with.
00:11:03So, this actually kind of looks cool.
00:11:04I play around with a little bit.
00:11:07Yeah, I'm kind of happy with it.
00:11:09Let's go ahead and experiment with a different shader though.
00:11:11What's really cool here is if we change any of these values right here to like 0% opacity,
00:11:18we can kind of see behind it.
00:11:19Now, of course, I don't want that to be the final end result in the browser.
00:11:23So, we will use the Z index property once we can fix that there
00:11:27because I do not see where I can adjust it here yet.
00:11:30All right, so, I'm going to go ahead with this
00:11:32and we'll see what it looks like after we can fix the Z index issue.
00:11:35So, I think we'll go ahead and just use this one right here.
00:11:39So, what we do is we select it in order to get this, you know,
00:11:43back into cursor or, you know, Claude code or whatever.
00:11:46And then we go back to our terminal.
00:11:48So, here's what I'm going to say, use the paper MCP server
00:11:50to translate the selected design and paper to working vanilla HTML,
00:11:53CSS, and JavaScript in an index.html file.
00:11:56Ensure that everything is translated perfectly.
00:11:58I've attached a screenshot of the shader settings to ensure you get it right.
00:12:01This part's important because I spoke with the founder
00:12:04and right now it's not passing all the necessary information,
00:12:08at least for my initial tests for shaders.
00:12:11Now, let's go ahead and hit enter and we'll see what it does.
00:12:14All right, and it's done.
00:12:15Here we go.
00:12:16Here it is.
00:12:17Now, it's not a hundred percent perfect reflection, especially the shader
00:12:22that you can see in the background.
00:12:24Mine looks a little bit different.
00:12:28Kind of like larger, you know, flowing lines.
00:12:31And what you would have to do is just kind of do a screenshot here.
00:12:34Make sure you're screenshotting the gradient settings
00:12:36and the mesh gradient settings or whatever you use
00:12:38and try to get it to iteratively improve it.
00:12:42Now, I believe that this will be fixed very soon
00:12:44as they properly integrate the shaders and, you know,
00:12:47how the MCP handles translating that information.
00:12:51So now, what I want you to do is I want you to go to designcourse.com.
00:12:56It's linked here in the bottom to join up with the 30-day AI native designer,
00:13:01native AI designers challenge series.
00:13:04And I want you to use paper.
00:13:06There's a hundred percent free account in order to finish this design right here.
00:13:11Now, this is the one that we worked on previously in the last challenge.
00:13:14And in this darker section that you can see right here,
00:13:17it says your design here,
00:13:18I want you to use paper using the same exact flow that we just did.
00:13:24Download the asset that's right here on the challenge page,
00:13:27which has, you know, this HTML that you see right here
00:13:30and complete the design underneath using paper.
00:13:33It's the challenge page here in Figma.
00:13:35You can reference this if you wish.
00:13:38You don't have to use it.
00:13:39But here's the instructions.
00:13:40Just create a free account.
00:13:42Download the index.html asset on the challenge page.
00:13:45Use paper to finish the design in the empty space on section of this right here.
00:13:49This is where your design goes like this.
00:13:52You can design it however you want and you can say whatever you want.
00:13:54It just needs to be seamless.
00:13:56And then you're also free to do, you know, to do what you want next section
00:13:59and you're free to integrate animation interactivity.
00:14:02If you do, upload a video capture for your submission
00:14:04since our system can handle video uploads.
00:14:07And I'm really interested to see what you guys have.
00:14:09I'll be doing reviews of about 8 to 10 of them like I've been doing for most of the challenge,
00:14:13video based reviews, and we'll just see what you come up with.
00:14:16The future of design is really cool.
00:14:18We know we have a lot of these tools coming out now that are AI-agenic workflows.
00:14:24Paper is one of them, pencil is another, and we're going to see a lot more, I think.
00:14:28So, we're going to see who comes up to the top.
00:14:30Could it be Figma?
00:14:31I don't know.
00:14:32We'll see.
00:14:33I'll see you all very soon.
00:14:34Goodbye.