SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsxhs-html

xhs-html

Design & creation

View repository

Updated 10-16 09:35

About this skill

XHS HTML

Turn user content into a set of publishable Xiaohongshu image-text posts, rather than just making a single cover.

By default, deliver a complete, self-contained HTML. Inside the HTML, place multiple .sheet, each fixed at 1080×1440 (3:4), so the user can screenshot page by page in the browser.

Core Deliverables

  • 1 complete HTML; do not split the pages into multiple HTML files.
  • At least 6 images; normally provide four tiers: 6, 7, 8, and 9, and complex content can be specified by the user to have more.
  • The 1st image is responsible for clicks; the 2nd is responsible for retention; the middle pages are responsible for delivering; the last 1 is responsible for summary, acceptance, or saving.
  • Use the same set of design tokens to keep the whole set consistent, but allow page layouts to vary with the content.
  • The account name by default appears only on the first page; inner pages do not repeat ineffective elements such as the brand name, chapter names, or English slogans.
  • Prioritize delivering HTML. Unless the user requests it, do not additionally export PNG.

Two items that must be confirmed before starting work

If the user has already clearly specified the style and page count, execute directly. Otherwise, in the same message, have the user choose:

1. Style

According to the content niche, from references/style-registry.md among the 62 styles, recommend 5, plus 1 "Smart Match":

推荐风格
1. Apple — 白底留白、克制高级，适合教程和知识型内容
2. Notion — 米白纸感、轻卡片，适合清单和方法论
3. Stripe — 蓝紫商业感，适合财务、商业和数据内容
4. Linear — 深色科技感，适合 AI、工具和效率内容
5. Claude — 暖调编辑感，适合经验分享和认知内容
6. 智能匹配 — 我根据内容替你选，并说明理由

Recommendations must match the niche; do not copy the examples. When the user specifies a brand, use it directly. When the user selects "Smart Match" or says "you decide", first tell them the selected style and the reason, then produce it.

2. Page count

At the same time, give page count suggestions:

图文张数
A. 6 张 — 精简版：结论少、步骤短
B. 7 张 — 标准版：一个完整方法或清单
C. 8 张 — 实操版：可加入样例、模板和验收
D. 9 张 — 深入版：适合完整 SOP 或多步骤教程

Based on the original text, give one recommended tier and one sentence of reasoning. Without the user's choice, do not arbitrarily cram long content into 6 pages; when the user says "just do it" or "you decide", use the recommended tier.

Content Breakdown

Read the complete content first, then build the page structure. Do not typeset while reading.

Extract the following information:

  1. Target readers: who will stop because of this set of images.
  2. Core promise: what specific action can be completed after reading.
  3. Minimum complete chain: preparation → operation → result → acceptance.
  4. Directly reusable materials: prompts, table fields, commands, checklists, templates, judgment criteria.
  5. Content that must be deleted: repetitive setup, condescending lectures, vague encouragement, synonymous repetition.

Each set must contain at least 3 kinds of "takeaways", for example:

  • Copyable prompts or scripts
  • Folder structure or field table
  • Operating steps
  • Example input and expected output
  • Acceptance checklist
  • Common mistakes and correction methods

Purely conceptual content must also be turned into actions: what the concept is → in what scenario to use it → how to do the first step → what result to look at after finishing.

Page Order

Choose the structure according to the content; do not mechanically apply a template. See detailed mode in references/page-patterns.md。

Default 8-page practical structure

  1. Cover: audience + result + topic; do not pile on a table of contents.
  2. Result preview: what can be gained after reading; establish the reason to keep swiping.
  3. Preparation: input materials, tools, folders, or prerequisites.
  4. Rules: write the task scope, boundaries, and fields clearly.
  5. Execution: provide copyable prompts, commands, or operations.
  6. Trial run: verify with a small sample and explain what to observe.
  7. Output: show the files, fields, or finished product that should be obtained.
  8. Acceptance and reuse: checklist + how to reuse it next time.

Page density

  • Each page covers only one main question.
  • Body text per page is usually 70–150 Chinese characters; tables, code, and field lists are judged by visual footprint.
  • The cover has the least information; inner pages may be denser than the cover, but must retain obvious whitespace.
  • Delete secondary explanations first, then compress spacing; do not shrink body text into hard-to-read small type.
  • Avoid using exactly the same card array on two adjacent pages; keep the rhythm varied.

Design system

Read before production:

  1. references/xhs-html-guide.md: single-HTML multi-page structure, font sizes, safe areas, and validation rules.
  2. references/page-patterns.md: page order and page components for tutorials, checklists, methodologies, and stories.
  3. references/style-registry.md: 62 styles and track matching.
  4. When the user selects an offline preset, read references/style-presets.md; for other styles, pull specifications according to the registry.

Style only determines colors, typographic temperament, corner radius, lines, and decorative motifs; it does not change content logic. Do not sacrifice Chinese readability just to “look like a certain brand.”

Visual bottom line

  • Canvas: 1080×1440, ratio 3:4.
  • Cover title: 88–128px; inner page title: 60–76px.
  • Body text: 36–44px; auxiliary information no smaller than 30px.
  • Recommended left and right safe margins are 80–96px, with enough top and bottom safe area reserved for screenshots.
  • Light-background styles use dark body text; dark styles use high-contrast light body text.
  • No more than 1 accent color per page, and no more than 1 type of decorative motif.
  • Do not rely on external fonts, external CSS, or online images; the layout must remain intact when opened offline.
  • Do not repeat the account name, column name, English slogan, or synonymous page titles on every page.

HTML engineering constraints

Use assets/xhs-template.html as the skeleton:

  • body is only responsible for arranging all pages vertically and leaving preview spacing.
  • Each page uses <section class="sheet">, fixed width:1080px;height:1440px;overflow:hidden。
  • Inside pages, use normal document flow, Grid, or Flex; absolute positioning is only for background decoration, page numbers, and bottom rules.
  • The whole set shares :root token。
  • The first page may use .cover, and inner pages use .head、.cards、.steps、.code-card、.checklist and other components.
  • Add @media print, so that when printing, one page per sheet and page spacing is removed.
  • The output must not contain leftover placeholders, TODOs, example accounts, or unreplaced fields.

Workflow

  1. Obtain the user's content; if a local file or link is provided, read it completely first.
  2. Determine the content type, audience, core promise, and practical materials.
  3. If the style or page count is not specified, offer “5+1 styles” and “6/7/8/9 pages” choices and wait for confirmation.
  4. First write a page-level outline: each page's title, unique task, and key materials; check whether it progresses step by step.
  5. Use the same HTML to generate all .sheet。
  6. Run:
python3 scripts/check_contrast.py --tokens path/to/index.html
node scripts/render_xhs.mjs --html path/to/index.html --out-dir /tmp/xhs-check --strict
  1. Check each page's dimensions, overflow, safe area, readability, repeated elements, and the rhythm of the whole set; after finding problems, modify the HTML and check again.
  2. Deliver an absolute path link to the HTML, and explain the page count, style, and content structure. When the user only wants HTML, do not attach PNGs.

Quality Gates

Deliver only when all conditions are met:

  • The page count matches the user's choice and is no fewer than 6.
  • Every page is 1080×1440.
  • All .sheet have no content overflow.
  • The 1st thumbnail makes the theme understandable, and the 2nd does not restate the cover.
  • The middle pages contain at least 3 types of actionable material.
  • The last page provides acceptance, reuse, or a summary, and does not write empty follow-me slogans.
  • The account name appears only on the first page, unless the user requests otherwise.
  • The title, body text, fields, file names, and numbers have no typos or inconsistencies.
  • The HTML is self-contained, can be opened offline, and can be screenshotted continuously.

Boundaries

  • When the user only gives a theme and there is not enough content, first fill in the content skeleton or request the original text; do not pad it out to 6 pages with empty talk.
  • When illustrations, real photos, or complex scene images are needed, use image generation capabilities separately to create local assets, then embed them in the HTML; the core of this Skill is still text layout and image-set structure.
  • Content involving medical, legal, or financial returns must not make definitive promises.
  • Do not use other people's logos, trademarks, or unauthorized assets to impersonate official visuals.