Design for Paperclip

A design viewer inside Paperclip. It reads the design/ folder in a project's workspace and shows every artboard on a canvas you can pan and zoom, with theme switching, focus and present modes, clickable prototypes and the style guide. Pins you drop on an artboard become tasks for a triage agent, and agents get tools to read feedback, render designs and mark their status.

What you get

• Canvas of artboards grouped by screen, filtered by size, in every theme the design defines.
• Focus and present modes, plus a Live HTML view of the real page.
• Compare: each render keeps earlier versions of the artboards that changed. Compare them with a slider, side by side, or a difference view that highlights every changed pixel.
• Feedback: turn on comment mode and click an artboard. The pin becomes a new issue, assigned to the agent you pick (the agent with the pm role by default), filed under the issue you choose.
• Any size: resize an artboard live in Focus mode (drag the edges, pick a preset, or fit the height to the content) and save it as a new artboard. Artboards in the manifest can use any width and height, including "height": "auto" for the full screen.
• Lint on every render: content cut off by its frame, oversized icons, controls without an accessible name, broken images, page overflow.
• Automatic re-render when design files change, in the background every minute.
• Agent tools: design_status, design_render, design_feedback (with images of the pinned spot), design_add_size and design_set_status.

Requirements

• Paperclip 2026.916 or newer, running on a machine with Node 22 or newer.
• The first render installs Playwright into ~/.cache/paperclip-skill-tools and downloads Chromium. After that it works offline.

Install

paperclipai plugin install @onenomad/paperclip-plugin-design

A Design link appears in the sidebar, and each project gets a Design link of its own.

How it finds designs

The viewer looks for a design/ folder in each project's primary workspace. It works with two layouts:

1. With design/manifest.json (recommended): lists artboards, prototypes, directions and the style guide. Each artboard is one HTML file at its real size. The format is documented in the product-design skill in paperclip-skills.
2. Without a manifest: every HTML file under design/ becomes an artboard. Files that lay several device frames side by side (elements with class frame) are split into one artboard per frame.

Files without a manifest that hold several frames can still be resized: the viewer lifts the frame onto its own page so its width and height follow the size you pick. Saved sizes live in design/.viewer/custom.json.

Themes come from the manifest's themes, or from [data-theme="…"] selectors in the folder's CSS files. Renders, versions and pin images live in design/.viewer/. Add it to .gitignore if the design folder is in a repo.

Agent tools

Agents can't call plugin tools until a company tool policy allows them. Add one:

curl -X POST "$PAPERCLIP_URL/api/companies/<companyId>/tools/policies" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Design plugin tools for agents",
    "policyType": "allow",
    "selectors": {
      "actorType": "agent",
      "toolNames": [
        "onenomad-design:design_status",
        "onenomad-design:design_render",
        "onenomad-design:design_feedback",
        "onenomad-design:design_add_size",
        "onenomad-design:design_set_status"
      ]
    }
  }'

The design-viewer skill in paperclip-skills includes a small script agents use to call these tools from a run.

Good to know

• The background re-render watches projects the plugin has already seen, meaning ones someone opened in the viewer or an agent called a tool on. Scheduled jobs don't get company access in Paperclip, so the plugin can't list projects on its own.
• Tool calls time out after about 10 seconds. design_render returns early on big renders and tells the agent to check back with design_status.
• Only people mark artboards approved. The skills tell agents to stop at in_review.

License

Apache 2.0