Lieflat Xhs Cover

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:

1. assets/catalog.json
2. references/style-understanding.md

Use assets/templates//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  --out 

Workflow

1. Read assets/catalog.json and references/style-understanding.md.
2. Select one cover style.
3. 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.
4. Rewrite the user's topic into a compact cover title and optional subtitle.
5. Replace title, metadata, footer, labels, and visual hook.
6. Remove article paragraphs or demo-only blocks.
7. 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: larashero3-dotcom
• Source: larashero3-dotcom/lieflat-html-design
• License: MIT

Install and usage instructions live in the source repository linked above.