vndangkhoa/openpencil
1
0
Fork 0
mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-05-31 19:04:29 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

docs: drop op export from CLI docs and clarify pen-mcp usage

Browse source 
The `op export` command was removed in 0.7.x but the README still
advertised it (#116). The pen-mcp README also documented an
`npx @zseven-w/pen-mcp` quick-start that never worked because the
package ships TypeScript source against workspace-only deps with no
`bin` entry (#117).

- Strip `op export` references from all 15 root and 15 cli READMEs
- Sync AGENTS.md, CLAUDE.md, apps/cli/CLAUDE.md to match the codegen-
  pipeline reality (no standalone export command anymore)
- Rewrite pen-mcp README's quick-start: explain the package ships as
  part of the OpenPencil app and external clients connect over HTTP

Closes #116
Closes #117
This commit is contained in:
Kayshen-X 2026-04-26 19:20:14 +08:00
parent a5952bc88b
commit c4e5359596
48 changed files with 61 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
AGENTS.md
View file

@ -108,7 +108,6 @@ The `op` command-line tool controls the desktop app or web server from the termi
- **Design:** `op design <dsl|@file|->` — batch design DSL operations
- **Document:** `op open`, `op save`, `op get`, `op selection`
- **Nodes:** `op insert`, `op update`, `op delete`, `op move`, `op copy`, `op replace`
- **Export:** `op export <react|html|vue|svelte|flutter|swiftui|compose|rn|css>`
- **Cross-platform:** macOS, Windows (NSIS/portable), Linux (AppImage/deb/snap/flatpak)
### CI / CD

1
CLAUDE.md
View file

@ -129,7 +129,6 @@ The `op` command-line tool controls the desktop app or web server from the termi
- **Design:** `op design <dsl|@file|->` — batch design DSL operations
- **Document:** `op open`, `op save`, `op get`, `op selection`
- **Nodes:** `op insert`, `op update`, `op delete`, `op move`, `op copy`, `op replace`
- **Export:** `op export <react|html|vue|svelte|flutter|swiftui|compose|rn|css>`
- **Cross-platform:** macOS, Windows (NSIS/portable), Linux (AppImage/deb/snap/flatpak)
### CI / CD

5
README.de.md
View file

@ -89,7 +89,7 @@ Web-App + native Desktop-Anwendung auf macOS, Windows und Linux über Electron.
### ⌨️ CLI — `op`
Steuern Sie das Design-Tool vom Terminal aus. `op design`, `op insert`, `op export` — Batch-Design-DSL, Knotenmanipulation, Code-Export. Pipe-Eingabe von Dateien oder stdin. Funktioniert mit der Desktop-App oder dem Webserver.
Steuern Sie das Design-Tool vom Terminal aus. `op design`, `op insert` — Batch-Design-DSL, Knotenmanipulation. Pipe-Eingabe von Dateien oder stdin. Funktioniert mit der Desktop-App oder dem Webserver.
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # Desktop-App starten
op design @landing.txt # Batch-Design aus Datei
op insert '{"type":"RECT"}' # Knoten einfügen
op export react --out . # Nach React + Tailwind exportieren
op import:figma design.fig # Figma-Datei importieren
cat design.dsl | op design - # Pipe von stdin
```
@ -294,7 +293,7 @@ Unterstützt drei Eingabemethoden: Inline-String, `@filepath` (aus Datei lesen)
| **State** | Zustand v5 |
| **Server** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — Terminal-Steuerung, Batch-Design-DSL, Code-Export |
| **CLI** | `op` — Terminal-Steuerung, Batch-Design-DSL |
| **KI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Laufzeit** | Bun · Vite 7 |
| **Dateiformat** | `.op` — JSON-basiert, menschenlesbar, Git-freundlich |

5
README.es.md
View file

@ -89,7 +89,7 @@ Aplicación web + escritorio nativo en macOS, Windows y Linux mediante Electron.
### ⌨️ CLI — `op`
Controla la herramienta de diseño desde la terminal. `op design`, `op insert`, `op export` — DSL de diseño por lotes, manipulación de nodos, exportación de código. Entrada por pipe desde archivos o stdin. Funciona con la app de escritorio o el servidor web.
Controla la herramienta de diseño desde la terminal. `op design`, `op insert` — DSL de diseño por lotes, manipulación de nodos. Entrada por pipe desde archivos o stdin. Funciona con la app de escritorio o el servidor web.
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # Iniciar la app de escritorio
op design @landing.txt # Diseño por lotes desde archivo
op insert '{"type":"RECT"}' # Insertar un nodo
op export react --out . # Exportar a React + Tailwind
op import:figma design.fig # Importar archivo de Figma
cat design.dsl | op design - # Entrada por pipe desde stdin
```
@ -294,7 +293,7 @@ Soporta tres métodos de entrada: cadena inline, `@filepath` (leer desde archivo
| **Estado** | Zustand v5 |
| **Servidor** | Nitro |
| **Escritorio** | Electron 35 |
| **CLI** | `op` — control desde terminal, DSL de diseño por lotes, exportación de código |
| **CLI** | `op` — control desde terminal, DSL de diseño por lotes |
| **IA** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Formato de archivo** | `.op` — basado en JSON, legible por humanos, compatible con Git |

5
README.fr.md
View file

@ -89,7 +89,7 @@ Application web + bureau natif sur macOS, Windows et Linux via Electron. Mises
### ⌨️ CLI — `op`
Contrôlez l'outil de design depuis le terminal. `op design`, `op insert`, `op export` — DSL de design par lots, manipulation de nœuds, export de code. Entrée par pipe depuis des fichiers ou stdin. Fonctionne avec l'app de bureau ou le serveur web.
Contrôlez l'outil de design depuis le terminal. `op design`, `op insert` — DSL de design par lots, manipulation de nœuds. Entrée par pipe depuis des fichiers ou stdin. Fonctionne avec l'app de bureau ou le serveur web.
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # Lancer l'app de bureau
op design @landing.txt # Design par lots depuis un fichier
op insert '{"type":"RECT"}' # Insérer un nœud
op export react --out . # Exporter en React + Tailwind
op import:figma design.fig # Importer un fichier Figma
cat design.dsl | op design - # Pipe depuis stdin
```
@ -294,7 +293,7 @@ Supporte trois méthodes d'entrée : chaîne en ligne, `@filepath` (lecture depu
| **État** | Zustand v5 |
| **Serveur** | Nitro |
| **Bureau** | Electron 35 |
| **CLI** | `op` — contrôle depuis le terminal, DSL de design par lots, export de code |
| **CLI** | `op` — contrôle depuis le terminal, DSL de design par lots |
| **IA** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Format de fichier** | `.op` — basé sur JSON, lisible par l'humain, compatible Git |

5
README.hi.md
View file

@ -89,7 +89,7 @@ Claude Code, Codex, Gemini, OpenCode, Kiro, या Copilot CLIs में वन
### ⌨️ CLI — `op`
अपने टर्मिनल से डिज़ाइन टूल को नियंत्रित करें। `op design`, `op insert`, `op export` — बैच डिज़ाइन DSL, नोड मैनिपुलेशन, कोड एक्सपोर्ट। फ़ाइलों या stdin से पाइप करें। डेस्कटॉप ऐप या वेब सर्वर के साथ काम करता है।
अपने टर्मिनल से डिज़ाइन टूल को नियंत्रित करें। `op design`, `op insert` — बैच डिज़ाइन DSL, नोड मैनिपुलेशन। फ़ाइलों या stdin से पाइप करें। डेस्कटॉप ऐप या वेब सर्वर के साथ काम करता है।
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # डेस्कटॉप ऐप लॉन्च करें
op design @landing.txt # फ़ाइल से बैच डिज़ाइन
op insert '{"type":"RECT"}' # एक नोड डालें
op export react --out . # React + Tailwind में एक्सपोर्ट
op import:figma design.fig # Figma फ़ाइल इम्पोर्ट करें
cat design.dsl | op design - # stdin से पाइप करें
```
@ -294,7 +293,7 @@ cat design.dsl | op design - # stdin से पाइप करें
| **स्टेट** | Zustand v5 |
| **सर्वर** | Nitro |
| **डेस्कटॉप** | Electron 35 |
| **CLI** | `op` — टर्मिनल नियंत्रण, बैच डिज़ाइन DSL, कोड एक्सपोर्ट |
| **CLI** | `op` — टर्मिनल नियंत्रण, बैच डिज़ाइन DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **रनटाइम** | Bun · Vite 7 |
| **फ़ाइल फ़ॉर्मेट** | `.op` — JSON-आधारित, मानव-पठनीय, Git-फ्रेंडली |

5
README.id.md
View file

@ -89,7 +89,7 @@ Aplikasi web + desktop native di macOS, Windows, dan Linux melalui Electron. Pem
### ⌨️ CLI — `op`
Kontrol alat desain dari terminal Anda. `op design`, `op insert`, `op export` — batch design DSL, manipulasi node, ekspor kode. Pipe dari file atau stdin. Bekerja dengan aplikasi desktop atau web server.
Kontrol alat desain dari terminal Anda. `op design`, `op insert` — batch design DSL, manipulasi node. Pipe dari file atau stdin. Bekerja dengan aplikasi desktop atau web server.
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # Jalankan aplikasi desktop
op design @landing.txt # Desain batch dari file
op insert '{"type":"RECT"}' # Sisipkan sebuah node
op export react --out . # Ekspor ke React + Tailwind
op import:figma design.fig # Impor file Figma
cat design.dsl | op design - # Pipe dari stdin
```
@ -294,7 +293,7 @@ Mendukung tiga metode input: string inline, `@filepath` (baca dari file), atau `
| **State** | Zustand v5 |
| **Server** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — kontrol terminal, batch design DSL, ekspor kode |
| **CLI** | `op` — kontrol terminal, batch design DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Format file** | `.op` — berbasis JSON, mudah dibaca manusia, ramah Git |

5
README.ja.md
View file

@ -89,7 +89,7 @@ Web アプリ + Electron による macOS・Windows・Linux ネイティブデス
### ⌨️ CLI — `op`
ターミナルからデザインツールを操作。`op design`、`op insert`、`op export` — バッチデザインDSL、ノード操作、コードエクスポート。ファイルやstdinからのパイプ入力に対応。デスクトップアプリまたはWebサーバーと連携。
ターミナルからデザインツールを操作。`op design`、`op insert` — バッチデザインDSL、ノード操作。ファイルやstdinからのパイプ入力に対応。デスクトップアプリまたはWebサーバーと連携。
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # デスクトップアプリを起動
op design @landing.txt # ファイルからバッチデザイン
op insert '{"type":"RECT"}' # ノードを挿入
op export react --out . # React + Tailwind にエクスポート
op import:figma design.fig # Figma ファイルをインポート
cat design.dsl | op design - # stdin からパイプ入力
```
@ -294,7 +293,7 @@ cat design.dsl | op design - # stdin からパイプ入力
| **状態管理** | Zustand v5 |
| **サーバー** | Nitro |
| **デスクトップ** | Electron 35 |
| **CLI** | `op` — ターミナル制御、バッチデザインDSL、コードエクスポート |
| **CLI** | `op` — ターミナル制御、バッチデザインDSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **ランタイム** | Bun · Vite 7 |
| **ファイル形式** | `.op` — JSON ベース、人間が読みやすく、Git フレンドリー |

5
README.ko.md
View file

@ -89,7 +89,7 @@ Claude Code, Codex, Gemini, OpenCode, Kiro 또는 Copilot CLI에 원클릭 설
### ⌨️ CLI — `op`
터미널에서 디자인 도구 제어. `op design`, `op insert`, `op export` — 배치 디자인 DSL, 노드 조작, 코드 내보내기. 파일이나 stdin에서 파이프 입력 지원. 데스크톱 앱 또는 웹 서버와 연동.
터미널에서 디자인 도구 제어. `op design`, `op insert` — 배치 디자인 DSL, 노드 조작. 파일이나 stdin에서 파이프 입력 지원. 데스크톱 앱 또는 웹 서버와 연동.
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # 데스크톱 앱 실행
op design @landing.txt # 파일에서 배치 디자인
op insert '{"type":"RECT"}' # 노드 삽입
op export react --out . # React + Tailwind로 내보내기
op import:figma design.fig # Figma 파일 가져오기
cat design.dsl | op design - # stdin에서 파이프 입력
```
@ -294,7 +293,7 @@ cat design.dsl | op design - # stdin에서 파이프 입력
| **상태 관리** | Zustand v5 |
| **서버** | Nitro |
| **데스크톱** | Electron 35 |
| **CLI** | `op` — 터미널 제어, 배치 디자인 DSL, 코드 내보내기 |
| **CLI** | `op` — 터미널 제어, 배치 디자인 DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **런타임** | Bun · Vite 7 |
| **파일 형식** | `.op` — JSON 기반, 사람이 읽을 수 있는, Git 친화적 |

5
README.md
View file

@ -96,7 +96,7 @@ Web app + native desktop on macOS, Windows, and Linux via Electron. Auto-updates
### ⌨️ CLI — `op`
Control the design tool from your terminal. `op design`, `op insert`, `op export` — batch design DSL, node manipulation, code export. Pipe in from files or stdin. Works with desktop app or web server.
Control the design tool from your terminal. `op design`, `op insert` — batch design DSL, node manipulation. Pipe in from files or stdin. Works with desktop app or web server.
</td>
</tr>
@ -275,7 +275,6 @@ npm install -g @zseven-w/openpencil
op start # Launch desktop app
op design @landing.txt # Batch design from file
op insert '{"type":"RECT"}' # Insert a node
op export react --out . # Export to React + Tailwind
op import:figma design.fig # Import Figma file
cat design.dsl | op design - # Pipe from stdin
```
@ -350,7 +349,7 @@ Supports three input methods: inline string, `@filepath` (read from file), or `-
| **State** | Zustand v5 |
| **Server** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — terminal control, batch design DSL, code export |
| **CLI** | `op` — terminal control, batch design DSL |
| **AI** | agent-native (Zig NAPI) · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Lint** | oxlint · oxfmt |

5
README.pt.md
View file

@ -89,7 +89,7 @@ App web + desktop nativo no macOS, Windows e Linux via Electron. Atualização a
### ⌨️ CLI — `op`
Controle a ferramenta de design pelo terminal. `op design`, `op insert`, `op export` — DSL de design em lote, manipulação de nós, exportação de código. Entrada por pipe de arquivos ou stdin. Funciona com o app desktop ou servidor web.
Controle a ferramenta de design pelo terminal. `op design`, `op insert` — DSL de design em lote, manipulação de nós. Entrada por pipe de arquivos ou stdin. Funciona com o app desktop ou servidor web.
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # Iniciar app desktop
op design @landing.txt # Design em lote a partir de arquivo
op insert '{"type":"RECT"}' # Inserir um nó
op export react --out . # Exportar para React + Tailwind
op import:figma design.fig # Importar arquivo Figma
cat design.dsl | op design - # Entrada por pipe via stdin
```
@ -294,7 +293,7 @@ Suporta três métodos de entrada: string inline, `@filepath` (ler de arquivo) o
| **Estado** | Zustand v5 |
| **Servidor** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — controle pelo terminal, DSL de design em lote, exportação de código |
| **CLI** | `op` — controle pelo terminal, DSL de design em lote |
| **IA** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Formato de arquivo** | `.op` — baseado em JSON, legível por humanos, compatível com Git |

5
README.ru.md
View file

@ -89,7 +89,7 @@
### ⌨️ CLI — `op`
Управляйте инструментом дизайна из терминала. `op design`, `op insert`, `op export` — пакетный DSL дизайна, манипуляция узлами, экспорт кода. Ввод через pipe из файлов или stdin. Работает с десктопным приложением или веб-сервером.
Управляйте инструментом дизайна из терминала. `op design`, `op insert` — пакетный DSL дизайна, манипуляция узлами. Ввод через pipe из файлов или stdin. Работает с десктопным приложением или веб-сервером.
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # Запустить десктопное приложение
op design @landing.txt # Пакетный дизайн из файла
op insert '{"type":"RECT"}' # Вставить узел
op export react --out . # Экспорт в React + Tailwind
op import:figma design.fig # Импортировать файл Figma
cat design.dsl | op design - # Передача через stdin
```
@ -294,7 +293,7 @@ cat design.dsl | op design - # Передача через stdin
| **Состояние** | Zustand v5 |
| **Сервер** | Nitro |
| **Десктоп** | Electron 35 |
| **CLI** | `op` — управление из терминала, пакетный DSL дизайна, экспорт кода |
| **CLI** | `op` — управление из терминала, пакетный DSL дизайна |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Среда выполнения** | Bun · Vite 7 |
| **Формат файла** | `.op` — на основе JSON, удобочитаемый, дружественный к Git |

5
README.th.md
View file

@ -89,7 +89,7 @@ Orchestrator แบ่งหน้าที่ซับซ้อนออกเ
### ⌨️ CLI — `op`
ควบคุมเครื่องมือออกแบบจาก terminal ของคุณ `op design`, `op insert`, `op export` — batch design DSL, จัดการ node, ส่งออกโค้ด Pipe จากไฟล์หรือ stdin ทำงานร่วมกับแอปเดสก์ท็อปหรือ web server
ควบคุมเครื่องมือออกแบบจาก terminal ของคุณ `op design`, `op insert` — batch design DSL, จัดการ node Pipe จากไฟล์หรือ stdin ทำงานร่วมกับแอปเดสก์ท็อปหรือ web server
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # เปิดแอปเดสก์ท็อป
op design @landing.txt # ออกแบบแบบ batch จากไฟล์
op insert '{"type":"RECT"}' # แทรก node
op export react --out . # ส่งออกเป็น React + Tailwind
op import:figma design.fig # นำเข้าไฟล์ Figma
cat design.dsl | op design - # Pipe จาก stdin
```
@ -294,7 +293,7 @@ cat design.dsl | op design - # Pipe จาก stdin
| **State** | Zustand v5 |
| **Server** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — ควบคุมจาก terminal, batch design DSL, ส่งออกโค้ด |
| **CLI** | `op` — ควบคุมจาก terminal, batch design DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **รูปแบบไฟล์** | `.op` — ใช้ JSON, อ่านได้โดยมนุษย์, Git-friendly |

5
README.tr.md
View file

@ -89,7 +89,7 @@ Web uygulaması + Electron ile macOS, Windows ve Linux'ta yerel masaüstü. GitH
### ⌨️ CLI — `op`
Tasarım aracını terminalinizden kontrol edin. `op design`, `op insert`, `op export` — toplu tasarım DSL, düğüm manipülasyonu, kod dışa aktarımı. Dosyalardan veya stdin'den pipe ile besleyin. Masaüstü uygulama veya web sunucusuyla çalışır.
Tasarım aracını terminalinizden kontrol edin. `op design`, `op insert` — toplu tasarım DSL, düğüm manipülasyonu. Dosyalardan veya stdin'den pipe ile besleyin. Masaüstü uygulama veya web sunucusuyla çalışır.
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # Masaüstü uygulamayı başlat
op design @landing.txt # Dosyadan toplu tasarım
op insert '{"type":"RECT"}' # Bir düğüm ekle
op export react --out . # React + Tailwind'e dışa aktar
op import:figma design.fig # Figma dosyasını içe aktar
cat design.dsl | op design - # stdin'den pipe ile besle
```
@ -294,7 +293,7 @@ cat design.dsl | op design - # stdin'den pipe ile besle
| **Durum Yönetimi** | Zustand v5 |
| **Sunucu** | Nitro |
| **Masaüstü** | Electron 35 |
| **CLI** | `op` — terminal kontrolü, toplu tasarım DSL, kod dışa aktarımı |
| **CLI** | `op` — terminal kontrolü, toplu tasarım DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Çalışma Ortamı** | Bun · Vite 7 |
| **Dosya Formatı** | `.op` — JSON tabanlı, insan tarafından okunabilir, Git dostu |

5
README.vi.md
View file

@ -89,7 +89,7 @@ Tệp `.op` là JSON — dễ đọc, thân thiện Git, dễ so sánh khác bi
### ⌨️ CLI — `op`
Điều khiển công cụ thiết kế từ terminal của bạn. `op design`, `op insert`, `op export` — batch design DSL, thao tác node, xuất mã. Pipe từ tệp hoặc stdin. Hoạt động với ứng dụng desktop hoặc web server.
Điều khiển công cụ thiết kế từ terminal của bạn. `op design`, `op insert` — batch design DSL, thao tác node. Pipe từ tệp hoặc stdin. Hoạt động với ứng dụng desktop hoặc web server.
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # Khởi chạy ứng dụng desktop
op design @landing.txt # Thiết kế hàng loạt từ tệp
op insert '{"type":"RECT"}' # Chèn một node
op export react --out . # Xuất sang React + Tailwind
op import:figma design.fig # Nhập tệp Figma
cat design.dsl | op design - # Pipe từ stdin
```
@ -294,7 +293,7 @@ Hỗ trợ ba phương thức nhập liệu: chuỗi inline, `@filepath` (đọc
| **Trạng thái** | Zustand v5 |
| **Máy chủ** | Nitro |
| **Desktop** | Electron 35 |
| **CLI** | `op` — điều khiển từ terminal, batch design DSL, xuất mã |
| **CLI** | `op` — điều khiển từ terminal, batch design DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **Runtime** | Bun · Vite 7 |
| **Định dạng tệp** | `.op` — dựa trên JSON, dễ đọc, thân thiện với Git |

5
README.zh-TW.md
View file

@ -89,7 +89,7 @@ Web 應用程式 + 透過 Electron 在 macOS、Windows 和 Linux 上原生執行
### ⌨️ CLI — `op`
從終端機控制設計工具。`op design`、`op insert`、`op export` — 批次設計 DSL、節點操作、程式碼匯出。支援從檔案或 stdin 管道輸入。可搭配桌面應用程式或 Web 伺服器使用。
從終端機控制設計工具。`op design`、`op insert` — 批次設計 DSL、節點操作。支援從檔案或 stdin 管道輸入。可搭配桌面應用程式或 Web 伺服器使用。
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # 啟動桌面應用程式
op design @landing.txt # 從檔案批次設計
op insert '{"type":"RECT"}' # 插入節點
op export react --out . # 匯出為 React + Tailwind
op import:figma design.fig # 匯入 Figma 檔案
cat design.dsl | op design - # 從 stdin 管道輸入
```
@ -294,7 +293,7 @@ cat design.dsl | op design - # 從 stdin 管道輸入
| **狀態管理** | Zustand v5 |
| **伺服器** | Nitro |
| **桌面端** | Electron 35 |
| **CLI** | `op` — 終端機控制、批次設計 DSL、程式碼匯出 |
| **CLI** | `op` — 終端機控制、批次設計 DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **執行環境** | Bun · Vite 7 |
| **檔案格式** | `.op` — 基於 JSON，人類可讀，對 Git 友好 |

5
README.zh.md
View file

@ -89,7 +89,7 @@ Web 应用 + 通过 Electron 支持 macOS、Windows 和 Linux 原生桌面端。
### ⌨️ CLI — `op`
从终端控制设计工具。`op design`、`op insert`、`op export` — 批量设计 DSL、节点操作、代码导出。支持从文件或 stdin 管道输入。可搭配桌面应用或 Web 服务器使用。
从终端控制设计工具。`op design`、`op insert` — 批量设计 DSL、节点操作。支持从文件或 stdin 管道输入。可搭配桌面应用或 Web 服务器使用。
</td>
<td width="50%">
@ -220,7 +220,6 @@ npm install -g @zseven-w/openpencil
op start # 启动桌面应用
op design @landing.txt # 从文件批量设计
op insert '{"type":"RECT"}' # 插入节点
op export react --out . # 导出为 React + Tailwind
op import:figma design.fig # 导入 Figma 文件
cat design.dsl | op design - # 从 stdin 管道输入
```
@ -294,7 +293,7 @@ cat design.dsl | op design - # 从 stdin 管道输入
| **状态管理** | Zustand v5 |
| **服务器** | Nitro |
| **桌面端** | Electron 35 |
| **CLI** | `op` — 终端控制、批量设计 DSL、代码导出 |
| **CLI** | `op` — 终端控制、批量设计 DSL |
| **AI** | Vercel AI SDK v6 · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK |
| **运行时** | Bun · Vite 7 |
| **文件格式** | `.op` — 基于 JSON，人类可读，对 Git 友好 |

2
apps/cli/CLAUDE.md
View file

@ -15,7 +15,7 @@ apps/cli/
│ ├── app.ts start, stop, status
│ ├── design.ts design, design:skeleton, design:content, design:refine
│ ├── document.ts open, save, get, selection
│ ├── export.ts export (react, html, vue, svelte, flutter, swiftui, compose, rn, css)
│ ├── codegen.ts codegen:plan, codegen:submit, codegen:assemble, codegen:clean
│ ├── import.ts import:svg, import:figma
│ ├── install.ts install, uninstall (openpencil-skill for AI agents)
│ ├── layout.ts layout, find-space

7
apps/cli/README.de.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### Code-Export
```bash
op export <format> [--out file]
# Formate: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### Variablen und Themes
```bash

7
apps/cli/README.es.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### Exportacion de codigo
```bash
op export <format> [--out file]
# Formatos: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### Variables y temas
```bash

7
apps/cli/README.fr.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### Export de code
```bash
op export <format> [--out file]
# Formats : react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### Variables et themes
```bash

7
apps/cli/README.hi.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### कोड निर्यात
```bash
op export <format> [--out file]
# प्रारूप: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### वेरिएबल और थीम
```bash

7
apps/cli/README.id.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### Ekspor Kode
```bash
op export <format> [--out file]
# Format: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### Variabel & Tema
```bash

7
apps/cli/README.ja.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### コードエクスポート
```bash
op export <format> [--out file]
# フォーマット: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### 変数とテーマ
```bash

7
apps/cli/README.ko.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### 코드 내보내기
```bash
op export <format> [--out file]
# 형식: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### 변수 및 테마
```bash

7
apps/cli/README.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### Code Export
```bash
op export <format> [--out file]
# Formats: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### Variables & Themes
```bash

7
apps/cli/README.pt.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### Exportacao de Codigo
```bash
op export <format> [--out file]
# Formatos: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### Variaveis e Temas
```bash

7
apps/cli/README.ru.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### Экспорт кода
```bash
op export <format> [--out file]
# Форматы: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### Переменные и темы
```bash

7
apps/cli/README.th.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### การส่งออกโค้ด
```bash
op export <format> [--out file]
# รูปแบบ: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### ตัวแปรและธีม
```bash

7
apps/cli/README.tr.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### Kod Disari Aktarimi
```bash
op export <format> [--out dosya]
# Formatlar: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### Degiskenler ve Temalar
```bash

7
apps/cli/README.vi.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### Xuất mã nguồn
```bash
op export <format> [--out file]
# Định dạng: react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### Biến và giao diện
```bash

7
apps/cli/README.zh-TW.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### 程式碼匯出
```bash
op export <format> [--out file]
# 格式：react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### 變數與主題
```bash

7
apps/cli/README.zh.md
View file

@ -73,13 +73,6 @@ op copy <id> [--parent P]
op replace <id> <json> [--post-process]
```
### 代码导出
```bash
op export <format> [--out file]
# 格式：react, html, vue, svelte, flutter, swiftui, compose, rn, css
```
### 变量与主题
```bash

2
apps/cli/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/openpencil",
"version": "0.7.4",
"version": "0.7.5",
"description": "CLI for OpenPencil — control the design tool from your terminal",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/apps/cli",
"bugs": {

2
apps/desktop/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/desktop",
"version": "0.7.4",
"version": "0.7.5",
"private": true,
"type": "module"
}

2
apps/web/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/web",
"version": "0.7.4",
"version": "0.7.5",
"private": true,
"type": "module",
"dependencies": {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "openpencil",
"version": "0.7.4",
"version": "0.7.5",
"private": true,
"description": "The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.",
"author": {

2
packages/pen-acp/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-acp",
"version": "0.7.4",
"version": "0.7.5",
"description": "ACP (Agent Client Protocol) client for OpenPencil — connect to external ACP agents",
"files": [
"src"

2
packages/pen-ai-skills/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-ai-skills",
"version": "0.7.4",
"version": "0.7.5",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-ai-skills",
"bugs": {
"url": "https://github.com/ZSeven-W/openpencil/issues"

2
packages/pen-core/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-core",
"version": "0.7.4",
"version": "0.7.5",
"description": "Core document operations, tree utils, variables, layout engine for OpenPencil",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-core",
"bugs": {

2
packages/pen-engine/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-engine",
"version": "0.7.4",
"version": "0.7.5",
"description": "Headless design engine for OpenPencil — zero framework dependencies",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-engine",
"bugs": {

2
packages/pen-figma/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-figma",
"version": "0.7.4",
"version": "0.7.5",
"description": "Figma .fig file parser and converter for OpenPencil",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-figma",
"bugs": {

40
packages/pen-mcp/README.md
View file

@ -2,13 +2,7 @@
[MCP](https://modelcontextprotocol.io/) server for [OpenPencil](https://github.com/ZSeven-W/openpencil) — enables Claude, GPT, Gemini, and other LLMs to read, create, and modify designs through a standard tool protocol.
## Install
```bash
npm install @zseven-w/pen-mcp
# or
bun add @zseven-w/pen-mcp
```
> **Note:** `pen-mcp` is shipped as part of the OpenPencil app (desktop + web) and is **not a standalone CLI**. The published package ships TypeScript source against workspace-only dependencies and has no `bin` entry, so `npx @zseven-w/pen-mcp` does not work. Run the server from the OpenPencil monorepo or connect external clients to the HTTP endpoint exposed by a running OpenPencil instance.
## Overview
@ -22,28 +16,26 @@ Three workflows are supported:
| **Layered** | `design_skeleton` → `design_content` × N → `design_refine` | Full-page designs with high fidelity |
| **CRUD** | `batch_get` → `update_node` / `delete_node` | Reading & modifying existing content |
## Quick Start
## Running the MCP Server
The server supports both **stdio** and **streamable HTTP** transports. The default HTTP endpoint is `http://localhost:3100/mcp`.
### From the monorepo (development)
```bash
# Run as stdio MCP server (for Claude Desktop, Cursor, etc.)
npx @zseven-w/pen-mcp
# Or connect to a running OpenPencil instance
op mcp:dev
git clone https://github.com/ZSeven-W/openpencil.git
cd openpencil && bun install
bun run mcp:dev # starts stdio + HTTP on port 3100
# flags: --http (HTTP only), --stdio (stdio only), --port <n>
```
### Claude Desktop Configuration
### Built-in to the OpenPencil app
```json
{
"mcpServers": {
"openpencil": {
"command": "npx",
"args": ["@zseven-w/pen-mcp"]
}
}
}
```
Launching the desktop or web app automatically starts the MCP server in the background. External MCP clients should connect over HTTP to the running instance — no separate install required.
### Connecting an MCP client
Most MCP-aware clients (Claude Desktop, Cursor, Continue, etc.) accept an HTTP URL pointing at a running server. Point them at `http://localhost:3100/mcp` while the OpenPencil app or `bun run mcp:dev` is running.
## Tools

2
packages/pen-mcp/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-mcp",
"version": "0.7.4",
"version": "0.7.5",
"description": "MCP server, document manager, and tools for OpenPencil",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-mcp",
"bugs": {

2
packages/pen-react/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-react",
"version": "0.7.4",
"version": "0.7.5",
"description": "React UI SDK for OpenPencil — hooks, components, and state bridges for pen-engine",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-react",
"bugs": {

2
packages/pen-renderer/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-renderer",
"version": "0.7.4",
"version": "0.7.5",
"description": "Standalone CanvasKit/Skia renderer for OpenPencil (.op) design files",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-renderer",
"bugs": {

2
packages/pen-sdk/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-sdk",
"version": "0.7.4",
"version": "0.7.5",
"description": "OpenPencil SDK — parse, manipulate, and generate code from .op design files",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-sdk",
"bugs": {

2
packages/pen-types/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@zseven-w/pen-types",
"version": "0.7.4",
"version": "0.7.5",
"description": "Type definitions for OpenPencil document model",
"homepage": "https://github.com/ZSeven-W/openpencil/tree/main/packages/pen-types",
"bugs": {