Lieflat Xhs Longform

Lieflat XHS Longform

What This Skill Does

Create one vertical Xiaohongshu longform article card. The output is a readable 3:5 image, not a slide deck and not a cover.

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

• Output should read as a continuous article card: title, short subtitle if needed, section heading, body, and compact footer.
• Do not make it look like a PPT slide or a cover card.
• Default to Chinese visible copy unless the user explicitly requests another language.
• Treat xhs-story-field as a low-frequency style. Do not choose it by default for ordinary AI notes, product reviews, technical explainers, listicles, or general article cards. Use it only when the user explicitly asks for Story Field / 故事集, or when the source genuinely needs an archival, cinematic, project-field-report narrative with story-led paragraphs.
• Do not mechanically preserve decorative blocks from the demo. Keep only the structures that help the article read better.
• Preserve the chosen style's palette, type rhythm, ornaments, and atmosphere.
• Do not invent claims, numbers, product facts, or quotes.
• Do not mix template systems. If switching from one longform 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 × 1000px, 3:5.
• Default export: 1200px × 2000px PNG with deviceScaleFactor: 2.
• Body text baseline: around 22-24px, line-height around 1.7-1.85.
• Section headings: around 26-30px.
• Inner padding: around 50px, adjusted to the chosen style.

After creating the HTML, run:

node scripts/capture-xhs-card.mjs --html  --out 

For a multi-image carousel:

node scripts/capture-xhs-carousel.mjs --html  --out-dir 

Workflow

1. Read assets/catalog.json and references/style-understanding.md.
2. Select one longform 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 source into a compact article structure.
5. Replace title, subtitle, sections, body, labels, metadata, and footer.
6. Remove unneeded badges, charts, or ornamental panels if they interrupt reading.
7. Run PNG export and visually inspect the output.

Useful Scripts

node scripts/list-templates.mjs
node scripts/create-design.mjs --template xhs-sunrise --lang zh --out output/xhs-demo.html
node scripts/capture-xhs-card.mjs --html output/xhs-demo.html --out output/xhs-demo-card.png
node scripts/capture-xhs-carousel.mjs --html output/xhs-demo.html --out-dir output/xhs-carousel

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.