openpencil
starsforks
How to install openpencil?
zseven-w/openpencil
$git clone https://github.com/ZSeven-W/openpencil<br />
README.md
| 1 | <p align="center"> |
| 2 | <img src="./crates/op-host-desktop/assets/icon.png" alt="OpenPencil" width="120" /> |
| 3 | </p> |
| 4 | |
| 5 | <h1 align="center">OpenPencil</h1> |
| 6 | |
| 7 | <p align="center"> |
| 8 | <strong>The world's first open-source AI-native vector design tool.</strong><br /> |
| 9 | <sub>Concurrent Agent Teams • Design-as-Code • Built-in MCP Server • Multi-model Intelligence</sub> |
| 10 | </p> |
| 11 | |
| 12 | <p align="center"> |
| 13 | <a href="./README.md"><b>English</b></a> · <a href="./README.zh.md">简体中文</a> · <a href="./README.zh-TW.md">繁體中文</a> · <a href="./README.ja.md">日本語</a> · <a href="./README.ko.md">한국어</a> · <a href="./README.fr.md">Français</a> · <a href="./README.es.md">Español</a> · <a href="./README.de.md">Deutsch</a> · <a href="./README.pt.md">Português</a> · <a href="./README.ru.md">Русский</a> · <a href="./README.hi.md">हिन्दी</a> · <a href="./README.tr.md">Türkçe</a> · <a href="./README.th.md">ไทย</a> · <a href="./README.vi.md">Tiếng Việt</a> · <a href="./README.id.md">Bahasa Indonesia</a> |
| 14 | </p> |
| 15 | |
| 16 | <p align="center"> |
| 17 | <a href="https://github.com/ZSeven-W/openpencil/stargazers"><img src="https://img.shields.io/github/stars/ZSeven-W/openpencil?style=flat&color=cfb537" alt="Stars" /></a> |
| 18 | <a href="https://github.com/ZSeven-W/openpencil/blob/main/LICENSE"><img src="https://img.shields.io/github/license/ZSeven-W/openpencil?color=64748b" alt="License" /></a> |
| 19 | <a href="https://github.com/ZSeven-W/openpencil/actions/workflows/rust-check.yml"><img src="https://img.shields.io/github/actions/workflow/status/ZSeven-W/openpencil/rust-check.yml?label=CI" alt="CI" /></a> |
| 20 | <a href="https://discord.gg/h9Fmyy6pVh"><img src="https://img.shields.io/badge/Discord-Join%20chat-5865F2?logo=discord&logoColor=white" alt="Discord" /></a> |
| 21 | </p> |
| 22 | |
| 23 | <br /> |
| 24 | |
| 25 | <p align="center"> |
| 26 | <a href="https://oss.ioa.tech/zseven/openpencil/a46e24733239ce24de36702342201033.mp4"> |
| 27 | <img src="./screenshot/op-cover.png" alt="OpenPencil — click to watch demo" width="100%" /> |
| 28 | </a> |
| 29 | </p> |
| 30 | <p align="center"><sub>Click the image to watch the demo video</sub></p> |
| 31 | |
| 32 | <br /> |
| 33 | |
| 34 | > **Note:** There is another open-source project with the same name — [OpenPencil](https://github.com/open-pencil/open-pencil), focused on Figma-compatible visual design with real-time collaboration. This project focuses on AI-native design-to-code workflows. |
| 35 | |
| 36 | ## Why OpenPencil |
| 37 | |
| 38 | <table> |
| 39 | <tr> |
| 40 | <td width="50%"> |
| 41 | |
| 42 | ### 🎨 Prompt → Canvas |
| 43 | |
| 44 | Describe any UI in natural language. Watch it appear on the infinite canvas in real-time with streaming animation. Modify existing designs by selecting elements and chatting. |
| 45 | |
| 46 | </td> |
| 47 | <td width="50%"> |
| 48 | |
| 49 | ### 🤖 Concurrent Agent Teams |
| 50 | |
| 51 | The orchestrator decomposes complex pages into spatial sub-tasks. Multiple AI agents work on different sections simultaneously — hero, features, footer — all streaming in parallel with per-member canvas indicators. |
| 52 | |
| 53 | </td> |
| 54 | </tr> |
| 55 | <tr> |
| 56 | <td width="50%"> |
| 57 | |
| 58 | ### 🧠 Multi-Model Intelligence |
| 59 | |
| 60 | Automatically adapts to each model's capabilities. Claude gets full prompts with thinking; GPT-4o/Gemini disable thinking; smaller models (MiniMax, Qwen, Llama) get simplified prompts for reliable output. |
| 61 | |
| 62 | </td> |
| 63 | <td width="50%"> |
| 64 | |
| 65 | ### 🔌 MCP Server |
| 66 | |
| 67 | One-click install into Claude Code, Codex, Gemini, OpenCode, Kiro, or Copilot CLIs. Design from your terminal — read, create, and modify `.op` files through any MCP-compatible agent. |
| 68 | |
| 69 | </td> |
| 70 | </tr> |
| 71 | <tr> |
| 72 | <td width="50%"> |
| 73 | |
| 74 | ### 🎨 Style Guides |
| 75 | |
| 76 | Built-in style guide library with tag-based fuzzy matching. Apply visual styles (glassmorphism, brutalist, retro, etc.) to AI-generated designs. MCP tools for external agent access. |
| 77 | |
| 78 | </td> |
| 79 | <td width="50%"> |
| 80 | |
| 81 | ### 📦 Design-as-Code |
| 82 | |
| 83 | `.op` files are JSON — human-readable, Git-friendly, diffable. Design variables generate CSS custom properties. Code export to React + Tailwind or HTML + CSS. |
| 84 | |
| 85 | </td> |
| 86 | </tr> |
| 87 | <tr> |
| 88 | <td width="50%"> |
| 89 | |
| 90 | ### 🖥️ Runs Everywhere |
| 91 | |
| 92 | Web app + native desktop on macOS, Windows, and Linux — one Rust core, a single self-contained binary, no browser engine. `.op` file association — double-click to open. |
| 93 | |
| 94 | </td> |
| 95 | <td wi |
People who liked this also viewed
6 picksType
- Figma-Context-MCPMCP server to provide Figma layout information to AI coding agents like CursorMCP ServersJul 2026
- sunnysideFigma-Context-MCPA comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.MCP ServersApr 2026
- figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.MCP ServersJul 2026
- dcc-mcp-coreCore runtime and shared tooling for DCC-MCP: safe, skill-first MCP integration across Maya, Blender, Houdini, Photoshop, and custom DCC hosts.MCP ServersJul 2026
- godot-aiProduction-grade MCP server and AI tools for the Godot engine. A Snap to install. Totally free and fun.MCP ServersJul 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverMCP ServersJul 2026
