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

Key Takeaways

I was able to customize my cloud code into a cloud designer which allows me to iterate UI 10 times faster in cursor and wings serve directly forking and generating five to even 10 different UIs at the same time and all this are made possible with some hidden clock code feature like parallel task commands and new SDK that they just introduced. I'll break it down for you so you can replicate on your end. So one thing I think people didn't realize is that you can actually spin up multiple sub agents within cloud code by simply prompiting. For example, I can give a simple prompt. Start a three parallel agent to implement variations of the to-do app UI. And then you will see that it start three different task that is happening at the same time. One agent will be doing minimalist to-do UI. Another will be doing modern to-do and third will be cambban UI. And boom, you just got three totally different style at the same time. So it'll be much faster for you to iterate. And you can imagine we can actually package this to be some really interesting UI iteration process with this parallel task capability. There was actually pretty heated debate last week on Twitter where dev team published a blog post called don't build multi- aent system. One of the key insights they got is that for task like coding where each action you take actually imply specific set of decisions you make and when you do parallel task it is very likely leads to things like merge conflicts because each sub agent has no context about what the other agent is working on and the best approach they found is actually just don't do parallel task at all and putting everything into one single thread. However, a few days later, Entropy released their own blog post about how do they apply multi- aent in their own research system where they build this group of agents and each sub agent can actually have parallel task to do things like research and I think both had pretty valid points because most of the time you do want to making sure the agent has a full context when execute task but there are scenario that makes sense like research it is going to be faster if you spin up five research topics and summarize everything in the end and same thing for the UI design paralas is actually perfect use case because When we do design in Figma, what we often do is that we'll just fork and do a few different variations and compare them kind of side by side and eventually we get like final version. So have that capability of have parallel task on design has been a pretty good pattern and what I want to show you is how I utilize the parallel task capability in cloud code to have some really interesting UI workflow. But before I dive into that, I know many of you are building AI applications or AI agents that needs access to internet data from research about business to get latest news and a smart and reliable way to turn any website data into large language model friendly format is critical. That's why I want to introduce you to FRO. They were the first open- source project. They offer effective way to turn any website into clean format that is optimized for large language model to consume. You can browse through all the subpage of a website and it handle PDF, word doc or even Excel file that are attached from URL and has capability like smart weight d content loading so that you can guess website with more strict anti-bos setup and for the past few months they just launched a whole bunch of new feature that is going to make web scraping 10x easier. For example, they introduced this new search endpoint that's going to give you back the most random websites as well as extract markdown content of those website directly in just one API call. This is going to make your AI application way faster because you don't need scarfolding the whole pipeline of search and scrape from different service. And they also introduced this new extract endpoint where it can handle things like pageionation and page interaction with their own fire one agent that is capable to interact with website like e-commerce to clicks through buttons get a full content and it can even similar complex action like login and authentication as well. All you need is just give a URL, the prompt, the data structure you want and this agent will open up the browser, navigate through the website to multiple different pages until they find information you want. And most importantly, those abilities can be called from API endpoint directly. So you can give your own agents internet and research capability with just few lines code or integrate to automation platform like Zapier and relevance AI by calling firecore API directly. So if you're looking for a smart way to script internet data, I highly recommend you go and check out firecro. Now let's get back how can you customize cloud code into cloud designer. So to understand the workflow I'm going to show you there are four core concepts. We already covered the sub aents part and second one is cloud.md. If you're pretty familiar with cursor is basically cursor rules but for cloud code with this one we can customize how cloud code should work and give it knowledge about what type of task you should do in parallel what type of task you shouldn't. And I will show you a quick example. For example, if you open cloud in any folder and just create a file called cloud.md and you can just put whatever instruction here like you always respond in all caps. Now if you try to run cloud and say hi, it will respond back in all caps. But you can imagine we can also put some very specialized prompt for this as well. For example, this is a prompt that I have been playing with internal UI design where it includes things like the color, font, layout, stuff like that. So I can put in this and also adding maybe some special rules that when you were asked to build UI iterations, you always just create one single HTML file. So I can give a simple prompt like build me a modern to-do app UI. It will basically following my rules. It won't create some complicated project. And this will just create a one single HTML file that contain a nice kind of modern UI. So this is cloud MD the custom rules for cloud code. The next thing which is very powerful called commands. So you can basically predefine list of common workflow that you want cloud to follow. So you can create a folder called cloud. Inside you can have another folder called commands. This is where we're going to create some cool stuff. Let's say you want to create a joke generated command. So you create a joke.md and we can just say make a joke about arguments. So arguments is a special thing that pass to clock in the command so that you almost create a prompt template that can be used for many different scenarios and I can give it some custom instruction always and a joke with a man eating chips and now if I do slash you will see that there's a slash joke option and I will just type in joke then what are you putting down after is what's going to be passed to arguments so I here can say AI coding and then you will see that I generate a prompt about AI coding and with the specific instruction that we give inside here if from cloud code's official doc. It can even do something like you can literally just natural language putting some commands that you wanted to run. It will actually execute those command line before I do the task. For example, you can actually create a command like this where it will do those command line to check get status first before you execute a task. So if I try this and do the joke now it is actually running those command line to check the get status because I didn't set up yet. It's just a not a get repository. But if I initiate the git here and run cloud again, it will give you a different joke about main branch because now I set up the git. So to me this is like a mystery but super super powerful feature. And what I want to show you is how do I use this to create some sort of UI flow. So I'll create another folder inside let's say UI and create a one called extracted system and putting this prompt. Basically it will have the task of the UI it should analyze which we're passing through a image URL and the goal here is to extract like color pattern typography stuff like that and also save the design system JSON into a folder called prd. So this will allow us to give cloud code a kind of UI mock and it will just generate the design system from that. I found that this works much better than you just give the UI reference ask to do right away. And second command I also use is this iterate design MD. So this is the one that I want cloud to spin up three or five sub aents to concurrently implement the same UI in different style. So I will ask it to analyze a design system JSON file we created and then build one single HTML page and output the HTML in the UI iteration folder called UI 1 UI2 UI3. So with these two things I'm going to show you a very interesting workflow. First I will go to website like moen or dribble to just get some UI inspiration. And let's say I quite like this one. I can save this image zui/ extract design system and I will drag this image here and then it will create this design system.json this prd folder as I instructed which have those kind of more detailed style. Next I can call second command iterate design give a prompt a modern phone to-do app using this design style as reference which I'm referring to this design system file we created earlier. Then it will set up three different tasks. You can see for each task it actually has a very detailed task about UI reference design directions like that. By the way, you can use control R to expand and then Ctrl E to see those details. And of course, you can like always toggle between. But honestly, there's still some bugs. So, I'm just going to let it run like this. And now it output three different UI in the UI iterations. If I open them, they all looks somewhat different in terms of style and animations. And what's really cool is that let's assume I like this UI2 version. But I want to iterate a bit further based on this version because I want to build a kind of dark mode and then I can do the same thing again. This iterate UI2 HTML version which is best one so far and try dark mode. Then you will see this time it will analyze the current UI2 design and try to spin up three parallel tasks. And the more I use it, I realized that the way this command line works, it's basically sending a prompt template to the cloud and along with this prompt you put in here. And this is really interesting, right? Because traditionally, if you design software, you probably were uh designing a way that you have to define what type of arguments are and user have to give those arguments. But they basically keep it super free. Uh you just give a free text agent just magically figure out. This is just such interesting kind of design pattern I found. So after 200 seconds, I got three versions of different UI based on the previous version two I like, but some sort of variation between each one of them. Like this one has some kind of glowy uh style, which is pretty cool. But this is kind of the workflow. I can choose the version I like and then ask to iterate a few different versions. I can even probably grab the glowy style from this version as well as a pure dark background from this style. Ask it to iterate. I'm pretty sure it can figure out. And once you done, you can get a HTML that has a style you want. then just start prompting cursor to actually break down into components and build a proper UI in nextJS project. But this workflow of iterating UI is something that I've been trying a lot and it has been really really helpful. But this workflow can only allow you to build like single HTML page. What if you want to set up parallel agent to work on different UI iteration on your actual production NexJS app and this is where the fourth concept comes in Git work tree. So if you're familiar with g most of the time you can only have one branch running on your computer at the same time and g work tree is a feature they have that allow you to set up multiple different sandbox environment of your specific report. So you can get a multiple cloud code each working on a individual work tree without impact each other's work and in the end you can just pick up the version you like and merge them together and all you need to do just run this command get work tree add-b with a branch name and then pass where do you want to copy and create a sandbox of your current rip for example here I have a basic to-do app that I built with nextjs and chass in it has multiple different components it is much more complicated than a single HTML page what I can do is open terminal and do get work tree add b which is branch name and I'll call it like demo branch. Then I'll remove that into a specific folder. Um what I going to do is I will just create a trees folder with the same branch name so it's easier for us to identify and understand what that is about. If I do this you can see a new folder called trees created. Inside it has another folder called demo branch which has everything we have at root branch. So this is how you can set up a work tree. And now I can do cd trees demo branch. And once I get inside, I can do PNPM install and PMP dev. And you will see the same application is running here in a different portal. And the easiest way will be we can just set up a new cloud here and ask it to iterate UI. And once you get one version you're pretty happy with, you can set it up and do get merge demo branch. So this how the work tree works. Theoretically, you can already have a workflow to firstly create multiple different work trees and then set up parallel agents to work on each individual work tree folders. But what I really experimented is I actually created one command called execute parallel agents and this is one command with the prompt template that I have. It will have two steps. First step will be set up multiple different g trees based on the user's request. If a user asks for three different variations then create three different work trees and each one of them follow the naming convention we have and then do pmppm install setup. Then step two is set up parallel sub agents. This is where the master cloud code agent will spin up multiple different sub agents. Each one work on a different branch and this command will basically do the whole workflow for us. Whenever I want multiple different agents to iterate this UI on existing production projects. For the second prompt here, I actually got some inspiration from another content creator called indie dam den who also talk about this parallel agent workflow. So I highly recommend you check out if you want to learn more. But let me quickly show you how does this work. So I have this command that I showed you earlier and just do cloud then I can just slash to use execute parallel agent command and I'll just give a command try three versions of UI one nerdy style one kid style and one gaming style. There we say I will help you create three parallel agents work on different things with three different to-dos. Firstly it will create three work trees for nerdy kit and gaming UI style. Install dependencies in each work tree and then launch three parallel agents to work on each one of them. And now if I open trees you can see there are three different branch and work tree has been created and after that it will start setting up the project. And after setup it's going to launch three parallel agent to implement different UI stuff. And you can see three parallel task has been created. Each one of them going to be assigned to a individual sub agent. And if we do control R you can see the detail of each task that sub agent is receiving. It has the task the prompt the key files to modify and requirements and each task is slightly different to reflect style we want. And this process is going to take some time. I've actually found this is slower than I just call let's say three entropic call in parallel. I assume entropy actually do some kind of re limiting management. So it does take some time but the cool thing is that you get all those UI in one go. So you don't have to follow that specific linear flow and each version will be inside its own folder. So in the end I got three different versions. Each one of the version does look quite different based on the kind of style of prompt it explore like this nerdy dad version this kind of kids version and we also have this kind of gaming style as well. And you can imagine I can even further doing this. Assuming I like this nerdy version, then I can give another parallel task to set up three more new branches to iterate based on this. So this is kind of the workflow I feel like going to be really developed for next few months especially for UI iteration tasks. But in the end just making sure remember to delete the trees that you don't want because each branch actually can be pretty big because you need to install all the packages inside. Meanwhile, I was imagined what if we have this kind of parallel task execution experience plus some sort of easy way for you to set up sandbox, view the results, iterate based on certain design and also delete the work tree when it's not needed. Especially now cloud code has its SDK where we can integrate a coding assistant very easily with custom prompt tools. So during the weekend, my friend Jack and I have been trying this weekend purchase. We basically integrate to cloud AI SDK and build a cursor extension that you can inside your existing pure right away and ask it to start experimenting different UI. You will have Canva on the right side to preview the UI generated. Then select certain version you like and ask it iterated further. So you can visit superdesign.dev and click on install for free button. This will allow you to just one click installing cursor when you serve or any other ID you're using. It will open the superdesign extension and after install you can do command shiftp and this one option called configure entropy API key. So you put your entropy API key here because we are using cloud code SDK behind the scenes and once that part is done click on super design. This will open a chat on the left side and a camera view on the right side and you can give a prompt design me some wireframe of a calculator. Then you will see the agents start working and trigger multiple tasks. Each task with a slightly different uh brief about what type of design it is. You're basically creating design inside the super design design iteration folder. And at this point each design takes roughly 1 minute to generate. They're very clear path for us to optimize and make it way faster. Uh but we just want to ship it as the first version for now. And all the design generated will be showing up on the right side. And now you can see generate a few different kind of wireframe options for the calculator. And once I find the version I prefer, I can click on this which will have a few different options either create a variations or iterate feedback as well as copy prompt for cursor we insert direct with. So I can click on this iterator with feedback button. Then give a prompt. This looks great. Now build a hi-fi mo based on this layout. Then you will see here it generate a few high fidelity mockups based on that specific layout. And you can imagine we can keep iterating giving feedback and once I'm happy I can click on this copy prompt button. This will copy the full style. So you can pass to cursor or cloud code to do the actual implementation of the web app. So this is the first version we spin up going to do a lot of improvements but super keen to just hear feedback. Is this something you find useful? If so, please give it a try. This will be open source project you can just download and try out yourself. So I will put the link in the description below so you can go and try out. Meanwhile, I will put all the problems I shared in AI builder club, which is a community I'm building that has top AI builders who are launching AI products. Myself and other people will share also tips and workflows that we found really useful for both AI coding and build large modelic software. So, I've also put a link in the description below for you to join as well if you want to learn more. I'm really excited about this project and what kind of feedback you guys have. This is just a v 0.01 version that only created one single HTML page. The next version, we're going to add the default work tree support so you can iterate UI of your existing production application. I'll keep you updated. Thank you and I see you next time.