| 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
- 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.
- No "AI" mentions — Say "natural conversation" or "real-time conversation practice" instead of "AI conversation." The word "AI" triggers skepticism in the RedNote audience.
- Chinese hook title required — Max 6 Chinese characters for thumbnail dominance. The title must be instantly scannable at feed size (roughly 540x720px preview).
- 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.
- 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):
- Badge (pill) — release phase
- Hook title — 200px, gradient text, max 6 chars
- Subtitle — 64px, secondary color
- Heritage trust row — GPT icon + stats
- Screenshot container with ambient glow
- 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):
- Corner celebration bursts (sparkles + dots, z-index: 2)
- Top section — App icon + brand name + badge + headline
- Divider with sparkle
- Middle section — Screenshot + heritage card side-by-side, value prop, test types
- Philosophy quote (Instrument Serif italic)
- Divider with sparkle
- Bottom section — URL + CTA button
Workflow
Step 1: Gather Context
Read these files to understand the current situation:
- The chosen template from the repo (
docs/social-media/)
lib/releases/releases-data.ts — current release version, highlightslib/landing/content.ts — landing page messaging (hero, features, CTA)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
- Clone the chosen template's full HTML/CSS structure
- Modify only the content elements listed in the "Content That Changes" table
- 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
