My complete workflow for designing high quality software.

In this video, I'll walk you through the new workflow I use to design and ship high-quality user interfaces that combine the best of human and AI design workflows. I made a similar video about a year ago, but things have changed so much since then. I've added new tools to my workflow and the old tools have gotten so much smarter. I'll show you how I built a lead capture feature for Doppl, a startup I've been working on. Doppl makes it easy for experts who share their knowledge online to create a digital twin trained on their knowledge, ideas, and content so their audience can have a real voice conversation with them Anytime, anywhere. By the end of this video, you'll understand every tool I use and why I choose them, how I plan features before touching any tool, when I design in Figma and when I don't, how I create a design system that lives in code, how I review different states of the same interface in code, how I generate illustrations with ChatGPT, and how I ship. If you're new here, my name is Samuel. I've been designing software products for 10 years, and currently I'm a senior product designer at Monzo, a leading digital bank in the UK. And this is a channel where I help designers Level up. I try as much as I can to keep my tool stack very simple so that I can avoid the overwhelm of chasing every new AI tool. Here's a quick overview of every tool I use today and what I use them for. Cursor is the tool I use for coding with AI. There are other options like CrawlCode and Codex, but Cursor is the one I keep going back to simply because I can switch between different models based on what I need them for, and I think it just has the best user experience. And contrary to what most people would say, I still design in Figma almost every day, and that's not going away anytime soon. I mainly use Figma to create a foundation for the design system and polish details that are difficult to explain with prompting. I use ChatGPT to generate illustrations, which I also refine in Figma. I'll share more about this process later. I use CleanShot to take screenshots and annotate any corrections so I can explain them clearly with minimal prompting. GitHub and Vercel are where my code lives and where it gets deployed to staging or production environments. Figma, GitHub, and Vercel are all connected to Cursor. So I simply prompt Cursor to create designs in Figma that I can refine, build my designs from Figma into code, create pull requests and merge code changes in GitHub, and deploy to production in Vercel. So Cursor is the main guide I interact with other tools. 90% of the work happens in Cursor. The feature I'll be walking you through makes it easy for anyone who has a conversation with an Expert Digital Twin to get a summary of the key points of that conversation in their email. The expert also gets a similar summary along with the email of the person who had the conversation so they can follow up if they need to. Before writing a single prompt, the first thing I did is to write out the problem I'm trying to solve, who I'm solving it for, and what should change after they use the feature. I write every single line by hand with pen on paper, so writing by hand helps me think very clearly because when I write by hand, I try to avoid as much crossing out and canceling as possible. So I think things through properly before I put them on paper. This way I can spot the gaps in my thinking before I write a single prompt. When I'm done writing, I took pictures of my notes, uploaded them to Cursor, and asked it to read through them and articulate the problem I'm trying to solve and what I want to achieve. I want to really understand if it can understand everything I've written. That way I can be sure that we are on the same page. Once I'm confident that we have a shared understanding of what I'm trying to build, I then ask Cozor to go away and research 3 to 4 products that have the exact same feature and break down how they solved the same problem. Sometimes I give it examples of some of the products so I can point it in the right direction. Here you can see that it's done some of that research and it has come back with a document comparing 4 different products that solve the problem in different ways so that we can brainstorm about the best ideas that work really well. With the product that I'm trying to build right there in the chat. The most important thing I do during this planning phase is to keep the scope as tight as possible so that we don't build too many features at once. I ask Cossack to break down the solution we've aligned on from the research into 5 chunks. That way we can build one chunk and test it to be sure that it works before moving on to the next. For this feature, the chunks were simple. The first chunk is the audience-facing side, which is basically what the visitor sees before they have a conversation During the conversation and after the conversation. The second chunk is the creator dashboard, which is what a creator sees after a visitor has a conversation. The last 3 chunks are backend changes, which won't be covered in this video. So now my plan is locked in, so it's time to design and build simultaneously. Here's how I decide when to use Figma and when to design in code with Cursor. There's no real rule to this, to be honest. I just go with how confident I am that the agent will understand my prompt and build it accurately. If my confidence in the agent is low, I start designing in Figma. Then I share a link to the Figma file in Cursor and ask the agent to use that link as a source of truth for anything it builds. Remember, my Figma and my Cursor are already connected together. If my confidence is high, I prompt the agent to design in code. Sometimes I ask the agent to create a first pass of the design right there in Figma. Then I'll go into Figma and refine the designs to my taste and then hand it back to the agent to build it. The most important thing I always do in Figma is to have a documented design system or style guide so Cursor can use consistent design patterns when building. This is how to avoid AI slop. For example, here's my very simple design system in Figma with my design tokens for color and typography and some design references for buttons, forms, cards, and the likes. Once I created it, I simply asked Cursor to store everything in code and I can even generate a preview to compare with what I have in Figma. Now let's go into how I built chunk 1. Like I said earlier, I didn't fully trust the agents to build some parts of this feature from prompting alone. So I asked the Cursor agent to design the first chunk in Figma so I could refine it, then pass it back to the agent to build. Here's what the agent designed for the expert's profile, the conversation UI, the summary form, and the confirmation screen. It got the conversation UI wrong and made up a header that shouldn't be there. The summary UI looks really flat and AI-generated, and the confirmation screen looks very and inspiring. Because this is already in Figma, I don't need to waste tokens by prompting the agent to refine the designs. I just went ahead and made changes to the design myself in Figma. So I removed the made-up heading in the conversation UI, I removed the white backdrop on the form, and I added an illustration to the confirmation screen to just make it feel more delightful. And then I asked the agent to build the redesigned version. Speaking of illustrations, all the illustrations for this project were generated in ChatGPT. I have an illustration chart in ChatGPT where I generate illustrations in a consistent hand-drawn style. I trained ChatGPT to do this by giving it some hand-drawn example illustrations. I really like the hand-drawn illustration that Anthropic has, so I stole some of those illustrations and used it as like the foundation for how I wanted my illustrations to look like. Of course, it never gets it right the first time whenever I prompt it to create an illustration in that style. It sometimes takes like 2 or 3 iterations, but once I'm a bit satisfied, I download the PNG version of that illustration. I move it into Figma and then I convert it into a vector format with Figma AI. Then add any additional refinements I want to make, like colors, sparkles, background, and I just move things around to add my own touch to it. Once that's done, I export it as a PNG, upload it to Cursor, and ask the agent to place the illustration where I want it. Now the audience-facing chunk is built. A visitor can land on an expert digital twin profile, start a conversation, end the conversation, request for a summary of that conversation by providing their email. And get a confirmation that the summary will be sent. The expert dashboard is different from what the audience sees. This is where the expert sees everyone who has had a conversation along with a summary of each conversation. I didn't use Figma at all for this part of the feature. It was all designed and built in Cursor because it's a simple table for collecting data and it didn't need any kind of special design treatment. I started by asking Cursor to create a very low fidelity sketch in markdown format. Right there in chat. This is an example of what designing in markdown format looks like. It designs everything using text and symbol. This way it's cheaper to fix everything in a very low fidelity sketch before the agents start writing any code. Markdown format is what you normally see in WhatsApp chat where people create robots or big happy birthday bubbles with using text alone. That's an example of markdown format. It's basically the cheapest way to make sure that the agents understand what you're saying. This next part is really important when designing in code with agents. One of the advantages of designing in code over Figma is that in Figma, it's very easy to forget some states and edge cases. But with agents, you can simply ask which states are required and then ask the agent to go ahead and design the necessary ones. For example, when designing a data table, you usually have an empty state where there's no data yet, a filled state where there's some data, and an extreme filled state where there's a lot of data. With pagination. You can simply ask the agent about the kind of state and it lets you know that. But now the advantage of designing in Figma is that you can lay out each of these states on the canvas and refine your design easily. But when you're designing in code and we are previewing your designs, you can only preview one state at a time. This is why you need a temporary states manager, something that helps you switch between the different states in the same UI. For this feature, I built a temporary state manager to switch between the different states so I could preview the designs and make sure everything was working as it should. So when designing for each state, I can use the state manager to understand how one looks and works and make changes to each one. Once I'm done, I ask Cursor to remove the state manager during the cleanup. Building the expert dashboard was pretty easy and straightforward. The Cursor agents built the data table, the filters, and the drawers with more information about the captured lead, all in one go with minimal changes. Now that chunks 1 and 2 are built, the last step is getting it in front of real people. Shipping what you've built to production can feel quite intimidating to most people, but once Cursor is connected to where your code is stored and where you create your deployments, the Cursor agent can do all the work for you. All you need to do is approve every step of the way. In my own case, GitHub is where I store my code and Vercel is where I manage deployments. Once a chunk is built and reviewed, Cursor asks if I want to create a pull request in GitHub, which simply means asking if I want to add the code for this new feature into my existing code. And all I need to do is approve and it goes ahead to create the pull request. Here's an example of a pull request for this feature with a summary of the changes in GitHub. While that happens, Cursor also builds a preview of the changes in Vercel because it's connected to GitHub repo. This is the only way I can properly test the feature in a staging environment with real backend data. Everything I've tested up until this point is just testing frontend UI that doesn't use realistic data. So they're not real tests. A lot of things can still be broken. So if something feels off while I'm testing the real thing in staging environments, maybe the empty state or the field table or something doesn't look right. I can fix it with a prompt. I can take a screenshot, annotate it with my screenshot tool called CleanShot to clearly explain the issue and send it back to Cursor to make changes. So this is what I use CleanShot for majorly. It's just a simple way to show the agents where the issue is without writing as much prompts and making it really, really clear. What I'm about to say next is the most important thing you will listen to in this video. It's taken me about 2 years and 9 months to refine my AI workflow up to this point where I feel pretty confident about designing and building things with AI, but I still struggle sometimes. So if you feel like this is so overwhelming, you're not alone. I started with small projects like a simple Google Chrome extension that helps me manage my browser tabs to a simple website before building complex products and workflows. This new way of working can be overwhelming if you try to do too many things at once. So if you want to learn how to get started with building your first idea with AI without feeling overwhelmed, grab AI Native Designer roadmap and watch this video next to understand how to apply the roadmap. The link to the roadmap is in the comments. I'll see you in that video.