OpenPencil

La primera herramienta de diseño vectorial de código abierto nativa de IA del mundo.
_{Equipos de Agentes Concurrentes • Diseño como Código • Servidor MCP Integrado • Inteligencia Multimodelo}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{Haz clic en la imagen para ver el video de demostración}

`), además de un endpoint HTTP en vivo (`127.0.0.1:/mcp`) desde la app en ejecución - Automatización de diseño desde la terminal: leer, crear y modificar archivos `.op` a través de cualquier agente compatible con MCP - **Flujo de diseño por capas** — `design_skeleton` → `design_content` → `design_refine` para diseños multisección de mayor fidelidad - **Recuperación segmentada de prompts** — carga solo el conocimiento de diseño que necesitas (schema, layout, roles, icons, planning, etc.) - Soporte multipágina — crear, renombrar, reordenar y duplicar páginas mediante herramientas MCP **Generación de Código** - React + Tailwind CSS, HTML + CSS, CSS Variables - Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native ## CLI — `op` Instala globalmente y controla la herramienta de diseño desde tu terminal: ```bash brew install zseven-w/openpencil/op ``` ```bash op start # Iniciar la app de escritorio op start --headless --file design.op # Iniciar servidor headless op design @landing.txt # Diseño por lotes desde archivo op design @ui.js # JavaScript aislado con bucles op insert '{"type":"rectangle"}' # Insertar un nodo op import:figma design.fig # Importar archivo de Figma cat design.dsl | op design - # Entrada por pipe desde stdin ``` Admite cadenas inline, `@filepath` y stdin (`-`). Funciona con la app de escritorio, el servidor web o el servidor headless basado en archivos. Consulta la [referencia de comandos CLI](./crates/op-cli/src/usage.txt). **Habilidad LLM** — instala el plugin [OpenPencil Skill](https://github.com/ZSeven-W/openpencil-skill) para enseñar a agentes IA a diseñar con `op`. Usa `op install` para los agentes detectados o `op install --target codex` para un destino específico. ## Características **Lienzo y Dibujo** - Lienzo infinito con panorámica, zoom, guías de alineación inteligentes y ajuste - Rectángulo, Elipse, Línea, Polígono, Pluma (Bezier), Frame, Texto - Operaciones booleanas — unión, resta, intersección con barra de herramientas contextual - Selector de iconos (Iconify) e importación de imágenes (PNG/JPEG/SVG/WebP/GIF) - Diseño automático — vertical/horizontal con gap, padding, justify, align - Documentos multipágina con navegación por pestañas **Sistema de Diseño** - Variables de diseño — tokens de color, número y texto con referencias `$variable` - Soporte multitema — múltiples ejes, cada uno con variantes (Claro/Oscuro, Compacto/Cómodo) - Sistema de componentes — componentes reutilizables con instancias y sobreescrituras - Sincronización CSS — propiedades personalizadas autogeneradas, `var(--name)` en la salida de código - UIKits reutilizables — importar/exportar kits de componentes desde archivos `.pen` **IA y Agentes** - Prompt-a-lienzo con generación en streaming y descomposición espacial dirigida por orquestador - Equipos de agentes concurrentes — varios diseñadores trabajan en distintas secciones en paralelo, con indicadores en el lienzo por miembro - Flujo de trabajo por capas — `design_skeleton` → `design_content` → `design_refine` con prompts enfocados por fase - Guías de estilo — más de 50 estilos integrados (glassmorphism, brutalist, retro, etc.) con coincidencia difusa basada en etiquetas, integrada en planificación y generación - Perfiles multi-modelo — adapta automáticamente el modo de pensamiento, el esfuerzo y la forma del prompt por nivel de modelo - Runtime de agente integrado (Rust) + proveedores Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini - Passthrough en formato Anthropic para proveedores de LLM chinos — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans **Integración con Git** - Asistente de clonado con autenticación SSH / HTTPS y gestión de claves SSH - Selector de ramas — crear, cambiar, eliminar y fusionar, todo desde el panel de Git - Cascadas de pull / push con reintento de autenticación y manejo de non-fast-forward - Fusión a tres vías en modo carpeta con seguimiento del estado `MERGE_HEAD` en disco - Panel de conflictos con tarjetas a tres vías por nodo / campo, editor JSON inline, acciones en bloque y bloque de diff inline - UI de configuración remota y claves SSH; i18n en 15 idiomas en toda la superficie de Git **Exportación** - Exportación de lienzo — PNG, JPEG, WEBP, PDF (`Cmd+Shift+P`) - Exportación de código — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native - Pipeline incremental de codegen MCP — `codegen_plan`, `codegen_submit_chunk`, `codegen_assemble`, `codegen_clean` **Importación de Figma** - Importa archivos `.fig` conservando diseño, rellenos, trazos, efectos, texto, imágenes y vectores **Aplicación de Escritorio** - Nativo en macOS, Windows y Linux — un único binario autocontenido (winit + GPU Skia, sin Electron) - Asociación de archivos `.op` — doble clic para abrir, bloqueo de instancia única - Verificación de actualizaciones en segundo plano contra GitHub Releases - Menú de aplicación nativo con Guardar como, Abrir recientes y un diálogo de cambios sin guardar al cerrar - Persistencia de archivos recientes ## Stack Tecnológico | | | | ---------------------- | -------------------------------------------------------------------------------------------------- | | **Núcleo** | Workspace Rust (`crates/`) — estado del editor, widgets, hosts, MCP, IA, codegen | | **Renderizado** | GPU Skia en todas partes — `skia-safe` (GL) en nativo, CanvasKit (WASM/WebGL2) en el navegador | | **Framework de UI** | jian — framework de UI GPU-Skia en Rust puro incluido como vendor: widgets, layout, eventos, recarga en caliente (`vendor/jian`) | | **Ventanas** | winit (fork `casement` incluido como vendor) | | **Escritorio** | Binario nativo `openpencil-desktop` — sin motor de navegador | | **SDK web** | `op-web-sdk` + adaptadores React 19 / Vue 3 — visor `.op` de solo lectura (TypeScript) | | **CLI** | `op` — control desde terminal, DSL de diseño por lotes | | **IA** | Runtime de agente Rust integrado · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK | | **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (SDK web) | | **Formato de archivo** | `.op` — basado en JSON, legible por humanos, compatible con Git | ## Ecosistema OpenPencil forma parte de una familia de herramientas en Rust puro, nativas de IA, de **[ZSeven-W](https://github.com/ZSeven-W)**. Se combinan: `jian` renderiza OpenPencil, `agent-rs` ejecuta sus agentes, `noema` recuerda, y `zode` diseña desde la terminal. | Proyecto | Qué es | | -------- | ------ | | **[Zode](https://github.com/ZSeven-W/zode)** | Asistente de código open-source y nativo de IA para tu terminal — una TUI de Rust rápida (`ratatui`) que lee tu código, ejecuta comandos, busca archivos y gestiona git. Controla OpenPencil mediante MCP. | | **[agent-rs](https://github.com/ZSeven-W/agent-rs)** | Un runtime asíncrono en Rust puro para desplegar agentes LLM — multiproveedor, con capacidad de usar herramientas de extremo a extremo, permisos estructurados, MCP real, cero `unsafe`. Impulsa el runtime de agente integrado de OpenPencil (`vendor/agent`) y Zode. | | **[jian](https://github.com/ZSeven-W/jian)** | Framework de UI GPU-Skia en Rust puro — widgets, layout, eventos y recarga en caliente en una sola stack. Convierte un documento declarativo `.op` en una app nativa, controlable por IA, sin runtime de JS, sin DOM, sin Electron. El framework de UI de OpenPencil (`vendor/jian`). | | **[noema](https://github.com/ZSeven-W/noema)** | Sistema de memoria local-first y no vectorial para agentes de código. Memoria duradera como archivos inspeccionables, una cola de revisión para las nuevas entradas, y recuperación léxica (sin embeddings) — funciona en Zode, Codex, Claude Code y runtimes MCP. | ## Por Qué Rust OpenPencil fue reescrito desde cero en **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). La reescritura está completa — el editor TypeScript + Electron se retiró en `v0.7.5`, y el workspace Rust de este repositorio es el producto: un único núcleo nativo considerablemente más pequeño y rápido, que funciona en más plataformas desde una sola base de código. | | TypeScript + Electron (retirado, `v0.7.5`) | Rust (hoy) | | ------------------------ | --------------------------------------------------- | --------------------------------------------------------------------------- | | **Entorno de escritorio** | Electron — incluye Chromium + Node.js | Ventana nativa (`winit` + GPU Skia), sin motor de navegador | | **Tamaño en escritorio** | Runtime completo de Chromium por instalación | Binario único autocontenido — **55.5 MB** | | **Carga web** | Bundle JS + WASM | **8.2 MB** wasm / **2.18 MB** gzip sobre la red | | **Renderizado** | CanvasKit/Skia en web | Un único backend Skia acelerado por GPU en **cada** plataforma | | **Memoria** | Pausas del JavaScript GC | Sin GC — ownership de Rust, latencia predecible | | **Base de código** | Web stack + Electron | Un workspace Rust: editor · CLI · MCP · AI · codegen · Figma · Git | | **Plataformas** | Web + escritorio, dos stacks separados | Escritorio (macOS/Win/Linux) · móvil (iOS/Android) · navegador — un núcleo | **Mejoras medidas** - **Tamaño mínimo** — toda la aplicación de escritorio es un único binario nativo de **55.5 MB** en lugar de un motor de navegador empaquetado más un runtime de Node. La build web es **8.2 MB** sin comprimir / **2.18 MB** gzip tras dividir el catálogo de iconos (−48% sobre la red). - **Escala con documentos grandes** — un lienzo en vivo con **10,000 nodos** (auto-layout anidado, cuatro niveles de profundidad) escribe, lee y captura el layout **sin panics y con ~0% de CPU en reposo**; una captura completa del layout de los 10k nodos se completa en **~0.68 s**. - **Interacción rápida** — el pan/zoom ya no re-serializa el documento en cada fotograma (una sola corrección en la ruta crítica redujo el CPU en wheel-zoom de **~69% a ~0%**); los arrastres actualizan la escena de forma incremental, la medición de texto se almacena en caché y los repintados se fusionan en uno por fotograma. - **Un núcleo, cada pantalla** — el mismo estado del editor y el mismo backend de renderizado compilan a escritorio nativo, móvil y navegador mediante WASM, sin reimplementaciones paralelas que mantener sincronizadas. - **GPU Skia en todas partes** — el renderizado nativo usa `skia-safe` sobre un contexto GL; el navegador renderiza mediante CanvasKit sobre WebGL2 — el mismo código de dibujo, la misma salida. - **Accesibilidad nativa** — AccessKit en macOS, Windows y Linux, más un espejo DOM en web, en lugar de depender del árbol de accesibilidad del navegador. - **Un workspace con tipado estricto** — el host MCP, CLI, proveedores de AI, generación de código, importación de Figma y la integración con Git conviven en un único workspace Rust, con `cargo-deny` vigilando la cadena de suministro en CI. > **Estado:** el editor TypeScript se retiró en `v0.7.5` y solo vive en el historial de git; este repositorio es el workspace Rust. El producto en Rust está en desarrollo activo (consulta la Hoja de Ruta más abajo). ## Estructura del Proyecto ```text openpencil/ ├── crates/ Workspace Rust — el producto │ ├── op-editor-core/ Estado canónico del editor `.op` (PenDocument) + EditorCommand + variables de diseño │ ├── op-editor-ui/ Widgets independientes de plataforma + fachada RenderBackend (compatible con wasm32) │ ├── op-editor-host-core/ Máquinas de estado de host sin transporte, compartidas por todos los hosts │ ├── op-host-native/ Lib de host nativo — winit + skia-safe GL (escritorio + móvil) │ ├── op-host-web/ Bundle para navegador — cdylib wasm32, renderizador CanvasKit │ ├── op-host-desktop/ Binario de escritorio `openpencil-desktop`; también el daemon `--serve-web` │ ├── op-host-services/ Lib del daemon headless serve-web / MCP │ ├── op-host-web-server/ Binario ligero de servidor web sin GL │ ├── op-cli/ Herramienta CLI — comando `op` │ ├── op-mcp/ Servidor MCP — herramientas, diseño por lotes, flujo por capas │ ├── op-ai/ Proveedores de IA, runtime de chat, transmisión │ ├── op-ai-skills/ Motor de habilidades de IA (carga de prompts por fases) │ ├── op-orchestrator/ Orquestación de equipos de agentes concurrentes │ ├── op-codegen/ Generadores de código (React, HTML, Vue, Flutter, ...) │ ├── op-figma/ Parser y conversor de archivos .fig de Figma │ ├── op-git/ Integración con Git — clonar, ramas, push/pull, fusión │ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n / │ op-config-store / op-process-io / op-acp / op-smoke / ... ├── packages/ Workspace del SDK web (Bun) │ ├── op-web-sdk/ SDK del visor web `.op` de solo lectura (envuelve el bundle wasm) │ ├── op-web-sdk-react/ Adaptador para React 19 │ └── op-web-sdk-vue/ Adaptador para Vue 3 ├── vendor/ Subsistemas incluidos como vendor (submódulos git) │ ├── jian/ Framework de UI GPU-Skia — widgets/render/eventos │ ├── casement/ Fork de winit │ └── agent/ Runtime de agente Rust multi-producto (agent-rs) └── .githooks/ Comprobación pre-commit de desviación de versiones ``` ## Atajos de Teclado | Tecla | Acción | | Tecla | Acción | | ----------- | --------------------- | --- | ------------- | ---------------------------- | | `V` | Seleccionar | | `Cmd+S` | Guardar | | `R` | Rectángulo | | `Cmd+Z` | Deshacer | | `O` | Elipse | | `Cmd+Shift+Z` | Rehacer | | `L` | Línea | | `Cmd+C/X/V/D` | Copiar/Cortar/Pegar/Duplicar | | `T` | Texto | | `Cmd+G` | Agrupar | | `F` | Frame | | `Cmd+Shift+G` | Desagrupar | | `P` | Herramienta pluma | | `Cmd+Shift+P` | Exportar (PNG/JPG/WEBP/PDF) | | `H` | Mano (panorámica) | | `Cmd+Shift+C` | Panel de código | | `Del` | Eliminar | | `Cmd+Shift+V` | Panel de variables | | `[ / ]` | Reordenar | | `Cmd+J` | Chat de IA | | Flechas | Mover 1px | | `Cmd+,` | Configuración de agente | | `Cmd+Alt+U` | Unión booleana | | `Cmd+Alt+S` | Resta booleana | | `Cmd+Alt+I` | Intersección booleana | | `Cmd+Shift+S` | Guardar como | ## Scripts ```bash # Product (Rust — run from the repo root) cargo build --workspace # Build all crates (add --release for prod) cargo test --workspace # Run all tests cargo check --workspace # Type check cargo clippy --workspace --all-targets -- -D warnings # Lint cargo fmt --all # Format bash scripts/start-web-rust.sh # Web dev server (wasm bundle + headless host) cargo run -p op-host-desktop # Desktop app (binary: openpencil-desktop) cargo run -p op-cli -- # CLI (binary: op) # Web SDK / JS tooling (run from packages/) cd packages && bun run lint # Lint the web SDK (oxlint); also: bun run format cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon catalog assets # Sincronización de versiones (ejecutar desde la raíz del repositorio) scripts/sync-version.sh # Sync all managed versions from root Cargo.toml tools/check-version-sync.sh # Verify all managed versions match root Cargo.toml ``` ## Contribuir ¡Las contribuciones son bienvenidas! Consulta [CLAUDE.md](./CLAUDE.md) para detalles sobre la arquitectura y el estilo de código. 1. Haz fork y clona el repositorio 2. Activa la comprobación de desviación de versiones: `git config core.hooksPath .githooks` 3. Crea una rama: `git checkout -b feat/my-feature` 4. Ejecuta las verificaciones: `cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings` 5. Haz commit con [Conventional Commits](https://www.conventionalcommits.org/): `feat(canvas): add rotation snapping` 6. Abre un PR contra `main` ## Hoja de Ruta - [x] Variables de diseño y tokens con sincronización CSS - [x] Sistema de componentes (instancias y sobreescrituras) - [x] Generación de diseño con IA y orquestador - [x] Integración con servidor MCP con flujo de diseño por capas - [x] Soporte multipágina - [x] Importación de Figma `.fig` - [x] Operaciones booleanas (unión, sustracción, intersección) - [x] Perfiles de capacidad multimodelo - [x] Workspace de Cargo con crates de Rust y paquetes del SDK web reutilizables - [x] Editor Rust para escritorio y web - [x] Herramienta CLI (`op`) para control desde terminal - [x] Runtime de agentes Rust integrado con soporte multi-proveedor - [x] i18n — 15 idiomas - [x] SDKs de visualización basados en wasm para JavaScript, React y Vue - [x] Style Guides con coincidencia por etiquetas y herramientas MCP - [x] Agent Teams concurrentes con delegación e indicadores en el lienzo - [x] Integración con Git (clonar, ramas, push/pull, fusión a tres vías en modo carpeta) - [x] Exportación del lienzo (SVG / PNG / JPEG / WEBP / PDF) - [ ] Edición colaborativa - [ ] Sistema de plugins ## Colaboradores ## Patrocinadores OpenPencil es gratuito y de código abierto. El desarrollo se financia con quienes lo encuentran útil — gracias por mantener abierto el lienzo. Gracias a **[MrQyun](https://github.com/mrqyun)** — ¿quieres ver tu nombre aquí? **[Conviértete en patrocinador →](https://github.com/sponsors/ZSeven-W)** ## Comunidad Únete a nuestro Discord — Haz preguntas, comparte diseños y sugiere funciones. **Comunidad reconocida: [LINUX DO](https://linux.do/)** ## Star History ## Evaluaciones [](https://mseep.ai/app/zseven-w-openpencil) ## Licencia [MIT](./LICENSE) — Copyright (c) 2026 ZSeven-W