Vibe Coding Workflow

Who said vibe coding is just click and done? (1)

When I first started vibe coding with Claude Code, it felt like a whole new world.

But the more screens I built, the more I ran into issues: vibe coding wouldn't follow component rules, design tokens, or the design system. Fixes kept piling up.

Make this button a little bigger. Move this layer above that layer.

I'd capture a screenshot and send it to the AI. It wouldn't build what I wanted.

I'd circle the part on the screenshot and send it. It would fix the wrong thing, or interpret it completely differently. This happened all the time.

I found benji's agentation

Then I discovered benji's agentation.

You click on UI elements directly, leave feedback, and it outputs markdown that you can paste straight to your AI agent.

"This is it!" I thought. I started using it right away.

But it didn't fit my workflow

I used it a lot, but two things didn't work for me.

First, it only runs on React projects. I also work on HTML/CSS/JS-based projects beyond React. So for non-React projects, I simply couldn't use Benji's tool at all.

Second, the output format didn't match my workflow. When I hand tasks to Claude Code, I use a format called DEV-REQUEST. Agentation's output was different, and I had to manually convert it every time.

It was a good tool. Just not for my situation.

So I decided to build my own

Claude Code wrote the code, but I did the planning and QA. There were three things I focused on while building it.

1. Wider coverage than React

I built it as a JavaScript-based project so it could cover a much wider range than just React.

2. Matching my workflow

Connecting with the workflow I set up in Claude Code and Cowork was the top priority. Using an API would mean extra costs, so I made it output markdown instead. And in case I forgot what feedback I'd given, I added a markdown import feature too.

3. Making my life easier

I implemented various keyboard shortcuts to get things done faster. Press Alt+Q to enter QA mode. Click any element on the page to leave feedback. You can also drag to select text, or draw a box to select an area.

Inspired by benji's agentation. Thank you for building a great tool.