Vercel Shop serves agents the product page without the layout
Vercel's open source storefront for Shopify is now generally available. Each product URL can give people the designed page and give agents the price, stock, and options as plain data.
The storefront. A designed page for people, a catalog search for agents.
Cart2 of 3
One cart. Shared between the product pages and the shopping assistant.
Checkout3 of 3
Shopify's checkout. An agent gets a link to it, not the keys.
Listed
Oct 16, 2026
Template
Vercel Shop
Built on
Hydrogen SDK
Agents use
UCP over MCP
Status
Released
Listing details
The Fact Sheet
A property listing page on a terracotta paper field, with a house-number nameplate, a screenprint gallery, and a fact sheet that flips between the page and its data.
A single-property listing page, the kind a freelancer builds for an agent selling one home. The masthead is an enamel house-number plate. The gallery is a three-panel screenprint sequence, and the facts bar is the listing's beds-and-baths row.
The signature piece is the fact sheet. Every listing has one, a short table a buyer can trust. Here it is written once and read two ways: as a designed page by a person, and as plain fields by a machine.
house-number nameplate
gallery strip
listing facts bar
listing badges
fact sheet
page and data views
shared cart
paper grain
Just listedVercel, Oct 16
A Shopify storefront that agents can shop without reading the design
Vercel Shop, an open source Next.js storefront template for Shopify, is generally available. It sits on Shopify's Hydrogen SDK, which now works across JavaScript frameworks after the rebuild noted here in July and is also out of preview.
Product pages double as machine-readable content: price, availability, and options. The template also embeds structured data in pages and sitemaps for search and answer engines.
The same product URL can serve a visual page to people or product information that agents can read without interpreting the page's layout.
Vercel blog, October 16, 2026
Agents get tools too. The Universal Commerce Protocol, which Shopify co-developed, lets an agent search the catalog, check availability, build a cart, and get a checkout link. Vercel Shop makes that discoverable over MCP at the merchant's own domain, so the agent never navigates the site at all.
For a designer, the layout stops being the only interface. What the agent reads is the fact sheet underneath, and it has to say exactly what the page says.
AmenityFigma Make, Oct 13
Gemini 4 Argon joins the Figma Make model picker
Figma is rolling out Google's newest model in Make. Open the model picker in the Make chatbox and select Gemini 4 Argon. Figma says it is available on all plans.
Worth a side-by-side run on a comp you already know well. The model behind a builder shapes its layout instincts as much as its code.
Floor planTechnique
Write the fact sheet before the page
Vercel's post names the fields agents read and the actions they take. Set them beside what a person sees and the design job becomes clear: one source for both readings.
One product, two readers
Field or action
What a person sees
What an agent gets
Step
Price
The price set large in the buy box
price field
Browse
Availability
A stock line under the price
availability field
Browse
Options
Size and color pickers
options list
Browse
Find a product
Navigation and search
catalog search
Browse
Add to cart
A button, or the assistant
build a cart
Cart
Pay
Shopify checkout
a checkout link
Checkout
The last row matters. The agent can fill a cart, but payment still happens in a checkout a person sees. Structured data is the familiar half of this: schema.org Product and Offer markup already carries price and availability, so render it from the same record as the buy box.
Moving inWorkflow
How the template splits the work
The storefront and a shopping assistant powered by eve live in one codebase, so the store's design and the assistant's behavior are customized in the same place.
Shoppers can browse product pages or ask the assistant to add items, and both write to the same cart, so nothing is lost moving between them.
Skills bundled with the template walk coding agents through setup, customization, and template updates. That makes it a starting point a studio can hand an agent, not a theme to fork once and freeze.
Borrow thisDesign move
One record, two views
Keep a product's facts in a single labeled block and render every other mention from it: the buy box, the facts bar, the structured data. The designed page and the data view then cannot drift apart.
Where it works
Product pages, listings, menus, event tickets, any page an agent might shop or book from.
What keeps it honest
The data view never states a price, stock level, or option the page does not show, and the visible fact block stays readable without any design at all.
<dl class="facts">
<dt>Price</dt>
<dd data-f="price">$640,000</dd>
<dt>Status</dt>
<dd data-f="stock">Available</dd>
</dl>
<!-- Offer JSON-LD: same record -->
Same record, two readers. Switch views and nothing changes but the dress.
Enquire
Prompt Lab
Works in Beaver Builder AI, v0, Claude Code, Figma Make, Webflow, and Lovable.
Build a single-property real estate listing page for one home. Make it a page an agent could ship this week, with the listing's facts written once and shown both as designed content and as plain data.
Layout, top to bottom:
- A dark ink top bar with the brand and three text links.
- A hero on a deep terracotta field (#B04F35) with a faint paper-grain texture. Left: an olive enamel house-number plaque (#56631C, 14px radius, a cream inner border) holding the street number large, the street name, and the listed date and price as a small two-column list. Right: a large display-serif headline under 16 characters per line, a two-sentence description, one cream filled button and one cream outline button.
- A three-image gallery strip under the hero: three cream cards, each with a tall image, a small filled label, and an "N of 3" counter.
- A cream sheet (#FBF3E6) holding everything else. It opens with a facts bar of five label/value pairs (price, status, beds, baths, size), with labels in mono uppercase and values in the display serif.
- Sections inside the sheet in a 700px column, each opened by a small filled label (4px radius, mono uppercase) and a muted mono reference, then a serif h2.
- A full-width fact sheet table: Field, What a visitor sees, What the data says. A heavier rule separates the booking and payment rows.
- A fact sheet card with a two-button Person/Agent toggle (aria-pressed): Person shows the designed card with price, status, and a Book a viewing button; Agent shows the same fields as plain key: value lines in mono.
- Render the schema.org Product and Offer JSON-LD from the same record as the facts bar and the card.
- A numbered list of viewing steps, a contact block, and a footer.
Type: Young Serif for display and values; Red Hat Text for body at 19px with line-height 1.7; Red Hat Mono 500 for labels, prices, and table headers only.
Palette: terracotta field, cream sheet, ink #21180F, olive accent, ochre #86590C and clay #9A3820 only for step labels.
Guardrails: body text at least 18px, line-height at least 1.6, lines 60 to 75 characters. All small text meets WCAG AA against the surface it sits on; never put small text directly on the terracotta. No neon, no glow, no gradients, no gradient text, no fake readable text inside images. Use real hover and focus states (150ms ease) and a prefers-reduced-motion guard. Card radius 12 to 14px, buttons 7 to 8px, labels 4px. Never show a price, status, or option in the data that the page does not show.
Agent's noteClosing
Field note
Real estate agents learned long ago that the fact sheet sells the house as much as the photos do. Storefronts are now learning the same thing, with a reader that only ever sees the sheet.
