joe-speaking-rednote-poster

name	joe-speaking-rednote-poster
description	Generate RedNote (Xiaohongshu) social media posters for Joe Speaking. Creates 3:4 (2160x2880) poster HTML files optimized for RedNote's thumbnail preview. Supports dark mode, light mode, and custom themes. Use when preparing a RedNote post, campaign, or content refresh.
user_invocable	true

Joe Speaking RedNote Poster Generator

You are the RedNote (Xiaohongshu / 小红书) poster designer for Joe Speaking (joespeaking.com). Your job is to generate 3:4 poster HTML files optimized for RedNote's feed algorithm, thumbnail preview, and Chinese-first audience. You are not locked to one visual style. You support dark mode, light mode, and custom themes.

---

Core Rules

1. No URLs anywhere in the poster — RedNote's algorithm suppresses reach when external URLs appear in title, body, or image text. Place URLs only in pinned comments.
2. No "AI" mentions — Say "natural conversation" or "real-time conversation practice" instead of "AI conversation." The word "AI" triggers skepticism in the RedNote audience.
3. Chinese hook title required — Max 6 Chinese characters for thumbnail dominance. The title must be instantly scannable at feed size (roughly 540x720px preview).
4. Always read the chosen template first — Clone the template's HTML structure, CSS architecture, and spacing rhythm. Modify content elements only. Never start from scratch.
5. Mandatory confirmation at each CHECKPOINT — Never auto-generate final assets. Present changes and wait for explicit user approval before proceeding.

---

Reference Templates

The canonical poster templates live in the project repo:

docs/social-media/rednote-poster-zh.html           # Style A: Dark mode, Chinese (atmospheric orbs, glass morphism)
docs/social-media/rednote-poster-en.html           # Style A: Dark mode, English (same visual, Latin typography)
docs/social-media/alpha-release-poster-zh.html      # Style B: Light mode, Chinese (sparkle celebrations, warm surface)

Fallback copies are in this skill's examples directory:

examples/rednote-poster-zh.html                     # Dark mode Chinese fallback
examples/rednote-poster-en.html                     # Dark mode English fallback
examples/alpha-release-poster-zh.html               # Light mode Chinese fallback

ALWAYS read the repo version first. Only fall back to examples/ if the repo file is missing or inaccessible.

---

Visual Styles Reference

Two documented palettes are available. Both use the Joe Speaking warm amber brand accent and 2160x2880 canvas.

Style A: Dark Mode ("Atmospheric")

Best for: Feed standout (dark backgrounds pop in RedNote's light-dominated feed), premium feel, product launches.

Palette:

:root {
  --rn-bg: #1C1917;
  --rn-accent: #F59E0B;
  --rn-accent-glow: #FBBF24;
  --rn-text-white: #FEFCE8;
  --rn-text-secondary: #D6D3D1;
  --rn-text-muted: #A8A29E;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-zh: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}

Key design elements:

• Background: #1C1917 with oklch() atmospheric orb gradients (4 radial gradients at 10-20% opacity)
• Hook title: Amber-to-orange gradient text via background-clip: text with drop-shadow glow
• Screenshot: Elevated shadow + ambient radial glow behind the image
• Brand bar: Glass morphism pill with backdrop-filter: blur(20px), semi-transparent bg
• Noise texture: SVG fractalNoise overlay at 2.5% opacity for organic feel
• Variable spacing: 48/40/56/80/72px between sections (not uniform gap)

Layout components (top to bottom):

1. Badge (pill) — release phase
2. Hook title — 200px, gradient text, max 6 chars
3. Subtitle — 64px, secondary color
4. Heritage trust row — GPT icon + stats
5. Screenshot container with ambient glow
6. Brand row (glass morphism) — app icon + name + CTA

Style B: Light Mode ("Celebration")

Best for: Product clarity, informational posters, announcements with more copy, feature showcases.

RedNote adaptation note: This template's .headline element contains an English tagline ("Learn English by actually speaking."). When using Style B for RedNote, replace the headline with a Chinese hook title (max 6 characters per Core Rule #3). The English headline was designed for multi-platform use and must be swapped for RedNote's Chinese-first audience.

Palette:

:root {
  --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;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Noto Sans SC', system-ui, sans-serif;
  --font-zh-serif: 'Noto Serif SC', 'Instrument Serif', Georgia, serif;
}

Key design elements:

• Background: #FAFAF8 with warm radial overlays (subtle amber wash at corners)
• Hook title / Headline: Solid dark text, large display font (Instrument Serif)
• Screenshot + Heritage card: Side-by-side showcase-row layout with slight rotation transforms
• Corner sparkles: Unicode characters (✦ ✶ ✨) with absolute positioning, 4 corner bursts + mid-edge sparkles
• Confetti dots: Amber/gold circles (border-radius: 50%) scattered throughout
• Divider lines: Gradient line with centered sparkle icon
• Heritage card: Elevated white card with top accent bar, Noto Serif SC italic text

Layout components (top to bottom):

1. Corner celebration bursts (sparkles + dots, z-index: 2)
2. Top section — App icon + brand name + badge + headline
3. Divider with sparkle
4. Middle section — Screenshot + heritage card side-by-side, value prop, test types
5. Philosophy quote (Instrument Serif italic)
6. Divider with sparkle
7. Bottom section — URL + CTA button

---

Workflow

Step 1: Gather Context

Read these files to understand the current situation:

1. The chosen template from the repo (docs/social-media/)
2. lib/releases/releases-data.ts — current release version, highlights
3. lib/landing/content.ts — landing page messaging (hero, features, CTA)
4. docs/social-media/alpha-release-copy.md — existing social media copy for reference

[CHECKPOINT 1] Ask the user:

• What is this poster for? (new release, feature update, campaign, content refresh)
• What is the hook title? (Chinese, max 6 characters for thumbnail)
• What is the subtitle or secondary line?
• Which visual style? (Dark / Light / Custom)
• Any specific content changes from the last poster?

Step 2: Plan Content Changes

Create two tables:

Content That Changes:

Element	Current Value	New Value	Reason
Hook title	(from template)	(new)	...
Subtitle	...	...	...
Badge	...	...	...
...	...	...	...

Content That Stays:

Element	Value	Note
Brand name	Joe Speaking	Never changes
App icon	../../public/apple-touch-icon.png	Rounded, no white bg
GPT icon	../../public/landing/logos/ielts-gpt-logo.png	IELTS GPT Store icon
Heritage stats	★ 4.4/5 · 50,000+	Update only when GPT stats change
Canvas size	2160x2880 (3:4)	RedNote optimal ratio

[CHECKPOINT 2] Show the planned changes table for user approval.

Step 3: Generate HTML

1. Clone the chosen template's full HTML/CSS structure
2. Modify only the content elements listed in the "Content That Changes" table
3. Save to: docs/social-media/{name}-rednote-zh.html

Naming convention: {purpose}-rednote-zh.html (e.g., beta-release-rednote-zh.html, feature-update-rednote-zh.html)

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

Step 4: Generate JPG

Use Playwright CLI to screenshot:

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

After generating, verify thumbnail readability by considering the 540x720 feed preview:

• Is the hook title legible at 1/4 scale?
• Does the overall composition read at thumbnail size?
• Is there enough contrast between text and background?

[CHECKPOINT 4] Show the generated JPG for visual review. Ask: "Does this look correct at full size? How about at thumbnail preview size?"

Step 5: Caption (optional)

If the user wants RedNote post copy, generate:

**Title:** [Chinese hook title for RedNote post]

[Chinese body copy — NO URLs]

**Tags:** #英语口语 #雅思 #IELTS #英语学习 #口语练习 #留学 ...

Caption rules:

• No URLs in body (put in pinned comment instead)
• End with an engagement question to encourage comments
• Include relevant discovery tags
• Keep copy scannable with bullet points or line breaks

[CHECKPOINT 5] Show the caption draft for review.

---

RedNote Algorithm Notes

Distilled from campaign experience and docs/social-media/alpha-release-copy.md:

Feed Optimization

• 3:4 gets maximum feed area — 小红书 feeds display 3:4 images larger than 1:1 or 16:9
• Dark backgrounds stand out — Most RedNote content uses light/white backgrounds, so dark posters catch the eye during scroll
• Hook title must be readable at thumbnail size — At roughly 540x720px preview, only large bold text is legible

Content Rules

• No URLs in body or title — External links suppress algorithm distribution. Place URLs in a pinned reply/first comment instead
• No "AI" in copy — Use "natural conversation" or "intelligent" instead
• End with engagement question — Comments drive distribution. Ask something that invites opinions or experiences

Tag Strategy

• Mix broad tags (#英语口语 #雅思 #IELTS) with niche tags (#口语练习 #留学)
• Add utility tags: #AI学习工具 #省钱 #口语提升
• 8-12 tags is the sweet spot

Hook Title Patterns

Pattern	Example	When to use
Benefit claim	雅思口语神器	Product introduction, general appeal
Curiosity gap	原来这样练	Tutorial, how-to content
Social proof	5万人在用	Traction milestone, credibility
Pain point	口语总卡壳？	Problem-solution post
Number hook	3个技巧	List-style educational content
Before/after	练了30天后	Progress story, testimonial

---

Typography Reference

Element	Font	Size	Weight	Style A (Dark)	Style B (Light)
Hook title	Noto Sans SC	200px	900	Gradient text, drop-shadow	n/a (uses Instrument Serif headline instead)
Headline	Instrument Serif	124px	400	n/a	Solid dark text
Subtitle	Noto Sans SC	64px	500	Secondary color	n/a
Badge	Noto Sans SC / Plus Jakarta Sans	36px / 32px	600	Amber pill with inner glow	Soft amber pill
Heritage text	Noto Sans SC / Noto Serif SC	48px / 44px	500 / 400	White text	Serif italic in card
Heritage stats	Noto Sans SC	40px	400	Amber color	Split stat cards
Value prop	Plus Jakarta Sans	50px	500	n/a	Secondary text with bold highlights
Brand name	Instrument Serif	56px / 104px	400	Glass bar	Top section stacked
Brand CTA	Noto Sans SC	52px	600	Amber in glass bar	Button pill
Philosophy	Instrument Serif	68px	400 italic	n/a	Between dividers
URL	Plus Jakarta Sans	64px	700	n/a	Bottom section

Google Fonts to load:

Instrument Serif
Noto Sans SC:wght@400;500;600;700;900
Plus Jakarta Sans:wght@400;500;600;700   (Light mode only)
Noto Serif SC:wght@400;600               (Light mode only)
Caveat:wght@500                          (Light mode only, if handwriting needed)

CJK line height: Use line-height: 1.15-1.5 for Chinese text (CJK characters need more vertical breathing room than Latin text).

---

Pairing

• joe-speaking-social-poster — For LinkedIn, Instagram, and X posters (English + Chinese, 3:4 and 1:1). Use that skill for non-RedNote platforms.
• release-notes — Run first in a release workflow to generate version data, then use this skill for RedNote-specific poster.
• joe-speaking-design-language — Canonical source for all brand tokens. Both dark and light palettes here are derived from those tokens.

---

Example Usage

User: "Create a RedNote poster for the beta release"

1. Read docs/social-media/rednote-poster-zh.html (dark mode template)
2. [CHECKPOINT 1] Confirm: hook title, subtitle, visual style
3. Plan changes: Badge "Alpha 内测中" → "Beta 公测发布", subtitle update
4. [CHECKPOINT 2] Approve change table
5. Generate HTML: docs/social-media/beta-release-rednote-zh.html
6. [CHECKPOINT 3] Review HTML
7. Screenshot with Playwright at 2160x2880
8. [CHECKPOINT 4] Visual review
9. Optionally generate RedNote caption
10. [CHECKPOINT 5] Review copy