{"slug": "webstorm-2026-3-new-design-code-production-workflow-jetbrains-air-in-webstorm", "title": "WebStorm 2026.3: New Design-Code-Production Workflow, JetBrains Air in WebStorm, and More", "summary": "JetBrains released WebStorm 2026.3, which ships JetBrains Air directly in the IDE so developers can run Claude Agent, Codex, Gemini, GitHub Copilot, Junie, OpenCode, and other ACP-compatible agents in parallel with their existing subscriptions and API keys, no JetBrains AI subscription required. The release adds a design-code-production workflow: Figma Connect with an Inspect panel pulls exact CSS values, colors, and design tokens into the agent chat, Storybook Connect surfaces components to reuse, and Chrome DevTools Connect lets agents test and fix their own work in a real browser. WebStorm 2026.3 also adds stable TypeScript 7 support for React and Angular without migration, plus fixes for Angular, Sass, CSS, Vitest, Mocha, and Tailwind CSS support, and includes free AI through the Junie Lite configuration.", "body_md": "[News](https://blog.jetbrains.com/webstorm/category/news/)\n\n[Releases](https://blog.jetbrains.com/webstorm/category/releases/)\n\n# WebStorm 2026.3: New Design-Code-Production Workflow, JetBrains Air in WebStorm, and More\n\nWebStorm 2026.3 is now available!\n\nBuilding a UI feature with an AI agent often involves more switching between tools than actual coding. You copy values out of Figma, hunt for the right story in Storybook, write the prompt, wait for the agent, and then check the result in the browser and find yourself starting the loop over again. \n\nThis release brings that end-to-end frontend loop into the IDE and connects it to your agents. Figma Connect, now with the *Inspect* panel, puts design details right in the chat. Storybook Connect shows you and your agents which components to reuse. Chrome DevTools Connect lets your agent do its work in the browser and hand the result back to you for verification.\n\nTo connect these steps, JetBrains Air is now available directly in WebStorm. Run multiple sessions with JetBrains and third-party agents in parallel, so you can keep working while each agent finishes its own tasks. You can also pick the right agent for each task without changing how your team works.\n\nThe highlights of this release include:\n\n- JetBrains Air in WebStorm is bringing agentic development directly into your IDE, with your choice of coding agents, support for parallel workflows, and IDE-native review and verification.\n\n**Design-code-production workflow**\n\n- Figma Connect with the *Inspect panel* – Get exact CSS values, colors, and design tokens from Figma and hand them to your agent, without having to copy them manually.\n- Storybook Connect – Find, open, and create stories without leaving the IDE, and let AI write the ones you’re missing.\n- Chrome DevTools Connect – Let your agent check and fix its own work in a real browser, so you start your review with a result that has already been tested.\n\n- Benefit from Stable TypeScript 7 support for React and Angular without migration, plus fixes for WebStorm’s Angular, Sass, CSS, Vitest, Mocha, and Tailwind CSS support.\n\nThis release also includes many fixes and quality-of-life improvements, which you can learn about below.\n\nYou can update to WebStorm 2026.3 via the Toolbox App or download it directly from our [website](https://www.jetbrains.com/webstorm/download/).\n\n## JetBrains Air in WebStorm\n\n#### One place to run your agents and verify their work\n\nAs of this release, JetBrains IDEs ship with [Air](https://www.jetbrains.com/air/ides/), a new layer for agentic development. Work with the coding agents of your choice, and run, track, and verify multi-agent workflows inside your IDE, where code intelligence helps agents make fewer wrong turns and gives you the tools to review every change before it ships.\n\n**Your agents, your models, your subscriptions**\n\nAir works with Claude Agent, Codex, Gemini, GitHub Copilot, Junie, OpenCode, and other [ACP-compatible agents](https://www.jetbrains.com/acp/). It detects the agents already installed on your machine so you can connect them in a click, and you can add more from the agent registry.\n\nYour existing setup carries over, too: provider subscriptions, API keys, and even a custom base URL all work, with no JetBrains AI subscription required. Run Claude Agent on your Claude subscription in the terminal or in a full-screen IDE tab, use other agent subscriptions in the chat or terminal, and switch between subscriptions at any moment, even mid-session.\n\n**A central workspace to review changes and guide the agent**\n\nReview an agent’s changes with the surrounding code and your project tools in view, and send feedback straight back to the agent. Anchor a note to a specific line in the diff, or comment directly from the code, so the agent gets concrete context about the change you want. Work in the chat or the terminal, whichever suits you.\n\n**Free AI agent with Junie Lite**\n\nAir includes free AI with the Junie Lite configuration, so you can use an agent without a subscription. You only need a JetBrains Account.\n\n*Still using AI Assistant? A notification will offer you a trial of Air. Moving to Air hides AI Assistant, if you wish to return to AI Assistant follow the steps outlined here. Air automatically migrates your IDE skills, MCP configuration, agents installed through ACP, authentication, and chat history. Chat mode history isn’t migrated.*\n\n## Design to production end-to-end workflow\n\n### Figma Connect: Inspect designs without leaving WebStorm\n\nImplementing a design shouldn’t mean switching between Figma and your editor, pasting links, and copying spacing and color values manually.\n\nWith [Figma Connect](https://blog.jetbrains.com/webstorm/2026/08/figma-connect-webstorm/), you can:\n\n- Add screenshots, URLs, and design values to the context without switching back and forth.\n- Browse and navigate Figma layers from the IDE.\n- Inspect the selected design layer while working in JetBrains Air.\n- Send design context to any agent, such as Claude Code, Codex, or Cursor.\n\nThe *Inspect* panel gives you the implementation details for the selected layer: CSS values, colors, and design tokens. You get the exact numbers you need to build the component, without having to open another tool or retype anything.\n\nFigma Connect requires one-time setup. See the [Figma Connect documentation](https://www.jetbrains.com/help/webstorm/figma.html) for connection instructions.\n\n### Chrome DevTools Connect: Let agents check their work in the browser\n\nCode that compiles isn’t necessarily code that works. With [bundled Chrome DevTools Connect plugin](https://www.jetbrains.com/help/webstorm/chrome-connect-plugin.html), your agent can test what it builds in a real browser and fix problems before it brings you the result. When you spot something that needs tweaking, you can show your agent exactly where to make the change.\n\nThrough the [bundled Chrome DevTools CLI skill](https://blog.jetbrains.com/webstorm/2026/08/chrome-connect-webstorm/), an agent can:\n\n- Open pages and move through application flows.\n- Inspect the DOM and rendered UI.\n- Read console logs and network requests.\n- Take screenshots and interact with page elements.\n- Reproduce runtime issues and confirm fixes in the browser.\n\nThe first time an agent uses the skill, WebStorm prompts you to install the required package. After that, browser-assisted workflows will work without you having to wire up an additional MCP integration manually.\n\n### Storybook Connect: Build with the components you already have\n\nStorybook is most useful when every component has a story, and least useful when you have to hunt for the right one. Storybook Connect brings Storybook into WebStorm so you and your agents can stay in one window.\n\nA dedicated tool window lets you browse and search stories. You can jump between a story and its source code, and your changes always stay in sync with the Storybook app. Start your own local Storybook server or set one up in one click.\n\nStorybook Connect analyzes component props and finds components without stories, and then its AI-assisted tools generate the missing stories without a detailed prompt from you. A bundled CLI and bundled skills make the same capabilities available to developers, CI scripts, and AI agents:\n\n`webstorm storybook-connect component-props ./src/Button.tsx`\n\n`webstorm storybook-connect possible-stories ./src/Button.tsx`\n\n`webstorm storybook-connect missing-stories ./src/Button.tsx`\n\n`webstorm storybook-connect create-missing-stories ./src/Button.tsx`\n\nStorybook Connect is distributed as a separate plugin and requires Storybook 10 or later. See [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/33386-storybook-connect) for compatibility information and the latest version.\n\nTogether, these pieces cover the path from design to code to a working page. They all run in Air, inside WebStorm, under the same context and review workflow.\n\n## Platform updates\n\n### Sound cues for IDE events and editor line marks\n\nWe’re continuing our work to make JetBrains IDEs accessible to every developer. This release introduces sound cues, built-in responses to requests that give you information without requiring you to have the context in view.\n\nScreen reader users now get audio cues for editor line marks: errors and warnings, lines added, changed, and removed under version control, and code folding. You can also hear when things finish. Builds, tests, and other time-consuming background tasks report their results with distinct sounds for success, warning, and error states. Breakpoint hits make a sound, too. And if you’re working with multiple monitors or several projects at once, you can enable these sounds so you don’t have to glance at the screen to check statuses.\n\nWith screen reader support enabled, line-mark cues and sounds for the most important events (builds, tests, and breakpoint hits) are enabled by default. Agents in Air come with sound cues of their own, and they’re enabled by default for everyone, whether or not you enable screen reader support. You’ll hear when an agent finishes, stops with an error, or needs your input, and when dictation starts or stops. Everything else is opt-in. You can explore and preview the sounds on the new *Accessibility* settings page, and use the *Play sound* checkbox on the *Notification settings* page to enable cues for a specific notification group. Learn more from [this blog post](https://jb.gg/jb-ide-sound-cues). \n\n### Automatic error and freeze reporting\n\nWebStorm 2026.3 automatically sends error and UI freeze reports to JetBrains, helping us identify the problems that interrupt your work and prioritize fixes based on their impact.\n\nReports contain only technical data. Personal details such as file paths, URLs, and usernames are removed from report messages before they leave your machine. You can turn automatic reporting off in *Settings | Appearance & Behavior | System Settings | Data Sharing*.\n\n## Framework and ecosystem updates\n\n### TypeScript 7 support for Angular and React, no migration required\n\nTypeScript 7 support is Stable in WebStorm, including in Angular and React projects. It swaps the Node.js-based language service for a Go-based engine, so coding assistance has less overhead in large projects. You can select it without migrating or changing your project’s TypeScript version. On the Kibana codebase, project load time dropped from about 12 seconds to three.  [Read the full article](https://blog.jetbrains.com/webstorm/2026/09/typescript-7-in-webstorm-faster-coding-assistance-for-angular-and-react-no-migration-required/). \n\n### Angular\n\nWebStorm now infers correct template types when you work with Angular in WSL, instead of falling back to `any`. Furthermore, `@default never`; inside `@switch` is no longer reported as an unknown block.\n\n### Sass and CSS\n\nWe’ve also fixed several issues with Sass and CSS support. Namespaced functions and variables inside `calc()` no longer trigger *Unexpected term*. In addition, we removed 161 non-shipping properties from the CSS syntax data. Finally, pseudo-selectors are no longer flagged as unknown when the Images plugin is disabled.\n\n### **Testing and tooling**\n\nSingle-test runs work again in Vitest 5, and Mocha 12 (ESM) no longer shows a reporter warning for them. The Tailwind CSS language server also works with a remote Node interpreter in Docker on macOS.\n\n## **Performance and quality improvements**\n\n### ***Find Usages* on huge codebases**\n\n*Find Usages*on huge codebases\n*Find Usages* no longer stalls the IDE for minutes in very large monorepos. We tested it on Kibana, which has more than 1,000 `tsconfig` files.\n\n### **Angular performance**\n\n**Angular performance**\n\n*Resolving Reference* no longer hangs in workspaces with several Angular projects. We also fixed a memory leak in Angular on TypeScript 7 that was causing CPU spikes of 800% – 900%.\n\n## Final words\n\nThis release focuses on the part of the workflow between your design and the shipped code. Your agents work directly from the Figma design and your own components, check their results in a real browser, and stay in one place under JetBrains Air. Code your way, and ship with confidence.\n\n[Try the latest version](https://www.jetbrains.com/webstorm/download/) and let us know what you think. Your feedback shapes what comes next.\n\n#### Subscribe to WebStorm Blog updates", "url": "https://wpnews.pro/news/webstorm-2026-3-new-design-code-production-workflow-jetbrains-air-in-webstorm", "canonical_source": "https://blog.jetbrains.com/webstorm/2026/11/webstorm-2026-3/", "published_at": "2026-11-05 13:27:56+00:00", "updated_at": "2026-11-05 13:50:03.701800+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "ai-products"], "entities": ["JetBrains", "WebStorm 2026.3", "JetBrains Air", "Figma Connect", "Storybook Connect", "Chrome DevTools Connect", "Junie", "Claude Agent"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/webstorm-2026-3-new-design-code-production-workflow-jetbrains-air-in-webstorm", "markdown": "https://wpnews.pro/news/webstorm-2026-3-new-design-code-production-workflow-jetbrains-air-in-webstorm.md", "text": "https://wpnews.pro/news/webstorm-2026-3-new-design-code-production-workflow-jetbrains-air-in-webstorm.txt", "jsonld": "https://wpnews.pro/news/webstorm-2026-3-new-design-code-production-workflow-jetbrains-air-in-webstorm.jsonld"}}