Building Ben’s Bites: My Journey

Hello again! 🙂

Currently, I’m back in my hometown, Cardiff, for the long weekend, spending quality time with family. To add to the experience, I’m trying my hand at padel for the first time. This might sound sacrilegious for a regular tennis player like me, especially since I often mock padel. Wish me luck; I hope I don’t end up enjoying it too much!

Now, let’s talk about my personal website, which I’ve decided to rebuild. My plan is to first design the layout and then connect everything afterwards.

I initially envisioned the site to resemble an agent application, where each ‘thread’ could hold different types of information: details about me, my investments, products I enjoy, and more. I provided Codex an image of the BB app and requested it to create a prototype.

Initially, the prototype featured threads on the left, a straightforward chat interface in the center, suggested prompts, and an additional sidebar on the right. Although the design provided a basic structure, it included many quirks that I was eager to adjust.

According to my AGENTS.md, I specify that three design versions should always be created for me to review. These were primarily ‘themes’ in this instance, prompting me to refine my instructions further. Subsequently, I captured a screenshot of the most favorable option, added annotations using tldraw, and returned it to Codex for adjustments.

I attached this annotated screenshot back to Codex, giving a clear instruction to implement the suggested changes. This cycle of reviewing designs, providing feedback, and adjusting continued several more times.

I’ve noticed that Claude’s models excel in inferring intentions from design tasks, while GPT models tend to be more rigid and require specific feedback for modifications.

Next, I decided to explore a design-review skill created by Emil Kowalski, whose work I admire. Generally, I prefer not to have agents invoke skills unless explicitly requested, so I disabled that for all my agents.

Simply state something like:

Following this, I conducted another round of adjustments focused on animations and asked the agent to address the feedback received. I compiled a to-do file, grouping ideas by complexity. Some were minor fixes, while others proposed significant changes: adding a genuine AI model, enabling visitor messaging, demonstrating real-time thinking, and producing artifacts or canvas previews within the site.

I then enlisted Codex to use a different agent called Droid for part of the work with Grok, as I was not getting the desired output from the GPT models on the interface. Once completed, I instructed it to save (commit) and redeploy everything.

By around 10 PM, I had a lengthy list of possibilities for the site. Ideas ranged from allowing users to install skills to incorporating genuine agent chats. I even began creating an animated version of my dog, Nero, that could be moved around the site, which I recognized as a sign of scope creep.

After some reflection, I decided to simplify the entire concept. Initially, I found it too complicated for what I envisioned as a personal site. Also, the more I leaned towards an agent-like interface, the more I felt the urge to transform it into a genuine agent, which could lead to an endless cycle of adding features.

The concept remains intriguing, and I plan to save it for a future project while focusing on clarity for this site. My usual creative process often involves discerning my preferences through visual prototypes, which is why my design requests typically entail producing three variants. This method helps guide me in identifying the right direction—whether the path should be continued or completely altered.

Before pursuing the agent-interface idea, I had considered creating a more canvas-like feel for the site.

Recognizing that I frequently utilize tldraw to explain my sessions, I thought it would be exciting to create a more ‘canvas-y’ web experience.

My first mock-up showcased handwritten notes and small previews. By hovering over specific text, an arrow or annotation would appear.

I was inspired by a personal site (shoutout to Daniel White) that used a file-tree structure as a timeline to showcase both current and past projects as nested items. This seemed like a great idea to adopt.

The first three generated designs for my new direction were somewhat underwhelming. After that, I focused on screenshots and annotations to refine small design details and overall usability, such as whether sections should auto-expand, collapse, or have smoother transitions.

I transferred all page content into Markdown and subsequently removed the old agent-interface files and the unused animation frames for Nero (sorry, Nero!).

Upon deploying the simplified version with here.now, I aimed for it to be hosted on bentossell.com instead of a temporary address. As my domain is managed via Vercel, I directed the agent to use Chrome for integrating the domain into here.now and updating the DNS records in Vercel.

The