| 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
