Welcome to Gesso

Gesso is a design canvas built from real HTML and CSS, where you and your AI agents design together. Draw and edit by hand with the precision of a design tool, or ask the agent you already use and watch the design build — every part of it a layer you can change, and code you can ship.

Gesso in action

An agent builds a hero on a live shader, a headline is changed by hand, then pieces made in Gesso.

What you can do with Gesso:

  • Design by hand on a real HTML and CSS canvas — frames, layout, text, shapes, the pen, gradients and tokens.
  • Ask the agent you already use — Claude Code, ChatGPT, Claude, Cursor, Codex — to build designs while you watch.
  • Paste SVGs, HTML and pictures, or bring in a whole web page, as layers you can edit.
  • Export posts as PNG, JPG or PDF, or copy any frame as React, Tailwind or HTML.

Where to start

Get startedInstall Gesso, make a first file and find your way around.Agents & MCPLet Claude Code, ChatGPT, Claude, Cursor, Codex or any MCP agent design on your canvas.Paste & bring inPictures, SVGs, text, HTML and whole web pages — all as layers you can edit.Vector editingDraw paths, edit points, and work inside SVGs.TokensNamed values — colours, sizes, type — that keep a design and its code consistent.ExportPictures, PDFs and code.ShortcutsEvery key, grouped by what you're doing.ChangelogWhat's new in Gesso, newest first. The same list is under What's new in the app.FAQ & helpCommon questions, and what to do when something isn't working.