OpenPencil is an AI-native, open-source design tool that enables "Design-as-Code" by translating natural language prompts directly into UI elements on a canvas. It targets developers and designers seeking an AI-first workflow for rapid UI prototyping and generation, offering an alternative to traditional design tools by integrating multi-agent orchestration and code generation capabilities.

How It Works

OpenPencil is built from the ground up with AI as a core workflow component. Its "Prompt to UI" feature translates text descriptions into real-time, animated designs on an infinite canvas. An orchestrator decomposes complex page designs into spatial sub-tasks for parallel AI generation, while design modification allows users to alter elements using natural language. The tool supports vision input for reference-based design and integrates with various AI agents (Claude Code, Codex CLI, OpenCode) via an MCP server for terminal-based design automation using its human-readable .op JSON file format. The tech stack includes React 19, TanStack Start, Tailwind CSS v4, Fabric.js v7 for the canvas, Zustand v5 for state management, Nitro for the server, and Bun/Vite 7 for runtime.

Quick Start & Requirements

To start, install dependencies with bun install. Run the development server at http://localhost:3000 using bun --bun run dev, or launch the desktop application with bun run electron:dev. Prerequisites include Bun version 1.0 or higher and Node.js version 18 or higher. A demo video is accessible via an image link in the project's README.

Highlighted Details

• Canvas & Drawing: Features an infinite canvas with pan/zoom, alignment guides, snapping, and standard drawing tools (Rectangle, Ellipse, Line, Pen, Frame, Text). Supports Iconify integration, image import (PNG, JPEG, SVG, WebP, GIF), and auto-layout.
• Design System: Incorporates design variables for color, number, and string tokens with $variable references, multi-theme support (e.g., Light/Dark), and a component system with instances and overrides. Includes CSS sync for auto-generated custom properties.
• Figma Import: Capable of importing .fig files while preserving layout, fills, strokes, effects, text, images, and vectors.
• Code Generation: Outputs React + Tailwind CSS or HTML + CSS code.
• Desktop Application: Available as a native macOS, Windows, and Linux app via Electron, featuring auto-updates from GitHub Releases and native application menus.
• File Format: Uses a .op file format, which is JSON-based, human-readable, and Git-friendly.

Maintenance & Community

The project encourages contributions following Conventional Commits standards, with detailed architecture information available in CLAUDE.md. Community interaction and support are facilitated through a Discord server.

Licensing & Compatibility

OpenPencil is released under the MIT License, with copyright held by ZSeven-W (© 2026). This license is generally permissive for commercial use and integration into closed-source projects.

Limitations & Caveats

Future development outlined in the roadmap includes implementing Boolean operations, collaborative editing, and a plugin system. These features are not yet available in the current version.