Design a Shopify Theme with AI (Claude Design)

You can now design an entire Shopify theme with AI that looks like a high-end agency built it, then turn that design into a working theme on Shopify's official Horizon framework. None of this was possible a few months ago. The workflow has three parts: build a design system in Claude Design, design the store and iterate with comments, then hand the design to Claude Code to build it as a real theme.

Here is the full process from the video, including the mistakes I made so you can skip them.

Part 1: Build a design system first

Open the Claude desktop app and choose Design. Before you design anything, go to Design systems and create one. A design system is your brand written down: logos, colours, typography, button styles, cards, shadows, voice and tone, copywriting rules. Every design you generate afterwards references it, which is what keeps your homepage, emails and product pages consistent.

If you already have a store, the prompt is simple:

My store is called [brand]. I already have a design and I'd like you to use it as the design system. The URL is [store URL]. Pull as many assets as you can and ask me for anything you need to make it the best design system you can build.

Upload your logo files in every colour variation and any icons you have. Click generate and walk away. Mine took about eight minutes. When it finishes, answer any questions it asks. The better the design system, the better every design that follows.

No existing brand? Give it colours you like and links to stores whose look you admire, and it will build one from scratch.

Part 2: Design the store

Back on the Design home screen, select your design system, then paste the redesign prompt. The structure that works:

1. The job: a full ecommerce redesign of [store URL].
2. The pages: homepage, collection page, product page, plus anything unique (my product page has a bundle builder, so I described it).
3. The taste: at least three stores whose design aesthetic you like, so Claude has a direction to combine with your design system.
4. The ask: suggest the photography and media you will need, and ask any questions needed to produce the highest-converting store possible.

Claude will come back with questions before it designs: what is the number one job of the redesign (convert cold traffic, push subscriptions, look premium), who it is for, which homepage modules to include, what media you have. Answer them as thoroughly as you would brief a real designer. Those answers shape the output more than anything else.

Then it builds, and you can watch it happen. Five to eight minutes later you have real code: a clickable homepage, collection and product page you can move between, checked for desktop and mobile.

Iterate with comments, not rewrites

The first version will be good, not finished. Do not start over. Click anywhere on the design, leave a comment, and send it to Claude. Mine included:

• Add a section that lets people compare the flavour variations.
• Change card reviews to a list of ten reviews with pagination.
• Add an FAQ section to the product page.
• Add a scrolling carousel of UGC content.
• On mobile, make this layout four cards in a two-by-two grid, not three.

I spent about 30 minutes in this loop and changed the navigation, fonts, colours, image treatment and sections. Do all of this inside Claude Design. Prompting a design is far faster than prompting theme code later.

One caveat: Claude Design is excellent at layout and weak at photography. Ask it for a shot list, then produce the images elsewhere.

Part 3: Turn the design into a real Shopify theme

Do not just ask Claude to "build a theme". Build it on top of Shopify's free Horizon theme so it has the right bones: fast, editable in the theme editor, and updatable.

1. In Claude Design, click Share, More formats and apps, Code, Claude Code.
2. Add one instruction with the link to the Horizon theme source: "Use this template as the base to build this design on top of, so we create an official Shopify-structured theme."
3. Copy the generated prompt. It carries the design across through a feature called design sync.
4. Open Visual Studio Code with Claude Code and the Shopify CLI connected (my Claude Code for Shopify guide covers that setup). Start a new session, pick the most capable model, paste the prompt and go.

Mine took 19 minutes. Then: "Add it to my Shopify store as a draft, unpublished theme."

The first preview will look wrong. That is normal.

My first draft theme had the structure but none of the design. One prompt fixed most of it: "It doesn't look like the design. Please customise it so the design is replicated on the template." After that, the homepage matched. The product page sections existed but were not placed in the template, so I asked Claude to assign and customise them, and it created custom product templates and applied them.

From here the rule is simple:

• Coding problem (a switcher stacks instead of switching, a font is wrong): fix it in Claude Code. Screenshot the bug, describe the expected behaviour, done in under a minute.
• Design problem (you want the FAQ full-width with a different background): change it in Claude Design, then tell Claude Code "there was a design change, use design sync to update the theme." It finds the change and rewrites the code.

Test like a customer before publishing

Preview the draft theme in your browser and click through every page as a shopper would. Add to cart, change variants, switch subscribe and one-time purchase, sign up to the email list, check mobile. Fix bugs in code, fix looks in design, repeat. Only when everything works do you publish.

This is what the 80% AI, 20% human approach looks like in practice. The AI does the design and the code. You do the brief, the taste and the testing. Members of the Elite Team get this workflow installed with their Growth Advisor, so the first theme is built with someone who has done it before.