🧦

Mat & Vic's Funnel Guide

How to use Claude Code to publish, generate ad images, and build future funnels.

What we built for you — and why

This package is a complete DTC advertising funnel for Mat & Vic's — built, written, and ready to publish. It includes two live web pages, five AI-generated images, 50 ad creative concepts, and a system for building more in the future. This guide is your instruction manual for all of it.

Everything runs through Claude Code — an AI assistant you install on your computer. You type commands into it, it does the work. No coding required. The "skills" bundled in this folder are pre-built workflows that Claude Code knows how to run — one command and it handles research, copywriting, image generation, and publishing automatically.


The campaign angle

You sent over a few thesis ideas for a new campaign direction. The one that stood out was the angle around cotton being fundamentally the wrong material — not just inferior, but the actual source of every problem your customer has been blaming on their feet, their shoes, or their routine.

We built the entire funnel around that thesis: "5 Reasons 100% Cotton Socks Are Designed to Fail You." Cotton is the villain. Your product isn't being sold as better cotton — it's being positioned as the exit from a category that was never designed to work.

This matters for how the funnel is structured: your Meta ads point at the education page (the "presell"), which makes the argument against cotton before your customer has ever seen your product or its price. By the time they reach the offer page, the case has already been made. That's the architecture.


What's in this package

The presell page + images

A 2,000-word education page (funnel/presell-v2.html) that runs your cold traffic through the cotton villain argument before they ever see the product. Five reason sections, each with its own AI-generated image — those images are already done (funnel/generated_images/r1–r5.png). No product name, no price anywhere on this page — just the argument. The offer comes at the end, after the case has been made.

The offer page

A dedicated offer page (funnel/offer-v2.html) that lives behind the presell. Product hero, the formula, testimonials, bundle options, FAQ — designed to convert the reader the presell page warmed up. Your Meta ads link to the presell; the presell links here.

50 ad image concepts

A ready-to-run image generation script (funnel/generate_ad_images.py) with 50 distinct creative concepts — all built around your funnel headline and the cotton villain angle. UGC portraits, comparison formats, macro close-ups, social proof styles. You run the script, images generate via AI, and you pick the ones worth testing.

The system, not just the funnel

The three skills installed in this folder — /dtc-funnel-generate, /shopify-publish, and /dtc-ad-generate — mean you're not just getting this one funnel. You're getting a repeatable process: pick a new angle, run the build skill, review the strategy, approve, and the funnel writes and deploys itself. This guide covers both how to launch what we already built (Track A) and how to run the full pipeline from scratch for future campaigns (Track B).


Contents

  1. What we built for you — and why — the campaign angle, the funnel, the system
  2. Get set up — download the files, install Claude Code, open the folder
  1. One-time setup — install libraries, fal.ai key, Shopify access, Meta pixel
  2. Publish to Shopify — get both pages live on your store
  3. Generate ad images — run the 50 concepts we prepared, in German
  1. Build a new funnel from scratch — research, copy, HTML in one automated run
  1. Making updates to live pages
  2. Troubleshooting

Get set up — download the files and open Claude Code

Everything is in one folder on GitHub — the funnel pages, presell images, ad generation scripts, and skills. Download it once and you're set up permanently. Three steps.

1 Download the folder

Click the button below to download a ZIP of the entire funnel package.

↓ Download matandvics-funnel.zip

Once downloaded, unzip the file. You'll get a folder called matandvics-funnel-main. Put it somewhere you'll remember — your Desktop is fine.

2 Install Claude Code

Claude Code is the AI tool that powers everything in this funnel. It runs on your computer as a desktop app — you type instructions into it like a chat, and it executes them.

  1. Go to claude.ai/code and download the desktop app for Mac or Windows.
  2. Open it and sign in with your Anthropic account (or create a free one).
  3. You'll need a Pro plan ($20/month) to run the skills — the free tier doesn't support them.
Already have Claude Code? Skip this step.
3 Open the funnel folder in Claude Code

This is the most important step. Claude Code needs to have the funnel folder open so it can find the files and skills. Without this, nothing works.

  1. Open Claude Code.
  2. Click Open Folder (or File → Open Folder) and select the matandvics-funnel-main folder you just unzipped.
  3. You'll see a chat interface. The three skills load automatically. You're ready.
Don't open individual files — open the whole folder. If Claude Code can't find a skill, it's almost always because the wrong folder is open.
You're set up. Continue to Track A below to get the funnel live on your Shopify store.

TRACK A
Using the funnel we built for you

Your funnel copy and HTML pages are already done. Start here to get them live and generate ad images.

Step 1 — One-time setup

Do these steps once. You'll never need to repeat them.

1 Install the Python libraries

Just tell Claude Code to do it:

Type into Claude Code
Install the Python libraries this funnel needs — requests and fal-client.

Claude will run the install and confirm when it's done.

2 Get a fal.ai API key

Go to fal.ai/dashboard, create a free account, then go to API Keys and create a new key. Copy it.

💳 Cost to know about: fal.ai is pay-per-use — no subscription, no monthly fee. You only pay when you generate images. Each image costs $0.08 (8 cents). You add credits to your account and they draw down as you generate — nothing is charged automatically. Generating all 50 concepts = $4.00. A test batch of 10 = $0.80.

Once you have your key, tell Claude Code to set it:

Type into Claude Code
Set my fal.ai API key for this session. The key is: your-key-here
⚠️ Note: This only lasts for your current Claude Code session. Any time you open a new session and want to generate images, tell Claude your key again before starting.
3 Create a Shopify custom app

This is what gives Claude Code permission to publish pages and upload images to your store on your behalf — without you ever having to log into Shopify Admin and do it manually. Every time you run /shopify-publish, Claude uses this access to deploy your funnel in one shot. You set it up once and never touch it again.

  1. Go to Shopify Admin → Settings → Apps and sales channels
  2. Click Develop apps (top right corner)
  3. If prompted, click Allow custom app development
  4. Click Create an app — name it anything, e.g. Funnel Deploy
  5. Under Configuration, click Admin API integration
  6. Enable these three checkboxes: write_content, write_themes, write_files
  7. Click Save
  8. Go to the API credentials tab → click Install app
  9. Copy the Admin API access token — it starts with shpat_
⚠️ You only see this token once. Don't close the page before completing the next step.
4 Save your token to Claude Code

Give Claude Code your store domain and token — it will save them to a .env file in this folder so it always has secure access without you having to type them again.

Type into Claude Code
Save my Shopify credentials to the .env file. My store is yourstore.myshopify.com and my token is shpat_xxxxxxxxxxxx.

Claude saves both values to .env and confirms. Your token is stored locally in this folder — never shared, never uploaded.

Why this matters: Every skill that touches Shopify — /shopify-publish and the no-header template install — reads credentials from this file automatically. You won't need to paste your token into chat again.
5 Add your Meta Pixel ID to the funnel pages

Both funnel pages already contain the Meta Pixel tracking code with a placeholder ID (YOUR_PIXEL_ID). Before going live, replace it with your real pixel so Meta can attribute visits and conversions from your ads.

Find your pixel ID: Go to Meta Business Suite → Events Manager and copy the 15–16 digit number under your pixel name.

Type into Claude Code
Replace the Meta Pixel placeholder in the funnel pages with my pixel ID: 1234567890123456

Claude will swap YOUR_PIXEL_ID for your real ID in both presell-v2.html and offer-v2.html.

Why this matters: Without the pixel, Meta can't see who lands on your pages, can't optimize for Add to Cart or Purchase events, and can't build retargeting audiences. The ads will run but you'll be flying blind on attribution.
6 Install the no-header template on your store

This installs a small template file on your Shopify theme that makes funnel pages display without your store's navigation header and footer. Do this once — it stays permanently.

Type into Claude Code
Install the no-header template on my Shopify store.

Claude reads your credentials from .env, runs one API call, installs the template, and confirms it worked.

✓ Setup complete

Step 2 — Publish to Shopify

Claude uploads your images to Shopify's CDN, rewrites the paths in the HTML, and publishes both pages live. Nothing to upload manually.

1 Have your product photo ready

The offer page hero has a product image slot. Have your product photo saved on your computer. If you're unsure of the file path, drag the image into Claude Code's chat — it will tell you the path.

2 Decide on your page URL slugs

Your pages will live at:

  • yourstore.com/pages/cotton-socks-guide — presell page
  • yourstore.com/pages/mat-vics-socks — offer page

Pick short slugs with hyphens and no spaces. These become permanent URLs so choose carefully.

3 Run the publish command
Type into Claude Code
/shopify-publish

Claude reads your store credentials from .env automatically. It will ask for your product photo path and the two URL slugs — that's it.

Claude will then
  • Upload all 5 presell images to your Shopify CDN
  • Upload your product photo to Shopify CDN
  • Rewrite all image paths in the HTML to permanent CDN URLs
  • Publish the presell page at your chosen slug
  • Publish the offer page at your chosen slug
  • Confirm both pages are live and give you the URLs
Re-running is safe. If you need to update something and republish later, just run /shopify-publish again. Claude updates the existing pages in place — no duplicates created.
4 Test the full flow in an incognito window
  • No product name or price anywhere on the presell page
  • Layout looks correct — no broken styling
  • All 5 reason images load
  • CTA button at the bottom → loads the offer page
  • Buy buttons on the offer page → go to checkout
  • "Back to the guide" link → returns to the presell

If anything looks wrong, describe it to Claude and it will fix and republish.

5 Point your Meta ads at the presell URL

The presell page is your cold traffic landing page. Your Meta ad campaigns link here — not the offer page, not your homepage.

✓ Funnel is live

Step 3 — Generate ad images

50 ad image concepts have already been written for you — built around your funnel headline, your avatar, and the 5 cotton villain reasons. All you need to do is talk to Claude Code and it handles the rest.

💳 Cost: fal.ai is pay-per-use — no subscription, no monthly fee. Each image = $0.08 (8 cents). All 50 = $4.00. A test batch of 10 = $0.80. Credits draw down only as you generate.
1 Start by asking Claude to walk you through the concepts

Paste this into Claude Code. It will read the concept file, show you all 50 ideas, and switch the language to German — all without you running any commands.

Type into Claude Code
I want to generate ad images for the Mat & Vic's funnel. The 50 ad concepts are in funnel/generate_ad_images.py. Can you read that file, show me a summary of all the concepts, and then translate all the in-image text and headline copy to German so they're ready to run for our DACH market? Don't generate anything yet — just show me what we've got and make the translation.

Claude will read the file, list all 50 concepts with their descriptions, and update the German copy. You can then review them and swap out any concepts you don't like before spending anything.

2 Tell Claude which ones to generate

Once you've reviewed the concepts, tell Claude which ones to run — by number, by description, or all at once. Plain language works:

Examples — type whichever fits
Generate the first 10 concepts so I can check the quality before doing all of them. Generate all 50 concepts. Generate concepts c01, c05, and c12 — skip the rest for now.

Images save to funnel/generated_images/ad-concepts/ as they complete. Claude will let you know when each batch is done.

3 Review and refine

After generating, ask Claude to open the output folder so you can see the images. If any aren't right, just describe what you want changed:

Examples
Open the generated images folder so I can review them. c03 doesn't look right — the sock should be slipping off the heel, make it more dramatic. Regenerate just that one. I like c01, c04, and c07. Regenerate c02 and c09 with a tighter crop and more contrast.
✓ Ad images ready for Meta

TRACK B
Building from scratch

For future campaigns — start here when you want to build a new funnel from zero.

Step 4 — Build a new funnel from scratch

The /dtc-funnel-generate skill researches your market, writes all the copy, reviews it, and builds the HTML pages — mostly automated. Use this for new products or completely new campaigns.

1 Type the build command
Type into Claude Code
/dtc-funnel-generate
2 Answer two opening questions

Claude will ask for:

  1. Your product name — e.g. Mat & Vic's Premium Socks
  2. A name for the funnel folder — short, no spaces, e.g. cotton-socks-v2. All files get saved here.
The buy buttons on your offer page will be built with a placeholder URL. When you run /shopify-publish, Claude will ask for your Shopify collection page URL (e.g. yourstore.com/collections/all) and swap it in before going live. This lets customers browse by style, length, and fit rather than landing on a single product.
3 Wait while Claude researches — no input needed
Claude will autonomously
  • Search the Meta Ad Library for competitor ads in your category
  • Mine Amazon reviews for your customers' exact language
  • Identify the strongest villain angle and avatar
  • Save findings to the funnel folder

This takes a few minutes. Don't type anything — let it finish.

4 Confirm the strategy — your one decision gate

Claude presents the proposed strategy: villain angle, avatar problem, 5 reasons, coined term, and page 1 headline.

Read it. If it looks right, reply "looks good, go ahead." If something feels off, say what to change.

This is the most important moment. Everything built after this flows from what you confirm here. If the villain angle or headline doesn't feel right for your customers, say so now.
5 Let Claude build — runs automatically from here
Claude builds in order
  • 5 reason headlines
  • Presell intro — header, thesis, opening block
  • 5 reason body sections with image placeholders
  • Coined term bridge + things to check + CTA
  • Offer page — hero, formula, testimonials, bundles, FAQ
  • presell-v2.html and offer-v2.html
  • Image briefs for the 5 reason images
  • Final QA — links, images, copy checks

Each copy section gets reviewed and fixed before Claude moves on. The full build takes 20–40 minutes. When done, Claude tells you the file paths and confirms all QA checks passed.

5 Then follow Track A from Step 2

Once the build completes, you're back on Track A:

  • Publish to Shopify (Step 2)
  • Generate ad images (Step 3) — update the ad prompts for any new product/angle
✓ New funnel complete

Making updates to live pages

Editing a live page is just telling Claude what to change and republishing. No manual file handling.

Updating copy on a live page

Example
Update the CTA button on my presell page from "See the sock that gets it right" to "See what makes the difference". Then republish.

Claude edits the HTML and publishes the update in place — same URL, no duplicates.

Adding real testimonials after going live

Example
Replace the first testimonial placeholder on the offer page with: "Endlich Socken, die nach einem langen Tag noch sitzen. — Michael K., Wien". Then republish.

Regenerating specific ad images

Example
Regenerate ad concepts c03 and c07 from funnel/generate_ad_images.py.

Troubleshooting

? Page shows the store header and footer

The no-header template wasn't applied. Tell Claude:

Type into Claude Code
My page at yourstore.com/pages/cotton-socks-guide is showing the store header and footer. Fix it — apply the no-header template.
? Page returns a 404 error

The page was created but not published, or the slug is wrong. Tell Claude the page handle and ask it to verify and republish.

? Shopify returns a permission error

The custom app is missing a scope. Go to Shopify Admin → Settings → Apps → your app → Configuration → Admin API integration. Confirm all three are checked: write_content, write_themes, write_files. Click Save, then uninstall and reinstall the app. Scope changes only take effect after reinstall.

? Image generation fails with "FAL_KEY not set"

The key isn't set in this session. Tell Claude:

Type into Claude Code
Set my fal.ai API key for this session. The key is: your-key-here

Then ask it to try generating again.

? Images look broken on the live page
Type into Claude Code
The images on my presell page aren't loading. Re-upload the images to CDN and republish.
? Something else went wrong

Describe what you see to Claude in plain language — e.g. "The CTA button doesn't do anything when I click it" or "The offer page looks unstyled — no fonts or colours." Claude will diagnose and fix it.


Quick Reference

TRACK A

Using the funnel we built for you

Step 2

Replace 6 testimonial placeholders in offer-v2.html with real customer quotes.

/shopify-publish

Upload images to CDN + publish both pages live. Reads Shopify credentials from .env automatically — just provide your product photo and URL slugs.

Step 4

Switch ad prompts to German, then generate from funnel/generate_ad_images.py. $0.08/image. Need FAL_KEY.

TRACK B

Future campaigns — build from scratch

/dtc-funnel-generate

Research, copy, HTML, QA — all automated. ~30 min. Then follow Track A from Step 2.

↳ Always point Meta ads at the presell URL — that's the cold traffic landing page.