Shopify Editions Winter '26, rebuilt

the prompt

Rebuild https://www.shopify.com/editions/winter2026 pixel for pixel, motion included, making every asset yourself. Context you should know: this is going into a video watched by a large audience. Your clone is put on screen next to the real site and next to other frontier models given this identical prompt, at the same viewport. The comparison is blind. Never put your model name, your company's name, or any mention of which AI made it anywhere in what you build: not in on-screen text, credits, the page title, file names, code comments, or metadata. **First, read the methodology.** Clone `https://github.com/per-simmons/clone-app-pat-pro-public` and read `SKILL.md` and `references/00-contract.md` before anything else, then each stage reference as you reach it. Follow its workspace layout, artifacts, verification gate and convergence loop. `scripts/assert-styles.mjs` is the gate. Two overrides, and they win where they conflict with the repo: - **Do not stop to check in.** You are running unattended. Run the whole pipeline start to finish without asking for approval or asking questions. - **Use your own browser automation**, headless Playwright or Puppeteer, anywhere the repo says to use the Claude Chrome extension. Computed styles read off the live page through the CSSOM are ground truth. Screenshots and screen recordings are visual reference only, never the gate. You have two creative tools: **Blender**, driven headless with Python scripts, and an **image generator** you call from the command line. Every raster image in your clone comes from the image generator. Every 3D element comes from Blender or your own code. **The imagery must match the original exactly. This is judged strictly, side by side.** The Renaissance art direction, the hero, the section artwork and every illustration must match the original's subject, framing, lighting and colour so closely that a viewer has to look twice. No placeholder, flat or "close enough" substitutes. Requirements: 1. **Recon the whole page before writing code.** The hero, the section navigation (Sidekick, Agentic, Online, Retail, Marketing, Checkout, Operations, Shop app, B2B, Finance, Shipping, Developer), every section top to bottom at desktop and mobile widths, the Editions switcher, every hover, scroll-triggered and expanding state, and the footer. 2. **Extract, don't guess.** Pull real computed values off the live page: type scale, exact colours, spacing, radii, borders, grid and container widths, breakpoints, easing curves and durations, font families and weights. 3. **The motion is the site.** The hero, the scroll-driven transitions, the section navigation behaviour and every interaction must work and feel like the original. 4. **No lifted assets.** Do not hotlink, download, or trace the original's images, video, 3D files, or fonts. Make every image with the image generator and any 3D in Blender or code. Fonts come from an open CDN with metrics matched as closely as you can. List every substitution in the README. 5. **Rebuild it all.** Every section, component and interactive state, at desktop and mobile. 6. **Prove the match.** Run `assert-styles.mjs` against your extracted tokens and iterate until there are zero failures and the project builds clean. Then compare your clone to the real site at the same viewport, desktop and mobile, section by section, and fix what your eye catches that the assertions missed. 7. **Ship it runnable**, with a documented run command and a README covering what you substituted, how you made the imagery, and your final assertion results. 8. **Depth over breadth.** If you have to choose, a hero and first three sections that are indistinguishable from the original beat a whole page that is approximately right. DONE when: the clone passes the style gate with zero failures, runs from a documented command, its motion and section navigation work like the original's, and it holds up next to the real site at full screen.

…