OpenPencil

Herramienta de diseño de código abierto nativa de IA. Diseño como Código.
De prompt a interfaz en el lienzo. Orquestación multiagente. Servidor MCP integrado. Generación de código.

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

Inicio Rápido · IA · Características · Discord · Contribuir

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

## Inicio Rápido ```bash # Instalar dependencias bun install # Iniciar el servidor de desarrollo en http://localhost:3000 bun --bun run dev ``` O ejecutar como aplicación de escritorio: ```bash bun run electron:dev ``` > **Requisitos previos:** [Bun](https://bun.sh/) >= 1.0 y [Node.js](https://nodejs.org/) >= 18 ## Diseño Nativo de IA OpenPencil está construido desde cero con IA en su núcleo — no como un plugin, sino como un flujo de trabajo central. **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 | | --- | --- | | **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+,`) | **Servidor MCP** - Servidor MCP integrado — instalación con un clic en Claude Code / Codex / Gemini / OpenCode / Kiro CLIs - Automatización de diseño desde la terminal: leer, crear y modificar archivos `.op` a través de cualquier agente compatible con MCP **Generación de Código** - React + Tailwind CSS - HTML + CSS - CSS Variables a partir de tokens de diseño ## 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 **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 - Actualización automática desde GitHub Releases - Menú de aplicación nativo y diálogos de archivo ## Stack Tecnológico | | | | --- | --- | | **Frontend** | React 19 · TanStack Start · Tailwind CSS v4 · shadcn/ui | | **Lienzo** | Fabric.js v7 | | **Estado** | Zustand v5 | | **Servidor** | Nitro | | **Escritorio** | Electron 35 | | **IA** | Anthropic SDK · Claude Agent SDK · OpenCode SDK | | **Runtime** | Bun · Vite 7 | | **Formato de archivo** | `.op` — basado en JSON, legible por humanos, compatible con Git | ## Estructura del Proyecto ```text src/ canvas/ Motor Fabric.js — dibujo, sincronización, diseño, guías, herramienta pluma components/ Interfaz React — editor, paneles, diálogos compartidos, iconos services/ai/ Chat de IA, orquestador, generación de diseño, transmisión services/figma/ Pipeline de importación binaria de Figma .fig services/codegen Generadores de código React+Tailwind y HTML+CSS stores/ Zustand — lienzo, documento, páginas, historial, IA, configuración variables/ Resolución de tokens de diseño y gestión de referencias mcp/ Herramientas del servidor MCP para integración con CLI externas uikit/ Sistema de kit de componentes reutilizables server/ api/ai/ API Nitro — chat en streaming, generación, validación utils/ Wrappers de cliente Claude CLI, OpenCode, Codex electron/ main.ts Ventana, fork Nitro, menú nativo, actualizador automático preload.ts Puente IPC ``` ## 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+E` | Exportar | | `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 | | | | ## Scripts ```bash 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 electron:dev # Desarrollo con Electron bun run electron:build # Empaquetado de Electron ``` ## 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. Crea una rama: `git checkout -b feat/my-feature` 3. Ejecuta las verificaciones: `npx tsc --noEmit && bun --bun run test` 4. Haz commit con [Conventional Commits](https://www.conventionalcommits.org/): `feat(canvas): add rotation snapping` 5. 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 - [x] Soporte multipágina - [x] Importación de Figma `.fig` - [x] Operaciones booleanas (unión, sustracción, intersección) - [ ] Edición colaborativa - [ ] Sistema de plugins ## Colaboradores

## Comunidad