The stack we use to design A/B tests, landing pages, and brand assets on real Shopify stores.

By Jayden Grayston · MoreConversions · From our database of 1,000+ A/B tests across $50M to $300M DTC Shopify brands

<aside> 📘

How to use this playbook

6 steps, about 25 minutes one-time. After that, any of the design sequences runs in 15-25 minutes. Each one is just 4-5 copy-paste prompts.

</aside>

<aside> 🗺️

On this page

</aside>

🎁 What you'll get when you run this

Seven outputs from one stack.

🖼️ Your full Shopify store, faithfully imported into Figma. Home, Collection, PDP, Cart, plus any landing pages. Mobile and desktop.

🎨 Brand palette extracted from your live site. Fonts, color tokens, corner radius, spacing scale, button styles. Pulled from what's actually shipping, not invented from a prompt.

🧱 A clean component library. Hero, Reviews, Product Card, Cart Drawer, Footer. Grouped, named, ready for Claude to design against.

✏️ A/B test variants designed against your live pages. Your actual PDP with one element changed, not a generic template.

📄 Landing pages built on top of your existing components. Brand-aligned out of the gate.

📋 Listicle pages, editorial style. Ranked-product layouts in your brand voice.

🔄 Weekly Figma resync prompt. Keeps your Control frames matching production when the live store changes.

<aside> ⏱️

Setup time: 25 minutes (one-time).

Per design output: 15-25 minutes.

</aside>

✅ Before you start

<aside> 🛠️

Tool list:

Claude Code. Free with a paid Claude.ai subscription. Get it at claude.ai/download.

Your Shopify store. Any plan. Connects via the built-in Storefront MCP, no token needed.

Figma seat. Dev or Full. The free Figma plan won't work with the MCP.

</aside>

That's it. No Adobe. No external design license beyond html.to.design, which has a generous free tier.