Prototype · free and open · macOS

A design canvas your agent can see

Agentic Design is a native macOS editor for .pen files. Your agent reads the document, draws into it and screenshots the result over MCP, while you watch and edit the same canvas live.

Download for macOS Connect an agent

Apple Silicon · macOS 14 or later · or open a .pen file in your browser

What it is

A canvas built for agents, and for you

Agents already write code on your computer. Agentic Design gives them a canvas: the same document you edit, drawn natively, with tools made for how agents work.

Native on macOS

Written in Odin and drawn with NanoVG on Metal. One small binary: no browser, plugin or server to keep alive.

Agents are first-class users

They read the document, create nodes in the JSON the file stores, and check their work with screenshot and lint.

Free and open

MIT licensed. Your designs are plain .pen files on your disk, readable by people, agents and pencil.design.

Agents on the canvas

Watch them work

Every agent connected over MCP gets a cursor with its name. It glides to each layer a request creates, changes or deletes, and the layer flashes in the agent's colour.

Claude in clay, Codex in green, named from the MCP client
Frames marked placeholder glow while an agent works on them
A cursor outside the view waits at the edge, pointing the way

MCP tools

One command to connect

agentic-design mcp is a stdio MCP server. It forwards tool calls to the running window and opens the window itself when it is closed. The onboarding registers it with Claude Code, Codex, Cursor and six more clients in a click.

Terminal

$ APP="/Applications/Agentic Design.app"
$ claude mcp add --scope user agentic-design \
    -- "$APP/Contents/MacOS/agentic-design" mcp

get_guide: What the document holds and how its parts are named
batch: Several edits as one undo step, all or nothing
create_nodes: .pen nodes in, ids out, with nested children
find_nodes: Layers by name, type, text, ref or variable
screenshot: A node, the canvas or the whole window, in any theme
lint: Hard-coded colours, missing fonts, text that does not fit
set_variables: Tokens, theme axes and the theme shown
set_libraries: Import other .pen files as libraries
export_code: HTML + CSS or React + Tailwind for the page

.pen files

Speaks .pen, keeps the rest

Documents are pencil.design .pen files. The app reads and writes the format directly and keeps every property it does not understand, so files round-trip with pen.dev.

Frames, groups, shapes, paths, text and Lucide icons
Flex layout: gap, padding, fit and fill
Variables, theme axes and per-frame themes
Components, instances, overrides and slots
Gradients, several fills and shadows, blurs
Unknown properties kept as they are

hero.pen

{
  "type": "ref",
  "ref": "btn-primary",
  "descendants": {
    "btn-primary-label": {
      "content": "Download for macOS"
    }
  }
}

Download

Run it on your Mac

Signed and notarized by Apple, for Macs with Apple Silicon on macOS 14 or later. The app keeps itself up to date, and the onboarding connects your agents.

Download for macOS Open a .pen in the browser

Latest release · all releases

Or build it yourself

$ brew install odin
$ git clone \
    https://github.com/kirill-dev-pro/agentic-design
$ cd agentic-design && ./build.sh
$ ./build/agentic-design