Danila Poyarkov 0109d33846 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

2026-03-08 01:08:28 +03:00

3.9 KiB

Raw Blame History

Serwer MCP

OpenPencil zawiera serwer MCP (Model Context Protocol), który umożliwia narzędziom kodowania AI — Claude Code, Cursor, Windsurf itp. — odczyt i modyfikację plików .fig headless.

Dwa transporty

stdio dla klientów MCP, HTTP dla reszty.

bun add -g @open-pencil/mcp

Stdio (Claude Code, Cursor, etc.)

Add to your MCP config (e.g. ~/.claude/settings.json or .cursor/mcp.json):

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

Lub uruchom ze źródeł:

::: code-group

{
  "mcpServers": {
    "open-pencil": {
      "command": "bun",
      "args": ["/path/to/open-pencil/packages/mcp/src/index.ts"]
    }
  }
}

{
  "mcpServers": {
    "open-pencil": {
      "command": "npx",
      "args": ["tsx", "/path/to/open-pencil/packages/mcp/src/index.ts"]
    }
  }
}

:::

HTTP

For browser extensions, scripts, CI, or any HTTP client:

openpencil-mcp-http

Or from source: bun packages/mcp/src/http.ts / npx tsx packages/mcp/src/http.ts

Starts on port 3100 (override with PORT env var). Endpoints:

GET /health — server status
POST /mcp — MCP Streamable HTTP (SSE). Sessions via mcp-session-id header.

Workflow

Open — open_file to load an existing .fig, or new_document for a blank canvas
Read — get_page_tree, find_nodes, get_node, list_pages
Create — create_shape, render (JSX)
Modify — set_fill, set_stroke, set_layout, update_node, set_effects
Structure — reparent_node, group_nodes, clone_node, delete_node
Save — save_file to write back to .fig

AI Agent Skill

Install the OpenPencil skill for your AI coding agent:

npx skills add open-pencil/skills@open-pencil

Works with Claude Code, Cursor, Windsurf, Codex, and any agent that supports skills.

Tools (75)

Document

Tool	Description
`open_file`	Open a `.fig` file for editing
`save_file`	Save the current document to a `.fig` file
`new_document`	Create a new empty document

Read

Tool	Description
`get_selection`	Get currently selected nodes
`get_page_tree`	Get the full node tree of the current page
`get_node`	Get detailed properties of a node by ID
`find_nodes`	Find nodes by name pattern and/or type
`list_pages`	List all pages
`list_variables`	List design variables
`list_collections`	List variable collections

Create

Tool	Description
`create_shape`	Create a shape (FRAME, RECTANGLE, ELLIPSE, TEXT, LINE, STAR, POLYGON, SECTION)
`render`	Render JSX to design nodes — create entire component trees in one call
`create_component`	Convert a frame/group into a component
`create_instance`	Create an instance of a component

Modify

Tool	Description
`set_fill`	Set fill color (hex)
`set_stroke`	Set stroke color, weight, alignment
`set_effects`	Add shadow or blur effects
`update_node`	Update position, size, opacity, corner radius, text, font
`set_layout`	Set auto-layout (flexbox) — direction, spacing, padding, alignment
`set_constraints`	Set resize constraints

Structure

Tool	Description
`delete_node`	Delete a node
`clone_node`	Duplicate a node
`rename_node`	Rename a node
`reparent_node`	Move a node into a different parent
`select_nodes`	Select nodes by ID
`group_nodes`	Group nodes
`ungroup_node`	Ungroup a group

Tool	Description
`switch_page`	Switch to a page by name or ID

Escape Hatch

Tool	Description
`eval`	Execute JavaScript with full Figma Plugin API access

3.9 KiB Raw Blame History