아름다운 HTML 이메일 캠페인은 Resend 및 Claude Code.

건축과 현대 마케팅 이메일 보내기를 위한 완전한 본을 암호로 하는 클로드 코드 기술 – 자산 호스팅, 재사용할 수 있는 디자인 블록 (프레스트 유리 카드, blurred 배경, CTA 단추를 가진 영상 구획), GIF 최적화, 그리고 Resend는 파이프라인을 보냅니다.

내부는 무엇입니까?

• SKILL.md - 전체 기술, ~/.claude/skills/email-campaigns/]로 떨어지고 [T1]]를 통해 호출
• examples/claude-connector.html - 이 패턴과 내장 된 실제 생산 이메일. 브라우저에서 렌더링 된 결과를 볼 수 있습니다.

Claude Code 기술로 설치

그런 다음 클로드 코드 세션에서 : /email-campaigns

당신이 배울 것

• ** 호스팅 ** - 자체 Vercel/Netlify public/] 폴더를 무료 이메일 CDN ( Cloudinary bill 없음)로 설정
• ** 디자인 시스템 ** - 복사 방지 블록 : 영웅 이미지, 서리 유리 로고 카드, blurred 색상 배경, 어두운 CTA 버튼이있는 비디오 썸네일
• **GIF 파이프라인 ** - ffmpeg one-liners는 MP4 화면 녹화를 이메일 안전 GIF로 변환합니다 (2 MB, 15fps, 감지 가능한 트리밍) -Resend 통합 — 단일 종료, 일괄 종료, 웹훅으로 드립 시퀀스

email-campaigns-claude

Beautiful HTML email campaigns with Resend and Claude Code.

A Claude Code skill that encodes a complete pattern for building and sending modern marketing emails — asset hosting, reusable design blocks (frost-glass cards, video blocks with blurred backgrounds, CTA buttons), GIF optimization, and the Resend send pipeline.

What’s inside

• SKILL.md — the full skill, drop into ~/.claude/skills/email-campaigns/ and invoke via /email-campaigns
• examples/claude-connector.html — real production email built with this pattern. Open in a browser to see the rendered result.

Install as a Claude Code skill

# Clone
git clone https://github.com/irinabuht12-oss/email-campaigns-claude.git

# Install as a skill
mkdir -p ~/.claude/skills/email-campaigns
cp email-campaigns-claude/SKILL.md ~/.claude/skills/email-campaigns/SKILL.md

Then in any Claude Code session: /email-campaigns

What you’ll learn

• Asset hosting — turn your own Vercel/Netlify public/ folder into a free email CDN (no Cloudinary bill)
• Design system — copy-paste blocks: hero image, frost-glass logo cards, video thumbnails with blurred color backgrounds, dark CTA buttons
• GIF pipeline — ffmpeg one-liners to convert MP4 screen recordings into email-safe GIFs (under 2 MB, 15fps, sensibly trimmed)
• Resend integration — single-send, batch-send, drip sequences with webhooks
• Pre-send checklist — absolute URLs, preheader, alt text, client testing

Design tokens at a glance

Example

The examples/ folder has a complete real-world email (the Ryze AI × Claude Connector launch) showing every block used in context.

Open examples/claude-connector.html in any browser for the live preview.

Pull the numbers for the email from your ad accounts

The example campaign in examples/ announces the Ryze connector. If you want Claude to read your own Google Ads, Meta Ads, GA4 or Search Console data while it writes (results, winners, the stat for the hero), add the free Ryze MCP once:

claude mcp add ryze --transport http https://connector.get-ryze.ai/mcp

In claude.ai, Claude Desktop or Cursor: Settings › Connectors › Add custom connector, paste https://connector.get-ryze.ai/mcp. Setup guide → · 48 more Claude marketing skills →

License

MIT