Introducción a OpenPencil
Introducción a OpenPencil
El problema con las herramientas de diseño actuales
En el ecosistema de diseño de software, Figma domina con una posición casi monopólica. Millones de equipos dependen de él para diseñar interfaces, prototipar flujos y colaborar. Sin embargo, esa dependencia tiene un costo que se hace evidente cuando se examina con detalle:
El modelo de precios es hostil a equipos pequeños y proyectos open-source. Figma cobra por editor activo, y a medida que el equipo crece, los costos escalan de forma no lineal. Para startups en etapas tempranas o proyectos de código abierto sin financiamiento, ese costo puede ser prohibitivo.
Es un servicio cerrado con datos en la nube obligatoria. Los archivos .fig son un formato propietario. No puedes abrirlos sin Figma. No puedes hacer diff en Git. No puedes integrarlo en pipelines de CI/CD sin APIs de terceros. Si Figma cae (y ha caído), tu equipo se detiene.
La IA llegó tarde y como extensión, no como núcleo. Las funciones de IA en Figma fueron añadidas sobre una arquitectura que no fue diseñada para ello. Son parches sobre un sistema legacy que tiene más de una década.
No es programable de forma nativa. Los plugins de Figma son poderosos pero limitados. No existe una CLI de primera clase, no hay integración nativa con MCP servers, no hay forma de describir un diseño en lenguaje natural desde tu terminal y obtener un archivo listo.
OpenPencil nació para resolver exactamente estos problemas.
¿Qué es OpenPencil?
OpenPencil es un editor de diseño visual open-source, AI-native y local-first. Es una alternativa a Figma construida desde cero con la premisa de que el diseño y el código deben vivir juntos, que la IA debe ser un ciudadano de primera clase en el editor, y que los archivos de diseño deben ser tan manejables como los archivos de código.
El proyecto es mantenido bajo licencia MIT, lo que significa que puedes usarlo en proyectos comerciales, modificarlo y redistribuirlo sin restricciones. No existe un plan de pago. No existe un tier premium. No hay funciones guardadas detrás de un paywall.
El stack tecnológico refleja las decisiones técnicas más modernas:
- Frontend: React 19 + TanStack Start + Tailwind CSS v4 + shadcn/ui
- Motor de canvas: CanvasKit/Skia compilado a WASM, acelerado por GPU
- Estado global: Zustand v5
- Servidor de desarrollo: Nitro
- App de escritorio: Electron 35
- IA: Vercel AI SDK v6 + Anthropic SDK + Claude Agent SDK
- Runtime: Bun + Vite 7
- Formato nativo:
.op(JSON legible, Git-friendly)
graph TD
A[OpenPencil App] --> B[Canvas Engine]
A --> C[IA Layer]
A --> D[Collaboration Layer]
A --> E[Export Engine]
B --> B1[CanvasKit/Skia WASM]
B --> B2[GPU Acceleration]
C --> C1[Vercel AI SDK v6]
C --> C2[Claude Agent SDK]
C --> C3[90+ Design Tools]
D --> D1[WebRTC P2P]
D --> D2[Yjs CRDT]
D --> D3[Trystero]
E --> E1[React + Tailwind]
E --> E2[Vue / Svelte]
E --> E3[Flutter / SwiftUI]Los 6 pilares de OpenPencil
1. Open-source MIT
Todo el código fuente está disponible públicamente. Puedes auditar cada línea, contribuir mejoras, hacer fork para necesidades específicas de tu empresa, o simplemente entender exactamente qué hace la herramienta que estás usando. No hay código propietario, no hay telemetría oculta, no hay backdoors.
Esto tiene implicaciones prácticas importantes: si el proyecto deja de tener mantenimiento activo, tu empresa puede continuar manteniendo su propia fork. Nunca estarás atrapado.
2. Compatible con Figma
OpenPencil puede importar archivos .fig directamente. Los componentes, estilos, variables y capas se traducen al formato .op con fidelidad alta. Esto elimina el miedo al cambio: no tienes que empezar desde cero si tu equipo ya tiene una librería de diseño en Figma.
La importación se realiza tanto desde la interfaz gráfica como desde el CLI:
op import:figma mi-diseño.fig3. IA integrada como ciudadano de primera clase
La IA no es un plugin ni un add-on en OpenPencil. Está integrada en el núcleo del editor. Abre el chat con Cmd+J y puedes describir en lenguaje natural lo que quieres diseñar. El agente tiene acceso a más de 90 herramientas especializadas para manipular el canvas: crear formas, aplicar fills, definir strokes, construir auto-layouts, generar variantes de componentes.
Además, OpenPencil implementa un sistema de agentes concurrentes que puede descomponer un diseño complejo en sub-tareas espaciales y ejecutarlas en paralelo, dramáticamente reduciendo el tiempo de prototipado.
4. Completamente gratuito
No existe un plan de pago. No hay funciones de IA bloqueadas. No hay límite de proyectos, colaboradores o exportaciones. El modelo de negocio del proyecto se basa en soporte empresarial y hosting gestionado para grandes organizaciones, pero la herramienta en sí es gratuita para siempre.
5. Programable y automatizable
OpenPencil expone tres superficies de programación:
- CLI
op: Herramienta de línea de comandos para automatizar tareas de diseño, importar/exportar, insertar nodos programáticamente y más. - MCP Server: Integración con Claude Code, Cursor, Windsurf y cualquier editor compatible con el protocolo MCP. Permite diseñar componentes directamente desde tu editor de código.
- API JSON: El formato
.opes JSON puro, lo que significa que puedes manipular diseños con cualquier lenguaje de programación sin SDKs especiales.
6. Local-first
Todos tus datos viven en tu máquina. No hay un servidor obligatorio. No hay sincronización forzada a la nube. Tus archivos son tuyos. La colaboración en tiempo real funciona mediante P2P directo (WebRTC), sin que tus datos pasen por ningún servidor central.
Casos de uso para desarrolladores
OpenPencil brilla especialmente en contextos donde el desarrollador y el diseñador son la misma persona, o donde el equipo quiere un flujo de trabajo más integrado entre diseño y código.
Prototipado rápido con IA
Describes un componente en lenguaje natural, el agente lo diseña en segundos, y exportas a React+Tailwind listo para integrarlo en tu proyecto. El ciclo diseño → código que antes tomaba horas ahora toma minutos.
"Crea una tarjeta de usuario con avatar circular, nombre, rol y un badge de estado online/offline"Integración en CI/CD
El CLI op permite verificar que los diseños cumplen con los tokens de diseño del sistema, exportar assets automáticamente cuando cambia el diseño, y generar código actualizado sin intervención manual.
Diseño desde el editor de código
Con el MCP server configurado en Claude Code, puedes diseñar componentes sin salir de tu entorno de desarrollo. Claude tiene acceso completo al canvas de OpenPencil y puede crear, modificar y exportar diseños mientras tú escribes código.
Proyectos open-source
Para proyectos open-source donde no hay presupuesto para herramientas de diseño, OpenPencil es la solución natural. El equipo completo puede colaborar sin costos de licencia, y los archivos .op se pueden commitear al repositorio y hacer diff como cualquier archivo JSON.
Comparación con otras herramientas
OpenPencil vs Figma
| Característica | OpenPencil | Figma |
|---|---|---|
| Precio | Gratuito (MIT) | $15-45/editor/mes |
| IA integrada | Nativa, 90+ tools | Add-on limitado |
| Open-source | Sí (MIT) | No |
| Local-first | Sí | No (cloud obligatorio) |
| CLI | Sí (op) | No oficial |
| MCP Server | Sí | No |
| Formato | .op (JSON, Git-friendly) | .fig (propietario) |
| Colaboración | P2P WebRTC | Server-centric |
| Importar Figma | Sí | — |
La diferencia más significativa para un desarrollador es la programabilidad. Figma tiene una API REST y plugins, pero no tiene una CLI de primera clase ni integración MCP. La distancia entre “tengo un diseño en Figma” y “tengo código en mi repositorio” sigue siendo grande y manual.
OpenPencil vs Sketch
Sketch es una herramienta exclusiva de macOS con un modelo de precios más razonable que Figma, pero sigue siendo propietario, no tiene IA integrada y su colaboración en tiempo real requiere servicios adicionales. Para equipos mixtos (macOS + Linux + Windows), Sketch simplemente no es una opción.
OpenPencil vs Penpot
Penpot es la alternativa open-source más establecida antes de OpenPencil. Está construida con Clojure y ClojureScript, tiene una arquitectura server-centric y su integración de IA es muy básica. OpenPencil supera a Penpot en tres áreas clave: rendimiento del canvas (Skia vs SVG), integración de IA nativa y programabilidad mediante CLI y MCP.
quadrantChart
title Posicionamiento de herramientas de diseño
x-axis Cerrado --> Open-source
y-axis No programable --> Programable
quadrant-1 Ideal para devs
quadrant-2 Open pero limitado
quadrant-3 Cerrado y rígido
quadrant-4 Cerrado pero potente
OpenPencil: [0.95, 0.95]
Penpot: [0.85, 0.30]
Figma: [0.05, 0.40]
Sketch: [0.10, 0.35]
Adobe XD: [0.05, 0.25]Arquitectura general del proyecto
Para entender OpenPencil a fondo, es útil conocer cómo están organizadas sus capas internas.
Capa de presentación
La interfaz de usuario está construida con React 19 usando el paradigma de Server Components donde aplica, y TanStack Start como meta-framework. Tailwind CSS v4 con el nuevo motor Oxide maneja el estilo, y shadcn/ui provee los componentes de UI base.
Motor de canvas
El corazón de OpenPencil es su motor de canvas basado en CanvasKit, la versión WASM de Skia (el mismo motor de renderizado que usa Chrome y Flutter). Esto permite renderizar vectores complejos con aceleración GPU, con performance comparable a aplicaciones nativas de escritorio.
El modelo de datos del canvas usa una estructura de árbol de nodos donde cada nodo puede ser un frame, grupo, rectángulo, elipse, path, texto o componente. El estado del árbol se gestiona con Zustand v5.
Capa de IA
La integración de IA usa el Vercel AI SDK v6 como capa de abstracción sobre múltiples proveedores (Anthropic, OpenAI, Google AI, OpenRouter). El Claude Agent SDK maneja la orquestación de agentes complejos.
Cuando el usuario hace una petición al chat, el sistema selecciona el nivel de agente apropiado según el proveedor configurado:
- Completo: Claude con extended thinking para diseños complejos
- Estándar: GPT-4o o Gemini para tareas rutinarias
- Básico: Llama o Qwen para respuestas rápidas y bajo costo
Capa de colaboración
La colaboración P2P se implementa sobre tres primitivas:
- WebRTC: Transporte de datos en tiempo real entre navegadores
- Trystero: Abstracción sobre WebRTC que simplifica la creación de rooms P2P
- Yjs: Implementación de CRDT (Conflict-free Replicated Data Type) que garantiza consistencia eventual sin servidor
Esta arquitectura significa que dos personas pueden colaborar en el mismo archivo con cursores en tiempo real, sin que ningún dato pase por un servidor central.
Formato .op
El formato de archivo nativo es JSON con una estructura bien definida. Un archivo simple se ve así:
{
"version": "1.0",
"pages": [
{
"id": "page-1",
"name": "Diseño principal",
"nodes": [
{
"id": "frame-001",
"type": "FRAME",
"x": 0, "y": 0,
"width": 1440, "height": 900,
"fills": [{"type": "SOLID", "color": "#FFFFFF"}],
"children": []
}
]
}
],
"variables": {},
"components": {}
}Esta estructura JSON legible tiene una consecuencia muy importante: es perfectamente compatible con Git. Puedes hacer git diff entre dos versiones de un diseño y ver exactamente qué cambió. Puedes hacer merge de cambios conflictivos con las mismas herramientas que usas para el código. Puedes revisar el historial de cambios de diseño junto al historial de cambios de código en el mismo repositorio.
El futuro del diseño integrado con código
OpenPencil representa una filosofía más amplia sobre cómo deben relacionarse el diseño y el código. En lugar de ser dos disciplinas separadas con herramientas separadas y flujos de trabajo manuales entre ellas, deben estar integradas en un único flujo continuo.
El diseñador (o el desarrollador que diseña) trabaja en el canvas. La IA ayuda a acelerar el trabajo. El resultado se exporta directamente a código de producción. Los tokens de diseño se sincronizan con las variables CSS. Los componentes de diseño tienen una correspondencia directa con los componentes de código.
OpenPencil no es solo un editor de diseño. Es la infraestructura para ese futuro integrado.
En el siguiente capítulo instalaremos OpenPencil y crearemos nuestro primer archivo de diseño.