WebStorm IDE is researching developer experience flow state. We found that developers feel it is not productive alt-tabbing between IDE/ AI Agents, Figma and browsers trying to spot if everything matches. It’s a manual process that doesn’t scale when we are getting faster with AI. It's too late if these visual bugs hit a PR review, you've already lost the context needed to fix them without taxing your head space.

Is it possible or even desired to pull this validation directly into the development loop?
We'd like to show you our prototype on how we would like to combine the Figma Plugin APIs, WebStorm and Vitest Browser Mode to automate these checks while you code.

With AI and design systems like Figma taking over parts of our workflow, it’s easy for things to get messy fast. In this talk, I’ll share how applying good old Separation of Concern can keep your React apps clean and maintainable, even when AI’s helping with the design and code.

Design systems are often seen as essential in growing organizations. However, where design team is under-resourced, maintaining and evolving a coherent system becomes a challenge. This talk presents a pragmatic, engineer-led approach to promoting, using concrete React patterns and architecture.

Letting AI generate your UI is fast and fun right up until you need it to implement something specific. Throw in strict design systems, your company's existing component library and responsive breakpoints, and the whole process usually falls apart. The good news is that there is a solution. We'll explore what works and what doesn't with agentic coding.