Alright, so design-wise, this is where we currently are. It doesn't really match the design at all, so it needs quite a bit of work. So for a refresher, here's what we want. If I switch over, this is our dashboard, and I want you to notice that we don't really have panels in the traditional sense, so if I switch back, all of these background colors should not be present in the new design. So it's a little less blocky, I think. The activity feed, we don't even have activity right now for this local

So it's a little less blocky, I think. The activity feed, we don't even have activity right now for this local environment, so I want to scaffold some of that. We have a leaderboard, assignments, a recent course, and then we have a list for team assignments and then another tab for your own assignments, and again, none of this is really reflected here. So, well, we have this, but not quite right.

here. So, well, we have this, but not quite right. Okay, let's get to work. Alright, here's where we left off. So let's begin. I now want to switch back to the design, but first I would like you to create a cedar class so that we can whip up a new team with members, with experience, and with activity so that I can review all of the relevant sections.

activity so that I can review all of the relevant sections. Alright, that's done. So it looks like it already ran the cedar. We have a new team with members, invitations, series, assignments. This should be everything we need. So I can go ahead and log in as this user to review our demo account. Actually, on that note, why don't we just set up a demo endpoint that will automatically switch to this account.

automatically switch to this account. Alright, so now we set up a new demo endpoint that is admin only, and when accessed it's going to set the authenticated user and then redirect to the dashboard so that I don't have to do that manually. Alright, that's done. So let's have a look. Alright, let's give it a shot.

So let's have a look. Alright, let's give it a shot. So we go to team/demo. Alright, so now we have our demo account. So we have some members here, some experience, a little bit high, don't you think? We'll fix that activity. What else do we have? And assignments. Okay, so now we can get started.

And assignments. Okay, so now we can get started. Okay, so let's start with a fresh context. We are working on the team dashboard section and the current implementation does not match our screenshot. I want you to notice that the current implementation still uses panels with the solid background color, even though our design does not. So there are a number of inconsistencies that I want you to fix.

color, even though our design does not. So there are a number of inconsistencies that I want you to fix. Your goal is to reach near pixel perfect precision within reason. Next I'm going to say review team. What is it? Dashboard. What's it called? Team dashboard.png. Yeah, so on this note while it's doing its thing, remember, wherever you can, give AI

Yeah, so on this note while it's doing its thing, remember, wherever you can, give AI a way to determine success and completeness, right? So in this case we're saying, hey, you want to aim for pixel perfect precision. If you're working on back end code, you want to say, hey, these are the tests. You are not done until all of the tests complete, right? So you give it a loop, you have an end point that it can shoot for. Otherwise, if you don't assign that end point, you'll see sometimes it'll just finish off and you'll set yourself and you're not done at all.

finish off and you'll set yourself and you're not done at all. So these are a little helpful techniques. All right, so that's done. But my guess is it's not going to be quite right. Real quick though, let's take a look at the changes. So it updated all of these files. It replaced all of the panel components I have that have the solid background color. It focused on that a lot because that is what I referenced.

color. It focused on that a lot because that is what I referenced. It replaced, yeah, the background colors with transparent containers. Okay, however, if we take a look, here's the old design, let's give it a refresh. All right, so now we have removed those background colors, but we still have the borders. And if I scroll down, the activity feed is a little bit closer. Again, ignore the thumbnail. That's probably a, a sample course that doesn't have a thumbnail attached.

Again, ignore the thumbnail. That's probably a, a sample course that doesn't have a thumbnail attached. We have the leaderboard, so we're getting closer, but we're still just a far cry from the screenshot. So here's one technique you can use. Right now it is analyzing the screenshot and then it is updating the code to match. But it doesn't, again, you can say pixel perfect precision like we did earlier, but

But it doesn't, again, you can say pixel perfect precision like we did earlier, but if it can't see the output, then it can't do a very good job. So instead we can physically tell it open up Google Chrome and make sure that this looks the way we'd expect. So let's update it. All right, so this is an improvement, but there are still so many things that we need to implement to make it look like the screenshot that I referenced.

we need to implement to make it look like the screenshot that I referenced. So going forward, I want you to open up Google Chrome to validate your changes and to confirm that they match the screenshot that we provided to you. And once again, I will link to the screenshot. Okay, so notice I'm telling it use Google Chrome, right? So I'm going to give that a run, but while that's doing its thing, take a look at this. Okay, so yeah, we can use cloud code with Chrome.

at this. Okay, so yeah, we can use cloud code with Chrome. So I already have this pulled in on my machine, but yeah, just make sure you have Chrome installed and cloud code. And then you can start up Claude with the Chrome flag. And then we simply ask Claude to use the browser. That's it. Just say, open up Chrome, use the browser to confirm your changes. And now, yeah, it's going to do that behind the scenes.

Just say, open up Chrome, use the browser to confirm your changes. And now, yeah, it's going to do that behind the scenes. And in fact, you might even see Chrome open as it reviews the results. It's actually very cool. Okay, let's see what it's doing. So let me take a look at the target screenshot again side by side. Very good. This is what we want. All right, the header shows the team name as the big heading with managed team aligned,

All right, the header shows the team name as the big heading with managed team aligned, right? Yeah, yeah, yeah. Target shows members in a compact horizontal row with small avatars names, XP values, blah, blah, blah. What else do we have? Each assignment at the bottom shows a play icon and thumbnail with the title. Let me start fixing these one by one.

Each assignment at the bottom shows a play icon and thumbnail with the title. Let me start fixing these one by one. Perfect. Okay. So yeah, this again, design related work with AI takes quite a while. So I wouldn't be surprised if this takes another 10 or 15 minutes. Okay, that's done. And it did think for about 20 minutes. So let's have a look. And immediately I can see some issues, but it's also, okay, quite a bit closer.

So let's have a look. And immediately I can see some issues, but it's also, okay, quite a bit closer. So we can see that it is now respecting the headings with the white text in the border. I now see the activity icon. I still need to a little work there, but close, right? The leaderboard is numbered recently released. This is wildly big. It should be like that big. That's okay though.

It should be like that big. That's okay though. If we scroll down, team assignments is now in the left column and much closer to what we want. Now it's just a matter of font size and spacing. So it's grouped and did not started and completed. Yeah. So progress, right? And here's the deal.

So progress, right? And here's the deal. On Twitter, I get the feeling that people are able to one shot these things, right? They do a magic prompt in the AI perfectly implements the design. Maybe they know something I don't. It just doesn't work that way for me. Despite the best of my abilities, it will often just miss things. And it's a back and forth. I'm constantly going back to it and saying, okay, here's what you missed.

And it's a back and forth. I'm constantly going back to it and saying, okay, here's what you missed. Notice this, this, this, and this. Notice that you ignored this entirely. Go back and focus on it. Also it helps to break things into pieces. So I'll show you a new example. Which one should we do? Why don't we do this one at the top? Notice here that we have the label and blue.

Why don't we do this one at the top? Notice here that we have the label and blue. It should not be blue. We have the email below it, but let's have a look at the screenshot. And yeah, if I zoom in, you can see this is actually how it should appear. Minus the pixelized edges, which I've now retired. But yeah, simple, clean, I'm not seeing the menu bar at the top. So here's what I'm going to do. I'm going to copy this and feed it to the AI. But we're going to take a slightly different approach.

I'm going to copy this and feed it to the AI. But we're going to take a slightly different approach. We're getting closer, but there's still more work to do. Next, let's focus on the member card component. So now I'm going to drag the screenshot and say, analyze this screenshot of the member card. And I want you to notice the styling, including borders, font size, color, background colors, margin, et cetera.

background colors, margin, et cetera. And once you have identified these characteristics, I want you to apply them to your current implementation of the member card. Notice that in its current state, they do not perfectly match. OK, so yeah, this is another technique I will often use. We're going to zoom in. We'll call this the zoom in technique. You zoom into a specific section.

We'll call this the zoom in technique. You zoom into a specific section. You provide a screenshot to make it crystal clear what you're referring to, and you start by advising or telling the AI to analyze it and extract all of the key details, extract the colors and the margins and the padding, the spacing, the padding, the borders, things like that, the font family, the font style. And then if you're explicit about that, you can then say, once you have

like that, the font family, the font style. And then if you're explicit about that, you can then say, once you have identified those things, take what you've learned and apply it to your current implementation. And I don't know. I've found that this does lead to pretty good results. So let's see how it turns out. OK, and now that's done. So if we switch back, yeah, I think this is a good bit closer to the design. Once again, take a look at what we have here.

So if we switch back, yeah, I think this is a good bit closer to the design. Once again, take a look at what we have here. And if I switch back pretty close, right? And do keep in mind, once again, we've removed this from our style guide. And I think it remembered that we're no longer using those pixelized corners, but we have the blue text. It matches the spacing, the gap in between quite a bit closer. And yeah, so here's the deal. It's like three steps, right?

And yeah, so here's the deal. It's like three steps, right? The first step is begin with your design and start the conversion. Technique number two would be to introduce playwright or chrome. So it has a way to validate its work, but even then, it won't be perfect. And then step three will be, at some point, you got to zoom in and go through each section and say, OK, now we're working on this. For example, behind the scenes, here's what I'm going to do after this video. I'm going to go right here and say, OK, let's analyze this.

For example, behind the scenes, here's what I'm going to do after this video. I'm going to go right here and say, OK, let's analyze this. And compare it against the actual version. And I'm going to prompt the AI and I'm going to note, hey, notice that the links are white and they have underlines. Notice how we are clamping this to one line and then below it, we have the time stamp. We are not doing that currently. I will also note that right here, well, I think we need a little more space in

We are not doing that currently. I will also note that right here, well, I think we need a little more space in between the icons, as you can see here, it's not quite the same. And I would work through that. And then I would work through this section. Notice we have XP and how they're doing in this season. But that's not represented anywhere here. I would work on that section and I would provide screenshots and I would zoom in.

I would work on that section and I would provide screenshots and I would zoom in. And it's just a long back and forth. And yeah, maybe there is a shortcut. And if there is, cool, but I haven't found it yet.