Defining and creating a basic Design System based on any website (in Figma and React) using Claude

It's 2026, and MCP and design tooling are constantly changing with various improvements in the AI space. Arguably, one of the most long-awaited features was Figma MCP supporting agents writing to its canvas. The funny thing is, I created a particular workflow 2 weeks ago, the lack of the write to canvas was a bit of a bottleneck but could be worked around since Claude Code was pretty good at generating plugins to create and clean up tokens (variables), as well as components and their props. Thankfully, that gap didn't hang around for long enough, and now there's native support for writing directly to canvas. Firstly, we'll look at how we can set up the correct tooling for the following use case: You've joined a startup, they have a website or a web page, but lack any reusable design system in either codebase or Figma. You want to generate semantic CSS variables and a basic set of web components in React and have the exact same copy of them in Figma. If you have Claude Code, the good ne