Shipping a production PDF with Figma MCP and Claude Code

Image representing the Blog topic


Read full case study here


The Friday my developer got sick

Our frontend developer got sick the Friday before the IOC report launch. The report is a four-page A4 document banks file in their loan vetting records. It's a legal artifact that gets uploaded to the documents section of their loan portal. It was designed in Figma and ready to go. It just needed to become real code. So I tried something. Could I ship it myself using Figma MCP and Claude Code? I set three rules going in. Pull design tokens straight from the Figma node so I wasn't retyping hex values. Produce one self-contained HTML file with no build step, so any engineer could open it, edit a data object, and ship a variant. And keep it true to the version the bank had already reviewed and approved.


Where the model won, and where I had to step in

The token extraction was the real win. Before writing any code, the model read the Figma node and laid out every variable as a clean table. Brand navy, the success greens, the warning oranges, card radius, border widths, padding. Once those lived as CSS variables, the report became maintainable instead of a pile of hardcoded numbers. But it wasn't one-shot magic. I made four interventions along the way, and the sharpest one was a grid fix the model didn't catch on its own. The transaction cards needed both rows of metadata on a single five-track grid so District lined up above Reg ID. I had to know that to fix it. There was also one padding edit I never managed to land through prompts, so I opened the CSS and changed it myself. The right move there was to stop debugging the prompt and just fix the thing.


The workflow that compounded

The report shipped in under three days. But the part that actually mattered came later. A report change used to take two days. Mock the field, write a spec, hand it to a developer, wait for the build, review, fix, QA, ship. Now it takes about an hour. When the data team adds a new field, I update the Figma frame, run a short follow-up prompt, review what comes back, and hand the file to an engineer to push. That same workflow ships every report update at AdvaRisk now. It isn't a story about hustle or saving a launch weekend. It's about a workflow that compounded.

Create a free website with Framer, the website builder loved by startups, designers and agencies.