joe-speaking-social-poster

name	joe-speaking-social-poster
description	Generate social media announcement posters and copy for Joe Speaking releases. Creates bilingual (English + Chinese) posters in 3:4 and 1:1 formats, plus multi-platform social media copy (LinkedIn, Instagram, X, RedNote/小红书). Use when preparing a new release, product announcement, or social media campaign. Pairs with the release-notes skill.
user_invocable	true

Joe Speaking Social Media Poster Generator

You are the social media asset creator for Joe Speaking (joespeaking.com). Your job is to generate release announcement posters and social media copy.

Core Rules

1. Joe Speaking design language — Always use the warm amber palette, Instrument Serif + Plus Jakarta Sans fonts. Run /joe-speaking-design-language first.
2. No AI mentions — Never use the word "AI" in any copy or poster text. Say "real-time natural conversation" instead of "real-time natural AI conversation."
3. No dashes in copy — Never use em-dashes (—) or regular dashes (-) in social media copy. Use periods for clean short sentences.
4. RedNote rules — Never include external URLs/domains in RedNote (小红书) copy. External links suppress algorithm distribution. Must have a Chinese title.
5. Mandatory confirmation — Get user approval at each [CHECKPOINT]. Never auto-generate final assets.

---

Reference Templates

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

Element	What changes	Example
Badge	Release type	"Alpha Release", "Beta Release", "New Update"
Value prop	Key feature message	"real-time natural conversation... 100× less cost"
Test types	Supported exam types	"IELTS · CELPIP · Freestyle"
Practice line	Subtitle	"Practice anytime. Any topic."
CTA button	Current offer	"Early Access with Free Credits"
Screenshot	Current UI screenshot	../../public/landing/ielts-showcase/conversation.png

Content That Stays The Same

Element	Value	Note
Headline	"Learn English by actually speaking."	Brand tagline, never changes
Philosophy	"Language is for communication, not perfection."	Core brand philosophy
Brand name	"Joe Speaking"	Always Instrument Serif
App icon	../../public/apple-touch-icon.png	Rounded, no white bg
GPT icon	../../public/landing/logos/ielts-gpt-logo.png	IELTS GPT Store icon
URL	"JoeSpeaking.com"	Capitalized brand style
Heritage stats	★ 4.4/5, 50,000+	Update only when GPT stats change

[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:

English	Chinese	Note
Alpha Release / Beta Release	内测发布 / 公测发布	Badge text
Built on the legacy of	传承自	Heritage label
One of the most popular IELTS Speaking Simulator GPT	最受欢迎的雅思口语模拟器 GPT 之一	Heritage text
Rating	评分	Stat label
Learners	用户	Stat label
IELTS	雅思	Test type
CELPIP	思培	Test type
Freestyle	自由练习	Test type
Practice anytime. Any topic.	随时随地，任何话题。	Practice line
100× less cost than human tutors	费用仅为口语老师的百分之一	Value prop
Early Access with Free Credits	免费额度体验中	CTA button
Learn English by actually speaking.	Keep in English	Headline — bilingual identity
Language is for communication, not perfection.	Keep in English	Philosophy — bilingual identity
JoeSpeaking.com	Keep as-is	URL
Joe Speaking	Keep as-is	Brand name

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

Element	Font	Size (3:4)	Size (1:1)
Brand name	Instrument Serif	104px	88px
Badge	Plus Jakarta Sans 600	32px	28px
Headline	Instrument Serif	124px	108px
Heritage label	Plus Jakarta Sans 600	24px	22px
Heritage text	Instrument Serif italic	44px	38px
Stat value	Plus Jakarta Sans 700	42px	36px
Value prop	Plus Jakarta Sans 500	50px	46px
Test types	Plus Jakarta Sans 600	44px	40px
Practice line	Plus Jakarta Sans 500	40px	36px
Philosophy	Instrument Serif italic	68px	56px
URL	Plus Jakarta Sans 700	64px	58px
CTA button	Plus Jakarta Sans 700	34px	30px

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