Skip to content

Build a website

Start from a Starter and build with Benchy Desktop, or with your own agent and the Benchy Websites plugin.

Start from a Starter

A Website Starter is a ready-made site in plain HTML and CSS, with no build step and nothing to install. Every one is a real page with real-sounding words, so you change it line by line rather than starting from an empty file.

StarterWhat you get
Print shopOne page of prints for sale, with prices, lead times and how to order
PortfolioYour work as a grid of projects, each with its own page
Link pageOne column of links, for a bio or a business card QR code
Event pageA date, a place, a schedule and a sign-up form
  • In Benchy Desktop: choose New, then Website, and pick one.
  • In Studio: choose Use starter on a Starter in the workspace’s library or in the Community on World. Benchy makes a new project from it, which opens in Desktop or downloads as a folder for any other agent.

Each Website Starter lists what it needs: the Benchy Websites plugin and a connection to your workspace. The project is yours from then on; changes to the Starter never reach it.

The Website section of BENCHY.md

The project’s BENCHY.md names its website, so every agent and tool publishes the same folder to the same address:

BENCHY.md
## Website
- Name: olive-prints
- Output: site/
- Build: npm run build
  • Name is the address, here olive-prints.benchy.site.
  • Output is the folder that gets published, relative to the project. For a Starter it is the folder holding index.html; for a framework it is the build folder.
  • Build is only a note for people and agents. Benchy never runs it: you, or your own agent in a terminal, run the build, and Benchy publishes what it produced.

Benchy writes the section when you first choose an address, and benchy site deploy, Desktop’s Publish and the plugin all read it.

Build with Benchy Desktop

Desktop turns on website mode for a website project: a folder with an index.html at the top or one folder down, or a package.json that uses a web framework such as Vite, Astro or Next.js. In website mode, Benchy, Claude Code and Codex can read and change the project’s own files, and nothing else on your Mac.

  1. Say what you want. “Add an About page with our opening hours” is enough.
  2. Approve the edits. Each file change asks first. The card also offers Allow edits in this project for this chat. In a folder you opened yourself, the first edit asks once: Let agents edit files in this folder? Choose Keep this folder read-only to say no; the project’s menu changes the answer later.
  3. Undo anything. Every change shows as a row in the chat with the file and the lines changed, and Undo puts the file back exactly as it was.
  4. Watch it in the page viewer, then publish with Publish in the project’s header. See Publish from Desktop.

Agents can never change package.json, lockfiles, hidden files such as .env, node_modules/, Made by Benchy/ or the project’s top-level config files. That is how Desktop keeps its rule that no agent gets a shell: an agent can’t write the command it would then ask to run.

The page viewer

The page viewer shows your site beside the chat. It shows local pages, this project’s published pages on benchy.site, and reference pages an agent opens; it is not a general browser.

  • Its title is always the address of the page, such as localhost:5173. Back and Reload are its buttons; its menu holds the widths (Full, 768 and 390), Open in browser and Clear preview data.
  • For a plain site, Benchy serves the folder with index.html itself. A server you already run on this Mac is offered in the viewer when it is empty.
  • Agents use the page too: they read it, click and type in it, take a screenshot and read its console. On this project’s own pages they need no approval; any other site asks once per chat. The header reads “Codex is using this page” while one does, and typing into a password field takes the page back.
  • An agent never uses a printer’s web page. Printer controls are yours alone.

Dev servers

A project with a package.json can run its own dev, start, preview or serve script. Press Start in the page viewer, which shows the script’s exact text first. An agent can ask to start one too; it asks every time and shows the same text.

  • Benchy never installs packages. If node_modules is missing, the viewer says so and names the command to run in Terminal.
  • Each server gets one port on this Mac. It can’t reach the internet or your local network, can’t read anything outside the project, and is stopped at once if it opens to the network. A font or API it fetches at start-up fails, and its log says why.
  • A server stops when you press Stop, quit Desktop, or leave the project for 10 minutes. Settings, then Data, lists the ones running.

Build with your own agent

The Benchy Websites plugin teaches Claude Code, Codex and Cursor to start, edit and publish a website, and connects them to your workspace. On the plugin’s page, choose Install in Claude Code, or the same for Codex or Cursor. The first time the agent reaches Benchy it asks you to sign in and choose a workspace.

SkillWhat it does
start-websiteProposes addresses, checks them, reserves the one you pick and writes BENCHY.md
edit-websiteKeeps edits inside what a website can serve, within the limits
publish-websitePublishes a preview, waits for you to say go live, then checks what is live

The plugin never publishes on its own, never runs a build for you, and adds no server code. Benchy Desktop registers the same connection with every agent it finds on your Mac, so those agents can publish without the plugin; the plugin adds the skills.

Framework builds

Any tool that writes static files works. Run the build yourself, or have your terminal agent run it, then publish the output folder.

ToolOutput folderNote
Vitedist/Works as it is
Astrodist/The default static output
Next.jsout/Set output: "export" in next.config
SvelteKitbuild/Use adapter-static
Eleventy_site/Works as it is

A single-page app that routes in the browser needs one line in benchy.site.json so its deep links load. See App routing.

Use ← and → to move between pages.