The stack, and why

Palate builds on an opinionated stack. Here is every choice, the real reason for it, and the honest trade-off. No marketing, just the decisions a skeptical developer would want to interrogate.

This is the current builder. The previous one, which researched and drew a set of home pages before building on Sanity, stays installable as palate-classic.

On this page

Install it. Ask. Watch it build.

Before any of the choices below, here is the shape of it end to end: from one install to a site in production, in plain language. You ask in a line like Build a site for {client}, {domain}., and it goes.

01

Install once

Connect Palate and install the plugin, then restart. It works the same in Claude Code and Codex, and you do it once.

02

Start from anything

Say what you want, the way you would to a person: "Build a site for {client}, {domain}." A current website, brand files, an idea or nothing prepared are all fine starting points.

03

It reads the library where it changes the design

For each technique it adopts, it reads the reference's signature moves and component notes and watches the motion clip before claiming it saw the motion. Each option names the references it used.

04

You click through working options

The first working design aims to be ready in about ten minutes, with three distinct options to follow. They are real pages with motion, on desktop and touch, not static boards.

05

Pick one, and it builds on one system

You pick in chat. It asks where the site will live, whether anyone will edit it, and where enquiries go, then turns the chosen option into one design system with a hidden style guide, and builds every page from it.

06

It proves the site before handing it over

Type check, build, the design system, SEO and every factual claim are checked by commands, the visitor journeys are walked in a browser, and the design is judged against library sites. An independent critic reviews it twice.

07

Deploy, then a receipt

With your go-ahead it deploys the verified build. The site counts as released only once the deployed address answers.

The stack, as a map.

Each piece, the role it plays, and the honest trade-off. Open any tile for the reasoning a skeptical developer would want to interrogate.

Astro Astro 7 The framework. Static HTML and CSS by default, JavaScript where a piece moves or responds. Open the reasoning

Why

The design options are real Astro pages, so the one you pick is the code the site is built from, not a picture to rebuild. The output is static by default: fast to load, cheap to host, and nothing to keep running. The starter ships a sitemap, a robots file, canonical links, social cards, structured data and an llms.txt.

The trade-off

A live web app belongs on a framework built for one. And static means a content change ships with a rebuild rather than on the next page load.

The questions behind it

Why Astro?

Astro sends HTML and CSS by default and adds JavaScript only to the pieces that need it. A marketing site is mostly type, layout, imagery and motion, so most of the page does not need to be an app, and it loads faster for that. The trade-off is that a heavily interactive product, a live web app, belongs on a framework built for that.

Why static by default?

A static site is files on a server: fast, cheap to host, and nothing to fail at three in the morning. The sitemap and llms.txt are built from those pages. The cost is that a content change needs a rebuild. A route that has to run on request, such as a Shopify cart, runs on request; the rest stays static.

Why are the options real pages, not mockups?

Motion and touch behaviour cannot be judged from a still. Each option is a working page you can scroll, tap and use with a keyboard, with reduced-motion and no-JavaScript fallbacks. When you pick one, its components become the site's components, so nothing is redrawn from a screenshot and lost on the way.

The site system system.css The styling. One stylesheet of type, colour and spacing that every page reads from. Open the reasoning

Why

Straight after you pick, the chosen direction is written into src/styles/system.css: the type scale, colours, spacing and heading styles. A hidden style guide renders every one of them alongside the real components, and a check fails any page that sets type or colour outside the system. New pages and later edits start from the style guide.

The trade-off

A one-off size has to become a system value or carry a written reason. That is more discipline than styling each page on its own, and it is the discipline that keeps twenty pages looking like one site.

system.css
Type scaleColoursSpacingStyle guide

The questions behind it

Why one stylesheet instead of styling each page?

Without one, each page sets its own heading sizes and the site drifts: we measured six different h1 styles across twenty-five pages on one build. Naming conventions alone did not stop that. A system file plus a check that fails off-system type and colour did.

Why a hidden style guide?

It is the reference every later page and edit starts from, and it renders straight from the system file, so a new token appears there on reload. It runs only in development and is never published.

Do all Palate sites share one look?

No. The page structure names are shared (global padding, containers, section padding), but every value comes from the direction you picked, never from a default. Sameness across sites is what Palate exists to argue against.

Content, in code or Sanity Asked The words and images. In the code by default; Sanity when someone will edit without a developer. Open the reasoning

Why

After you pick a direction, it asks whether anyone will edit the site without a developer. If not, the content stays in the code, where Claude can change it for you. If so, Sanity is added. The words themselves come from the source website and brand material, and every factual claim is checked against the client's own site before the build is verified.

The trade-off

Content in code needs a developer, or Claude, to change it. Sanity adds an account and an editing interface to maintain.

The questions behind it

Why not put a CMS on every site?

Most small sites are edited a few times a year, by whoever built them. A CMS on those is an account, a schema and an interface for nobody to use. When someone does need to edit, Sanity is added deliberately, with the content model the site actually has.

Where do the words come from?

From the client's website, brand material and brief, with observed facts kept separate from proposals and unknowns. Years, counts, ratings, prices, specifications and testimonials are quoted from the client's own pages and recorded with their source. A claim the source does not make is corrected or removed, and a testimonial is never written.

Vercel The host, by default. You are asked first, and nothing deploys without your go-ahead. Open the reasoning

Why

Vercel deploys a static Astro site with one command and gives a preview address before production. Preview deployments tell search engines not to crawl them, production allows it, and the setting follows the environment so a preview is never indexed by mistake.

The trade-off

Metered bandwidth, which is fine for this workload. Any host that serves static files works: set the production environment and the site address, and the same build deploys there.

The questions behind it

Why Vercel by default?

One command for a preview and one for production, with no server to configure. The starter includes both as npm scripts. The trade-off is metered bandwidth.

What if I don't want Vercel?

Say so when it asks where the site will live. The build is static files, so Netlify, Cloudflare or your own server work. Set SITE_ENV=production and SITE_URL for the production build so the robots file and canonical links are right.

When is a site released?

Only after it is deployed from a verified build and the deployed address answers. A local preview stays a preview, however good it looks.

A project you own The folder. An ordinary Astro project that remembers its own decisions. Open the reasoning

Why

Everything lives in the project: the source profile, the options, your pick, every verification and the Palate runtime itself, pinned inside it. You can stop and continue later, in Claude Code or Codex, and it picks up from the saved choice rather than starting again. Checkpoints restore to a new folder and leave the original alone.

The trade-off

A project keeps the Palate runtime it was started with, so it behaves the same next month. Checks added in a later release apply to new projects.

The questions behind it

Do I get a real project, or a black box?

A real Astro project in a folder you choose. Put it in Git, take it elsewhere, keep building on it. Nothing the site needs lives on our servers; the library is read during the build, not at runtime.

Can I switch between Claude Code and Codex?

Yes. Both use the same project commands and the same Palate connection, and the project carries its own runtime, so either one can continue from the saved state.

The part you can't fake.

This is the part that makes a Palate site look unlike default AI output, and the part that checks it before anyone sees it.

Why ground every option in the reference library? Palate MCP Reproduce the craft layer faithfully, protect the identity layer absolutely.

Each option is built around a technique taken from real sites in the library. The builder reads that reference's signature moves and component notes, and watches its motion clip before claiming it saw the motion. The doctrine is to reproduce the craft layer (grid, spacing rhythm, type scale, motion, signature moves) faithfully, since no one owns that, while protecting the identity layer (a brand's palette, wordmark, fonts, photos and copy) absolutely.

Reproduce faithfully

The craft layer: grid, spacing rhythm, type scale, motion, signature moves. No one owns that.

Protect absolutely

The identity layer: a brand's exact palette, wordmark, fonts, photos and copy. Never lifted.

How do you stop it claiming work it did not do? The project records what was read and what passed, and checks claims against the record.

A hook records every library read and whether it succeeded. An option cannot be marked ready unless it names a reference the project actually read, or says plainly that it is ungrounded because the library could not be reached. Verification runs the checks as commands and stores their output; a scope that has to be a command cannot be passed by declaring it. A check that could not run is named as such, never counted as a pass.

01 · recorded

The record

A hook records every library read and whether it succeeded.

02 · checked

Verification

Checks run as commands with their output kept. A scope that must be a command cannot be declared.

03 · outcome

Evidence or a label

What could not run is named, never passed: an ungrounded option, an unjudged design.

Who judges the design? Two judges besides the builder: an independent critic, and a comparison against library sites.

An independent critic, in a separate agent, reviews the picked direction before it spreads across the site and the finished site before handover, and a separate builder makes the corrections, within four rounds in total. Then the site is compared with exemplar sites from the library, each comparison run twice with the images swapped, in a fresh agent. It passes only when it reads as comparable or better. A worse reading goes back to the critic loop.

How are the facts kept true? Every claim on the built pages is quoted, sourced and checked.

Before verification, every factual claim the built pages make (years, counts, ratings, prices, specifications, guarantees, testimonials) is listed with its page and the client source it rests on. Verification fails a claim the source does not support, a quote that is not actually on the page, or two pages that give different values for the same thing. We added this after a build invented a founding year, a specification and testimonials that passed every other check.

How is SEO and AI-crawler readiness handled? A sitemap, canonical links, structured data and an llms.txt from the first file, checked over the built site.

The starter ships a sitemap, a robots file that blocks crawling on previews and allows every crawler in production, AI crawlers included, canonical links, social cards, structured data and an llms.txt built from the site's own facts and pages. The SEO check runs over the built site, and a partial result fails rather than passing with unknowns.

What about motion? GSAPCSS Motion is part of the design from the first option, with a considered reduced-motion version.

Each option is built around an interaction, not decorated with fades afterwards. The builder uses an animation library when the choreography needs one and browser primitives when they are enough. Touch and keyboard get the same information as a pointer, reduced motion gets a considered alternative, and with JavaScript off the content and navigation still work.

Can it generate images and video? Higgsfield Optional. If you use Higgsfield, it asks once and stays inside a credit cap you choose.

If Higgsfield is installed, Palate asks once before using it. Stills can appear while you compare options, at most two per option, and a scroll film can follow once you pick, for the opening, one section or the whole page when the design calls for one. It checks the price before each job and never spends past your cap. Generated images are never presented as the client's real premises, people or products. Without Higgsfield you are never asked.

Philosophy

Can I swap a piece? At the edges, yes. The spine (working options, one system, independent judges, a verified release) stays.

Yes, at the edges: the host, whether there is a CMS, the animation library, whether generated media is used. What does not change is the spine: working options before a full build, one design system per site, judges that are not the builder, and a release only from a verified build. Those are load-bearing, and pulling one out tends to pull the value out with it.

Is this locked in? The process is fixed so the result is repeatable. The site is yours.

The process is fixed, because that is what makes the result repeatable: grounded in the reference library, built on one system, checked by judges that are not the builder. The output is not locked in. It is an ordinary Astro project in a folder you own.

Why so opinionated? Taste is a system, not a coat of paint. This page is that argument, in the open.

Because taste is a system, not a coat of paint, and a system you re-decide every project is not a system. Every choice here trades some flexibility for work of a known quality. Each decision is written down with its reason and its trade-off, so it can be argued with rather than taken on faith. This page is that argument, in the open.

10 min

the aim for a first working design you can click through

Three distinct options, motion included. You pick by using them, not by imagining.

Set up your machine.

Two tiers: the minimum to start a site, and what shipping it and the optional integrations need. Most sites need only the first.

  • Claude Code or Codex

    The builder runs in either. Other MCP clients (Cursor, Windsurf, VS Code) can read the library; the builder itself runs in Claude Code or Codex.

  • Connect Palate

    One line in your terminal, then /mcp in Claude Code to sign in. The setup prompt in your dashboard carries a token instead, so there is no sign-in step.

  • Install the plugin

    Two more lines in the same terminal, then restart Claude Code so the skill loads.

  • Node 22.12 or newer

    Each new site is an Astro project and installs its own dependencies with npm.

  • Vercel CLI, signed in

    The default host. The site deploys with npm run deploy once you say so. Any host that serves static files works too.

  • A Sanity account (only if someone will edit)

    Asked after you pick a direction. A site nobody edits without a developer keeps its content in the code.

  • Shopify Storefront access (commerce only)

    For a Shopify shop: Storefront API access and a Redis database for the cart session. Design options never wait on it.

  • Higgsfield (optional)

    If you use it, Palate can generate images while you compare options and a scroll film after you pick, within a credit cap you choose. Without it, nothing changes.

  • A form destination

    Where enquiries should go, agreed before launch. A local demonstration says it is one.

Or let Claude Code do it.

One paste, and it runs every setup command itself, then tells you the two things it cannot do for you: the restart and the browser sign-in.

Or let Claude Code do it
Set up Palate for me. Run every command yourself, and only stop for things that need me, telling me exactly what to do.

1. Check Node is 22.12 or newer. Install the Vercel CLI if it is missing (npm i -g vercel).
2. Connect the Palate MCP (leave it if palate already exists):
   claude mcp add --scope user --transport http palate https://mcp.palatemcp.com/api/mcp
3. Install the plugin:
   claude plugin marketplace add jake-jiffi/palate-marketplace
   claude plugin install palate-website-builder@palate
   If the marketplace is already added, run claude plugin marketplace update palate and claude plugin update palate-website-builder@palate instead.
4. Tell me to restart Claude Code, then run /mcp and sign in to Palate in the browser.
5. When I confirm, call the refs_list_verticals tool to check the connection, then give me one line I can use to start my first site.

Signed in at app.palatemcp.com? The setup prompt on your dashboard carries your token, so the browser sign-in step disappears.

That is the how and the why. When you want the how-to, the docs are next.

Read the docs