Update to Unbounce - Classic Builder

{
  "description": "How to build or edit an Unbounce AI Builder page through Unbounce MCP — get_ai_builder_catalog, create_ai_builder_page, get_ai_builder_document, edit_ai_builder_page, then publish_page — and what makes the page good. Use by default when the user asks to create, build, design, or generate a new Unbounce landing page (AI Builder is the default route for a new page unless the account's plan lacks it or they ask for a Classic or custom-HTML page), and whenever the page to edit, restyle, or publish is an AI Builder page, including a colleague's. Carries a menu of design-system references to style a page from.",
  "included_files": [
    {
      "relative_path": "design-systems/LICENSE",
      "size_in_bytes": 1403
    },
    {
      "relative_path": "design-systems/airbnb.md",
      "size_in_bytes": 14037
    },
    {
      "relative_path": "design-systems/airtable.md",
      "size_in_bytes": 25963
    },
    {
      "relative_path": "design-systems/apple.md",
      "size_in_bytes": 27994
    },
    {
      "relative_path": "design-systems/bmw.md",
      "size_in_bytes": 19244
    },
    {
      "relative_path": "design-systems/cal.md",
      "size_in_bytes": 22692
    },
    {
      "relative_path": "design-systems/claude.md",
      "size_in_bytes": 20282
    },
    {
      "relative_path": "design-systems/clay.md",
      "size_in_bytes": 16835
    },
    {
      "relative_path": "design-systems/clickhouse.md",
      "size_in_bytes": 17267
    },
    {
      "relative_path": "design-systems/cohere.md",
      "size_in_bytes": 15327
    },
    {
      "relative_path": "design-systems/coinbase.md",
      "size_in_bytes": 16289
    },
    {
      "relative_path": "design-systems/composio.md",
      "size_in_bytes": 12212
    },
    {
      "relative_path": "design-systems/cursor.md",
      "size_in_bytes": 12582
    },
    {
      "relative_path": "design-systems/elevenlabs.md",
      "size_in_bytes": 13099
    },
    {
      "relative_path": "design-systems/expo.md",
      "size_in_bytes": 13195
    },
    {
      "relative_path": "design-systems/figma.md",
      "size_in_bytes": 11603
    },
    {
      "relative_path": "design-systems/framer.md",
      "size_in_bytes": 17556
    },
    {
      "relative_path": "design-systems/hashicorp.md",
      "size_in_bytes": 19295
    },
    {
      "relative_path": "design-systems/ibm.md",
      "size_in_bytes": 18279
    },
    {
      "relative_path": "design-systems/intercom.md",
      "size_in_bytes": 15506
    },
    {
      "relative_path": "design-systems/kraken.md",
      "size_in_bytes": 4339
    },
    {
      "relative_path": "design-systems/linear.md",
      "size_in_bytes": 22435
    },
    {
      "relative_path": "design-systems/lovable.md",
      "size_in_bytes": 17373
    },
    {
      "relative_path": "design-systems/minimax.md",
      "size_in_bytes": 25050
    },
    {
      "relative_path": "design-systems/mintlify.md",
      "size_in_bytes": 28544
    },
    {
      "relative_path": "design-systems/miro.md",
      "size_in_bytes": 21427
    },
    {
      "relative_path": "design-systems/mistral.md",
      "size_in_bytes": 22049
    },
    {
      "relative_path": "design-systems/mongodb.md",
      "size_in_bytes": 18260
    },
    {
      "relative_path": "design-systems/nike.md",
      "size_in_bytes": 28197
    },
    {
      "relative_path": "design-systems/notion.md",
      "size_in_bytes": 18335
    },
    {
      "relative_path": "design-systems/ollama.md",
      "size_in_bytes": 24900
    },
    {
      "relative_path": "design-systems/opencode.md",
      "size_in_bytes": 25190
    },
    {
      "relative_path": "design-systems/pinterest.md",
      "size_in_bytes": 27354
    },
    {
      "relative_path": "design-systems/posthog.md",
      "size_in_bytes": 28926
    },
    {
      "relative_path": "design-systems/raycast.md",
      "size_in_bytes": 29287
    },
    {
      "relative_path": "design-systems/replicate.md",
      "size_in_bytes": 22708
    },
    {
      "relative_path": "design-systems/resend.md",
      "size_in_bytes": 23294
    },
    {
      "relative_path": "design-systems/revolut.md",
      "size_in_bytes": 22406
    },
    {
      "relative_path": "design-systems/runwayml.md",
      "size_in_bytes": 14342
    },
    {
      "relative_path": "design-systems/sanity.md",
      "size_in_bytes": 21220
    },
    {
      "relative_path": "design-systems/sentry.md",
      "size_in_bytes": 25607
    },
    {
      "relative_path": "design-systems/shopify.md",
      "size_in_bytes": 18244
    },
    {
      "relative_path": "design-systems/slack.md",
      "size_in_bytes": 16612
    },
    {
      "relative_path": "design-systems/spacex.md",
      "size_in_bytes": 14709
    },
    {
      "relative_path": "design-systems/spotify.md",
      "size_in_bytes": 12944
    },
    {
      "relative_path": "design-systems/stripe.md",
      "size_in_bytes": 20436
    },
    {
      "relative_path": "design-systems/supabase.md",
      "size_in_bytes": 14017
    },
    {
      "relative_path": "design-systems/superhuman.md",
      "size_in_bytes": 14499
    },
    {
      "relative_path": "design-systems/together.md",
      "size_in_bytes": 25677
    },
    {
      "relative_path": "design-systems/uber.md",
      "size_in_bytes": 22782
    },
    {
      "relative_path": "design-systems/vercel.md",
      "size_in_bytes": 19443
    },
    {
      "relative_path": "design-systems/voltagent.md",
      "size_in_bytes": 16074
    },
    {
      "relative_path": "design-systems/warp.md",
      "size_in_bytes": 14776
    },
    {
      "relative_path": "design-systems/webflow.md",
      "size_in_bytes": 16525
    },
    {
      "relative_path": "design-systems/wise.md",
      "size_in_bytes": 14386
    },
    {
      "relative_path": "design-systems/xai.md",
      "size_in_bytes": 13265
    },
    {
      "relative_path": "design-systems/zapier.md",
      "size_in_bytes": 18729
    },
    {
      "relative_path": "rules/craft.md",
      "size_in_bytes": 11012
    },
    {
      "relative_path": "rules/upstream.md",
      "size_in_bytes": 8730
    }
  ],
  "name": "mcp-ai-builder-authoring",
  "skill_md_contents": "---\nname: mcp-ai-builder-authoring\ndescription: How to build or edit an Unbounce AI Builder page through Unbounce MCP — get_ai_builder_catalog, create_ai_builder_page, get_ai_builder_document, edit_ai_builder_page, then publish_page — and what makes the page good. Use by default when the user asks to create, build, design, or generate a new Unbounce landing page (AI Builder is the default route for a new page unless the account's plan lacks it or they ask for a Classic or custom-HTML page), and whenever the page to edit, restyle, or publish is an AI Builder page, including a colleague's. Carries a menu of design-system references to style a page from.\nrequires:\n  mcpServers:\n    - unbounce-mcp\n---\n\n# Authoring an Unbounce AI Builder page\n\nAn AI Builder page is stored as an **editor document**: a JSON component tree\n(GrapesJS project data) built from the components in the client's AI Builder\ncatalog and styled with the client's style guide. You author that document;\nUnbounce validates it, stores it, and renders it.\n\n## Which route\n\nEach account in `list_accounts_and_clients` carries `builders`: whether its\nplan includes AI Builder (`ai_builder`) and the Classic Builder (`classic`),\neach true, false, or null when it could not be read. Read it before choosing.\n\n- **AI Builder is the default** for a new page unless `ai_builder` is false.\n- Use the Classic HTML route (`create_page_from_html`, the `mcp-page-authoring`\n  skill) when `ai_builder` is false, when the user asks for a Classic or\n  custom-HTML page, or when the catalog genuinely cannot express what was asked\n  for — for example a bespoke interactive widget or custom page-level\n  JavaScript. Not when `classic` is false: that plan has no Classic Builder.\n- With both false the plan includes neither of these builders (it may still\n  have another, such as Smart Builder), and no page can be created here. Tell\n  the user.\n- Tell the user which route you took and why.\n- An existing page stays on the route it was built with. A Classic page is\n  edited with the Classic tools; an AI Builder page with the tools below.\n\n## These pages are editable in the Unbounce AI builder\n\nA page made or changed here is an ordinary AI Builder page. The user — and\nanyone else on the client — can open it and keep editing it in the Unbounce AI\nbuilder (`create_ai_builder_page` returns its `editor_url`). The \"cannot be edited\nin the Unbounce builder\" rule is about **Classic pages authored from HTML only**\nand does not apply here; never tell the user an AI Builder page is MCP-only.\n\n## What does not work on an AI Builder page\n\nThese tools refuse an AI Builder page, so say so instead of trying them:\n\n- The Classic HTML tools: `update_variant_from_html`, `create_variant_from_html`,\n  `bulk_edit_variants`, `get_variant`.\n- `create_variant_from_existing_variant` — there is no MCP way to add a variant\n  to an AI Builder page.\n- `set_conversion_goals` and `get_layout_hints`.\n\n`set_variant_standing` works, with one limit on these pages: promoting the\ncurrent champion or a discarded variant is rejected\n(`set-variant-standing.upstream-validation`) — bring a discarded variant back\nas a challenger first. `set_page_metadata` works (see \"Page metadata\" below).\n`set_traffic`, `set_variant_name`, `manage_page_redirect`, `get_page_stats`,\n`reset_page_stats`, `unpublish_page`, and `delete_page` work as on a Classic\npage. A page with no traffic recorded yet\nreturns `variants: []` with a `variants_unavailable` note, on any builder.\n\n## Finding a page\n\n`list_accounts_and_clients` returns each client with `clientUuid` and `clientId`.\nPass `clientUuid` as `client_uuid` to `list_client_pages`; `clientId` is the\nnumeric `context` the AI Builder tools take.\n\n`list_client_pages` lists **Classic pages only by default**. To find an AI Builder\npage — \"edit my colleague's page\" — pass `builder: \"ai_builder\"` (or `\"any\"` for\nboth). Under those scopes `total` is absent and `next_after` is a heuristic: keep\npaging until `next_after` is gone, and expect some slices to come back empty.\n\nThen `list_page_variants` with the `page_uuid`: identify each variant by its\n`letter`. On an AI Builder page `variant_id` and `preview_url` are absent, and the\n`page` block carries `context`.\n\n## Tool order\n\n**A new page**\n\n1. `list_accounts_and_clients` — the client's `clientId` is the `context`, and\n   its account's `builders` decides the route (see \"Which route\").\n2. `get_ai_builder_catalog` with `context`. It returns the component projection\n   (`type`, `name`, `category`, `description`) and the client's `style_guide`.\n   Call it again with `component_types` for the full definition (traits,\n   defaults, nesting rules, styles) of the few components you mean to use.\n   Every account that can use AI Builder gets the full catalog and a style\n   guide (Unbounce's default when the account has none of its own).\n   `style_guide` is `null` only when the read failed; `style_guide_unavailable`\n   names the HTTP status. That may be transient: call `get_ai_builder_catalog`\n   again before authoring.\n3. Plan the page (see [rules/craft.md](rules/craft.md)) and, if useful, pick one\n   design system from the menu below.\n4. Author the document. Use only catalog component types and the editor's own\n   built-in types, which the validator also accepts: `text`, `textnode`, `link`,\n   `image`, `video`, `button`, the form controls, `svg`, and `default` (a node\n   with no `type` is a `default` node). Carry text in a\n   `{ \"type\": \"textnode\", \"content\": \"…\" }` child, never an HTML string. If you\n   are unsure of the shape, read an existing AI Builder page with\n   `get_ai_builder_document` and follow its `document`. The document must\n   serialize to at most 1,000,000 bytes.\n5. Style with the style guide's variables — see \"Styling\" below.\n6. `upload` the JSON file (or `upload_inband` when you cannot run shell\n   commands) to get an `upload://` reference.\n7. `create_ai_builder_page` with `context` and `document_ref`; optionally\n   `page_name`, `variant_name`, and `style_guide_id` (omit it to use the client's\n   resolved style guide — a page is pinned to its style guide at creation only).\n   It returns the new page's uuid as `page_id`. The page is created\n   unpublished, with no URL.\n8. `publish_page` with `page_uuid` set to that `page_id` — only when the user\n   asks to publish.\n\n**An existing page**\n\n1. `list_client_pages` with `builder: \"ai_builder\"`, then `list_page_variants`.\n2. `get_ai_builder_document` with `page_uuid`, `context`, and `variant` (the\n   letter, default `a`). Read it right before you edit, and re-read after any\n   pause or failure. Keep the `version_id` it returns: the edit needs it.\n3. `edit_ai_builder_page` with `page_uuid`, `context`, `variant`, `version_id`\n   (from step 2, or from your previous edit's result), and `operations` (1 to 50: `insert`, `update`, `delete`, `update_text`,\n   `update_style`, `reorder`). See \"Editing\" below. Editing does not publish.\n4. `publish_page` with `page_uuid` when the user asks.\n\nSet the page's SEO title, description and social card with `set_page_metadata`\nat any point before publishing (see \"Page metadata\" below).\n\n## Styling\n\nOne rule, in this skill and in [rules/craft.md](rules/craft.md) alike:\n\n- Use the style guide's variables (`style_guide.variables`, written\n  `var(--name)`) for every colour, font, type size, weight, line height,\n  spacing, radius, border, and shadow the style guide has a variable for.\n  Variables follow a rebrand and the AI builder's theme editor; literal values\n  survive neither.\n- Literal values for those are allowed in two places only: a **section or\n  decorative background** (a tint, a gradient, an orb) that harmonizes with the\n  palette, and a **layout dimension the style guide has no variable for** (a\n  width or height, `max-width`, padding, margin, `gap`, grid template, or\n  `aspect-ratio`), in px, %, or `fr`. Never write a literal font family, and\n  never a literal text, border, or button colour.\n- CSS that is not a design value — `display`, `position`, flex and grid\n  alignment, `clip-path` shapes, `filter`, `z-index`, `object-fit` — is\n  written as-is.\n- A `var(--x)` without a fallback that the style guide does not set fails\n  validation. A `var(--x, fallback)` is **not** checked, so never use a\n  fallback to hide a variable the style guide does not set.\n\n## Editing\n\n`operations` run in order as one atomic batch: if any one cannot be applied,\nnothing is written.\n\n- **Targets.** Name a component by `{ id }` (its `attributes.id`; it must match\n  exactly one component, and few components carry one) or by `{ path }` (the\n  position as the document shows it, such as\n  `pages[0].frames[0].component.components[2]`).\n- **A path is resolved against the document as the earlier operations in the\n  same batch left it.** After an `insert`, `delete`, or `reorder`, later paths\n  in the batch point at the shifted positions.\n- **Edits are locked to the version you read.** `version_id` is required. If\n  the variant has been saved since that read, in the Unbounce AI builder or by\n  another call, the edit fails as `edit-ai-builder-page.conflict` and nothing is\n  written, so a path from your read can never land on a different component. A\n  successful edit returns the new `version_id`; pass it to the next edit\n  instead of re-reading.\n- **`update_style`** merges CSS into the component's own `#id` rule. A component\n  without an `attributes.id` is given one, reported in `generated_ids`; use that\n  id to target it afterwards.\n- **`update_text`** does not write into a `script` component; replace the script\n  with `update` instead.\n- **Rendered text follows its `data-*` source.** The AI builder rebuilds much\n  visible text (button labels, field labels, testimonial quotes) from the\n  component's `data-*` attributes each time it loads the page. An edit keeps the\n  two in step, both ways, and lists every value it changed this way in\n  `synced`. When two `data-*` attributes on one component hold the same value,\n  the edit is refused; set the attribute you mean together with its text, using\n  `update` with both `attributes` and `components`.\n- **Relabelling a form field can rename it.** A field whose name follows its\n  label (`data-copy-name-from-label`) takes the new name on the next save in the\n  editor, which changes the field name lead integrations receive. Tell the user\n  when you relabel one.\n- **Restore point.** Before writing, the page as it was is saved to the\n  variant's version history; the result names it `snapshot_version_id`.\n- **Not idempotent.** Sending the same batch twice applies it twice: a repeated\n  `insert` adds a second copy.\n\n## Page metadata (SEO & social sharing)\n\nThe page `<title>`, meta description, robots noindex, favicon and Open Graph\n(`og:*`) tags are the page's **settings**, not components: they live in\n`pages[0].settings` of each variant's editor document, where the Unbounce AI\nbuilder's settings panel also writes them. Set them with `set_page_metadata`\n(`page_uuid` only — no `context`); read them back from\n`get_ai_builder_document` under `pages[0].settings`. Always set a title and a\ndescription on a page the user intends to publish: a page with no title\npublishes under its page name.\n\n- **Every active variant is written** (the ones in the routing config), or one\n  with `letter`. Each write is a document save: the result's `variants_updated`\n  lists each variant's **new `version_id`** and its `snapshot_version_id`\n  restore point. A `version_id` you were holding for `edit_ai_builder_page`\n  is stale after this call — use the new one, or the edit is refused as a\n  `conflict`.\n- **Fields.** `title`, `description`, `keywords`, `hide_from_search_engines`,\n  `favicon` (an `upload://` icon or an asset id/uuid from `list_assets`),\n  `open_graph.title` / `description` / `image` (an https URL or an\n  `upload://` image). Partial: only passed fields change, `null` clears one.\n- **No slot on an AI Builder page**, reported in `warnings` rather than\n  applied: `open_graph.type` (always `website`) and `open_graph.url`. A\n  `<ub:dynamic>` tag is not rendered in these pages' head, so it is stripped\n  to its default text, with a warning — do not offer Dynamic Text Replacement\n  in an AI Builder page's title or description.\n- **Fallbacks at publish**, also in `warnings` when a call clears them: an empty\n  title publishes the page name; no favicon publishes Unbounce's default icon.\n- Changes are **staged**: a published page keeps its old head until the next\n  `publish_page`.\n- `set-page-metadata.no-editor-document` — the variant has never been saved;\n  ask the user to open it in the Unbounce AI builder and save once.\n- `set-page-metadata.unknown-routing-strategy` — the server cannot tell which\n  variants are active; pass `letter` to write one.\n\n## Reading refusals\n\nEvery failure carries `code`, `reason`, and `remedy`; read the remedy and act on\nit. Runtime specifics are in `detail`.\n\n**Validation** — `create-ai-builder-page.invalid-document`,\n`edit-ai-builder-page.invalid-document`. Nothing was created or written.\n\n- When the validator ran, `errors` lists every problem (`component`, `path`,\n  `reason`): a malformed tree (no `pages` array or an empty one; a page, frame,\n  or component that is not an object; `components` that is neither an array of\n  components nor a string), an unknown component type, a `var(--x)` without\n  a fallback that the style guide does not set, and script the caller added:\n  an `on*` or `srcdoc` attribute, a `javascript:` URL, a `data:` document, or a\n  component `script` property. Fix all of them and retry; to run code on the\n  page, add a `script` node or Custom HTML deliberately.\n- A document that is not JSON, not a JSON object, or over 1,000,000 bytes is\n  refused **without** `errors`; the reason is in `detail`.\n- `limits` (also on success) names what the check does not cover — nesting,\n  required traits, trait and CSS values, `var()` fallbacks, rendering — so a\n  pass is not proof the page renders as intended.\n\n**Editing**\n\n- `edit-ai-builder-page.target-not-found` / `edit-ai-builder-page.invalid-operation`\n  — `detail` names the operation's index. Re-read and re-target.\n- `edit-ai-builder-page.conflict` — the variant was saved after the read your\n  `version_id` came from (or during the call). Nothing was written. Re-read with\n  `get_ai_builder_document`, re-plan against what is there now, and retry with\n  its `version_id`.\n- `edit-ai-builder-page.no-version-id` — the version the document was read from\n  is unknown, so the edit was not risked. Ask the user to open the page in the\n  Unbounce AI builder and save it once, then retry.\n- `edit-ai-builder-page.save-failed` — the save failed after the restore point\n  was taken. Re-read the page to see whether the change landed **before**\n  retrying; a blind retry can apply the batch twice.\n\n**Creating**\n\n- `create-ai-builder-page.create-failed` — the create failed unexpectedly. Check\n  `list_client_pages` (`builder: \"ai_builder\"`) for a new empty page before\n  retrying, so a retry does not leave a duplicate.\n- `create-ai-builder-page.content-write-failed` — the page exists but holds no\n  content; `detail` names it. Remove it with `delete_page` before retrying, or\n  you leave a duplicate.\n- `create-ai-builder-page.style-guide-unavailable` — no usable style guide\n  resolved. Omit `style_guide_id`, or pass the one `get_ai_builder_catalog`\n  returns.\n\n**The plan** — a retry does not change these. Both come before anything is\nuploaded or created.\n\n- `get-ai-builder-catalog.ai-builder-not-entitled`,\n  `create-ai-builder-page.ai-builder-not-entitled` — the plan has no AI Builder.\n  Take the Classic HTML route and tell the user why.\n- `get-ai-builder-catalog.no-builder-entitled`,\n  `create-ai-builder-page.no-builder-entitled` — the plan has neither builder,\n  so no page can be created here. Tell the user.\n\n**Account settings** — a retry does not fix these. Tell the user; where the\nremedy names the Classic HTML route, offer it.\n\n- `create-ai-builder-page.ai-builder-flag-off`\n- `create-ai-builder-page.not-author-or-not-entitled` — either the user is not\n  an author on this client or the plan lacks AI Builder; the refusal does not\n  say which. The account's `builders` in `list_accounts_and_clients` tells them\n  apart.\n\n**Publishing**\n\n- `publish-page.no-active-variant` — the page's traffic routing serves no\n  existing variant; fix it with `set_traffic`, then publish.\n- `publish-page.contentless-variant` — an active variant has no saved content;\n  `detail` names it. Write content to it, or take it out of traffic.\n- `publish-page.content-check-failed` — the pre-publish check could not confirm\n  that the active variants have content, so nothing was sent. Retry shortly; if\n  it persists, the account may lack AI Builder or the user access to the client.\n- `publish-page.left-publishing` — the page is stuck publishing (a known\n  platform bug). Publishing again will not clear it; tell the user an Unbounce\n  admin must run Kick on the page.\n\n## What makes a good page\n\n[rules/craft.md](rules/craft.md) is the craft guide: replace every demo default\nwith real copy, add a few bespoke details, keep layouts dense and aligned, use\nnav and footer components deliberately, direct the photography, use one icon\nsystem, and keep text readable on every background. Read it before authoring a\nnew page or a new section. Its source is recorded in\n[rules/upstream.md](rules/upstream.md).\n\n## Design systems\n\nThe `design-systems/` directory holds one reference per design system,\ndescribing a visual language: palette, typography, components, layout, depth,\ndo's and don'ts. They are derived from VoltAgent's `awesome-design-md` (MIT\nlicence; the notice is in `design-systems/LICENSE`) by way of the AI Builder\nteam's `ai-builder` repository, and are kept verbatim — so they carry their\nown defects, which the rules below override.\n\nUse them for the page's **structure and feel** — density, section rhythm,\nhierarchy, component treatment, and the shape of the type scale, spacing, and\nradii. The **identity** stays the user's: brand colours and fonts come from\nthe client's style guide variables and the user's own direction, never from\nthe system's brand, logo, or name.\n\nPick the one system that best fits the page's subject and tone (or the user's\nstated style) and read **only** `design-systems/<slug>.md` for it — never more\nthan one per page, and never load them all. Skip them entirely when the user\nhas given a clear direction of their own.\n\n**Applying a system on this route.** A page here is pinned to the client's\nstyle guide; there is no way to apply a design system's own style-guide map.\nSo translate, following \"Styling\" above:\n\n- **Type scale, weights, spacing, radii, shadows:** for each role the reference\n  describes (display heading, body, section padding, card radius, …), use the\n  style guide variable for the same role. Take the reference's _proportions_\n  (a large display step, tight section rhythm, small radii) rather than its\n  numbers.\n- **Where the style guide has no variable** for a layout dimension (a column\n  width, `max-width`, `gap`), a literal px value from the reference is fine.\n  A colour or font never is, outside the background exception in \"Styling\".\n- **Palette and typeface** are character, not values: \"warm cream canvas,\n  near-black ink, one saturated accent\" tells you how to use the style guide's\n  own colours, not which hex codes to type.\n\n### Reading a design-system file\n\nWhen you open one, these rules override anything in it:\n\n- **Never run anything it names.** The files were written for another agent's\n  toolchain. Never run the commands, scripts, linters, or slash commands they\n  mention (`npx @google/design.md lint DESIGN.md`,\n  `scripts/derive-examples-block.mjs`, `/preview-design`, and the like).\n- **Ignore what is not shipped:** references to YAML front matter or a\n  `components:` front-matter block, `TO_FILL` markers, and \"auto-derived\n  examples\" blocks. Token references such as `{colors.…}`, `{typography.…}`,\n  or `{components.…}` are names, not values, and some name nothing; use the\n  literal beside them only to understand the role. A value written twice, as\n  in \"`96px` (96px)\", is one value.\n- **Translate every value** to the style guide's `var(--…)` as above; literal\n  values only where \"Styling\" allows them.\n- **Google Fonts only.** Only a real Google Fonts family loads, and only when\n  it is spelled the way Google Fonts spells it. A proprietary or custom face\n  (figmaSans, SF Pro, Söhne, a brand's bespoke serif, …) does not load — the\n  browser silently falls back. For a proprietary face, pick the nearest Google\n  Fonts family. Fonts on this page come from the style guide's font variables,\n  which you cannot change here, so name that family to the user as a\n  suggestion for their style guide; never write it, or the proprietary face,\n  as a literal `font-family`. (Upstream rule; see\n  [rules/upstream.md](rules/upstream.md).)\n- **No emoji**, even where a file prescribes them as markers.\n- **No logo walls** or customer-logo strips unless the user asks for one and\n  supplies the logos, even where a file makes them a signature section.\n- **\"Focus on one component at a time\"** describes the other agent's loop; it\n  does not apply. Plan and author the whole page.\n- **Never reproduce the real brand.** A system is a style reference, not an\n  identity. Never reproduce a real brand's name, wordmark, logo, mascot or\n  character, proprietary typeface, or signature colours used as its identity\n  (a file's \"use Kraken Purple for CTAs and links\" means \"use one saturated brand colour\n  for CTAs — the user's\"). Never build a page that impersonates a real company\n  or could pass for its site, sign-in, checkout, or support page — fintech,\n  banking, and crypto above all. If a request asks for that, decline that part\n  and say why.\n\nMenu — `slug` — name · theme · aesthetic · best for. The theme is the canvas\nthe file itself describes (`hybrid`: dark and light bands); for 17 systems it\ndiffers from the upstream registry, which is wrong for them (see\n[rules/upstream.md](rules/upstream.md)).\n\n- `figma` — Figma · light · Clean, minimal, typography-led · best for: Restrained, elegant marketing pages\n- `notion` — Notion · light · Warm minimal, calm · best for: Approachable, content-first pages\n- `zapier` — Zapier · light · Bold, editorial, warm · best for: Human, marketing-friendly workflow and integration narratives\n- `airbnb` — Airbnb · light · Playful, lifestyle · best for: Consumer, booking, hospitality, travel\n- `linear` — Linear · dark · Technical, dense · best for: Modern SaaS and product-led pages\n- `spotify` — Spotify · dark · Bold, media-immersive · best for: Entertainment, streaming, media\n- `framer` — Framer · dark · Cinematic, design-tool prestige · best for: Portfolios and creative platforms\n- `stripe` — Stripe · hybrid · Premium, financial-grade · best for: Fintech, payments, serious B2B\n- `claude` — Claude (Anthropic) · hybrid · Editorial, literary · best for: AI/ML products, thoughtful brand storytelling\n- `vercel` — Vercel · light · Technical, minimal · best for: Developer tools, infrastructure, product launches\n- `shopify` — Shopify · hybrid · Cinematic commerce, cream-mint UI · best for: Ecommerce, DTC, merchant and storefront narratives\n- `intercom` — Intercom · light · Warm cream, friendly conversational · best for: Customer support, messaging, friendly SaaS\n- `slack` — Slack · light · Colorful workplace, aubergine accents · best for: Collaboration, workplace, colorful B2B SaaS\n- `supabase` — Supabase · light · Clean developer, emerald accent · best for: Developer tools, open-source, data platforms\n- `webflow` — Webflow · light · Design-tool prestige, white canvas and near-black ink · best for: Agencies, no-code builders, creative platforms\n- `coinbase` — Coinbase · light · Institutional blue, trust-forward · best for: Fintech, crypto, institutional financial products\n- `apple` — Apple · hybrid · Premium product, photography-first · best for: Premium consumer products, hardware, lifestyle launches\n- `nike` — Nike · light · Bold athletic, high-contrast lifestyle · best for: Sports, fitness, bold consumer lifestyle brands\n- `uber` — Uber · light · Bold black-and-white mobility · best for: Marketplace, mobility, delivery, utility consumer apps\n- `miro` — Miro · light · Playful collaborative, canary yellow · best for: Collaboration, workshops, visual teamwork products\n- `airtable` — Airtable · light · Editorial workflow, colorful signature cards · best for: Workflow software, ops tools, colorful B2B SaaS\n- `bmw` — BMW · light · Premium automotive, precise engineering · best for: Automotive, premium industrial, luxury product\n- `cal` — Cal.com · light · Clean neutral, developer-oriented scheduling · best for: Scheduling, calendars, productivity SaaS\n- `ibm` — IBM · light · Enterprise blue, corporate systems · best for: Enterprise, B2B platforms, institutional tech\n- `kraken` — Kraken · light · Purple-accented trading, data-dense · best for: Crypto trading, finance dashboards, exchanges\n- `pinterest` — Pinterest · light · Visual discovery, warm red accents · best for: Visual commerce, lifestyle, discovery platforms\n- `revolut` — Revolut · hybrid · Sleek fintech, gradient cards · best for: Consumer fintech, banking, mobile-first money\n- `spacex` — SpaceX · dark · Aerospace black, technical precision · best for: Aerospace, deep-tech, ambitious product launches\n- `wise` — Wise · light · Bright green, friendly money transfer · best for: Consumer fintech, remittance, clear pricing pages\n- `clickhouse` — ClickHouse · dark · Yellow accent analytics, technical clarity · best for: Analytics databases, data infrastructure\n- `expo` — Expo · light · Friendly mobile-dev, approachable docs · best for: Mobile development, React Native platforms\n- `hashicorp` — HashiCorp · dark · Enterprise infra, per-product accents · best for: Infrastructure, DevOps, enterprise platforms\n- `mintlify` — Mintlify · light · Docs-first, soft green accents · best for: Documentation products, developer education\n- `mongodb` — MongoDB · hybrid · Leaf-green developer, clean product · best for: Databases, developer platforms, data products\n- `replicate` — Replicate · light · ML platform, restrained technical · best for: ML APIs, model hosting, AI infrastructure\n- `sanity` — Sanity · dark · Editorial CMS, red accent · best for: CMS, content platforms, editorial tools\n- `clay` — Clay · light · GTM tooling, cream canvas, saturated feature cards · best for: GTM tools, sales intel, enrichment platforms\n- `composio` — Composio · dark · Agent tooling, integration dark UI · best for: Agent frameworks, integrations, automation\n- `cursor` — Cursor · light · AI IDE, warm cream editorial calm · best for: Developer tools, AI coding products\n- `lovable` — Lovable · light · Playful AI builder, gradient-forward · best for: AI app builders, creative developer tools\n- `opencode` — OpenCode · light · Open coding agent, terminal-native · best for: Open-source AI coding agents\n- `posthog` — PostHog · light · Playful product analytics, hedgehog energy · best for: Product analytics, open-source SaaS\n- `raycast` — Raycast · dark · Launcher chrome, vibrant gradients · best for: Productivity launchers, power-user tools\n- `resend` — Resend · dark · Minimal email API, monospace accents · best for: Email APIs, developer messaging\n- `sentry` — Sentry · dark · Error monitoring, pink-purple urgency · best for: Observability, error tracking, DevOps\n- `superhuman` — Superhuman · dark · Premium email, purple glow · best for: Premium productivity, email clients\n- `voltagent` — VoltAgent · dark · Agent framework, electric accents · best for: AI agent frameworks, orchestration\n- `warp` — Warp · dark · Modern terminal, block-command UI · best for: Developer terminals, CLI platforms\n- `cohere` — Cohere · light · Enterprise AI, coral-warm accents · best for: Enterprise AI, LLM platforms\n- `elevenlabs` — ElevenLabs · light · Audio AI, off-white editorial · best for: Voice AI, audio generation products\n- `minimax` — MiniMax · light · Multimodal AI, bold tech · best for: Multimodal AI, generative platforms\n- `mistral` — Mistral AI · light · European AI, orange sunset accents on white · best for: Foundation models, AI labs\n- `ollama` — Ollama · light · Local models, friendly simple · best for: Local LLMs, developer model runners\n- `runwayml` — Runway · dark · Creative AI video, cinematic · best for: Generative video, creative AI tools\n- `together` — Together AI · hybrid · Cloud AI infra, dark hero bands over white · best for: AI inference, model cloud platforms\n- `xai` — xAI · dark · Grok-era dark, stark monochrome · best for: Frontier AI labs, research products\n"
}