vision.lookAt need the GPU canvas, so they run in a headless editor through puppeteer.AGENTS &
API!
A launch post, signed in. The background is selected and the agent panel opens. “Make the background a deep purple” is typed and sent; the agent says what it will do, calls set_fills on the selection, and the background turns purple on the canvas. The edit is one undo step.
Every feature is a command
Here is the rule we build PopCraft by: if the editor can do it, it is a command. Creating a layer, setting a fill, applying a motion preset, exporting a PNG. Each one is a named command with typed parameters, in one registry. The menus call it. The palette calls it. The agent calls it as a tool. The CLI and the REST API call it. Plugins call it too.
That sounds like plumbing, and it is, but it is the plumbing that makes everything else on this page honest. The agent cannot do a weird half-version of a feature, because there is no second version. A script you write against the CLI today runs the same command your designer clicked this morning. When we add a feature, it is written once and every door reaches it. (The CLI and the API take the ones that need no screen; the rest run in the editor.)
create_node (agent) and createNode (plugins)Ask for the result, not the steps
Open the Agent panel from the rail, select what you mean (or @-mention it), and say what you want: “make the background a deep purple”, “type the headline on letter by letter, then pop the badge in half a second later”. The agent reads the layers, picks the commands and runs them on the canvas while you watch.
Every edit it makes is one undo step, named for what it did, so “no thanks” is one keystroke. The tools that could really hurt, like deleting a file, publishing to a library or running a plugin, stop and ask you first. The agent is a signed-in feature and uses your plan’s AI credits.
A launch post, signed in. The background is selected and the agent panel opens. “Make the background a deep purple” is typed and sent; the agent says what it will do, calls set_fills on the selection, and the background turns purple on the canvas. The edit is one undo step.
Skills: how your team does things
The agent ships with skills, short instruction sheets it pulls in when a job matches: Fill content, Auto layout, Recolor, Motion design and more. It also has agent profiles, personas it hands parts of a job to when it splits the work up.
Click Manage, pick a skill and Duplicate it to make your own. In the desktop app you can also drop markdown files into its skills/ and agents/ folders, keep them in git, and the app picks up each save without a restart. A file is never a permission: a tools: allowlist can only narrow what the agent may call, and the tools that ask for confirmation cannot be named in one at all.
A launch post in the editor. The agent panel opens and Manage lists the built-in skills, each an instruction sheet the agent pulls in when a job matches. One is opened and Duplicate makes an editable copy of it, with its name, when to use it and its instructions.
The palette is the same registry
Press ⌘K and type. The palette searches the commands by what they do, so you never have to remember which menu something lives in. Enter runs it on your selection.
It is also the friendliest way to learn the CLI. The thing you just ran from the palette is a command with an id, and popcraft commands will tell you its flags.
A launch post with its message selected. ⌘K opens the command palette and “align” is typed: the align commands are listed. Align left is picked and the message’s lines line up on their left edge.
The popcraft command line
popcraft runs PopCraft’s commands on .popcraft files on disk, with no editor open. This is a real session, with the output it printed. A command answers to its id, its agent tool name or its plugin method, and its flags come straight from its parameters.
$ npm i -g @popcraft/cli$ popcraft new poster.popcraft --name PosterCreated poster.popcraft$ popcraft run poster.popcraft node.create --type RECTANGLE --width 320 --height 200 --fill "#ff0055"Created rectangle "Rectangle"Saved poster.popcraft$ popcraft run poster.popcraft doc.outlineOutline of Page 1: 2 layers$ popcraft commands | tail -1135 commands that run from the CLI (--all lists every command, with where the rest run).# exports render in a headless editor (npm i -g puppeteer)$ popcraft run poster.popcraft export.nodes --ids "$ID" --format PNG --scale 2 --out poster.png# the same commands on a cloud file, merged live for whoever has it open$ popcraft run cloud:abc123 --batch @steps.json --if-match y1234$ popcraft push poster.popcraft
CLOUD FILES
ZIP!cloud:<key> runs on a cloud file through the API. push and pull move whole documents.THE APP
CLICK!popcraft run --ui runs in the open tab, as you, so you can watch it happen.A REST API, with the same commands
The API lives at /api/v1 and is described by an OpenAPI 3.1 document you can feed to any client generator. Read files, nodes, images and versions. Read and write comments. Create files, replace a document, and for targeted edits, post commands: up to 100 run in order and are saved as one edit. A step can use what an earlier one returned, so "$0.id" is the frame step 0 created.
curl -X POST "https://popcraft.app/api/v1/files/$KEY/commands" \
-H "Authorization: Bearer pop_…" -H "content-type: application/json" -d '{
"commands": [
{ "command": "node.create", "params": { "type": "FRAME", "name": "Card", "width": 320, "height": 200 } },
{ "command": "node.create", "params": { "type": "TEXT", "text": "Hello", "parentId": "$0.id" } },
{ "command": "paint.setFills", "params": { "ids": ["$0.id"], "color": "#ff0055" } }
]
}'If a step fails, nothing is saved and you get a 422 that says what each step did. "dryRun": true saves nothing either way. Every file response carries a revision; send it back as If-Match and a write only lands if nobody changed the file in between. People editing at the time see the change merge in as if a collaborator made it, and before the first write in 30 minutes the file’s current state is kept as a version.
Tokens with scopes, not skeleton keys
Make a personal access token from the account menu. Its secret starts with pop_ and is shown once. A token acts as you, so it can only reach files you can open, and never more than its scopes allow: files:read, files:write, comments:read, comments:write, versions:read, marketplace:publish, sites:publish and integrations:read.
Errors come back as JSON with a stable code, a 404 never tells you whether the file exists, and revoking a token takes effect within a minute.
Home, signed in. The avatar opens the account menu and Personal access tokens lists the tokens there are. A new one is named “CI publish”, given a scope, and created; its secret is shown once, ready to copy into the service that calls the API.
Your own tools, in the editor
Plugins are small web bundles that run in a sandbox, read and edit the open file through the same commands, show their own panels and put widgets on the canvas. Share them with your team or publish them to the marketplace.
A launch post with its headline selected and Pop Palette installed. Run calls the plugin’s main script, which writes to the file through the popcraft API: a pop-art palette appears as colour styles under Local colors, in one undo step.
A brainstorm board with its eight sticky notes selected and Rename Layers installed. Run opens the plugin’s own panel beside the canvas, a sandboxed page that reads the selection. The pattern is set to “Idea #” and Rename renames all eight layers, which the layers panel shows.
A launch post, signed in. The Agent rail button opens the agent panel. The headline is selected, and a request is typed in words — type the headline on letter by letter, then pop the badge in half a second later — ready to send. Manage lists the skills it can pull in, Motion design among them.
The editor with a landing page open. The Marketplace button on the right rail opens the marketplace: plugins, templates, libraries and themes, with categories and a search. Templates and then Motion narrow it to animated templates, and clicking one (Synthwave tunnel visualizer) opens its listing, with its preview and description. Installing needs an account.
Four packages on npm
@popcraft/cli
RUN!popcraft command: edit files headlessly, build designs from scripts, render and export, call the API, publish to the marketplace and drive the desktop app.@popcraft/kit
BUILD!runDesign() builds a design script inside your own program.@popcraft/runtime
SHIP!@popcraft/plugins
PLUG!Design like the gallery does
Claude Code, Codex, Cursor: an AI coding agent in a terminal can make real PopCraft designs with the CLI and nothing else. It works the way our template gallery was made. It writes the whole design as a script, builds it with write_design, and gets back checks: text that fails contrast, text too small for the size, text off the frame, text under the buttons Instagram, TikTok and Shorts draw on top, and text overlapping text.
Then it renders the frames with vision.lookAt, looks at the pictures, fixes the script and builds again in place with --frame. The loop is the whole method, and our public guide, Designing with an AI agent, is the page to hand it. The result is an ordinary .popcraft file a person can open and keep editing.
- 1
Install the CLI
Runnpm i -g @popcraft/cli(Node 25 or newer), orbrew install getpopcraft/popcraft/popcraftfor one executable with no Node. - 2
Make a token
Account → Personal access tokens. Give it only the scopes it needs. The secret starts with pop_ and is shown once. - 3
Log in
popcraft login --token pop_…keeps it in your system keychain.popcraft whoamichecks it. - 4
Find the command
popcraft commandslists what runs;popcraft commands paint.setFillsshows a command’s flags. - 5
Run it
On a file on disk, or oncloud:<key>. Add--dry-runto see what would happen first. - 6
Wire it into CI
Batch steps into one save, keep going past failures if you want, and read --json output in your scripts.
Design tool with an API bolted on vs. one set of commands
| THE OLD WAY | IN POPCRAFT |
|---|---|
| A read-only API, and the real work by hand | Read, create and edit files, run commands, post comments |
| An AI feature that does its own thing | The agent runs the commands the editor runs, one undo step each |
| Exports only from the app window | popcraft run … export.nodes in a headless editor |
| Scripts that clobber what people are doing | If-Match revisions, and edits that merge in live |
| One giant API key | Personal tokens with eight scopes, revoked within a minute |
Three lines to your first design from a terminal
npm i -g @popcraft/cli, then popcraft new poster.popcraft, then popcraft run any command on it. When you want it in the cloud, popcraft push prints its key. The command line docs cover every flag, and the endpoint reference every route.
Questions, answered
What can the agent in the editor actually do?
It runs the same commands the editor does, as tools: creating and editing layers, auto layout, recolouring, motion, compositions, audio, exports and more. Every edit it makes is one undo step, named for what it did. Tools that delete a file, publish to a library or run a plugin ask you to confirm first.
Does the agent need an account?
Yes. The agent and other AI features are signed-in features and use your plan’s AI credits. The skills and profiles editor works without an AI call.
Can I teach it how my team works?
Write skills: short instruction sheets the agent pulls in when a job matches. Duplicate a built-in one in the panel and change it, or in the desktop app drop markdown files into the skills/ or agents/ folder. A tools: allowlist can only narrow what a skill or profile may call, never widen it.
What does an API token let a script do?
Only what you can do, and only what its scopes allow: files:read, files:write, comments:read, comments:write, versions:read, marketplace:publish, sites:publish and integrations:read. Revoking one takes effect within a minute.
What happens if my script and a person edit at the same time?
Every file response carries a revision. Send it back as If-Match and the write lands only if nobody changed the file in between; otherwise you get a 409 with the current revision to retry from. Command runs merge in live for the people in the file.
Can a coding agent like Claude Code or Cursor make designs?
Yes, with the CLI and nothing else. Our public guide, “Designing with an AI agent”, is the loop to hand it: write the design as a script, build it, check it, render it, look at the pictures, fix, and repeat.
BEEP! YOUR TURN.
An agent in the editor, a CLI, a REST API and a kit. Free to start, in your browser or on your Mac.