Changelog

A new freehand annotation tool lets you sketch directly on the canvas and share what you drew with your AI agent as visual context.

Freehand annotations

Draw on the canvas with the new annotation tool. Circle an element, sketch an idea, scribble a note — annotations sit on top of your design without modifying it. When you send a prompt to your AI agent, it can read the drawing and act on it, making it easy to say visually what you mean rather than describing it in words. Annotations undo and redo like everything else in the editor.

CSS token files

You can now include plain CSS files in your token configuration. If your design system ships tokens as CSS custom properties, the editor reads them directly alongside your existing tokens.jsonc.

Improvements

• Selected nodes are now automatically revealed in the left panel tree so you always know where a selection lives in the hierarchy.
• Design system color tokens now preview correctly once Tailwind finishes compiling its CSS.

Your AI agent can now see the canvas, the component import flow got a major overhaul, and two rendering optimisations make the canvas noticeably snappier.

AI agent can screenshot the canvas

The MCP server now includes a take_screenshot tool. Your agent can capture what the design looks like at any point — useful for visual feedback loops where it adjusts a layout, checks the result, then refines. The server also ships new canvas-awareness tools so the agent can explore the document structure and read node properties without guessing from the source.

Sharper component importing

The Shadcn import flow now has a modal UI with selective import — pick only the components you need instead of pulling in the whole library. Component children are now visible in the node tree, errors during rendering surface directly in the panel, and the editor auto-focuses the inserted component after a successful upsert.

Smarter selection on the canvas

Clicking now navigates the hierarchy more naturally: a first click selects the outer frame, subsequent clicks descend into children. Entering text deep-edit requires a more deliberate gesture, so you no longer accidentally start editing when you meant to select.

Canvas rendering performance

Two optimisations land in this release: the canvas skips a full remount after every zoom gesture, and a category of redundant React re-renders during drag is eliminated. Both translate to a snappier feel, especially on designs with many layers.

Improvements

• AI-generated designs now use your project's configured font automatically.
• Autolayout stack reordering handles complex nesting more reliably.
• Component nodes now support slot-based child selection.
• Scroll inertia behaves more predictably after releasing a zoom modifier.

The extension now has a built-in MCP server so any AI agent in VS Code can read and edit your designs directly — and a new set of shortcuts makes the editor faster to use by hand too.

AI agent integration

Overlay now runs a local MCP server that any compatible AI agent in VS Code can connect to. Point your agent at the server and it can read the current design, insert and update components, apply styles, and modify the canvas using standardized tools. Works with the native VS Code language model API and any external MCP-compatible client.

New keyboard shortcuts

Group a selection into a frame with Cmd+Alt+G, and ungroup with the same shortcut on an existing group. Set opacity from the keyboard — press 1–9 for 10%–90%, or 0 for 100%. VS Code shortcuts now pass through correctly when the canvas is focused, so the editor no longer intercepts key combos you meant for the IDE.

Smarter component handling

Component names are now derived automatically from their file and export names — no need to set them explicitly in the config. The bundler starts faster thanks to a warm cache, shows a loading state while it initializes, and lets you define a priority order so the components you use most are ready first.

Improvements

• Resize handles scale with zoom so they're always easy to grab, even on small nodes.
• A new tokens.jsonc schema file is supported for more expressive token configuration.
• Autolayout sizing is preserved when the last child of a hug-parent frame is removed.

It's now possible to import Shadcn components into the editor and use them on the canvas. To get started, click on the "Components" Tab in the left panel of the app.

It's now possible to sets Nodes with CSS Flex layout via the Property Panels.

Video Preview on X/Twitter