YouTube Deep Summary

I have seen a huge range of success and failure of people using prompts to build UIs. Whether you're vibe coding or building with tools like cursor or claude code, a few simple tricks can give you way better results for using AI to generate and edit user interfaces from everything from small to very large and complex projects. I've got 11 tips for you. So, let's start with number one. Remember one important thing. AI does not have eyes. It doesn't know what you're looking at. For instance, I generated this whole material UI dashboard, but there's not perfect alignment. Here, this placeholder text isn't quite aligned right. And here, these avatars aren't either. So, what I'm going to do is I'm just going to grab a screenshot here. I like to use command shift 4 on a Mac. And then just paste it over. And I can just say fix the vertical alignment of the avatars and search customers placeholder text and submit it. Now the AI doesn't just see the code that was rendered, which is cool about products with a visualization layer like Fusion or in products like Cloud Code and Cursor. They see nothing. They have no idea what you're looking at what codes on screen at all. But it also will see the pixels. So it can see, oh, you're right. That's totally not vertically centered. And it could see things that you don't have to bother typing like, oh, the avatar is aligned to the top. And search customers has some excessive padding top and is actually more aligned towards the bottom. Great. The agent here has updated my avatars to be vertically aligned. It's much better. There we go. After another update, it got my placeholder exactly the way I wanted it. Now, let's jump into tip number two. Provide the right context for the AI. So, here over in cursor, these are some of our rules for doing development on the Fusion product. You just saw here we give an overview of the project structure key components and now every time we prompt saying update the chat update the visual editor guidelines areas to look and other things are distilled down. In products like Fusion itself you can add custom instructions as files or in the UI too. Good rules are things like say use the design system very strictly adapt screenshots and prompts to always prefer design system components as opposed to divs and HTML soup. Now, products like Fusion, Cursor, Claw Code, they're very good at looking at your code by default. So, you don't usually have to say things like, "Here's the libraries we use. Here's how we like to code." It'll see that and it has that context when it's generating. And models like Cloud 4 in particular are really good at outputting code just like other code it sees. But there can be examples of a legacy codebase where you have more older components and newer and you prefer the AI to use the newer style. That's another great thing to include in the instructions. Notice in these instructions you can also point out files, folders and packages which great is in any modern agentic system like cursors agents, cloud code or fusion. Just having the paths the agents can go and look up information. Something we actually just added to fusion 2 is the ability to have multiple agents who run automatically. So a prompt goes to a primary agent which delegates additional agents which might spot multiple to swarm and look up tons of information for your codebase. compact it down and then provide that to the top level agent to then update code. Soon we're planning on doing writing code in parallel 2 which is kind of cool which all brings me to my third tip which is provide additional context. A really cool thing you can do in cursor and fusion etc is provide additional repositories as context. So in cursor you can hit command shiftp and add folder to workspace. This can then pull in folders from other repositories or other places on your system that the agent can then access. So while this is a monor repo I'm in now, we have another more backendcentric monor repo that I want to pull information from. So I'm going to add this air layout folder to my workspace. And now I have both of them and I can reference both and the agent can look up both and it can find both from my instructions. This can be really handy in Fusion. You can do the same. You can go over to your project settings. You can pick any project and go to the settings and just scroll down to workspace settings. You can add additional repositories like our design system and give additional instructions for the agent across the workspace for things like look up our design system information in the design system repo. Look up how our internal APIs work over in the API repository. In fact, that's how I did this demo. I actually generated this table with all the functionality like search and the ability to edit customers and details. You are now Miss Steve Smith. Just by attaching the API repo as a workspace, the agent can look up markdown files, swagger specs, even source code to infer how the API works and generate full cred apps and updates from that. Now, speaking of agents are smart, but they don't have infinite eyes and knowledge. Now, the key thing to remember to do is pass errors to the AI. So, here I notice when I click to see this dropown, oh, I get an error. If I expand it, I see menuless can't take fragments as a child. Oops. So, in a tool like Fusion, I can just say attempt to fix. This is going to capture that error as well as others network logs the current state of the DOM and what components are rendered with what props. Pass it to the AI to make a fix. Alternatively, if you're using cloud or cursor, just pop open your JavaScript console and the dev tools. Copy those errors. And honestly, in most cases, you can just paste and submit. In this case, I pass it to cloud code. You can do the same thing pasting to cursor too. As a side note, one thing I would not recommend is having Claude and cursor trying to fix the same bug at the same time. What you can do though is you can run multiple agents in parallel working on different things. So cursor now supports different tabs where you can have multiple prompts and agents running in parallel. Just make sure to focus them on different parts of the codebase. Cloud code you can open up in separate tabs as well. And in Fusion the same thing. You can open as many browser tabs which creates as many fresh branches as you want. One cool thing about Fusion is each browser tab actually is a completely fresh branch. So you can actually have conflicting changes in parallel trying like different ideas like a let's try a table UI versus a card UI versus any other sort of brainstorm sessions we have and actually experience those and then send a pull request for which one you like best or if you prefer to work off your local branch. You can run Fusion and Fusion's visual editor right inside Cursor as well where my changes affect my local files just like anything else in Cursor on my local branch pushing it up how I normally would. The next tip I have is connect your design tools. Don't just give screenshots from a design. For a simple solution of using cursor, you can use the Figma MCP, paste Figma links, and at least get some degree more detail than just a screenshot. Like what are the exact fonts and colors and stuff like that used for something that works right in the browser, has a deeper understanding of your design systems, design tokens, and other details of your code and how it renders to be a bit more accurate, you can use the build with.io Figma plugin. We can grab various Figma frames. Let's grab these two. I'll do a smart export. And then over in design mode, I can select something and say add a carousel with these two slides. Base my design below this. This works really well for design iteration too. So, first let's let the AI generate my carousel. There we go. Here I've got my nice carousel. It's got the interactivity and the slides from Figma. But let's say I generated something from scratch. Let's go over here and just generate something like add a new contact us page and submit. And now my page is generated. Let's look at it. There we go. contact us page using my components icons typography. But now if I want to edit this in Figma, which is not in there now, I could pop to design modes. I can select and make edits inside of design mode if I want. But if I want to edit in Figma with tools like the builder plugin, I can have a birectional sync. So let's copy this. Let's paste into the builder plugin. We got our output right here. Let's change the color scheme here. Let's go with a more dark scheme here with a light accented icon. Maybe I don't want the subtext at all. Then I can grab this, copy it back to my clipboard, paste in here and say apply my design changes from Figma and paste Figma design. And now I go back and forth from code to design, modify back to code pretty seamlessly, which can be really cool. And all the while the AI is using my components, design tokens, conventions, all of that. There we go. We've got our design updates, which we took from Figma. He used our design tokens at Figma, and now it translated to the right tokens in code. A related suggestion for tools that have a visual interface. That would be tools like Windsurf or Fusion or some of the vibe coding tools is when you want to change a specific part of the UI, use the visual selection tool to narrow in the AI on the right area. So if you know you want to add a new tab up here, a page with lots of tabs and complexity might not be clear what tabs are talking about, but here now that I've selected, I'll say add a new tab here for our help center. And then here becomes a lot more clear. And great, we've got our help center link in the right spot because I was more clear. Now, something I glossed over earlier but don't want to skip is connect your tools directly using MCP servers. All the tools I've mentioned support MCP servers. Fusion now has a bunch of one-click integrations. Cursor has a similar feature set. And when you connect your other services, implementing things could be as simple as saying do this and paste a ticket from the ticket link. The AI can pull the description, files, comments, etc. In my case, that customer dashboard I built earlier was just from the simple ticket, but I didn't have to rehash any of it. If it had more information, it would easily be gathered. And you can use this for connecting docs and files and Google Drive or whatever else. Now, one common mistake I see people making in the use case of prototyping where they want their design team or PMs to create prototypes of new ideas, just type to AI, see something generated. They use generic off-the-shelf tools that don't at all use your brand design system components, your tech stack or coding style or anything. Something that can make prototyping a lot more effective and a lot more efficient for your teams is prototype within your actual stack. So here, if I want to prototype a weather dashboard powered by the open media API, in this case I have a simple project using the cloudscape design system. So I'm prototyping with the correct design system with other example code that shows the patterns, the way we write these React components with TypeScripts, the way we do props and composition and example and abundant examples throughout. This will make sure our prototypes, even if they're made in the browser by people not in the development team, are following the correct standards. So if we want to upgrade that prototype to production code, it's generally as simple as just copying and pasting some code across from one repo to another. So here when I ask for this dashboard when I open it up we'll see that I didn't get something generic. I got something using our actual design system. Everything uses our tokens components etc. These are our chart components with our overlays and our search and autocomplete components. Very nice. And then if we send a pull request we'll see that it used the code as we've demonstrated throughout this codebase. You generally don't need any setup. Just connecting it to a codebase will give you nicely structured files using both your design system components and internal components and reusing components when you need which is a lot better than vibe coding for something from scratch which gives you a bunch of random divs in HTML but what are you going to do with that? This we can bring to production the others we can't. Another really cool use case for prototyping is just to do it in your main codebase directly like create a prototype right here such as we added this pinning feature which was originally a prototype from our product manager to manage when you have very big lists of repositories that some you want to pin to the top and we're able to test it in production using our real users in our internal use cases. So now that prototype became production code in like a little bit of feedback in a couple clicks. Anyway, I hope these are helpful. all or most of these tips in tools like Fusion, Cursor, Claude Code, and others. I added some more tips over in the blog post over at builder.io/blog/prompting tips. And tell me, what did I miss? What are your most impactful tips for development, for production work, prototyping, design, iterations, etc. that I missed? I'd love to learn from your experience and maybe I'll do a follow-up with more tips