SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillslieflat-xhs-longform

lieflat-xhs-longform

Design & creation

View repository

Updated 10-15 23:48

About this skill

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/<template-id>/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 <path-to-html> --out <path-to-card.png>

For a multi-image carousel:

node scripts/capture-xhs-carousel.mjs --html <path-to-html> --out-dir <folder>

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