Get started

Install Gesso, make a first file and find your way around.

Getting started

Install

Download Gesso for macOS, drag it to Applications and open it. Nothing else to set up: files live on your computer and save as you go, and agents running on this computer find Gesso on their own.

The first time it opens, Gesso asks you to sign in or make a free account in your browser — that's where your 150 free agent calls, your plan and agents on the internet (ChatGPT, Claude.ai) live. Then a three-step welcome, and you're on the Dashboard.

Your first file

  1. On the Dashboard, press New file.
  2. Press F and drag to draw a frame — a post, a page, a phone screen.
  3. Add text with T, a rectangle with R, a path with the pen P.
  4. Or ask your AI — ChatGPT or Claude once connected, or an agent in the Terminal at the top right. It builds on the canvas while you watch.
An agent building a post. Each part appears as it's written, and every part is a layer you can edit.

Finding your way around

  • Left panel — pages, then the layers of the page you're on. The layer list is the real nesting of the design: a card inside a section inside a post.
  • Toolbar — move, pan, frame, shapes, pen, text, comment and image.
  • Gesso — scroll or hold Space and drag to pan; pinch or ⌘-scroll to zoom.
  • Right panel — the selected layer: position and size, layout, fill, border, shadow, text, export. With nothing selected it shows the page's background.
  • Bottom of the left panel — What's new, and Feedback, which comes straight to us.

Selecting

Hover draws a solid outline round exactly what a click will take, and the click takes it, however deep it sits. Empty parts of a layer are looked through, so a ring under a figure or a glow behind a card can be picked directly.

  • Esc or ⇧↵ — up to the container.
  • ↵ — into the layer: its children, or the words of a text layer, or the points of a path.
  • Tab / ⇧Tab — the next or previous layer beside it.
  • ⌘-click — the whole section.
  • Drag on empty canvas to select everything the box touches; ⇧-click to add or remove.

Prefer to go in one level at a time? Turn off Use deep selection in the zoom menu at the top right.

Layout

Frames lay out what they hold with real CSS: stack in a row or a column, wrap, gap, padding, and each child can fill or fit. ⇧A adds a layout to a selection; ⌥⇧A removes it. Tick Absolute position to place something freely inside a laid-out frame.

Drag a card out of a row and a Space layer holds its place, so nothing else jumps. Drag it back and it returns exactly where it was.