1实现原理 · 为什么它能做到
配色规则不是「选一个主色」而是「每页一个色，从 8 色调色板循环取，同色可复用」——于是全篇节奏由背景色更替承担，而不是靠排版层级。
next/src/lib/templates/skills/deck-dir-key-nav/SKILL.md
- 页数由【用户内容】决定 (短内容 8 页起步, 长内容应更多); 每页单色背景, 从下列调色板里循环选取 (靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭), 同色可复用
注：把「换页」编码成「换底色」，这是本模板最省力的节奏机制
8 个调色板落成 8 个 .t-* 类（t-indigo/t-cream/t-crimson/t-emerald/t-slate/t-violet/t-white/t-charcoal），且每类单独定义 .dk-accent 前景色，保证强调色在深色与浅色底上都可读。
next/src/lib/templates/skills/deck-dir-key-nav/example.html
.tpl-dir-key-nav-minimal .t-cream .dk-accent{color:#B5392A}
注：浅底（cream/white）配深 accent（#B5392A / #6366f1），深底配浅 accent——对比度不靠模型临时判断
「160px display 标题 + 4px accent 线」落成 .dk-h0{font-size:160px;letter-spacing:-5px} 与 .dk-line{width:90px;height:4px;background:currentColor}——线只有一条，是全模板唯一的装饰元素。
next/src/lib/templates/skills/deck-dir-key-nav/example.html
.tpl-dir-key-nav-minimal .dk-h0{font-size:160px;font-weight:900;line-height:.9;letter-spacing:-5px;margin:0 0 20px}
注：字号与线宽都在 SKILL.md 里锁死，示例逐字兑现
「箭头 → 前缀的 Mono 列表」＝ul.dk-list 用等宽字体 + li::before{content:'→'} 悬挂缩进：列表符号由伪元素生成，不占内容 DOM。
next/src/lib/templates/skills/deck-dir-key-nav/example.html
.tpl-dir-key-nav-minimal .dk-list li::before{content:'→';position:absolute;left:0;opacity:.5}
注：等宽 + 箭头让极简页面仍保留「这是清单」的语义
导航有两个常驻元素：左下 .dk-keyhint（kbd 胶囊写「← → space」，末页写「press ← to rewind · F for fullscreen」）与右下 .dk-page 页码，均用 var(--dk-mono) 小字、45% 透明。
next/src/lib/templates/skills/deck-dir-key-nav/example.html
<div class="dk-keyhint">nav · <kbd>←</kbd> <kbd>→</kbd> · <kbd>space</kbd></div>
注：键盘提示与页码是页面的一部分而非浮层：保持极简但可发现
example.html 末尾额外写了一段「静态预览兜底」CSS：因为目录里没有 runtime.js，于是把所有 slide 设为可见、relative、height:100vh——预览因此是长页而非翻页。
next/src/lib/templates/skills/deck-dir-key-nav/example.html
/* Static-preview fallback (runtime.js is absent — keep every slide visible) */
注：这解释了本批多个 example.html 为何零 JS：预览靠静态兜底，交互留给发布时注入的 runtime
运行时仍在宿主侧：模板目录零可执行文件；prompt 由 assemblePrompt 拼装、交本地 agent CLI 执行，deck 分页由宿主拆 <section class="slide">。
next/src/lib/templates/shared.ts
export function assemblePrompt(opts: {
注：skill 本体只是 prompt + 静态预览
2核心能力
01极简 keynote 定位：「有话要说但没什么可看」
028 色单色背景循环 + 每色配对的 accent 前景色
03160px 巨字主张页
044px 短粗 accent 线（唯一装饰元素）
05等宽字体 + → 悬挂缩进列表
06左下 kbd 导航提示 + 右下页码
07240px 巨数字页（等宽字形）
08末页的 rewind / fullscreen 提示（kbd F）
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（Inter / Noto Sans SC / JetBrains Mono） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 宿主侧：预览 iframe 放宽沙箱 — srcDoc + sandbox="allow-scripts allow-same-origin"（template-picker.tsx），同源脚本可自行摘除沙箱；宿主实现风险，非模板行为。
- 宿主侧：会 spawn 本地 agent CLI — convert 路由经 invokeAgent 用本地 CLI 执行 prompt。
- 产物示例含 CDN 外链 — 字体 @import 与共享指令的 cdn.tailwindcss.com 在渲染时请求外网。
- 极简模板的表现力上限 — 禁用图片与图表后，数据只能靠巨数字与箭头列表承载，信息密度低；对内容本身的质量要求高。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（next/src/lib/templates/skills/deck-dir-key-nav/）：目录内只有 SKILL.md、example.html，无 .sh/.py/.mjs/.ts 等可执行文件、无 package.json、无安装脚本；目录内不含任何读取凭证 / 环境变量 / cookie 的代码，也没有写盘指令（HTML 由模型在回复正文输出，落盘由宿主前端负责）。example 里的 <script> 计数＝0。SKILL.md 是纯版式 / 内容规范，未点名任何运行时要访问的生成后端或接口；按批4 口径（产物引用不判级、纯指令模板判 green），本模板属纯指令型。目录内实际出现的端点仅以下（均属产物示例或其元数据，由浏览器端拉取，非 skill 代码发起）：fonts.googleapis.com（见于 example.html）。宿主侧行为不判档，另记于 verdict.risks：convert 路由 spawn 本地 agent CLI 并以 stdin 传 prompt（next/src/lib/agents/invoke.ts）、共享指令要求 CDN 引入 Tailwind / Google Fonts（next/src/lib/templates/shared.ts）、预览 iframe 用 sandbox="allow-scripts allow-same-origin"（next/src/components/template-picker.tsx）。
5第二遍独立确认
- [discrepancy] 「单色背景」是否真为纯色 — 多数（indigo / crimson / emerald / slate / violet / charcoal）实为同色系 linear-gradient(135deg,…) 渐变，仅 t-cream（#F5F0E8）与 t-white 为纯色。属措辞宽泛：仍是「每页一个色系」，不影响观感与机制。
- [ok] 160px / 4px 是否兑现 — .dk-h0 font-size:160px；.dk-line width:90px; height:4px——与 SKILL.md 数值逐字一致。
- [ok] kbd 提示是否只出现在首末页 — 首题页（nav · ← → · space）与末页（press ← to rewind · F for fullscreen）各一处，正文页无。
- [ok] 目录内是否有脚本 / 网络调用 / 凭证读取 — 目录仅 SKILL.md + example.html；<script> 计数 0；无 fetch/XHR/env/写盘代码。
- [ok] 静态预览兜底注释是否与事实相符 — 注释声明 runtime.js is absent，目录内确实不存在 runtime.js；HTML 也无任何 <script src>。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-dir-key-nav，含 SKILL.md。
- [ok] README 收录一致性 — README deck 表列出 deck-dir-key-nav（Directional key-nav deep browse），与目录内容相符。
6结论
适合：适合「一句话一个观点」的短演讲、内部宣讲、个人观点 / 作品分享、无素材可放的纯文字场合；也适合需要键盘 / 触屏翻页的投屏演示。
不适合：不适合需要图片、图表、复杂数据或品牌视觉的汇报（模板几乎不给图形能力，唯一图形是 4px 线）；不适合长内容（160px 单页字号意味着每页只放一句话）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-dir-key-nav.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentc67ac120d2a37bce…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, Version 2.0；GitHub API license.spdx_id = Apache-2.0；模板目录内无独立 LICENSE 文件）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。