I've been focused on two things lately:
1. Enhancing our CCL (Component Library): As a UX designer, I've been working closely with a developer mentor to refine our core Storybook building blocks by steering AI assistance directly within Kiro.
2. The Angular Sandbox: This is an independent project where I use Kiro's AI capabilities to digest our library and build out functional implementations. My goal is to "efficientize" the frontend work for our full-stack devs so they can focus on complex API calls and queries.
We've seen massive success moving from design to functional code using the Figma MCP. So, when Figma dropped their new Claude to Figma functionality on February 17th, my curiosity got the better of me. I had to see if we could finally close the loop and bring that code back into design.
The Setup Tax
Getting this running wasn't "plug and play". It required terminal gymnastics to set up the Claude CLI and a $5 minimum API credit. While a small price for R&D, the friction is worth noting compared to standard plugins.
The Technical Reality Check
Under the hood, this feels similar to the html.to.design plugin by <div>RIOTS. Here is my comparison (note: I've blurred proprietary designs for privacy):
- Tokens become Hex Codes: Both tools read rendered CSS, meaning they have amnesia about design tokens.
- The Case of the Missing Icons: Claude struggled with our complex Storybook wrappers, though html.to.design saw through them better.
- Detached from the CCL: Results were "dumb" frames with no connection to Storybook or official Figma libraries.
The Verdict?
Kiro + Figma MCP is still my daily win. However, this "reverse" tool is a fair choice for legacy audits, capturing live data states, or documenting "judgment calls" devs make on custom states.
The code is the ultimate source of truth, but it's good to know where the bridge stands!