Create

Sign in to ReadmeX

or

How we handle your data: Privacy Policy

ReadmeX

Your AI reading companion

What would you like to catch up on?

Pick a briefing, or ask your own question.

Your community and people briefings stay personal to you.

openpencil

openpencil• Pinned

openpencil: An open-source, AI-native vector design tool where prompts turn into UI on a live canvas, with concurrent Agent Teams, a built-in MCP server and multi-model support.

What problem it solves

OpenPencil lets users describe UI in natural language and see it appear on an infinite canvas, then modify existing designs by selecting elements and chatting. It also lets multiple AI agents work on different sections of complex pages in parallel while keeping `.op` files human-readable, Git-friendly and diffable.

Key features

  • Prompt-to-canvas generation — Describe a UI in natural language and watch it appear on the infinite canvas with streaming animation; select elements and describe changes to modify existing designs.

    Source: README

  • Concurrent Agent Teams — Complex pages are decomposed into spatial sub-tasks so multiple agents can work on separate sections in parallel, with per-member canvas indicators and a layered skeleton → content → refine workflow.

    Source: README

  • Multi-model intelligence — Prompt shape, thinking mode and timeouts adapt automatically to each model tier, and the tool connects to built-in providers as well as Claude Code, Codex, OpenCode and GitHub Copilot.

    Source: README

  • Built-in MCP server and CLI — A built-in MCP server installs into coding CLIs so agents can read, create and modify `.op` files, while the `op` CLI offers a batch design DSL and node manipulation from the terminal.

    Source: README

  • Design-as-Code export — Design variables become CSS custom properties and documents export to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose and React Native.

    Source: README

Quick start

Copied verbatim from the project's README.

brew tap zseven-w/openpencil
brew install --cask openpencil
curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash
op start                     # Launch desktop app
op start --headless --file design.op # Launch headless file-backed server
op design @landing.txt       # Batch design from file
op design @ui.js             # Sandboxed JavaScript with loops
op insert '{"type":"rectangle"}' # Insert a node
op import:figma design.fig   # Import Figma file
cat design.dsl | op design - # Pipe from stdin

Who it may suit

This may suit designers and front-end developers who want to sketch or iterate on interfaces by describing them in natural language, and teams that want AI agents to edit design files directly through MCP or a terminal CLI.

Topics to discuss

  • How do you structure prompts and agent roles so that parallel Agent Teams produce coherent layouts?

  • What should the `.op` JSON format guarantee for Git workflows, diffs and merges?

  • Which code export targets matter most for turning canvas designs into production front-end code?

Written by ReadmeX AI from the project's README, source and public GitHub data; it may contain mistakes.

Read the original README https://github.com/ZSeven-W/openpencil#readme

ReadmeX opened this community for a trending project; it is not run by the project. Maintainers can claim it from the community page.

github.comhttps://github.com/ZSeven-W/openpencil

Comments

…