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 的【布局】清单用「色值 + 字体 + 圆角 + 组件」四条钉死：奶油底 #fef8f1、三个柔光 blob、Playfair 斜体衬线标题、28px 圆角马卡龙卡片、Playfair 斜体 01-04 序号。
next/src/lib/templates/skills/deck-xhs-pastel/SKILL.md
- 奶油 #fef8f1 底 + 三个柔光 blob
注：同段还写明卡片配色池（桃/薄荷/天/紫/柠/玫）与顶栏 chip+page 结构，所以模型不需要「设计」，只需把用户内容填进这套已定的视觉系统。
卡片的 28px 圆角与柔光 blob 在 example.html 里落成可抄的具体 CSS：卡片 28px 圆角 + 0 14px 40px 柔影，blob 是三个带径向渐变的大圆 + 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}
注：blob 三条 CSS 分别是 420px 桃 / 360px 紫 / 260px 薄荷，均 radial-gradient(circle, var(--xp-*), transparent 70%)，透明度 .85、z-index 0，正文层 z-index 2 压在柔光之上——这就是「奶油底 + 柔光」观感的实现手法。
数字图形不靠图表库：一周时间分配用一个手写 SVG donut（多段 circle + stroke-dasharray 偏移）绘制，中心用 Playfair 数字标 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>
注：对应 SKILL.md 的「SVG donut 图」，说明模板在无 JS、无图表 CDN 的前提下也能出数据页；各段颜色取卡片的深色版 token（--xp-*-d）。
页数不由模板写死：共享指令要求「内容驱动数量」，模板只提供可复用版式池。
next/src/lib/templates/shared.ts
模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
注：example.html 是 8 页样例（封面 01 · 08 → 章节 02 · 08 → 2x2 卡片 03 → 引言 04 → prompt 代码 05 → donut 图 06 → CTA 07/08），页脚与顶栏页码都随实际页数改写；用户内容长则应更多页。
服务端 /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（封面 + 章节 + 卡片 + 引言 + 代码 + 数据图 + CTA）
02三团柔光 blob 营造奶油氛围底，正文层压在柔光之上保证可读
03马卡龙圆角卡片池（桃/薄荷/天/紫/柠/玫）承载并列要点，深色版 token 供文字/图例取色
04Playfair Display 斜体做 display 与 01-04 序号，正文走 sans（Inter / Noto Sans SC），衬线/无衬线分工明确
05chip + page 顶栏与「NN · 总页数」页脚页码，逐页可核对顺序
06纯 CSS/SVG 数据图：donut 用 stroke-dasharray 分段，无图表库依赖
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 氛围化配色牺牲对比度 — 奶油底 + 浅马卡龙卡片上的深色 token 才达标，若模型把正文直接放在浅粉/浅柠卡片上，对比度可能跌破 4.5；需人工检查。
- 装饰性固定元素与长内容冲突 — 三团 blob 是绝对定位、尺寸写死，页数增多或文字变长时可能压到卡片边缘，需在扩页时保留 76px/90px 内边距纪律。
- 依赖宿主播放器 — 样例 .slide 用 100vw/100vh 全屏并假定宿主提供 ←/→ 翻页与 deck 模式；脱离 html-anything 平台单独打开时，多页会堆叠为长页（样例末尾另有 @media print 规则兜底）。
- 用户内容逐字进 prompt — 用户粘贴的文本若含越权指令，可能改写模板风格或把外链/脚本带进成稿；属宿主通用注入面。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（SKILL.md + example.html/example.md，本目录零脚本、零凭证读取、零写盘指令、无网络调用代码）。按批4 终版口径，html-anything 模板一律 green：SKILL.md 全文未点名任何运行时服务后端/API，也不把用户素材送外部生成后端（无 orange 要件）；无逆向/冒充/绕过后端（无 red 要件）。目录内实际出现的端点仅有产物示例外链（example.html 的 Google Fonts @import（fonts.googleapis.com，8 族字体）与本 skill 无关的 w3.org SVG 命名空间），属「產物示例」，按口径不判级，仅在此自证列出。宿主侧另需知悉：预览 iframe 用 sandbox="allow-scripts allow-same-origin"、本地 agent CLI 被 spawn（next/src/lib/agents/invoke.ts）、共享指令要求成稿引 CDN——这些是平台行为，只作说明。
5第二遍独立确认
- [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 逐字相同。
6结论
适合：适合生活方式、个人成长、情绪向内容的 16:9 分享 deck；也适合不会设计但要稳定产出「小红书/朋友圈稿」的个人创作者与自媒体；中文长文改 deck 时最能省时间。
不适合：不适合严肃财报、技术规格、需要精确数据表与坐标轴的场景（柔光背景与 28px 圆角会削弱严肃感）；不适合需要像素级品牌规范或企业 VI 强约束的场合；也不适合期望模板自带交互脚本（翻页/导出由宿主提供）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-xhs-pastel.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agente9e5fecb3c98880a…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 为实时上游，内容可能已更新。