Docs

Open a design in your browser

Go to design.mockz.app and open a design repository on GitHub. To open one directly, add its name to the address:

https://design.mockz.app/?repo=owner/name

You don't need an account to look at a public design. Sign in with GitHub to save changes. To save changes to a private repository, you need a license.

Agents don't connect to the browser version. To work with an agent, use the desktop app.

Install the desktop app

1. Download Mockz for your computer.
2. On a Mac, open the file and drag Mockz into Applications.
3. Open Mockz. The first time, it opens a copy of the sample design.
4. To open your own design, choose File › Open Project… and select its folder.

The app includes everything the editor runs on. You don't need Node or a terminal. To keep versions and share, you need Git and the GitHub CLI. To design with an agent, install the agent too.

Connect an agent

The desktop app serves its tools and the queue of your requests over MCP, at http://127.0.0.1:47620/__gesso/mcp. It listens on your computer only, and only while the app is open.

Press Start on the toolbar to start an agent from the app. The agent panel shows its work and remembers your choice. You use your own agent and your own account with it.

Agent	Start from the toolbar
Claude Code	Yes
Codex	Yes
Gemini CLI	Yes
OpenCode	Yes
Cursor, Goose and other MCP agents	No. Connect them by hand.

To connect an agent by hand:

claude mcp add --transport http mockz http://127.0.0.1:47620/__gesso/mcp
codex mcp add mockz --url http://127.0.0.1:47620/__gesso/mcp
gemini mcp add --scope user --transport http --trust --timeout 900000 mockz http://127.0.0.1:47620/__gesso/mcp

Then pick part of a screen, write what you want, and send it. The agent reads the screen as it is laid out, changes the files and answers under your request. You keep or undo each answer.

A design project

A design project is a folder in a GitHub repository. Only mocks/ is required.

my-product-design/
  mocks/                     the screens, a folder for each group
    Authentication/
      SignIn.tsx             the screen Authentication/SignIn
      SignIn.error.tsx       another state of it
      flows.ts               the paths a person takes through the group
  components/                your team's components
    TextField.tsx
    TextField.examples.tsx   its states, for the Components page
  variations/                directions the agent tried
  workbench/                 your own space, never shared
  theme.ts                   the theme, its dark theme and its fonts
  .mockz/                    frame sizes, statuses, comments and notes

Each screen is a file built from your components. Mockz draws each screen at phone, tablet and desktop size, and draws it again when its file changes.

To start from designs you already have, use Import in the project menu. It takes a link to a design file, page or frame and writes each frame as a screen.

Work as a team

• Versions: every saved version is a commit.
• Proposals: a bigger change is made on a branch and reviewed as a pull request on GitHub, with pictures of what changed. Accept it to add it to the design.
• Comments, notes and statuses are files in .mockz/, so they travel with the design.
• Share a screen, a group or the whole board as PNGs, a PDF, or a link for anyone who can see the repository.

Hand off to developers

Develop mode reads any element as CSS with your theme's tokens. It writes a whole screen as React with CSS modules, and checks that code against the design in Chrome. Give a screen the address of the built page, and Compare shows where the two differ.