Webflow Campaigns builds a page per persona from one DESIGN.md

One brand file in, a landing page per audience out

Webflow Campaigns is now on sale as a standalone tool for marketing teams, and it works alongside a main site whether that site runs on Webflow or another CMS. It starts by extracting a brand's visual identity and components into a design system written as DESIGN.md, then builds landing pages and message-matched ads from a brief the marketer develops with an agent.

The part that changes a designer's job is the variation model. Pages can be personalized for personas, industries or individual accounts, each with its own URL and ads that carry the same message, edited on a visual canvas built for marketers. When we covered the September preview, it was a demo; now it is a product a client can buy, which means the pages you design become templates other people fork.

Campaigns is now our one-stop shop, cutting out additional prompting and the need to rebuild our designs.

Gray's team previously drafted a mockup in Lovable and then rebuilt it in WordPress. That rebuild step is where a web designer usually catches drift, so its disappearance moves the checking upstream into the design system file.

Brand source

DESIGN.md generated from the existing site's identity and components

Variants

Personas, industries or named accounts, each at its own URL with matching ads

Forms

Marketo or HubSpot, so leads land in the existing workflow

Ads

Performance Max campaigns set up in Webflow and sent to Google Ads

Reporting

Sessions and conversions, with HubSpot and Salesforce CRM data

The same campaign pages, edited from Claude

Campaigns does not require the marketer's canvas. The launch post says assets can be built and refined through the AI tools a team already uses, Claude among them, by way of Webflow's MCP server. For a freelancer that is the practical door in: you can review and correct a client's persona pages from your own assistant session instead of logging into a seat you were never given.

Treat that door as a review channel first. A model editing a variant through MCP reads the same DESIGN.md the generator did, so a fix that belongs in the brand file should go there, not into one page where the next variant will undo it.

Firefox 159 runs animations off the scrollbar

The Firefox 159 beta notes add scroll-driven animations: the animation-timeline, scroll-timeline, view-timeline and animation-range properties, plus the ScrollTimeline and ViewTimeline interfaces. Mozilla's release calendar puts Firefox 159 on general release on October 27, which brings the last of the three major engines along.

The amber hairline under this page's toolbar is one. It fills as you scroll, with no script, and it simply stays empty in a browser without support.

/* reading progress, no JavaScript */
@supports (animation-timeline: scroll()) {
  .progress {
    transform-origin: 0 50%;
    animation: fill linear both;
    animation-timeline: scroll(root);
  }
  @keyframes fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
}
@media (prefers-reduced-motion: reduce) { .progress { display: none } }

For long variant tables, a view() timeline on each row can fade in its thumbnail as it enters. Keep it to one motion per page and gate it behind the reduced-motion query.

Brief the base row, then the allowed changes

If a client buys a tool that forks landing pages per audience, the designer's deliverable shifts from a page to a page plus its permitted variations. Write the base page as the complete reference, then list the fields a variant may change and the ones it may not. Headline, proof point, hero image and offer usually vary; type scale, button style, form layout and the brand palette should not.

The rules belong in the brand file, because that is what the generator and every MCP session read. The open DESIGN.md format is plain Markdown, so a section titled for variation rules is enough to start. Then check the first three generated variants side by side against the base, cell by cell, before the client multiplies them.

Export this layout as a prompt

Paste it into a build tool to get a data table landing page with the ditto-cell variant matrix, on your own content.

Build a single landing page in the form of a data table product page: the variants view of a campaign or pricing tool, where the content is a comparison of one base offer against several audience variants.

Structure, top to bottom:
1. A slim top nav (brand left, three text links right).
2. A sticky toolbar masthead instead of a hero title block: a record count ("No. 12 of 40" style, the number in a condensed display face in the accent), a sort label, the date and read time as label/value pairs. A 2px accent hairline at its bottom edge fills with page scroll using animation-timeline: scroll(root) inside @supports, hidden under prefers-reduced-motion.
3. A full-bleed hero band with one photographic or printmaking image as the ground, a left-to-right navy scrim so the headline (condensed display, 12ch max) and a two-sentence deck sit at WCAG AA contrast on the dark left third. One filled button and one text link.
4. A sortable index table of the page's sections (No., Item with a one-line summary, Source, Date, Status as a filled label). Header buttons really sort and update aria-sort. On mobile, rows stack as blocks.
5. Every following section is an expanded row: it opens with a header strip repeating the index columns (small uppercase mono labels over values), then an h2 and a 720px reading column aligned under the Item column.
6. The signature component: a variant matrix. Columns: thumbnail, variant name with type, URL, headline, proof point, offer, form, button. The base row is pinned first with a faint fill. In every other row, cells inherited from the base show a muted "= base" ditto (real value kept for screen readers), and cells that differ get a 24% accent tint at 24 percent and a 2px accent underline. A real switch toggles the dimming off to show the full grid. The table scrolls horizontally inside its own bordered region on small screens.
7. Prompt section, short closing note, a sources table (title, publisher, date), previous/index/next nav, colophon.

Palette: deep navy ground #0D1A30 with a 1px horizontal ruling every 44px at 4.5% opacity, raised surfaces #132643 and #1A3258, cream text #EEF0E8, secondary text #B7C2D6, labels #8E9CB6, cobalt filled labels #2F5C9A, one ochre accent #E0A83E for the button, highlight and progress line, a softer #EBC98A for the single italic pullquote.
Type: Antonio 600/700 for display and h2s, Radio Canada 400/600 with italic for body, Reddit Mono 400/500 for labels, URLs, table headers and code. Tabular numerals in tables.

Guardrails: body text 19px with 1.65+ line height, 60 to 75 character lines, never justified. Small labels must pass WCAG AA on their actual surface. Radius 4px on labels, 6px on buttons, 10px on panels, nothing pill-shaped except the switch track. No neon, no glow, no gradient text, no cyan on black, no left accent stripes, no fake search fields or decorative controls. Hover and focus states on every link and button at 150ms; one scroll-driven motion only. No readable text inside generated images.

Field note

A thin news day, and the one real launch is about multiplication. When pages are forked per audience by default, the most valuable thing a designer ships is the short list of what must never change.

Sources