The Concept

I've been thinking about updating my website, and what better time than while watching a movie on a Saturday night! I was happy with the first version that I built with Antigravity in Ghost, but it just felt a little too heavy and dark and I wanted to build something that felt more lightweight and inviting.

Greece is one of my favorite places on earth, so I decided on a color scheme inspired by Santorini. I'd seen a really cute illustration from Guillaume Kurkdjian, and used that as color inspiration. Also found a Ghost template that was straightforward and simple, so I used that as my starting point for a layout. Here's the color scheme that Stitch created.

I asked Stitch to make a template with straightforward single posts with images in the posts. This was all for the home page, using that image as color reference inspiration.

The Iteration

The initial output was pretty bland, keep in mind the text is all just generative placeholder.

So I created an image in Nano Banana to try and spark some inspiration. I couldn't quite get Google Stitch to get me where I wanted to go, despite re prompting a few times and being pretty specific about how the format should look. This Nano Banana image helped, wasn't a silver bullet, but gave more visual direction.

Eventually, through a few iterations, I landed on something that was starting to resemble what I was thinking. To no surprise, the iterations were also helping inform me of a direction. After a few a few different versions in Stitch I had a variation that was starting to get there.

There were a few parts about the posts being offset and the side bar that I didn't dig. Within a few corrective prompts though I had a great launching point for the homepage.

Based on the homepage, Stitch whipped up an example of the post page which was fine enough to get going from.

Moving to Claude

With references in hand, I made some pretty simple instructions in a markdown file, put references to the home and post pages in a folder, and fired up Claude. Given that I had created a Ghost template before and already had a directory and structure on my hard drive, it was easy to point Claude to my instructions and off we went.

Between my instructions and Claude having access to Ghost documentation, there was already a sense for the language and structure of Ghost files, and then it was a vibe coding journey. Pretty quickly I was able to stand up something that looked solid, with a lot of back and forth along the way.

While trying to figure out a workable layout, I found a couple websites whose structure and featured posts looked sharp. I was able to feed those reference images into Claude and say, "Hey, I'd like my featured posts to appear at the top under a header, along with a sign up form, and the latest underneath that with a timeline along the side."

Version 1

So far I'm pretty happy with where I'm at for this in progress version. It's definitely a lot cleaner and more straightforward than my first template, a good starting point. Obviously there's a lot of things that I want to keep iterating on, but I was able to get a lot accomplished within a few hours, which was honestly a pleasant surprise.

Check it out and let me know what you think! I'm going to keep evolving it and posting about it here.