paper-design
Design UI screens in Paper — a professional design tool running locally on macOS. Create artboards, write HTML into designs, take screenshots, and iterate visually.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/candoolabs/paper-designPaper 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:
exec {baseDir}/paper.sh <tool_name> '<json_arguments>'
Important: Always quote JSON arguments with single quotes to prevent shell expansion.
Quick Start
# 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_summary '{"nodeId":"ID"}' | Compact hierarchy overview (cheap) |
paper.sh get_tree_summary '{"nodeId":"ID","depth":5}' | Deeper hierarchy |
paper.sh get_computed_styles '{"nodeIds":["ID1","ID2"]}' | CSS styles for nodes |
paper.sh get_jsx '{"nodeId":"ID"}' | JSX code (for dev handoff) |
paper.sh get_font_family_info '{"familyNames":["Inter","DM Sans"]}' | Font availability + weights |
Visual Review
# Screenshot an artboard or node
exec {baseDir}/paper.sh get_screenshot '{"nodeId":"ARTBOARD_ID"}'
# Higher resolution (for reading small text)
exec {baseDir}/paper.sh get_screenshot '{"nodeId":"ARTBOARD_ID","scale":2}'
# Save to specific path
exec {baseDir}/paper.sh get_screenshot '{"nodeId":"ARTBOARD_ID"}' --save /tmp/my-review.jpg
# Then view the screenshot with the image tool
image /tmp/paper-screenshots/screenshot-TIMESTAMP.jpg
Creating Designs
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-candoolabs-paper-design": {
"enabled": true,
"auto_update": true
}
}
}