The Vibe Design Process I'm Addicted To

Ben Sufiani: Today I want to introduce you to the vibe design process that I got addicted to. And it helped me build this fantastic page for a new brand that I'm working on right now. It's called Zarc. You can already visit it at Zark.ai. It's not ready yet, but it's the landing page that is already up. And it's really a beautiful Aesthetic design, but it also has to be because it's promising a tasteful content experience like a harness for content developers that really preserves their taste, but therefore our design has to be good as well. This is a full 3D scene that you see here working in the background. I can scroll down. You can see a lot of elements animated if it's meaningful. it explains how everything works, shows you the different levels of automation with content that you want to do, but maybe where you first need to earn the trust for the quality bar to meet. how it's going to be used in the web app or in more agentic ways and everything in here. I love it, already. And in the past, this would take a full-time designer in your team, and that is out of reach for a lot of small but mighty teams that we have here in the Pirate Skills community, including myself. But now with Cloud Code or Codex, you not only get cheap coat, fast with little resources, you can also get design really efficiently. And that led me to a couple of conclusions I want to share with you today. I'm pretty sure two weeks ago I still thought that screen designs are dead. that this was a old Figma product manager briefs a designer that briefs the developer process because it's so cumbersome. But if actually one person does it all. And is able to do this over a weekend. That's a whole different story, and it might be absolutely worth doing it. And it I got hooked when I worked on the mobile app for Pirate Skills that is already in the Google Play Store. you see down here. But with mobile apps, you get in the habit usually of designing screens and then wipe coding them because the code there is. is not as easy for the agent to do as for web development. And then I thought, how about I just do it for this new project that I'm working on called Zog? And I used to do this all straight into the code. I thought, like, why do I need a design process in between? Let me just design the website and the app straight away, whatever I don't like, I can just change, and complain about it. I would say for uncomplicated things or demos, that is still the way to go. But Improving from that would be like, maybe I need to go to a designer who really has strong taste or an agency and there is a long back-and-forth process and all of money changing hands. So I don't like that either. So now there is this third option, I call vibe designing. And it's you working with an agent and combining your taste with the optionality an agent can serve into something that you truly love. Like I adore this design, and it's completely different from anything I've done before. And trust me, I didn't get there, and how I got there over a weekend is what I'm gonna share today. So One of the advantages that I observed that comes with that is that my agent can actually build faster to a quality level that I say is okay when it starts with a decent design starter kit. Not an overengineered design guide, even though I think what I produced on the weekend it could already be considered over-engineered. You don't need to go all that route. But it didn't take that long. once an agent has a strong design kit to build on, it can do everything faster afterwards because so many things are already decided. and that's what we're getting into today. So, what happened on this weekend of mine? I started working in canvases. let me show you what I mean. Let's switch to Claude again. Here's the full website, but let's open the normal conversation here. I have this design conversation that you can see here on the left-hand side for pirate skills. When I built the app, I had the web and app design conversation here. I tend to have conversations for certain topics and Clot Code has this beautiful slash design skill that you can have on Codex by just asking it to do like a HTML version for you. And it opens an infinite canvas for you where you can just try out things and ask it to do multiple design iterations. So I actually started with a website. And you can see the full history of what I asked it to do in here. So let me put this on full screen as well. let's see everything. Here we go. So now we can see this design a bit better, and you can see how the website direction evolved over time. I usually ask it, giving the idea that I briefed you, the problem we want to solve for a certain audience, and yes, there is an artifact for that too. so here we see the ZOG IDEAR, the product, the customers, the version one, the pricing, etc. in here with researches on competitors, naming process, and all kinds of things and especially important like the audience description and the text tag which with which we are building this. This all went into when I asked it, hey, could you please do six very different designs? And I looked over it and I was like, these all suck. maybe this typography doesn't suck that much. This is alright, but nothing impressed me. So I did another round. I gave it some feedback, what I liked, what I didn't like, and it already produced two designs that I did like. It was this paperback style design and the cue idea. there are also some other cute ideas, and also talked to Christina about it. But look what this does. The agent provides a buffet, and now a human, me, is the curator on these designs. And you didn't have to do all design decisions alone. I keep on asking Christina, hey, can you take a look at this? What do you like about it? What don't you like about it? but I try to go broad and get an idea for a design direction I could pick up on. And here was the starting point. This is when I thought I love the gardening and cultivation story behind this. and I thought, okay, how can I go deeper into that idea? For a while I totally thought I would go into the kitchen direction where I thought everything could be like a cook working on a kitchen and has different recipes for different content types that can be distributed across all channels in the restaurant. but I got away from that. So I Doubled down into the organic gardening metaphor. And then we went with original, then some evolutionary steps, some more modern vibes. I wanted to go deeper with the roots analogy here. This is a bit more playful. And more modern designs, and then at some point it produced this variant. I asked it like to do a cyberpunk biohacking type of site. And this reminded me of my love for low poly art. low poly art is when you can clearly see the pixels and geometry of designs without it being too detailed. And it started creating this design, and Christina was like, that's the one. and I absolutely love it too. I didn't like this one, this darker one, but this one was the promising direction. So we moved on. and I made a decision: let's go 3js. 3js is A design framework that people use now to build games in the browser. but that you can use for 3D animations, like what you can see here. with this background that is swaying slightly, and you can see already that this is very much in the direction that I wanted to go. that also helped me confirm that I went dark mode. I didn't want the light mode here, I didn't want black either, but this green color really spoke to me. And then it just took a couple of iterations of really building out the landing page until I think we are currently on draft number nine. We landed here, a desktop and mobile version that I am proud of. that can really speak to the user and sets the foundation for everything. Okay, back to the article. So, how long did this take? We had an initial version that looked like this. So, the idea was express on a simple landing page. The green was already in there. But there was no other design around it, and quite far away from where we landed. It took me nine hours over the weekend, and that would be me. Actively sitting with the agent, 30 minutes here, an hour there, two hours there, And I sent 77 messages. And I got 79 different versions on this canvas. It wasn't in the code until today. And it was just the canvases. And today I asked it since I wanted to publish this article that you can take a look in a real web version and also test it out on your phone. Maybe give me a little bit of feedback because it's not perfect yet, obviously. But That helped me go from this version to that version. You can also click on this image if you're reading this article on the website and see it in full if you don't want to go to the website. these boards made the big difference and I think this is what the what I called the old Figma design process that big projects are using that I called outdated and I couldn't be more wrong about that. This is a beautiful process. This is such so much faster in your iterations. You can see many comparisons side by side. to make a decision in which direction to go, that it really outperformed my old way of just having one version in the code. maybe having different URLs for that, but that creates so much messiness in the code base where you maybe think you can clean it up later, but there will be still some stuff around that you might not want to have in there, then later confusing the agent of what is the actual correct design. so let me explain a little bit how these design rounds worked. I'm using this in Cloud Design and let me just show you. I for example am working on the website and I don't like something. or I work on a component library and I feel it's incomplete. let's say I think at the end I have a list of things that I haven't built yet. Let me show you that in the conversation. I will ask it, hey, could you give me like the five next steps to do? and it, for example, wants to create the voice check. That is something I want to do during the Pirate Forge workshop. But actually, there were a couple of components in the admin area that I would like to work on. And then I would just send a message in here and say, like, okay, I want to work on icons. here we built this nice duotone icon style based on lucid as the baseline. and I just send it messages and the agent draws. And then I take a look at the work and I have to be the quality bar. I have to bring my own taste naturally. I can also take screenshots from other designs that have the taste and the direction that I want to pursue that I might not be able to express as much. And then I look, I pick. And then we go deeper and deeper, iteration by iteration, through that design process. And I really love to keep the history and would love to show it to you with the example of the logo development that I just wouldn't have been able to brief. After I went a little bit into the website, I felt okay we got the main hero piece of this whole analogy that I have going on. You prune your bonsai tree, the way you prune your tone of voice, your different content formats to improve them over time and really put love and attention and taste and your personal style into it. So I knew the highlight would be the logo. But It didn't get there right away. So let me show you again. In the design process, I can switch pages. you can have on the design canvas many different pages. On Codex, you probably have different designs in different HTML files, which is just as good. And here were the initial designs. I just had the word mark. let me zoom out a little bit. And it created mostly designs in relation to the wordmark, Zog. By the way, Zog is an old Persian word meaning good taste developed through experience and an appreciation for good and beautiful things. And I wasn't happy with these at all. And I gave it a little bit of feedback, but I thought I saw, like, no, this is heading nowhere. It's just kept producing this generic ugly stuff. As you can see, like three-direction, nothing. So I needed to step in and say, let's Imagine you're doing an app icon for the Apple App Store. that already helps me these days after my mobile app building experience from last from the last two weeks. That mobile app icons have very high design standard, and they are not a clean representation of the logo, but a fancy representation, and that actually helped me to start seeing which directions I want. So I like this tree. This I wasn't yet I didn't have the bonsai yet, at this point, but I already liked this one with the harvest moon in the background. And then I morphed it, I asked it like, hey, could you do different tree shapes? And it came up with this bonsai style, this other one, and then it also did like a Z version from Zog. And I really loved that idea. So then I said, okay, let's develop this tree into what I want. And then I needed to learn about bonsai shapes. And I learned that there is a certain bonsai shape that I really like called Miyogi. and then it put it into a pot, it started animating it. I'm already overdoing it at this point with animation. I should have focused. I asked it to create AI-generated images and then style it on top. Give it a couple of screenshots and we ended up at a pretty good place here. it's still in the pot, which I didn't like. And then I asked it, come on, we need to simplify the shape, needs to be iconographic. If we ever want to use it, for example, for an app icon or logo, let's do a 2D version. But it totally failed on that. You can see like how the pads are not attached to the twigs here. Completely ridiculous. So I said, no, no, no, let's stay 3D for now and then we abstract that down to 2D. and I polished and polished and polished. And we came out here to this one at this stage. you can see that this is not the final one, but I already liked like the a bit more iconic shape here, but it still looked more like a mushroom than a bonsai. so we got a full logo guide, and I was like, yeah, could be, but I'm not impressed. How about we actually spend some time to Develop this hero character that I also want on the website. and I treat the tree as a hero character in my branding here, and then go back to the logo development. And that was again a breakthrough to go to a very detailed version and then morph it into a way that I really like. So that after a couple of iterations. Ended in this version, a cleanly rendered SVG version of the tree, and that is not in 3D, that is highly sufficient, can be used in many places like Favicons and icons that places where it doesn't lend itself to an app icon style like here, but this is the one I love. This is clean enough for me. I would put it in the app store. I think it's recognizable. I looked into the app store for other bonsai logos, and this would be standing out. I have it in different color schemes for light and dark. I have it together with the with a brand name. and that is how you end up or how I ended up with this logo. So Huge evolution. It was a lot of fun for me during the weekend. it is also not something where you sit for hours and hours and hours. I think you can do this, but it's more like giving it feedback, letting it work for 30 minutes to an hour, getting multiple iterations, and then continuing the work, giving it more feedback. So What did this cause for me? it caused me to change my opinion that I want to make certain design decisions before I start coding. Similar to before, and I was just focusing on the build process. I wanted to have a clear opinion on the tech stack I'm using that is appropriate for the application and the product I want to build. And the same now has a new layer for design. And I want to get clear on colors, whether I want light and dark mode or other themes. I want to I did set the currency, I don't think it's that important. but just for the pricing sections, do you want to have a switcher for your currency? Do you want to be US only or euro or whatever your currency is? Have a couple of starter screens, how your app might look like, not the website, but the actual web app. and some icons. that is plenty. I have these app screens in here, they are definitely not final, but they already express My wish that this becomes like a more agentic workflow here with a sidebar, with user being able to interface it through the web app, but also with their own agents and just go use the dashboard for the review process, for example, if they prefer that. And just a couple of things. and I now have this in Claude Code. in the canvas. But once I start actually developing the app, I ask it to transfer that into the code base, write documentation on it, and create a ZOC design skill that I can use in all future sessions that need any type of front-end design. And you also see that beside the website and the logo, I have a full color overview, including accessibility checks. This greatly simplified the color scheming for the app. And since it's aware of the tech stack and it knows we are using Tailwind, it already set up all of the Next theme plus tailwind expectations of what needs to be agreed on. and then it applied it again to the website version and I checked is everything still good? Does it confirm with accessibility checks? Where do I want to make exceptions? For example, when I have a full screen rendered scene like the Zorg AI website hero page, I'm okay with risking a little bit of accessibility. but the rest of the app and the website needs to be fully compliant. I build a component library, I have some app screens drawn, I have small pages like let's say a fun 404 page, that has this just starter bonsai here, and it says nothing gross here yet. and it's a fun 404 play. I also let it design a blog. I actually wanted to give a few places to now apply this little design kit so I can see it in action and give it feedback, and there is a back and forth relationship between it creating real designs, me not liking things, giving it feedback, and it's doing the updates, for example, here on the blog, but also in the design kit for all future references. I love this workflow, it has become Highly addictive for me. So, this is not all done yet. I got the basics of the brand. I got the website design, I got a little bit of the app design, I got the new homepage that is live since today. And now I need to build the real app. and this is part of the Pirate Forge workshop experience that I build the app in front of the users so I don't want to rush ahead too much here. But I wanted to go from having a first version of the landing page to a more branded. Tasteful experience. I also need to do a lot of performance optimization. If you're getting into like 3D renders, then you have to be aware that maybe users on older devices, like here, my 2018 iPad Pro, which is fantastic, but is quite old and it doesn't have the performance my M3 MacBook Pro has. so I need to be sure that this is working on an average phone, on an average laptop, for example, just as well, or I need to make some cuts in the fanciness, which is totally fine for me. So now it's up to you to do your own vibe design weekend or full grind day. My recommendations are the following. Just focus on building your next landing page in that new design. Don't go full app and everything, but feel it out on a single page or a single screen. And if you're starting a complete new project, start this even before you have the full repo. Just open a slash design canvas in Cloud Code or Cloud Design or ask it to create an HTML file if you're using another coding agent like Codex, and then Ask for like let's say six different iterations. If you want to feed it a few things that you like, do that at this point. but then ask it to play with it, give different iterations, and then find the one that you really resonate with. and then go deeper into the SRT. to it, pick the number for example, say what bothers you, say what you like about it, and let it always create a new version below that in the canvas. So it's not overwritten and you can actually see the progression. Or if you made a mistake, went into the wrong direction, you can say, no, let's scrap that, let's go back to version six and continue working in another direction. And then once you're happy, lock in the colors, lock in the fonts, lock in the components and layouts that you like. And then, last but not least, let the agents build things. Build home pages, build specific landing pages, build your blog, build your applications, and you will be not happy with everything that it does. But just go through this process, give it feedback, let it create a skill out of that. and keep the process going until you are happy. If you want to start a prompt or just something as a draft that also includes like the accessibility standards that I used in this process, you can copy this prompt for you. and if you're not if you're listening to this on the podcast or watching it on YouTube, I will have links in the description that leads you to this page where you can download it. All right, this is truly addictive. so get ready to find another rabbit hole in your life that is design and try to master it. And if you have a friend that has true design chops, Pull it to your side and let it let him or her tell you what is still weak about your design. Because I had so many great designers in my life helping me develop taste and see nuances. But my design level, I would say a solid six out of 10 right now, compared to the designers I have worked with in the past. So we have to stay humble, stay open for feedback from users and professional designers. But then extract that taste back into your code base, into your skill, and keep going from there. Have fun with this. I hope you enjoyed this. That just leaves me to tell you how you can go deeper into the pirate skills experience. The best way to experience pirate skills is the events. let's say you are a complete beginner on this, you're using ChatGPT or Gemini, and you want to ask yourself, like, okay, What can this whole AI stuff do for me? Every month we do an introductory session for exactly these people, and you might know a friend who needs it. It's called the AI Compass. It's a free online session for about an hour. And I take people from level one, just working with chat, to level two, co-work to level three. What is the value of using Cloud Code? If you're already further along and you want to listen to things like today that represented my own cutting edge of my thinking, this is what we do in the pirate labs, where we show things that are further along for agentic engineers and vibe coders that want to expand their horizon. And these are both online, but we also have, in case you're in Cologne, two offline events that are really beautiful. One is called Vibecoding Cologne, which we stream as well. So sign up and get a recording. If you're interested in that, this is where we hold three to four talks. The next one is this Wednesday It's always the first Wednesday of the month. That is not a holiday. And there we have talks from the community sharing real things. And that changes a lot of things. If you are surrounded by people, usually like 70% non-techies, 30% techies in the room. People that are actually doing this, that are not geniuses or anything. I'm not anywhere close to being genius with this. And seeing these people do things that I wouldn't have thought possible three months ago makes me believe I can do it too. Then we got the vibe hackathon. The hackathon is Like the deep dive experience we do in Cologne here. every quarter we fill a whole weekend with over 100 builders and lots of mentors, and you get to build and present on Sunday if you want to win fabulous prices. That is a paid experience. the other ones are all free. And then for people who want to build their first real SaaS product that they want to launch and also vibe market it, That's what we have the Pirate Forge for. You can check it out below, but this is how we monetize. In case you're asking, Ben, why the fuck are you giving all of this away for free? We monetize primarily through the Pirate Forge, and I would love to have you on board. All right. That's it from my end. That was my design process that I'm totally addicted to right now. Please tell me what your process looks like, how I can optimize my process. This is so freeing to now have the equivalent of a full-time designer in my small but mighty team. Hope you liked it. See you in the next one. Bye-bye.