Part 2: Feeling the Vibe (Coding), What the Work Actually Looks Like Day to Day

We knew we were going with Claude because of Claude Design, and because it was quickly becoming the industry standard. So the first real question wasn’t “how do we vibe code?” It was “what happens to Figma now?”

So, what happens to Figma?

We spent time working out whether Figma and Figma Make still had a place in our process. On Figma Make, the answer was simple: whatever you can do in it, you can probably do in Claude Design. Attach Claude Design to your design system and quick prototypes and quick ideas become easy, so we don’t actually need Figma Make.

Figma itself can stay, just in a smaller role. We’ll probably use it for wireframes, if that, and as an archive for older projects and anything we won’t move into vibe coding. Honestly, Figma didn’t get replaced. It got demoted to a filing cabinet.

Git branches and pushing to live

The biggest learning curve has been git branches and pushing to live. When we used Figma Make, we had one prototype, and when two designers needed to edit it, things got messy. That problem followed us into vibe coding, but branching makes it far easier to manage.

What we had to get used to was branches and pull requests, and with them, some governance. We don’t all merge at the same time. If someone is working in one part of the prototype, they say so, so the whole team knows not to work or merge in that area. We’re still getting used to it.

Two designers editing the same file used to mean an awkward Slack message. Now it means a merge conflict, which is a different kind of awkward.

Running things locally

Setting up the dev environment and running a localhost was another hurdle. Before, we’d open Figma and get on with it. Asking Claude and Claude Code to walk us through it made the learning curve far gentler, and the more we repeated the process, the easier it got.

The terminal was the first thing that hit us. It felt intimidating, not because it’s actually scary, but because it’s so different to what we’re used to. The Claude interface is friendlier, but the catch is that you don’t necessarily understand what Claude is doing in the background.

Nessa’s Pro-Tip: Use something like VS Code alongside Claude so you can see what’s actually happening under the hood.

I recorded my thoughts on this case study out loud, then used Claude to transcribe them and draft them into writing. I reviewed and edited the result, so the ideas, experiences and opinions are all mine.

Venessa Bennett

Thanks for reading. I’m a Design Leader and speaker based in London. I help to craft digital experiences and solve problems for businesses and their users.

Previous
Previous

Part 3: Feeling the Vibe (Coding), What We Can Claim Right Now

Next
Next

Part 1: Feeling the Vibe (Coding), What We Learned Setting Up a Design Team to Code