About this issue
Product detailsA product detail page (PDP) is the screen a store uses to sell one item: a large gallery on the left, a sticky buy box on the right, then specifications, a "pairs well with" shelf, and reviews stacked below. It is the most studied conversion layout on the web, built to make dense information scannable and to keep the primary action in view while you scroll. Today the issue is the product, and each thing that shipped is an attribute on the page.
Specifications
The conversationThe story this week is less about what shipped and more about how we are now supposed to ship it.
How to use it
Ship it like an engineerKeep the leverage of the agents; put the engineering discipline back around them.
Pairs well with
Complete the setupAgentic engineering as three cheap controls: never hand an agent write access without a way to watch it, a wall it cannot cross, and a human on the merge.
One run surface
Put every autonomous run on a single board that shows what is active, what is blocked on you, and what is done. Claude Code's agents view is one example.
code.claude.comOne network wall
Run untrusted agent code in a sandbox whose outbound network is locked to the one host it needs, so a stray command cannot reach the rest of your stack.
vercel.comOne human merge
Let the agent open the pull request, but keep a person on the merge. Figma Make now commits and opens a reviewable PR from the design tool, so make that review a real gate, not a rubber stamp.
figma.comWatch surface + network wall + human merge gate. Three cheap controls turn "the agent did something" into "the agent did exactly the thing I can see, inside the box I drew, and I approved the diff."
Recreate this look
Prompt LabHand this to an AI design or build tool to rebuild today's boutique product page idiom.
Design a premium ecommerce product detail page (PDP) for a single catalog item, not a marketing landing page. Layout: - Above the fold, a two-column split: a left product gallery with a vertical thumbnail rail and one large product photo on a warm seamless studio backdrop, and a right sticky buy box. - The buy box holds: an "in stock" status line, a serif product title, a one-line subtitle, a price-and-SKU strip, variant chips, a primary add-to-cart button, and a small assurance row. - Below the fold, stack product sections: Specifications as label/value spec rows, a "Pairs well with" shelf of three cards, a "Recreate this look" panel, and an Editor's review with stars. - Section markers come from the store, not symbols: numbered section headers with an eyebrow tab on the right. Palette: warm oat paper (#F1EADD), espresso ink (#221C18), one garnet accent (#8E2A39) for the buy button, links, and price, and a muted olive (#4C5740) for one italic editorial line. No gradients on type, no glow, no neon. Type: an elegant high-contrast serif (Instrument Serif) for the product title and section heads, a clean humanist sans (Figtree) for body and UI, a reading italic (Newsreader) for one editorial line, and a monospace (Spline Sans Mono) for SKU codes, price labels, and spec metadata. Readability: body at least 18px, line height 1.6 or more, no justified text, WCAG AA contrast, text never sitting on a border. Do not render fake readable text inside the product photo; use blank labels and soft shapes only.
Why it works: it names a real web archetype, fixes the above-fold split and the section grammar, then translates the idiom into concrete components, palette, type, and accessibility rules a tool can follow, so you get this issue's catalog look back rather than a vague "make it look like a store."
Editor's review
Field noteA year in, the lesson of vibe coding is the part it skipped. Agentic engineering keeps the speed and puts a person back on the diff, at the boundaries where auth, data, and money live. The faster the agent ships, the more the gate is your job.