Danila Poyarkov a4b810620f Add Programmable docs section with CLI, JSX, MCP, AI, Collab

New top-level nav section documenting OpenPencil's programmability:
- CLI: inspecting, exporting, analyzing, scripting (eval)
- JSX Renderer: elements, style props, visual diffing
- MCP Server: moved from Reference (setup + tool list)
- AI Chat: setup, 87 tools, example prompts
- Collaboration: room sharing, cursors, follow mode

Restructured sidebar:
- Programmable added to nav bar (7 locales)
- Context Menu moved from User Guide to Reference
- MCP and eval-command removed from Reference

2026-03-08 13:22:36 +03:00

1.9 KiB

Raw Blame History

title	description
AI Chat	Built-in AI assistant with 87 tools for creating and modifying designs.

AI Chat

Press ⌘J (Ctrl + J) to open the AI assistant. Describe what you want — it creates shapes, sets styles, manages layout, works with components, and analyzes your design.

Setup

Open the AI chat panel (⌘J)
Click the settings icon
Enter your OpenRouter API key
Choose a model (Claude, GPT-4, Gemini, etc.)

No backend, no subscription — your key talks directly to OpenRouter.

What It Can Do

The assistant has 87 tools across these categories:

Create — frames, shapes, text, components, pages. Renders JSX for complex layouts.
Style — fills, strokes, effects, opacity, corner radius, blend modes.
Layout — auto-layout, alignment, spacing, sizing.
Components — create components, instances, component sets. Manage overrides.
Variables — create/edit variables, collections, modes. Bind to fills.
Query — find nodes, read properties, list pages, fonts, selection.
Analyze — color palette, typography audit, spacing consistency, cluster detection.
Export — PNG, SVG, JSX with Tailwind classes.
Vector — boolean operations, path manipulation.

Example Prompts

"Create a card with a title, description, and a blue button"
"Make all buttons on this page use the same border radius"
"What fonts are used in this file?"
"Change the background of the selected frame to a gradient from blue to purple"
"Export the selected frame as SVG"
"Find all text nodes with font size less than 12"

Tips

Select nodes before asking — the assistant knows what's selected.
Be specific about colors, sizes, and positions for precise results.
The assistant can modify multiple nodes in one message.
Use "undo" in the editor if you don't like the result.

1.9 KiB Raw Blame History