# Joe Speaking Rednote Poster

> 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.

- Skill: `hubeiqiao/joe-speaking-rednote-poster` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add hubeiqiao/joe-speaking-rednote-poster`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hubeiqiao/joe-speaking-rednote-poster/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: hubeiqiao (https://skillmd.com/u/hubeiqiao)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/hubeiqiao/joe-speaking-rednote-poster

---


# 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:**

```css
: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:**

```css
: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:

```bash
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:

```markdown
**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
```