| 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
- Joe Speaking design language — Always use the warm amber palette, Instrument Serif + Plus Jakarta Sans fonts. Run
/joe-speaking-design-language first.
- 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."
- No dashes in copy — Never use em-dashes (—) or regular dashes (-) in social media copy. Use periods for clean short sentences.
- RedNote rules — Never include external URLs/domains in RedNote (小红书) copy. External links suppress algorithm distribution. Must have a Chinese title.
- 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 versionlib/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:
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
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
- Personal voice — Write as Joe (founder). Use "I built", "I use it every day".
- No dashes — Use periods instead. "So I built this. A place to practice speaking."
- Story-driven — Lead with the GPT heritage story, then transition to what's new.
- Bridge line — Use "Joe Speaking takes everything I learned and goes further." to transition from GPT stats to the new product.
- Sign off — End with "Joe, Founder" (not just "Joe").
- 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, 无需订阅)
- 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;
--surface: #F5F0EB;
--surface-elevated: #FFFFFF;
--accent: #D97706;
--accent-hover: #B45309;
--accent-soft: #FEF3C7;
--accent-dark: #92400E;
--text-primary: #1C1917;
--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:
- Run
/release-notes to generate release data and bump version
- Run
/joe-speaking-social-poster to create announcement posters and copy (LinkedIn, Instagram, X)
- Run
/joe-speaking-rednote-poster for RedNote-specific poster
- Commit all changes together
- Create PR, merge, deploy
- 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
