00:00:00Hey, today's video is about paper. Paper is basically Figma but for Claude code or
00:00:05cursor. Here you can see an example. We have paper desktop running but then you can
00:00:10control everything via Claude code which is what you're seeing over here and it's
00:00:14also really nice because you can very easily convert between your components
00:00:19and your code. You can see companies like Vercel use it, Z, Dub. So a lot of really
00:00:24cool products are using it. This is what the app looks like when you get started.
00:00:28This is the demo project you'll get for the first time. You will be able to
00:00:31download the app from paper.design/downloads and then the next step
00:00:35what you need to do is install an MCP server. If you want to install this in
00:00:40cursor you just click this button which I actually did already but now we're
00:00:43actually going to try it out in Claude code. So we're gonna copy this over. This
00:00:47is going to add the paper MCP server scope user which means it's for every
00:00:53project on a computer can access it. Usually it's scoped to the project when
00:00:57you add an MCP server and here you can see the transport is actually local. This
00:01:01is going to go and connect to the paper desktop app. So I'm gonna go and install
00:01:06it here and now that we have it installed we're gonna open up Claude. I've opened up
00:01:11four windows over here in Cmux. It's basically ghosty running in the Tmux
00:01:17style where we have four different windows so we're gonna do a few
00:01:19different demos. I figured why not have a few different windows. So what we're gonna
00:01:22do next is we're going to go and copy this prompt over to a terminal. So we're
00:01:28gonna do an expense tracking app in paper. Let's see what that looks like. You can
00:01:33see a demo like this is gonna come out but we'll see what that looks like for
00:01:36real. In the meantime I'm actually gonna run another few tasks running. So create
00:01:40a demo landing page for me in paper and make it wow me. Let's see if it does a
00:01:44good job. Create a dashboard for me for a finance app. So let's go and do that and
00:01:48create the design system for me for a social Twitter like app. So I'm gonna run
00:01:53all of these in parallel. I actually don't know what they're gonna come out as so
00:01:56let's see how that works. Over here you can see the previous run that we have
00:02:00going. We have a design brief, a palette. This is Claude code thinking through
00:02:04things adding it to the welcome to paper app that we have but let's go to the
00:02:08bottom. Okay it's finished. Let's see what this looks like. So we're gonna zoom out
00:02:13and see if we have it somewhere here. Oh so we can see our other apps are
00:02:17actually being built and here you can see our expense entry app which is really
00:02:22cool. The design is pretty solid for that and actually when I ran it before I think
00:02:25it came out with a slightly different app. Here you can see these others actually
00:02:30all working in parallel and the cool thing about this this paper app is
00:02:34basically its figma. So everything you might be used to from figma you can see
00:02:39it looks very similar. Here I can go and change things and I can actually go back
00:02:43and make some edits. Remove the upload section put something else there instead.
00:02:53Let's see what happens when we do that and you can see all of these are still
00:02:56running in the background. If we go back here so hopefully that upload section
00:03:00will be removed. You can see our landing page it's looking quite decent. Design
00:03:04with intention create without limits. By the way here we can see all our other
00:03:09components are coming together. The design system looks really cool and professional.
00:03:12I feel like you could have paid a design of thousands of dollars to give you this
00:03:16exact same thing. Pretty cool and nice and of course it can be completely edited
00:03:20just like in figma. This is what the landing page ended up looking like and
00:03:24we're gonna go and put this into react in a second with tailwind. Here's the
00:03:28dashboard and the other task is also complete. Here you can see split width so
00:03:33that was gone and adjusted as well. So you have these really professional looking
00:03:36designs and all we did was prompt it into existence and for all of this we can use
00:03:42the existing ecosystem of skills that Claude code or cursor already provide us
00:03:46with so we could use the front-end design skill to go and design all of this if we
00:03:50wanted as well. So I'm gonna ask for an HTML page with this design now in my
00:03:54browser so let's see how that works and going back to paper I'm gonna show you a
00:03:58few other things. So over here I have this component and what I can actually do is I
00:04:03can do copy as tailwind or copy as react CSS so I can usually just copy and paste
00:04:08it in but I think what we'll also see in a second is that Claude code can go and
00:04:13load this up for us as well so we'll be able to open it in a browser and wow
00:04:17there you can see it's actually gone and done it this is actually pretty amazing
00:04:20here you can see the button I mean yeah this is just great honestly if we go and
00:04:24inspect the page let's see what actually came out so you here you can see this
00:04:29just went and used HTML and CSS but we could also have made it do it with react
00:04:35and tailwind you can go and build things like you can in figma it's the exact
00:04:40same thing here you can see on the side we can go and change things we can change
00:04:44the color this is exactly the same as figma basically but I went and put
00:04:48together this component as well because I wanted to see what it would look like if
00:04:51I just copy and paste it into a regular app and here you can see this is exactly
00:04:55what it went and did it came out exactly as I wanted basically and here you can
00:05:00see what was copied and pasted in this is the background component I'll just show
00:05:05you again as I did this before so I'm gonna do copy as tailwind I'm gonna go
00:05:10into cursor and I'm just gonna paste it in and you can see this is what it gave
00:05:14me now I'm gonna undo some of this and this is actually a component that I had
00:05:20pasted in before for the expense tracking app you can see a top bar amount hero and
00:05:26so on so this is actually react and tailwind for basically the same thing as
00:05:29we just did and here you can see this is the actual react code in our app this is
00:05:34another variant this is when I prompted it 20 minutes ago and so this is version
00:05:40one this is the other version where we did it with regular HTML and CSS and
00:05:44both came out very well I actually want to see how the other apps come out if we
00:05:49go and do that in Claude code so I'm asking for an HTML version of all the
00:05:53screens that we designed just now and I also just went and did is I did right
00:05:58click copy as react CSS I went to cursor I pasted it in and this is a real app you
00:06:04can see it's running at localhost 3001 this is part of inbox zero just a demo
00:06:09page I added and you can see this is working perfectly as well which is really
00:06:13nice first time it's not actually responsive but other than it's pretty
00:06:18solid here you can see it needs some work to be responsive but I think the concept
00:06:22at least is really cool and this is actually the HTML version that just
00:06:26loaded up that we also prompted and this is somewhat more responsive it starts to
00:06:33struggle a bit over here but it's at least it's better than the other version
00:06:36so yeah that's pretty cool now I want to show you is that you can also get it to
00:06:41generate images so if you do command I let's see if we can do that and we're
00:06:46gonna ask it to generate an image for us so the prompt I've written is to create
00:06:50a beautiful ad for inbox zero and AI email assistant it helps you reach inbox
00:06:54zero fast you can see here there are different models you can use nano banana
00:06:59Pro let's do a variety pack for this first hopefully I'll be able to do it and
00:07:05yeah you can see it's gone and started creating four images and I want to
00:07:10actually try again because I'm curious what happens if we can do nano banana Pro
00:07:14let's do create image so there's another image being created and I hope soon
00:07:19they'll come out oh here you can see the ads are starting which yeah I mean they
00:07:25look decent obviously they need some work but as sort of a first attempt that's
00:07:29pretty cool let's see this one inbox zero you know you could find designers that
00:07:35do worse designs than that and then this one probably of the four I like this one
00:07:39the best but yeah you can see obviously that was one-shotted you could iterate on
00:07:43that quite a lot let's see what nano banana Pro comes up with that one might
00:07:47be the most impressive yeah you're fast track to calm the AI email assistant I
00:07:51think that's pretty solid honestly as a one-shot that's not a bad graphic I also
00:07:55find it interesting like it knows the logo like that has AI picked up on the
00:08:00logo for inbox zero or it's just random that it happens to look quite like our
00:08:04logo text now before we round off I want to show you two more things if I click on
00:08:09this image and I hit s so I can give different effects so here you can see
00:08:13this water effect of this image if I hit s again there is this liquid metal I'm
00:08:18actually not sure how this works is I'm not sure it's related to our image at all
00:08:21but you can see you can create these really cool effects and you can actually
00:08:24use them in your landing page here's like another version of that image that we
00:08:27created and then one more thing which is nice is that the colors supposedly are
00:08:33consistent and accurate paper has the world's first uniform color picker that
00:08:37makes colors easy and so if people aren't familiar with this you can have one color
00:08:41in figma and then another color on your website and it's not one-to-one it's
00:08:45actually quite annoying we had this with the blues on our website where figma was
00:08:48showing one thing and website was showing something else even though it was
00:08:52supposedly one-to-one on the hex code of what the color was supposed to be and so
00:08:56if you're someone that's run into this issue like we did that's quite a nice
00:08:59feature to have as well and the very last thing I want to show you this create a
00:09:04design system in paper from our existing code base and you can see it started to
00:09:08analyze the code bases is just regular clawed code you can see it's grabbed our
00:09:12fonts now we actually struggled because apparently we've hit the weekly MCP tool
00:09:17limit in this video for paper Pro so we can't actually see what that would have
00:09:20looked like but in short like we would have been able to say our existing code
00:09:23base and then see what that looks like in paper and then we could have edited it in
00:09:28paper and then put the code back into our project so that's a really really nice
00:09:32feature I think one place where this comes up a lot where it would have been
00:09:35really helpful for us when we're doing these demo design components like we're
00:09:39doing a screenshot for a landing page typically what we'll do is what's easier
00:09:43is to just take a screenshot but what I often want to do is edit that a bit edit
00:09:47the text that's on the page hide some of the real emails which are there and having
00:09:50it in fig more papers just so much easier because I can just type and edit exactly
00:09:55as needed and then it's not a screenshot I can actually export it as a real image
00:09:58a PNG or JPEG or whatever it is here's that Twitter social app that we were
00:10:03building and these also really cool designs but anyway hope you enjoyed the
00:10:07video hope it wasn't too much jumping about we were running a few different
00:10:10things in parallel this is how I'm coding a lot these days and so maybe that
00:10:14leaked into the video a bit but yeah I hope you found it helpful let me know
00:10:17what you decide to build with paper I think is a really useful tool I could see
00:10:20myself upgrading to the pre version of it quite soon as well and be sure to
00:10:24subscribe for future videos