TL;DR
- Build an AI version of your design system first. Screenshot every Figma component, walk Claude through a step by step setup, and generate a Storybook style reference your team and product can pull from.
- Rebuild your app's front end as a sandbox that references production code. 95 percent fidelity is enough to explore features, run audits, and share clickable prototypes with execs and engineers.
- Maintain a CLAUDE.md file under 200 lines as Claude's session brain. Specify which UI library, icons, and chart kit to use, and add rules every time you catch design drift.
- Simulate CLI and terminal experiences in the sandbox. Designers can iterate on copy, layout, and error states for engineering driven flows without filing tickets to IT or security.
- Secure AI development with Ceros, your AI Trust Layer. Get Started: agent.ceros.sh
Transcript
Can you just give, like, a high level walkthrough of, like, what have you built so far with Cloud Code?
Sure. Main things I've done with Cloud Code is I built this sandbox environment of our product that I'm working on. I also have, like, our sign up and login pages pulled into this environment so I can see everything.
I just have everything pulled in here so I can basically take a look at that entire flow. We have a terminal experience, and so I wanted to also be able to see that in the sandbox. What does it look like if there's some kind of, like, error state? Right? That's all kinda simulated here.
I've never seen anybody do this. Why bother capturing this terminal experience as a designer?
I think one thing that's really interesting, like, this CLI type of UI is something that designers are gonna need to start thinking and caring about as AI becomes more prominent. It's not just some recording or things that she added in. This is pulling in the code. This is what someone would actually see. And so she could go in here and she can make requests and then share that back in that same repo with the developers and say, here's some optimizations I think we should do. It's no longer that this terminal style CLI experience needs to be poor or just edge heavy.
What made you move your design team away from Figma into directly starting to prototype end to end in hard code?
Finding an AI version of my design system. So over a weekend, I just jumped into Cloud and started working with it to, define a new design system.
When I had built it and showed the front end engineering team, they were like Hey, folks.
Welcome to sneak peek. This is Jay. And today with me, I have Allan and Bekki, two guests for the first time in the history of sneak peek together. We never do this.
So I'm super excited to try this new format, folks. Definitely lower me in the comments. What do you think about this new format? Should I have more than one guest at the same time?
So Allan is the head of design at Beyond Identity, and Bekki is the designer on his team. Both of them work together. Allan, Bekki, super stoked to have you on.
Thanks very much, Jake. Appreciate it.
Thanks so much, Jay. I'm really excited to be here.
So, Bekki, I think you might be the first person in the history of sneak peek to do a joint interview with their manager. How does it feel?
It feels really good. I'm super excited that we're able to do this together. We've been working really closely the past, you know, six months, really focusing on how to use AI, so we're excited to share that with you today.
So, folks, today, Bekki and Allan are gonna show us how they use Cloud Code end to end for b to b and enterprise use case. You are gonna love this. So real quick, can you just show us, like like like, for viewers who are very excited, who are like, hey.
Just show me a demo first of what you have done with Cloud Code even before we kinda, like, jump into the stuff. So can you just give, like, a high level walkthrough of, like, what have you built so far with Cloud Code?
Sure. Main things I've done with Cloud Code is I built this sandbox environment of our product that I'm working on.
This is essentially a space for me to explore various features, and I can build new things. And for feature improvements, I can pull things in from our production code because I'm using our code base to do this.
So I've got a new question for you, Bekki. What I'm seeing here, the sandbox, does it match, like, hundred percent what's in production to customers, or maybe there's a little bit of difference, or is it exactly, like, what customers see?
So because this is a sandbox for me to explore, it is a little bit different from what customers see. We do always pull in from, like, our production code base, so there is, like, that alignment there. But this is a space for me to explore different iterations of something, so it's not always one to one.
I see. But in terms of the features that are publicly available to the customers, you probably also have the same features on your side as well in the sandbox.
Yep. Totally.
Amazing. And then you mentioned about production code. So, again, I'm I'm gonna ask you a lot of new questions. You're gonna be like, why is this guy keep on asking me new questions? But we're just gonna roll with it. So when you said this is production components, I wanna make sure I understand that correctly. So all the stuff that I see here, all the components, like the go to tools button there, this is the same treatment that the engineers are using on their side on production.
Is that correct?
That's right.
Wow.
This is really amazing. And then because we have both you and Allan together, I'm just gonna quickly page Allan in. So, Allan, for viewers, like like, what's the elevator pitch for Beyond Identity, like, what this product does just so they get a context in layman terms?
Yeah. For sure. I think, look, in in layman terms, this is about getting visibility into the agentic and AI activity happening in your environment.
And so really what you're looking at is the ability for an IT or security engineer or CSO at a security company to be able to come into here and say, okay, people are using these MCPs, they are running these LLMs, these agents. Here's how I wanna actually take control of my environment. I wanna write some policies and say, I want you to run and use AI as much as possible, but I want you to be cautious with ensuring you're only using preapproved APIs and MCPs as an example. And so what Bekki got to work on was a zero to one product for us where we took our foundational core of how we build security software and applied it instead of for a human, we applied it for agents.
We traditionally work in the identity access space, which is people who go to work and they try to get access to different things in their environment, or doing something very similar except for agents who are now also theoretically employees. And if you think about what's actually happening in the industry now, it's like everybody's encouraged to use AI. And a lot of times, the non ultra technical people who are jumping and playing with AI, they're jumping in things like Claude, they're just putting approve. Yes.
Yes. Yes. And Claude is pulling from the Internet, and there are bad people on the Internet who are putting bad things there. And if you are just clicking approve to things, you are risking downloading some bad stuff to your your computer, to your works environment.
So that's what this is all about, Rose.
Got it. Thank you so much, Allan.
Going back to you, Bekki. So let's just kinda, like, play around with it. I just wanna quickly see if you can just walk through this local environment that you set up, the sandbox, if you can just show me different views and stuff so I just get an idea of what you've built here.
Yeah. So what's really interesting about, like, the sandbox environment that I made and, you know, using Claw to build it, I was able to kind of expand it into this command center where I can manage the entire product.
So right now, what we're looking at is the admin console experience, but we have also an end user experience as well, like or employee experience. And so I'm able to kinda pull that up and see that here.
I also have, like, our sign up and login pages pulled into this environment so I can see everything.
And real quick, right there on the sign up page, the whole thing is functional. So right now, if you click on the authorize or cancel any of the buttons, this whole thing works?
Yeah. It should be, like, working. I just have everything pulled in here so I can basically take a look at that entire flow.
This is amazing.
Yeah. And then something that's very unique about us, we have a terminal experience.
And so I wanted to also be able to see that in the sandbox.
So I have that pulled in here. So I've kinda simulated our our terminal why.
Can you show that, the terminal simulation?
See, like, here's, like, one one experience.
Wow.
There's also, you know, like, what does it look like if there's some kind of, like, air state? Right?
That's all kinda simulated here.
So I've got a very like, I've never seen anybody do this. Like because it's like, why bother capturing this terminal experience?
As a designer, you're working on this product. Right? So what was your reason to capture it? Someone could say, well, the engineers deal with it. Why should we, as designers, have to worry about all this?
Yeah. That's a really good question, actually. I I simulated this terminal experience because it is a core part of how our users use our product. I will say it's not really easy from, like, a design perspective to test these different scenarios and states.
So, like, for example, an admin creating a security policy like this where they wanna block certain usage, in order for me to be able to to experience that, like, I would need to maybe ask IT or security to create this rule for me. Right? And so that's it's very manual. Right? And so with the simulator, I can see that whole experience without, like, the the complex setup.
Wow. Yeah. If can add in here too. I think one thing that's really interesting, like, this CLI type of UI is something that designers are gonna need to start thinking and caring about as AI becomes more prominent.
And part of Bekki's responsibility now as she's working through this is, like, understand what that end user is actually gonna deal with, and can she optimize and make it better? And she did something really incredible here where she actually is referencing the real code, so it's simulating extremely accurately. Right? It's not just some recording or things that she added in.
This is pulling in the code. This is what someone would actually see. And so she could go in here and she can make requests. Maybe she wants to make the policy denied alert message that appears here more visual.
Maybe she wants to optimize things like that. Maybe she wants to remove some of the content that's getting displayed. She can do all that over here and make that proposal and then share that back in that same repo with the developers and say, here's some optimizations I think we should do. It's no longer that this terminal style CLI experience needs to be poor or just edge edge heavy.
Right?
Like, we can help optimize these things.
I'm having a moment right now because I never thought about it like that because usually, historically, when you think about terminal, it's always been engineering heavy experience just spitting out what the computer is thinking. But you got me thinking, like, if Bekki now is able to, like, look at all flows and something doesn't make sense, she can now literally share some output based on this with the engineers like, hey. Can we update the copy here to make it more easy to understand, like, what just happened? Can we have another, like, evaluating policy? Like, what if she wanted to change that to something else that was more accessible or layman terms? Wow.
So when you say optimize experience, do you mean that now designers, if they like, for example, you have the first run. So if we go to the policy denied thing you're right. Like, you don't have to, like, ask an IT admin to this. You can just simulate this experience here. So when you say optimize experience, are you thinking more in terms of copy? Like, improving the copy here, which is pretty like, usually is very engineering heavy for a lot of these terminal experiences?
Right. Yeah. So it can be copy. You know, you can also play with things like add in some type of imagery. You can also play with the layout. Like, you can create containers or boxes to kind of break up the text, and that really does contribute to how someone experiences the terminal.
So those are all things that we're kind of paying very close attention to as part of our That is mind blowing.
And then can you go can you please show me the secret controls? I wanna see, like, what if you toggle between different types of users, like from an admin to an end user?
And I I kinda wanna see what changes in the sandbox when you toggle there.
Yeah. So so this is the admin experience. Right? There's a lot more pages that we're displaying here, and it's because they need to manage, right, their users.
They also have analytics that they have access to. Or this is the empty state, but this is the filled state. So these are insights for them based off of, like, you know, their organization's use of AI. There's policy controls that they create from a security perspective.
So these are things that, like, an admin would need, right, need to see and configure.
From an end user perspective or an employee perspective, they don't need as many pages. Right? They don't they also shouldn't have the permissions to be able to configure things. Right? So Wow. They just have a simple getting started.
They have, like, their profile where they, you know, you where they can see their information and the connected devices that they have. So it's a lot more condensed for them.
This is okay. So this is really like I'm having an moment because the old school way would be that you would have a Figma file with a page or or something, and you would track all the the frames or screenshots.
And now this here is like you can just click a button and just experience the whole thing.
So how were you tracking this before? Like, now because of the sandbox, you're able to track your entire experience. But I'm kinda curious to know, how were you doing this before before you even started using Cloud and these AI tools?
Yeah. So in Figma, we were and let me I can pull up a a file.
So this is an example of how we used to work in Figma. So there's a combination, right, of sometimes screenshots that we would use, some things that we, you know, we were actually designing for. Right? I would create mock ups and frames within Figma, something that we also have, like, similar to this current product.
And to note, like, this is a different product file that I'm I'm showing you guys because this this product here was completely in a cloud code, but this is an example of a different product that we have. But this particular product had, an email experience. It had a web experience. It also had a native application experience. And for us to be able to kinda map that entire journey, we were pulling in a mix of screenshots and actual frames.
Oh my god.
Obviously, you can see. Right? It's harder to navigate, and it was a lot more difficult for us to be able to kind of, like, get that entire flow. So I think with Cloud Code, a lot of that has been optimized.
And so my question then comes is, like, with Cloud Code, since you have the whole thing in the sandbox, do you feel like when you share your prototype links with execs, they get they find it easier to understand because they can literally click through the whole flow versus, like, in Figma, it was like you had notes and annotations and screenshots. And, like, what is the reception being with execs when you share with them these sandbox prototype links versus the previous Figma flows?
Yeah. I mean, I think you you kind of, like, pointed that the pain point out very clearly. Before with Figma, you know, there's a lot of different pages. Right?
There could be multiple files. Right? If if there's too many iterations in a one particular project file, we might move over to another one. Right?
There's a lot of things to navigate there, and it was sometimes hard for stakeholders to know, like, where everything was and what version was, like, the one that they needed to review, like, despite us taking notes and and, you know, adding comments and stickies and things everywhere.
But with this, it's just a single place for everything for them to access, so it's very easy for them to navigate.
Right? I have also these I go back to the admin experience.
I also have, like, different iterations that I might be exploring, and people are able to easily view them in this this panel that I've Okay.
I can I see that? This is this is pretty interesting. Let's like can you explain to me how you're organizing different iterations for this prototype? I see option one, two.
Yeah. So something that I I built in here, right, something that's important, right, from a design process perspective is the ability to explore a lot of different directions.
And I needed a way for me to retain these different iterations so that I can share it with the design team or other stakeholder to get feedback.
And so I actually use Cloud Code to create this kind of, like, another secret, like, sandbox control where I can see, right, the current version, and I can also go through different options, right, that I've mocked up. There's different states that I've also created.
I was exploring, like, different locations or placements for this particular experience that I was designing for.
You know, a lot of different directions. Right? I wanted something a little bit more visual here.
This is another visual that I was exploring. So this is a way for people to kind of navigate and see my process and how I was iterating and designing for this particular experience.
Got, like, options within the options nested. Like, I've never seen anyone like, oh my god. This is insane, Bekki. Like, you literally have, like, what is it that that activity in line?
Like, even that activity map, there's so many different options. Can you walk us through, like, how you decided to, like I don't wanna use the word information architecture, but just group these options? Because okay. Back in the old day, it would be prototype one, two, three, four, five, ten, and Figma, and each one would be a different one.
So you would just end up with fifteen different links or something like that.
But then here, how are you deciding to manage this chaos?
Yeah. I mean, essentially, you can see, right, these are different options, but it's all within this one space. Right? And I've created these dropdowns so I can easily swap between the different states easily. And so the interaction feels very minimal.
And it's all, yeah, it's all in one place like you said. Right? There's not, like, multiple links for people to navigate to. It's just one place with this control panel, and you can still see the different options. You can see the different states that I've designed for, and it's I think it's made it really easy for people to to kind of go through my design iterations and give that feedback.
So question. So right now, it's talk it's if you look at what it's it's selected right now, it's option one, variant one a, and the states are empty and location is in line. Let's say you specifically wanted feedback only on this.
How would you have to tell this to, like, some stakeholder? Like, I want you to go to this in, like, Slack or something.
Like, I'm just I'm thinking out loud. I don't know what the answer is. Like, what do you do in that kind of scenario? Do you have them toggle that and be like, hey. Just give me feedback on option one in these states? Is that what you do?
Yeah. Yeah. Definitely. Yeah. So that's, like, one way. So there's a couple of ways. One is sometimes we'll have these, you know, video calls like this, and I'll kind of walk them through different iterations, and they'll give me feedback.
If it's something that's a little bit more async, I will tell them, right, to pull my branch and navigate to a specific, you know, a set of options for them to review and give me feedback.
Or I'll do like a video recording of, like, you know, how to navigate my branch. Like, please look at option two and three. These are the latest iterations, and please give me your feedback. And a way for people to get feedback, right, is we have this plugin that our wonderful manager, Allan, built.
They can pull this branch, right, within we use this IDE Visual Studio to do a lot of our work too. So I have a combination of, like, having a web view of the actual product experience, but, of course, I'm typing into Claude here.
And we have this plugin where people are able to leave comments on the different designs that I've put together.
Can we leave a test comment now?
Yeah. We can try that. So we can say okay. AirPillar.
Oh, wow.
And so then you can see this comment. And once people are able to once they leave comments, they can push it up, and then I can pull that, and I'll be able to see everyone's feedback.
Wow. Okay. So this is basically like, Allan's with this plugin has recreated the Figma comments feature that we had. Wow.
That's right. Yeah. Look, Versus Code, the Versus Studio, the IDE is, like, one of the most commonly used out there. It's an IDE that's designed and built for engineers, though.
And so we're in this weird transition phase as a world and as designers trying to jump into this tooling where we don't have a lot of this assistive designing stuff available to us. I will say, like, things like cursor and things like even what Cloud Design has just done recently, they're optimizing these things and they're building it right into their product. But if your organization is having you use something like Versus Studio because it's free and it's what other engineers are using, This plugin is like an add on to it. What I would encourage other designers is, I don't have an engineering background.
I built this because I knew it was needed, and I shared it with the design community to make it available to help close that gap. Something that Bekki didn't mention when we were working, I think is so interesting, is there was a clear gap. This has been done, and it's a solved problem. But what would happen is we would be doing a design critique either with our stakeholders or just Bekki and I or with the other designers kind of reviewing things.
She would keep notes separately in an Apple Notes pad, and there was no visual reference to things. And so that was like a a downgrade to our existing experience that we had already solved. So what do you do in this scenario? We're building with code.
We're product builders now. Just go and make something, right, and build an ad on top of it. Like I said, you can go and you can leverage these types of tools, but this is something we added because this is how we work in Versus Versus Code. And so it's something that, like, completely elevates and changes the game of leaving visual comments and feedback.
And I think the exploration, Bekki's been playing with other stuff like this as well, which is really cool.
And the comments here are tied to the specific version. So whatever version that Bekki pulled in, right, in our local environment, whenever you leave a comment, it's specific to that version. So if now you make some updates and Bekki pulls in a newer version, then those then there won't be the comments visible here.
Exactly. They get retained with with with the repo. So if I made a branch off of her last version, the comments are tied to that version. They will stay and retain with it. It's kinda like making a duplicate of a Figma file.
I see. I see.
And following through.
Okay. This is super helpful. So going back to you, Bekki, so I I get it now. Like, you know, like, you have this option and you kinda tell the stakeholders which one you want feedback on.
Now I know you like your stuff very neatly organized. That's very evident from your design. Like, you like things neat and clean. Like, I would even vasure that you probably have read.
What is that Mary Condo book about the art of tidying up or that book? Just my guess, Bekki. I'm not sure. But what point do you say that no more options?
So if you go back to your secret controls, right now, is, like, six options visible or something like that.
So do you personally think there is a there should be a cap? Like like, at what point do you remove an option, or are you okay if it's, like, twenty different options here?
Yeah. I think, like, this space is for me to do a lot of the explorations. And so I do retain this just for myself and for us to also be able to refer back to it. Like, maybe we go with one option, but we wanna revisit another option for another part of the experience. Of course, when I hand things off, like, the developer is just pulling in, like, the final version.
In terms of, like, how many options I actually create, right, I think it's, like, once there's a right direction, like, a different direction from the one I previously did or if we get enough feedback where it makes sense for me to do another iteration, then I will add it. But within the sandbox, I do try to keep it all because this is sort of, like, my my place to kind of document my design process and journey.
Gotcha. Yep. I think something that's so interesting with the debate of how we're working here, The sandbox concept that came from Rio from Cursor was, like, the big unlock for our team on how to operate in an enterprise environment. It's not just, like, prototyping.
It's not just zero to one products. While this is zero to one, we do this with our, like, legacy core product as well, and I can dive in deeper to that. But the thing that's really important, what Bekki has really worked with us to help unlock is the ability to explore in AI. A lot of people talk about Canvas tooling.
Traditional Canvas tooling allows you to place and do things like that. And while I agree, definitely, like, she is not limited to one version. Something I've heard comments and feedback from people is if I wanna make a small change, it's gonna update my entire design system, and it's gonna flip everywhere. Like, Bekki works because she's in the isolated sandbox, to be clear, she is free to just go and explore and try things, and that's the big unlock from that perspective.
But also, she does things strategically if you look how it's changing. It's like when she modifies one thing or plays with something, it's not making a global change everywhere and taking forever and Claude to make those adjustments everywhere. She has it very localized, almost as if you are duplicating a page in Figma and then making small changes to try something differently. It's not until she goes and pushes it with the other engineer partner into production where those things really take place and kinda make that adjustment.
So it's very strategic. It's very open to the world of exploration, and she's building she's building with code. So that little secret menu that she has when she hovers over in that right corner, I mean, that's something she just built and did. She can make this twenty times bigger at a thousand options.
Like, whatever she wants, she's building with code now. Right?
So it's not it's not limited to the function of whatever that tool has enforced with her. She is a builder now, and she is adding this way to optimize the process. We really love this way, and I encourage people who are exploring to try to do these things and think outside of the box of traditional ways that you're building. Add these things for you to explore and play more.
This is amazing. Oh my god. Okay. Thank you so much for that, Allan. So, Bekki, I really like this what you have here in the getting started and all these different options. But even, like, the way you've designed this, like, setup and step one, step two is very well designed, like, very easy to understand.
So I'm curious to know, like, when you were designing this and my understanding is that you're not an engineer by training, did you do any competitive analysis of, like, what are some of these setup flows looking like for other engineering tooling or something like that to get an idea, or did you just, like, directly wing it in Cloud Code?
So as I was kind of navigating through the different options, I I did reference, like I have a couple of tools that I use for UI inspiration. One of the main tools that I use was Mobbin. So as I was going from this iteration, right, with a more text based log to a more visual kind of like journey map, I was looking at this collection of inspiration that I had pulled. So I was looking at different competitor products, looking at how they kinda visualize, like, a user journey through an experience.
And then I use that as, like I use this as inspiration while I design kind of like this next phase of of explorations regarding the getting started experience.
Okay. And do you think it saved you time? Because I know like some designers are gonna be like, why even bother getting the model in such a I'm just gonna Google images and do that. Did you feel like it saved you some time or something?
Oh, yeah. It definitely saved a lot of time. I mean, Movin is great because when you Google things, I feel like the search results can really vary. But with Movin, mean, they have it really organized. They have it by app that you can search by specific flows, and then it kinda gives you different inspirational screenshots for you to take a look at at a glance. So I do really feel like Maven is really helpful in that sense.
Got it. Bekki, I really love how you, you know, you looked at inspiration from Maven, and then you used that to guide your designs here.
What was the first version of this or the initial version, if I may, look like when you were starting out on the zero to one project?
That's a that's a really good question. Actually, what you're seeing right now is a very different version of of our product and how it started. I do have some things to share because I would love to kind of walk you through, like, the journey of how product came to be. But this is just like a quick little screenshot of our previous product UI. Very simple, very clean design, but it wasn't like a visual identity that was, you know, really compelling or memorable.
And this was also when I was starting to build out the sandbox. So that's why there's a very limited pages here. Right? You'll see it's like very sparse and there isn't much here yet.
Your visual design taste is very high. So when you make a statement that or you say that the visual design wasn't very memorable, I'm just genuinely curious to know, like, do you think it's because of the the color? Because it's very, like, white? Or do you think it's something else more to that that is not making it memorable?
I mean, I think the one of the main reasons behind this reskin effort was the fact that we wanted to create something that was different in the market, and there were a lot of products that had very similar looking UI. And, of course, like, this this has a lot a lot of that great, like, light theme, and it there's a lot of white space. Right? It's a very standard product visual identity, but we wanted to take a bit of a bold approach, which is why we decided to do this reskin effort as, like, a team in an organization.
Got it. And again, I'm just, like, nerding out right now. But, like, when I think about the brand, yeah, I think on here, the only thing that stands out to me is the brand is the green thing. But then if you switch over to your sandbox, I think that one is definitely more memorable to me because, like, it's that's you have the signature, like, black there, the Texas white. This, I would definitely say, is more memorable to me in terms of brand. Like, I'll remember this.
Yeah. That's awesome, and we love to hear that. So we essentially started with this product UI. And once we decided to do this reskin effort, Allan and I were working really closely.
We first, right, to get to this final state, we were really thinking about, like, what the visual identity and creative direction would be. And so we put together this mood board on Pinterest. And we are really inspired by dark theme, this kind of like retro yet futuristic look and feel. We were looking at different color palettes, especially these kind of like monochromatic ones.
And then once we kind of explored different directions, we kind of ultimately landed on this very like terminal inspired look and feel. And this is where I started kind of, like, transforming my sandbox into this new kind of visual identity that we landed on. And so you'll see, like, I started with one page. Right?
Parts of the product is still using the light theme. Not every single page has been, you know, re redesigned yet, but it was just to work with, like, one particular page, one that had a lot of content that we wanted to kind of test with.
And then once we finalized this direction, I started basically scaling it across all of our our entire product experience.
Got it. Oh my god. This is this is mind blowing. I've got a question for you. Just like from a design thinking perspective, like, there's, like, learning out on it.
What made you, like, feel comfortable going bold with the black color? Like, in the previous version, could see there are some parts you were making bold, but that was just more of, like, not the navigation, just what the content you saw. But then here, the final version we're looking at, everything is black. So what was your design thinking going there?
Yeah. I mean, I think a lot of the inspiration that we were looking at were these, like, terminal based UI, these heads up display dashboards that have, like, this kind of, like, darker theme with, like, bolded font and bolded text to kind of highlight, like, key areas within the product. I think that's essentially what we wanted to convey with this security product. Essentially, it's a tool for for security admins to kind of see what's going on within their environment.
Right? So we wanted something where we could really highlight the content. And and in this case, we don't have much color, but there's other parts of the product where we're introducing color, and that really emphasizes it with the dark theme. It really emphasizes the color and the high, like, security areas that the admin needs to focus on. I think that was the reason why we wanted to do something a theme like this for this particular product.
Yeah. One thing I wanna add here when Bekki and I were working on this, I challenged her. I said, imagine when a lot of these types of UIs were built, they were very monochromatic because the screens actually could only show one color. And so how do we do this and break the pattern of what traditional UIs are showing now in every single dashboard?
Like, how do you enforce? How do you show change over time? How do you show negative? How do you show positive?
What are these things that you can do? And so it put a visual design challenge on top of it for Bekki to play and do research and understand what the limitations are. And then naturally, over time, we started to bring in and introduce a little bit more of that brand and that color, like Bekki said, with the later versions, but really pushing to be to be intimate and be intentional about the design decisions that were made here. It's really it was a really cool visual design experiment, and it showed how far we can push it with quad code.
Yeah. And the idea was, like, we were using these different visual elements, like icons and font weights, like casing, forward this, like, emphasis and contrast and to create that hierarchy.
So, yeah, definitely, like, a great exercise for us. And then once we kinda push those boundaries, we were introducing color in very intentionally.
I'm gonna dig even deeper into this because this to me is very fascinating. Because, like, I look at when you said font weights. I see the number eight forty seven active session. It stands out. But then right next to it, you intentionally chose the fourteen percent to be a much smaller font, very different color. So can you just walk me through what was your thinking when you were selecting these different font sizes or even the font? Like, even the font is so futuristic.
So I'm kinda just like, I wanna, like, get inside your head and kinda, like, see what Bekki was thinking when she was picking these different fonts and color for that or font weights.
Yeah. I mean, for these, like, just to kind of highlight or zoom in on, like, the usage insights card. Right? The main information we wanted to convey here is the the count of these different categories.
And then the changes, like, kind of secondary data, it's something that an admin wants to be able to maybe compare across, like, different time periods, but it's not necessarily the primary information that an admin wants to see. So that's why there's, like, a larger emphasis on the numeric value. You also notice, right, when it's an upward trend, we have, like, a a lighter color that I use versus the downward trend. It's a little bit more dimmed and muted to kind of show the difference between something that's a positive change versus a negative change.
Did you not get tempted kinda, like, just going overboard with the green and red color? You know, like, some of these, like, UIs have, like, if there's a positive thing, it's a green and red, and there's just so many different colors. What made you restraint on not using too many different colors in the color palette?
That's a really good question. I mean, our goal is to use color very intentionally. Right? It wasn't to not use color, but it was to use color intentionally. I think it's easy for a lot of products, you know, especially, like, analytics products to bring in a lot of color to convey different data types.
But I think if colors are overused, you can kind of lose the value and meaning of them. So I think that's why we were kind of trying different visual elements to convey, right, differences in data and priority of information.
And then I have a later like, another version of this dashboard where where we do actually bring in color because we wanted to signal to the admins, like, security detections or high priority information or alerts that they need to address. Like, those were emphasized in the red because those are things that needed to be actioned on immediately.
So Can I see that?
Because I was literally about to ask the next question was, like, how do you show alerts then?
Sure. I can so this is kind of like how our dashboard has evolved. So now you start seeing, like, the introduction of color.
Right? One of the things that we're really trying to highlight here are, like, detection of the different categories where we're using different, like, densities to represent different counts of this.
I see the color. Like, you got the mock mode, but even the subtle details, like, that says get started to see your data here, in the background, you got this pattern going on there.
It's a very subtle thing.
Like, you've got that get started to see your data here. There's, like, installation instruction, but you've not kept that card, like, just bland black background. It's kinda like this pixelated pattern that's carrying that red color. Can I ask what what made you do that? Like, what was the thinking behind there? Because I like it, to be honest.
Yeah. I mean, it's because this is kind of like the key action that we wanted users to do once they landed on this page. You know, once they got, like, inside or a look into the different analytics that we provide, the idea was to encourage admins to actually go in and set up our product to actually start, like, seeing their own data here.
Because this is, like, a mock mode. Right? When you first because the purpose of this is that when you first create an account, we wanna be able to kind of show you all the potential analytics that we can collect without having you actually set things up. But at some point, right, the value comes when you actually set up the environment yourself so you can see your data coming in. And this banner was meant to kind of highlight that action or to to encourage users to set up their system afterwards.
And this is the detail. Right? Like, Jay, if you think about it, this is where we are now in design where you need to differentiate yourself in the product. And so little subtle visual cues and detail is the care for craft that we can introduce here and experiment and play with and push some boundaries.
It's the care between a generic dashboard and something that you're trying to push and try really differently. And it's the details that I love. Like, with this project explicitly, something that Bekki and I emphasized was, let's make this something that it doesn't feel like every enterprise product where you where you're like, I gotta put this on my portfolio, and I don't love how it looks. I was like, let's make this something that you are so proud of and you think is genuinely really cool and are excited to show everybody.
And so with that freedom, we're allowed to push the boundaries, and it's it makes it so much more exciting.
So I wanna put you on the spot a little bit, Allan, right now. Is since the designers on your team are using Cloud Code end to end, they're really getting the craft and stuff.
As a head of design, do you see, like, the role also changing for design execs? Like, there used to be a time where, like, a head of design like you could just be a people manager, not getting into the craft. Do you see that changing, Mel?
I do. Look, part of my role or responsibility now is to own the language of what's coming out of this company and what's being produced. And so I operate a little bit more with a creative director hat now in this intention.
This means that well, like, multiple things. It means everything that's coming through here is a representation of my name on top of it as well. And so I do everything I can to kind of push my designers to take their craft levels, their taste to the next level, which means we literally will sit and tune things together. You can ask Bekki how many times we will go and make small modifications that actually matter and care, and it helps grow Bekki and my other designers as well.
But as a design leader, it's about her growth, but it's also about her care for what we're doing. And it's how we differentiate ourselves. I think one thing that that's really interesting is design is now democratized in this sense. Right?
So anybody can prompt something. That's not the barrier. The usage of the tool is not the barrier anymore. And so these details, this finessing that we're doing with the UIs and this example here is where a design leader can come in and empower their designers to push their craft as much as possible.
I'd highly encourage design leaders to take that step a little bit deeper than just people managing and be in the tools and actually work with them. I am building stuff in Cloud Code all the time alongside this. One example of Ceramic Mark was, like, something I saw that my team needed from a process perspective that could be emphasized. And my team is heads down.
They're busy. They're working on things. And so as a design leader, I came from the side and said, let me go and see what's out there and see if we can use something. Because we're so early in this journey for AI design, I didn't find anything.
So I said, okay. Let's just build it, and let's make it work, and let's share this with the design community as well. And I think that's the mentality we need to be having is positive and pushing towards this new direction of working.
So, Vicky, I know it's gonna be very awkward for you to, like, answer this question in front of your manager, but there used to be a time where, like, design managers would just leave comments in Figma or give you feedback, but they would be very hands off.
How do you feel when, like, let's say, Allan, your manager is, like, literally in the weeds with you, able to take your designs and create different variations, you know, like push those changes to you. What is your take on it? Like, working in the weeds in this kind of environment.
I mean, I honestly love it. I love that, like, we know we have two different types of sessions. Like, somewhere he's just kinda giving, you know, feedback on the work that I'm doing. Sometimes we have these working sessions where we're brainstorming and ideating on things together, and I think that's very powerful. Like, that's the best things come out of collaboration. And so having a manager who's able to jump into the files with me is really great.
Oh my god. Wow. So, Allan, like, is really amazing. Like, we got to see how Bekki is using Cloud Code for zero to one projects.
Now I'm gonna, like, shoot a lot of questions at you, like, what made you move your design team away from Figma into directly starting to prototype into any Cloud Code?
Great question. So look, I think a lot of people are probably feeling this right now, this pressure of trying to become AI native and be as efficient as possible.
And this movement was happening at our company. We saw it firsthand. And traditionally, it's like, it all starts with the engineers who are using Quad and these models to help with coding because it's a natural thing, and it's where these bigger companies leaned. And I think for me, to see it affect other people, other departments in my work.
And as the design leader, I think one thing that was scary that was happening was people were building stuff, and I had no grasp or control over it. And naturally, people were building stuff. It just didn't retain any of the look or feel of our brand. I remember some people would just go to, like, our brand website and try to pull it and throw it into Cloud Code and say, make it look like this.
And, you know, that has nothing to do with how our product is or doesn't reference anything with our design system. And what you're looking at over here is our new home base, right, and is where the designers go and reference their individual projects. And as you can see specifically, these are all sandbox environments over here. This is the safe space I've made for the designers to work and build their own projects individually.
Gotcha.
The first thing I had done that I think was really important is just establish the design system that our designers can use and that other people in the company can use. And look, this is what it looked like before. Right? You're talking about traditional Figma design systems, and we didn't have a dedicated design system team.
We're a team of four designers here, and we did what we had to do. We're operating and moving super quickly at all paces, and the reality is we start to see a lot of design system drift that was occurring. And so the first thing I did is I pulled in Claude, and I started to work inside there and say, I need a design system. The early conversations with the dev team, and this might be something that the audience is dealing with as well, is I don't wanna give you access to production code.
I don't want you to touch anything like that because I have no idea.
Well, don't let that discourage you from starting. Really, what I did is I said, I know I have a design system in Figma. I know I need an AI version of my design system. So over a weekend, I just jumped into Claude and started working with it to define a new design system that I can just test out and run my theory. And it worked with building this thing that I called Machina.
And what you're looking at over here is essentially, it's almost like a storybook it built on top of it. And what I did is, we're talking about six months ago when agentic coding was really starting, and so there was no framework of something like Cloud design. And if I were to really redo it today, that's where I would actually put this design system to be clear. Even the concept of the Figma MCP didn't exist, so I did everything really manually.
But as I mentioned over here, if you look at my Figma file, I went into Cloud, and this is what I recommend doing is, like, if you don't know how to do this, is ask Cloud. I need to build a design system for my team and my company. I know the frameworks that we're built around. Right?
We leverage Material UI. We use Bootstraps for icons. I know what our color palettes look like as an example. So what I literally did is said, Claude, walk me through every single step of building a design system from scratch that will work in AI that you can help read.
And it slowly started to ask me questions. Do you have all these things? Do you have your headings? Do you have your colors?
What does your palettes look like? And what I would do is every time it asked me a question, I would take a screenshot of what we had in Figma, and I would manually paste it in there. And like I said, there's optimizing better ways to do it today. But ultimately, what it ended up doing is recreating what you're seeing here into this over here, which is replicating and building it out.
And it built a website that I could share with my team at the time, like say, here's all the pieces and components of our design system. Something that was cool that came out of it was just like, let's make sure this is WCAG accessible. Right? So walk through everything and make sure it passes all the minimums.
It built me out like an example app of what this would look like. And if you're looking at this for reference, if you saw what Bekki had showed earlier, this is the design system Bekki pulled in to start her new zero to one project. Right? So this looks very familiar to it.
Right? She started a brand new project, called that design system from that repository, and used that to start. And then when we talked about doing that reskin, she actually made a duplicate of that design system and started to build on top of it to make it look. But the core foundation of that design system is what was built over here.
So this is how I did it originally, and, you know, I think it's something that people should do right from the start. But I think look, Jay, the thing that's really interesting for people and the challenge that people are having is I'm working with an existing application already. Right? This is Ceramic Mark, what I had mentioned over here.
I'm going to I opened up a dev server over here. I'm gonna put the local host in, and this is displaying in an iframe. This is what the version of our app looked like. Not a hundred percent, but ninety five percent.
Right? Close enough. And close enough is good enough, in my opinion, for how we operate. And one thing that I wanna emphasize over here is what I did is just rebuilt our entire app.
I built the baby version. Rio from Cursor was the one who really inspired this and was the unlock for designing an enterprise. It was like, rebuild your app, make it work in a version that's a sandbox. And when Bekki kept referencing sandbox, that's what this means.
This app, everything is essentially a front end that's been rebuilt entirely. Wow. And this one was leveraging the original design system that I had built, the Machina one that I just showed. And when I had built it and showed the front end engineering team, they were like, okay, I get it. Let me give you access to the real design system. And so now this is actually talking to the production design system over here, which means everything that we have from the front end perspective is just fake stuff that's living, but it feels the real product loaded with a bunch of mock data that we can go in and dig in and get deeper and deeper into and actually play with us. And at the time, how I built it is just when every page, one by one, took screenshots and said, let's rebuild this with the design system as guardrails for how we're monitoring and working.
One thing that's really important that got built out of this as we were working was the MD file that that we were referencing. Let me just find that over here.
I have a better version of the Cloud MD because at the time when I built this, the concept of Cloud MD actually didn't exist. And one thing that's really interesting that I wanna share is I showed this to our engineering partners, and they're like, woah. You you did what? Like, you made it work like this, and you're not affecting production at all?
And my CTO came to me and he said, Allan, I know you guys have been pushing for trying to make this updated look over the years. Right? This looks like a generic application. He was like, I want to challenge you to redesign this app and see what you can do with it now that you have all the framework and components in place.
And so that's what I did over a couple of days. I took all the reference designs that we had done over the years and worked with my design team to reskin and say, what do we want this app to actually look like? What should it take its evolution? And again, referencing that original design system, duplicating it, and starting to make these adjustments to it.
And in here, have a nice CloudMD that you can see that's referencing. And the CloudMD, the working pattern that I did that's so important is, as we work, it's not just defining everything right from the beginning. As we're working in Cloud, we're seeing stuff that gets broken as it's going. So all of a sudden, I'm doing something, and then I see that it's, I'm building a new page and it's doing a table, but the table looks different for some reason.
And so now I'm talking to Claude and I'm saying like, hey, Claude, why are you making new stuff? Like, just go and reference the other pages and make it so that it's a repeatable pattern. Don't reinvent the wheel. Or make sure that you're only using components that come out of MUI.
I don't want any custom components that are being built. And so you can see, Claude wrote these rules for me, and I expressed the intention to it. So movie components only use the theme tokens as an example, only use the type of charting library that we're working with, only reference a specific icon library that we're working with.
Here's examples of what you should do and what you shouldn't do. And one thing I did, Jay, as well as as I had built this out and this CloudMD file started to get really messy, I went back to Cloud and I was like, Cloud, take a look at my MD file and help me optimize this so that you can read it as best as possible so that if this moves on to another designer who's working on this, it's working as exactly as intended and as cleanly as possible. And Claude worked with me to make refinements to the MD file, shorten it out. It was, like, a thousand lines originally, and Claude MD only likes it to be, like, under two hundred or as as simple as possible to be refined. So this is actually using all the best practices from Anthropic while it's building it out. So it's an iterative process as we kinda work through. Right?
So these are your all your set of rules, basically, for people who are not a hundred percent, like, aware about Claude. Md file is basically or as you're building with Claude, you're you're telling it to, like, save this to memory or save this to history, and then Claude proactively is saving all this stuff to its own md file.
Yeah. So what it's doing actually right at the beginning is when you load a session in Claude, this is the brain for Claude essentially that it goes in and it looks in this markdown file, and it says, what are all the things I need to remember during this session? And so these are the references so that I don't need to tell it to do that every single time, or else it will start to drift away and start to work optimized. The thing I like to reference working with AI at this stage exactly right now is that you're working with a really eager junior designer who wants to do things and get it right, but they don't have all that experience and don't have all that knowledge.
So you, as someone who's the professional in this case, needs to remind them and tell them these things. Right. And as an example, I'll never one shot something because as an eager designer, like a junior designer, they're just gonna try to do everything for you, but they're not gonna do it in an optimized way that might make sense. So as I'm working and training and mentoring this junior designer, I'm giving them notes and feedback.
And this is what the CloudMD is. It's notes and feedback for it to remember every single time it's working with me. Oh, yeah. My manager doesn't like it when I take components out of somewhere else.
My manager doesn't like it when I take icons from somewhere else or make custom icons. Or one classic thing that pops up is, hey. I wanna use these logos and drop them in. And all of a sudden, you look and you prompt it.
And Claude, for some reason, has tried to redraw these logos out of nowhere as SVGs. No. I don't want that. I want you to reference this type of library or chart.
So this is the MD file, and this is like the initial brain. But there's also the concept of skills that can run and apply on top of it. And theoretically, the best way for this to optimize work is that this is, like, proactive and not allowing but things slip through. Right?
I have this skill here, audit design system, that I'm gonna run over here on the side, and this is essentially an audit of what's happening over here.
And I've given that skill some specific rules about things I care about. So it says nothing has been modified. Let's just run a full can you have it run a full audit here?
And we'll see what spits out. I haven't done this in a minute. And this is maybe we can actually look at the skills file to see what it's doing over here. Here's the skills m d I'm gonna pull, and let's look at the audit design system, the things that it's gonna do. It's gonna check for hard coded things, it's gonna check for spacing, it's gonna ensure. And then it does it in a way that is basically saying what's critical, what's not critical, and it'll be up to me as the designer to validate and say if this is good or not. So it's running over here.
Let's take a look what it spits out for us.
And when would I do this as an example? I might make a bunch of changes and then have it do it.
In the future, there's gonna be a world where the design system is gonna be fully respected, and you won't need to do things like this. And I think they'll be a little bit less important. But this is really interesting. Let's say I actually gave, because design is democratized now and a PM maybe jumped into my file and added some stuff as an exploration.
One thing I might do is run a skill like this, like an aug, and just try to have it check it for me automatically instead of me having to manually look. So you can see there's tons of things that are popping up over here, and it's saying the amount of files that have been scanned, things that are potentially issues. And so it's saying real critical violations in the sample data we should be referencing. This is a great example.
I wanted to always reference a palette chart and not actually make hard coded things in there because this should respect how I'm working with my engineer when they're when they're building out softwares. You're not throwing hard coded color values in specific areas. It doesn't make sense. You should be referencing exactly how a design system should work.
So this would have found something for me, and I would have actually gone through this and said, hey. Do you want me to go and fix these things? And I would go one by one and potentially tackle and fix them.
So it's like one example of how a skill could be used. I do it for accessibility as well. Again, it should be doing it by default, but if it doesn't, then this is how it would be respected. Right?
Yeah. I mean, my workflow is a little bit different. Like, I'm using skills more for video editing, so I have a skill for checking the video edits. So, like, your interview comes in.
Right? So I have a skill that but I use Core Work more than Cloud Code. It's gonna check, like, is Allan's screen share on at all times? Is Allan's, like, video in a circular format?
So those are some of the skills that I've been playing around with to automate some of the video production.
For sure. Look. One thing with skills is, like, there isn't a real standard just yet.
And I could go in here and and ask Claude in this conversation and say, generate me a list of a thousand design skills that would be helpful, and it will do it because it's that eager, happy Yeah.
Junior designer. It doesn't mean that all of those actually apply. The real way you wanna work through this is as I'm working through, I know I don't wanna have to do this again. Let me just build a skill for this so that in the future I can re reference. Don't just go and load a bunch of stuff and bloat your software as you're going through this. Make it valuable stuff for you.
Maybe the last question I gotta ask you before we before I let you go is, I see a lot of designers right now trying to optimize for token usage, trying to, like I've seen the workflows where they will use a lower model, not use the latest cloud model, and try to save some tokens there. And there's just so much conversation about, like, what can we do to optimize for tokens? I've seen design managers literally track users across the teams and call out. What is your take on this token optimization as a design leader?
It's a great question. It's I think it's the wrong conversation to be having with where we are in AI and design. If your designer is worried about token optimization, it means they're not exploring or pushing the boundaries, and that's really the phase we need to be right now in my opinion.
When we first started and we were given some keys into playing with AI for design, we started with an API usage. Essentially, engineers all got these, like, premium accounts, and then everybody else got this API usage. And very quickly, the design team became one of the top users AI, and quickly we validated and showed our need to be in the premium and at the same level as how our engineering partners are operating, because this is how we're working now. And the team was very happy to move us over there. And I think, look, when you're working and thinking about token optimization, now you're thinking about the wrong thing in the sense of you are, like, trying to preplan, okay, what change am I gonna make over here? What change am I gonna make over there?
To be empathetic, if you're paying for your usage and your token, like an individual independent designer, there's not much you can do. The reality is AI is expensive and it costs. Right? If your team has invested in this and said this is the way we're gonna work, then I think designers need to be empowered and set free to operate and work from this perspective.
So to me, in an environment, and if you're a leader who's talking about how much should I let my design team operate with AI, like, give them the space to operate as you would with your engineers because this is how you really unlock the freedom for them to build and explore and do things that are very different than just focusing on how do I only work within this confine that you've already set for me. You've already set me up for a losing battle and an uphill battle. And that's why I think it's the wrong conversation to be having, unfortunately. Let designers be free and operate and run.
It's not something that I'm ever concerned. Bekki, I don't think you mentioned that one time you ever had, like, a warning about token usage. I know from my personal cloud account that I pay for out of pocket, I hit the limits all the time.
But for my work one here, I'm empowered to work and do what I need to do, and I think that's how it should I just wanna say thank you so much, Allan, for coming on sneak peek and stowing with us the entire Cloud Code end to end workflow.
And Bekki, thank you so much for coming on. One final say, if you have any words before we wrap up is, what does it feel like to work on a design team, Bekki, where you have, like, unlimited token usage? Where your design manager's like, hey. Go wild with the token usage.
It's great. I I haven't gone wild with the token usage. So I do love the space to be able to explore, and I I'm really grateful that I have the support from Allan and the organization, like, company to be able to to really go deep into these tools. So it's been great.
Yeah. Thank you so much, both of you.
Thank you, Jay.
Thank you.
Hey. This is Jay. It means the world to me that you watched this video. If you want to unlock the AI design and grow to design interviews with designers at some of the top companies in the world, then head on over to sneak peek dot design and subscribe to the newsletter.