Pencil

A design canvas that syncs directly to code. Pencil lives inside your IDE (Cursor, VS Code), feeds pixel-exact coordinates and design tokens to AI agents via MCP, and supports bidirectional sync — visual edits update the codebase. New: Code on Canvas lets you drop a Script node on the canvas, point it at a .js file, and render live design layers from code, with design tokens flowing in as inputs. Supports Figma import, parallel multi-screen generation, and Git-versioned design files.