1实现原理 · 为什么它能做到
横向翻页的实现是「一条 flex 轨道 + translateX(-idx*100vw)」：所有 slide 并排，翻页只是改 transform，配 700ms 过渡；比逐页 display 切换更顺滑，也让触摸拖动余量更大。
next/src/lib/templates/skills/deck-magazine-web/example.html
deck.style.transform = 'translateX(' + (-idx * 100) + 'vw)';
注：轨道式布局是横向 deck 的标准解法，本模板把它写死成 applySlide()
导航模型显式声明借用自同 repo 的 guizang-ppt 模板（同样的 flex track + translateX、同样的 key/wheel/touch handler），说明本模板是在既有实现上换皮而成。
next/src/lib/templates/skills/deck-magazine-web/example.html
* Navigation model is borrowed from skills/guizang-ppt — same flex
注：这是本批唯一在注释里标注「导航借自哪个模板」的文件，属于站内可追溯的复用链
版式语言来自 kami 设计系统：注释写明采用 kami token（暖羊皮纸底、墨蓝 accent、单字重衬线、不用斜体），并把宏 token 相对印刷基线放大约 1.6×、字距缩小约 0.6×。
next/src/lib/templates/skills/deck-magazine-web/example.html
* tokens are scaled × ~1.6 vs. print baseline; letter-spacing scaled
注：把「杂志感」锚定到一套外部设计 token（DESIGN.md §3），而不是凭感觉调参
与宿主有显式契约：注释指出 .slide.active 由 Open Design 的 host bridge（src/runtime/srcdoc.ts 的 findActiveByClass）读取来驱动页码，CSS 里没有任何规则引用它，并标注 load-bearing、不要删。
next/src/lib/templates/skills/deck-magazine-web/example.html
/* load-bearing: .slide.active is read by Open Design's host bridge
注：这是本批唯一写出「宿主会读我的某个 class」的模板，说明预览/发布链路是协同设计的
交互有节流锁：go(n) 在 lock 为真时直接返回，只有 wheel/key/touch 走 throttle，程序化同步（宿主消息、恢复初始页）绕过锁——避免快速输入在一次 700ms 过渡里连续加分页。
next/src/lib/templates/skills/deck-magazine-web/example.html
function go(n) {
注：把「输入节流」与「状态同步」分开，是这类自带 JS 的 deck 容易踩坑的地方
页面种类用 data-slide-kind 标注（cover / chapter / content / stats / quote / cta / end），示例 9 页覆盖封面、章节幕、正文、数据大字报、金句、CTA 与末期页——正好兑现 SKILL.md 的布局清单。
next/src/lib/templates/skills/deck-magazine-web/example.html
<section class='slide s-stats' data-slide-kind='stats'>
注：用 data-* 标注页型，便于宿主或后续脚本做统计与跳转
「数据大字报页」与「金句页」都落在示例里：stats 页是一个巨数字 + 一句解释，quote 页走 Sunday-paper 风的引文排版。
next/src/lib/templates/skills/deck-magazine-web/example.html
<section class='slide s-quote' data-slide-kind='quote'>
注：SKILL.md 的四类布局在示例中均可定位，不是纸上清单
运行时由宿主承担：模板目录无自带脚本文件，prompt 由宿主拼装后交本地 agent CLI；示例里的 JS 属产物内容。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
注：skill 目录仍是「文本模板 + 示例」，没有可执行资产
2核心能力
01横向 swipe HTML deck 定位（杂志 × e-ink 调）
02封面（衬线 display + WebGL 流体背景）
03章节幕封页
04数据大字报页（一个巨数字 + 一句解释）
05图片网格页
06金句页（Sunday-paper 风）
07键盘 ← / → 切换 + hash 同步
08进度条 + 导航圆点 + Escape 总览（示例实现）
09键盘完整集：方向键 / PageUp / PageDown / 空格 / Home / End
10单文件自包含（含样式与交互脚本）
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（Source Serif 4 / Source Sans 3 / JetBrains Mono） |
| network | Google Fonts 静态域（preconnect 预连接） |
| network | 产物示例 CTA 页的 GitHub 外链（指引用户去项目仓库 Star / 提 issue） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 宿主侧：预览 iframe 放宽沙箱 — template-picker.tsx 用 srcDoc + sandbox="allow-scripts allow-same-origin"；本模板产物含真实 JS，预览时会执行（自身只操作 DOM），沙箱放宽属宿主实现风险，不判档。
- 宿主侧：会 spawn 本地 agent CLI — convert 路由经 invokeAgent 以本地已登录 CLI 执行 prompt。
- 产物示例含多处外链 — 字体 @import/preconnect、CTA 的 GitHub 链接与共享指令的 cdn.tailwindcss.com：渲染时会有外部请求（见 security.reason）；离线场景需替换字体与 CTA 链接。
- 描述与示例有两处不符 — 「WebGL 流体背景」与「hash 同步」在示例中均未实现（见 second_pass）；展示层若照抄描述会失真。
- 自带 JS 的注入面 — 示例脚本用模板字符串拼接 HTML 并写 innerHTML（nav 圆点、页码等），但拼入的是内部生成的数字与固定文案，不含用户文本；真正渲染用户内容的是模型随后生成的 HTML，注入面由宿主沙箱承担。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（next/src/lib/templates/skills/deck-magazine-web/）：目录内只有 SKILL.md、example.html，无 .sh/.py/.mjs/.ts 等可执行文件、无 package.json、无安装脚本；目录内不含任何读取凭证 / 环境变量 / cookie 的代码，也没有写盘指令（HTML 由模型在回复正文输出，落盘由宿主前端负责）。example 里的 <script> 计数＝1（example.html×1）。SKILL.md 是纯版式 / 内容规范，未点名任何运行时要访问的生成后端或接口；按批4 口径（产物引用不判级、纯指令模板判 green），本模板属纯指令型。目录内实际出现的端点仅以下（均属产物示例或其元数据，由浏览器端拉取，非 skill 代码发起）：fonts.googleapis.com（见于 example.html）；fonts.gstatic.com（见于 example.html）；github.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] 「WebGL 流体背景」是否存在于示例 — 不存在。example.html 内 canvas / getContext / WebGL / shader 关键字计数为 0（文件里唯一 <script> 是翻页逻辑），封面是暖羊皮纸底 + 墨蓝章节页的静态排版。SKILL.md 的「WebGL 流体背景」在示例中未落地，属描述超出现有预览稿（宿主共享指令也禁止引用外部图片、优先 CSS/SVG 内联，实际生成时是否引入 WebGL 取决于模型与所加库）。
- [discrepancy] 「键盘 ← / → 切换; hash 同步」是否兑现 — 键盘兑现（方向键 / PageUp / PageDown / 空格 / Home / End 全套 + Escape 总览）；但示例脚本内没有 location.hash 读写，「hash 同步」这条在示例中未实现（截图与核对范围内未发现 hashchange 监听）。
- [ok] 导航是否真有节流 — go(n) 在 lock 为真时直接 return；滚动 / 键盘 / 触摸走 throttle，程序化同步绕过锁（注释说明原因）。
- [ok] 与宿主的 .slide.active 契约是否存在 — 注释声明 host bridge（src/runtime/srcdoc.ts findActiveByClass）读取该 class 驱动页码，并标注 load-bearing；宿主 deck.ts 亦按 <section class="slide"> 约定解析。
- [ok] 目录内是否有脚本文件 / 凭证读取 / 写盘 — 目录仅 SKILL.md + example.html 两个文件，无独立脚本文件；示例 JS 不读取 env / 凭证、不写盘、无 fetch/XHR 请求（唯一外链是 <link> 字体与 CTA 的 <a href>）。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-magazine-web，含 SKILL.md。
- [ok] README 收录一致性 — README deck 表列出 deck-magazine-web（Magazine-style web deck），与目录内容相符。
6结论
适合：适合讲品牌故事、行业观察、数据大字报、金句型分享等需要「杂志感 + 横向翻阅」的场合；也适合想要一份自带完整交互、可直接改内容的单文件 deck 参考实现。
不适合：不适合需要真实 WebGL / 流体动画的演示（示例无 canvas，须自行引入库，且宿主共享指令禁止外部图片）；不适合要求完全离线自包含的交付（产物含字体外链）；不适合需要 hash 深链定位的场景（示例未实现 hash 同步）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-magazine-web.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent44c08bb9682d2bdc…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 为实时上游，内容可能已更新。