Claude Code can now publish the page it just built

Design a single web page as a mid-century-modern lifestyle brand's product catalog presenting a short briefing of linked stories. Page archetype: an ecommerce category or lookbook page, not a dashboard, blog, or card-grid template.

Ground: warm cream (#F4E9D4) with a lighter card paper (#FBF4E6). Body ink is warm near-black (#2B2622). Use a warm multi-hue mid-century palette in the Alexander Girard register: burnt orange (#C8501E, links and brand marks), teal (#2C7A6B), marigold (#D9A328), and avocado (#6B7D3A). Links in a darker rust (#A8410F) so small text stays WCAG AA on cream.

Layout: a catalog masthead with a brand wordmark and a row of issue metadata cells; a campaign hero with one large headline and a deck; then one full-width flat still-life plate; then a product grid color-zoned by department. Do not use three identical feature cards. Color-zone the structure instead: each department (Tooling, Technique, Workflow) is a panel tinted in its hue with a solid filled department band on top, carrying a small atomic motif mark (starburst, boomerang, or concentric circle) in the zone color, a slab-or-sans department name in spaced caps, and a department number.

Each story is a product card: a mono kicker, a product-name headline that links out, one or two plain caption sentences, and the source domain named like a maker. Type: a warm humanist or geometric sans for display and product names (Familjen Grotesk), a friendly sans for body (Figtree) at 19px with line-height 1.7 and a measure near 66 characters, and a mono (DM Mono) only for tiny labels, metadata, and swatch hex codes. Exactly one italic display pullquote.

Include one generated plate: a flat, mid-century still life (a starburst clock, a tripod sputnik lamp, a boomerang table with a ceramic vase and a spiky plant, a low lounge chair) in flat color fields with a clean keyline and no readable text inside the image. Add one restrained micro-interaction, an underline that shifts to orange on link hover, behind a prefers-reduced-motion guard. Keep WCAG AA on every text color against its real background. No gradients, no glow, no neon, no pill-shaping everything, no accent left-border stripes, no fake search fields or toggles, no emoji.