Pencil es una herramienta de diseño frontend pensada para IA que vive directamente dentro de VS Code y Cursor. Los diseños se guardan como ficheros JSON .pen en la carpeta /design del repo, así que se versionan como código y los agentes de IA pueden leerlos a través del Model Context Protocol. Claude Code (o cualquier agente compatible con MCP) ve tu layout visual y genera React, HTML y CSS con precisión de píxel sin tener que traducir entre frames de Figma y un código aparte.

La idea es un bucle bidireccional: diseñas en un canvas infinito, exportas a código, reimportas componentes existentes al canvas y mantienes los design tokens sincronizados entre Pencil y tu base de código. Está pensada para desarrolladores frontend y design engineers que quieren saltarse el ciclo Figma → handoff → reimplementación, y también para los PM-builders que ya envían producto directamente con agentes de IA.

Pencil está ahora en early access y es gratis; eso sí, necesitas una suscripción a Claude Code (desde 20 $/mes) para mover la parte de IA. Medios como Medium o CTOL Digital Solutions la han señalado como una de las propuestas más interesantes de diseño nativo de IDE en 2026.