Design & Motion · nexu-io/html-anything
deck-xhs-post
9-slide 3:4 portrait carousel, warm pastel + dashed sticker cards
L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
This skill is not an executable program, but operates as 'one directory = one template': SKILL.md's frontmatter is used for selector display, and its body serves as the prompt sent to the model; adding a template simply means adding a directory without modifying TypeScript.
next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
Header comments in the same file specify the directory convention: SKILL.md (frontmatter + prompt body) / example.md (optional input sample) / example.html (optional preview). This skill directory precisely follows this structure.
The actual dispatched prompt = platform shared design directives (SHARED_DESIGN_DIRECTIVES) + this skill's SKILL.md body + user content, assembled into a single prompt via assemblePrompt.
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
Therefore, the body of this skill is only responsible for the 'layout/style/component library' section; output discipline (single-file HTML, strict use of real user data, content-driven quantity) comes from the shared directives, eliminating the need for template authors to declare them redundantly.
The final artifact bypasses the file system: shared directives explicitly forbid file tools like Write/Edit/Bash, requiring the model to stream the entire HTML directly as the response body (stdout is captured and written to disk by the frontend).
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
This is the source of the 'skill itself has zero disk writes' mechanism: it is the host frontend that writes the file, not the skill; there are also no scripts inside this directory.
The canvas size is specified in SKILL.md as aspect_hint '810×1080 ×9', which example.html realizes as fixed 810×1080 portrait slides declaring a 3:4 aspect ratio.
next/src/lib/templates/skills/deck-xhs-post/example.html
.tpl-xhs-post .deck{width:810px;height:1080px;position:relative;background:transparent}
810×1080 = 3:4, which is the recommended portrait ratio for Xiaohongshu posts; subsequent .slide elements are stacked on the same canvas using position:absolute;inset:0, indicating an 'individual image card per slide' design logic rather than a presentation playback logic.
The slide count structure provides lower and upper bounds in the prompt: Cover + N content slides + closing CTA, starting from 7 slides for short content, with a recommended total of ≤ 18 (constrained by platform image limits per post).
next/src/lib/templates/skills/deck-xhs-post/SKILL.md
- Cover + N 个 content 页 + 收尾 CTA (N 由【用户内容】决定, 完整覆盖每个要点; 短内容 7 页起步, 长内容应更多, 受小红书平台单帖图片数约束建议总数 ≤ 18)
This is one of the rare templates in this repo that 'explicitly specifies lower and upper count limits', but it interprets them as content-driven (short content can fall below the range, long content should have more), aligning with the shared directives' 'content-driven quantity' rule.
The signature stylistic element is the 'dashed sticker': white background, 2.5px dashed border, 18px border-radius, -3deg rotation with a hard drop shadow, available in four color variants: pink, yellow, blue, and green.
next/src/lib/templates/skills/deck-xhs-post/example.html
.tpl-xhs-post .sticker{position:absolute;padding:10px 18px;background:#fff;border:2.5px dashed var(--text-1);border-radius:18px;font-weight:800;font-size:18px;color:var(--text-1);transform:rotate(-3deg);box-shadow:4px 4px 0 var(--text-1)}
The sample uses stickers as handwritten annotations (e.g., '💤 Help', 'Tested for 7 days', 'The Real Turning Point ↓'), with one per slide positioned at varying locations and angles—serving as the primary source of the 'Xiaohongshu aesthetic'.
Each slide features a page number capsule in the top-right corner (in the format of 1 / 9), rendered individually by .page-dot, sequentially numbered across the 9 sample slides.
next/src/lib/templates/skills/deck-xhs-post/example.html
.tpl-xhs-post .page-dot{position:absolute;top:40px;right:48px;background:var(--text-1);color:#fff;border-radius:999px;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;z-index:2}
This differs from the 'bottom pagination dots' stated in SKILL.md: the sample implementation uses 'top-right page number capsules' and lacks bottom dot components (see verification.second_pass for details).
The narrative structure follows standard content marketing patterns: Cover Hook → Hook (Wait, don't scroll) → Pain (Pain points) → Aha (The revelation) → Step 1/2/3 → Result (Outcomes) → CTA (Save + Follow + Hashtags).
next/src/lib/templates/skills/deck-xhs-post/example.html
<h1 class="h1 tc mt-s" style="color:var(--accent)">收藏 + 关注 🧡</h1>
The 9 slides in example.html are commented sequentially from `<!-- 1. Cover -->` … `<!-- 9. CTA -->`, solidifying Xiaohongshu post conversion architecture into a reusable slide sequence—the key differentiator of this template compared to other decks in the repo.
The server-side /api/convert performs only three tasks: loads the skill from disk by templateId, concatenates the prompt, and spawns the local agent CLI while forwarding output via SSE stream.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
The same file first executes `const skill = loadSkill(templateId);` (returning 400 if the template does not exist) before handing off to invokeAgent; the skill directory itself produces no processes and makes no network connections.
2Core Capabilities
01Formats key takeaway content into nine 810×1080 portrait slides (Cover/Hook/Pain/Aha/Steps/Result/CTA)
02Dashed sticker annotations (four color variants + rotation + hard shadows) add a handwritten journal aesthetic to pages
03Top-right page number capsules number each slide sequentially, maintaining order visibility even when cropped by platforms
04Handwritten-style card .hand-box holds steps and checklists, complemented by num-circle numbered badges
05Closing slide includes built-in conversion components: hashtag row + author badge + engagement stats
06Warm pastel theme tokens (beige-pink base #fef7f3 / light pink surface #fff5ef) ensure low-saturation visual consistency across portrait images
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
- SKILL.md: Pure prompt directives and rule text, without script execution or external impact
Audit Notes: Evaluation target = the skill's own directory (SKILL.md + example.html/example.md, containing zero scripts, zero credential access, zero disk write instructions, and no network calling code). Under Batch 4 final criteria, html-anything templates are universally rated green: SKILL.md does not reference any runtime service backends/APIs, nor does it send user assets to external generation backends (no orange criteria); no reverse engineering, impersonation, or backend bypass (no red criteria). The only external endpoints appearing in the directory are artifact sample links (8 Google Fonts @import links (fonts.googleapis.com) in example.html), which qualify as 'artifact examples' and are exempt from rating, listed here solely for transparency. Host-side considerations for reference: preview iframe uses sandbox="allow-scripts allow-same-origin", local agent CLI is spawned (next/src/lib/agents/invoke.ts), and shared directives require CDN asset imports—these are platform behaviors noted for clarity.
5Second-Pass Verification
- [ok] 9 页 3:4 竖版 — .deck 810×1080，.slide aspect-ratio:3/4；样例共 9 个 slide，页码 1 / 9 至 9 / 9。
- [ok] 「虚线 sticker 卡片」 — .sticker 为 border:2.5px dashed + rotate(-3deg) + 硬阴影，样例每页 1 个、共 5 处不同颜色。
- [discrepancy] 「底部页码 dots」 — SKILL.md 写「底部页码 dots」，但 example.html 用右上角 .page-dot 页码胶囊（top:40px;right:48px），全文无 dots 组件；属提示词与样例的表述偏差，不影响功能。
- [ok] 「暖色 pastel 背景」 — 主题 token --bg:#fef7f3 / --bg-soft:#fff1ea / --surface-2:#fff5ef，为暖粉体系。
- [ok] 页数区间（7 起 / ≤18）与共享指令不冲突 — SKILL.md 明确「短内容 7 页起步, 长内容应更多…建议总数 ≤ 18」，是下限+平台约束，非页数上限；与 shared.ts「模板不定义数量」的口径一致。
- [ok] 无外部资源依赖 — 除字体 @import 外零 URL；图形全为 CSS/SVG，无图片外链。
6Verdict & Scenarios
Best for: Ideal for bulk image generation of key-point content such as Xiaohongshu/Instagram visual affiliate posts, educational carousels, career advice, and lifestyle hacks; perfect for creators and social media marketers converting an article directly into a 9-slide carousel; well-suited for brand matrix accounts needing a unified warm aesthetic.
Not for: Not suitable for formal reports or tabular content requiring precise data (no table components, no chart libraries); not suitable for 16:9 presentation projection (canvas is strictly portrait); not suitable for interactive scenarios (page flips, hover effects); not suitable for long-form English/Western-only typesetting (font stack is tailored primarily for Chinese sans/serif).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-xhs-post.tar.gz
sha256:
Option B · Copy Guide for Agentdc2bf96c0374a3ec…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.