Claude Skill · Scale With Steven

Email Slicer

Design the email as a real web page, with the brand's real fonts, render it, slice it, ship it to Klaviyo. The look of Magic Spoon and Olipop in every inbox, with copy edits that take 30 seconds.

The result
Email design, color block layout
Color block
Email design, dark native layout
Dark native
Color block email on mobile
Color block, on phone
Dark native email on mobile
Dark native, on phone
Before and after
First build, template baked into pixels
First build: the old template baked into pixels. Rejected.
Rebuilt email, designed for slices
Same copy, same pipeline, designed for slices.

Slices only pay off with the layout tables cannot do.

How it works
01

Canvas

Real HTML and CSS at 600px, brand fonts loaded, every section tagged as a slice with its link and alt text.

02

Render

Playwright renders it at 2x, waiting for fonts before it shoots.

03

Slice

Cuts only on a flat-color row within 40px of a section edge, so a seam never splits a headline. Picks PNG or JPEG per slice.

04

Assemble and QC

A 6KB Klaviyo-ready HTML with live preheader, live social proof, live bulletproof button, and alt text on every slice. QC renders at 600, 375, and with images off.

What the research found

12 of 33

Top DTC emails on Really Good Emails are pure image slices — Magic Spoon, Olipop, Seed, Caraway.

25 of 33

Bake a custom typeface into the email instead of using a web-safe font.

The gap

Between a template email and theirs is typography and layout freedom, not effort.

Images off still sells
Dark native email with images blocked
The live band, button, and footer carry the offer when a client blocks images.
Get it
↓ Download the skill (zip) Back to all skills
# install, one line in Terminal (needs Node LTS from nodejs.org and the Claude app)
curl -fsSL https://ecom-skills-pack.pages.dev/email-slicer/install.sh | bash
# it installs the skill + Playwright + Pillow, builds the starter email, prints QC: ALL PASS

Not a terminal person? Open the Claude app in any folder and paste: “Install the email-slicer skill: download https://ecom-skills-pack.pages.dev/email-slicer/email-slicer-skill.zip, unzip it, and run its install.sh.” Then ask for emails in plain English: “Use the email-slicer skill. Build a welcome email in the color-block system. Headline ‘I can't control every germ.’ Button ‘Start with one bottle’.” Claude writes the canvas, runs the pipeline, shows you the phone render, and hands you the HTML for a Klaviyo code template.