Claude Design to Shopify Is the New Figma to Shopify

For ten years, "Figma to Shopify" meant the same thing: someone draws the store in Figma, then a developer or a plugin translates it into a Shopify theme or a Shopify page builder. The design was the easy part. The translation was where the time, the money and the mobile layout went.

That translation step is disappearing. With Claude Design and the PageFly connector for Claude, the design you approve becomes a real, editable Shopify page, built for you and left unpublished until you say go. We rebuilt the pagefly.io homepage this way in two working days. This guide explains the workflow, how to prompt Claude Design for a Shopify page (with a fashion and apparel example), how it compares to Figma to Shopify, and where it still falls short.

On this page

• What is Claude Design to Shopify?
• Why Figma to Shopify was always a translation job
• Figma to Shopify vs Claude Design to Shopify
• How to go from Claude Design to a live Shopify page
• How to prompt Claude Design for a Shopify page
• What we learned rebuilding pagefly.io this way
• Why the page builder still matters
• What this workflow can't do yet

What is Claude Design to Shopify?

Claude Design to Shopify is a workflow where you design a store page in Claude Design, Anthropic's AI design tool, and then have Claude build that design as a native, editable Shopify page through the PageFly connector, without exporting code or hiring a developer.

It has three parts:

• Claude Design turns a brief into a visual layout you can review and adjust. Anthropic launched it on April 17, 2026 for Claude Pro, Max, Team and Enterprise subscribers, and it exports to Canva, PDF, PPTX, standalone HTML or a Claude Code handoff bundle. None of those exports is a Shopify page.
• The PageFly connector for Claude closes that gap. It lets Claude create pages, add sections and preview them inside your live theme in your PageFly account.
• You make the calls an AI shouldn't make: which offer leads, which proof goes first, and when the page goes live.

If you know "Figma to Shopify", think of this as the same job with the slowest step removed.

Why Figma to Shopify was always a translation job

A Figma file is a picture of a page. Shopify needs a working page. Getting from one to the other has always taken one of three routes:

1. A developer codes it. The design is rebuilt by hand as theme sections in Liquid. Accurate, but every later change goes back to the developer (the same trade-off we saw when we tested vibe coding on Shopify).
2. A Figma-to-Shopify plugin converts it. Plugins such as Instant's import Figma frames into a page builder. They work best when the file is prepared for them, with properly named layers, and their own guides still include a step to adjust the desktop, tablet and mobile layouts.
3. An agency does both. Design and build in one contract, at agency prices and timelines.

Each route has the same weak point: the person who designed the page is not the person who builds it. Details fall through that gap, usually on mobile.

Search demand is moving from Figma to Claude

"Claude design" on its own averaged 165,000 searches a month in the same four markets. Most of those people are not Shopify merchants. But the merchants among them are asking a new question: not "how do I convert my design", but "can Claude just build it?"

Figma to Shopify vs Claude Design to Shopify

Here is how the routes compare on the things merchants actually ask about: skills, time, cost to start, and what happens after launch.

Figma isn't going away. If your team already has a design system in Figma, it's still the right tool for pixel-level work. But for a landing page, a Black Friday campaign page or a homepage refresh, the brief-to-page route is now shorter.

How to go from Claude Design to a live Shopify page

These are the steps we use. You need a Shopify store with PageFly installed and a paid Claude plan.

1. Write the brief first. List the sections in order, a word cap for each, the products and images you already own, and every link the page must keep. A brief this specific is what stops the design from drifting. Need a structure to start from? Borrow one from these Shopify landing page examples.
2. Design it in Claude Design. Paste the brief and ask for desktop and mobile side by side. Ask for sections simple enough to rebuild in a page builder: headings, text, buttons, images, cards. Then adjust the layout in conversation until you would sign it off. The prompting section below shows the exact brief we used for a fashion store.
3. Read the design back as a section list. Ask Claude to describe its own design as an ordered list: section name, heading, copy, images, buttons. This list, not the picture, is the real handoff.
4. Connect PageFly to Claude. Open the Claude Directory, search "pagefly", choose Connect to Claude, enter your store handle and approve access in your Shopify admin. The PageFly setup guide walks through each screen.

5. Ask Claude to build the page, unpublished. Paste the section list and ask for a new page. Claude creates it, adds the sections one by one as native PageFly elements, and sends you a preview link rendered in your live theme.
6. Review at real screen sizes, then publish yourself. Check the preview at 1920, 1366 and 390 pixels wide, not just the design canvas. Ask Claude to fix single elements in place, or edit them yourself in the PageFly visual editor. When it's right, publish.

Want the full connector walkthrough, including the ChatGPT setup? It's in how Claude builds a Shopify page in PageFly.

How to prompt Claude Design for a Shopify page

Claude Design builds what you describe, so the brief decides how much work is left for the Shopify build. A vague prompt ("make a nice fall landing page") gets you a pretty picture that no page builder can rebuild cleanly. A structured brief gets you a design that maps section by section onto native Shopify page elements.

We tested this on a fashion and apparel example (the niche behind many of the best Shopify clothing stores): a fictional store, Maple & Thread, launching a "Fall Layers" capsule for shoppers arriving from Instagram ads. The product photos are free stock images from Burst by Shopify, uploaded to our store's files first so Claude Design could load them by URL.

A Claude Design brief has 7 parts

The fashion and apparel brief we used

Claude Design answered with notes worth reading before you build: it kept every section to builder-friendly blocks, put the hero image first on mobile with products two per row, labelled the invented product names, prices, reviews and shipping times as placeholders, and reminded us to check the shipping times, care instructions and the "true to size" claim against real store policies.

Then iterate in short follow-up prompts

Don't rewrite the brief to fix one thing. Talk to Claude Design the way you'd brief a designer. Here are the two follow-ups we sent:

1. One change per message. Our first follow-up was: "On mobile, move the size guide strip above the reviews, and change the hero button text to 'Shop Fall Layers' on both layouts." Claude Design changed the button on both layouts, and didn't move the size guide, because it already sat directly above the reviews. It said so and offered another spot instead of making a change we didn't need.
2. Ask for the handoff. "Read this design back as an ordered list of sections for a Shopify page builder: section name, heading, body copy, image URL, button text and link. Plain text only, no code." We got 7 sections back, each with its layout on desktop and mobile, every image URL and alt text, and the style notes (colors, fonts, button style). That list is what you paste into Claude when the PageFly connector is on.

Three habits made the biggest difference:

• Give images as URLs, not uploads. Upload product photos to your Shopify files first, then paste the file URLs into the brief. The design, the built page and your product pages then use the same files.
• Ask for placeholders to be marked. Claude Design wrote product names, prices like $248 and review quotes for us. Because the brief asked for it, each one carried a placeholder tag, so nothing invented reaches your live page.
• Keep animation out of the brief. Anything that only exists as custom motion has to be rebuilt as custom code later. Native blocks stay editable and ready for A/B testing on Shopify.

What we learned rebuilding pagefly.io this way

We tested the workflow on the page that matters most to us: our own homepage. The full story, with every mistake, is in how I rebuilt our Shopify homepage with Claude in 2 days. The short version:

Three lessons carry over to any store:

• The design canvas is not your visitors' screen. Claude Design gave us a 1,440 px canvas. In our GA4 data, that width fit only about 25% of desktop visitors, and the most common screen was 1920×1080.
• "Looks right" needs a side-by-side check. Claude's first build matched our colors and fonts but not the picture: a hero off-center, card titles wrapping, images cropped. Compare each section to the design before you sign off.
• Keep the old page as a rollback. We built a new page and assigned it as the homepage, so the URL never changed and the old version stayed one click away.

Why the page builder still matters

Claude Design can already export standalone HTML. So why not paste that into Shopify? Because a pasted block of code is a dead end. You can't easily edit one headline, you can't A/B test it, and the next person on your team can't touch it without reading code.

When Claude builds through PageFly, the page is made of the same native elements you would drag in by hand. That keeps everything after launch working:

• Editing: change a headline or swap an image in the visual editor, or ask Claude to edit just that element.
• Testing: run A/B tests on the new page instead of guessing.
• Finding what to fix: heatmaps show where visitors click and scroll, AI Page Checkup flags issues on the page, and Claude can read those CRO findings through the same connector.
• Control: pages start unpublished, deletes go to PageFly's trash, and the connector reads no customer, order or payment data.

Prefer to stay inside Shopify admin? PageFly's AI Page Builder builds a page from a text prompt with FlyMate AI, and PageFly also works inside Shopify Sidekick.

You can also start from one of 320+ templates, then let the CRO Center tell you what to improve.

This is the shift for PageFly too. A page builder used to be where you placed every block yourself. Now it is also where an AI assistant builds, and where you keep control of what goes live, the same principle behind agentic commerce on Shopify.

What this workflow can't do yet

An honest list, as of October 1, 2026:

• It needs two subscriptions. Claude Design is only on paid Claude plans. PageFly's Free plan includes one published slot; more pages need a paid plan.
• It builds pages, not your whole theme. The connector works on PageFly pages. It doesn't touch theme code, checkout, orders, discounts or other apps.
• Complex animation still goes in as custom code. On our homepage, the animated demo pieces went in as custom HTML. Keep those blocks small so they stay editable.
• Someone still has to review. The build can look right at 1,440 px and break at 390. Budget time for a real review on real screens.
• It's a community connector. PageFly built it; it is listed in the Claude Directory, not made by Anthropic.

If you only need a fast page and don't need a custom design, skip Claude Design and start from a brief in PageFly's AI Page Builder. Comparing assistants first? See Sidekick vs ChatGPT vs Claude for Shopify. If you need a design you can see and approve first, this workflow is the shortest route we've found from idea to live Shopify page.

Try Claude Design to Shopify on one page

Pick one page you already want to improve, a landing page or a seasonal campaign, and run the six steps above. Keep it unpublished until you've checked it on your phone. PageFly is rated 4.9 from 5,897 reviews on the Shopify App Store (checked October 1, 2026) and carries the Built for Shopify badge.

Already using PageFly? Open the app, then connect it to Claude from the Claude Directory.