Hay una nueva herramienta que puede suponer una revolución para quienes crean productos digitales. Se llama Pencil y conecta dos mundos que hasta ahora iban por separado: el diseño visual, como el que se hace en Figma, y la generación de código con inteligencia artificial como Claude Code. Con Pencil.dev diseñas y, al mismo tiempo, construyes el código, todo dentro de la misma plataforma. Y lo mejor: de forma gratuita (al menos de momento).
Un lienzo donde dibujar es programar
Pencil funciona como un lienzo infinito. Allí puedes crear botones, textos, pantallas completas, etc, como lo harías en una herramienta de diseño. La diferencia es que ese diseño no se queda en una imagen. Con ayuda de la inteligencia artificial de Anthropic, lo que dibujas se convierte en código en formatos como HTML, CSS o React. Es decir, pasa de ser una idea visual a algo que ya puede usarse en un proyecto real. Todo ocurre en tu máquina. Es gratuito y funciona en macOS y Linux, integrándose con programas como VSCode o Cursor.
Conexión directa con Figma
Pencil no obliga a abandonar Figma. De hecho, permite copiar y pegar marcos, vectores, textos y estilos directamente desde allí. Se puede seguir usando Figma para explorar ideas y, cuando el proyecto esté más claro, llevarlo a Pencil para convertirlo en código y conectarlo con el resto del trabajo.
Para empezar a usarlo, hay que solicitar acceso en su página oficial, pencil.dev, descargarlo e instalarlo en el entorno compatible. Ahora diseñar y programar no son dos pasos separados, sino parte de un mismo proceso. Con la llegada de esta herramienta estamos ante un ejemplo más de cómo la inteligencia artificial está cambiando la manera en que trabajamos.
