En las últimas semanas ha empezado a circular con fuerza en redes una idea provocadora: “ha salido el Figma de Claude Code”. El eslogan, popularizado en publicaciones virales, apunta a Pencil (pencil.dev), una herramienta que se presenta como un lienzo de diseño dentro del propio entorno de desarrollo, conectada a asistentes de Inteligencia Artificial mediante MCP (Model Context Protocol) y pensada para eliminar el clásico “handoff” entre diseño y programación.
El planteamiento de Pencil es directo: en lugar de diseñar en una aplicación separada y exportar assets para que el equipo de desarrollo rehaga la interfaz, el diseño vive en el repositorio junto al código, se versiona con Git y puede ser modificado por agentes de IA con permisos de lectura y escritura sobre el canvas.
Qué es Pencil y quién está detrás
Pencil aparece descrito como un “agent-driven MCP canvas” construido sobre un formato de diseño abierto. En la ficha de a16z Speedrun figura como compañía fundada en 2025, con sede en California y respaldada por el programa Speedrun (cohorte 005). El fundador que aparece en esa página es Tom Krcha.
Aunque en redes se lo vincule a Claude Code por su integración, Pencil no es una herramienta oficial de Anthropic: se integra con Claude Code y otros asistentes, pero se distribuye como producto independiente (High agency, inc., según su propia página de precios).
Lo diferencial: un servidor MCP local con “write access” al diseño
La clave técnica de Pencil está en cómo se conecta con la IA. Su documentación explica que Pencil usa MCP como “API” para que los asistentes puedan leer y modificar archivos .pen programáticamente. En ese esquema, el servidor MCP de Pencil corre en local, sin dependencia de nube para operar con el diseño, y el usuario mantiene el control: “la IA sugiere y el usuario aprueba”.
Pencil enumera compatibilidad MCP con varias herramientas de IA, entre ellas:
- Claude Code (CLI e IDE)
- Claude Desktop
- Cursor
- Windsurf (Codeium)
- Codex CLI (OpenAI)
- Antigravity IDE
- OpenCode CLI
Este enfoque conecta con una tendencia mayor: los flujos “agentic”, donde el asistente no solo escribe texto, sino que opera herramientas (en este caso, un canvas vectorial) para generar interfaces, iterar variantes y mantener consistencia con el código.
El formato .pen: diseño como datos legibles y versionables
Si el MCP es la “tubería”, el otro pilar es el formato. Pencil almacena los diseños en archivos .pen, definidos como un formato basado en JSON, estructurado y legible, y “version-control friendly”.
La documentación técnica describe .pen como un árbol de objetos (similar en espíritu a HTML o SVG), donde cada entidad gráfica del canvas tiene un id único y un type (por ejemplo, rectangle, frame, text, etc.). También advierte que la documentación es “viva” y que pueden introducir cambios rompientes en el formato, señalando una TypeScript schema como referencia exhaustiva.
Para desarrolladores, esto abre una posibilidad interesante: tratar el diseño como artefacto auditable, con diffs textuales, revisiones en PR y flujos de rama/merge parecidos a los del código.
“Design as code”: Git, diffs y merges para UI
Pencil empuja explícitamente la filosofía “Design as Code”. Su documentación recomienda commitear .pen como archivos de código, ver diffs en Git y ramificar/mergear diseños junto con cambios de implementación. También sugiere buenas prácticas clásicas: commits frecuentes y mensajes descriptivos.
En la práctica, esto puede resultar especialmente atractivo para equipos pequeños (o product builders en solitario) donde la separación rígida diseño/desarrollo genera más fricción que valor: un mismo flujo puede producir pantalla, componentes y exportar código, con la IA ayudando a mantener coherencia entre ambos mundos.
De diseño a código (y de código a diseño): el “ida y vuelta” como promesa
En la sección “Design ↔ Code”, la documentación describe un flujo básico: diseñar en Pencil, guardar el .pen dentro del workspace del proyecto, abrir el panel de prompt (Cmd/Ctrl + K) y pedir generación de código (por ejemplo, React, TypeScript o Next.js). También plantea el camino inverso: recrear visualmente componentes que ya existen en el repositorio, de modo que el canvas refleje estructura, layout y estilos del código.
Este “ida y vuelta” es justo lo que, si funciona bien, puede romper el punto más doloroso de los handoffs tradicionales: el desfase entre lo que está en Figma y lo que acaba en producción.
¿Solo macOS y Linux? En realidad, también Windows (con matices)
En publicaciones virales se repite que Pencil está para macOS y Linux, pero su propia página de descargas muestra:
- macOS (Apple Silicon e Intel)
- Linux (AppImage recomendado y tarball; con builds x64 y ARM)
- Windows (x64 disponible; ARM64 “coming soon”)
Además, ofrece extensiones para VS Code (Marketplace) y acceso vía Open VSX, junto con menciones específicas para Cursor, Antigravity y Windsurf.
Precio: gratuito hoy, con puerta abierta a planes de pago
Otro punto que ha ayudado a su difusión es el precio. Pencil afirma que “actualmente es gratis”, aunque añade que en el futuro podría introducir funciones o planes de pago, prometiendo claridad antes de cobrar.
Lo que realmente está en juego: el “diseño agéntico” como capa del IDE
Pencil no compite solo con Figma como herramienta de diseño; compite con una dinámica de trabajo. Su tesis es que, si el diseño vive en el repo y la IA puede operar sobre él con herramientas, la interfaz deja de ser un artefacto externo y pasa a ser parte del sistema que se construye, se revisa y se despliega.
Ese cambio trae ventajas evidentes (velocidad, coherencia, menos reprocesos), pero también obliga a pensar en nuevos puntos de control: quién puede modificar .pen, cómo se revisan diffs, cómo se evitan cambios masivos no deseados y cómo se gobierna la consistencia con el diseño system. La propia documentación insiste en que el usuario “aprueba” los cambios y que el servidor MCP opera localmente, lo que apunta a un modelo más controlable que una edición remota opaca.
Preguntas frecuentes
¿Qué es Pencil y para quién tiene sentido?
Es un canvas vectorial dentro del IDE para diseñar y generar código, pensado para desarrolladores, equipos pequeños y flujos donde diseño y código se iteran juntos.
¿Qué es un archivo .pen?
Es el formato de diseño de Pencil: un JSON estructurado que describe un árbol de objetos gráficos, versionable en Git.
¿Cómo se integra con Claude Code, Cursor o Codex?
Mediante MCP: Pencil expone herramientas para que el asistente lea y modifique .pen a través de un servidor MCP local.
¿Pencil es gratis?
Según su página oficial, actualmente sí, aunque contempla posibles funciones o planes de pago en el futuro.
