Five creatives built six tools in Google Flow. Copy any of them

Build a single-page ecommerce product page (PDP) for a direct-to-consumer workshop brand selling a six-piece tool set. Register: expressive, studio product photography on a warm light ground. It must work as a real product page a client could ship.

Layout: a top bar (brand left in condensed uppercase, three text links right) over a 2px ink rule. Then a 5fr/3fr hero grid. Left: a product gallery with one 3:2 main photo across the full width and two 3:2 frames below it. The three frames are a SEQUENCE, not three angles: 01 as shipped, 02 customised, 03 raw parts. Each caption starts with a mono red label (number plus verb) and one plain sentence. Right: a sticky buy-box. At its top, a hang tag: a dark ink label with a V-notched left edge (clip-path) and a punched hole, holding the product number in condensed display type and two lines of mono detail. Then a mono red kicker, a condensed display product title (about 56px, tight leading, balanced wrap), a two-sentence deck, a two-column spec list with hairline rows, three variant rows (64px thumbnail of each gallery frame, bold name, one-line verb) that link to the matching frame, one solid red button, and a small secondary text link. Under the gallery, one italic press quote in a lighter panel with a mono citation.

Below: a lighter full-width product-details panel (5fr/3fr: name, italic one-liner, short paragraph left; solid ink vocabulary labels right). Then the long content as native details/summary accordion rows, open by default: condensed uppercase title left, a mono count right, a plus/minus built from two CSS bars that rotates on open, a 2px ink rule above each row. Inside: a numbered contents list (big red condensed numerals, a 72x108 crop of that piece taken from the main photo via background-position, product name, maker in mono, one sentence), a 2x2 spec sheet of label-over-value cells, and numbered how-to steps beside a "Pairs well with" cross-sell card. Then an inverted ink panel for one callout with a small wireframe of the sequence gallery, and an instruction-insert card with a dashed perforation top edge holding the long copy.

Palette: peach ground #F2BD91 sampled from the photo backdrop so the photos sit on the page, faint horizontal ruling (1px ink at 7.5 percent every 32px) only in the outer gutters outside the content column, lighter panels #FBE6D3, insert card #FFF7EE, ink #2A1612, secondary text #4A2A20, muted labels #6A3D27, tool-box red #C8261E for the button, a deeper red #A8201A for small red labels, numerals, and link underlines, #8E2A1C for italics only. Feather the photo edges with a CSS mask instead of framing them. Type: Big Shoulders Display 700/800 for titles and numerals, Schibsted Grotesk 400/600 plus italic for body, IBM Plex Mono 500 uppercase for labels.

Photography: three overhead studio photographs on the same peach paper backdrop, one hard key light from the upper left, red enamel, ash wood, brushed steel, brown waxed canvas. Same light and ground in every frame so they read as one shoot.

Guardrails: body 19px, line-height 1.65 or more, measure under 70 characters; check red text and muted labels for WCAG AA against the peach and the panel. Panel radius 10px, inputs and rows 6-8px, no pill shapes. One shadow only (the insert). No fake readable text in photos, no neon, no glow, no gradient text, no emoji icons, no three identical feature cards. Real hover and focus states at 150ms, and a prefers-reduced-motion guard. On mobile, show the main photo first, then the buy-box, then the other two frames, so photo and title share the first screen.

Works in: Claude Code, v0, Lovable, Figma Make, and Beaver Builder AI.