open-pencil/open-pencil

AI-native design editor. Open-source Figma alternative.

What it solves

OpenPencil provides an open-source, programmable alternative to closed design platforms like Figma. It solves the problem of proprietary file formats and restricted programmatic access by allowing users to read and write .fig files natively, script every operation via a CLI or API, and keep design data local.

How it works

It is a design editor built with a Vue 3 frontend and a Skia-based rendering engine. It uses Yoga WASM for flex and grid layouts and Yjs with WebRTC for serverless, peer-to-peer real-time collaboration. The project includes a headless CLI for inspecting and modifying files, an MCP server for AI agent integration, and a Vue SDK for developers to build their own custom editing surfaces.

Who it’s for

  • Designers who want an open-source editor that supports Figma files and local data ownership.
  • Developers who need to programmatically manipulate design files, lint layouts, or export designs to code (JSX/Tailwind).
  • AI Engineers building agents that need to create or modify UI designs using the Model Context Protocol (MCP).

Highlights

  • Figma Compatibility: Native support for opening and exporting .fig files.
  • AI-Powered Design: Built-in chat assistant and MCP server with 100+ tools for AI agents to create and modify nodes.
  • Programmable Toolkit: Includes a headless CLI with XPath querying, a Figma Plugin API eval mode, and a Vue SDK.
  • Design-to-Code: Exports selections to JSX/Tailwind and imports HTML/CSS into editable design layers.
  • Serverless Collaboration: Real-time co-editing via P2P WebRTC without requiring accounts or central servers.

Related

  • Project
    ZSeven-W/openpencil

    An open-source AI-native vector design tool that generates UI layouts from natural language prompts and exports them to production code.

  • Project
    nexu-io/open-design

    An open-source, local-first design tool that enables coding agents to generate and render high-fidelity prototypes, decks, and motion graphics based on a shared design system.

  • Project
    google-gemini/gemini-cli

    An open-source AI agent for the terminal that provides direct access to Gemini models for code analysis, automation, and system integration.

  • Project
    awdr74100/figwright

    A bidirectional MCP server and Figma plugin that allows AI agents to read from and write to the Figma canvas, enabling framework-aware codegen and design authoring.

  • Project
    southleft/figma-console-mcp

    An MCP server that connects AI assistants to Figma, enabling automated design system extraction, bidirectional token synchronization, and programmatic UI creation.