OpenPencil

OpenPencil is an open-source desktop app that provides a design editor for creating user interfaces. It supports opening and writing native .fig and .pen files, allowing users to migrate designs without losing data. The software is available as a lightweight desktop application for macOS, Windows, and Linux via Tauri, or as a browser-based PWA for those who prefer not to install software locally.

The application focuses on a programmable workflow, offering a headless CLI and a Vue SDK for developers building custom editing surfaces. It integrates AI capabilities through a chat interface and an MCP server, enabling AI agents to create and modify design nodes based on text descriptions. Collaboration is handled via peer-to-peer WebRTC, which removes the need for centralized accounts or servers to manage shared sessions.

Key features

• Support for reading and writing .fig and .pen design files
• AI-driven design generation using OpenRouter, Anthropic, OpenAI, and Google AI
• Real-time P2P collaboration with cursors and presence via WebRTC
• Auto layout and CSS Grid implementation using Yoga WASM
• Design-to-code export for JSX and Tailwind CSS
• Headless CLI for querying node trees with XPath and linting files
• Component and variant management with an inspector for switching instances
• MCP server for integration with AI agents
• Vue SDK for embedding design editor components into other applications

Built with Skia, Tauri, and Vue, the tool is designed for UI/UX designers and developers who require a programmable design environment. It allows for the extraction of design tokens and the conversion of HTML and CSS into editable layers. The inclusion of a plugin API via eval enables the automation of document modifications through scripting. Users can audit entire design systems from the terminal to find inconsistencies in typography, spacing, and color palettes.

OpenPencil is an AI-native, extensible design toolkit.