Shaping the Product Roadmap by prototyping a Brand Kit in
2 days with Claude Code
A self-serve tool that lets admins define their whole brand — colors, logos, fonts, templates, tone — so their bankers can generate on-brand decks instantly. Prototyped, designed, and built with Claude & Figma alongside a PM, engineering, and the Head of Product.
April — June 2026
/ my role
I turned an open prompt from our Head of Product into a working Brand Kit MVP in two days, building it directly in Claude, which led to the feature being added to the product team's roadmap.
I owned the V1 scope, deciding which brand assets would ship first. I moved the work through prototyping, Figma design, and development myself — using Claude Code with a Figma MCP connection to build and push UI to staging while collaborating closely with the PM and Head of Product on design direction and with engineering on implementation.
/ the problem
Investment bankers lose hours reformatting slide decks to match a company's brand
Our Head of Product had a hunch there was a tool here: what if an admin could define a brand once, and every deck came out on-brand automatically? He handed it to me as an open question: see how far you can take this in one to three days.
/ chapter 1
Building MVP in 2 days using Claude
/ the turning point
In two days I built a working MVP using Claude, and it became a roadmap project.
Instead of mocking screens, I built a working clickable MVP directly in Claude that team could react to.
When the Head of Product saw how much was already functioning after two days, the conversation changed: Brand Kit went from a side experiment to a funded project on the product roadmap.
MVP: Managing colors in the brand kit
MVP: Managing fonts in the brand kit
2 days
idea → working MVP
0 → 1
side idea → roadmap project
5
asset types scoped for V1
/ chapter 2
Building MVP in 2 days using Claude
/ how I worked
[title]
This project changed how I work. I used to design in Figma and throw it over the wall to engineering.
This time I moved through the tools — prototyping, designing, and building and looping back whenever feedback demanded it.
For the first time, I could push working code to staging myself.
What AI unlocked: I stopped being a step in a pipeline. Feeding my Figma frames to Claude Code through MCP, I could turn designs into reviewable, staged code myself — collapsing the design-to-dev gap from days into hours
solo · fast
Claude
Built a clickable MVP straight from the idea
w/ PM + Head of Product
Figma
Designed and iterated on the real UI. This is where product feedback shaped the direction.
w/ engineering
Claude Code + Figma MCP
Built the UI from my Figma references, connected via MCP, and pushed to staging. Eng reviewed the code.
/ the problem
Feeding my Figma frames to Claude Code through MCP, I could turn designs into reviewable, staged code myself
Feeding my Figma frames to Claude Code through MCP, I could turn designs into reviewable, staged code myself
/ the turning point
The system, screen by screen
Instead of mocking screens, I built a working clickable MVP directly in Claude that team could react to.
When the Head of Product saw how much was already functioning after two days, the conversation changed: Brand Kit went from a side experiment to a funded project on the product roadmap.