This is how I use AI for Design Systems at Monday.com

What was your process like for managing design systems with AI?

>> Yeah, so before we had to do you can see a lot of annotations, a lot of this is a two pixel gap, this is a background. Now

it's just like a simple document. It can

be as long as we want. We can we still write it but instead of writing for [music] a person we write for AI. For

example, all the spacings are visible.

It helps the AI to see the spacing in cursor. I can show it and we use Figma

cursor. I can show it and we use Figma MCP. So Figma MCP helps us a lot to get

MCP. So Figma MCP helps us a lot to get a screenshot to get the code to connect with code connect to the components. I

can just copy and paste it here and it will create a specification for me. So here is the specification.

So you can see it's like some technical specifications and some like structure and component.

>> Now what happens if you do not create this specification in cursor?

>> So man is a large organization. We have

a lot of things that we do in a specific way. Our design system has its own

way. Our design system has its own philosophies and our developers are have their opinions on how components should be built. So the specification what it

be built. So the specification what it does it >> Hey folks this is Jay welcome to sneak peek and today with me I have Elad who

is a design systems lead at monday.com today he's going to show us how he uses AI for his design systems at monday.com

super stoked to have you on sneak peek to be in showing you all the work that we're doing in Andy >> question before we even go into how

you're using AI, can you show me what the before was like before you started using AI? What was your process like for

using AI? What was your process like for managing design systems? Yeah. So we had a lot of handoffs and we had I think like a lot of design system teams are

smaller than the greater design team and we have a lot of components waiting in the pipeline and we need to do all the handoffs and wait for developers and it's a lot of communication. We have

pre-andoff when we show the designs and then we go back and forth with the developers. they have issues while

developers. they have issues while developing. And this is like an example

developing. And this is like an example for a drop down that we worked on. A lot

of notes, a lot of things that we need to show, a lot of things that that we need to like make sure that they will develop all the states of the component and make sure that they understand like

every part and it's like it's it's a long end of document. It depends on the feature but at the end of the day like we had this very long document where we

needed to sometimes annotate sometimes say make sure that the gap is two pixels. So, this is a thing that I'm

pixels. So, this is a thing that I'm going to spoil a little bit, but this is like a thing that that tell us like the AI knows that it it's a two pixel gap, but sometimes the drivers just miss they

miss the background color. They miss

like a lot of things.

>> And then, so this is the before. Now,

what is the new process look like with AI?

>> Yeah. So, before we had to do you can see a lot of annotations, a lot of this is a topic gap. This is a background.

Now it's just like a simple document. It

can be as long as we want. We can we still write it but instead of writing for a person we write for AI. So it's

different AI like a person can miss out of things that AI don't miss. What cars are what tokens are we using and AI don't know

context that the person might have. So

for example all the spacings are visible. It helps the AI. It helps the

visible. It helps the AI. It helps the AI to see the spacing in cursor. So I'll

show in a bit like how it looks in cursor. But AI needs like visually the

cursor. But AI needs like visually the spacing like in the beginning and we can show all the varants and then we show like specific use cases and we can it's

like it's more technical. It's like you have this this and that props. You have

like it's very short. It's very concise.

It's very technical.

So question here is AI able to look at the screenshot and where it's a two pixel gap able to like infer that from the screenshot or do you need to have a

text line somewhere that tells the AI as it's scanning it? It depends like the AI gets it well. We use a couple of tools.

We use some internal tools that we show in cursor. I can show it for you. So the

in cursor. I can show it for you. So the

process is we have a lot of small tools and we use Figma MCP. So Figma MCP helps us a lot to get a screenshot to get the code to connect with code connect to the

components and we have some internal tools that we use. We have some we have a VS code extension internal team tool that we can just copy and paste the Figma link into and it creates like a

specification for us. So I can show it like quickly. We don't get like a lot

like quickly. We don't get like a lot into it but I can just copy and paste it here and it will create a

specification for me right okay here so it analyzes and it can create like a specification it now studies the figma itself and it can

create here I can continue it just want to make sure that I am on the right page and copy pasted the correct frame. Now

it's created a specification so I can show it to you and it creates the same spec that you saw on Figma. It creates

like a one for the for cursor to look at and to have context and you can just prompt it and make fixes and make sure as a designer as everyone you can make

sure that the specifications is what you meant. So sometimes you can see that it

meant. So sometimes you can see that it misses things and you can just go back to the end off and fix it. Do small

fixes.

>> Wow. Now what happens if you do not create this specification in cursor?

>> So yeah it it helps. So it depends. You

can just use Figma MCP and it does like a decent job. You can try on your own with Figma MCP and try to create like your own specifications and see how it

goes. But we found out that we have a

goes. But we found out that we have a lot of like internal knowhow internal rule that we need to go. So here's the specification.

So you can see it goes like the component provides standardized rich UI elements and you can just read it and go through and it's like some technical specifications and some like structure

and component like things. So you can prompt it, you

like things. So you can prompt it, you can just regenerate it. And right now the visual can be anything and just regenerate it

and it works and you can go back and forth with the AI. Also we have a lot of rules that we created so cursor will know our codebase. So all the tooling

that we're working on Monday is a Monday is a loging organization. So we have a lot of things that we do in a specific way. Our design system has its own

way. Our design system has its own philosophies and our developers are have their opinions on how components should be built. So Vibe the library is an open

be built. So Vibe the library is an open source library and anyone can go there and the community can contribute. So we

really want people to just stay consistent in the code and not create just it doesn't need to be if the code works it's not enough for us. We want

the code to be really quality code and really consistent code. So we have a lot of tooling. So the specification what it

of tooling. So the specification what it does it's creating the consistency and the quality that we want in Monday. So

it is aware of our design library of our previous components. If it needs to use

previous components. If it needs to use like other components for example the empty state it's a bunch of other components. So we have all the color

components. So we have all the color tokens we have the visuals we have the illustrations we have an illustration library. We have buttons links. So most

library. We have buttons links. So most

of the time we're working on compositions. So cursor is really good

compositions. So cursor is really good at creating like just working code but we don't want just working code we want mundane design system code. So the

specification really helps us h the other thing that works. So now I can just do continue. It will create like a specification that we can use in cursor.

The other thing that we do is we have a bunch of cursor rules. Cursor rules are things that you can direct the agent to

work in a specific way. So cursor rules are just like a tool in cursor that we utilize for advantage. So we have base component, we have for example storybook

stories, how we write stories, how we structure the stories and how the stories should be written and and we have a bunch of things that we see. So

if you can see my chat on the side. So

it takes like a bunch of things from figure MCP. It takes a specification and

figure MCP. It takes a specification and then it takes all of our rules. So it

takes how we implement a new component, how we style in Monday and then it's it creates an entire plan of how to tackle this component. So you can see it's it

this component. So you can see it's it starts writing tests, it's writing types and it's all we have our own specific like for the structure. So it just works

like it should.

>> So I'm still a very noob to this. I'm

confused on so many things. So I'm going to ask you a lot of beginner questions.

Going back to the first question about the specifications in cursor in the old school way of designing you would do a like a handoff in Figma, the specs. The

engineers would copy that and make the component. They would code it and they

component. They would code it and they would have that in storybook or somewhere else and that's it. Now you

created the specification again in cursor. So if you go back to one of the

cursor. So if you go back to one of the specifications like this is the Figma specification. Now if you go to the one

specification. Now if you go to the one that you created similar version in cursor um I'm still trying to understand like what is it that extra stuff that is

giving in.

>> Uh so what it does it's showing me the plan of how the developer would if we had like this conversation with the developer.

>> Okay. It would be an entire meeting. We

show the specification and then we say this is the specification. Then we have a Q&A. So we ask is the visual should

a Q&A. So we ask is the visual should use like only Monday illustrations.

Should it use animations? How should it animated? So this is like a lot of back

animated? So this is like a lot of back and forth that we would do meetings on.

So most of the time we just like talk about it as questions. I'll need to update the Figma accordingly. So when I have this cursor specification, I don't

need to I don't need to update the Figma necessarily. So if it does if it has 99%

necessarily. So if it does if it has 99% of the things that it needs to go, >> yeah, >> I can just like prove it in cursor and just go with it and it creates like

>> I think 90 or 80% of the code just working.

>> Oh my god.

>> Available in storybook.

>> Yeah. So I can just >> Oh my god.

>> I can just run storybook and then we have vibe.

And you can see like I create the empty state and it's available already in storybook and all the documentations are generated all the props are generated

the usage the dos and the don'ts and the things that we need to we used to create I can show you that as well we used to create an entire story a story storybook

page with a template of how we should show the story book and we have an entire Figma a file of just this is the story book this is how it works so when

I do the specification in cursor it's just doing like a mock how it should be described in story book and at the end

of the flow it's creating all the stories all the tests for the developers everything that I need to have for the components so I have a lot of things that I can do

that can help me just create the story book without all the back and forth. So

I can just instead of creating a story book in Figma, very detailed, very I need to explain all the dos and don'ts, the AI does it for me and then I can

just go and this is what the cursor rules do for me. I just go to the example.

Okay, so maybe this. Okay, so I have the visuals. I can just add the visuals to

visuals. I can just add the visuals to cursor. Like for example, I have all the

cursor. Like for example, I have all the illustrations. I add a new session to

illustrations. I add a new session to cursor and I say here I can write to cursor can you add so I can say just can you add this and

that visual and add to the stories and just instead of what I showed you earlier which was like weird it's just they generated like a visual by itself

and I told him like no I want this and that SVGs I exported for Figma myself I put it in cursor Sorry. And now you can see it updates the stories. The end

result is that it will here. You can see it just replaces the visuals with the illustrations that I already have in my library. So I don't need to go back and

library. So I don't need to go back and forth with a developer. I can go back and forth with with cursor or for in or the developer can create like 90% of the

work and then we can sit together and I can just send them SVG and I can tell them we don't do it like 100% automated yet it our designers don't do all the V

coding by themselves but we have this 90% that the you said that the do and the don'ts are empty and then the designer can just send PGs and say this is the PG for the dos and the don'ts and

I don't need the do and the don'ts. I don't need to do all the boiler print that we usually do like this is all the properties. This

is the this is all the example. This is

the example. So the it's all like vibe coded and this is why we have like our rules and our custom tools and all the specifications. So right there. So this

specifications. So right there. So this

whole template for how a component should be in storybook is that template you created that in cursor was that in Figma where you have

all the dos and don'ts the usage where is that template for that that because you got to have the same for every single component.

>> Yeah. So it's both. So we have a template in our story book. We have

template components. We have a template structure and we have the cursor rules.

So it has a we are lucky that we have a lot of existing code already standing.

So we can just tell cursor hey go over all the stories that we put up all the artwork for and just create a create a story based on the dos and don'ts on

previous components. So you can see we

previous components. So you can see we have some in Figma already. So sometimes

it's just we have all the things that we want like actions here. We have some guidelines. We show like what is the

guidelines. We show like what is the default variant. We show like all the

default variant. We show like all the different things. But we don't need to

different things. But we don't need to get into details. We don't need to like write all the dos and the don'ts.

>> So you don't need to like manually type all this in storybook. The cursor is taking it all from these images. All the

dos and don'ts you have in Figma generating again in the use case there also uploading that in storybook as well.

>> Yeah. So it creates Yeah. It creates a stories and then we can go and go back and forth. We can go back and forth with

and forth. We can go back and forth with our developer and we can just say hey this is the widget just put it in cursor we replace all the visuals. Maybe we got we saw the dos and the don'ts and we

said oh we need to do and we need dos and don'ts for maybe when to use a compact empty state. So we just can tell cursor hey this is the guidelines just

create this section. So it can tell by our previous work. So we have all these pre-existing like dos and don'ts. It can

just infer from it. So we have all the components for the dos and the don'ts.

We have all the stylings. We have all the things which we already did. We make

sure that it works with our custom tools. So we have our cursor rules and

tools. So we have our cursor rules and we have our extension and we have all the specifications that work.

>> Can you show me your cursor rules? Like

I'm still new to that. What is cursor rules?

>> Yeah. So a cursor rule is is something that a lot of developers are working with which are rules that you can put in cursor that helps the agents in specific

situation. So Yossi, I give a huge

situation. So Yossi, I give a huge credit to Yossi Sadi who created our extensions, created the rules, is a developer in our team and he's an

amazing developer that just took this initiative and we are bunch more efficient that we used to be and we are like keep improving and keeping creating

more tools. So this is a rule. So a

more tools. So this is a rule. So a

cursor rule is like a prompt that you can put in cursor. It's just a folder.

You see it's cursor rules and you can put like a bunch of rules. So

accessibility guidelines, storybook stories. So all these rules are just

stories. So all these rules are just like prompts. When you create like a

like prompts. When you create like a prompt in GPT, you can prompt the GPT to do something. Maybe you have folder

do something. Maybe you have folder before pre-existing prompts. Maybe you

have the nice prompts that you really like. So you keep them in a folder. So

like. So you keep them in a folder. So

cursor lets us just do this folder and then it can use it by itself. So this rule it has like a bunch

itself. So this rule it has like a bunch of technical things that the developers just created. How components should be

just created. How components should be named how a file how our documentation should be structured like tech a bunch of [clears throat] technical things the

designers just should not worry about but our developers just created for us.

So you can see there are examples. There

are like a bunch of things that look like code but some of them are some of them are just prompts. And when I prompt

cursor to create a component for me, it takes the rules and inject them into the agent.

So you can see I just told them create an empty state component based on this spec and just send it the spec in the Figma file and then it can uses all these tools. So we have our custom

these tools. So we have our custom tools, we have Figma tools, we use like a bunch of little helpers like in Monday that helps us and then you can see like

it figures out it needs to do a component and then you have like rule component internal structure like it needs to know how we structure

components in vibe. We needs to know how we can implement the component how it can how do we style components. So this

is a things that the AI should read. We

don't read it. We just like our developers write it for us and then the AI just takes it and use it. So after

the AI read all the rules, it can create a plan for us. So you can see the to-dos. So it can create type security

to-dos. So it can create type security like all the structure is based on all the instructions that we gave him. So

instead of just creating like a huge long prompt that you need to insert to GPT and then maybe cloud code maybe I don't know anything and then just copy

paste all the code maybe doesn't know how to work like in our component library you don't need to do all of this stuff the agent takes care of it for you

>> got it now what are the rules you have for the accessibility guidelines >> so it's interesting I it's it's very

like high level. You need to follow like the wag the WCAG guidelines and you need to semantically and use HTML. You need to if it's a

button don't just use divs. So this is like a bunch of things that are generally like very hard for AI to follow. So AI just creates code. It

follow. So AI just creates code. It

doesn't create like quality code necessarily. So code that works it's

necessarily. So code that works it's fine. It's fine for a PC. It's fine when

fine. It's fine for a PC. It's fine when you want to run a test or see if stuff works, but when you want to create like an accessible component and all of our rules are available like in

vibe.mday.com

vibe.mday.com and people just can go and read rules in GitHub, can read in a storybook and we have all our use area when necessary.

Don't abuse area. These are like valid area. Make sure that when you're

area. Make sure that when you're creating components they're accessible, they are valid. There are you have keyboard navigations, you have logical tab order, like all the things that you

need to make sure we prompt the agent to just follow.

>> Yeah. Now, let's take a look at the vibe design system. Can you pull that up?

design system. Can you pull that up?

>> Yeah. So, I can put it in Figma and I can put it in story book. So, we have two two places that we use like Vibe design system. We have the story book

design system. We have the story book which is available to everyone. Everyone

can just check it out. You can use like vibe some of Vibe like MCP tools. You

can use our playground to play around you. We have a lot of tooling and

you. We have a lot of tooling and things. We have our foundations. We have

things. We have our foundations. We have

all documentations and offer components and we have the Figma. So they are comparable but we

Figma. So they are comparable but we have the here the vibe design system.

Yeah. And it's the same. It's it's

comparable. We have all documentation.

We have all the things that we have store book available in Figma as well.

And so this is we have the both of the lovers because of that we don't want to do things like twice. So we can just create the commentations and it creates

a story book for us.

>> Got it. So what percentage of the code was generated by cursor? So let's if you pick any of the components like variance the button or something um can cursor

generate at least 70% of the code for this component >> probably yeah so it depends on the complexity of the component but generally like 70% like is a good number

sometimes like empty states like simple components like an empty state or we did wherever I can show you the new ones so we have the info component it was

created like 90% by AI. So this

component was created like we had the design, we had the end of and 90% of it it's just AI. So it's like a simple like nice component. You see all the dos and

nice component. You see all the dos and the don'ts. You see all the guidelines

the don'ts. You see all the guidelines and it's it can vary from 70% to even 90 or even like a working component that you can just need to tweak the story

book for.

>> Yeah. What is the benefit of AI generating 90% of like code for a component versus having an engineer like create 100% of that code?

>> So our engineers are taking care of all the tooling that I showed you was created by our engineers. So our

engineers just trying to improve our code. We are a team. We are a big team

code. We are a team. We are a big team for like a design system team in general.

for Monday when we have 70 designers, we are like three developers and three designers. So we are a small team

designers. So we are a small team compared to a thousand developers that need to consume our component library and for the amount of components that we

need to take out we need to deliver for teams. So I can tell you that our engineers really worked hard to create all this AI tooling like I can give a

lot of kudos to Yosi again and they created these tools because they wanted us to just all the simple components all the components that we need to like uh

release quickly. all the things that are

release quickly. all the things that are just like stuck in the backlog because of engineering timelines, we can just release it and we can just make sure like our engineers

still make sure that it's quality code that all the code is is up to our standards and it's accessible and we manually go through and check and see if

it works. H but we work a lot quicker

it works. H but we work a lot quicker and we can be this small team. Even when

Monday grows, we can still like keep the team size relatively small to our organization and it frees us up to create like other more complex component maybe documentations for patterns. There

are a lot of stuffs like in design systems that aren't components that we need to do like daily and it frees up like us to do like more complex design

system like thinking and all the execution is just AI and it's something that is in the it's in the interest of our developers and the designers like

everyone in our team are is really excited to just let AI take all the stuff that we do that is like just dayto-day day really just takes time.

It's not that difficult. It's not that complex. It's just it takes time of the

complex. It's just it takes time of the day. So we want to automate like every

day. So we want to automate like every part of our flow which is like repeating.

>> Yeah. So in the past if I had asked you to update this tool tip for them gray color to black solid black it would be you have to submit a request engineer

has to be free. When they are free they would work on it. they would push the code but let's say I asked you right now live just for test purposes to update it

to black how would you do it in cursor I can say so we have the in component we can run the story book

so we can run the storybook and say that it works like the development story book so I can go to the info component >> again for everybody watching you should

not update the tool tip to black but this is just for test purposes.

So, so we have the new info component. So I

am tagging the correct folder. I can say can you replace the background to and we don't have a black color but

we can do like inverse color.

So now let's see.

So hopefully it made the change.

Okay. Yeah, the text is in the negative.

So yeah, let me inspect him. Let me just say can you change the text to on inverse as well.

So this is like the reason why we create specific tools for our needs. So if we see that it happens a lot that we do a lot of for example coloring, we will create like a rule for cursor to just

say okay when I change the background change the text as well. So let's see if it worked.

It doesn't. I can set a screenshot to cursor and just see how it works.

Can just show cursor like a screenshot.

All right. on inverse

corner crack and text white on sky. Let's see

if the picture help.

>> Oh yeah. So you're giving additional context. Yeah.

context. Yeah.

>> Yeah.

>> My to the screenshot. I see.

>> Yeah. So this is why we do all the rules. Like I showed you all the rules.

rules. Like I showed you all the rules.

I showed you all the specifications. So

AI needs a lot of context to work. So

this is why we do all the rules and the tooling in vibe because we really want here. So let's see if it worked. Maybe

here. So let's see if it worked. Maybe

refresh component.

No.

Okay. Didn't do it as I wanted to.

So yeah can send you something to work. Yeah it

need to do so I can just like and for component I can do can you change the

text color on dialogue?

Yes. So the more context that you give it, the more that it will work. So this

is why our Figma tooling works better than our so I can see. Okay. So it made a mistake

and it didn't fix it. But it should do on inverted and then it will Yeah.

>> All right.

>> Yeah. So yeah, it's it doesn't work like that well on info lang.

So this component like is something that I need to look into again. So

again. So maybe I can do but the amazing thing is that like before if you were just doing this with Figma, you would have to like update the

prototypes, you know, make the prototype work and then show it to someone to get a feel and it would take some time. But

I would say that you probably spent like the last maybe max 5 minutes with me and now you got it working. But if you had to do with prototypes and try to get everything right, it might have even

taken you longer.

>> Yeah, I mean maybe if I show him like a picture of of the desired outcome, maybe it will work. So I can go and like import. Let's do clean one info

import. Let's do clean one info component and just show it an example of how it should work. I don't need to update the

should work. I don't need to update the prototypes. We do keep we do keep our

prototypes. We do keep we do keep our Figma.

Oh wow. I see. Oh my god.

>> Maybe maybe just try to fix it in Figma.

Con inverted and maybe just send a link to it. This is what I want.

>> But it already made the change though, right?

>> Yeah.

>> You probably to undo it or >> I did undo it.

>> Yeah. I'm curious to see if it gets it right in this go because you've given it the exact image of what you want.

>> Yeah. Maybe I should give him just the image as well. Okay,

as well. Okay, so let's review the change. Okay, maybe

this should work now. Let's go to story group didn't change. So this is the tricky

didn't change. So this is the tricky part here because we have this component like specifically I think that we have yeah colon inverted col

inverted. So this component specifically

inverted. So this component specifically we need to do some overrides to make it work but yeah it just it can work and I showed you earlier that it did work.

I don't know it sometimes is like when you show it to somebody it's not always working.

>> Yeah >> that's fine but yeah but this is like the general thing that you can do with it. You can just ask it to switch

it. You can just ask it to switch colors. You can give it new

colors. You can give it new specifications we are seeing. So this is like a great example. So we are seeing better results in new components and we

are working on tooling on existing components. So this is something that

components. So this is something that that we did see and we do most of the changes that we do is for new components because we can just start fresh and AI

is better in in like in code in like new code than in fixing like existing code especially like in very old like vibe exists like for I think where exists we

exist for four years give or take. So we

have a lot of components that we already created I think five years even and yeah >> so this is pretty cool like use case you got this empty state here which is the

component in your vibe design system now this static image that you have here I'm not a fan of it it's standard one but let's say you wanted to upload this with

your Monday approved illustrations in the past I think you would have to go into Figma update everything get approved and still but you cannot see

the interactivity right um this component is interactive so here if you want to update the visuals using cursor how would you go about doing that

>> so I can just go to cursor I can open for example let me close everything let me just start new so I can go to for example the empty

state component so here I have the empty component I can just say I can go to maybe the storybook story

tell it like for example here are the stories I can say can you replace the visual on

the empty state for to this one and here I have in the assets like a bunch of images I can just

add my new SVG. I can drag it here and I can say, can you add it to this one?

Okay, I can even give him like more context. I can just do empty state

context. I can just do empty state stories. I can give him the location

stories. I can give him the location cursor and then just send it.

Let him Let's see. So it changes like a bunch of code.

see. So it changes like a bunch of code.

Yeah. And let's see the result.

An error.

So I think I know why to visual. Let's use a PNG. I'll do it

visual. Let's use a PNG. I'll do it again. And let's use a PNG. I see why

again. And let's use a PNG. I see why it's confused. So funny because I did it

it's confused. So funny because I did it like before the interview and it worked perfectly but let's just export it as a switch. So

let's do the same thing again. Let's

clear the chat so I can tell you. Can you replace the visual

on the empty state stories to this one?

And then I can just tag maybe just even drag and drop it to the chat.

And I can just tag the empty stries. So

it will have context.

And now I think it should work.

So you can see it switches the image to the new one. It inserted as an image.

And now you can see in the story book the image is replaced. So this is like a simple thing that yeah we we most of the time we need to we just open

a ticket and we said replace it and now because we can just like tell cursor to do it like most of the time we'd add to do the same thing manually. So it's a

simple replacement and we have a lot of simple things that we want to replace all the time and so it it gets like it gets stacked like all these mini tasks gets like more and more cumbersome.

Maybe you want to just do like a bunch of illustrations and say these are all the illustrations. Put all these

the illustrations. Put all these illustrations put different illustrations for every example. Maybe

do a large illustration and a small illustration how an animation is implemented. Like all this stuff is like

implemented. Like all this stuff is like things that we used to just create mockups for story book and Figma and now we can just put it in cursor and it makes this small choice for us.

>> Wow. So my question here is that we just saw how easy it is for any designer to change visuals to change copy to change anything they want pretty much with

cursor for a design system component.

So what if some designer on your team decides to make like a change that is not approved by the design system? How

do you prevent that? Cuz anybody can go and make any changes they want. So now

you have so many different versions of the same component or changing components as they see fit.

>> So not necessarily. So the code is still needs to be approved by one for developers. every design you open a

developers. every design you open a branch in Figma. When you want to do design changes for our components in Figma, you open a branch, you do a review. So all the processes are still

review. So all the processes are still like in line. So all the processes we used to have are still in check. So if

someone wants to make a change, it still needs to talk to the product design, the vibe design team, the design system team, and then we need to approve it.

>> Is a setting in cursor that prevents everybody from doing it. You know how in Figma there's a branching? How does that look like in Pris?

>> It's the same thing. It there is branching is from development. We have

like our open-source vibe on GitHub. I

can show you. So we have open vibe every everyone can see and if someone is interested to see our rules or maybe want to show our developers want to show them their developers yeah I heard about

Vibe they have all these bunch of rules you can just look them up. It's

available for everyone in GitHub. So

every time you want to approve something, you need to do a pull request. You open a branch, you do a

request. You open a branch, you do a pull request and then we need to approve. It needs to have tests. It

approve. It needs to have tests. It

needs to go like all the quality checks are still in check. The only thing that is changed is the speed that we do these

changes and but still want to Monday is a very large company. It has a lot of users. We strive on quality and this is

users. We strive on quality and this is like something that we still go through.

So if someone adds like a feature, it looks the same as in Figma. It's like a branch. Sometimes it's fixes, sometimes

branch. Sometimes it's fixes, sometimes it's like new features and people just open them and now developers are going through it. So I show you like all these

through it. So I show you like all these changes that I showed you are locally in my machine. So after I finish and I'm

my machine. So after I finish and I'm happy with it, I can just push it to GitHub and let our developers look at it and approve it.

>> Got it.

>> And so yeah, so this is the process currently and this is the process like in any development team they probably use like any branching version control

like git whatever system that they approve like things. The same in our Figmas. So our Figmas works the same. So

Figmas. So our Figmas works the same. So

if you are in vibe, you have branches.

You can see I've been both of them and you can see like we have the designer and the feature and all features needs to be approved by the design team before

they are in vibe. So all the design system work that we used to do we still do but a lot faster. This is like the

main thing because I think that AI you touch on a very good point. AI is

like a very good tool to just do quick changes to see you have like immediate feedback but we as a design system team

we want all of money to be consistent.

So the changes are quick but they need they still need to be approved by a person.

>> Got it.

So now we're going to segue quick into my favorite part of the interview, which is going to be rapid fire questions from the sneak peek design community. So what

I'm going to do is I'm going to share my screen and read you some of the questions that folks have sent and maybe we can answer them. So one of the first

questions a lot for you is from Grace who is also working on design systems and her question is she wants to know the difference between how a designer

uses AI specifically cursor here versus a developer and if there's any overlap or collaboration during this whole process.

>> Yeah great questions. Currently uh we are working on involving our designers more in the code process but as I said before like there are a lot of like barriers of knowledge knowing GitHub

knowing how to open a PR. What will be the difference between our designers and the developers. So designers, we are

the developers. So designers, we are starting to do like a lot of work on teaching designers how to work with code, how to do all these processes of

quality, how to make sure that we can improve it. We have a long way to go for

improve it. We have a long way to go for designers to just push code into Vive, but it's there. We are building the tools and as you see, it's very quick.

You don't need to write anything but we still make sure that a developer sees like every features that enters Monday every feature that enters by. The second

question is from Umesh and he's got a two-part question. The first one is when

two-part question. The first one is when you use cursor to generate a component for your design system what is the accuracy percentage roughly?

>> So it depends on the complexity of the component. I touched on it like earlier.

component. I touched on it like earlier.

So a very complex component it will be like I think 70% there we have like good numbers it depends like on the complexity of the component of the endoff of the accessibility issues at

end but most components can be like 70 to 90% like ready and then our developers take it from there they use AI ready end off and then they take it

from there we have conversation we have design reviews so the process is still there we do like manual design reviews Using storybook we see that the components work as they should. So I can

say the percentage is like 70 to 90% like for most components that we checked it on currently.

>> Got it. And you kind of answered the second part of his question which was what is a process your team follows once the design system is ready. Do you

review it manually or is it like there's a set of AI rules you have in cursor where cursor itself reviews the component it just generated. Cursor is

reviewing the component by itself, but we don't rely on it. We still do manual design reviews every time. We still do manual code reviews every time. We check

that the code is secure, is quality. We

check that the designs work perfectly.

We don't want to just rely blindly on AI. So, we do all these manual checks as

AI. So, we do all these manual checks as we did before. We do we do have the an AI design review process for features.

So if it's like a flow end to end we use AI to review it but components right now we do all the reviews manually because it's small it's like small scale it's like an atom you don't need to you just

need to make sure that it's working it's quality and the story book is how we wanted it.

>> Got it. Thank you so much a lot for coming on sneak peek and sharing your best practices for using cursor.

>> Thank you. Glad glad to be here.

>> Hey, this is Jay. It means the world to me that you watch this video. If you

want to unlock the AI design and growth design interviews [music] with designers at some of the top companies in the world, then head on over to sneak peek.design and subscribe to the

peek.design and subscribe to the newsletter.