Lieflat XHS Cover
What This Skill Does
Create one Xiaohongshu cover / first image. The output is a title-first 3:4 image designed for quick recognition, not a longform article and not a slide deck.
Before choosing a style, read:
assets/catalog.jsonreferences/style-understanding.md
Use assets/templates/<template-id>/zh.html as a starter. Copy it into the user's workspace before editing.
Core Rules
- The title is the product. Make it legible at thumbnail size.
- Use a short subtitle, verdict, or hook only when it sharpens the title.
- One visual anchor is enough. Do not fill the cover with body paragraphs.
- Default to Chinese visible copy unless the user explicitly requests another language.
- Do not write
小红书封面 as visible copy unless the user explicitly asks for that label.
- Treat
xhs-cover-story-field as a low-frequency style. Do not choose it by default for ordinary AI/product/brand covers, hot takes, tutorials, or generic post openers. Use it only when the user explicitly asks for Story Field / 故事集, or when the cover needs an archival, cinematic, route-map, place/person, or project-field-report mood.
- Preserve the chosen style's atmosphere while keeping the cover simple.
- Do not mix template systems. If switching from one cover style to another, start again from the new style's starter HTML instead of carrying over the previous template's DOM, class names, layout modules, CSS variables, or decorative blocks.
Canvas And Export
- CSS canvas:
600px × 800px, 3:4.
- Default export:
1200px × 1600px PNG with deviceScaleFactor: 2.
- Title baseline: around
44-72px, Chinese line-height around 1.05-1.2.
- Subtitle baseline: around
19-24px.
- Metadata baseline: around
10-16px.
After creating the HTML, run:
node scripts/capture-xhs-card.mjs --html <path-to-html> --out <path-to-cover.png>
Workflow
- Read
assets/catalog.json and references/style-understanding.md.
- Select one cover style.
- Copy the chosen starter into the project. For each alternate style or revision that changes style family, copy a fresh starter for that target style.
- Rewrite the user's topic into a compact cover title and optional subtitle.
- Replace title, metadata, footer, labels, and visual hook.
- Remove article paragraphs or demo-only blocks.
- Export PNG and inspect thumbnail readability.
Useful Scripts
node scripts/list-templates.mjs
node scripts/create-design.mjs --template xhs-cover-dot-matrix --lang zh --out output/xhs-cover-demo.html
node scripts/capture-xhs-card.mjs --html output/xhs-cover-demo.html --out output/xhs-cover-demo.png
1---2name: lieflat-xhs-cover3description: Create Xiaohongshu/小红书 cover or first-image title cards from the Lieflat style pack. Use for 3:4 social covers, title-first cards, post openers, AI/product/brand topic covers, and Chinese social thumbnails. Contains 11 cover style families.4---56# Lieflat XHS Cover78## What This Skill Does910Create one Xiaohongshu cover / first image. The output is a title-first `3:4` image designed for quick recognition, not a longform article and not a slide deck.1112Before choosing a style, read:13141. `assets/catalog.json`152. `references/style-understanding.md`1617Use `assets/templates/<template-id>/zh.html` as a starter. Copy it into the user's workspace before editing.1819## Core Rules2021- The title is the product. Make it legible at thumbnail size.22- Use a short subtitle, verdict, or hook only when it sharpens the title.23- One visual anchor is enough. Do not fill the cover with body paragraphs.24- Default to Chinese visible copy unless the user explicitly requests another language.25- Do not write `小红书封面` as visible copy unless the user explicitly asks for that label.26- Treat `xhs-cover-story-field` as a low-frequency style. Do not choose it by default for ordinary AI/product/brand covers, hot takes, tutorials, or generic post openers. Use it only when the user explicitly asks for Story Field / 故事集, or when the cover needs an archival, cinematic, route-map, place/person, or project-field-report mood.27- Preserve the chosen style's atmosphere while keeping the cover simple.28- Do not mix template systems. If switching from one cover style to another, start again from the new style's starter HTML instead of carrying over the previous template's DOM, class names, layout modules, CSS variables, or decorative blocks.2930## Canvas And Export3132- CSS canvas: `600px × 800px`, `3:4`.33- Default export: `1200px × 1600px` PNG with `deviceScaleFactor: 2`.34- Title baseline: around `44-72px`, Chinese line-height around `1.05-1.2`.35- Subtitle baseline: around `19-24px`.36- Metadata baseline: around `10-16px`.3738After creating the HTML, run:3940```bash41node scripts/capture-xhs-card.mjs --html <path-to-html> --out <path-to-cover.png>42```4344## Workflow45461. Read `assets/catalog.json` and `references/style-understanding.md`.472. Select one cover style.483. Copy the chosen starter into the project. For each alternate style or revision that changes style family, copy a fresh starter for that target style.494. Rewrite the user's topic into a compact cover title and optional subtitle.505. Replace title, metadata, footer, labels, and visual hook.516. Remove article paragraphs or demo-only blocks.527. Export PNG and inspect thumbnail readability.5354## Useful Scripts5556```bash57node scripts/list-templates.mjs58node scripts/create-design.mjs --template xhs-cover-dot-matrix --lang zh --out output/xhs-cover-demo.html59node scripts/capture-xhs-card.mjs --html output/xhs-cover-demo.html --out output/xhs-cover-demo.png60```
larashero3-dotcom