This week I sat down to vibe code a new page for my portfolio website with AI. Then I realized I had to do the thing I was avoiding for weeks- build a proper AI-readable design system that lives in both Figma and code.
The problem
Beginning of this year I moved my website from Webflow to Framer. I learned Framer in a few weeks and rebuilt everything, but only in Framer.
However, while I was going between my new design in Figma and implementation in Framer, I never rebuilt the matching design system in Figma (honestly, I was too lazy! lol ).
Fast forward to today: I regularly vibe code new ideas but my own brand design system is scattered:
I have a version that lives in Framer
a super old version on Figma (0 variables)
a version that lives in Claude Design
a version that lives on Lovable …
So… I decided to do what every designer would do: Spend 3 days of my life avoiding to re-build my new portfolio page and instead build an AI-readable design system kit that lives in Figma but is also tied to a Claude Skill 😄
More on that, soon.
Here’s my actual process of re-creating my design system from Framer into Figma
The plan: pull every value out of Framer, check how far my Figma file had drifted, rebuild a clean system in Figma with semantic tokens, then rebuild my components on top.
1. Audit of my current design system in Figma
I connected Claude Code to Figma through the Figma MCP and had it audit my old design system file: my tokens, where they drifted from Framer, and where they broke best practices.
The verdict: the color structure was so heavy that fixing it would take longer than starting over→ so I decided to create a new file instead.
2. Import new color scaled from Framer and turning them into variables with Claude + Figma MCP
I took screenshots of my colors in Framer and had Claude turn them into Figma variables. It worked well, just slowly.
3. Add typography and the rest of the primitives
Once the above worked, I moved on to Moving the existing system from Framer into Figma. I used Framer’s AI Agent to help draft the specs and export them into .json files so Claude could read them better AND faster.
( I am sure there are plugins out there to export your Framer values and components into Figma, but I just didn’t want to pay for that)
That was done fast and then I move to the more painful part
4. Re-creating the components 1 by 1.
(In case you are wondering I have only migrated 4 components only)
The Buttons
Pro tip: Framer has its own agent. Ask it to export a component’s details into a file, then hand that file to your LLM
The Navigation
That one was quite tricky because I didn’t only have to export the colors and the layout, but I also had to export the interactions.
I exported the data from Framer again as a JSON file, and then I pointed Claude to the live website. After 30 minutes of tweaking, I achieved the desired result.
The footer was easier: no animations, a clear structure, about 30 minutes.
The final result
I finally created most of the variables, added some basic components and had Claude audit everything to make sure all elements are using the semantic values, not the primary ones.
Creating a Claude Skill that helps me match the values in Figma into token.css etc.
After the basic work was done, I moved on to creating the tokens, naming rules etc. for all of it with the help of Claude and Codex and thus connecting my new design system to actual rules any LLM can read and apply.
Sudden realisation
If your design system only has values, AI will invent the rules.
An idea popped into my head: what if a Skill could generate all of this for me? A Figma file with variables, plus variables.css, a tokens JSON, and rules bound to the Figma design. It would speed up my next vibe-coding builds and let me keep designing in Figma. (I’m not a big fan of designing with LLMs first.)
So I spent the next two days building it. More on that in the next issue:)
Curious to hear does your design system live right now? Figma, code, or your head? Hit reply and tell me.
P.S. Can't wait for the next issue? The first version of my AI-readable design system kit is already on GitHub, and it's free: a Figma file, CSS tokens, naming rules and a Claude Skill that adapts it all to your brand. Get the kit on GitHub ->