Porting Design Systems from Figma to the Web
Design systems, animations, and diagrams rebuilt as living web consoles. We ported design systems from Figma to the web, so every screen is real HTML and CSS built from the same tokens and components. The system makes it on-brand, and the motion judgement is what makes it feel right.
The Compute surface and the signed-in console, built from the same token layer. Because the pages are real HTML, a change to a token moves every screen at once — which is the entire point of doing it this way.
Once the design system lives in code, motion can be written straight on top of it. Every frame here is real HTML and CSS built from the same tokens and components, so the animation is never a separate file that drifts away from the product.
Claude writes the code, but the know-how sets the direction: which element leads, how long a beat should hold, what easing feels right for the brand and when to leave something still. The system makes it on-brand, and the motion judgement is what makes it feel right.
These started as a carefully crafted Figma design: a set of product illustrations covering flows, triggers, executions and the rest of the platform. They were brought to life in code as animated SVGs rather than handed off to a motion tool, then exported to video so they play anywhere.
The motion follows best UI-animation practice, written down as a skill file Claude works from: purposeful easing, staggered timing so the eye reads each step in order, and nothing that moves without a reason. Every piece is looped so it feels alive and interactive, and it stops for anyone who has asked their system for reduced motion.
The same idea pointed at the docs. Kestra's diagrams were redrawn by hand each time, so none of them matched. I turned the diagram components into a small design system, tuned for dark mode and for being read by AI, and connected it to Claude through the Figma MCP.
From there a diagram starts as code: a rough sketch or a description of the architecture goes in, Claude assembles it from the system's components, and what comes back is an on-brand diagram that lands in Figma ready to edit, not a picture to trace over.
