En redes sociales se está extendiendo un mensaje tan llamativo como polémico: “acaba de salir el Figma de Claude Code”. Detrás del titular está Pencil (pencil.dev), una nueva herramienta que propone un cambio de hábito bastante radical para quien crea productos digitales: diseñar dentro del propio IDE, con un lienzo infinito, y pasar del diseño al código sin salir del repositorio.
El concepto es fácil de entender incluso para público general: en vez de tener el diseño en una plataforma aparte (y luego “traducirlo” a mano a HTML/CSS/React), Pencil intenta que diseño y desarrollo vivan bajo el mismo techo, como dos pestañas del mismo proyecto. Su propio eslogan resume la intención: “Dream on canvas. Land in code”.
Qué es Pencil y por qué se está viralizando
Pencil se presenta como un “canvas” de diseño vectorial con precisión de píxel que se abre dentro de herramientas habituales para programar. La compañía lo define como un sistema “agent-driven” (dirigido por agentes de Inteligencia Artificial) y construido alrededor de un formato de diseño abierto que vive en la base de código.
El gancho para mucha gente es doble:
- Evitar el “handoff”: el típico momento en el que el diseño se aprueba en una herramienta y el equipo de desarrollo lo vuelve a construir en código, con pérdidas de tiempo y diferencias inevitables.
- Versionar el diseño como si fuera código: los archivos de diseño se guardan en el repo y se pueden ramificar, revisar y fusionar con Git, igual que el resto del proyecto.
A nivel de “quién está detrás”, Pencil aparece como startup fundada en 2025 y vinculada al programa a16z Speedrun, según la ficha pública del acelerador. Eso también ha contribuido a elevar el ruido mediático en torno al lanzamiento.
Cómo funciona en la práctica: diseño “en el IDE”
Pencil ofrece dos vías principales de uso:
- Aplicación de escritorio (Pencil Desktop), con descargas para macOS (Apple Silicon e Intel), Windows (x64) y Linux (AppImage y tarball, con builds x64 y ARM).
- Extensión para editores, con integración para VS Code y Cursor, entre otros.
En la práctica, el flujo que propone es simple: crear un archivo de diseño en el proyecto (con extensión .pen), abrirlo como si fuera un archivo más del repo, y diseñar en ese lienzo. A partir de ahí, se puede pedir a la IA que genere pantallas completas, variaciones de estilo o componentes, y después transformar ese diseño en código.
Pencil también ofrece una “Prompt Gallery” con ejemplos de instrucciones listas para copiar y pegar, orientadas a iterar diseños de forma rápida (por ejemplo, explorar otra dirección visual, convertir a modo claro, cambiar la tipografía o introducir navegación lateral).
El detalle técnico que lo hace distinto: MCP integrado
La parte más relevante —y la que explica por qué se menciona tanto junto a Claude Code o Cursor— es que Pencil integra MCP (Model Context Protocol).
Traducido a lenguaje llano: MCP es un “enchufe” para que un asistente de Inteligencia Artificial pueda conectar herramientas y operar con ellas. En el caso de Pencil, el asistente no solo “ve” el diseño: puede leer y manipular el canvas y los archivos .pen.
Según su documentación, el servidor MCP de Pencil arranca automáticamente cuando se usa la herramienta, corre en local y, para el uso básico, no requiere configuración adicional. En su lista de asistentes compatibles menciona Claude Code, Claude Desktop, Cursor, Windsurf, Codex CLI y otros entornos que ya se mueven en el terreno de los agentes.
Para el usuario generalista, el impacto es muy fácil de visualizar: en vez de pedir “hazme una pantalla de login” y recibir un texto, la IA puede crear la pantalla directamente en el lienzo, con capas, estilos y estructura, como lo haría un diseñador… y luego acompañarlo con el código.
El archivo .pen: diseño como datos (y como historial)
El formato de Pencil se basa en archivos .pen, descritos como un formato JSON: estructurado, legible y “amigo” del control de versiones. En la documentación técnica se explica como un árbol de objetos (similar en espíritu a HTML o SVG), donde cada elemento del diseño (frames, textos, rectángulos, etc.) es una entidad con identificador y tipo.
Esto tiene una consecuencia práctica: el diseño deja de ser una “caja negra” difícil de comparar, y pasa a ser un archivo que se puede revisar en un pull request, con cambios rastreables.
¿Se puede traer diseño desde Figma?
Sí, con matices. Pencil afirma que se pueden copiar y pegar frames directamente desde Figma, manteniendo vectores, texto y estilos. Su documentación añade una limitación importante: las imágenes no se copian desde Figma en ese flujo y recomiendan usar SVG o reimportarlas.
¿Es realmente gratis?
La página oficial de precios lo afirma de forma literal: “Pencil is currently free”. Eso sí: también deja claro que en el futuro podrían introducir planes o funciones de pago, con el compromiso de explicarlo antes de cobrar.
Privacidad y condiciones: lo que conviene saber antes de probarlo
Como suele ocurrir con herramientas que mezclan diseño, código e Inteligencia Artificial, la letra pequeña importa.
- En su política de privacidad, Pencil indica que en el alta recoge datos como correo electrónico, rol o puesto, herramienta de IA principal y una breve descripción de uso. También menciona recogida de datos técnicos limitados (por ejemplo, IP, versión del IDE/SO, timestamps) para operación y seguridad.
- A la vez, afirma que no almacena ni registra en sus servidores los Inputs/Outputs que se envían para procesar, y que el contenido se gestiona de forma transitoria.
- En sus términos de uso insiste en que el servicio se ofrece “tal cual”, que los outputs pueden fallar y que el usuario debe validar lo generado. También advierte de no usarlo con datos de alto riesgo sin salvaguardas y acuerdos adecuados.
En resumen: promete un enfoque “local y controlable”, pero sigue siendo una herramienta nueva, con un modelo que evoluciona rápido y donde conviene aplicar sentido común (especialmente si se trabaja con información sensible).
Preguntas frecuentes
¿Qué es Pencil, explicado fácil?
Una herramienta para diseñar pantallas dentro del editor de código y generar implementación a partir del diseño.
¿Por qué lo comparan con Figma?
Porque busca cubrir la parte de diseño de interfaces, pero integrada en el flujo de desarrollo y con los archivos viviendo en el repositorio.
¿Qué es MCP y por qué importa aquí?
Es un protocolo que permite a la IA conectar herramientas; en Pencil, sirve para que el asistente lea y modifique el lienzo de diseño y los archivos .pen.
¿Pencil es gratis de verdad?
Ahora mismo sí, según su web, aunque avisa de que en el futuro podría lanzar planes de pago.
