# AI use cases for Openpencil (ZSeven-W/openpencil)

Repo: [ZSeven-W/openpencil](https://github.com/ZSeven-W/openpencil) | Use cases: 3 | Page: https://dedupedai.com/use-cases/zseven-w-openpencil/

OpenPencil is an open-source, AI-native vector design tool. You describe UI in natural language and concurrent agent teams draw it on an infinite canvas; designs are .op JSON files that are Git-friendly and export to React with Tailwind, HTML and CSS, Vue, Svelte, Flutter, SwiftUI and more. It has a built-in MCP server for Claude Code, Codex and OpenCode, an `op` CLI and real-time collaboration.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Design a screen from a prompt and export it to React and Tailwind: https://dedupedai.com/use-cases/zseven-w-openpencil/design-a-ui-from-a-prompt-and-export-react-with-openpencil/
- Create and edit designs from Claude Code through OpenPencil's MCP server: https://dedupedai.com/use-cases/zseven-w-openpencil/design-from-claude-code-with-the-openpencil-mcp-server/
- Script batch design changes from the terminal with the op CLI: https://dedupedai.com/use-cases/zseven-w-openpencil/script-designs-with-the-op-cli/

## How to design a screen from a prompt and export it to React and Tailwind with Openpencil

Repo: [ZSeven-W/openpencil](https://github.com/ZSeven-W/openpencil) | Difficulty: Beginner | Time: 20 minutes | Basis: From the README

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

**Who it is for:** A developer who needs a decent first design and the code for it, without a designer.

**The problem:** Going from an idea to a mockup to code means three tools and a lot of copying.

**The outcome:** A design on the canvas saved as an .op file, exported to React with Tailwind or HTML with CSS.

### Steps

1. On macOS run `brew tap zseven-w/openpencil` then `brew install --cask openpencil`
2. On Windows run `scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil` then `scoop install openpencil`
3. Describe the UI in natural language and watch the agents build hero, features and footer in parallel
4. Select elements and chat to modify them, or apply a style guide such as glassmorphism
5. Export to React + Tailwind or HTML + CSS

### Prompt to paste into your agent

```text
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>.
```

### Caveat



Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/zseven-w-openpencil/design-a-ui-from-a-prompt-and-export-react-with-openpencil/

## How to create and edit designs from Claude Code through OpenPencil's MCP server with Openpencil

Repo: [ZSeven-W/openpencil](https://github.com/ZSeven-W/openpencil) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

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

**Who it is for:** A developer who lives in the terminal and wants the agent to update designs next to the code.

**The problem:** Designs live in a separate tool the coding agent cannot see or change.

**The outcome:** An agent that reads and edits .op files, applies style guides and keeps design and code in one repo.

### Steps

1. Install OpenPencil, then use the one-click MCP install for Claude Code, Codex, OpenCode, Kiro or Copilot CLIs
2. Install the `op` CLI with `brew install zseven-w/openpencil/op`
3. Ask the agent to create an .op file for a page or modify an existing one
4. Commit the .op JSON to Git and review the diff like code
5. Export to your framework when the design is approved

### Prompt to paste into your agent

```text
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.
```

### Caveat



Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/zseven-w-openpencil/design-from-claude-code-with-the-openpencil-mcp-server/

## How to script batch design changes from the terminal with the op CLI with Openpencil

Repo: [ZSeven-W/openpencil](https://github.com/ZSeven-W/openpencil) | Difficulty: Advanced | Time: 45 minutes | Basis: From the README

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

**Who it is for:** A developer who wants repeatable design updates, such as regenerating screens for each locale or brand.

**The problem:** Repeating the same design edits by hand across many files is slow and inconsistent.

**The outcome:** Design changes applied by script with op design and op insert, against the desktop app or web server.

### Steps

1. Install with `curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash` or Homebrew
2. Start the desktop app or the web server
3. Use `op design` and `op insert` with the batch design DSL
4. Pipe commands in from a file or stdin
5. Export the updated designs to code

### Prompt to paste into your agent

```text
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>.
```

### Caveat



Risk, remote script: The install script is piped from GitHub into bash; use Homebrew if you prefer not to run it.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/zseven-w-openpencil/script-designs-with-the-op-cli/