Design & Motion · nexu-io/html-anything
deck-xhs-pastel
Cream background + soft glow blobs + rounded macaron cards + Playfair italic numerals
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 follows a "one directory = one template" pattern: the frontmatter of SKILL.md is used for selector display, while the body serves as the prompt sent to the model; adding a template equals adding a directory, without modifying TypeScript.
next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
The 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 strictly follows this structure.
The actual prompt sent = platform shared design directives (SHARED_DESIGN_DIRECTIVES) + this skill's SKILL.md body + user content, assembled into a single prompt by 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 slide count) comes from the shared directives and does not need to be redeclared by the template author.
Final deliverables bypass 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 persisted by the frontend).
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
This is the architectural source of "zero disk writes by the skill itself": file writes are handled by the host frontend, not the skill; there are no scripts inside this directory.
The style is strictly locked down by the [Layout] checklist in SKILL.md across four dimensions: "color values + typography + border radius + components": cream background #fef8f1, three soft glow blobs, Playfair italic serif headings, 28px rounded macaron cards, and Playfair italic 01-04 numerals.
next/src/lib/templates/skills/deck-xhs-pastel/SKILL.md
- 奶油 #fef8f1 底 + 三个柔光 blob
The same section defines the card color palette (peach/mint/sky/purple/lemon/rose) and the top-bar chip+page structure, so the model does not need to "design"—it only needs to fill user content into this predefined visual system.
The card's 28px border-radius and the soft glow blobs are materialized into ready-to-copy CSS in example.html: cards with 28px border-radius + 0 14px 40px soft shadow, and blobs composed of three large circles with radial gradients + blur(2px).
next/src/lib/templates/skills/deck-xhs-pastel/example.html
.tpl-xhs-pastel-card .xp-card{border-radius:28px;padding:30px 34px;background:#fff;box-shadow:0 14px 40px rgba(42,35,64,.08);position:relative;overflow:hidden}
The three blob CSS definitions are 420px peach / 360px purple / 260px mint, all using radial-gradient(circle, var(--xp-*), transparent 70%), with an opacity of .85 and z-index 0; the text layer sits above the soft glow at z-index 2—this is the exact technique used to achieve the "cream background + soft glow" aesthetic.
Data graphics avoid chart libraries entirely: weekly time allocation is rendered using a hand-coded SVG donut (segmented circles + stroke-dasharray offsets), centered with a Playfair numeral labeled 4h.
next/src/lib/templates/skills/deck-xhs-pastel/example.html
<text x="130" y="130" text-anchor="middle" font-family="Playfair Display" font-size="44" font-weight="900" fill="#2a2340">4h</text>
Corresponding to the "SVG donut chart" in SKILL.md, this demonstrates that the template can generate data slides without JS or chart CDNs; segment colors are derived from the cards' dark-variant tokens (--xp-*-d).
Slide counts are not hardcoded by the template: shared directives require "content-driven volume," and the template only provides a reusable layout pool.
next/src/lib/templates/shared.ts
模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
example.html provides an 8-page sample (Cover 01 · 08 → Chapter 02 · 08 → 2x2 Cards 03 → Quote 04 → Prompt Code 05 → Donut Chart 06 → CTA 07/08); footer and top-bar page numbers adapt to actual page counts; longer user content should naturally expand into more pages.
The server-side /api/convert handles only three tasks: read the skill from disk by templateId, assemble the prompt, and spawn the local agent CLI while forwarding the output via SSE streaming.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
In the same file, `const skill = loadSkill(templateId);` is called first (returning 400 if the template does not exist), and then passed to invokeAgent; the skill directory itself produces no processes and makes no network calls.
2Core Capabilities
01Formats lifestyle and mood-oriented long-form content into a macaron slow-life deck (Cover + Chapter + Cards + Quote + Code + Data Chart + CTA)
02Uses three soft glow blobs to create a creamy atmospheric background, keeping the content layer elevated above the glow for readability
03Macaron rounded card palette (peach/mint/sky/purple/lemon/rose) for parallel key points, with dark-variant tokens for typography and legend colors
04Playfair Display italic for display titles and 01-04 numerals, paired with sans-serif body text (Inter / Noto Sans SC) for a clear serif/sans role distinction
05chip + page top header and "NN · Total Pages" footer pagination for easy page-by-page sequence verification
06Pure CSS/SVG data visualization: donut chart segmented via stroke-dasharray, with zero charting library dependencies
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 directory itself (SKILL.md + example.html/example.md, containing zero scripts, zero credential access, zero disk-write directives, and no network invocation code). Under Batch 4 final criteria, html-anything templates are uniformly rated green: the full text of SKILL.md references no runtime service backends/APIs, nor does it transmit user materials to external generation backends (no orange criteria); it contains no reverse engineering, spoofing, or backend bypasses (no red criteria). The only endpoints appearing in the directory are sample artifact external links (Google Fonts @import in example.html referencing fonts.googleapis.com across 8 font families, and an unrelated w3.org SVG namespace), which qualify as "artifact examples" and are exempt from rating, listed here solely for self-attestation. Host-side architectural context for reference: the preview iframe uses sandbox="allow-scripts allow-same-origin", a local agent CLI is spawned (next/src/lib/agents/invoke.ts), and shared directives require CDNs in the final generated code—these are platform behaviors noted for clarity.
5Second-Pass Verification
- [ok] 目录只有 SKILL.md + example.html（无脚本/无资产） — find 结果 2 个文件；<script 与事件处理器零命中。
- [ok] 「奶油底 #fef8f1 底 + 三个柔光 blob」 — example.html 有 --xp-bg:#fef8f1 与 .xp-blob.b1/.b2/.b3 三条径向渐变规则。
- [ok] 「Playfair 斜体 01-04 序号」 — 卡片内 <div class="xp-num">01</div>…04 与 .xp-h1 em{font-style:italic} 均为 Playfair Display。
- [ok] 「SVG donut 图 + chip+page 顶栏」 — 第 06 页背景层含四段 stroke-dasharray 的圆环 + 中心 4h；每页 xp-topbar 内 xp-chip + xp-page。
- [discrepancy] aspect_hint 16:9 与样例的对应关系 — SKILL.md frontmatter 写 aspect_hint: "16:9"，但 example.html 的 .slide 是 width:100vw/height:100vh 全屏适配（由宿主的 deck 模式播放），并没有 16:9 固定画布；选择器缩略图处才出现 aspect-ratio:16/9。结论：16:9 是宿主预览/导出的约束，不是模板文件里的画布尺寸。
- [ok] 页数口径 — 样例为 8 页（页脚 01 · 08…08 · 08），符合共享指令「模板不定义数量、由内容决定」；SKILL.md 未写死页数。
- [ok] 官方描述逐字一致 — description 原文「奶油底 + 柔光 blob + 马卡龙圆角卡片 + Playfair 斜体序号」与 SKILL.md 逐字相同。
6Verdict & Scenarios
Best for: Ideal for 16:9 presentation decks covering lifestyle, personal growth, and emotional or mood-oriented content; perfect for individual creators and self-media publishers needing consistent "Xiaohongshu/WeChat Moments" visual layouts without design skills; saves the most time when converting long-form Chinese articles into presentation decks.
Not for: Not suitable for formal financial reports, technical specifications, or scenarios requiring precision data tables and coordinate axes (the soft glow background and 28px rounded corners undermine formal rigor); not suitable for contexts requiring pixel-perfect corporate VI constraints; not intended for users expecting built-in interactive scripts (page flipping and exporting are provided by the host environment).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-xhs-pastel.tar.gz
sha256:
Option B · Copy Guide for Agente9e5fecb3c98880a…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.