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.8 KiB

Raw Blame History

title	description
Analyzing Designs	Audit colors, typography, spacing, and repeated patterns in .fig files.

Analyzing Designs

The analyze commands audit an entire design system from the terminal — find inconsistencies, extract the real palette, spot components waiting to be extracted.

Colors

open-pencil analyze colors design.fig

Finds every color in the file, counts usage, and shows a visual histogram:

#1d1b20  ██████████████████████████████ 17155×
#49454f  ██████████████████████████████ 9814×
#ffffff  ██████████████████████████████ 8620×
#6750a4  ██████████████████████████████ 3967×

Typography

open-pencil analyze typography design.fig

Lists every font family, size, and weight combination with usage counts. Useful for spotting one-off text styles that should be consolidated.

Spacing

open-pencil analyze spacing design.fig

Audits gap and padding values across auto-layout frames. Helps identify spacing scale inconsistencies — e.g. a stray 13px gap among otherwise 8/16/24 values.

Clusters

open-pencil analyze clusters design.fig

Finds repeated node patterns that could be extracted into components:

3771× frame "container" (100% match)
     size: 40×40, structure: Frame > [Frame]

2982× instance "Checkboxes" (100% match)
     size: 48×48, structure: Instance > [Frame]

JSON Output

All analyze commands support --json for machine-readable output:

open-pencil analyze colors design.fig --json

Pipe into jq, feed into CI checks, or use in scripts that enforce design token budgets.

1.8 KiB Raw Blame History Unescape Escape