I recently piloted a new design handoff: spinning up a local Angular 18 "UX Harness" to recreate Figma pages using actual Storybook components. Using Kiro + Claude Opus, I built a fully interactive, data-bound UI. Phase 1 is complete: 8 full pages, plus dialogs and drawers! 💻✨
The Catalyst (Why we needed this) 💡
On a Figma Professional plan, we lack "Code Connect" (Org/Enterprise only). Without it, developers struggle in Dev Mode to distinguish standard Storybook components from custom builds. This sandbox bridges that exact gap.
The Two-Repo Merge 🔀
The real magic happened last week. Our lead dev pulled my sandbox repository into a Kiro workspace right alongside his production codebase. His prompt to Kiro:
"My UX colleague updated the front-end for this page in the sandbox using mock data. Update my production page with her UI. If I already have the data connected, leave it. If not, stub it out."
...And Kiro did exactly that. 🤯
The UX Value Add 🎨
By owning the sandbox, I ensured every breakpoint aligned. Kiro used the exact Storybook components, and I applied strict design system tokens and typography for the rest. No more "close enough" UI in production.
The Process Evolution 🧠🧊
For complex pages, I leaned on "Context Freezing"—saving raw Figma Desktop MCP data into a text file in the repo. This feeds Kiro massive design context without blowing out memory limits or triggering infinite API loops.
The ROI Experiment 📈
Post-sprint, I'll interview the dev to track metrics: story points saved, friction, and overall experience. I sometimes worry about getting too deep into the code as a designer, but this exploratory phase is exciting. We're seeing what happens when UX hands over a living sandbox instead of a static file!
#UXDesign #UXEngineering #DesignSystems #Angular #AIWorkflow #DeveloperHandoff #Storybook #Figma #Kiro #ClaudeOpus