How to use Openpencil: what you can do with it

3 use cases

• Design a screen from a prompt and export it to React and Tailwind

  Install OpenPencil, describe a UI in plain language, and export the design to code.

  • REPO ZSeven-W/openpencil
  • Content
  • Beginner
  View prompt

  Install ZSeven-W/openpencil and design <screen> for <product> from this description: <description>. Apply the <style> style guide and export it to React + Tailwind in <folder>.

  Share Email me this

• Create and edit designs from Claude Code through OpenPencil's MCP server

  Install the MCP server into your coding agent so it can read, create and modify .op design files.

  • REPO ZSeven-W/openpencil
  • Claude Code
  • Codex
  • Content
  • Intermediate
  View prompt

  Using the ZSeven-W/openpencil MCP server, create a <page> design as an .op file in this repo, apply our style guide, and export it to <framework>. Commit the .op file separately so I can review the diff.

  Share Email me this

• Script batch design changes from the terminal with the op CLI

  Install the op CLI and pipe batch design commands into OpenPencil from files or stdin.

  • REPO ZSeven-W/openpencil
  • Claude Code
  • Codex
  • Cursor
  • Content
  • Advanced
  View prompt

  Install the ZSeven-W/openpencil op CLI and write a script that uses op design and op insert to <batch change> across <files>, then export each to <framework>.

  Share Email me this

Quick start with Openpencil

1. Check you have what it needs: macOS, Windows or Linux (desktop) or the web app; An AI model provider key, or Claude Code, Codex or OpenCode via MCP; Homebrew, Scoop or a GitHub Release download.
2. Open ZSeven-W/openpencil on GitHub and read the README and license.
3. On macOS run brew tap zseven-w/openpencil then brew install --cask openpencil
4. On Windows run scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil then scoop install openpencil
5. Describe the UI in natural language and watch the agents build hero, features and footer in parallel
6. Select elements and chat to modify them, or apply a style guide such as glassmorphism

These steps come from our top use case, Design a screen from a prompt and export it to React and Tailwind, which also has a copy-paste agent prompt.

Using the Deduped MCP, get the setup steps for ZSeven-W/openpencil

claude mcp add --transport http deduped https://dedupedai.com/mcp

Best AI repos for Content

About this repo

• Who it is forDevelopers and designers who want AI-generated UI designs they can version in Git and export to code.
• Why it is hot6.9k stars, talked about in 3 AI sources we track
• LanguageRust
• Sourcegithub.com/ZSeven-W/openpencil · Back to Hot repos

Requirements

• macOS, Windows or Linux (desktop) or the web app
• An AI model provider key, or Claude Code, Codex or OpenCode via MCP
• Homebrew, Scoop or a GitHub Release download

Related repos

• Trended earlier REPO OpenLabs-so/oa-design Oa Design A design language for Open Analytics packaged as an agent skill, type-checked React and Tailwind component recipes, token CSS, and a CLI.
• Trended earlier REPO volcengine/OpenViking OpenViking OpenViking is an open-source context database for AI agents that keeps knowledge, memory and skills in one virtual filesystem under viking:// paths. Directories carry generated one-sentence abstracts and overviews so agents can judge relevance before reading full files, and search can be scoped to a directory. Sessions are archived as Markdown memories you can read and edit. A memory plugin connects Claude Code, Codex, Cursor and OpenCode.
• Trended earlier REPO thesysdev/openui Openui OpenUI is an open, framework-agnostic Generative UI framework that lets models stream structured UI, built around the compact OpenUI Lang and runtimes for React, Vue, Svelte, and Angular.