Sonder Your account
A dandelion seed head in a single beam of light, with a few seeds drifting up through it.

Premium websites at the speed of light

Connect Sonder to Claude Code, Cursor or Codex.

Connect your agent See the looks.

Connect

One address, in the agent you already use.

Sonder is an MCP connector. Your agent does the thinking on your own plan; Sonder brings the looks, the library, the fill, the checks, the pictures and the hosting. Steps for other agents

Sonder's address 
https://sonder.example/mcp

Run this once in your terminal, then type /mcp in Claude Code and choose Sonder.

claude mcp add --transport http sonder https://sonder.example/mcp
Then ask 
Use Sonder to redesign acme.com as a pitch.

Made for agents

Your agent does the thinking. Sonder does the rest.

Your agent your plan

  • Reads the client's site or their own files, and what you tell it about them.
  • Chooses the look from the posters, for this brand.
  • Writes every word, from the client's own pages and in their voice.
  • Customises the site's files like any other code in your folder.

Sonder the MCP

  • 26 looks, each a whole site, built from Sonder's library of scenes and motion.
  • Reading and filling: the site's pages, colours, fonts, logo and pictures, poured into the look.
  • The checks: every answer for limits, slop and placeholders; the built site for errors, contrast, holes, phone width and speed.
  • Before and afters, art direction for every image, and hosting on a link or their domain.

Sonder never writes a word itself. It hands your agent the question and the shape of the answer, checks what comes back, and asks again with the problems listed when something fails.

How it goes

Five calls, from a link to a live site.

  1. 01

    Read

    sonder_read takes a URL or the client's files: their pages, colours, fonts, logo and pictures, and a shot of their first screen today.

    Your agent · ~/studio

    Make Halyard House a new landing page. Quiet, and use the words on their own site.

    sonder_read({ url: "halyardhouse.example" })

    Read Halyard House (https://halyardhouse.example/). Project: halyard-house

    Colours: #155A85, #F2C14E, #FFFFFF · Fonts: Georgia, Verdana

    Their first screen today: before.jpg

    Halyard House's site today: a narrow column, a blue gradient header, a banner of the house and a sidebar for checking availability.

    One question: pull the content out of the pages.

    sonder_answer({ project: "halyard-house", task_id: "siteContent-a41c…", answer: {…} })

  2. 02

    Pick a look

    sonder_looks ranks the 26 looks for this brand, with their posters. Your agent looks at them and chooses.

    Your agent · ~/studio

    sonder_looks({ project: "halyard-house" })

    The looks for halyard-house, best fit first:

    1. editorial · 2. small-light · 3. soft-mono · 4. japanese-minimal · …

    Editorial posterSmall light in the dark posterSoft monochrome poster

    Editorial, in its Night version. A house above a harbour reads like the cover of a travel magazine, and their photo of it at blue hour can carry the masthead.

  3. 03

    Fill

    sonder_fill asks for the words one question at a time. Your agent writes them; Sonder checks each answer and sends back what fails.

    Your agent · ~/studio

    sonder_fill({ project: "halyard-house", look: "editorial", version: "night", size: "landing" })

    A question: the first screen's words, as JSON.

    sonder_answer({ …, answer: { headline: "Elevate your stay", … } })

    Not taken: buzzword "elevate": "Elevate your stay".

    sonder_answer({ …, answer: { headline: "Sleep with the sea in the window.", … } })

    Filled. A local preview, screenshots at 1440 and 390, and the samples to replace.

    The filled Editorial Night first screen: the house lit at blue hour above the harbour, its name set as a masthead.
  4. 04

    Check

    sonder_check runs Sonder's floor in a real browser at 1440 and 390, and takes fresh screenshots.

    Your agent · ~/studio

    sonder_check({ project: "halyard-house" })

    The floor passes: every check is fine.

    pass No console errors

    pass No sideways scroll on a phone

    pass Text reads (4.5:1, large type 3:1)

    pass Largest paint within 4 s on a phone (slow 4G)

    pass No slop in the copy

  5. 05

    Publish

    sonder_publish puts the site online at a link, or on the client's own domain.

    Your agent · ~/studio

    sonder_publish({ project: "halyard-house" })

    Published: https://…/halyard-house

    The floor passes.

    It's live. The words marked as samples are listed in the project folder for you to confirm with the client.

Your agent · ~/studio

Batch pitches

A list of prospects in. Before and afters out.

sonder_pitch takes a list of sites. Each is read and given the look that fits it best, with no two alike in the batch. Every project asks its own questions, so a subagent can take one each, and you get a before and after of every site with one contact sheet of them all.

Your agent · ~/studio

Pitch these three. One subagent each.

sonder_pitch({ urls: ["example.com", "example.org", "example.net"] })

Pitch batch 2026-10-28-4c1e: 3 sites. Each waits on a question; answer each with sonder_answer (any order; a subagent per project works).

- example-com (luminous): task_id pitchLook-…

- example-org (aura): task_id pitchLook-…

- example-net (etched): task_id pitchLook-…

Three subagents are answering, one project each.

Done. A before and after of each, and contact-sheet.jpg.

Before and after

The site they have. The site you pitch.

Three businesses, each read from the site they have today and filled in the look that suits it.

Drag the line, or use the arrow keys.

Before: Halyard House's site today, a narrow column with a blue gradient header, tabbed navigation, a banner of the house with a special offer, and a sidebar for checking availability and the tariff. After: the same house in Editorial Night, lit at blue hour above the harbour, its name set as a masthead over the cover line Sleep with the sea in the window.
Halyard House, eight rooms above a Cornish harbour, in Editorial Night.

The looks

26 beautiful, ready-to-use templates for your agent.

Every look has its own type, motion, sections and pages, and is filled with the client's words, colours and pictures. Open any of them as it runs.

In motion

Made to be moved through.

Six moments from the looks, recorded as they run in a browser: light, chrome, stone, flowers and points of light, moving with the visitor.

  1. Window light falling across a dark wall of framed photographs, moving along it from one to the next.

    01Light finds the room· Small light in the dark

  2. A white dove spreading its wings in a burst of light on deep crimson.

    02The dove in the light· Luminous color

  3. Bubble letters in liquid chrome, reflecting a room, beside a round glass window.

    03Type poured in liquid chrome· Chrome

  4. Pale stone columns passing by as the four steps of an investment process come forward one at a time.

    04A walk through the colonnade· Roman prestige

  5. Poppies, cornflowers and daisies growing up out of a painted meadow as the sun crosses the sky.

    05A season grows in· Warm and organic

  6. A single point of light bursting into streaks across the dark, then settling into a field of tiny stars.

    06A point of light bursts· Particle light

Images

Three ways to make the pictures. One art director.

Your own key

Sonder calls the image model straight from your machine, on your own account.

Higgsfield

Sonder writes the brief and the prompts; your agent makes the pictures with the Higgsfield MCP and hands them back.

Sonder credits

Made on Sonder's key from the allowance in your plan. Spending stops at zero; nothing runs on credit.

Whichever makes them, Sonder sets the style from the look and the brand, keeps one style across the whole site, and checks every picture before it is placed: the style, the size, and no stray text, logos or likenesses.

Hosting and domains

Live on a link, or on the client's domain.

sonder_publish uploads the site and gives you its link. Name the client's domain and it gives you the records to set at their DNS provider. It runs the floor first, and won't publish a site that fails it unless you say so.

Your agent · ~/studio

sonder_publish({ project: "halyard-house", domain: "www.halyardhouse.example" })

Published: https://…/halyard-house

Their domain www.halyardhouse.example: add these records at their DNS provider: CNAME www → …

The floor passes.

Founding studios

Make your next pitch with Sonder.

We're opening Sonder to a small group of studios first: people who design and sell websites and already work with an agent. Leave your email and we'll send a link to sign in; founding studios get Sonder first and shape what it does next.

Invited to the web app? Open it.