I Spent $100 Planning a Website Before Writing the Code 💸

So, I started a non-profit startup called GiveWithTrust.

It's a platform that connects NGOs to donors through in-kind donations, making the process more transparent and trustworthy. You can check it out here: givewithtrust.org.

But before we could get people to use it, we needed a website.

Not just something that technically worked, but something that represented our idea, raised awareness, and gave people a reason to care. We also wanted to display our donor and NGO survey results and, initially, have a countdown timer to build some hype around the launch.

As usual, I used AI to help build it, but not only Claude this time👀

And somehow, I ended up spending more time planning than coding. Which, in hindsight, was probably one of my better decisions.

1. The $100 Planning Session 💸

I spent an entire day planning the website before getting into implementation.

And yes, I used an entire $100 worth of Claude Code session usage just for planning. Definitely not a regret.

I used several plugins and external skills to help with the process, working through the structure, features, design direction, and implementation plan before writing the actual code.

I wanted Claude to understand what GiveWithTrust was, what the website needed to communicate, and how the different sections should fit together.

This mattered because I wasn't building a generic portfolio website. A first-time visitor needed to understand the idea quickly, trust what we were trying to do, and know where to go next.

Having a detailed plan also gave me something to refer back to whenever the implementation started drifting away from what I had in mind.

2. It Worked. But Where Was the WOW? 🎨

The initial website was functional. The sections were there, the features worked, and everything was coming together.

But it lacked personality.

The UI was boring, the graphics weren't particularly appealing, and the colours didn't have the impact I wanted. It looked like a website that existed because it needed to exist.

That wasn't good enough.

GiveWithTrust depends heavily on trust. If someone visits for the first time and the website looks unappealing, why would they feel encouraged to donate through it?

I tried improving the design by installing several UI/UX design plugins and skills and giving Claude Code more detailed prompts. That helped, but I still wasn't getting the result I had pictured in my head.

Then I tried something different.

I asked ChatGPT to generate the actual graphics I wanted on the website.

Once I had a design I liked, I asked ChatGPT to write a detailed prompt explaining how Claude Code should recreate it. I placed the generated design in the project directory Claude was working in and instructed it to use the image as a reference.

This worked beautifully!

Claude could now see what I was aiming for instead of trying to interpret my descriptions alone. Using the design skills I had installed, it recreated the graphic with SVGs, colours, and the styling needed to fit the website.

And finally, we had something that looked the way I wanted.

3. One Section at a Time

Once that approach worked, I started using it across the website.

I would work on one section, generate or refine a design reference where necessary, give Claude the reference and instructions, and let it implement the changes. Then I would review the result before moving on to the next section.

The best part was how well the new designs fitted into the existing website. Claude managed to align the graphics with the rest of the page, maintaining the colour palette and overall theme rather than making each section look like it belonged to a completely different website.

The graphics built on top of one another, and the website gradually started feeling like one cohesive product.

This was probably my favourite part of the process. I didn't have to be a professional designer to communicate what I wanted, but I did have to recognise when the output wasn't good enough and figure out how to guide the tools towards a better result.

There were still a few iterations, of course. AI doesn't magically know what is in your head. Sometimes the result was close, sometimes it wasn't, and occasionally I had to rethink how I was explaining things.

But the process was much smoother once I started giving Claude concrete visual references.

4. Before Deploying, Let's Not Break Everything 🔍

As any master developer like me would do, I couldn't just finish the UI and immediately deploy it.

Obviously, I had to make sure there were no security threats, broken links, unresolved bugs, or unexpected failures waiting to embarrass me in production.

The only slight problem was that I wasn't exactly skilled enough to understand every security liability hiding in a web application.

So, I used my tools.

I brought in additional plugins and tools like Claude security and security-guidance to help inspect the website, check for issues, and review areas I might have overlooked. I also wanted to test the website beyond the happy path, because things tend to work beautifully when you only test the exact scenario you expected.

The important lesson here was that getting a website to run is only part of the job. Before putting it in front of actual users, you need to make a reasonable effort to check that it behaves properly and doesn't expose obvious problems.

AI-assisted development makes it easy to produce a lot of code quickly. Reviewing that code and testing the result still matter.

5. What I Actually Learned

The biggest thing I took away from this experience was how much being an effective developer depends on understanding the tools and resources available to you.

Knowing how to code is important, obviously. But with AI-assisted development, knowing how to plan a project, provide context, choose the right tools, and guide their output can make an enormous difference.

I spent a day planning, used design references to overcome a weakness in Claude's initial output, and brought in additional tools to help review the finished website. Having that system in place helped me get a working, visually appealing landing page built in under a day.

Without knowing how to use and guide these tools, the process would have been a lot more challenging.

And this isn't about blindly trusting AI to do everything for you. You can't treat it like magic, and you can't get irritated every time it fails to produce exactly what you imagined. You have to give it the right context, files, references, and instructions, then judge what comes back.

That ability to guide the tools is a skill in itself. For me, it has developed through experience, experimentation, and a bit of mentorship along the way.

I am still learning, obviously. But I can already see how much more effective my workflow has become.

And now, instead of just having an idea for GiveWithTrust, I have a website that people can actually visit.

You can check it out here: GiveWithTrust.

We are working towards getting NGOs onboarded and preparing for the pilot, so there's plenty left to do beyond the website.

For now, I'm happy that the landing page is live. Next up is making sure the platform behind it delivers on the promise.