Dissenyar webs amb IA sense «AI slop»: què funciona i què no demostra Genspark

This video I want to show you how to go from an app that looks like AI slop into a professional quality design. If you've ever tried building a website or an app with AI, you probably ended up with one of two design styles. Either you get the purple gradients and glow effects, or you end up with something that looks like Claude with beige colors, browns, and oranges, and something that just looks like Claude put it together in about 5 minutes. And so what I want to do in this video is take an existing app that is already making money, but looks like it was my coded, and take it to a professional level of design quality. And I'm going to be doing that using GenSpark Design. And so in this video I want to show you the problem with my coded design, why it doesn't work, and why it's such an issue, how you can then fix that my coded design with tools like GenSpark Design, and how you can then turn that new design style into a full launch video using GenSpark's AI video tool. And so by the end of this video, you'll know exactly how to use AI design tools to turn your my coded app into something that looks professionally designed. If you don't know me, my name is Chris, and for the last 15 years I've been designing apps and advising startups on product and design, and I've helped hundreds of people to build and launch real apps and websites using AI in my community, and get real paying customers for them as well. And with that said, let's jump straight into fixing this my coded design. So before we get into the design here, I want to talk about the product that I'm going to be redesigning, and the one that I want to redesign is a product called SEO Stack, which is basically a marketing SaaS product that offers data warehousing with AI. The entire purpose of this is allowing SEO specialists and marketers to be able to get better results in search engines and LLMs. And this was founded in January 2021. But the reason I want to redesign this is because right now this is looking a little bit my coded. You've got a lot of traditional signs here that this is a my coded product, even though it actually isn't because it was built before AI coding really became like something that people do a lot. This is one of the things I want to touch on here is that my this kind of my coded looking design is now something that is really off-putting to people. It is something that turns people away from actually signing up to your product. And so that if you build a product, if you build an app or a website, and it looks five-coded, it is going to be something that that's going to be something that turns away potential customers. I want to break down why that is the case, and then I'm going to go through and we're going to redesign this to look a little bit better using GenSpark Design. And so I want to break down what is AI-slop design, the problems with five-coded design, and what that means that your customers think about your products. And then after I've gone through these, we're going to jump into actually redesigning this with GenSpark Design, and we're going to create a bit of a launch video off the back of this as well. So what actually is AI-slop or five-coded style design? Where it's basically any default style that an AI agent reaches for when the user doesn't specify exactly what they want. And you can see this in this kind of apple gradient effect style that all AI agents would reach for in late 2025, mid-2025. In the early days of kind of like five-coding apps and websites, this was kind of the go-to style for a lot of AI coding agents, where it would just do this kind of purple, blue and purple gradient kind of effect, really generic kind of sans-serif fonts, and it would apply that to kind of everything. And this is a little bit better than that, but it still falls into that trap. And it's it always looks a little bit worse because it was built before five-coding was a big thing. And now it's fallen into this five-coded kind of AI-slop style without necessarily intending to do that. And so I think there's a benefit from being able to redesign something like this. And the reason why I wanted to redesign this is to also

show you that there is a ton of products out there that are actually making money even though they look five-coded. They're making This SEO stack is making $25,000 a month with an all-time revenue of over $400,000. And I also want to help you understand that design is also an amplifier for growth as well as being the reason that your customers might sign up in the first place. Because if you can build a product that has enough value, that delivers a good enough outcome, even if it looks bad on the surface, people are still going to sign up for it, but just maybe not as many people. And design is one of those levers you can pull to kind of unlock growth and scale for any sort of product or app that you're building. And so, what are the What are the actual problems with vibe-coded design? Well, there's a few things that having a website or app that is that looks vibe-coded signals. It signals that you didn't spend much effort on this. It signals that maybe somebody shouldn't trust you because you didn't spend as much effort on it, or that it's just something that's been thrown together by an agent, and you haven't had much involvement in it. And it signals an amateurish product or business. So, people think that you are not going to be professional, that this is not a real product. This is not something that they can trust. And also, AI often doesn't know what converts your customers and what resonates with them. And so, you'll often find these vibe-coded style websites or apps which are overly wordy, that where you've clearly where it's clearly used quad to write reams and reams of copy about your entire product, but actually really not right here on the messaging and the wording that resonates with your customer. And this is an element of design as well that comes through in this AI slop from vibe-coded kind of design. So, what does this mean that customers actually think about you? It means that customers who see your product or your app or your website that is that looks vibe-coded and uses kind of generic AI slop style design, they think you don't care, so why should I? They think you are not an established product. They wonder if you'll be around in a few months to a year. And it's also confusing and hard for them to read and understand because there's so much text and so much information that that AI model has just put on the page because it thinks it's writing the best copy for your product when in fact it's just not being guided on the things that your customers actually care about which is something that you know but the AI doesn't necessarily know. And people will think that if you put this amount of effort into your website, if you put this amount of effort into your design, then you probably didn't put that much effort into your actual product either. And so is it even worth signing up for? And so you can see how design is really important not just in helping you to stand out amongst a sea of five coded AI slop looking apps, but it's also really important in helping convert and retain customers for the long term as well. And this is why design is one of those key pieces building a product of building an app that can actually get customers and scale. And so what I want to do here is I want to take SEO Stack, proven company that is making revenue that just looks a little bit five coded, and we're going to put it into GenSpark Design, and we're going to see how well we can redesign this to have a bit more of a professional look and feel, to be a bit more differentiated than the market, and to also improve the copy and the presentation and overall style of this website so that it no longer looks five coded. And when people come to this website, they will actually trust the product and want to sign up. And this would theoretically be something that also unlocks conversion, unlocks growth for this business as well. And so I am using GenSpark in this video. So this video is sponsored by GenSpark because I wanted to show you GenSpark Design, which is similar to Claude Design and a lot of the other AI design platforms out there, but you just don't necessarily have that really specific kind of Claude

flavor to the design that it creates. And we can also create videos, animations, and a lot more stuff in GenSpark Design as well. But what it's really good at is these kind of user interface visual design mock-ups or even experimenting with this as well for creating a design system. And you can see you have a bunch of these templates inside Jen Spark Design, which you can use as an inspiration or as a starting point to actually get started with building your design for whatever you're working with. And you can download the code directly from Jen Spark Design as well, so that you can use that in your local project if you are building an Apple website and you want to take this design style from Jen Spark and bring it into your actual project. So, let's come over to Jen Spark Design. Firstly, I just want to give it a very simple prompt to redesign this website with three different variations to a professional design quality. And then we can maybe do some other things with using image references or other design references to pull into this so that we can create something that stands out and is a bit more unique. And even if you just do this simple step before you actually build your product or website of exploring a few design directions first, this can have a massive improvement on the quality of your product. And not only the quality of your product, but the perception of your customers as to how professional and how high quality what your business is, what you're offering actually is. Help me redesign this website. I'd like to retain all of the existing content, but can you give me three more professional, high-end, and high-quality design directions? Because at the moment it's looking a little bit vibe coded and I really don't want to go down the direction of purple gradients or anything that would signify AI slot or that this has been vibe coded. Let's send this off to Jen Spark Design and see what it comes back with. Another way that you can actually use Jen Spark Design as well is by uploading a Figma file, referencing other designs, or grabbing web elements here. And what this is doing now is this is going to ask me a few more questions to help give me better design output. So, who is the primary audience these directions should feel right as good for enterprise SEO teams and agencies. I think we should go for in-house SEO leads here. Which brand aesthetics resonate as high-end to you? So, I'm going to go for a Ahrefs, which is a competitor. We're going to go for an editorial direction here as well, like Bloomberg. And I want to go for something that is a little bit more playful here as well. So, we'll go for an Arc or Raycast style direction. Confirm what to avoid. He mentioned purple gradients and violet coded looks. So, avoid purple and violet gradients. And what avoid neon glow effects. Emojis, overly rounded UI, AI sparkle sparkle iconography, and cheap stock 3D renders. So, we're going to avoid any of those. For color after site, we're going to do one dark, one light, and one editorial. Typography direction here. Let's go for a mix and have one direction per approach. How should the hero communicate the products? Go for statement left and live-looking dashboard right just to see what that looks like. How prominent should charts and data data visualization be? Yeah, this is a data product we're deciding up front. Very prominent, moderate, or restrained? Let's do moderate here. What should each of the three directions include? So, let's do full homepage top to bottom. Actually, let's just do hero plus one supporting section so we can get a sense of where the directions are right or not. Product screenshots, how should I handle them? Current site has real and GSC dashboard screenshots. So, let's move up believable dashboard UIs in HTML and CSS. Should I tighten the copy or keep it one to one? So, let's actually like rewrite the headlines to match each direction's tone. Let's go with whatever fits each direction best for the specific device or browser framing, and then let's click continue. And what Gen Spark design is doing here, which is great, is actually asking all of those questions up front so you can

get a better design output at the end. And those sort of questions are what you wouldn't do if you were just using a coding agent to build a simple website for you from a rough idea. Now we've got our design directions, Let's have a look at them. And I do think this first one is a decent direction that we have here. And you can already tell, like, our goal with this here is to minimize the way the vibe the vibe codedness of this design. And we're doing a pretty good job here as well. So, I think this already looks like a much more professional and and a considered product just in this version here versus this, which looks like it was something that is vibe coded. And this design kind of direction has definitely faded a lot over the last kind of over the last year or so just because of how often AI would design in that style. This looks a lot more professional. We've got some other design directions here as well. We've got terminal, which is looking pretty good. It's a little bit more technical kind of leaning here. Um it still is super nice, I think. This is really really clean. I like this direction. And again, feels more professional than this direction here. And then we've got broadsheet here, which I feel is not the right direction for this at all. And this just looks like something that Quad will have designed. So, we can kind of scrap this direction. So, what I want to do here is expand on this by having a few more variations of this blueprint version here, maybe using some different colors, maybe using some different typography. So, let's ask Jen Spark to give us three more variants of this blueprint version. Can you create three more design variants of the blueprint design direction, but use different professional font pairings for each variation and different color accents as well. Make sure that you don't underline the links on this design option as well. I will remove the underline on these links here because we have this in the buttons and in the top navigation here as well, which just looks like a kind of very basic link style. So, I think we can get rid of that. So, let's send that to GenSpark and see what GenSpark comes back with. Quick break in the video to talk about how you can make 5 to 50k from your app or product idea inside of my program, The Product Studio. Now, in The Product Studio, I teach people the exact process to go from idea to live products with real paying customers. The program walks you through the entire process from start to finish, from finding the right idea, figuring out the business strategy, building your design system and product identity to building the full product with AI coding agents, and launching it to real paying customers with a strategy that is tailored to your specific product. Plus, you get a load of ongoing support to help you actually reach that 5 to 50k target as well. So, if you're interested in learning more about how you can launch your products and make between 5 to 50k, then you can click the link in the description down below to apply to The Product Studio. I'll see you there. Let's get back to the video. So, now we've gone to design a variants back for this first direction, and you can see there's three design directions here, all with different fonts, slightly different fonts, and different coloring here. I actually is still this this second option is still definitely too light. Gives off a little bit of cold kind of vibe still, especially with the instrument serifs, which I would not use anymore actually just because it signifies AI slop a little bit. We have this option here, which is Space Grotesque. I actually want to do a few variations of this and you of this headline here because I think that's not working as well as it could. But, otherwise, I think still the best version of this is this first design here. And, I'm just going to edit this to give us a few different heading

options here. So, let's ask GenSpark. Only give me three more heading variants for the hero section, the focus on the outcome that the user would get from this rather than what the app does. Let's see what Gemspark comes back with. Now we have this control here which basically lets us toggle between these different headings here on the page. So we can judge which one you think is best. The product led one that is this original one. For organic traffic, you can actually defend. Speed, answer any SEO question in under a minute. And impact is ship SEO work that measurably moves the needle. So I'm going to go with this impact one, I think. And then let's actually build the entire rest of this page using this design version here. Let's create the full page using blueprint variant A and the impact headline. Let's get Gemspark create this full version of this page for us. So Gemspark is now finished designing the full website there for us for SEO stack. I think this is looking at a lot less of vibe coded than the existing website that they have here. So if we go back to our design here, what we have is our full page is looking like this. Now some of the sections here are looking a little bit repetitive with these mockups. But once we get down a little bit further on the page, you can start to see some of the more interesting design direction coming out in these bento kind of box style layouts here. The dark background on this stats banner, which I think is great, and the pricing structure in this bottom section here, which I think is working really, really well. We've got a bunch of stuff called out on the page from social proof to FAQs, pricing, and a call to action at the bottom of the landing page as well. Now this is all following the structure of the existing page. What we've done is taken something that looks initially and very, very vibe coded in this design, and we've improved this even with just these one or two initial kind of design directions that we've got here. And the way that we can take this to the next level as well is by taking in what we've got here, downloading this, and then bringing this into our existing code base. We could even turn this into a default design system if we wanted to as well. So, let's ask GenSpark to do that. Can you create a full design system HTML file outlining all of the design components, styles, typography, and design rules in this landing page that we can use in the uh code base for this actual product from the SEO stack HTML final full page design. And now GenSpark is going to go away and pull together that design system file that we can then use inside of our project to apply this same design style that we've got here to our actual product so that all of the design components and design styles all align across everything that we're building. And we give ourselves a really, really solid and strong foundation to work from for the design of our actual product as well as our website here. So, you can see now that GenSpark design has created this full design system HTML file for us. And this can be a design system file that we use to inform how all our agents are going to build our entire product and the rest of this website. It covers everything from spacing to typography, typographic hierarchy, all of the color palette that we're using in here, and a bunch of the components that we're using throughout this website as well. All documented in this HTML file. And this means that we have a framework, a system for us to reuse any of these design styles throughout our entire product and our website. And if you want to use these and pull these into your project, what you have to do is just to click download on this and you'll be able to download the HTML. So, we have our initial outline for our website here, which has all of this content on it. And this is our redesigned version that doesn't look like five coded design. And

we have a full design system that we created here inside of GenSpark Design that we can then download and apply to our product. I want to do one thing here more before we finish up, which is basically to turn this into a launch video. So, we can do a launch for this product. Create a Create a video, basically, to launch this product. So, let's ask GenSpark to create a video for us in GenSpark Design now so that we can post this on social, launch this product, and get some people actually signing up for it and using it. Using the website that we've created for this, the final version, can you create a short promotional video that we could use as a launch video for this product showing, basically, the key features, what it does, a bit of an some mock-ups of the user interface, and basically communicating the benefits and the outcomes that people are going to get from being able to use this software, and some of the key details, whatever you think is best for the launch video from the website that we've created. So, let's send that off to GenSpark Design now and see what it comes back with. So, you can see now that GenSpark has a planned video script outline here. So, we have a story arc through six scenes, basically, the pain, the reveal, the product, talk to your data, the proof, and then a call to action and word mark at the end. This is putting together a short, 45 seconds, roughly, video based on all of these steps in the story that it has outlined, and this is going to give us our launch video. So, now we have our launch video from GenSpark which it has then created for us here. This is 45 seconds, and and it's going to go through that full script that it outlined in the plan. So, let's watch back the video here. It first starts off with the pain, the limit to SEO, and like the uh you can see like the introducing the product, and then the dashboard here that we've got. Talk to your data, so an example here of talking to your data inside of this product, and actually being able to see the results through SEO efforts and then some of the stats and proof here that we've got for the product. So, it's taking everything that we've used on the that final version of the landing page and then ending in a call to action here, which is going to prompt someone to then go and sign up, hopefully. Now, you could create a much better launch video by just making some tweaks on this, but this is a really, really good starting point and the fact that you can do this from basically just a website design here just gives you an idea of what you can create using GenSpark design here. From design system to web and app design and even to a launch video here for your product as well. So, now that we've gone through that full process, let me finish up with my final thoughts. So, hopefully you can see how easy it is to redesign existing vibe-coded looking apps and websites using tools like GenSpark design and how you can then translate that into a full design system and also create a launch video that you can use to actually post on social and try to get those initial customers for your product. Now, obviously you can take this much, much further than I've done in this video just demonstrating these features, but I think this really shows how capable these tools are now at creating all of these visual assets and also giving you design that doesn't look like AI's look if you just use the right combination of tools and prompting and explore multiple versions before you actually settle on your final design. If you enjoyed this video, don't forget to like and subscribe and if you are building apps or websites with AI and you want to learn how to launch and get real customers, then I've got a community helping people do that over at school.com/ai-apps. And if you want to take your product even further and make 5 to 50K or more, then I also run an exclusive program called the product studio, which again you can find the link in the description down below if you want to apply for that and actually start getting real customers for your app and actually scaling it. Thank you for watching and I'll see you next time.