My Design-to-Code Process with AI

Key Takeaways

I'm going to show you how to go from polished UI designs in Figma to production-ready code in minutes with AI successfully executing the coding part for me. You might have tried to use AI to build your Figma designs, but what comes back barely resembles what you made. What if AI could truly understand every aspect of your design from typography to spacing and everything in between? Well, in this video, you'll see how I prep my designs, prompt the model effectively, and clean up the output so that it's actually usable in a real workflow. If you're a designer who wants to handle the entire design-to-code workflow independently, this workflow can save you hours. So, let's start off by looking at the designs that I'm going to take from design to code today. I have this conceptual app design consisting of a dashboard as the homepage, an analytics page which features a pretty data-dense table, a filterable notification screen, and a setting screen organized into a few different tabs. So, there are a few things I always do before I hand off to AI or to a developer for that matter. And these are the same best practices you'd follow for any clean handoff, but they matter even more here because the AI is going to interpret everything very literally. First, I strongly recommend you use auto layout pretty much everywhere in your design. You can see over in the left sidebar all the content in my design is properly structured with auto layout, as opposed to each individual section of my design just being a loosely structured frame. Auto layout is really important for your AI to understand your designs because without it, it'll just see a bunch of absolute positions and try to recreate those with fixed pixel values, which will often end up being a totally unstructured mess. Auto layout tells the AI this is a flex container. This is a gap that should adjust responsively and shows the AI how your content should wrap. And that will translate to clean CSS that makes for a beautiful app. Second, you need to name your layers properly. This one is important and Figma makes it effortless with the rename layers AI feature. Figma AI definitely has a long way to go before it has strong AI functionality, but rename layers is one that you should absolutely utilize to prepare your designs to be translated into code. And if all your layers are just random arbitrary frame labels, the AI has no semantic So, properly name all of the components and sections within your design. The third thing you should do to prep your design to be translated into code is use text styles and color styles wherever possible. If you've set these up in Figma, the MCP server will pass those through. That means the AI can reference your actual design system values instead of just hardcoding hex colors and pixel values everywhere. This is really big for maintainability and also, again, helping the AI understand your designs thoroughly. Now, lastly, keep your component structure clean. If you're using component variants and properties, make sure they're well organized. The AI can read your component architecture and will try to mirror it in code. So, the cleaner your component setup, the better the code structure. Think of it this way, the AI is your most literal-minded developer, so it's going to build exactly what you show it. That means if your file is sloppy, the code will be sloppy, too. So, now it's time to actually dive into the AI part of the design-to-code process. I use Claude Code for this. First of all, because it's a really powerful agentic AI tool for designers, and second of all, because we can connect Claude Code to the Figma MCP server. And this is really the backbone of the AI-powered design-to-code process that I'm showing you today. So, to get Claude Code connected to Figma, head over to customize, browse connectors, search for Figma, and if you see two options here, pick the one that says interactive. Now, hit connect. We're going to allow Claude to access our Figma MCP. And just like that, my Figma and Claude accounts are now connected. So, let's go start a new session. Now, open this drop-down, open connectors, and just make sure Figma is enabled. For my first prompt, I'll say, "Let's build this design project." And then paste in the link to your Figma file. Now, I'm going to use the model Opus 4.6 to make Claude Code think a bit longer and harder, but if you want to use less tokens or just speed up the process, Sonnet 4.6 is also a very capable model. Now, I could give Claude more guidance with a more detailed prompt, but I'm going to keep it simple and we'll iterate as needed after. And now Claude Code has begun building our design by turning it into code. Now, you can see Claude Code has decided to build our app using just vanilla HTML, CSS, and JavaScript, but if you wanted something a bit more complex, like a React app, for example, you could specify that in your initial prompt. So, now Claude says it's finished the first build of my dashboard. So, let's go check it out in browser and see how it's looking. All right, so this is looking very, very similar to how I designed it in Figma. If I had just given Claude screenshots of our Figma designs and told it to implement them, my dashboard probably would have been in a lot worse shape than this. But because we gave Claude specific details about typography, colors, and spacing, it had a much better understanding of how to accurately build our app. So, let's see if we're able to navigate to the other pages. Okay, so that's linked up. I was able to navigate to the data table page, and looking back at our design, it looks like it got all the styling pretty much correct. Now, these export CSV and add filter options aren't working, but that's just because it's implemented what it saw in Figma and not really any functionality beyond that besides letting us navigate to our other pages. But that's okay, pretty soon we're going to tell Claude to make this a more functional app that has placeholder data but actually works. So, looking at our notifications page, I'm actually able to change the active filters up here, but you can see it's not actually any filtering changes to our UI. So, that's another thing I'm making note of to have Claude come up with another iteration. Same with this mark all as read button up here, it's not marking these first three as read. But these are things we're going to fix as we bring more functionality through more prompts to Claude Code. Now, looking at our fourth page, settings, Claude Code has clearly nailed the styling once again, and I'm actually able to edit these inputs. But of course, the save changes button at the bottom isn't actually going to save the changes we've made because we don't have a functional app yet. But that's okay, it's good to see that Claude Code has at least made some more effort to implement more than just a skeleton that only shows the styling that was visible in Figma. And one more thing, this logo at the top is not what we wanted. I included my personal GW logo, and it didn't get that right at all. And just to nitpick, for the active tab, I want our icon to have a filled style instead of outline. So, now I'm back in Claude Code, and it's time to give it our second prompt to polish it and make it more functional. So, I've given it some specific instructions like use the attached logo in the upper left and make all the inputs work. But at the end, I've also told it to do anything else required to make this function as a working app with placeholder content because giving it our Figma design only really told Claude how our app should look and feel, but Claude Code is super powerful and it can do a lot more than just implement the design. You can also prompt it to implement real functionality on its own as if it were an actual developer. So, let's prompt it and see how it does. So, Claude says that everything is done. So, let's go check it out. So, I got the correct logo in the upper left now. Whenever a tab in the sidebar is active, it takes a filled icon style. So, let's go see how the other pages are working now. I'll try searching. Looks like we got that working. And we can see on the right side, these values are actually dynamic as well. So, that's great to see. Now, when we hit export CSV, does something download? Yes, it does. And it's an actual CSV including the placeholder data in our app right now. Then if I click add filter, Claude has actually added a modal that'll let us filter this table. So, this is a great example of something not even being designed in Figma, but instead Claude Code puts the pieces together and designs and implements that functionality on its own. Over in notifications, let's try these chips at the top. And they're working now. They're actually filtering the results on the page. And that mark all as read button is also working with a toast showing up at the bottom giving us that feedback, too. Now, it looks like we've lost that vertical spacing that we had between these two cards and the buttons at the bottom. And that's just an example of how as you iterate, Claude will add functionality but also may mess up some of your styling in the meantime. So, it's a very iterative process just like UI/UX and web design. And if I hit save changes, we get another toast message giving us that feedback. But since we don't have our app hooked up to a back-end using something like Supabase for database functionality, that change isn't actually going to persist when I refresh. So, that's where hooking up Claude to another connector like Supabase to support users and a persistent database would come in. And Claude makes [clears throat] it super easy because all you have to do is tell it exactly what you want once you have those connectors set up. So, that's my full AI-enabled design process. What sets this workflow apart is knowing exactly what the AI needs to do its job well because you can't just expect your AI to successfully execute an entire design project for you. And that's really what designing with AI comes down to right now. It's really not necessarily about which tool you're using. It's about whether you have the design fundamentals down to set it up correctly, evaluate what comes back, and know when to push further. The AI handles the execution, you still have to bring your best judgment to know what good design looks and feels like. Thanks for watching, and we'll see you in the next video.