Joe Speaking Social Poster

The canonical poster templates live at:

docs/social-media/alpha-release-poster.html        # English 3:4 (2160×2880)
docs/social-media/alpha-release-poster-square.html  # English 1:1 (2160×2160)
docs/social-media/alpha-release-poster-zh.html      # Chinese 3:4 (2160×2880)
docs/social-media/alpha-release-poster-square-zh.html # Chinese 1:1 (2160×2160)

ALWAYS read these templates first before creating new posters. Copy the structure and modify content — never start from scratch.

Workflow

Step 1: Gather Context

Read these files to understand the current release:

• lib/releases/releases-data.ts — release highlights and version
• lib/landing/content.ts — landing page messaging (hero, features, CTA)
• The most recent poster templates in docs/social-media/

[CHECKPOINT 1] Ask the user:

• What is this poster for? (new release, feature launch, campaign)
• What key message should be highlighted?
• Any copy changes from the last poster?

Step 2: Design the Poster

Template Structure (3:4 — 2160×2880)

┌──────────────────────────────────────┐
│  [corner sparkle bursts × 4]         │
│  [mid-edge sparkles]                 │
│  [confetti dots scattered]           │
│                                      │
│  ┌─ TOP SECTION ──────────────────┐  │
│  │  [App Icon: apple-touch-icon]  │  │
│  │  Joe Speaking                  │  │
│  │  [Badge: release type]         │  │
│  │  Headline (display font)       │  │
│  └────────────────────────────────┘  │
│                                      │
│  ────────── ✦ ──────────             │
│                                      │
│  ┌─ MIDDLE SECTION ──────────────┐   │
│  │  [Screenshot]  [Heritage Card]│   │
│  │                               │   │
│  │  Value proposition text       │   │
│  │  (with bold highlights)       │   │
│  │                               │   │
│  │  TEST TYPES · SEPARATED       │   │
│  │  Practice line subtitle       │   │
│  └───────────────────────────────┘   │
│                                      │
│  Philosophy quote (italic serif)     │
│                                      │
│  ────────── ✦ ──────────             │
│                                      │
│  ┌─ BOTTOM SECTION ──────────────┐   │
│  │  JoeSpeaking.com              │   │
│  │  [CTA Button]                 │   │
│  └───────────────────────────────┘   │
│                                      │
└──────────────────────────────────────┘

Template Structure (1:1 — 2160×2160)

Same sections but compressed:

• Brand row is inline (icon + name side by side, not stacked)
• Smaller screenshot (360px vs 420px)
• Philosophy quote moves to bottom section (above URL)
• Tighter gaps throughout (28px/44px vs 36px/56px)

Heritage Card (GPT legacy)

This card showcases the IELTS GPT heritage. It stays the same across releases:

<div class="gpt-heritage-card">
  <img src="../../public/landing/logos/ielts-gpt-logo.png">
  <div class="gpt-heritage-label">Built on the legacy of</div>
  <div class="gpt-heritage-text">
    One of the most popular<br>IELTS Speaking<br>Simulator GPT
  </div>
  <div class="gpt-stats-row">
    ★ 4.4/5 Rating | 50,000+ Learners
  </div>
</div>

Step 3: Content That Changes Per Release

Content That Stays The Same

[CHECKPOINT 2] Show the user all planned content changes and ask for approval before generating HTML.

Step 4: Generate HTML Files

Create 4 HTML files (EN 3:4, EN 1:1, ZH 3:4, ZH 1:1).

Naming Convention

docs/social-media/{release-name}-poster.html          # EN 3:4
docs/social-media/{release-name}-poster-square.html    # EN 1:1
docs/social-media/{release-name}-poster-zh.html        # ZH 3:4
docs/social-media/{release-name}-poster-square-zh.html # ZH 1:1

Chinese Version Translation Table

When creating Chinese versions, apply these translation rules:

Chinese Font Stack

Add these Google Fonts for Chinese poster HTML:

Noto Sans SC:wght@400;500;600;700
Noto Serif SC:wght@400;600

CSS custom properties:

--font-body: 'Plus Jakarta Sans', 'Noto Sans SC', system-ui, sans-serif;
--font-zh-serif: 'Noto Serif SC', 'Instrument Serif', Georgia, serif;

Use --font-zh-serif for the heritage card text (.gpt-heritage-text). Increase line-height to 1.45-1.7 for Chinese text (CJK needs more vertical space).

[CHECKPOINT 3] Let the user review the HTML files before generating images.

Step 5: Generate JPG Images

Use Playwright CLI to screenshot the HTML files:

# 3:4 posters (2160×2880)
npx playwright screenshot --viewport-size="2160,2880" --full-page \
  docs/social-media/{name}-poster.html \
  docs/social-media/{name}-poster.jpg

npx playwright screenshot --viewport-size="2160,2880" --full-page \
  docs/social-media/{name}-poster-zh.html \
  docs/social-media/{name}-poster-zh.jpg

# 1:1 posters (2160×2160)
npx playwright screenshot --viewport-size="2160,2160" --full-page \
  docs/social-media/{name}-poster-square.html \
  docs/social-media/{name}-poster-square.jpg

npx playwright screenshot --viewport-size="2160,2160" --full-page \
  docs/social-media/{name}-poster-square-zh.html \
  docs/social-media/{name}-poster-square-zh.jpg

The 2160px width at 2× is intentional — social media platforms (Instagram, RedNote) display at 1080px but store/serve at 2160px for Retina displays.

[CHECKPOINT 4] Show the user the generated JPG images for visual review.

Step 6: Generate Social Media Copy

Create a markdown file at docs/social-media/{release-name}-copy.md.

File Structure

# {Release Name} Social Media Posts

Tone: Personal, honest, story-driven. Joe Speaking's account.

---

# Post 1: {Main Announcement} (with poster image)

## English (LinkedIn, Instagram, X)
[Full version with story + CTA]

## English Short (X single post)
[Condensed version, 280 chars target]

## RedNote Chinese (小红书)
**Title:** [Chinese title — required for RedNote]
[Chinese copy — NO external URLs]

---

# Post 2: {Secondary Post} (optional)
[Same structure as above]

Copy Writing Rules

1. Personal voice — Write as Joe (founder). Use "I built", "I use it every day".
2. No dashes — Use periods instead. "So I built this. A place to practice speaking."
3. Story-driven — Lead with the GPT heritage story, then transition to what's new.
4. Bridge line — Use "Joe Speaking takes everything I learned and goes further." to transition from GPT stats to the new product.
5. Sign off — End with "Joe, Founder" (not just "Joe").
6. RedNote specifics:
   • Must have a **Title:** line
   • No external URLs (joespeaking.com, etc.) — they suppress algorithm
   • More detailed feature descriptions are OK for RedNote audience
   • Can mention technical details (无需 API Key, 无需订阅)
7. English LinkedIn/Instagram:
   • Include joespeaking.com/about for the story
   • Include joespeaking.com for the CTA
   • Keep concise — story + CTA, no feature lists

[CHECKPOINT 5] Show the user the copy drafts for all platforms before writing the file.

Design Tokens Reference

Colors (from Joe Speaking design language)

--bg: #FAFAF8;            /* Warm off-white background */
--surface: #F5F0EB;       /* Elevated surface */
--surface-elevated: #FFFFFF;
--accent: #D97706;        /* Primary amber */
--accent-hover: #B45309;  /* Darker amber */
--accent-soft: #FEF3C7;   /* Light amber (badges, dots) */
--accent-dark: #92400E;   /* Deep amber (stats, highlights) */
--text-primary: #1C1917;  /* Near-black */
--text-secondary: #57534E;
--text-tertiary: #78716C;

Typography

Celebration Elements

Corner sparkle bursts use Unicode characters:

• ✦ (✦) — four-pointed star
• ✶ (✶) — six-pointed star
• ✨ (✨) — sparkles

Layout:

• 7 sparkles per corner (varying sizes 24–88px, opacities 0.14–0.45)
• 10 mid-edge sparkles (5 per side, 24–40px)
• 12 amber/gold dots (12–24px circles, accent colors)
• 7 warm cream dots (26–40px circles, accent-soft color)

All celebration elements use position: absolute; z-index: 2; pointer-events: none;.

Image Assets

../../public/apple-touch-icon.png               # Joe Speaking icon (180×180 in 3:4, 120×120 in 1:1)
../../public/landing/logos/ielts-gpt-logo.png    # IELTS GPT icon (112×112 in 3:4, 96×96 in 1:1)
../../public/landing/ielts-showcase/conversation.png  # App screenshot (420px wide in 3:4, 360px in 1:1)

Pairing

• joe-speaking-rednote-poster — For RedNote-specific posters (dark or light mode). Use this skill for LinkedIn, Instagram, and X.
• release-notes — Run first to generate release data and bump version.

Typical release workflow:

1. Run /release-notes to generate release data and bump version
2. Run /joe-speaking-social-poster to create announcement posters and copy (LinkedIn, Instagram, X)
3. Run /joe-speaking-rednote-poster for RedNote-specific poster
4. Commit all changes together
5. Create PR, merge, deploy
6. Post social media content with the generated poster images

Example: Creating Posters for a New Release

User: "Create social media posters for the v0.2.0 beta release"

1. Read existing alpha poster templates
2. Update badge: "Alpha Release" → "Beta Release" (内测发布 → 公测发布)
3. Update value prop if features changed
4. Update CTA if offer changed
5. Generate 4 HTML files + 4 JPG files
6. Generate copy markdown with all platform versions