Add AI agent skill to README and docs

- README: new 'AI Agent Skill' section with install command
- MCP tools reference: skill section, fix tool count 78→90,
  add 10 missing tools (export_image, export_svg, flatten_nodes,
  list_fonts, page_bounds, set_layout_child, set_text_properties,
  viewport_get, viewport_set, viewport_zoom_to_fit)
- Features page: mention skill with install command
- All 6 locales updated
This commit is contained in:
Danila Poyarkov 2026-03-08 01:08:28 +03:00
parent e6984629fd
commit 0109d33846
13 changed files with 103 additions and 1 deletions

View file

@ -145,6 +145,16 @@ Security defaults for HTTP transport:
90 tools: create shapes, set fills/strokes/layout, variables, vectors, boolean ops, viewport, find nodes, open/save `.fig` files, render JSX to design nodes.
## AI Agent Skill
Teach your AI coding agent to use OpenPencil — inspect designs, export assets, analyze tokens, modify .fig files:
```sh
npx skills add open-pencil/skills@open-pencil
```
Works with Claude Code, Cursor, Windsurf, Codex, and any agent that supports [skills](https://skills.sh).
## Scripts
| Command | Description |

View file

@ -227,6 +227,8 @@ Ein HUD-Overlay zeigt Frame-Timing, GPU-Phasen und Frame-Budget. Zugänglich üb
Integrierter KI-Assistent über den KI-Tab oder <kbd></kbd><kbd>J</kbd>. Kommuniziert direkt mit OpenRouter. **87 Werkzeuge** für Lesen, Erstellen, Ändern und Organisieren von Design-Elementen. **MCP-Server** für externe KI-Coding-Tools.
**AI agent skill** — `npx skills add open-pencil/skills@open-pencil` — teaches AI coding agents to use the CLI, MCP tools, and automation bridge. Source: [open-pencil/skills](https://github.com/open-pencil/skills).
## @open-pencil/core & CLI
Die Engine ist in `packages/core/` extrahiert. CLI bietet headless .fig-Dateioperationen:

View file

@ -73,6 +73,16 @@ Starts on port 3100 (override with `PORT` env var). Endpoints:
5. **Structure**`reparent_node`, `group_nodes`, `clone_node`, `delete_node`
6. **Save**`save_file` to write back to `.fig`
## AI Agent Skill
Install the OpenPencil skill for your AI coding agent:
```sh
npx skills add open-pencil/skills@open-pencil
```
Works with Claude Code, Cursor, Windsurf, Codex, and any agent that supports [skills](https://skills.sh).
## Tools (75)
### Document

View file

@ -168,6 +168,8 @@ Asistente IA integrado accesible vía la pestaña IA o <kbd>⌘</kbd><kbd>J</kbd
**87 herramientas** definidas en `packages/core/src/tools/`, cubriendo: operaciones de lectura, creación, modificación, manipulación de nodos, CRUD de variables, herramientas de rutas vectoriales, control de viewport y un escape hatch `eval`. Las herramientas están conectadas al chat IA (schemas valibot), servidor MCP (schemas zod) y CLI (comando `eval`).
**AI agent skill** — `npx skills add open-pencil/skills@open-pencil` — teaches AI coding agents to use the CLI, MCP tools, and automation bridge. Source: [open-pencil/skills](https://github.com/open-pencil/skills).
**Servidor MCP** (`packages/mcp/`) expone todas las herramientas para herramientas de codificación IA externas. Dos transportes: stdio y HTTP con Hono. Añade 3 herramientas de gestión de archivos sobre las 87 herramientas core (= 90 en total).
## Exportación SVG

View file

@ -73,6 +73,16 @@ Starts on port 3100 (override with `PORT` env var). Endpoints:
5. **Structure**`reparent_node`, `group_nodes`, `clone_node`, `delete_node`
6. **Save**`save_file` to write back to `.fig`
## AI Agent Skill
Install the OpenPencil skill for your AI coding agent:
```sh
npx skills add open-pencil/skills@open-pencil
```
Works with Claude Code, Cursor, Windsurf, Codex, and any agent that supports [skills](https://skills.sh).
## Tools (75)
### Document

View file

@ -154,6 +154,8 @@ Création programmable via TreeNode builders. Props shorthand style Tailwind.
Assistant IA intégré via <kbd></kbd><kbd>J</kbd>. **87 outils** dans `packages/core/src/tools/` couvrant lecture, création, modification, manipulation de nœuds, CRUD variables, outils vectoriels, contrôle viewport et `eval`. **Serveur MCP** expose 90 outils au total (87 core + 3 gestion fichiers) pour les outils de codage IA externes.
**AI agent skill** — `npx skills add open-pencil/skills@open-pencil` — teaches AI coding agents to use the CLI, MCP tools, and automation bridge. Source: [open-pencil/skills](https://github.com/open-pencil/skills).
## Export SVG
Exporte les nœuds sélectionnés en PNG, JPG, WEBP ou SVG. CLI : `bun open-pencil export --format svg file.fig`.

View file

@ -73,6 +73,16 @@ Starts on port 3100 (override with `PORT` env var). Endpoints:
5. **Structure**`reparent_node`, `group_nodes`, `clone_node`, `delete_node`
6. **Save**`save_file` to write back to `.fig`
## AI Agent Skill
Install the OpenPencil skill for your AI coding agent:
```sh
npx skills add open-pencil/skills@open-pencil
```
Works with Claude Code, Cursor, Windsurf, Codex, and any agent that supports [skills](https://skills.sh).
## Tools (75)
### Document

View file

@ -336,6 +336,8 @@ Built-in AI assistant accessible via the AI tab in the properties panel or <kbd>
**MCP server** (`packages/mcp/`) exposes all tools for external AI coding tools. Two transports: stdio for Claude Code/Cursor/Windsurf (`openpencil-mcp`), HTTP with Hono + Streamable HTTP for scripts and CI (`openpencil-mcp-http`). Adds 3 file management tools (`open_file`, `save_file`, `new_document`) on top of the 87 core tools, for 90 total. Runs on Bun and Node.js. See [MCP Tools reference](/reference/mcp-tools).
**AI agent skill** — install with `npx skills add open-pencil/skills@open-pencil`. Teaches AI coding agents (Claude Code, Cursor, Windsurf, Codex) to use the CLI, MCP tools, JSX rendering, eval, and the app's automation bridge. Source: [open-pencil/skills](https://github.com/open-pencil/skills).
**CLI-to-app RPC bridge** — when the desktop app is running, CLI commands automatically connect to it via WebSocket instead of requiring a .fig file. Run `bun open-pencil tree` to inspect the live document, or `bun open-pencil export` to render the current canvas.
Tested with Playwright using mock transport for CI (chat), bun:test for tool execution (MCP).

View file

@ -154,6 +154,8 @@ Creazione programmabile via TreeNode builder. Props shorthand stile Tailwind.
Assistente IA integrato via <kbd></kbd><kbd>J</kbd>. **87 strumenti** in `packages/core/src/tools/` che coprono lettura, creazione, modifica, manipolazione nodi, CRUD variabili, strumenti vettoriali, controllo viewport e `eval`. **Server MCP** espone 90 strumenti totali (87 core + 3 gestione file) per strumenti di codifica IA esterni.
**AI agent skill** — `npx skills add open-pencil/skills@open-pencil` — teaches AI coding agents to use the CLI, MCP tools, and automation bridge. Source: [open-pencil/skills](https://github.com/open-pencil/skills).
## Export SVG
Esporta i nodi selezionati come PNG, JPG, WEBP o SVG. CLI: `bun open-pencil export --format svg file.fig`.

View file

@ -73,6 +73,16 @@ Starts on port 3100 (override with `PORT` env var). Endpoints:
5. **Structure**`reparent_node`, `group_nodes`, `clone_node`, `delete_node`
6. **Save**`save_file` to write back to `.fig`
## AI Agent Skill
Install the OpenPencil skill for your AI coding agent:
```sh
npx skills add open-pencil/skills@open-pencil
```
Works with Claude Code, Cursor, Windsurf, Codex, and any agent that supports [skills](https://skills.sh).
## Tools (75)
### Document

View file

@ -154,6 +154,8 @@ Programistyczne tworzenie designu przez buildery TreeNode. Propsy shorthand w st
Wbudowany asystent AI przez <kbd></kbd><kbd>J</kbd>. **87 narzędzi** w `packages/core/src/tools/` obejmujących: odczyt, tworzenie, modyfikację, manipulację węzłów, CRUD zmiennych, narzędzia wektorowe, kontrolę viewportu i `eval`. **Serwer MCP** udostępnia 90 narzędzi łącznie (87 core + 3 zarządzanie plikami) dla zewnętrznych narzędzi kodowania AI.
**AI agent skill** — `npx skills add open-pencil/skills@open-pencil` — teaches AI coding agents to use the CLI, MCP tools, and automation bridge. Source: [open-pencil/skills](https://github.com/open-pencil/skills).
## Eksport SVG
Eksportuje wybrane węzły jako PNG, JPG, WEBP lub SVG. CLI: `bun open-pencil export --format svg file.fig`.

View file

@ -73,6 +73,16 @@ Starts on port 3100 (override with `PORT` env var). Endpoints:
5. **Structure**`reparent_node`, `group_nodes`, `clone_node`, `delete_node`
6. **Save**`save_file` to write back to `.fig`
## AI Agent Skill
Install the OpenPencil skill for your AI coding agent:
```sh
npx skills add open-pencil/skills@open-pencil
```
Works with Claude Code, Cursor, Windsurf, Codex, and any agent that supports [skills](https://skills.sh).
## Tools (75)
### Document

View file

@ -81,7 +81,17 @@ Server starts on port 3100 (override with `PORT` env var). Endpoints:
5. **Structure**`reparent_node`, `group_nodes`, `clone_node`, `delete_node`
6. **Save**`save_file` to write back to `.fig`
## Tools (78)
## AI Agent Skill
Teach your AI coding agent to use OpenPencil tools:
```sh
npx skills add open-pencil/skills@open-pencil
```
Works with Claude Code, Cursor, Windsurf, Codex, and any agent that supports [skills](https://skills.sh). The skill covers the CLI, MCP tools, JSX rendering, eval, and the running app's automation bridge.
## Tools (90)
### Document
@ -104,6 +114,8 @@ Server starts on port 3100 (override with `PORT` env var). Endpoints:
| `list_pages` | List all pages |
| `list_variables` | List design variables |
| `list_collections` | List variable collections |
| `list_fonts` | List fonts used in the current page |
| `page_bounds` | Get bounding box of all objects on the current page |
| `node_bounds` | Get bounding box of a node |
| `node_ancestors` | Get ancestor chain of a node |
| `node_children` | Get direct children of a node |
@ -145,6 +157,8 @@ Server starts on port 3100 (override with `PORT` env var). Endpoints:
| `set_blend` | Set blend mode |
| `set_locked` | Lock or unlock a node |
| `set_stroke_align` | Set stroke alignment (inside/center/outside) |
| `set_text_properties` | Set text layout: alignment, auto-resize, text case, decoration, truncation |
| `set_layout_child` | Configure auto-layout child: sizing, grow, alignment, absolute positioning |
| `node_move` | Move a node to a new position |
| `node_resize` | Resize a node |
| `node_replace_with` | Replace a node with another node |
@ -161,6 +175,7 @@ Server starts on port 3100 (override with `PORT` env var). Endpoints:
| `select_nodes` | Select nodes by ID |
| `group_nodes` | Group nodes |
| `ungroup_node` | Ungroup a group |
| `flatten_nodes` | Flatten nodes into a single vector |
| `boolean_union` | Boolean union of two or more nodes |
| `boolean_subtract` | Boolean subtraction |
| `boolean_intersect` | Boolean intersection |
@ -176,6 +191,21 @@ Server starts on port 3100 (override with `PORT` env var). Endpoints:
| `path_flip` | Flip a vector path horizontally or vertically |
| `path_move` | Translate a vector path |
### Export
| Tool | Description |
|------|-------------|
| `export_image` | Export nodes as PNG, JPG, or WEBP. Returns base64-encoded image data |
| `export_svg` | Export nodes as SVG markup |
### Viewport
| Tool | Description |
|------|-------------|
| `viewport_get` | Get current viewport position and zoom level |
| `viewport_set` | Set viewport position and zoom |
| `viewport_zoom_to_fit` | Zoom viewport to fit specified nodes |
### Variables
| Tool | Description |