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

- **Type:** Skill
- **Install:** `agentstack add skill-larashero3-dotcom-lieflat-html-design-lieflat-xhs-cover`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [larashero3-dotcom](https://agentstack.voostack.com/s/larashero3-dotcom)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **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-cover

## Install

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

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

## About

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

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

```bash
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](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-cover
- 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%.