paper-design

# Paper Design — MCP Bridge Skill

Paper is a professional design tool (like Figma) that runs locally on macOS. This skill connects to Paper's MCP server via HTTP, giving you full design capabilities.

**Prerequisite:** Paper must be open with a design file loaded. If Paper is not running, tell the user to open it first.

## How to Use Paper

All Paper operations go through the `paper.sh` script in this skill's directory:

```bash
exec {baseDir}/paper.sh <tool_name> '<json_arguments>'
```

**Important:** Always quote JSON arguments with single quotes to prevent shell expansion.

## Quick Start

```bash
# 1. Check what's on the canvas
exec {baseDir}/paper.sh get_basic_info

# 2. Create a new mobile artboard
exec {baseDir}/paper.sh create_artboard '{"name":"Home Screen","styles":{"width":"390px","height":"844px","display":"flex","flexDirection":"column","backgroundColor":"#FAFAFA"}}'

# 3. Add content (one visual group at a time)
exec {baseDir}/paper.sh write_html '{"html":"<div layer-name=\"Header\" style=\"display:flex;padding:60px 20px 20px;align-items:center\"><span style=\"font-family:Inter Tight;font-size:28px;font-weight:700;color:#1A1A1A\">Home</span></div>","targetNodeId":"ARTBOARD_ID","mode":"insert-children"}'

# 4. Take a screenshot to review
exec {baseDir}/paper.sh get_screenshot '{"nodeId":"ARTBOARD_ID"}'
# → saves to /tmp/paper-screenshots/screenshot-TIMESTAMP.jpg

# 5. View the screenshot
image /tmp/paper-screenshots/screenshot-TIMESTAMP.jpg

# 6. When done, release the working indicator
exec {baseDir}/paper.sh finish_working_on_nodes
```

## Tool Reference

### Reading the Canvas

| Command | Purpose |
|---------|---------|
| `paper.sh get_basic_info` | File name, page, artboards, fonts in use |
| `paper.sh get_selection` | Currently selected nodes on canvas |
| `paper.sh get_node_info '{"nodeId":"ID"}'` | Size, visibility, parent, children, text |
| `paper.sh get_children '{"nodeId":"ID"}'` | Direct children with IDs and types |
| `paper.sh get_tree_...