Retrofit design system

Full version available in Russian. Read in Russian →

The site was already live on mmkeewa.ru when I realised I had no design system. Hex values in three places, spacing improvised. Every time I asked Claude to add a new block, it picked a slightly different pink, a slightly different padding. Two iterations in, the site stopped looking like one thing.

Three approaches that didn't work:

• Claude Design — built a clean design doc from screenshots. Then I learned the desktop version isn't wired to Figma MCP. Dead end.
• JSON → Tokens Studio — Claude Design generated a W3C tokens file. The Figma plugin that imports them is paywalled at $9/mo. Cancelled on principle.
• Custom Figma plugin — Claude Code wrote one, compiled fine, but threw errors on load. Without Figma Plugin API knowledge I couldn't tell which line to fix.

What worked: Claude Code + Figma MCP. MCP gives direct access to the Figma Plugin API from outside the canvas, so Claude Code wrote the JavaScript and ran it directly in the file — saw errors, fixed them, no upload-test-debug cycle.

One session shipped: 128 variables across core + semantic collections, 9 text styles, 2 effect styles, 11 primitive components, 5 composite components, 3 page templates. Plus Claude Code labelled which pages the plugin rewrites on each run and which I can draw on freely — the main fear of automation removed.

Takeaway: a design system isn't a side project. It's two canonical files (tokens.json + components.spec.json) and a bot that syncs Figma to them. Six hours start to finish — only because MCP killed the "compile, import, crash, dig" loop.