create_artboard
Creates a new artboard on the canvas and returns its node ID for inserting content. Configure size and styles, with defaults for desktop, tablet, and mobile.
Instructions
Creates a new artboard (top-level frame) on the canvas.
Returns the node ID which you can then use with write_html({mode:'insert-children'}) to add content.
Use the styles property to set the artboard size and styles.
paper-gen:// URLs in styles (e.g. backgroundImage) generate AI images. ONLY if the user asked; read the "image-generation" guide first.
Artboards default to
display: "flex", flexDirection: "column"The artboard will always be placed in the best empty spot on the canvas.
Use one of the default sizes below unless the user specifies a size.
Default sizes by device (when the user doesn't specify a size):
Desktop: 1440 x 900px
Tablet: 768 x 1024px
Mobile: 390 x 844px — include a status bar at the top. Call
get_guide({ topic: "mobile-status-bar" })for paste-ready markup; do not hand-draw one.
The suggested device height is just a starting point to set the scene and understand how much space there is for the content above the fold. When wrapping up, if content clips, switch the artboard to height: "fit-content" via update_styles instead of guessing a new fixed height.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Name for the artboard (shown in the layer tree). | |
| fileId | No | Optional. The Paper file ID this call should act on. Pass it to reliably target a specific file when several are open at once (e.g. multiple agents from the same session working in parallel). Omit to use the most recently opened file in the session. | |
| styles | Yes | CSS styles for the artboard as a JSON object. Use camelCase property names. width and height are required — use whole pixel values. When positioning an artboard make sure to give 80px of space between artboards to avoid overlaps. Example: {"display": "flex", "flexDirection": "column", "width": "1440px", "height": "900px", "backgroundColor": "#f5f5f5", "padding": "20px"} |