openpencil/README.es.md

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}

Nota: Existe otro proyecto de código abierto con el mismo nombre — OpenPencil, enfocado en diseño visual compatible con Figma con colaboración en tiempo real. Este proyecto se enfoca en flujos de trabajo AI-nativos de diseño a código.

Por Qué OpenPencil

🎨 Prompt → Lienzo Describe cualquier interfaz en lenguaje natural. Obsérvala aparecer en el lienzo infinito en tiempo real con animación de transmisión. Modifica diseños existentes seleccionando elementos y chateando.	🤖 Equipos de Agentes Concurrentes El orquestador descompone páginas complejas en subtareas espaciales. Múltiples agentes de IA trabajan en diferentes secciones simultáneamente — hero, características, footer — todos transmitiendo en paralelo.
🧠 Inteligencia Multimodelo Se adapta automáticamente a las capacidades de cada modelo. Claude recibe prompts completos con pensamiento; GPT-4o/Gemini desactivan el pensamiento; modelos más pequeños (MiniMax, Qwen, Llama) reciben prompts simplificados para una salida confiable.	🔌 Servidor MCP Instalación con un clic en Claude Code, Codex, Gemini, OpenCode, Kiro o Copilot CLIs. Diseña desde tu terminal — lee, crea y modifica archivos .op a través de cualquier agente compatible con MCP.
📦 Diseño como Código Los archivos .op son JSON — legibles por humanos, compatibles con Git, comparables. Las variables de diseño generan propiedades personalizadas CSS. Exportación de código a React + Tailwind o HTML + CSS.	🖥️ Funciona en Todas Partes Aplicación web + escritorio nativo en macOS, Windows y Linux mediante Electron. Actualizaciones automáticas desde GitHub Releases. Asociación de archivos .op — doble clic para abrir.
⌨️ CLI — op Controla la herramienta de diseño desde la terminal. op design, op insert — DSL de diseño por lotes, manipulación de nodos. Entrada por pipe desde archivos o stdin. Funciona con la app de escritorio o el servidor web.	🎯 Exportación de Código Multiplataforma Exporta desde un solo archivo .op a React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native. Las variables de diseño se convierten en propiedades CSS personalizadas.

Inicio Rápido

# Instalar dependencias
bun install

# Iniciar el servidor de desarrollo en http://localhost:3000
bun --bun run dev

O ejecutar como aplicación de escritorio:

bun run electron:dev

Requisitos previos: Bun >= 1.0 y Node.js >= 18

Docker

Hay varias variantes de imagen disponibles — elige la que se ajuste a tus necesidades:

Imagen	Tamaño	Incluye
openpencil:latest	~226 MB	Solo aplicación web
openpencil-claude:latest	—	+ Claude Code CLI
openpencil-codex:latest	—	+ Codex CLI
openpencil-opencode:latest	—	+ OpenCode CLI
openpencil-copilot:latest	—	+ GitHub Copilot CLI
openpencil-gemini:latest	—	+ Gemini CLI
openpencil-full:latest	~1 GB	Todas las herramientas CLI

Ejecutar (solo web):

docker run -d -p 3000:3000 ghcr.io/zseven-w/openpencil:latest

Ejecutar con AI CLI (ej. Claude Code):

El chat de IA depende del inicio de sesión OAuth de Claude CLI. Usa un volumen Docker para persistir la sesión de inicio de sesión:

# Paso 1 — Iniciar sesión (una sola vez)
docker volume create openpencil-claude-auth
docker run -it --rm \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest claude login

# Paso 2 — Iniciar
docker run -d -p 3000:3000 \
  -v openpencil-claude-auth:/root/.claude \
  ghcr.io/zseven-w/openpencil-claude:latest

Compilar localmente:

# Base (solo web)
docker build --target base -t openpencil .

# Con un CLI específico
docker build --target with-claude -t openpencil-claude .

# Completa (todos los CLIs)
docker build --target full -t openpencil-full .

Diseño Nativo de IA

De Prompt a Interfaz

• Texto a diseño — describe una página y se genera en el lienzo en tiempo real con animación de transmisión
• Orquestador — descompone páginas complejas en subtareas espaciales para generación en paralelo
• Modificación de diseño — selecciona elementos y describe los cambios en lenguaje natural
• Entrada visual — adjunta capturas de pantalla o bocetos como referencia para el diseño

Soporte Multiagente

Agente	Configuración
Integrado (9+ proveedores)	Selecciona de preajustes de proveedores con selector de región — Anthropic, OpenAI, Google, DeepSeek y más
Claude Code	Sin configuración — usa Claude Agent SDK con OAuth local
Codex CLI	Conectar en Configuración de Agente (Cmd+,)
OpenCode	Conectar en Configuración de Agente (Cmd+,)
GitHub Copilot	copilot login y luego conectar en Configuración de Agente (Cmd+,)
Gemini CLI	Conectar en Configuración de Agente (Cmd+,)

Perfiles de Capacidad de Modelos — adapta automáticamente los prompts, el modo de pensamiento y los tiempos de espera según el nivel del modelo. Los modelos de nivel completo (Claude) reciben prompts completos; los de nivel estándar (GPT-4o, Gemini, DeepSeek) desactivan el pensamiento; los de nivel básico (MiniMax, Qwen, Llama, Mistral) reciben prompts simplificados de JSON anidado para máxima fiabilidad.

i18n — Localización completa de la interfaz en 15 idiomas: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia.

Servidor MCP

• Servidor MCP integrado — instalación con un clic en Claude Code / Codex / Gemini / OpenCode / Kiro / Copilot CLIs
• Detección automática de Node.js — si no está instalado, recurre automáticamente al transporte HTTP e inicia el servidor MCP HTTP
• 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:

brew install zseven-w/openpencil/op

op start                     # Iniciar la app de escritorio
op design @landing.txt       # Diseño por lotes desde archivo
op insert '{"type":"RECT"}'  # Insertar un nodo
op import:figma design.fig   # Importar archivo de Figma
cat design.dsl | op design - # Entrada por pipe desde stdin

Soporta tres métodos de entrada: cadena inline, @filepath (leer desde archivo), o - (leer desde stdin). Funciona con la app de escritorio o el servidor de desarrollo web. Consulta el README del CLI para la referencia completa de comandos.

Habilidad LLM — instala el plugin OpenPencil Skill para enseñar a agentes IA (Claude Code, Cursor, Codex, Gemini CLI, etc.) a diseñar con op.

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 (agent-native, Zig NAPI) + 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

• Compatible de forma nativa con macOS, Windows y Linux mediante Electron
• Asociación de archivos .op — doble clic para abrir, bloqueo de instancia única
• Actualización automática desde 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

Frontend	React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui · i18next
Lienzo	CanvasKit/Skia (WASM, acelerado por GPU)
Estado	Zustand v5
Servidor	Nitro
Escritorio	Electron 35
CLI	op — control desde terminal, DSL de diseño por lotes
IA	Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Runtime	Bun · Vite 7
Formato de archivo	.op — basado en JSON, legible por humanos, compatible con Git

Por Qué Rust

OpenPencil está siendo reescrito desde cero en Rust (#129). La versión TypeScript + Electron es lo que se distribuye hoy; la reescritura en Rust es lo que viene a continuación: 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 (hoy)	Rust (la reescritura)
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 + Zig NAPI agent	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 shell en Rust está en desarrollo activo (consulta la Hoja de Ruta más abajo). Hasta que alcance paridad de funcionalidades para v0.8.0, las descargas instalables anteriores corresponden a la build TypeScript + Electron.

Estructura del Proyecto

openpencil/
├── apps/
│   ├── web/                 Aplicación web TanStack Start
│   │   ├── src/
│   │   │   ├── canvas/      Motor CanvasKit/Skia — dibujo, sincronización, diseño
│   │   │   ├── components/  Interfaz React — editor, paneles, diálogos compartidos, iconos
│   │   │   ├── services/ai/ Chat de IA, orquestador, generación de diseño, transmisión
│   │   │   ├── stores/      Zustand — lienzo, documento, páginas, historial, IA
│   │   │   ├── mcp/         Herramientas del servidor MCP para integración con CLI externas
│   │   │   ├── hooks/       Atajos de teclado, soltar archivos, pegado de Figma
│   │   │   └── uikit/       Sistema de kit de componentes reutilizables
│   │   └── server/
│   │       ├── api/ai/      API Nitro — chat en streaming, generación, validación
│   │       └── utils/       Wrappers de Claude CLI, OpenCode, Codex, Copilot
│   ├── desktop/             Aplicación de escritorio Electron
│   │   ├── main.ts          Ventana, fork Nitro, menú nativo, actualizador automático
│   │   ├── ipc-handlers.ts  Diálogos de archivos nativos, sincronización de tema, preferencias IPC
│   │   └── preload.ts       Puente IPC
│   └── cli/                 Herramienta CLI — comando `op`
│       ├── src/commands/    Comandos de diseño, documento, exportación, importación, nodo, página, variable
│       ├── connection.ts    Conexión WebSocket a la app en ejecución
│       └── launcher.ts      Auto-detección e inicio de la app de escritorio o servidor web
├── packages/
│   ├── pen-types/           Definiciones de tipos para el modelo PenDocument
│   ├── pen-core/            Operaciones de árbol del documento, motor de diseño, variables
│   ├── pen-codegen/         Generadores de código (React, HTML, Vue, Flutter, ...)
│   ├── pen-figma/           Parser y conversor de archivos .fig de Figma
│   ├── pen-renderer/        Renderizador independiente CanvasKit/Skia
│   ├── pen-sdk/             SDK global (reexporta todos los paquetes)
│   ├── pen-ai-skills/       Motor de habilidades AI (carga de prompts por fases)
│   └── agent/               SDK de agente AI (Vercel AI SDK, multi-proveedor, equipos de agentes)
└── .githooks/               Sincronización de versión pre-commit desde nombre de rama

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

bun --bun run dev          # Servidor de desarrollo (puerto 3000)
bun --bun run build        # Compilación de producción
bun --bun run test         # Ejecutar pruebas (Vitest)
npx tsc --noEmit           # Verificación de tipos
bun run bump <version>     # Sincronizar versión en todos los package.json
bun run electron:dev       # Desarrollo con Electron
bun run electron:build     # Empaquetado de Electron
bun run cli:dev            # Ejecutar CLI desde el código fuente
bun run cli:compile        # Compilar CLI a dist

Contribuir

¡Las contribuciones son bienvenidas! Consulta CLAUDE.md para detalles sobre la arquitectura y el estilo de código.

1. Haz fork y clona el repositorio
2. Configura la sincronización de versión: git config core.hooksPath .githooks
3. Crea una rama: git checkout -b feat/my-feature
4. Ejecuta las verificaciones: npx tsc --noEmit && bun --bun run test
5. Haz commit con Conventional Commits: feat(canvas): add rotation snapping
6. Abre un PR contra main

Hoja de Ruta

• Variables de diseño y tokens con sincronización CSS
• Sistema de componentes (instancias y sobreescrituras)
• Generación de diseño con IA y orquestador
• Integración con servidor MCP con flujo de diseño por capas
• Soporte multipágina
• Importación de Figma .fig
• Operaciones booleanas (unión, sustracción, intersección)
• Perfiles de capacidad multimodelo
• Reestructuración en monorepo con paquetes reutilizables
• Herramienta CLI (op) para control desde terminal
• SDK de agente AI integrado con soporte multi-proveedor
• i18n — 15 idiomas
• Integración con Git (clonar, ramas, push/pull, fusión a tres vías en modo carpeta)
• Exportación rasterizada del lienzo (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 — ¿quieres ver tu nombre aquí? Conviértete en patrocinador →

Comunidad

Únete a nuestro Discord — Haz preguntas, comparte diseños y sugiere funciones.

Star History

Evaluaciones

Licencia

MIT — Copyright (c) 2026 ZSeven-W