Paper is a new design tool, but the

biggest value I get out of it is that it

feels like an extension of code. I'm

able to work as a designer almost like

an engineer directly inside something

that still feels like a design tool. If

you're designer, a head of design, or a

founder running a product and trying to

figure out how design fits into this new

process, this one's for you. Hey, I'm

Diane. I'm the co-founder of the Design

Project. We help over 50 B2B SAS teams

ship products faster with AI. Right now,

we're heads down building AI managed

design systems. Our customers have been

acquired by Nvidia, Slack, and Mr.

Beast. And if you're interested in

learning more about how we can help you

rethink how you build product, there's a

link in the description below to get in

touch. Okay, so today I'm going to walk

you through how I actually use paper in

my day-to-day workflow. Not just the

pixel pushing, but how I orchestrate an

agent to do the pixel pushing alongside

with me. We go back and forth until we

land on something and then the part that

actually matters, I can take it straight

into code and then I can actually ship a

PR. The shift is my job isn't pixel

pushing anymore. And yes, design is way

more than pixel pushing, but it did take

up a big chunk of my time. Now it's more

directing the work, reviewing it, and

getting it into their product faster

than a normal design to dev handoff ever

could. I'll also show you Paper's token

system. It's brand new. They just

launched it and it's super cool for

keeping everything I build aligned to

our actual repo. I'm also going to test

the exact same thing in Figma and then

you can see live side by side exactly

what paper can do and then what Figma

can't. Let's get started. Okay, so here

we are in paper just to show you around

um really quickly. We're going to be

working in this folder called carrot.

We're going to be working on a new

carrot project and I'm going to kind of

show you how I start to set it up in

general. So I'm going to go to my CLI

whatever I use. I use conductor. Um it's

one of my favorites. Um I'll link to a

video below if you want to see a little

bit more about my favorite tools. But

what I'm going to do is basically come

here and say

I want to create a new project in paper

in the carrot folder. And the first

thing I want to do is extract a design

system from the current carrot product

and repo.

So let's hit create. So it's going to

start this project.

And let's hope I get it because it's

carrot, but it's actually cr. So, let's

see what happens. Um, but what's really

cool is I'm actually just going and

telling it how to navigate directly in

in paper and to create this file. So,

I'm jumping straight into it. But what

is super cool is I am telling it to

extract a design system. Something that

Paper just announced recently is they

now have tokens, which is something I've

been eagerly waiting for. So, um, this

is kind of showing you how they actually

are taking, you can actually create the

tokens directly into paper from the

codebase, and you'll kind of see it come

to life in a second, but it's really,

really cool. Um, and it's also just

going to spin up a whole design system

that I can start using to continue to

build on top of it. So, this is the

first place that I suggest starting. Um,

and you'll see why once we get into it.

What I also want to do is let's compare

this to Figma, for instance. So let's

let's kind of ask the same thing. Can

you use the Figma MCP and can you create

a new page in Figma and design a design

system based on the carrot design rules

that we have in the codebase. So let's

kind of compare the difference between

what Figma is going to come up with and

what what Carrot's going to come up

with. And we'll kind of come back to

this um as it goes. So what it's saying

is it's going into the repo and looking

at the current tokens so that it can

pull them out. It found a mismatch.

Okay, this is good to know. Okay, so J

mono with J used as a body override

going to affect the implementation

system in paper. Perfect. So we'll be

able to see the difference here. And

then some of the names are generated

differently. We'll take a look at that.

So it's saying dashboard primitives use

10 compact 10 to 13 operational controls

status colors and the widget

design brief for paper.

So it's defining the color palette we

have. So it's saying tube black, tube

soft, phosphorous white. This is how we

define them directly in the codebase. So

it's just pulling exactly what is

defined there. And then it's using the

types. So implemented to tokens using

the dice mono and J for longer body copy

creating a fresh paper file now. Okay,

so it says it's working on this. Let's

go back to the dashboard. Oh, here we

go. So it didn't actually put it in the

carrot file. Let's see if I can get it

to move it thereafter. Okay, so it's

just setting everything up. Let's give

it a minute. So let's go ahead and look

at what's happening in Figma.

So it looks like it is here. Let's open

Figma. Let's give it a minute. I think

it might be loading something. So, it

says it's starting to lay them out.

Okay, cool. Here we go. You see things

are happening. Um, this something I

think is really fun about paper is it

shows that things are happening that

that it's working on and you can kind of

see it come to life, which is always

super fun. And also, you can see that

there's an agent in here working as well

as me, which is really cool. Um, I they

also have a collaboration feature. Um,

so someone else can hop in here and you

can see them. Um, and I thought this was

fun. You also, if you do slash, you can

like talk to the person. Hey, YouTube.

Super cute. Um,

but it's basically similar to Figma

where many people can kind of hop in and

you can work on the same file in

general. Um, maybe some other things is

it has some nice features where like

shift hide. So, if you do command point,

you can hide the navigation and be able

to like dive deeper in this. So, we can

leave it like this for right now, which

is nice. Okay, so it looks like Figma

has created this design system board.

Um, here, let's actually go into Figma.

So, it's created this and now it says we

can click send to Figma.

So, now Okay, so now it's going to open

directly in Figma. Oh, interesting. Oh,

it actually went into a page that we

were already working on. Okay, perfect.

um for some early stuff we were doing

and then it created this

design system.

So it has colors. Okay, here let's take

a look here. Um so see it doesn't define

the tokens. Um so that's something that

I think is a miss. Okay, so it looks

like it's finished. Let's take a look.

So here we are. We have the product

design system. Um actually let's bring

back

um and see here. So it's actually gone

in and it's created

my token directly from here which is

really nice. Um

it also let's see

so it has type tokens and scale tokens.

Um and I can show you kind of what that

looks like in a minute. Okay. So, here's

all the color tokens here, which is

great. Um, and you see here it's defined

all of the radi. So, I can choose which

one I want. Um, same with

all of my spacing here is already

defined from my codebase. So, it just

created it directly for me. Um, so

spacing radius, dashboard status layer,

right? So, these I actually want to work

on at one point in the design. Um, okay.

What's the product actually ships?

So, it has these

pills and buttons, which is great. Um,

so what it doesn't have is it doesn't

have components, like you can't create a

component in the same way. You can do it

with code, um, which is cool. So, I

could just like keep editing and

changing these, but it's not exactly

like Figma quite yet where you can like

actually build out a component library

in the same structure and way. Um,

comment, popover shell. Um, yeah, this

one is actually one I want to play

around with in this video. Um, okay. And

how to build the next paper project from

this system. Okay. Interesting. It gave

us like a how-to. So, it's really

helping us to get to the next stage. So,

this is really cool. I think the biggest

takeaway here is like

that you can get a fully functioning

token styling so that you can just start

building directly. And then if we go

back and we compare to Figma,

um I think that there's more direct

rules that are associated here which

make it nice. Um we could potentially so

this is foundations

component primitives and then product

surface inventory which

is fun but I don't really need. So let's

keep going here. I want to continue to

design and build off of like a pro a

feature that I'm already working on. So,

I want to do um the comment popover

shell. I want to work through these a

little bit. So, what I'm actually going

to do is go back into

my codebase. I want to play around with

the comment popover shell. Can you

design all of the different states that

we have right now so I can adjust and

play around in paper?

Okay. So, while it's doing that, also a

couple things that you can do. So now

you can take your Figma designs and you

can actually just copy them and paste

them directly into

paper. Um, and everything translates,

right? So that's great. Um, so you can

kind of play around like anything that

you currently have in Figma, you can

just kind of move over into paper right

now and continue to work through that,

which is really cool. Um, okay, here we

go. Starting with the popover states.

Perfect. Something that is really cool

also is they have this plugin. So I can

come here and basically I can capture a

whole page. Command enter. It's

capturing this whole page. This whole I

can go into my browser, go to any page,

any product, anything. And it's going to

be able to capture the selection. It's

ready to paste a paper. And look.

Oh, it got a little funky right here.

Oh, it pulled in the sidebar. Okay,

there is a sidebar feature. That's

funny. Um, but it pulls in the whole

product and it's like very it's it's

spot-on. Um, when I've looked at this in

the past, I've done a few different

ones. Like, it's spot on. And look, I

can just go in. I really like this. It's

super cool. I can do a bunch of things

with this. Um, but I will say if I'm

actually working on a product, I like to

actually tell it to build it from my

codebase because then I'm just building

those tokens and that styling and

everything I want. So, this is something

fun for exploration. Um, but if I am

designing an actual product or

rethinking it, I want to just pull from

directly from the code if I have repo

access. So, that's kind of like the

difference there. But this is really

cool and great for experimentation. Um,

the other things I can do is they have

like all these containers and then I

also can do auto layout. So they call it

flex here and it's basically the same

command as in Figma or ship day. And

then basically I can use my typical the

ones that I defined with my tokens and I

can read adjust the layout here just

like you can in Figma which is cool. Um

so there's that as well. Let's go back.

Okay, it's still kind of thinking. Let's

go down. I think it's here. [snorts]

There we go. It's pulling all the states

out which is great. So let's let it

finish up there. Um but these are just

some other cool things that that I've

been doing and playing around with paper

which are really cool. And if you guys

want access to more tools, we have a

community. And if you join the

community, you get access to all of the

tools and the tips and the resources

directly from us. It's a Slack group, so

we're always on there. Me and my team

sharing our knowledge, getting feedback,

and helping anyone that's asking

questions. We also do monthly workshops.

We have one coming up soon. So, please

take a look at the description, and if

you're interested, we would love to have

you. Okay, so it looks like it is done.

So, let's go in. Let me tell you a

little bit about this as well so you

guys have some context here. So this is

a current product that we're building.

Basically what you can do is it is a way

to leave feedback and comments and

prototypes. So anything that you spin

up, you know how in Figma you have

comments? Um basically it's this idea of

being able to add comments but to actual

working prototypes. So you can go to you

can download the plugin and then

basically what you can do is you can

come in and you can leave feedback.

Anyone on your team can leave feedback.

make this yellow. Um, and then it's

going to go directly to the person like

the designer and the designer actually

can see all of the feedback and they can

actually use their agent to

fix and update based on the changes. Um,

so more to come. I'll share more in

another video, but this is basically

what we're building. And so if I go back

to

here, this is see what I did here. This

is basically the state that I'm I'm

rethinking. What I love about paper is I

have all these states here. Um, so yes,

I could if there are components, I could

have them in story book, but I'm a

designer, right? So I want to like get

into the dirty details here so I can see

everything. And it really is like

perfect. It's like pixel perfect. They

really nail it. I think like where I I

want to dive deeper and feedback we've

been getting from users is on like how

we explain what it is.

Make this yellow like what is this? when

I leave feedback screenshot. Um I the

screenshot feels confusing to me in this

visual. So what I want to do is I'm

gonna copy this. Um and I'm going to go

into paper. I want to rethink how we

actually show the screenshot. And do we

actually need a design like a visual of

it? I feel like it takes away from the

actual idea of it being a screenshot.

Um, it's something that we've been

getting feedback on and that users

sometimes struggle with. So, I want to

rethink this a little bit. Can you first

take a look at this component and then

can you go use the mob and MCP and can

you pull some inspo and put it directly

into this file for ideas of how to

display when you are making edits to um

a specific part of the platform and how

to actually show what that screenshot

section should be.

Okay, so let me hit send and then I'm

gonna explain a little bit more. So this

is kind of like how I like to work is I

think that a big part of being a

designer today is not just trusting the

AI to make the decisions. So I still

want to do my process. Um so I still do

want to go use I use the mob and MCP

which is essentially it goes into mobin

and it's actually based on the context I

give it and what we're actually

building. It's going to pull some

examples of how we could potentially

tackle this. So, I still love to pull

info and I still want to figure out like

how as a product designer, I can rethink

this in the best way possible. So, it's

trying to go directly into creating

those specific variants, but I don't

want it to do that yet, right? Like we

just talked about, I first just want to

pull info. I'm the one that's conducting

this and I want to make sure that I'm

making the best decisions. Okay, it's

starting to build it. Oh, and another

little fun thing is if you doubleclick

on

this, it goes directly to that frame.

So in any aspect so if I'm here say I'm

here and I'm like oh I want to go in

boop and then I'm directly in here which

is a defend the element. Okay so looks

like it's finishing up. Let's take a

look. So examples where the screenshot

reads as an attached object. Okay so

this is where it's literally blowing it

up as like making a comment.

I don't understand WhatsApp.

Telegram selected image before you send

then claude prompt input with an

attachment.

Oh, so just these don't feel as

relevant. Let's look at this examples

where the screenshot anchors a specific

task,

right? So this is basically it's just a

normal

comment.

So, it just attaches it as a or it has

the PDF and you can make the change

there. Some of these aren't as relevant.

Wasn't great. I think this one makes the

most sense. I

I don't like the inspo. Um, but going

back to this, I don't think it needs

this visual

just now, right? Um,

okay. Let's go back and actually look at

the product again.

So, it says just now and then it shows

the location of it and then it says a

screenshot. Then I can send it, right?

Okay. So, it does kind of show this

here, which is a little nice, right? So,

that makes sense.

This is just showing that it's text. So,

let's ask it to come up with a couple

options. I'm going to show these. I do

like how it's showing that I'm leaving a

comment directly on the button icon. Um,

I think that is visually nice. I think

some of the other screenshots didn't

feel this way when I did it. So, I think

there might not be a common pattern. Can

you look at that? And then also, I think

what I don't like is when it's just

text, it has a CR. So, what if we come

up with a better pattern where it does

show more of the element when we take

the screenshot so we can reference it?

And then if it is text that we're

highlighting and making giving feedback

on, can we make it so that it's a more

visual fun way of showing that it's text

instead of just the CR, which I don't

think is very clear. Can you design

these options in paper? So, what's great

about paper is instead of it building it

out in the product and me um starting

the server and going back and forth, I

can just see a few different options

directly in paper, which is really the

value. So, you can see I'm not

necessarily like cushing pixels. I'm

more like chatting with AI and then the

AI is building it for me, but I still

have like those full design

capabilities. So, let's see what it

comes up with. Okay, so this is

currently what I have. Current behavior

context crop. Replace initials with a

visible selected text moment. Context

crop. Capture the surrounding sentence

and highlight the exact selection.

But it didn't pull it into any kind of

design that we have. That's kind of

strange. Um, but okay. Let's see this

one. Small screenshot behind selected

text. Enlarge in front line strip. A

compact crop for text and dense layouts

or long pages.

I do like this markup overlay idea.

So then it does capture the component.

Quote hybrid. Oh, I like six quote

hybrid. Let's So these are kind of I

think very rough ideas. This is great.

Like let's do this one. Let's go with

six.

I like option six. Can you actually

design it out how it would look in the

actual card? Oh, interesting. Okay,

now I think we can get into some design.

So, this is how it currently looks. I'm

going to pull it here. And it's not

really I don't really like I didn't

understand this is exactly what it

meant, but let's do this. I kind of like

the idea of it.

here.

Okay, I'm working in this frame.

It feels like a very look and feel now

that I see it in here. I still want to

pull from the look and feel that the

screenshot with the X and the compon the

thing above has, but I like this idea of

saying highlighted copy. So maybe you

can um do another version where it feels

more similar to what we had in the past

but with this copy highlighted instead.

No, not really. But here, let's play

around with it. So I think what it

should say is

Okay, I like this a little bit more. Oh,

I see there's some weird padding here.

So let's go center. Oh, it's still

working on it, too. So now I'm making

changes.

Let's stop here. Okay. Um, oh, it just

brought it back. Okay, so this is how it

currently looks, right? Um, and kind of

based on this ex idea, I think that this

background could get rid of this as

well. And then I think it should just be

here. Hold on. Let me look back. Okay,

so I think that it could say

pull this one

instead of this. I like this idea of it

saying like highlighted copy and then

hold on, let's pull,

can you recreate this in the same

artboard so I can play around with this

one?

Okay, what I wanted to pull was this

idea. It is full screen. So maybe this

idea here.

So what's really cool? So I can get

something rough, right? like it doesn't

have to be perfect but I think this idea

of highlighted copy so let me do this

let me copy this

so this is the concept I am actually

thinking for if there's highlighted copy

and you want to make changes to

highlighted copy

and I this is how I want it to visually

show I need you to redesign it so that

it is matching the constraints of the

padding

and the right sizing so that it makes

sense in engineering as a component and

then can you also can you redesign it or

can you take it and design it so it

follows all of these rules so I don't

have to push pixels so look this is

super cool it's adding the fixed avatar

then fixed action button width so it can

only it's fixed it's rebuildable okay so

here's the it's almost finished

redesigning

oh but it made these too big look at It

got carried away. Okay. So, let's fix

some of this. I think maybe because I

made this larger. So, let's tell it to

rethink the size. Wait, you need to

rethink the sizing of the whole

component. The send, cancel, the avatar,

the just now, and the slash landing.

This should all be the same size that we

defined already. So, I think everything

needs to be smaller to adhere to the

current constraints that the product is.

So as a designer, I'm not pushing

pixels, but I am kind of like reviewing

and orchestrating giving feedback to the

AI. So that's really like instead of me

spending all that time, I'm shortening

the amount of time because I'm just

coming up with an idea quickly and then

I'm asking the AI to keep fixing it. So

you can kind of think of the AI as like

your

assistant, your design assistant. And

that's really cool. And it's I'm able to

do this in such a better way in paper

um than I have been able to do in any

other design program. So I still still

feel like I am the designer and I'm able

to design and push the pixels when

needed and come up with the concepts

because I am visual. So it's not just

like chatting with an AI actually to

visually see it and then tweak it. But

also I am able to

design it out a little bit more back and

forth. So, what's great is like the AI

isn't perfect as you can see here. Um,

but it is helping me understand like the

concept in my head and actually build it

out directly with AI. Okay, so it's

getting close, but look, it's cutting

this off again. So, I'm actually just

going to go on and try to tweak it

myself instead of asking the AI. Okay,

so it's definitely much more aligned.

The copy is cut off. I don't need to ask

the AI to fix it. I'm actually going

First of all, I don't like this

underlying. I think it's something extra

that's not needed. So, I'm going to

delete it. Oh, there we go. Okay,

perfect. Um, cool. I like this. I think

it's super clear. Let's just go in.

Okay. It still feels small to me, but

and I don't think we've defined this.

So, I think I need to define body is 15.

Okay. Okay. I tweaked it slightly. Can

you look at the tweaked that I made,

which was removing the line under

try at all? And my other question is the

highlight copy. We don't have this text

size yet. Do you think this is something

we need to incorporate into the product?

Okay. I don't know if I agree with this.

It says basically just to make it a

micro label for this component only. Um

I might want to just remove it. But

let's see. Okay, let's build this out. I

want to actually see it when I am making

copy changes in the actual product. So

build it out now as this new component

for anything copy related.

Okay. So now we've agreed upon it. Um I

feel like it could make sense. I still

have some questions about the

highlighted copy, but I'm actually

telling it to create it in the codebase.

Okay. So what is really really awesome

about what it's done here is it's taken

this component that we redesigned and

it's looked at the codebase and the

current component and it's made sure to

create it in a way that it is an

existing component pulling from the

design. So it did all of the front-end

work, right? So you know all the

inconsistencies that used to happen when

you hand off designs to dev well this is

solving all those inconsistencies. Now,

it's also,

let's see, it's still working on some

things,

but it did. Okay, it should have um a

place for us to test, which will be

coming in a second. Okay, so let's test

it out. Huh. So, we're going to drop a

comment

on here.

Cool. Look. So, it took my highlight.

Copy. Highlight. Oh, there's something a

little funky here. So, we should fix it.

So, hold on. Let's do cancel.

Change to

design.

I want to see what it looks like. Okay.

So, I think it all looks good except for

that it's cut off

a little bit.

Oh, it showed up here nicely, though.

Okay. I I like this. I think it looks

great. The highlighted copy is a little

small. I probably would still want to

update it. Um, but really where you can

see it went a little rogue

was here. So, I can actually tell it to

go in or I can just tell it here.

When I

copy the text to make the comment, you

can see that the white box is a little

it's going into the right. It's cut off

on the right. We need to resize it

appropriately.

But do you see how cool that is? There

is paper. I think I walked through quite

a few things we can do with paper,

right? um from how we can get started

with the project, the tokens, um how we

could actually take a screenshot and put

it directly in, how we could transfer

Figma in, how we can do auto layout or

how they call it flex. Um and then I

showed you details of how I actually

work where I am pulling inspo and then

I'm tweaking the design and I'm asking

code to fix the design based on best

practices and following formatting and

then I'm tweaking again and then I'm

actually saying, "Okay, now build this

out in code." and then it actually

changes the whole component and then I

can ship it to the engineering and the

product team and that's the whole

workflow. So paper is a really really

cool tool. Um download it, explore it,

test it out, let me know what you think.

And if you are trying to figure out how

to add AI into your product process um

basically from from start to finish or

the design phase, I would love to hear a

little bit more about how I could

potentially help you. We offer

workshops, we help build design systems,

we're doing a lot of things. There is a

link in