AI Era Design System

Building and maintaining the Design System is slow and inconsistent when it’s done manually. Figma variables and the codebase can drift apart, and there’s no reliable way to compare them. Earlier vibe coding tools couldn’t touch the Figma files directly. They also tended to invent values, such as colors that aren’t in the token set, which undermines a system that depends on exact, semantic tokens.

Create a single, shared visual language that lets design and engineering build consistent products faster, with fewer decisions to remake and fewer errors to fix. Sticklight is working on a mono-repo on GitHub so adding the design system guideline to the code so the agent builds correctly is a needed and easy-to-implement shift.

We’ve set up an AI-based design workflow that connects our codebase through Claude Code to Figma (using Figma Desktop Bridge and Figma MCP). Claude can now read and manipulate Figma files programmatically, and create PR to the codebase according to Figma changes, which lets us build and maintain the Sticklight Design System much faster and more consistently. The mirror that Claude creates between Figma and the codebase with design system MDfile is a win.