Repolode
Submit
ZSeven-W

ZSeven-W/openpencil

Open-source AI-native vector design tool with prompt-to-canvas generation, concurrent agent teams, an MCP server, and code export.

Open-source alternative to:FigmaPencil

View on GitHubWebsite
Stars
6,265
Forks
543
Open issues
23
Last commit
yesterday

What is it?

OpenPencil is a vector design tool for creating UI on an infinite canvas. Users describe a page in natural language and the AI generates it directly on the canvas, or select existing elements and request changes in chat. Designs are stored as `.op` files, which are JSON, so they can be read, diffed and versioned in Git.

The project includes a multi-agent mode where an orchestrator splits a page into sections and several agents generate them in parallel. It also ships a built-in MCP server that can be installed into Claude Code, Codex, OpenCode and other agent CLIs, letting them read and modify `.op` files. Design variables map to CSS custom properties, and designs can be exported as React with Tailwind, HTML with CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose or React Native code.

The editor is written in Rust and runs as a native desktop app on macOS, Windows and Linux, or in the browser through a WASM build. A `op` command-line tool and an embeddable web SDK for read-only `.op` viewing are also provided.

Key features

  • 01Generate UI from text prompts directly on an infinite canvas with streaming output.
  • 02Concurrent agent teams design different page sections in parallel.
  • 03Built-in MCP server works with Claude Code, Codex, OpenCode, Kiro and Copilot CLI.
  • 04Stores designs as human-readable JSON `.op` files that work well with Git.
  • 05Exports code to React, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose and more.
  • 06Includes a `op` CLI and embeddable read-only web viewer SDKs.

Use cases

  • Prototyping UI screens by describing them to an AI assistant.
  • Letting coding agents read and edit design files through MCP.
  • Turning a design into framework code without manual re-implementation.
  • Embedding a read-only viewer for design files in your own web app.

Quick start

  1. 1

    Clone the repository with submodules

    git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
  2. 2

    Install Rust (stable) as the prerequisite for building

  3. 3

    Start the web dev server

    bash scripts/start-web-rust.sh
  4. 4

    Or run the desktop app instead

    cargo run -p op-host-desktop

Things to know

  • Early-stage project with a README that is still changing, so expect rough edges.
  • CLI and ACP agents work only in the native desktop app, not in the web host.
  • Building from source requires Rust and submodule setup, and Windows needs a separate build guide.

Topics

#design-tool#vector-graphics#ai-design#mcp#design-as-code#rust#ui-design#code-generation#agent#agent-team

FAQ

What is openpencil?
Open-source AI-native vector design tool with prompt-to-canvas generation, concurrent agent teams, an MCP server, and code export. OpenPencil is a vector design tool for creating UI on an infinite canvas. Users describe a page in natural language and the AI generates it directly on the canvas, or select existing elements and request changes in chat. Designs are stored as `.op` files, which are JSON, so they can be read, diffed and versioned in Git.
Is openpencil free to use? What license does it have?
openpencil is open source under the MIT license. Check the license terms before using it in commercial products.
Is openpencil still maintained?
Actively maintained. The last commit to openpencil was on Oct 19, 2026.
What can I use openpencil for?
Prototyping UI screens by describing them to an AI assistant. Letting coding agents read and edit design files through MCP. Turning a design into framework code without manual re-implementation. Embedding a read-only viewer for design files in your own web app.
How do I install openpencil?
Clone the repository with submodules: git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git Install Rust (stable) as the prerequisite for building Start the web dev server: bash scripts/start-web-rust.sh Or run the desktop app instead: cargo run -p op-host-desktop
Where can I get openpencil?
The source code and installation instructions are on GitHub: https://github.com/ZSeven-W/openpencil

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects