El “handoff” entre diseño y desarrollo lleva años siendo un cuello de botella: el diseñador trabaja en una herramienta externa, el equipo de desarrollo reinterpreta la maqueta y, en el camino, se pierden detalles de espaciado, estilos y componentes. En ese contexto ha irrumpido Pencil (pencil.dev), una herramienta que se está moviendo rápido en comunidades de desarrollo porque propone una idea muy concreta: diseñar sin salir del IDE y guardar ese diseño en el propio repositorio como un archivo versionable.
En redes ya se le ha llegado a bautizar como “el Figma de Claude Code”, pero Pencil no se presenta como producto oficial de Anthropic. Su apuesta real está en otra parte: un canvas vectorial integrado en editores como VS Code y Cursor, con un formato abierto de diseño y una integración profunda con asistentes de IA a través de MCP (Model Context Protocol).
Qué es Pencil, en términos operativos
Pencil se define como una herramienta de diseño vectorial “en el entorno de desarrollo” (no en una pestaña del navegador) y orientada a evitar el cambio de contexto: diseño y código quedan a un clic, dentro del mismo proyecto. Su web lo describe como un “agent-driven MCP canvas” y recalca dos puntos: diseño con precisión de píxel y diseño como código (archivos en el repo, listos para Git).
Para sysadmins y desarrolladores, lo relevante no es el eslogan, sino el modelo de trabajo:
- Los diseños se guardan como archivos
.penen el repositorio. - Esos archivos son JSON estructurado, pensados para ser legibles y amigables con control de versiones.
- La IA no solo “lee” el diseño: puede modificarlo a través de herramientas MCP cuando Pencil está en ejecución.
La pieza clave: .pen como formato abierto y “mergeable”
En lugar de un fichero binario opaco, Pencil utiliza .pen, un formato que su documentación describe como:
- JSON (estructurado y legible),
- portable,
- y compatible con flujos Git como si fuese un archivo de código más.
Esto abre un terreno interesante para ingeniería: un cambio de UI deja de ser una captura o un enlace, y pasa a ser un diff revisable en una PR. En equipos con disciplina de revisión, esa diferencia es enorme: el diseño entra en el circuito de CI/CD (al menos como artefacto auditado), y no se queda fuera de los controles habituales.
Pencil también advierte de que su documentación de formato está viva y que pueden existir cambios, pero precisamente por ser un formato abierto y textual, el riesgo se gestiona mejor que con ficheros cerrados.
MCP en local: por qué a un sysadmin le debería importar
Pencil se apoya en MCP para conectar el canvas con asistentes de IA (Claude Code, Cursor, Codex CLI y otros). En su documentación, MCP se explica como una API para que la IA pueda leer y modificar archivos .pen programáticamente.
El detalle importante para sistemas es este: el servidor MCP de Pencil corre en local. Según la guía de integración, cuando Pencil está abierto:
- El servidor MCP se levanta automáticamente.
- La IA se conecta vía MCP.
- El asistente puede usar herramientas para leer/modificar/generar diseños.
- El usuario mantiene control mediante aprobación de cambios.
En la práctica, esto reduce el miedo habitual de “subir el diseño (o el repo) a una nube externa para que la IA lo entienda”. Pencil insiste en que no hay dependencia cloud para las operaciones del diseño a través de MCP.
Instalación y dependencias reales: “gratis”, sí… pero con matices
Pencil ofrece aplicación de escritorio y extensión:
- macOS (Apple Silicon e Intel),
- Linux (AppImage recomendado y tarball; x64 y ARM),
- Windows (x64; ARM64 “coming soon”),
- y extensiones para VS Code y Cursor, además de enlaces para otros entornos.
En precio, su web afirma que “Pencil is currently free” (es decir, actualmente es gratuito) y que en el futuro podrían aparecer planes de pago, avisando con claridad antes de cobrar.
Ahora bien, el punto que conviene subrayar para un medio técnico: sus funciones de IA están ligadas a herramientas externas. En su documentación de instalación se indica explícitamente que las funciones de IA requieren Claude Code instalado y autenticado (CLI claude). Y la sección de troubleshooting añade un clásico de helpdesk: si el IDE no conecta, la primera comprobación es “Claude Code está logueado”.
Además, la guía menciona algo que muchos equipos ya han sufrido con IDEs “AI-first”: en Cursor puede aparecer el mensaje “You need Cursor Pro”, dependiendo de las restricciones de plan/herramientas del propio Cursor. En otras palabras, el “sin suscripción” puede ser cierto para Pencil hoy, pero tu stack de IA y tu IDE podrían imponer condiciones por separado.
Importar desde Figma: útil, pero no perfecto
Pencil presume de un puente práctico: copiar y pegar frames desde Figma para traer vectores, texto y estilos. En su documentación oficial hay una nota crucial para evitar frustraciones: las imágenes no se copian desde Figma en ese flujo. Recomiendan usar SVG o reimportar las imágenes en Pencil.
Para un equipo, esto define un límite claro: sirve para trasladar estructura visual y estilos, pero el pipeline de assets debe planificarse (iconografía, imágenes, exports).
Privacidad y cumplimiento: lo que dicen sus políticas
Pencil ha publicado una política de privacidad y unos términos de uso con mensajes muy directos para quien tenga que aprobar herramientas en una organización:
- A nivel de telemetría, declara que recoge datos técnicos limitados (IP, versión de IDE/navegador, sistema operativo, timestamps) y tokens de autenticación necesarios para operar.
- Afirma que no almacena ni registra Inputs/Outputs en sus servidores (ni en logs, telemetría, cachés o almacenamiento) y que no recoge el código fuente ni pulsaciones.
- Reconoce el uso de analítica (menciona PostHog) y servicios auxiliares (por ejemplo, correo).
- En términos, incluye una cláusula explícita sobre datos de alto riesgo: pide no introducir información sensible (por ejemplo, datos bancarios, salud, biometría, etc.) sin consentimiento previo por escrito y salvaguardas adecuadas.
- También incorpora restricciones anti-scraping y anti-entrenamiento competitivo a partir de outputs.
Para sysadmins, el enfoque razonable es el habitual: validar qué datos salen del equipo, qué dependencias se introducen (extensiones, registries), qué permisos se conceden y si el modelo “local” de MCP encaja con la política interna.
Cómo encajarlo en un flujo serio de ingeniería
Si Pencil entra en un equipo de desarrollo, hay tres recomendaciones prácticas para que no se convierta en “otro juguete”:
- Tratar
.pencomo código
PRs obligatorias, owners, revisión de diffs, y reglas sobre qué se puede tocar en UI sin aprobación. - Separar diseño experimental y diseño de producción
Ramas, tags y un “design sandbox” como repositorio espejo si el producto es crítico. - Versionar prompts y presets como configuración
Si el equipo usa agentes para generar UI, el prompt de sistema y los parámetros (estilo, kits de componentes, librerías de iconos) deberían estar en el repo como artefactos revisables, no en la memoria de cada persona.
Pencil, por diseño, invita a esto: el canvas no vive “fuera”, vive en el repo. La pregunta no es si puede encajar en ingeniería; es si el equipo está preparado para gobernar el diseño con el mismo rigor que gobierna el código.
Preguntas frecuentes
¿Qué aporta Pencil a un equipo de sysadmins y desarrolladores?
Un flujo donde el diseño se guarda en el repositorio como .pen (JSON) y puede auditarse, versionarse y revisarse como cualquier cambio de código.
¿Qué es MCP y por qué es relevante aquí?
Un protocolo para conectar asistentes de IA con herramientas; Pencil expone un servidor MCP local para que la IA pueda leer y modificar diseños .pen.
¿Pencil es realmente gratis?
Su web indica que actualmente es gratuito, pero sus funciones de IA pueden depender de herramientas/planes externos (por ejemplo, Claude Code autenticado, o restricciones del IDE).
¿Se puede importar desde Figma?
Sí: copiar y pegar frames. Pero la documentación advierte que las imágenes no se transfieren en ese paso y deben reimportarse.
