GitBot,
brought to life.

The starting point

I started with a working backend.

GitBot lets you build reusable bots on Claude Code, Codex or OpenCode. Anil and Madhan built the backend. I designed and built the frontend, brand and animated mascots, starting from a basic UI Anil had put together with Claude.

You give a bot a standing job and use it across your repos. You start a thread in a chosen folder and come back to the conversation later.

This is my account of the design and frontend work. See the GitBot source and documentation or the Product Hunt launch for the product itself.

I owned the frontend: design strategy, UI/UX and implementation, as well as the brand, logo and mascots. I wanted someone opening GitBot to understand what they could do, and still feel in control once the agent started working.

The workspace

A bot keeps its job across threads.

A bot keeps the standing instructions. A thread is one conversation, in one folder. I put the bots, threads and active conversation beside each other so you could move between them without losing your place.

Creating a bot meant working through its instructions, agent and permissions, then choosing a folder for its first task. I designed onboarding and the routes for creating one manually, starting with an agent or importing a shared bot. Each route needed to explain what you were about to do.

I also worked on the parts you reach for every day: search, empty states and panels you can collapse when you need more room. The controls needed to stay close to the work.

Brand and motion

Giving each bot a face.

I built the identity around a cat logo and six colours. The mascots have distinct silhouettes, so you can recognise a bot as you move around the workspace.

Then I made them move. They blink and look around, with different behaviours for the agent’s activity. When the agent is reading, the mascot opens a book. The status text stays beside it so you can read what’s happening too.

That identity had to work in the light and dark themes too. I carried it into the documentation and campaign artwork so it still felt like the same product outside the workspace.

Building the frontend

Keeping up with a running agent.

I built the frontend in React and Next.js and connected it to Anil and Madhan’s backend. Once a message was sent, the interface still had work to do: show loading and tool activity, ask for permission when needed, hold a follow-up and let you stop the run.

I made activity visible in the conversation and the bot rail, kept the queued follow-up within reach and refined the send and stop controls. While the agent is working, you should be able to see what it’s doing and decide what to do next.

I also designed the import and share dialogs, Marketplace browsing and the publishing review. People needed to understand a bot before adding it, and review a public listing before submitting it.

Launch and feedback

The work followed GitBot out of the app.

I worked on the README and landing page, the Product Hunt gallery and the buildathon graphics. The explanations needed to match what people would find when they opened GitBot.

For the GitBot Product Hunt launch, I worked on positioning, gallery images and responses. The first GitBot buildathon gave me a look at people making bots for their own jobs.

One user asked how to keep decisions between conversations. I built “Save to instructions”: select a reply, edit what should stay and confirm it. That work was on a separate branch when I wrote this.

Looking back

I got to build the design myself.

GitBot let me work on the design and the frontend together. I could refine the copy or the way a button behaved in the product itself. The mascots needed that same attention, right down to their expressions.

Anil and Madhan made the backend work. My part was how people would use it. Seeing the design decisions in the working interface was the most satisfying part for me.

I built Maker, my design-to-code macOS app, too.