R59 | This AI Agent finds Ugly Websites and Bulk-Designs Them Into $5,000 Builds (NEW System)
By Jay E | RoboNuggets
Summary
Topics Covered
- Scale to 100 Redesigned Websites Daily
- Show Before You Sell: The Demo-First Sales Method
- AI Agents Are Built from Plain Text Files
- Skills Are Reusable Building Blocks Across Workflows
- Solve Problems Automatically, Then Pitch the Solution
Full Transcript
I just built an agent system that scrapes a city for businesses with ugly websites, redesigns all of them from scratch, and hands you a batch of polished designs ready to send. So, this
website turned into this, this one became this, and this transformed into this. And when you have your agent
this. And when you have your agent schedule this to run every day, then every afternoon you could have 20 or even 100 finished websites if you want to. By the end of this video, you'll
to. By the end of this video, you'll know how to set this up for your own agent system, whether you're using OpenClaw, CloudCode, or something else entirely, and how to visualize the agent's structure so that you can understand it simply and even explain AI agents to clients without showing them a
wall of code. And if you're new here, my name is Jay. I spent over a decade working with brands you probably know, have been in AI since my master's in data science, and now I run our AI solutions practice in one of the largest AI communities globally. Let's get
started.
Now, [music] to give some context on the opportunity, you'll find that most local businesses still have websites that look like they were built in the early 2000s.
So, this was a great example of that, where you have broken layouts, not so professional text, and even the way to book online doesn't look too professional. And the thing is, these
professional. And the thing is, these business owners probably know that they can use an improvement, but having it built properly by a web design agency can cost anywhere from four to five figures depending on the build. And so,
they stick with what they have. Now,
previously, the way that you approach these businesses is maybe you send a cold email to them, provide them with some portfolio of your past work, and hope that they respond. But what is more effective is that you actually give them a view of what their website could be,
which is a much more convincing sell rather than just explaining it through words. And because today's AI agents are
words. And because today's AI agents are so capable, transforming this website into a design like this is actually really easy and can be done fully hands-off. And this demo site is
hands-off. And this demo site is complete, by the way. Like you can see at the very bottom, for example, it even has the address correct and also loaded a Google Maps widget in order to identify where this shop exactly is. And
so, the agent handled all of that, including the sourcing of the information, designing the website, and even deploying it online so that your prospective client can view it immediately. And because this whole
immediately. And because this whole pipeline can now be smartly handled by an AI agent, you can actually repeat the whole process and do it for multiple businesses at a time. So, that is exactly what I built here. And what this is is basically what we're calling the
beautiful websites agent toolkit. And if
you send it to OpenClaw, CloudCode, or whatever agentic platform you're using, it equips your agent with these four skills, which is everything it needs to run this pipeline. And just to show you what those four are, you can just
minimize this. These are skills that let
minimize this. These are skills that let your agent instantly know how to first find businesses from Google Maps with potentially bad websites, and then it qualifies them by actually going to those websites individually, taking a screenshot of those websites, and
deciding on its own if it's worth redesigning them or not. And for those websites that it deems that an upgrade is necessary, what it does is use this skill that redesigns them. And once it is done with that, it deploys them
online so that your prospect client can view them from their side. And by the way, if in case you're curious, this interface you're viewing is something we're currently developing at RoboLabs.
And it's just a visual layer that lets you view and present your agent systems which in our view, if you're selling AI agent systems as a service, this is actually quite essential. Because if
you're using CloudCode, it's actually not ideal to present that wall of code to your clients anyway. Or if you're using OpenClaw, a lot of this build structure is abstracted behind like a Telegram chat. So again, it's not that
Telegram chat. So again, it's not that optimal. But with a view like this, it's
optimal. But with a view like this, it's actually much easier to visualize these skills. Which just so you know, if in
skills. Which just so you know, if in case you're new to the agentic world, and for it not to be intimidating for you at all, each of these skills is essentially just a text file. So, if I view one of them, it's literally just a well-written document that guides your
agent on how to do each step. And the
reason why skills are important is because they're entirely reusable. Let's
say you need more information from Google Maps for another build, then this particular skill can still help with that even if it is not part of this one workflow. But if you're giving these
workflow. But if you're giving these skills to your agent for the purposes of this workflow, what essentially guides it to use these skills in this specific manner of steps is this workflow.md
that's also included in this agent kit.
And again, that's just a text file. So,
it shows how to run this pipeline, what are the individual steps, and what are some of the watch-outs. And the great thing about this is that once it's set up, you can run this or even schedule it to run on a regular basis for any particular niche in any city, and you
can customize it to whatever you need just by talking to your agents. So, just
to demo it quickly. So, I gave this agent kit to my OpenClaw agent here.
Hey, can you run the beautiful websites pipeline for, let's say, wedding venues in Sydney? And once I fire that off, you
in Sydney? And once I fire that off, you can see it's now working through the process.
And once that is complete, we now have our upgraded websites here. So, this is the first one, and it's looking really good. Just to compare to the old
good. Just to compare to the old website, it was this before. So, you can definitely tell that it is a big upgrade versus what it was. And then the second one also turned out pretty well. It even
included an hour story section here, which is pretty cool. And again, just to compare versus the old website, it was this before. And you can see what the
this before. And you can see what the agent did here is read through their current website. It says here, "With
current website. It says here, "With over 60 years experience in the hospitality industry." And it basically
hospitality industry." And it basically included that in the final website. And
that just makes it more appealing for this business because it tells them that you took the time to actually look at their website and their story and implement them in this demo website that you're about to build for them. Now,
this agent kit, we originally built this for our community members inside RoboNuggets. So, if you're watching this
RoboNuggets. So, if you're watching this and if you're part of the community, you can just grab that in the link below.
But if you want to learn this yourself, let me actually walk you through each skill in the pipeline so you understand what's happening under the hood. And to
talk through that, what I'll just do is have our agent run through this pipeline step by step. Hey, can we run the pipeline again, but this time maybe try
and scrape 50 businesses for nail salons in Sydney, and also do it step by step so that I can review the output on each step, and so I can also see it in our visualizer. So, let's just fire that
visualizer. So, let's just fire that off. And what it should now do is
off. And what it should now do is activate this first skill to scrape Google Maps and find nail salons in Sydney, which is now that is what it is doing. By default, as part of this
doing. By default, as part of this skill, it's a best practice to include that if there is a cost involved, like for example here for scraping, it tells me how much approximately it will cost.
You can obviously tell your agent to just skip this process if in case you are running it on a scheduled manner, but by default it does flag if there is any cost involved throughout this whole pipeline. And if you look at this skill
pipeline. And if you look at this skill specifically, again, it's just a text file, but the tool it is using to do this is called Apify. And if you haven't used Apify, it's basically just a way to extract and scrape multiple websites and
platforms, Google Maps included. You can
see here that this particular run is already populating. So far, we have 41
already populating. So far, we have 41 results in there. And this Google Maps email extractor is the tool that we're using from within Apify, or to be more accurate, our agent is using in order to go to Google Maps and actually find the
places that we are looking for according to the parameters that we gave it, which is 50 businesses in Sydney, specifically for nail salons. So, it did that search for us without us even having to touch anything. So now, it does say that the
anything. So now, it does say that the scraping has finished. So, I think what my assistant is now going to tell me is if I'm happy to proceed to the next step. And you can see here that it is
step. And you can see here that it is currently waiting for my input because I asked it to do it step by step so that we can observe it. And the great thing about AI agent systems is they have inherent smartness already built in. So,
for example, without me even having to code it or write it out in my specific prompt, it already dropped three junk emails that it was able to find and was able to not just scrape 50 listings in there, but also check which ones are
valid leads, which you can see here.
Now, to set up this skill, again, it's just a text file. So, if I view that, you can see in this description that what it is basically doing is extracting Google Maps via Apify and returns a filtered list of local businesses that
have both a discoverable email address and a website because those are the two requirements that we need in order to improve the website. And for that, obviously, we need a website in the first place. And the second thing is a
first place. And the second thing is a discoverable email address because we need some way to contact them and actually send them their improved website. And so, you can see in this
website. And so, you can see in this skill there's some guidance around what the user will likely ask for, some guidance on how to use Apify, and it also tells the agent what particular fields within Apify contains the emails,
in which case it is the emails field and the website field contains the website itself. And so, if we go to the actual
itself. And so, if we go to the actual run from Apify so that we can see what's under the hood, you can see the 50 listings that it extracted are here. And
what it basically did is check which of these listings have a valid website. And
you can see there's several listings here without a website, so that might actually be a separate workflow where you pitch them to create a new website entirely from scratch. Or you can see here, but the one that we instructed our agent to do is to find these listings
that have an existing website and also an existing email because in Google Maps, some of them don't have emails, so you can see there's a lot that don't here. But for this one, for example, the
here. But for this one, for example, the email is available, and so that is what our agent was able to find. And so, all of that was already handled by our agent, which now brings us to the next step. Because with some of these
step. Because with some of these websites, like this first one, they're probably not a candidate for website improvement because their current web design is already pretty good. But if
you go to the second one here, this is a good candidate for improvement because you can see they have like awards here, but their website is probably not going to win any awards. So, what we want to do next is qualify these leads so that
we only pitch to the ones that actually would require our service. So, what I'll do now is I just go to step two. And what it will do is take a screenshot of each business's website and actually look at
that screenshot to see visually whether it's worth redesigning or not. And the
way it's doing this is through this free tool called Playwright, which is free to install for your agent, whether it's OpenClaw or CloudCode. And again, if I open this skill, it's just a text file that teaches your agent how to take a full-page screenshot of each business
website and then assess that screenshot visually to decide if the site is bad enough to be worth redesigning. And
there's two steps into this. One is
taking the screenshot itself and doing that visual assessment. And there's just more guidance here on how to use it. And
what I did here is just set some qualification criteria that, depending on your use case, you can just adjust if you're finding that it is too strict or too lax with the criteria. But it looks at signals around checks on outdated
visual designs, checking for table layouts, basic or flat typography, a cluttered layout, and so on and so forth. So, whenever your agent activates
forth. So, whenever your agent activates this skill, it instantly understands how to look for bad websites that can be worth redesigning. All right. So now,
worth redesigning. All right. So now,
when that process is done, it identified more than half of those websites are worth redesigning. And if we look at
worth redesigning. And if we look at each one, this is the one that we said was worth redesigning. This one also looks like it can use an improvement.
So, overall, I think the agent did a pretty good job to automatically identify which ones are due for a makeover, which is pretty cool. And then
just to give you an example of what it skipped, this one called Sir Beauty is already pretty well done. So, I do agree that we don't need to improve this anymore. And there you go. That's
anymore. And there you go. That's
important just so that we can qualify which websites are actually worth improving or not. Now, if you go to step three, this is actually where the magic happens, right? Because we're turning
happens, right? Because we're turning those websites into fully redesigned sites. So, it's now it's telling us that
sites. So, it's now it's telling us that it's scraping content from those five nail salon websites that it identified.
And if you look into how it's doing that, if we view this skill, what it essentially does is it takes a local business's existing website content and generates a single HTML file that looks like a $5,000 plus custom design. And
this is specifically meant for quick demo sites so that we can pitch these clients with a better looking website design. And it also outlines the
design. And it also outlines the specific steps that it will need to do, like reading the current website, checking its specific build log so that we avoid repeating a design combo so that we have a bit of variation in each one. And then we also have steps around
one. And then we also have steps around searching on Unsplash for stock photos, verifying that each photo URL is loading, and generates the complete website that we can push to the web in the final step. Now, a key for this
skill is the built-in design system that we loaded for it, which basically allows it to create those beautiful websites that you saw earlier. Now, to give credit where it's due, we actually based it upon this Daze skill, which we just used as a basis and then refined it to
fit that setup. And this Daze skill, you can just find it in the link below, and it was open sourced by this developer called Leon. And it gives a pretty good
called Leon. And it gives a pretty good base around designs like these that immediately work for websites that we are after. And through that refined
are after. And through that refined skill, our agent was now able to redesign all of those websites in one go, all using information from the current websites, verified Unsplash photos that you can use, and it did all of that automatically. So, in practice,
step three and step four are actually almost done together always because the deployment step here will give you the preview of that particular website. And
so, when I asked it to give me a preview of one, it just went ahead and deployed that to Vercel since it's free anyway.
So, if you preview this, that to me looks like an improvement versus what it was before. So, let's actually pull up
was before. So, let's actually pull up what it was last time. So, this was the before, and this one's the after. And
obviously, you can just change up the stock photos of these to update to the actual business photos once they let you. And so, now the final step is to
you. And so, now the final step is to just proceed to step four. And this
particular skill is quite simple. It
just teaches your agents to deploy all the generated sites to this tool called Vercel. And Vercel just lets you deploy
Vercel. And Vercel just lets you deploy websites completely for free. And what
that basically means is that when you push your websites to here, it will give you this URL that ends with dot versel.app, and now you have a live
versel.app, and now you have a live website that you can actually send to your prospects. And if you look at the
your prospects. And if you look at the skill here, again, it's just a text file just telling the agent that what the skill does is to deploy every site and how to do it using Vercel along with some instructions on how to use the Vercel CLI tool, the command line
interface tool, to do that automatically, which is something that your agent can handle end-to-end. And
there you go, it just finished while we were discussing. And now we have a five
were discussing. And now we have a five websites live in a span of like a few minutes. And throughout that whole
minutes. And throughout that whole thing, the incremental cost to us was only the 20 cents that we spent to scrape these listings. And so, you can imagine, once you have these skills, you can just refine them however you wish
depending on your particular use case.
Like if you want to build up the design skill in order to accommodate more industries and more niches, that's entirely up to you. And if you want to use this Apify scraper tool to scrape Google Maps listings for other workflows
and for other purposes, that is also an option. And what you can even do is to
option. And what you can even do is to extend this workflow to introduce, let's say, a step five where you just let your agent aggregate all of these new websites that it created, link it to an outreach tool like Instantly, and automate even the outreach step for you.
And if you're using Open Claw, you can also just schedule that to run, let's say, every day or every week for your particular region. And by the way, this
particular region. And by the way, this isn't just about websites. I think the pattern that you should notice is that if you find a problem, you can actually see if there's a way to now fix it automatically and then pitch the solution to potential clients. You can
do this, for example, with SEO audits, social media presence, Google Business profile. This is just one example for
profile. This is just one example for websites, but the framework is pretty much the same. And so, I hope this gives you an idea of how agent architectures like these are evolving and also how to illustrate agents clearly and visually,
whether it's for your own business or for clients. Now, let me know in the
for clients. Now, let me know in the comments if this format and this visual layer is also helping you follow and understand how to work with these agents better. And also, if you want to
better. And also, if you want to understand all the agent architecture concepts that you need to know, especially when it applies to Open Claw, which is the most popular one at the moment, then you can watch this video next. But that's it for this one. I'll
next. But that's it for this one. I'll
see you guys next time. Thank you.
[music]
Loading video analysis...