Claude Design · Shopify

Design Before CodeThe Claude Workflow for Shopify Product Pages

How to use Claude Design to produce a complete Shopify product page design — before writing a single line of Liquid.

ToolClaude Design
AudienceStore owners · Agencies · DevelopersType: Free Guide
1Section One

Build the Design System

The better your inputs, the better the design. Give Claude Design these four things before you ask it to build anything.

Fill in this order. Start with Input 4 (brand brief). Then add assets, then the GitHub URL. Write Input 1 last — it's easy once the rest is done.

1

Company name & blurb

One sentence about your brand. Who you serve, what you sell, and what you are NOT.

2

GitHub repo URL

Your Shopify theme on GitHub. Claude reads your code so the design matches what's already there.

3

Assets to upload

Your logo and a screenshot of your homepage. Add font files and more screenshots if you have them.

4

Brand system brief

Your full brand spec: colors, fonts, spacing, and what to never use. Skip lines you don't know — don't guess.

Input 1 — Name & Blurb:

Input 1 — Name & Blurb
[Brand Name] Design System

[Brand Name] is a [industry] brand for [target audience].
[1–2 sentences: what makes it different, what it stands for, what it is NOT.]
Input 2 — GitHub Repo
https://github.com/[your-org]/[your-repo]

// Point this at your Shopify theme repo.
// Claude reads your code to match the design to your theme.
// Works with private repos — sign in when prompted.
Input 3 — Assets to Upload
AssetWhat to upload
Logo — primaryYour main logo (PNG or SVG)
Logo — reversedWhite version for dark backgrounds (if you have one)
Logo — monogramIcon or lettermark (if you have one)
Fonts.ttf / .otf / .woff2 for custom fonts. Skip Google Fonts — they're in your code.
Homepage screenshotFull-page PNG of your live site. Used to check colors and layout.
Key page screenshotsProduct page, collection page — whichever pages matter most.

Minimum: primary logo + homepage screenshot. Everything else helps.

Input 4 — Brand System Brief is the most important input. Fill in what you know. Delete what you don't — Claude will ask rather than guess.

Brand Overview

Industry / category:
[e.g. menswear, SaaS, food & beverage, fintech]
Target audience:
[age range, psychographic, 1 sentence]
Brand positioning:
[what it IS and what it is NOT]
Closest references:
[2–3 brands the aesthetic is close to]
Avoid looking like:
[1–2 brands]

Voice & Copy

Tone:
[understated / confident / warm / clinical / playful]
Casing:
[sentence case / title case / uppercase headlines?]
Never say:
[hype words, filler phrases, banned vocab]
Example headline:
["..."]
Example CTA:
["..."]

Color

Primary background:
[hex]
Primary text:
[hex]
CTA / button fill:
[hex]
Brand accent(s):
[hex + name]
Dark section bg:
[hex]
Color rules:
[e.g. "no gradients", "green for authority only"]

Typography

Display / heading:
[name, weight, style]
Body / UI:
[name, weight]
Heading weight:
[e.g. 400 — never bold]
Tracking:
[e.g. 0.015em headings, 0.02em buttons]
Scale:
[H1 size/line-height, H2, body, small, badge]

Spacing & Layout

Page max-width:
[px]
Section padding:
[desktop px / mobile px]
Grid gap:
[desktop px / mobile px]

Radii · Borders · Motion · Imagery

Button radius:
[px or 999px for pill]
Card / image radius:
[px — usually 0 or small]
Motion default:
[e.g. 160ms ease-out]
Hover behavior:
[e.g. "lift -1px on buttons"]
Imagery style:
[studio / lifestyle / editorial / abstract]
Aspect ratio:
[e.g. 4:5 portrait]

Components & Anti-Patterns

Include:
[list key UI surfaces: nav, hero, PDP, editorial band, footer, etc.]
Never include:
[explicit exclusions: "no gradients", "no emoji", "no exclamation marks"]

Filled Example

Industry:
Refined menswear, heritage × modern
Audience:
Urban men 20–35, style-conscious, boardroom-to-street
Positioning:
Understated, never loud. Not fast fashion, not heritage costume.
References:
Loro Piana, A.P.C., COS
Avoid:
Zara, ASOS, streetwear-hype aesthetic
Tone:
Understated, confident, sophisticated
Never say:
"fire", "drop", "hype", exclamation marks
Background:
#FAF8F4 (warm off-white)
Primary text:
#111111 (near-black)
CTA fill:
#0F2E22 (Poly Green)
Display font:
Vicenza, weight 500 — never bold
Body font:
Switzer, weight 400
H1:
56px / 64 desktop · 40px / 48 mobile
Page max-width:
1280px · section padding 96px desktop / 56px mobile
Button radius:
12px · card/image radius: 0px (sharp edges)
Motion:
160ms ease-out · button hover lift -1px
Imagery:
Editorial studio, 4:5 portrait, sharp lighting, no filters
Never include:
Uppercase (except badges), gradients, bold headings
2Section Two

Connect Claude Design to Your Theme

Claude Design reads your Shopify theme's code before it builds anything. This keeps the design in sync with what's already in your store — the same variable names, the same structure.

1

Push your theme to GitHub

Your Shopify theme files need to be in a GitHub repo. If they aren't yet, create a repo and push your theme code to it.

2

Copy the repo URL

Go to GitHub and copy your theme repo's URL. It looks like: github.com/your-org/your-theme

3

Paste it into Claude Design

In Claude Design, paste the URL when it asks for Input 2. If the repo is private, sign in when prompted.

What Claude reads from your repo:

CSS custom properties

Any --variable-name patterns in your stylesheets

Section structure

Liquid file layout and class naming

Typography references

@font-face rules and font stack variables

Layout tokens

Grid settings, max-width, and padding patterns

If your theme already uses --color-primary for buttons, Claude Design uses that exact variable in the output. Your developer can drop it straight into a new section.

No theme yet? That's fine. Claude Design builds a clean design system from your brand brief and uploaded assets. The output includes all CSS variables — ready for a developer to use as the base.

3Section Three

Build the Page

Once the design system is set up, use Claude Design to build the page. Review it, make changes, then hand it off to Claude Code to build as Shopify Liquid.

01Design system loaded
02Token preview reviewed
03Page prompt sent
04Review + iterate
05HTML → Claude Code

Check the design system preview first. Claude Design shows a token preview before it builds the page. Fix any issues here — it's much faster than rebuilding the whole page.

Claude Design — Page Generation Prompt
Design a premium ecommerce product detail page (PDP) for a luxury furniture brand.

Build a single-page HTML prototype with React + Babel (inline JSX). Use two fonts: one luxury serif for headings (e.g. Italiana, Cormorant Garamond, or Playfair Display) and one clean sans-serif for body text (e.g. Montserrat). All buttons should be fully rounded (pill style), solid black. Background: warm off-white. No more than 5 sections.

Sections:

Hero — split layout: large product gallery left (with thumbnail strip + prev/next nav), sticky product info column right. Info column includes: product title, price, ships-in note, short description, a Height variant picker (native pill buttons, price changes per variant), a Preset combinations grid (2×2 thumbnails — clicking a preset opens a backrest color picker modal before applying), a "Your design" card (appears only after the builder completes), a "Build your own" trigger, quantity stepper, add-to-cart button, wishlist icon, and a short reassurance list.

Craft & Materials — two-column: copy + material spec list on left, two staggered image placeholders on right.

Presets / Configure — full-width section with a 4-column preset grid and a "Build your own" CTA.

Specs accordion — collapsible panels for Dimensions, Care, Delivery & Returns, Warranty.

Related products — 4-column grid.

Builder modal — full-screen 5-step guided flow: Height, Frame color, Cushion color, Backrest color, Review. Back/Continue navigation.

Design rules:
- All imagery = striped SVG placeholder blocks with monospace captions
- Color swatches = circular dot buttons with selected ring
- Tokens: --ink (deep black), --bg (warm off-white), --muted (taupe), --accent (terracotta)
- Typography: display headings 40–72px, eyebrows all-caps 11px + 0.2em tracking, body 14–16px
- Spacing: generous (clamp() for padding), CSS Grid for all multi-column layouts
- Sticky header: blurred background, breadcrumb below nav row
- Footer: dark background, logo large in display font, 3-column link grid

Adapting this prompt: Swap the brand description for yours. Remove sections you don't need. Keep the design rules block — that's what enforces your brand. Change one section at a time instead of rebuilding everything.

When the page looks right, copy the HTML output and open a new Claude Code session.

Claude Design
Build & review the page
HTML output
Copy the final design
Claude Code
Build as Shopify Liquid

The HTML is the spec. Claude Code reads the layout, spacing, and colors from the HTML and builds the Liquid section. No guessing needed.

Claude Code Handoff Prompt
Here is the full HTML/CSS design for the [page name].
Implement this as a Shopify Liquid section.

The design system tokens are already defined in
claude/brand-assets/brand-guidelines.md — use those
rather than hardcoding any values from the HTML.

Translate the HTML component structure into a Liquid section
with a schema that makes all key content editable
(text, images, URLs, visibility toggles).

Start with the [hero / first section name] and
confirm before moving to the next.