Over the past few weeks, I’ve been heads down on three different AI-driven website initiatives. Each started from a very different place, used different tools and approaches, and produced different results.
What surprised me wasn’t AI itself. It was was how dramatically the starting point influenced the outcome.
Another lesson became apparent very quickly: AI works best when paired with engineering best practices. The tools were powerful, but understanding architecture, code organization, version control and deployment still mattered.
Let’s start with the first project.
The first project started with a brand new website for a small passion project of mine. I began by using a template that had already been AI- generated by a consumer grade content management system.
I quickly got frustrated with the poor CMS editing tools and the promise of “free trial”, which gave me no real ability to do much with the template and the pages that were created. There was no preview mode. It was purely a bait and switch scenario. But I liked the template itself.
So, I abandoned the CMS and went in another direction using the AI generated template as a foundation.
I quickly realized that I didn’t need a CMS for this project. I was the only one who would be editing pages, adding content and integrating forms using Hubspot as my chosen CRM. I had enough front end web development skills and AI knowledge to maintain this site without a CMS.
Also, this was a brand new site. There was no legacy code from a pre-existing website, no legacy UI and no data or content migration required. This was 100% “greenfield”.
As an experiment, I started building on top of a screen grab of just the home page from the AI generated template created by the CMS. I fed the screen grab to both Claude and ChatGPT.
Having spent decades designing and developing software, I knew the project still needed a solid architectural foundation, regardless of how much AI was involved.
Using an identical prompt, I told both Claude and ChatGPT that I wanted my CSS, javascript and images to be treated as global site assets and placed in their own separate folders. I made sure there were separate directories to deal with shared “partials” such as the header and footer. This way, all the pages that I would eventually create could share this global architecture.
The other thing I did was manage all my assets using GitHub, where I managed version control and could deploy to whatever hosting environment of my choosing.
Claude performed exceptionally well and reproduced the header, footer and home page with 100% accuracy.
ChatGPT missed some things, and the layout looked wonky to me.
Rather than prompting my way to get ChatGPT to catch up, I decided that Claude was the obvious choice.
Using Claude, I took an iterative approach to modifying the header, footer and home page before adding more pages. Best practices have always dictated that if you get the global stuff right, and you get the home page right then the rest would follow.
Equally as important was not trying to get every aspect of the home page right with one prompt. The more I worked with Claude, the more I realized that AI responded best when problems were broken into smaller pieces. One section. One change. One iteration at a time.
The first thing I asked Claude to change was the header height and font to something that was more appealing to me. Boom, that was easy.
Next, I had Claude modify the hero section of the home page with a similar layout to another site. Claude nailed it in one prompt.
Then, I asked Claude to reduce the padding of one of the sections of the home page. It took two prompts before I was satisfied with the results.
FInally, I asked Claude to delete a section of the template that I didn't find useful. One prompt did the trick.
The home page now looked like a page that I wanted rather than looking exactly like the CMS generated template. More importantly, it didn’t have all the CMS specific junk in the markup.
Once I had the global stuff worked out and was satisfied with the home page, adding more functionality, content and building out the sub-pages was pretty straightforward.
The process felt fast and natural. AI wasn’t spending time trying to understand previous decisions. It was simply extending a clean foundation.
Finally, because the site was mostly static HTML with a simple HubSpot integration, deployment was straightforward. I chose Netlify for hosting based on Claude's recommendations, because it integrated directly with GitHub and kept hosting costs low.
More importantly, the site remained portable and could easily be moved elsewhere if needed.
The success of this project had less to do with Claude and more to do with the fact that I was starting with a clean foundation. There was no technical debt. No migration requirements. No legacy integrations. No existing user experience that had to be preserved. AI proved to be a major accelerator for this type of project.
Furthermore, understanding best practices in terms of design, architecture, engineering, testing and deployment were still necessary to achieve the desired results. Additionally, ease of maintenance, scalability and portability were important requirements that came directly from me.
As I would soon discover in the next project, rebuilding an existing CMS website using AI was an entirely different experience. Stay tuned for Building a Website with AI: Part 2