Pencil is an AI-native frontend design tool that lives directly inside VS Code and Cursor. Designs are stored as JSON .pen files in your repo's /design folder, which means they version-control like code and stay readable to AI agents through the Model Context Protocol. Claude Code (or any MCP-aware agent) can read your visual layout and generate pixel-accurate React, HTML, and CSS without translating between Figma frames and a separate codebase.

The core idea is a two-way loop: design visually on an infinite canvas, export to code, re-import existing components back into the canvas, and keep design tokens synced between Pencil and your codebase. It's aimed at frontend developers and design engineers who want to skip the Figma → handoff → reimplementation cycle, as well as the growing crowd of PM-builders shipping with AI agents.

Pencil is currently in early access and free to use; it does require a Claude Code subscription (from $20/month) to drive the AI parts. Coverage in Medium, CTOL Digital Solutions, and various AI-tool review sites has framed it as one of the more interesting attempts at IDE-native design in 2026.