1仕組みと動作原理
本テンプレートは散文的な説明ではなく「数値を固定したレイアウトチェックリスト」です:クリーム色 #F0EAE0 ベース、48px ブループリントグリッドマスク、パイプラインステップボックス(うち1つを強調隆起)、ラストレッドの insight callout、Playfair の大見出し + SVG 破線フィードバックループを採用し、「グラデーション禁止・ソフトシャドウ禁止」を明記しています。モデルには自由な解釈を許さない確定したレイアウト事実が渡されるため、出力スタイルが安定します。
- 奶油 #F0EAE0 底 + 蓝图 48px 网格 mask
「ブループリントグリッド」は linear-gradient 2行による 1px 描画線 + 48px background-size で実装され、さらに mask-image radial-gradient を重ねてエッジをフェザー処理しています。画像リソースを一切必要としない純粋な CSS 表現です。
.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%)}
「1つだけ強調隆起させた」hero ステップボックス=同構造のボックス + ラストレッド塗りつぶし + flex:1.25 幅拡張 + translateY(-10px) のグリッド脱出 + 拡大ドロップシャドウ:境界線ではなく位置変位で重点を表現しつつ、2px 黒枠ハードカードの一貫性を維持しています。
.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)}
「SVG 破線フィードバックループ」はインライン path + stroke-dasharray + marker-end 矢印で構成され、コードスライド右側に配置されて「ループ/フィードバック」のセマンティクスを表現します。パスの軌道は Q 2次ベジェ曲線によって手動で配置され、グラフィックライブラリに依存しません。
<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)"/>
「印刷親和性」は形容詞ではなく機能する CSS です:@media print 内で各 .slide の強制可視化、変位のリセット、page-break-after:always、height:100vh を適用し、横めくりスライドをそのまま印刷可能な縦型ドキュメントへと変換します。
.slide{position:relative;opacity:1!important;transform:none!important;page-break-after:always;height:100vh}
ページ骨格は固定 8 ページで構成されます:COVER / SECTION DIVIDER / CONTENT 2-col / CODE / DIAGRAM(SVG フィードバックループ)/ STATS / CTA / THANKS。フッターには 01 / 08 形式のページ番号 + uppercase ヘアラインを採用しています。
<!-- 5. DIAGRAM - SVG feedback loop -->
ランタイムはホスト側が担います:テンプレートディレクトリ内には実行可能コードが1行も存在せず、プロンプトは assemblePrompt によって構築されてローカルの agent CLI に渡され、スライドの分割はホストの deck viewer が <section class="slide"> を解析して行います。
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts(Playfair Display / Noto Serif SC / JetBrains Mono / Inter) |
| network | 宿主共享指令声明的 Tailwind CDN(宿主侧要求,非本模板要求) |
4推奨統制措置と判定根拠
- SKILL.md: 純粋なプロンプト指示およびルール記述テキストのみで構成され、スクリプト実行や外部への影響は皆無
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結論
820effda4eea39de…