--- 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: ```html
Built on the legacy of
One of the most popular
IELTS Speaking
Simulator GPT
★ 4.4/5 Rating | 50,000+ Learners
``` ### 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: ```css --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: ```bash # 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 ```markdown # {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) ```css --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 ```