OpenPencil

by ZSeven-WAppMake visuals

Lets you describe a web page or app screen and watch an AI draw the design on a canvas

About OpenPencil

An open-source desktop design tool with AI built in. Describe a page or app screen in plain words and it appears on a canvas you can edit by chat or by hand, then export as code such as React, HTML, Vue or SwiftUI.

For Product teamsDesignersFront-end developers

Made by ZSeven-W

ZSeven is a small independent tech studio whose products include OpenPencil, the Zode terminal coding assistant and the Noema memory system for AI agents. It publishes on GitHub as ZSeven-W.

Stars: ★ 7.0k
License: MIT
Cost: Usage-based
Platforms: Mac · Win · Linux
Runs: Local

Overview

OpenPencil is an open-source desktop design tool with AI built in. You describe a page or screen in plain words and the design appears on an infinite canvas; you can then select parts and ask for changes, or draw and edit by hand. Designs can be exported as code for React, HTML, Vue, SwiftUI and other frameworks, and decks as PDF or PowerPoint. It suits product teams and designers who want quick UI drafts, and developers who want code from a design.

Several AI helpers can work on different sections of a page at the same time, and the design file stays plain JSON you can keep in Git.

Try these first

Start with the first one: it is a small task you can check easily.

Design a simple sign-up screen with a title, an email field, a password field and a button.First try · uses model credits
Create a landing page for [product] with a hero, three features and a footer.uses model credits
Make the selected button larger and use a darker blue.uses model credits
Redo this sign-up screen in a glassmorphism style.uses model credits

Example prompts written by Agent Flows Hub.

Features

From the creator's documentation.

Feature	What it does	Runs
Prompt to design	Describe a page or screen and it is drawn on the canvas as editable layers	Your model provider
Edit by chat	Select elements and describe the change you want	Your model provider
Drawing tools	Shapes, pen, text, auto-layout, components and multiple pages for manual work	Your computer
Code export	React and Tailwind, HTML and CSS, Vue, Svelte, Flutter, SwiftUI and more	Your computer
Decks	Slide templates, presenting, and export to PDF, HTML or PowerPoint	Your computer
Agent connection	A built-in MCP server lets Claude Code, Codex or OpenCode read and edit designs	Your computer

Good to know

You need a first draft of a landing page or app screen to discuss with your team. OpenPencil generates it on a canvas from a description, lets you change selected parts by chat, and can export the result as front-end code.

Limits

GitHub lists every release as a pre-release, so expect changes between versions. On Windows, the installer can be flagged by antivirus heuristics; the project links a page on checking the download.
AI features need a model API key or a signed-in coding agent such as Claude Code or Codex. Generated designs and exported code still need a human review.

Notes by Agent Flows Hub (original project name: OpenPencil), written from the creator's documentation, not from running it ourselves. OpenPencil README · OpenPencil releases

Stuck setting it up?

Tell us what happened. We take a look first; if it needs paid work, you get an estimate before anything starts.

Get help

How to start

Get the appDownload it from the official page, or paste the install request into an AI agent you already use.macOSbrew tap zseven-w/openpencil brew install --cask openpencil
Windowsscoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil scoop install openpencil
Linux, WindowsDownload the installer
Open itFollow the first-run steps in the app.
Give it a first taskAsk for a simple sign-up screen with a title, two fields and a button. Check that each element is a separate layer you can select and move.

Steps follow the creator's instructions. The request tells your agent to read them first and wait for your OK.

Before you start

A computer with macOS, Windows or Linux.
An API key from a model provider such as Anthropic, OpenAI, Google or DeepSeek
Or an AI coding agent signed in on your computer, such as Claude Code or Codex
Pay per use. The AI service it calls charges for what you use.

Details

Made by: ZSeven-W
License: MIT Terms
Platforms: macOS, Windows, Linux
Runs on: Your computer

View source Official docs Report a problem

For AI agents

This page as a Markdown install brief:

/en/library/openpencil/install.md

Other apps

OpenSEO Shows the keywords, rankings and backlinks for your site, and lets your AI agent use them
OpenUsage Shows how much of your Claude, ChatGPT and other AI plans is left, in the Mac menu bar
Palmier Pro Lets Claude, Codex or Cursor edit your videos on a real timeline in a Mac video editor
Paperclip Runs a team of AI agents from one task board, with goals, budgets and approval steps
PasteMD Pastes AI chat answers into Word, WPS or Excel with formulas and tables intact
PDFMathTranslate Translates a whole PDF paper into another language, keeping formulas, charts and layout

See all 113 apps

GitHub