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外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（Playfair Display / Noto Serif SC / JetBrains Mono / Inter） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
可自动加载
面向管理者
登记来源与版本
判定依据（文件路径与关键语句摘要）
- SKILL.md: 纯提示词指令与规则文本，无脚本执行与外部影响
审计说明： 。判级对象＝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 / 卡片 / 数字为主）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-blueprint.tar.gz
sha256:
Option B · Copy Guide for Agent820effda4eea39de…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.