Writer’s Brief

Session covered building a Code for Creatives Cohort 1 Session 2 recap email. Started with slide updates demo (changing title, adding slides on c4c-slides.pages.dev), then built interactive HTML web view for client editing. Client pasted back content + structural notes (move project pitch up, replace promises with /slides skill demo). Rebuilt incorporating feedback, packaged /slides skill for public install (SKILL.md + install.sh pushed to GitHub). Converted HTML to MJML for Loops platform (zip with index.mjml + screenshots). Iterated on visual design from white to black to finally cream (#f5f0e8) matching course website aesthetic.

Interesting bit: The contenteditable HTML preview as editing interface. Client could change text directly in browser, paste it back, and we’d rebuild. Faster than email markup back-and-forth. Also the color journey - started corporate white, went too moody with black, landed on warm cream that matched the existing slide themes.

Step-by-Step Tutorial

What This Does

Builds a cohort recap email using HTML preview for fast iteration, then converts to MJML format for Loops email platform with proper responsive layout and brand colors.

The Prompts

let's build the session 2 recap email as a web view first - editable zones so Alex can make changes directly

[After client feedback paste]
rebuild incorporating all the changes - project pitch above recap, replace promises with /slides skill demo

convert this to MJML for Loops - cream background #f5f0e8 to match the course site, package with screenshots in a zip

What Claude Does

  1. Creates HTML web view with contenteditable="true" zones for client editing
  2. Receives pasted feedback (content changes + structural notes)
  3. Rebuilds HTML with new structure and content
  4. Packages related /slides skill for public install (SKILL.md + install.sh)
  5. Converts HTML to MJML format (mj-section, mj-text, mj-image tags)
  6. Matches brand colors from existing course materials (#f5f0e8 cream)
  7. Creates Loops folder structure (index.mjml + screenshots)
  8. Zips for platform upload
  9. Commits packaged skill to git