1实现原理 · 为什么它能做到
本模板是一份「锁死数值的版式清单」而非散文说明：奶油 #F0EAE0 底、48px 蓝图网格 mask、pipeline 步骤盒（其一抬高）、锈红 insight callout、Playfair 大字 + SVG 虚线反馈环，并明令「零渐变零软阴影」。模型拿到的是一组不容自由发挥的版面事实，所以输出风格稳定。
next/src/lib/templates/skills/deck-blueprint/SKILL.md
- 奶油 #F0EAE0 底 + 蓝图 48px 网格 mask
注：约束密度就是本模板的核心机制——把审美决策前置成常量，模型只负责填内容
「蓝图网格」由两行 linear-gradient 画 1px 线 + 48px background-size 实现，再叠 mask-image radial-gradient 做边缘羽化——纯 CSS，不需要任何图片资源。
next/src/lib/templates/skills/deck-blueprint/example.html
.tpl-knowledge-arch-blueprint .kb-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(26,26,26,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,26,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center,black 40%,transparent 85%)}
注：与 SKILL.md 的 48px / 奶油底一一对应，是规范的可执行实现
「其中一个抬高」的 hero 步骤盒＝同构盒子 + 锈红填充 + flex:1.25 加宽 + translateY(-10px) 脱格 + 放大投影：用位移而非描边制造重点，且仍是 2px 黑边硬卡片。
next/src/lib/templates/skills/deck-blueprint/example.html
.tpl-knowledge-arch-blueprint .kb-step.hero{background:var(--kb-rust);border-color:var(--kb-rust);color:#fff;flex:1.25;box-shadow:0 10px 32px rgba(181,57,42,.28);transform:translateY(-10px)}
注：把「pipeline 里哪一步是核心」变成视觉语法，不需要额外图例或箭头注释
「SVG 虚线反馈环」是内联 path + stroke-dasharray + marker-end 箭头，画在代码页右侧表达「循环 / 回灌」语义；环的走向由 Q 二次贝塞尔手工摆位，不依赖图形库。
next/src/lib/templates/skills/deck-blueprint/example.html
<path d="M 940 180 Q 940 80, 670 80 Q 400 80, 400 180" fill="none" stroke="#B5392A" stroke-width="2" stroke-dasharray="6 6" marker-end="url(#arrow-r)"/>
注：用几何图形替代示意图资源：SKILL.md 要求所有图以 CSS/SVG 内联描绘，示例照着做
「印刷友好」不是形容词而是 CSS：@media print 里每个 .slide 强制可见、去位移、page-break-after:always、height:100vh，把横向翻页 deck 直接变成可打印的纵向文档。
next/src/lib/templates/skills/deck-blueprint/example.html
.slide{position:relative;opacity:1!important;transform:none!important;page-break-after:always;height:100vh}
注：印证 frontmatter 的「印刷友好」定位——产物同时是可打印文档
页面骨架固定 8 页：COVER / SECTION DIVIDER / CONTENT 2-col / CODE / DIAGRAM（SVG 反馈环）/ STATS / CTA / THANKS，页脚用 01 / 08 形式页码 + uppercase hairline。
next/src/lib/templates/skills/deck-blueprint/example.html
<!-- 5. DIAGRAM - SVG feedback loop -->
注：示例把 8 种常见讲解页型各演示一次，给模型一份可复用的页型库
运行时由宿主承担：模板目录里没有一行可执行代码，prompt 由 assemblePrompt 拼装后交给本地 agent CLI，deck 分页由宿主 deck viewer 拆 <section class="slide">。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
注：skill 本身只是 prompt + 预览素材，执行与落盘都在宿主侧
2核心能力
01架构 / pipeline 讲解 deck 的整体定位（认真的、印刷友好）
02pipeline 步骤盒 + 单点抬高，表达流程与核心步骤
03锈红 insight callout 承载一条结论（右侧窄栏）
04大数字统计页（200px 锈红 Playfair 数字）
05深色代码页：2px 黑框 + 米色字 + JetBrains Mono
06硬边卡片网格（2px 黑边 + 12px 圆角 + 白底）承载并列要点
07打印 / PDF 导出：@media print 每页一屏且强制可见
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（Playfair Display / Noto Serif SC / JetBrains Mono / Inter） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 宿主侧：预览 iframe 放宽沙箱 — template-picker.tsx 用 srcDoc + sandbox="allow-scripts allow-same-origin" 渲染预览；同源脚本理论上可自行摘除 sandbox。属宿主实现风险，非本模板行为，不判档。
- 宿主侧：会 spawn 本地 agent CLI — convert 路由调用 invokeAgent（node:child_process spawn），以本地已登录的 CLI 执行 prompt；权限边界由宿主与 CLI 决定。
- 产物示例含 CDN 外链 — example.html 的字体 @import 与共享指令里的 cdn.tailwindcss.com 会在浏览器渲染时发出请求；不影响离线可用性（字体降级），但预览页并非完全无网。
- 规范与预览稿存在轻度不一致 — SKILL.md 的「零渐变零软阴影」在 example.html 未完全兑现（hero / insight 带软阴影）。展示层若把示例当规范会误读。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（next/src/lib/templates/skills/deck-blueprint/）：目录内只有 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）；www.w3.org（见于 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] SKILL.md 的「零渐变零软阴影」是否被 example.html 遵守 — 未完全遵守：示例中 .kb-insight 用 box-shadow:0 8px 24px rgba(181,57,42,.22)、.kb-step.hero 用 box-shadow:0 10px 32px rgba(181,57,42,.28)，属软阴影；网格线亦由 linear-gradient 画出（技术手段，非装饰渐变）。属规范与预览稿的轻度不一致，不影响模板机制。
- [ok] 48px 网格 mask 是否有实现 — kb-grid-bg 的 background-size:48px 48px + mask-image radial-gradient，与 SKILL.md 的「48px 蓝图网格 mask」逐字对应。
- [ok] 「SVG 虚线反馈环」是否真为 SVG（非位图） — 内联 <svg> 内 path + stroke-dasharray="6 6" + marker-end，无外部图片引用。
- [ok] 目录内是否有脚本 / 网络调用 / 凭证读取 — 目录仅 SKILL.md + example.html 两个文件；example.html 的 <script> 计数为 0，无 fetch/XHR/localStorage/env 访问；无网络请求代码、无凭证读取、无写盘代码。
- [ok] SKILL.md 是否要求运行时外链 — SKILL.md 只写字族名（Playfair serif，无 URL）与 hex，全文无 URL；example.html 的字体 @import 属产物示例。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 一致）；skill.path = next/src/lib/templates/skills/deck-blueprint，目录内含 SKILL.md。
- [discrepancy] README 对 deck 收录数量的描述 — README「### Decks (deck mode, 20 skills)」标注 20，但该 pin 下 skills/ 内实际有 21 个 deck-* 目录（多出 deck-ljg-present）。文档滞后，不影响模板行为。
6结论
适合：适合工程 / 架构类对外讲解：系统架构、数据 pipeline、上线方案评审、内部技术分享；也适合需要直接打印或导 PDF 的场景（印刷友好 + 打印样式）。中文内容体验好（Noto Serif SC 兜底）。
不适合：不适合需要营销冲击力的场合（刻意零渐变、低饱和、无图无动效）；不适合图像密集型内容（禁用占位图，只允许 CSS / SVG 简笔）；不适合长文叙述型材料（以 pipeline / 卡片 / 数字为主）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-blueprint.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent820effda4eea39de…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 为实时上游，内容可能已更新。