lieflat-xhs-cover

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.

Ir para a instalação

Repositório: larashero3-dotcom/lieflat-html-design
Última atividade na origem: 25 de maio de 2026 às 13:55
Idioma detectado do SKILL.md: inglês
Estrelas: 77
Forks: 3

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Voltar à pesquisa Voltar à instalação

name	lieflat-xhs-cover
description	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.

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.json
references/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