Diseña sin ataduras.
Un editor de diseño de código abierto que abre tus archivos de Figma, funciona en tu equipo y permite que tú o tu agente de IA controléis cada capa.
Abre lo que ya tienes
OpenPencil lee archivos .fig directamente: páginas, componentes, instancias, variables y auto layout llegan como capas editables, y puedes volver a guardar en .fig. Pega SVG o abre HTML y CSS, y también se convierten en capas, dispuestas como las dispone un navegador.
Este es el propio tour de la app, un archivo .fig real. Abre un capítulo en las capas y explora.
Diseña con herramientas de verdad
Auto layout, restricciones, rellenos, trazos, efectos y tipografía, con los controles donde los esperas. Los componentes tienen slots: una instancia conserva el diseño y aporta su propio contenido. Todo se puede deshacer y nada espera a un servidor.
Pasa el puntero por la portada seleccionada y arrastra una esquina para redondearla. Los otros reproductores traen su propia portada por el slot Artwork.
Componentes que funcionan
Dale a un componente un comportamiento, como un interruptor, una casilla, un deslizador, pestañas o un campo de texto, y la vista previa lo ejecuta como un control real de Reka UI. Las variantes pasan a ser sus estados, y los mismos componentes se exportan a Storybook con controles en los que se puede hacer clic.
Este lienzo está en vista previa: pulsa play, arrastra la barra de progreso, activa el modo aleatorio. Sal de la vista previa para editar.
Las variables son tokens de diseño
Colores, espaciados y tipografía viven en colecciones con modos y se editan como tokens. El código exportado escribe los valores vinculados como propiedades personalizadas de CSS, así que el código usa los mismos nombres que el diseño.
Cada reproductor lee la colección Theme en su propio modo. Cambia el valor de un token y ambos lo siguen.
Rellenos que se mueven
Un shader es un relleno como cualquier otro: elígelo en el selector de relleno, apila efectos, ajusta sus controles o pega un preset de shaders.com. Los archivos guardan un fotograma fijo, así que se abren en cualquier parte, y la vista previa lo reproduce.
Este lienzo está en vista previa, por eso los shaders se mueven. Sal de la vista previa, selecciona un cuadrado y abre su relleno.
Linting
OpenPencil revisa el diseño mientras trabajas: contraste, texto demasiado pequeño, nombres por defecto, capas ocultas y vacías, grupos sobrantes. Los problemas se marcan en el lienzo, muchos se corrigen con un clic, y las mismas reglas funcionan en la CLI y para los agentes.
Haz clic en una marca del lienzo o aplica una corrección de la lista.
Diseña con IA, con tus claves
Pide lo que necesitas con tus propias palabras y el agente edita el documento con las mismas herramientas que tú, mostrando su trabajo en el lienzo a medida que llega. Conecta cualquier proveedor con tu propia clave o usa el agente de programación que ya utilizas.
Un turno grabado se reproduce con el bucle real del agente. Mira cómo se construye el lienzo mientras llega.
Funciona con
- Claude Code
- Cursor
- Windsurf
- Codex
- Gemini CLI
- y cualquier cliente MCP
Trabajad juntos, personas y agentes
Comparte un enlace y todos editan el mismo documento, de igual a igual, con cursores en vivo, modo seguir, comentarios fijados a las capas y llamadas de voz. Los agentes de IA se unen igual: todos en la sala los ven construir mientras transmiten.
Las dos pantallas son tuyas. Arrastra una capa en una y mira cómo se mueve en la otra; después pregunta al agente.
Del diseño al código
Cada selección es un componente de Vue o React, con las variantes como props y Reka UI o Radix detrás de los interactivos, o HTML, Tailwind y design JSX con las variables escritas como tokens. Los componentes se exportan como historias de Storybook, y el design JSX sigue vinculado al lienzo: edítalo y el lienzo lo sigue.
Cambia a React, HTML o design JSX, o selecciona otra capa.
Automatízalo todo
La CLI openpencil trabaja sobre un archivo sin que la aplicación esté abierta, o controla la aplicación que tienes en marcha. Inspecciona un documento, consúltalo con XPath, revísalo con el linter, expórtalo o ejecuta código de plugins de Figma con eval. El servidor MCP da a los agentes el mismo alcance por stdio o HTTP.
Ejecuta un comando y observa el lienzo.
24 comandos
- analyze
- convert
- diff
- documents
- eval
- export
- find
- fonts
- formats
- import
- info
- libraries
- lint
- node
- pages
- query
- redo
- selection
- settings
- tokens
- tool
- tree
- undo
- variables
122 herramientas MCP
Crear, dar estilo, maquetar, inspeccionar y exportar. Todas están también disponibles para el agente integrado.
Intégralo en tu propio producto
OpenPencil es tanto un conjunto de herramientas como una aplicación: un motor independiente del framework, un SDK de Vue sin interfaz y paquetes separados para el grafo de escena y los formatos de archivo. Incrusta un lienzo en tu producto, renderiza y revisa diseños en CI o crea otro editor sobre el mismo motor. Cada lienzo de esta página es ese SDK funcionando dentro de un sitio de documentación.
El código junto al lienzo es todo lo que hace falta para montar uno.
Tus archivos siguen siendo tuyos
- Primero en local
- Los documentos son archivos en tu disco. Sin cuenta, sin servidor y sin necesidad de internet.
- Tu almacenamiento
- Sincroniza mediante tu propio bucket compatible con S3 cuando lo necesites.
- Formatos abiertos
- Exporta a .fig, PDF, PPTX, SVG, HTML y JSX. Siempre puedes irte.
- Licencia MIT
- El editor, el motor de renderizado, el códec .fig y la CLI.
OpenPencil Cloud
El espacio de diseño de tu equipo, alojado por nosotros. Todos editan los mismos archivos en directo, los comparten con un enlace y diseñan con IA, sin nada que instalar ni mantener. Tus archivos siguen abiertos: expórtalos como .fig cuando quieras.
OpenPencil Cloud se paga en $OPENPENCIL — asientos, sincronización en vivo, bibliotecas compartidas e IA salen de un único saldo de tokens. El pago se abre con la dirección del contrato en la franja $OPENPENCIL.
- Sincronización del equipo en tiempo real
- Cada cambio llega a todo el equipo al instante, en cualquier dispositivo.
- Enlaces para compartir y comentarios
- Envía un enlace para revisar un diseño y coméntalo sobre el lienzo.
- Bibliotecas del equipo
- Publica componentes, estilos y tokens una vez y úsalos en todos los archivos.
- IA alojada
- Agentes que diseñan contigo, sin claves de API que gestionar.
- SSO y controles de administración
- Inicio de sesión único, roles y control de quién ve qué.
Hoja de ruta
- Publicado
Componentes interactivos y vista previa
Variables como tokens de diseño
Linting con correcciones en un clic
Agentes de IA como colaboradores, con modo seguir
Revertir, regenerar y editar turnos de IA
Código vinculado a las capas
Diff visual y parches
Comentarios y llamadas de voz en salas compartidas
Componentes de Vue y React en la pestaña Código
Importación de SVG y HTML como capas editables
Rellenos con shaders
Design tokens W3C
Un recorrido guiado por el editor
Listas y estilos para cualquier tramo de texto
- Ahora
Storybook con componentes reales
Historias que usan Reka UI en Vue y Radix UI en React.
Creación de componentes
Edición de variantes más rápida y selección dentro de componentes.
- Después
OpenPencil autoalojado
Todo el espacio de trabajo dentro de tu propia red: sincronización, uso compartido, comentarios y bibliotecas de equipo sin enviar un archivo a nadie más.
- Tu almacenamiento
- Los documentos permanecen en tu bucket, en tu región.
- Tu identidad
- Inicio de sesión con tu proveedor OIDC o SSO, con roles.
- Tu red
- Un relé de colaboración que funciona detrás de tu cortafuegos.
- Tu operación
- Despliegue guiado, actualizaciones, copias de seguridad y retención.
OpenPencil Cloud
El espacio alojado para equipos: sincronización en directo, uso compartido, bibliotecas e IA, sin nada que mantener.
OpenPencil Cloud se paga en $OPENPENCIL — asientos, sincronización en vivo, bibliotecas compartidas e IA salen de un único saldo de tokens. El pago se abre con la dirección del contrato en la franja $OPENPENCIL.
Historial de versiones
Instantáneas automáticas, puntos de control con nombre y restauración.
- Más adelante
Sistemas de diseño gobernados
Proponer, revisar, publicar y migrar.
Editor incrustable
Lleva el editor de esta página a tu propio producto.
El token $OPENPENCIL
OpenPencil es código abierto; la red que lo sostiene no es gratuita. Los turnos de IA, los renders en la nube y el registro de plugins son vías de pago, y $OPENPENCIL es la única moneda con la que se compran. Lanzamiento en Solana.
Muy pronto — lanzamiento en Solana- Turnos de IA y renders en la nube
- Cada trabajo medido en OpenPencil Cloud — turnos de IA, renders headless, exportaciones — se tarifa y se paga en $OPENPENCIL. Sin pasarela en fiat, sin licencias por asiento.
- Mercado de plugins y plantillas
- Plugins, sets de iconos y plantillas de documento se liquidan en $OPENPENCIL: el comprador paga el token y el autor lo cobra on-chain.
- Staking para bibliotecas gobernadas
- Haz staking de $OPENPENCIL para desbloquear sistemas de diseño gobernados: flujos de revisión y publicación, trazas de auditoría y bibliotecas compartidas.
- Las comisiones recompran el token
- Todas las comisiones que recauda la red van a una recompra on-chain de $OPENPENCIL: el uso del editor apunta al token que lo paga.
Solana · token SPL. Lanzamiento inminente — esto no es una oferta ni un valor; $OPENPENCIL paga el uso de la red. La dirección del contrato aparecerá en la franja de arriba el día del lanzamiento.