Setup guide

Up and running
in 10 minutes.

Here’s exactly how to set up your Stylus theme — using Patch Pickleball and the Axiom theme as the worked example.

Before you start

Claude Pro

$20/mo from Anthropic — you need this for Claude Projects.

Your SKILL.md file

Comes in the Stylus pack download immediately after purchase.

Your brand colors

Hex codes are best. Named colors work too — Claude will interpret them.

Your logo URL

A direct link to your logo image. Squarespace, Cloudinary, your CDN — any public URL.

Create a Claude Project

Go to claude.ai and click Projects in the sidebar. Create a new project — name it something like "Patch Pickleball Emails".

Claude Projects persist across conversations. Every chat inside the project has access to the files you upload — including your SKILL.md.

Requires

Claude Pro ($20/mo). Projects are a Pro feature — the free tier does not include them.

Upload your SKILL.md

Inside your new project, open Project knowledge and upload your SKILL.md file. Claude reads this once and remembers it for every conversation in the project.

Your pack includes one SKILL.md matched to your theme — Pitch, Grove, or Axiom. Upload the right one.

pitch-skill.md · 56 KB · Pitch theme

Send your first message

Start a new chat in the project. Your first message sets up the brand — colors, logo, and logo shape. Include all four things in one message so Claude can confirm before building.

Your product or company name

Your brand colors — hex codes preferred, or color names

Your logo URL — a direct link to the image file

Whether the logo is a horizontal wordmark or a square icon mark

Example — Patch Pickleball

Your message

Here is my Stylus skill. My brand is Patch Pickleball.
Colors: navy #1B2A4A and gold #D4AF37.
Logo: https://images.squarespace-cdn.com/...Icon-yellow.png
It’s a square icon mark, not a wordmark.

Claude replies

Got it — Patch Pickleball. Accent: #D4AF37. Callout bg: #1B2A4A. Logo: icon. Ready to build.

Gold ( #D4AF37) is the brighter of the two, so it becomes the accent. Navy (#1B2A4A) is darker, so it becomes the callout background — used in featured highlight blocks throughout the email.

Describe what you need

Now ask for an email in plain English. No code required. Claude returns a complete, production-ready HTML file — styled to your brand, using the component library from the skill.

Describe layout, content, and intent in plain English — Claude maps it to the component library automatically.

Your message

We're launching Patch Pickleball next weekend and I need an announcement email for our founding members. Premium feel but warm — excited without being over the top. Use this court photo as the hero: https://images.unsplash.com/photo-1737476997205-b3336182f215?w=800. Headline should be "The Courts Are Officially Open." After a short intro, show three stats: 4 courts, 8 clinics this June, and free entry for founding members. Then a schedule section with three events: - Sat June 7, morning: beginners clinic, afternoon: open rally for all levels - Sun June 8: intermediate workshop + a coaching Q&A with Coach Marcus - Wed June 11 evening: drill series, all levels welcome Include a quote from Coach Marcus about what makes Patch different from other facilities. Then close with two side-by-side buttons — one to claim a spot, one to view the full schedule.

Claude outputs the full HTML. Paste it into the custom HTML block in Mailchimp, Klaviyo, or your email tool of choice. Swap the image placeholder for a real photo. Done.

Revisions are one sentence

"Make the headline bolder." · "Add a second CTA at the bottom." · "Change the date to June 20." Claude updates the HTML in place — every output is still exactly on-brand.

The result

1 of 248

The Courts Are Officially Open — Patch Pickleball

Patch Pickleball<hello@patchpickleball.com>

to me

Jun 7

Send from your email tool

Every major email platform has a way to paste raw HTML. The path varies slightly — pick your tool below for the exact steps, including how to get your images hosted before you generate.

Get to the HTML editor

Campaigns → Create → Email → Regular Email. Name it, then click Design Email. In the template picker, scroll to the bottom and choose Code your own, then Paste in code.

Paste your HTML

Paste the HTML Claude generated into the code editor. Click Continue — Mailchimp will render a preview. If anything looks off, go back to Claude and ask for a fix in one sentence.

Image hosting: Mailchimp Content Studio

In the left sidebar, go to Content → Content Studio → Upload. After uploading, click the image and copy its URL. Include that URL in your Claude prompt before generating: "Use this as the hero image: https://mcusercontent.com/…"

How to include images

Claude can only reference images by URL — it can't embed files directly. The cleanest workflow: upload your image to the platform's media library first, copy the hosted URL, then include it in your Claude prompt before generating.

If you generate first, Claude outputs a placeholder like YOUR_IMAGE_URL in the src attribute. Upload your image afterward, copy its URL, and do one Cmd+F → Replace in the HTML before pasting.

Ready to start

Get your theme.
First email in under 10 minutes.

Get Pitch — $49 →

One-time purchase · Instant download · Works with any email tool

Up and runningin 10 minutes.