keyline

Canva for your agent

Design engine for AI agents.

A free MCP server for Claude Code, Cursor and Codex. Your agent describes a social post, ad or banner once; keyline renders it as images and video at every size, with real text in your fonts and colors, the same every run.

Install

Free and source-available · Latest release

Claude · keyline

Make a listing ad for Villa Lefka in Oia: an Instagram post, a Facebook banner and a skyscraper. Give the photo a slow zoom.

  1. keyline scene_create portrait, banner, sky · 8s loop sa41c9e07d v0
  2. keyline asset_add the villa photo villa 2400×1600 v1
  3. keyline layer_add photo, scrim, price chip, copy added photo,scrim,chip,copy v2 ok
  4. keyline render mp4 3 files · 8s, 200 frames each

Done: three sizes from one layout, all checks clean. The photo zooms toward the tower and back, and the loop runs every 8 seconds.

Post · 1080×1350
Banner · 1200×628
Skyscraper · 300×600

What it does

Everything an agent needs to ship a campaign, and nothing it has to guess.

Every size from one layout

Stacks, grids and constraints adapt one design to a post, a banner and a skyscraper ad, and any size can be tweaked on its own.

Checks before pixels

The server measures text, overflow, contrast and safe areas, so the agent verifies with numbers instead of screenshots.

Motion and video

Entrance effects, keyframes, staggered text and video clips, rendered as GIF, animated PNG, MP4 or WebM.

No browser

One native Rust binary on Skia. No headless Chrome, Puppeteer or Playwright to install, run or patch.

The same scene, the same design

No model generates pixels: a scene always renders the same way, on every machine.

Built for tokens

Six tools, batched edits and terse replies, so the agent spends its tokens on the design, not on reading the scene.

keyline vs headless Chrome and Playwright

We gave Claude one brief, a conference speaker card at three sizes, and three ways to make it: keyline, HTML screenshotted by headless Chrome, or a browser driven through Playwright MCP. All three made the card. Here's what each took.

2× fewer tokens than headless Chrome, 5× fewer than Playwright MCP.

The speaker card made with keyline: portrait, name, talk title and a Get tickets button
keyline
The same speaker card made with HTML and headless Chrome
Headless Chrome
Median of 5 runs each, all correct, Claude Opus 5, October 2026
Tokenskeyline: 199kHeadless Chrome: 536kPlaywright MCP: 1,087k
Turnskeyline: 13Headless Chrome: 24Playwright MCP: 39
Timekeyline: 2.0 minHeadless Chrome: 3.7 minPlaywright MCP: 4.3 min
Images looked atkeyline: 4Headless Chrome: 7Playwright MCP: 8

Every run, with its prompt and the judge's scores, is in the benchmark.

How it works

The agent works in a small JSON scene. keyline measures it and says what's wrong, so the agent fixes the design before anyone looks at pixels.

  1. 1 The agent writes a scene

    Text, images, shapes, layout and motion, in names models already know from CSS and Figma.

    {"id": "headline",
 "type": "text",
 "text": "Cold Brew Season",
 "fontSize": 168,
 "fontWeight": 900,
 "textWrap": "balance",
 "media": {"banner":
   {"fontSize": 104}}}

  2. 2 keyline checks it

    Every edit replies with what doesn't fit, per size: cut text, overflow, low contrast, text under a platform's buttons.

    changed headline v4
story headline text
  96,1110 888×290 168px 2L
banner sub text
  60,372 470×62 26px
  !truncated needs 470×96

  3. 3 and renders every size

    PNG, JPEG, WebP, PDF, animated PNG, GIF, MP4 or WebM, with facts the agent can check without opening the files.

    story  …/story-v5.png
  1080×1920, 78 KB
banner …/banner-v5.png
  1200×628, 46 KB
square …/square-v5.mp4
  1080×1080, 5s, 125 frames,
  2179 KB

Questions

What is keyline?

keyline is a free, source-available MCP server that lets AI agents (Claude Code, Cursor, Codex, VS Code) design social posts, display ads, banners, flyers and video at every size from one JSON scene. It measures text fit and overflow before rendering, and renders with Skia instead of a headless browser.

How is it different from Puppeteer or Playwright screenshots?

There's no browser to install, run or patch: keyline is one native binary. It measures text fit, overflow and contrast itself, so the agent fixes a layout without taking screenshots. In our benchmark an agent used 2× fewer tokens than with HTML and headless Chrome, and 5× fewer than with Playwright MCP.

How is it different from Bannerbear or Placid?

keyline runs on your machine or in CI, for free, with no hosted templates and no API key. The agent writes the design itself, as a JSON scene, instead of filling in a template someone made in a web editor.

Does it generate images with AI?

No. keyline renders deterministically: the agent writes the scene, and the same scene always renders the same pixels. Photos and logos are your own files.

How do I install keyline in Cursor?

Install the binary (brew install keyline-dev/tap/keyline-mcp, or a release download), then add { "mcpServers": { "keyline": { "command": "keyline-mcp" } } } to ~/.cursor/mcp.json. The install guide has every other client.

Is it free?

Yes. keyline is source-available under PolyForm Shield 1.0.0: use it, change it and share it, commercially too, except to build a product that competes with it.

Install

macOS, Windows and Linux. Every download is checksummed and built by GitHub Actions.

The plugin installs everything, downloading keyline if it isn't on your PATH.

/plugin marketplace add keyline-dev/keyline
/plugin install keyline@keyline