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

Part 1: How we started

Inside the team, we were already experimenting with Figma Make and hitting a wall on token limits. Meanwhile, other design leaders and designers were telling us they were coding with Claude Code instead of Figma, and it started to feel like vibe coding was the future. The tool you picked six months ago because it looked like the obvious next step can quickly become the one everyone else has moved past.

I envisioned my team vibe coding the front end and taking control of quality and experience.

What I didn’t have was a plan.

The business case raised more questions than answers

Writing the business case was harder than expected, mostly because of the questions it surfaced. D&D has lots of products, all of them inconsistent and none of them using our design system. Coding the front end for every one was never going to happen, so we needed direction from the CPO on product strategy. It sounds like a scoping detail until you’re the one blocked by it. You can’t propose “the team will code the front end” without someone answering which front end, and in what order.

We also needed more support from engineering. Once I spoke to the platform engineering team, they helped us set up a repo and a pipeline to publish. After that, we were left to our own devices.

Switching it on was the easy part

Getting the infrastructure live turned out to be the simple bit. We asked Claude for instructions, but still struggled to work out how to do it. In the end, we asked an engineer to teach us the basics of the terminal and GitHub. That’s not a criticism of the tooling. It’s simply what happens when a design team steps into a codebase for the first time without an engineer sat next to them.

Groundwork before pixels

Our design system wasn’t tokenised or coded, so we spent a lot of time auditing it, creating design patterns and building skills for it. We’re also a remote team, which meant each of us hit different issues and errors while getting up to speed, and every one needed troubleshooting. It’s easy to underestimate how much of “learning a new way of working” is five people hitting five different errors on five different machines, one at a time.

Then we moved our North Star design from Figma Make into the new repo and set up the team around it. Next up is using Claude Code to audit that North Star against the design system, making sure it uses the right colours and tokens.

The Bottom Line: A push from the top and a hunch from the team will get you started, but they won’t get you a plan. Find out which product comes first before you promise anything.

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