Tracebloc

From Figma to Production: Designing Without a Handoff

As the only designer at an AI infrastructure company, I built a system for taking designs from Figma to production without losing quality or slowing the team down. I own the design decisions and the design system, implement UI through Claude Code, and open pull requests that engineering reviews and merges.

Company

tracebloc is a Berlin-based federated learning platform. It lets enterprises collaborate on training, evaluating, and benchmarking AI models together, without ever exposing their underlying data to each other or to the platform itself.

My Role

Sole Product Designer and Design Engineer, reporting directly to the founder and CEO. I own product design and the design system, and increasingly the UI implementation. I design in Figma, direct an AI coding agent against my own spec, and open pull requests that engineering reviews and merges.

The Challenge

tracebloc asks users to install a local cluster on their own machine and promises their data never leaves it. Most users are AI engineers, not infrastructure specialists. The interface had to make setup feel simple and make the privacy promise visible.

How I Work: The Pilot Process

Every new feature starts as a "pilot", a working build with placeholder content and data. My design pass starts here: colors, spacing, typography, copy, and layout, checked live in the browser against the running build rather than static mockups. Once I hand it back for review, engineers wire in real data, and I do a final polish pass before it ships.

Design System + Automation

I own the design system and the tooling that keeps it consistent. I built a Claude-based system that checks the live product against the design system and flags atoms and molecules that are missing or have drifted from spec. I trigger it manually rather than running it continuously, since full automation would also flag in-progress or unpublished skeleton components as false gaps.

When it flags a real gap, I make the call: new component, or a variant of an existing one, and draw it in a working Figma file before any code is written. I hand the Figma link to Claude, which generates the implementation, and I review the result against my own spec. For page-level work, I open the PR and hand it back to engineering for review and merge; for component-level work, I hand the approved component to the frontend engineers to integrate. Engineers connect real data after design approval. They don't redesign.