Building with AI: introduction & making a personal website

What I’m doing this year

I’m going to take you on my journey this year - of learning how to build products with new AI tools like Copilot, Replit, Cursor, Lovable.

As my 6-month sabbatical starts, I want to achieve two things: experience what it’s like to build a startup, and see if I can do that by myself using these new tools.

I have a strong hypothesis that it is now possible for semi-technical people with the right product and business sense to quickly build bootstrapped companies as solo-entrepreneurs.

Most product ideas fail not because they technically don’t work, but because they solve problems that aren’t worth solving. Oftentimes, customers don’t really have this particular problem. Or if they do, they aren’t willing to pay for a potential solution. Or if they are, the offered solution doesn’t actually solve the problem.

Before these new AI tools like Copilot came on the market, what was the right team for starting a company? There were typically three options:

1. Only technical founders - they often struggle with finding the right problems and customers to build for, resulting in great technical solutions that no one wants to pay for

2. Only non-technical founders - they see the core business problems in their industries and have a network of people to talk and sell to. But they don’t have the required technical know-how to then solve those problems.

3. A combination of a domain-expert and technical founder - this is the ideal founding team, but the challenge is for them to find each other

So, what changed with the introduction of AI tools? Having deliberately taken time to explore a variety of them, my feeling is that they will empower semi-technical people (those who understand code but can’t write it themselves) to build fully-working prototypes and minimal viable products (MVPs) within days, where previously it would have taken them months. They can then test these prototypes and MVPs with users, sell them, and scale to a dozen customers. In other words, they can bring both the domain-expertise and ability to build products, in a single person.

The product may not scale as-is beyond a handful of customers, and a more experienced technical co-founder or employee would need to refactor the solution. But by then the hardest part is done: finding a problem worth solving, that customers will pay for.

I believe that tech product managers are the perfect semi-technical people to take on this challenge of filling the shoes of both the technical founder and the domain-expert by themselves. They understand users, they understand business, they know what good software products look like, and they have often done a bit of programming themselves. They previously just couldn’t develop everything from scratch without extensive programming experience - but now they can.

I’m going to test this theory myself. Sample size n=1.

As I start creating products this year, mostly with AI, I will share my experiences and learnings. To get started, I want to learn how to use different AI development tools, and see what their strengths and limitations are - starting with a few smaller pet projects.

The first of which is documented in this article: building my personal (coaching) website. After that I will start exploring more serious business ideas. I plan to share insights of the bootstrapping process: the customer and sales calls, and the development of the product.

Let’s dive in and build a personal website!

Building a personal website

One of the things I enjoy most about my work as a product manager is coaching and mentoring others - brainstorming together about challenges, and figuring out a way to solve them. This is why, with more time on my hands this year, I want to create a personal website via which I offer my expertise in product management as coaching and consulting services.

I’m splitting the building process into three steps:

1. Design a logo

2. Design the website & explore development options

3. Develop the website & launch

Step 1: designing a logo

There are many high-quality and low-cost options to get a professional to design a logo, but because the goal here is to learn and see what the AI tools can (and cannot) do, I will do it myself - with the help of AI of course.

After scouring blogs and LinkedIn posts, I found three tools that could be good for this: Playground AI, Gamma AI, and Uizard.io. They focus on slightly different use cases: Playground on creating logos and social media assets; Gamma on slide decks and websites; Uizard.io on design prototypes and wireframes.

Each offers an interface where you enter a description of what you want to generate, yielding a first result, and then the ability to refine this.

To cut a long story short: none of them work particularly well for logos. Sometimes they generate something decent to start with. But when you then try to refine this with further instructions, it often significantly changes the image in unintended ways. It was more frustrating than productive.

Gamma AI (shown below) was probably the best out of the three, as it seems best at generating nice patterns and text. In contrast, Playground AI often created text artefacts, like an m with four stems.

My assessment: you can get some nice pattern and formatting inspiration from these tools, but the AI part of it doesn’t add any value. For making a logo that I would feel comfortable using in a product, I would rather design it myself (e.g. using Figma) or get a pro to do it.

In the end, I used Figma to create a small logo, as you will see at the very end.

Step 2: designing a personal website

Now that we have a small logo, instead of immediately developing a website, I want to 1) explore some design options for what the website could look like, and 2) try different AI tools to see how close they can get to a live website.

From the blogs and LinkedIn posts, the two main contenders were Uizard.io and Gamma AI. For both I can describe what I’m looking for (see below for Gamma AI), as well as some styling options. This works significantly better than the logo generation, as both tools generated a pretty reasonable website within minutes. I could then tweak it with different stylings, and can insert my own text and images.

In my experience, Uizard.io generates calmer designs (plus it gives wireframes - simple designs to test the layout of a page), but the Gamma AI designs look more modern - see below. Gamma AI even lets you publish your website (either hosted by them on a https://gamma.app/docs/{code} link, or on a custom domain if you pay for their premium version), which means you can have a website up and running within minutes. Uizard.io doesn’t provide this functionality.

Gamma AI (top) versus Uizard.io (bottom)

My assessment: significantly better than for the logos. For the initial phase of exploring options and testing, these tools are great: they allowed me to quickly explore what I want the website to look like. Furthermore, if I ever needed to get a website live in 30 minutes, I would use Gamma AI. The main downsides: you have limited control, and you will be dependent on these tools should you decide to publish your website - you have to pay for a Premium version to host it.

I decided to develop and code the website myself - to save costs, and also to try out some AI development tools.

Step 3: developing a personal website

Now that I know roughly what I want the website to look like, how do I actually set it up? Do I go through a paid platform? Self host? Do I need to buy a domain? I’m not sure.

I know there’s a bunch of website builders that take all the complexity out of it, but they cost over a hundred euros per year (e.g. Jimdo and Squarespace start at 11 euros a month). Since I want to learn and get my hands dirty, I might as well try to do it myself at a lower cost. But where to start?

Fortunately, AI can come to the rescue. I tried ChatGPT, Perplexity, and Le Chat (shown below), and asked them:

“How can I set up a website under a custom domain, with as little cost as possible. I’m fairly technical.”

All three gave similar answers. ChatGPT was slowest, LeChat was fastest, but Perplexity had the best answer formatting - plus it cites its sources. Since then, I’ve mostly been asking Perplexity how to do things.

I then simply followed the instructions:

1. Domain: You can find available domains at Cloudflare Registrar, which sell them at cost price. I registered the domain www.thomasbrouwer.com for $10.44 per year, and it took literally 2 minutes. Some domains like .de are not available here, but they are at GoDaddy.

2. Email: I set up email forwarding of @thomasbrouwer.com to my personal email. Perplexity told me to use https://improvmx.com, but then I discovered Cloudflare also offers this. I couldn’t find where - Cloudflare has a LOT of navigation options - so I asked Perplexity where to find it. Once there it was done in minutes. Now I can use email addresses like coaching@thomasbrouwer.com, consulting@thomasbrouwer.com, and speaking@thomasbrouwer.com.

3. Hosting: The website also needs to be hosted somewhere. Options included Cloudflare Pages, Netlify, Vercel. In the end I went with Github pages so that any code changes automatically update the website, but any of them seem easy to set up.

4. Program: I’ll dive more into this below, but I tried three different AI tools to program the website: v0, Cursor, and Replit. In the end I went with Cursor.

5. Deploy: Redirect the domain (thomasbrouwer.com) to where the site is hosted (the IP address). Skipping ahead: once the code was in Github, I asked Perplexity how to best get the website live. It gave me simple instructions that I could follow, and it worked!

6. Set up SSL: after 15 minutes I could enable this via Github, and it was done.

Now for the exciting part, and to test my hypothesis: can someone semi-technical like myself develop a website from scratch using AI tools? (This is still a fairly simple application; in future articles we will see how I fare on more complex applications with databases and accounts).

I tried v0, Cursor, and Replit. There are many more, but these came up most in the blogs and LinkedIn posts I read. As before you can describe what you want the tool to generate, you can specify the tech stack to use (I didn’t), and what design choices to make - some tools also allow you to share designs you made in Figma to replicate.

(Note: under the hood, these tools use Large Language Models (LLMs) like Claude Sonnet or GPT 4o to generate the code. The user can choose which one to use - word on the street is that right now Claude Sonnet 3.7 is best at planning and generating code.)

For all three tools I used the same prompt:

“I want to build a personal website. My name is Thomas Brouwer, I'm a product manager, and my website should have different pages for the following: a landing page introducing myself and my experience and redirecting to the different pages; a page about the individual coaching I offer; a page about product management consulting; a page about my writing (on product management, work-life balance, and building a startup product); a page about public speaking (for conferences to find me), and a contact page. At the top of the website there should be a navigation bar, with room for my name and logo, as well as a call to action to book a call. For the styleguide, I want it to be clean, mostly black and white and some lightblue.”

And this is where the real magic begins. The moment you press “Enter”, the tool starts to think, and then it starts generating file after file of code. Within two minutes, an entire folder structure is created of (in this case) html, css, and javascript files.

v0 and Replit are accessed through their website, and they immediately show you what the output looks like. They can also host it for you (as long as you have a Premium account).

In contrast, Cursor is an Integrated Development Environment (IDE), where you download an application and then program in it, rather than doing it online. This ultimately gives you more control and the ability to test things locally, which is why I went for Cursor. Below you can see what it looks like: code on the left, a preview in the middle, and the Cursor AI for further instructions on the right.

Now some more magic. Want to tweak anything about the website? Simply write a prompt like “I don’t like the colour scheme, make it red” or “Move this image to the left and make it bigger”, and boom: within seconds it’s adjusted.

Honestly, I was getting worried after the logo and website AI tools - they were fairly underwhelming. But this is where my optimism came back. AI development tools are amazing at setting up new applications, tweaking designs, and adding new features.

Want to add a timeline showing your experience, with the items appearing one by one as you scroll down? “Create a timeline of my work experience with company logos, and with each item appearing as you scroll down” - and done. Want to make a mobile-friendly version? “Please make this site work well on mobile devices” - and done.

It’s not all sunshine and roses. Oftentimes when tweaking one element, it accidentally changes another, and you have to figure out why (or, tell Cursor to figure out why by describing it). I also saw the beginnings of scalability issues with all the code it’s writing: Cursor had the tendency to add new css stylings and code snippets for each new element, rather than reusing what it had before or structuring the code into modular files. Once prompted, it would do so, but often accidentally change the existing layout in the process.

This is where my hypothesis that semi-technical people will be those most empowered by AI tools is put to the test. Compared to someone who’s not technical at all, they know just enough to be able to gauge what technologies are best and how code is roughly structured. They wouldn’t be able to write it from scratch, but they understand it when they see it.

In the end it took about three full days to develop all the code and content to get the website live, but this included a learning curve. You can see the results below - and check them out at thomasbrouwer.com! Feedback is very welcome.

The website is now live!

Coda

As I started working on the logos, I got discouraged. They were a bit rubbish, and trying to prompt changes often did not achieve what I described.

While generating the website designs I became more optimistic again. It's very efficient at getting something live and testable, plus it provides inspiration. If you feel like the first step to starting a project is the hardest, consider this problem solved.

But the real magic began when I started programming with AI. Based on a prompt written in under 60 seconds, I got a whole starting codebase for a working website. Of course it needed a lot of further work, but you can tweak anything you want with a description of what you want to change, and it works surprisingly well.

Similarly, when you are debugging or don’t know what steps are required to deploy a website: use Perplexity, Claude, ChatGPT, Le Chat - they are all excellent at giving you instructions, and quickly unblocking you. Previously you would have had to ask a friend (and wait for a reply), or go through Google search (and check dozens of pages for the right information). Now it happens in seconds.

My assessment: If you’re a little bit technical, but not enough to properly build products from scratch, now is your time. I think you can be an effective solo-entrepreneur or bootstrap a business: figure out the customer problem, design a prototype, build a rough version, validate it, sell it. This product won’t scale to dozens of customers - the code is messy and hard to maintain - but once you have initial traction and revenue, you can rebuild it in a more scalable way.

I’m leaving this experiment feeling very excited. After this, I will try building some pet projects - small websites or products, not intended for making money, just to get into a habit of building things quickly.

---

Shameless plug that I have been building up to: looking for a product coach or consultant? Reach out to me via my personal website or LinkedIn ;)

---