Design & Motion · nexu-io/html-anything

deck-xhs-white

Name: deck-xhs-white
Author: nexu-io/html-anything

Pure white + top rainbow bar + gradient text + macaron soft cards + black-background pill

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE = Apache License 2.0；GitHub API license.spdx_id = Apache-2.0；next/package.json 亦声明 Apache-2.0）Commit 553ed98c28

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 rather "one directory = one template": the frontmatter of SKILL.md is used for selector display, and the body serves as the prompt sent to the model; adding a template means 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 delivered prompt = platform shared design directives (SHARED_DESIGN_DIRECTIVES) + the body of SKILL.md of this skill + 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, must use real user data, content-driven quantity) comes from the shared directives, eliminating the need for template authors to declare them repeatedly.

The final output does not touch the file system: shared directives explicitly forbid file tools such as 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 front end).

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: files are written by the host frontend, not the skill; there are no scripts inside this directory.

The visual signature consists of four hard metrics written in SKILL.md: pure white background + top 10-color rainbow bar, 80-110px display title + purple→blue→green→orange→pink gradient text, macaron soft card set, and white text on black background .focus pill + large block quotes.

next/src/lib/templates/skills/deck-xhs-white/SKILL.md

- 纯白背景 + 顶部 10 色彩虹 bar

This is the most information-dense style declaration in the same repo: each of the four corresponds to a snippet of copyable CSS in the example, so the model does not need to invent color palettes.

In the example, the rainbow bar is a 5px, 10-segment linear-gradient at the top of the page (#6366f1→#8b5cf6→#a855f7→#ec4899→#f43f5e→#f97316→#eab308→#22c55e→#06b6d4→back to #6366f1), attached to every page.

next/src/lib/templates/skills/deck-xhs-white/example.html

.tpl-xhs-white-editorial .xw-topline{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#6366f1,#8b5cf6,#a855f7,#ec4899,#f43f5e,#f97316,#eab308,#22c55e,#06b6d4,#6366f1)}

Using the same color at the start and end creates a visual loop, avoiding an abrupt feeling of the bar being cut off; .xw-tag .dot on the right side of the top bar also reuses the same 5-color gradient for small dots.

The "gradient text" of the title is implemented using background-clip:text + transparent fill, with the 5 color stops corresponding one-to-one to the "purple→blue→green→orange→pink" specified in SKILL.md.

next/src/lib/templates/skills/deck-xhs-white/example.html

.tpl-xhs-white-editorial .xw-grad{background:linear-gradient(90deg,#7b61ff 0%,#4e8cff 25%,#17b26a 48%,#ff9d42 72%,#ff5fa2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

The base title size is 84px, inlined to 110px on chapter divider pages, falling right within the 80-110px range in SKILL.md; gradients are only used on keyword span elements within titles, while body text remains a solid #111318.

The "white text on black background .focus pill" is an inline highlight marker: inline-block + 14px border-radius + #111318 background + white text, along with three light-background variants in blue/pink/orange.

next/src/lib/templates/skills/deck-xhs-white/example.html

.tpl-xhs-white-editorial .xw-focus{display:inline-block;padding:6px 14px;border-radius:14px;background:#111318;color:#fff;font-weight:700}

The example uses it to contrast "primary vs. secondary focus" within the same sentence: `<span class="xw-focus-orange">production</span>…<span class="xw-focus">acceptance and fallback</span>`, which provides better rhythm than bold text.

Dual-purpose positioning: the aspect_hint in SKILL.md specifies "16:9 / 3:4", meaning the same layout can be presented as a landscape PPT or published to Xiaohongshu as portrait graphic slides.

next/src/lib/templates/skills/deck-xhs-white/SKILL.md

【意图】可同时发小红书图文与横版 PPT 双用的白底杂志风。

The example is an 8-page 16:9 presentation (.slide 100vw×100vh, page numbers 01 / 08); thanks to the white background and strong contrast, it holds up well in both aspect ratios—this is the key difference from deck-xhs-post (which hardcodes 810×1080).

The server-side /api/convert only does three things: reads the skill from disk according to templateId, constructs the prompt, spawns the local agent CLI, and streams the output via SSE.

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), and then hands it over to invokeAgent; the skill directory itself creates no processes and makes no network calls.

2Core Capabilities

01White-background editorial style deck: rainbow top bar + gradient title + soft cards + black pill highlights

02Dual-use single template: landscape 16:9 presentation and portrait 3:4 graphics

03Macaron soft card group (pink/purple/blue/green/orange) accommodating 2x2 side-by-side key points

04Four light and dark states of inline focus pills, expressing hierarchy within the same sentence without changing font sizes

05Large block quotes (xw-hero / xw-quote) for golden quote slides

06Dual positioning via page numbers on every page + top bar tags (chapter/topic)

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

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; zero scripts, zero credential access, zero disk-writing directives, and no network calling code in this directory). According to Batch 4 final criteria, html-anything templates are uniformly rated green: the full text of SKILL.md names no runtime backend services/APIs, nor does it send user assets to external generation backends (no orange criteria); no reverse engineering, spoofing, or bypassing of backends (no red criteria). The only endpoints actually appearing in the directory are external links in artifact examples (8 Google Fonts @import rules in example.html (fonts.googleapis.com)), which are categorized as "artifact examples" and not rated under the criteria, listed here merely for self-attestation. The host side should also note: preview iframe uses sandbox="allow-scripts allow-same-origin", the local agent CLI is spawned (next/src/lib/agents/invoke.ts), and shared directives require the final output to reference CDNs—these are platform behaviors, stated here for clarification only.

5Second-Pass Verification

[ok] 「顶部 10 色彩虹 bar」 — .xw-topline 的 linear-gradient 共 10 个色停（首尾同色 #6366f1 收口），逐字数过。
[ok] 「80-110px display 标题」 — .xw-title 为 84px，分隔页内联 font-size:110px，落在区间内。
[ok] 「紫→蓝→绿→橙→粉渐变文字」 — .xw-grad 停点顺序 #7b61ff→#4e8cff→#17b26a→#ff9d42→#ff5fa2，与描述顺序一致。
[ok] 「马卡龙软卡片组 (粉 / 紫 / 蓝 / 绿 / 橙)」 — 样例 2x2 网格用 soft-pink/soft-blue/soft-green/soft-orange 四张；soft-purple 亦有 token（--xw-soft-purple:#f4efff），属版式池内备用色。
[ok] 「黑底白字 .focus pill + 引用大块」 — .xw-focus 规则与 .xw-quote 引用块均在样例第 1 页出现。
[discrepancy] aspect_hint 双比例与样例画布 — 样例只用 100vw×100vh 播放式布局实现 16:9，未提供 3:4 竖版实测样例；竖版可用性由「白底 + 居中内容 + 百分比宽度」的写法推断，未在文件中验证。
[ok] 无脚本、无外部资源 — 除字体 @import 零 URL；无 <script> 与事件处理器。

6Verdict & Scenarios

One layout published in two formats: white background + high contrast will not break under 16:9 or 3:4, saving duplicate generation of "one landscape, one portrait".

Visual emphasis without relying on images: the trio of rainbow bar + gradient title + four-state pills establishes clear hierarchy with zero asset dependencies.

Refined focus expression: primary and secondary elements in the same sentence are distinguished by pill background colors (black vs. light orange), offering better readability than bolding entire sentences.

Concentrated and controllable palette: only 5 color groups + 5 soft variants; exceeding this breaks the white-background editorial tone, which effectively minimizes the model's room to drift.

Best for: Suitable for opinion expression, industry trends, and AI/career judgment content; suitable for dual-use scenarios where content needs to be shared as landscape slides/projections as well as published to Xiaohongshu; suitable for authors who prefer editorial style with high contrast and high information density.

Not for: Not suitable for content requiring an emotional healing tone (please use deck-xhs-pastel); not suitable for strict brand VI (rainbow gradients conflict with most brand colors); not suitable for data/chart-intensive reports (no chart components); not suitable for black-and-white printing (gradients and color bars look muddy in grayscale).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload deck-xhs-white.tar.gz

sha256: cdf4726ef28078b6…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.