1实现原理 · 为什么它能做到
这个 skill 不是可执行程序，而是「一个目录 = 一个模板」：SKILL.md 的 frontmatter 供选择器展示，正文（body）就是发给模型的提示词；加模板＝加目录，不需要改 TypeScript。
next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
注：同一文件头注释写明目录约定：SKILL.md（frontmatter + prompt body）/ example.md（可选输入样例）/ example.html（可选预览）。本 skill 目录内正是这一结构。
实际下发提示词 = 平台共享设计指令（SHARED_DESIGN_DIRECTIVES）+ 本 skill 的 SKILL.md 正文 + 用户内容，由 assemblePrompt 拼成一条 prompt。
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
注：所以本 skill 的正文只负责「版式/风格/组件库」这一段；输出纪律（单文件 HTML、必须用用户真实数据、内容驱动数量）来自共享指令，模板作者不必重复声明。
成稿不走文件系统：共享指令明令禁止 Write/Edit/Bash 等文件工具，要求模型把整份 HTML 直接作为回复正文流式输出（stdout 由前端捕获落盘）。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
注：这是「skill 自身零写盘」的机制来源：写文件的是宿主前端，不是 skill；本目录内也无任何脚本。
视觉签名是四条写在 SKILL.md 的硬指标：纯白底 + 顶部 10 色彩虹 bar、80-110px display 标题 + 紫→蓝→绿→橙→粉渐变文字、马卡龙软卡片组、黑底白字 .focus pill + 引用大块。
next/src/lib/templates/skills/deck-xhs-white/SKILL.md
- 纯白背景 + 顶部 10 色彩虹 bar
注：这是同 repo 中信息密度最高的一条式风格声明：四条各自对应样例里的一段可抄 CSS，模型不需要自创配色。
彩虹 bar 在样例里是页面顶部 5px 的 10 段 linear-gradient（#6366f1→#8b5cf6→#a855f7→#ec4899→#f43f5e→#f97316→#eab308→#22c55e→#06b6d4→回到 #6366f1），每页都挂一条。
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)}
注：首尾同色形成视觉闭环，避免条带被切断的突兀感；顶栏右侧的 .xw-tag .dot 也复用同 5 色渐变做小圆点。
标题的「渐变文字」用 background-clip:text + 透明填充实现，5 色停点与 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}
注：标题 base 尺寸 84px、章节分隔页内联到 110px，正落在 SKILL.md 的 80-110px 区间；渐变只用于标题里的关键词 span，正文保持 #111318 纯色。
「黑底白字 .focus pill」是行内重点标记：inline-block + 14px 圆角 + #111318 底 + 白字，另有蓝/粉/橙三个浅底变体。
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}
注：样例用它在同句里做「重点 vs 次重点」的对比：`<span class="xw-focus-orange">生产</span>…<span class="xw-focus">验收和兜底</span>`，比加粗更有节奏。
双用定位：SKILL.md 的 aspect_hint 写「16:9 / 3:4」，即同一套版面既按横版 PPT 播，也可按竖版图文发小红书。
next/src/lib/templates/skills/deck-xhs-white/SKILL.md
【意图】可同时发小红书图文与横版 PPT 双用的白底杂志风。
注：样例为 8 页 16:9 播放式（.slide 100vw×100vh，页码 01 / 08），靠白底 + 强对比在两种比例下都不易崩——这是与 deck-xhs-post（写死 810×1080）的关键差别。
服务端 /api/convert 只做三件事：按 templateId 从磁盘读 skill、拼 prompt、spawn 本地 agent CLI 并 SSE 流转发输出。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：同文件先 `const skill = loadSkill(templateId);`（无此模板即 400），再交给 invokeAgent；skill 目录本身不产生进程、不联网。
2核心能力
01白底杂志风 deck：彩虹顶条 + 渐变标题 + 软卡片 + 黑 pill 重点
02同一模板双用：横版 16:9 演示与竖版 3:4 图文
03马卡龙软卡片组（粉/紫/蓝/绿/橙）承载 2x2 并列要点
04行内重点 pill 的深浅四态，让同句内的主次无需换字号即可表达
05引用大块（xw-hero / xw-quote）承载金句页
06每页页码 + 顶栏 tag（章节/主题）双定位
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 渐变文字可读性 — 渐变标题的浅色段（#ff9d42/#ff5fa2）在白底上对比度偏低，关键词过长时会掉到 4.5 以下；建议只在短关键词上使用。
- 竖版比例未实测 — 目录内只有 16:9 样例；3:4 下内容会重排，卡片 2x2 网格可能挤压，需人工回看。
- 彩色纪律依赖提示词 — 彩虹条与五色卡片容易让模型在每个标题上都套渐变，最终页面花掉——SKILL.md 的克制意图需要靠人工 review 守住。
- 宿主侧注入面 — 用户内容逐字进 prompt；成稿若带入外链会在预览 iframe（allow-scripts allow-same-origin）里执行。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（SKILL.md + example.html/example.md，本目录零脚本、零凭证读取、零写盘指令、无网络调用代码）。按批4 终版口径，html-anything 模板一律 green：SKILL.md 全文未点名任何运行时服务后端/API，也不把用户素材送外部生成后端（无 orange 要件）；无逆向/冒充/绕过后端（无 red 要件）。目录内实际出现的端点仅有产物示例外链（example.html 的 8 条 Google Fonts @import（fonts.googleapis.com）），属「產物示例」，按口径不判级，仅在此自证列出。宿主侧另需知悉：预览 iframe 用 sandbox="allow-scripts allow-same-origin"、本地 agent CLI 被 spawn（next/src/lib/agents/invoke.ts）、共享指令要求成稿引 CDN——这些是平台行为，只作说明。
5第二遍独立确认
- [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> 与事件处理器。
6结论
适合：适合观点输出、行业趋势、AI/职业判断类内容；适合既要发小红书又要拿去横版分享/投影的一稿两用场景；适合偏好高对比、信息密度大的编辑风作者。
不适合：不适合需要情绪疗愈调性的内容（请用 deck-xhs-pastel）；不适合严格品牌 VI（彩虹渐变会与多数品牌色冲突）；不适合数据图表密集型报告（无图表组件）；不适合黑白印刷（渐变与彩色条带在灰度下浑浊）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-xhs-white.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentcdf4726ef28078b6…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nexu-io / nexu-io/html-anything
原始 GitHubnexu-io/html-anything ↗
Stars8827
最近推送2026-09-15
本 skill commit
553ed98c28许可Apache-2.0（仓库根 LICENSE = Apache License 2.0；GitHub API license.spdx_id = Apache-2.0；next/package.json 亦声明 Apache-2.0）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。