Claude Designer is insane...Ultimate vibe coding UI workflow

Key Takeaways

there's some new workflow that is enabled by Cloud 3.7 that many people didn't know yet with just one single prompt you can get Cloud to design the whole application's UI which you can turn into a fully functional beautiful application with nice UI and this is a workflow I want to share with you today so Cloud 3.7 has been released for a few weeks and one of the key Improvement is cloud 3.7 it's just insane about UI implementations you can just give it a random Mo complex and you'll be able to turn into beautiful high quality UI like that and this enables some of a new AI coding workflow that is extremely helpful and one my favorite is this two-step process that can making sure the UI output from cloud 3.7 is much better than normal ones you would have out of box and this is really huge because AI coding agents like cursor and Winger hasn't been really great at creating UI if you want application to looks really good the state of art method is using existing UI component Li like sh CN DC UI and a few others but if you wanted to build something really customized it normally will struggle but as a model capabili became stronger now it's the first time I feel like it can produce high quality customer UI so I will take you through step by step what my process look like and how can you replicate something similar for your own dream apps but before we dive into that cloud has been a real killer not only for UI generation but also many other day-to-day automations they release ton of interesting features from projects Integrations artifacts as well as the latest analysis tool and sometimes even I feel like I'm not catching up with all the features that they have been released so I'm always curious how does other top AI experts fully unleash the potential of those Cloud capabilities that's why I want to introduce you to this free ebook complete guide to Cloud AI made by hopspot CMO Kip and VP marketing Kieran if you don't know who Kieran is he has been in AI for a long time and Shar lots of good insights and practical workflow for utilizing AI to automate work and they talks through how hops spall content team is utilizing Cloud features like pures artifacts analysis tool into their workflow as well as specific prompts that got them high quality results versus bad ones and they showcase some of really interesting use case for example they talk us through how did they upload the whole quarters marketing result CSV to cloud and ask it to generate interactive dashboard so that senior leaderships can just come and dig into Data themselves in my favorite section is where they demonstrate a Content optimization system that they build upon cloud from how they go from SEO enhancement to cross Channel adoption performance tracking and content repurposing so I highly recommend you take a look at this to either discover all the tricks and tips or a sneak peck of how top AI experts are Implement those AI workflow in Cloud so that it might Inspire some new business ideas for you I have put a link in the description below for you to download this ebook for free and now let's get back to how can we get get Cloud 3.7 to build application that has beautiful UI so I'm going to open cursor and give it prompt UI senior front end developers and specify very specific design style that I want and this prompt I have tested and works pretty well as well as some technical specifications like each page should be in this specific size and icons which should use online Vector icon Library the image must be sourced from open source image websites the sty should be telling and never give it task this AI caty calculator app where users can take a picture of food and Auto extract nutrition and similat the prodct manager's detail functional and information architecture design follow the design style and technical specifications to generate a a complete UI design plan and create ui. HTML file that contain all the pages that display in a horizontal layout and generate the first two pages first so with just prompt itself it can already generate really gorgeous UI outbox with interaction animation as well but what you can also do is give it some image reference example in our case I can just take a screenshot of the Cal AI app and come back to cursor paste this image and click Send great so if we open this you can see that this UI looks pretty awesome very likely you might need to try a few different times uh like for me I tried actually a few different times each time some I didn't look right and I would either just ask it to run again or give some promp to adjust a style but if you want to make some a specific adjustment I can also take screenshot of this part and come back saying the 1250 calories left Tex is not vertically Center align help me fix it and make it look more balanced cool and you can see it made some updates and now it looks more balanced for the tax above same thing we're also going to update the next page as well so I'll just come back and take a screenshot of the original mup and the past in help me update the second screen based on the mo up so great now you can see that this two page all looks pretty decent and awesome so I can just tell it great UI looks awesome don't change UI just add some interaction animations and now it will have some kind of hover interactions when you hover those buttons which looks pretty nice once it's done I can also ask you to continue with more pages great those two pages looks awesome keep the same quality and continue creating more pages of the app and I just do the same thing updated page or page uh like this one the spacing looks a bit off and I will take a screenshot and tell it the spacing looks a bit off Place update cool so after a few prompts I got this UI that looks pretty awesome and you can obvious continue going to create more page and Flash out the whole application but now it is still just a static page how can we turn this into a proper web app so what I'll do here is that I will give a prompt if I want to turn this into a proper nextjs web app what UI components should I create don't generate files yet just think and plan for now and just focus on minimum amount of UI components and here you go it start defining the list of components and this step is actually pretty critical I found when I ask it to just go create app it often failed to replicate a similar UI but once you ask it to break down specific components then it becomes a bit easier for them and next what I do is I will try to set up a project and I'm just going to use chass and command line which comes with is Tailwind on the nextjs and meanwhile I'm going to copy this text and save it into plan. MD so that we can have a reference about the component that it's supposed to create so I give prom great I move the plan to plan. MD I've set up in next ja project in my app folder now let's build the first components of app layout and Screen layout which is first few components but making sure read the nextjs project structure to make sure things are in the right place and after Implement each component add a check mark in plan uh so we can keep track about what's left and this process will take a while you kind of just need to wait and see cool and now if I open it you can see that it had turned this into a web application and everything looks exactly like what we have before and all we need to do just ask you to do step by step so I just continue prompt it great now let's do the bot navigation bar and header in navigation folder and again I will just continue ask it to do more components cool so now you can see a check out all the pages that is supposed to create and if I switch to the nextjs app you can see that this app looks exactly like the UI we have before you can change number here you also have analytics page as well as setting page and each component is fully functional all you need to do just start building backend function so this example of how can you create v0 level UI without v0 which means you don't have to be limited by chass CN components you can literally ask Cloud 3.7 to create any sort of styles you like and building your own component Library if you want to learn more in depth about that specific Cloud 3.7 design process as well as a prompt that I've been using you can join the AI Builder Cloud community and building where I have list out all the detailed prompt and process plus I'm releasing this AI coding tool called 10x coder death for the AI Builder club members to try free which is basic platform where you can go and describe the project you want to build like a not taking app you can upload some screenshot as well and based on that it will start generating some cursor rules around the UI help you break it down into specific feature that might require to build this app as well as design the project structure and database schema but most importantly in the end you will be able to export a nextjs project that you can open in cursor or wi surf they already have the user authentication strip payment and super based backand setup I will continuously sharing more content as well as building exclusive tools for community members if you're interested you can click on the link in the description below to join the community I hope you enjoy this video and very keen to see what type of UI you start building with Cloud 3.7 designers thank you and I see you next time