# Lieflat Xhs Longform

> Create Xiaohongshu/小红书 longform vertical article cards from the Lieflat style pack. Use for readable 3:5 long images, article-to-card conversion, product reviews, AI notes, brand essays, and collectible Chinese social reading cards. Contains 11 longform style families.

- **Type:** Skill
- **Install:** `agentstack add skill-larashero3-dotcom-lieflat-html-design-lieflat-xhs-longform`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [larashero3-dotcom](https://agentstack.voostack.com/s/larashero3-dotcom)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [larashero3-dotcom](https://github.com/larashero3-dotcom)
- **Source:** https://github.com/larashero3-dotcom/lieflat-html-design/tree/main/skills/lieflat-xhs-longform

## Install

```sh
agentstack add skill-larashero3-dotcom-lieflat-html-design-lieflat-xhs-longform
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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:

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

For a multi-image carousel:

```bash
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

```bash
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](https://github.com/larashero3-dotcom)
- **Source:** [larashero3-dotcom/lieflat-html-design](https://github.com/larashero3-dotcom/lieflat-html-design)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-larashero3-dotcom-lieflat-html-design-lieflat-xhs-longform
- Seller: https://agentstack.voostack.com/s/larashero3-dotcom
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.