首页 / 全部技能 / 设计 / deck-dir-key-nav
设计 · nexu-io/html-anything

deck-dir-key-nav

8 页单色背景, 160px display + 4px accent + Mono 箭头列表

L1 基础 · 登记来源即可V1 已固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE = Apache License, Version 2.0;GitHub API license.spdx_id = Apache-2.0;模板目录内无独立 LICENSE 文件)Commit 553ed98c28
管控等级描述 skill 的能力与建议配套的管控措施,不代表质量或安全认证,也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同,请勿假定宿主一定会提供安全兜底。第三方 skill 版权归原作者,使用风险由使用者自行承担。

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外部依赖

KindDependency / Endpoint
networkGoogle Fonts(Inter / Noto Sans SC / JetBrains Mono)
network宿主共享指令声明的 Tailwind CDN(宿主侧要求,非本模板要求)

4管控建议与判定依据

建议配套管控措施
面向 Agent
可自动加载
面向管理者
登记来源与版本
判定依据(文件路径与关键语句摘要)
  • SKILL.md: 纯提示词指令与规则文本,无脚本执行与外部影响
审计说明: 。判级对象=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 单页字号意味着每页只放一句话)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-dir-key-nav.tar.gz
    sha256: c67ac120d2a37bce…
    Option B · Copy Guide for Agent
    install.json
    agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.