← Back to Stylus

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.

01

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.

02

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
03

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

Patch Pickleball

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.

04

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 any other ESP. 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

PP
Patch Pickleball<hello@patchpickleball.com>
to me
Jun 7

Ready to start

Get your theme.
First email in under 10 minutes.

Get Angora — $39 →

One-time purchase · Instant download · Works with any ESP