Vibe Coding: Why Figma variables are the new source code

Last Tuesday we were looking at the pipeline for 23 new football kits. Each one needed a unique storefront preview. In the old world, that is a week of CSS work. In the new world, we use Claude to generate the React components directly from Figma. We have started calling this vibe coding.

The term sounds loose, but the implementation is strict. If your Figma file is full of layers named ‘Group 12’ and ‘Vector 4,’ the AI will hallucinate the layout. It tries to guess the intent and fails. But when we use clean Figma variables and a consistent layout structure, the code comes out pixel perfect.

The LLM is only as good as the naming conventions it reads.

We found that the quality of the generated code is directly proportional to the discipline of the design file. When the variables are named for their function (like brand-primary-500) rather than their color (like light-blue), the AI understands the hierarchy. It stops guessing where the padding should be and starts following the logic of the system.

The mechanism of AI readability

Most teams treat AI as a magic box. They throw a screenshot at it and hope for the best. We treat it as a compiler. The Figma file is the source code. If the source code is messy, the binary is broken.

By standardizing our quote artifacts and design tokens, we reduced the time spent on UI iterations by roughly 60 percent. The developer is no longer a translator between design and code. They are an auditor. They check the AI’s work against the design intent.

The obvious objection is that this forces designers to think like engineers. It adds overhead to the creative process. A designer who just wants to move pixels now has to worry about variable scoping and layout logic.

We think that is a fair trade. The alternative is a world where the designer hands over a pretty file that the engineer then has to rebuild from scratch. That gap is where most commerce projects die. By closing it, we move faster.

Cultural context in design

This level of precision is even more important when moving into new markets. We recently analyzed the difference between Western and Japanese design patterns. In the West, we value white space. In Japan, that same empty space is often perceived as a lack of information or a missing feature.

If you tell an AI to make it minimal for a Japanese storefront, you might accidentally signal that the brand is incomplete. You need specific variables that define density and information richness. Without those, the AI defaults to a Western aesthetic that misses the mark.

The goal is not for the AI to do the thinking. We want to give the AI a map so clear that it cannot get lost.