OpenPencil — De cero a profesional

OpenPencil es un editor de diseño open-source, AI-native y local-first que desafía el monopolio de Figma con una alternativa completamente gratuita, programable e inteligente. Este tutorial te lleva desde la instalación hasta flujos de trabajo profesionales integrando IA, CLI y colaboración en tiempo real.

---

Capítulos del tutorial

Capítulo 1 — Introducción a OpenPencil

Qué es OpenPencil, el problema que resuelve, sus 6 pilares fundamentales y cómo se compara con Figma, Sketch y Penpot. Arquitectura general del proyecto.

Capítulo 2 — Instalación y primeros pasos

Instalación en macOS, Windows y Linux. Versión web PWA y Docker. Primer archivo .op, navegación del canvas y creación de las primeras formas.

Capítulo 3 — Herramientas de diseño

Formas básicas, herramienta Pen/Bezier, texto, auto-layout (flex y grid), operaciones booleanas e importación de imágenes e iconos con Iconify. Panel de propiedades completo.

Capítulo 4 — IA integrada y chat

Chat integrado con Cmd+J, los 90+ herramientas de IA, flujo de 3 capas (skeleton → content → refine), equipos de agentes concurrentes y variables de diseño generadas automáticamente.

Capítulo 5 — CLI y automatización

El CLI op y todos sus comandos. Diseño batch desde archivos de texto, inserción de nodos por JSON, exportación, importación desde Figma y uso en pipelines CI/CD.

Capítulo 6 — MCP Server y Claude Code

Configurar el MCP server de OpenPencil en Claude Code, Cursor y Windsurf. Todas las herramientas MCP disponibles y ejemplos de prompts para diseñar componentes desde el editor de código.

Capítulo 7 — Exportación de código

Exportar diseños a React+Tailwind, Vue, Svelte, Flutter, SwiftUI y React Native. Variables de diseño como CSS custom properties e integración en el flujo de desarrollo diario.

Capítulo 8 — Colaboración en tiempo real

Colaboración P2P sin servidor con WebRTC + Yjs CRDT. Crear rooms, compartir links temporales, cursores en tiempo real y viewport following. Comparación con el modelo de Figma.

Capítulo 9 — Sistema de componentes

Crear componentes maestros, instancias y overrides. Variables de diseño con $variable, temas Light/Dark, variantes y organización de una librería de diseño profesional.

Capítulo 10 — Flujo de trabajo completo

Proyecto real de principio a fin: diseñar un dashboard con IA, exportar a React, integrar con Claude Code via MCP y colaborar en equipo. Tips de productividad y mejores prácticas.

---

Requisitos previos

• Conocimiento básico de HTML/CSS y un framework frontend (React, Vue o similar)
• Familiaridad con la línea de comandos
• Node.js 20+ instalado (para el CLI)
• Opcional: cuenta en Anthropic o acceso a algún LLM para las funciones de IA

Tecnologías cubiertas

mindmap
  root((OpenPencil))
    Canvas
      Formas básicas
      Bezier/Pen
      Auto-layout
      Booleanas
    IA
      Chat integrado
      90+ herramientas
      Agentes concurrentes
      3 capas de diseño
    Código
      CLI op
      MCP Server
      Exportación
      CI/CD
    Colaboración
      WebRTC P2P
      Yjs CRDT
      Cursores live
    Componentes
      Variables
      Temas
      Variantes
      Librerías