300+ Item Webflow CMS Architecture & Variable Scaffolder

You are a senior CMS architect. Scaffold the content model and design variables for a content-heavy site that will hold 300+ items.

Step 1 — Plan, don't build yet. Propose:
- Collections with singular/plural names and slugs (e.g. Resources, Authors, Categories, Industries).
- Every field: display name, type, required or not, and help text an editor will understand.
- References instead of duplicated text: categories, authors and industries are their own collections, linked by single or multi references, so one rename updates every item.
- A "Featured" switch and a "Sort order" number so editors control lists without code.
- SEO fields on every template collection: Meta title, Meta description, OG image.
Respect the platform's limits (fields per collection, nested multi-reference lists) and say where they bite.

Step 2 — Variables / tokens: a colour collection with semantic aliases (text-primary, background-primary, border-primary) pointing at base swatches, a spacing scale and a radius scale (control 4px, card 8px, panel 16px).

Step 3 — Show me the full schema as a table and WAIT for my approval.

Step 4 — After approval, create the collections, then the fields (references last, once their target collections exist), then the variables. Report every created ID, and stop on the first error instead of continuing.

Never delete or modify existing collections unless I name them explicitly.

Target platform: Webflow.
- Build the structure as native Webflow Designer elements with Client-First class names (section_[name], [name]_component, [name]_item). No div soup from an HTML embed unless I ask for one.
- Hook every behaviour to custom attributes (data-gsap="…"), never to class names, so designers can restyle without breaking the script.
- Load GSAP through Webflow's built-in GSAP integration (Site settings) or the jsDelivr CDN tags, and put the init script in Page settings → Before </body> tag, wrapped in Webflow.push(() => { … }).
- Say which parts go in Designer styles, which in a page-head <style>, and which in the body script.
- Work through the Webflow MCP server (collections, fields, variables). If MCP isn't connected, fall back to the Data API v2 script below. Field types: PlainText, RichText, Image, Link, Number, Option, Switch, DateTime, Reference, MultiReference.

// schema.json: the approved plan Claude builds from
{
  "collections": [
    { "displayName": "Categories", "singularName": "Category", "slug": "category",
      "fields": [{ "type": "PlainText", "displayName": "Short label", "isRequired": true }] },
    { "displayName": "Resources", "singularName": "Resource", "slug": "resource",
      "fields": [
        { "type": "RichText",  "displayName": "Body",        "isRequired": true },
        { "type": "Image",     "displayName": "Cover",       "isRequired": true },
        { "type": "Reference", "displayName": "Category",    "target": "category" },
        { "type": "Switch",    "displayName": "Featured" },
        { "type": "Number",    "displayName": "Sort order" },
        { "type": "PlainText", "displayName": "Meta description" }
      ] }
  ]
}

// scaffold.mjs: the same plan via the Webflow Data API v2 (Node 18+).
// Check field payloads against the current API reference before running.
import schema from "./schema.json" with { type: "json" };
const API = "https://api.webflow.com/v2";
const headers = {
  Authorization: "Bearer " + process.env.WEBFLOW_TOKEN,
  "Content-Type": "application/json",
};
const post = async (path, body) => {
  const res = await fetch(API + path, { method: "POST", headers, body: JSON.stringify(body) });
  if (!res.ok) throw new Error(path + " " + res.status + " " + (await res.text()));
  return res.json();
};

const ids = {};
for (const c of schema.collections) {
  const { id } = await post("/sites/" + process.env.WEBFLOW_SITE_ID + "/collections", {
    displayName: c.displayName, singularName: c.singularName, slug: c.slug,
  });
  ids[c.slug] = id;
}
// Fields second, references last, so every target collection already exists.
for (const c of schema.collections) {
  const isRef = (f) => f.type.includes("Reference");
  const fields = [...c.fields.filter((f) => !isRef(f)), ...c.fields.filter(isRef)];
  for (const f of fields) {
    const { target, ...field } = f;
    if (target) field.metadata = { collectionId: ids[target] };
    await post("/collections/" + ids[c.slug] + "/fields", field);
  }
}
console.log(ids);