Pencil

Pencil is a design tool that integrates directly into the development environment, allowing engineers to create, edit, and iterate on user interface designs without leaving their code editor. It operates as an agent-driven MCP (Model Context Protocol) canvas built around an open design format that lives inside the codebase, meaning the design files are version-controlled alongside the source code. This eliminates the traditional handoff between designers and developers, as both can work on the same artifact in real time. Pencil provides an infinite design canvas where users can craft pixel-perfect layouts, components, and flows. The canvas is accessible from within popular IDEs such as Cursor, Visual Studio Code, Claude Code, and OpenAI Codex, as well as any other IDE that supports the MCP protocol. Users can switch between code and design tabs with a single click, making it possible to adjust visual properties and immediately see the corresponding changes in the code structure. A key feature of Pencil is its AI-powered multiplayer system. Instead of requiring multiple human designers to collaborate, the tool uses AI agents that act as extra hands. These agents can generate entire screens or complete user flows in parallel, following the user’s high-level instructions. For example, a developer can describe a login screen layout, and the AI agent will produce a set of design frames with appropriate spacing, typography, and color usage. The developer can then refine those frames manually or ask the agent to make adjustments. This turns what was traditionally a single-player design process into a multiplayer-like experience, where the AI contributes actively to exploration and iteration. Pencil also supports downloading design assets directly from the canvas, and it includ