デザイン&モーション · nexu-io/html-anything

deck-blueprint

クリームペーパー + ラストレッド + ブループリントグリッドマスク + 黒枠ハードカード + パイプラインボックス

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仕組みと動作原理

本テンプレートは散文的な説明ではなく「数値を固定したレイアウトチェックリスト」です:クリーム色 #F0EAE0 ベース、48px ブループリントグリッドマスク、パイプラインステップボックス(うち1つを強調隆起)、ラストレッドの insight callout、Playfair の大見出し + SVG 破線フィードバックループを採用し、「グラデーション禁止・ソフトシャドウ禁止」を明記しています。モデルには自由な解釈を許さない確定したレイアウト事実が渡されるため、出力スタイルが安定します。

next/src/lib/templates/skills/deck-blueprint/SKILL.md
- 奶油 #F0EAE0 底 + 蓝图 48px 网格 mask
制約の密度こそが本テンプレートのコアメカニズムです。美的判断をあらかじめ定数化し、モデルはコンテンツの流し込みのみを担当します。

「ブループリントグリッド」は linear-gradient 2行による 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 / クリーム色ベース指定と1対1で対応しており、仕様の実行可能な実装例となっています。

「1つだけ強調隆起させた」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)}
追加の凡例や矢印アノテーションを用いずに、「パイプラインのどのステップが重要か」を視覚言語へと変換しています。

「SVG 破線フィードバックループ」はインライン path + stroke-dasharray + marker-end 矢印で構成され、コードスライド右側に配置されて「ループ/フィードバック」のセマンティクスを表現します。パスの軌道は Q 2次ベジェ曲線によって手動で配置され、グラフィックライブラリに依存しません。

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 を適用し、横めくりスライドをそのまま印刷可能な縦型ドキュメントへと変換します。

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 ヘアラインを採用しています。

next/src/lib/templates/skills/deck-blueprint/example.html
<!-- 5. DIAGRAM - SVG feedback loop -->
サンプルでは解説でよく使われる 8 種のページタイプを網羅して実演し、再利用可能なスライドテンプレートライブラリをモデルに提供しています。

ランタイムはホスト側が担います:テンプレートディレクトリ内には実行可能コードが1行も存在せず、プロンプトは assemblePrompt によって構築されてローカルの agent CLI に渡され、スライドの分割はホストの deck viewer が <section class="slide"> を解析して行います。

next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
スキル自体はプロンプトとプレビュー用アセットに過ぎず、実行およびファイル保存はすべてホスト側で行われます。

2コア機能

01アーキテクチャ/パイプライン解説デッキとしての全体的位置付け(厳格、印刷親和性)
02パイプラインステップボックス + 単一要素の強調隆起によるフローおよび主要ステップの表現
03ラストレッドの insight callout による結論の提示(右側の狭小カラム)
04大数字統計スライド(200px ラストレッドの Playfair 数字)
05ダーク系コードスライド:2px 黒枠 + ベージュ文字 + JetBrains Mono
06ハードエッジカードグリッド(2px 黒枠 + 12px 角丸 + 白背景)による並列要点の提示
07印刷 / PDF エクスポート:@media print により1ページ1画面かつ強制可視化を保証

3外部依存関係

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

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルール記述テキストのみで構成され、スクリプト実行や外部への影響は皆無
監査ノート: 判定対象=スキル自身のディレクトリ(next/src/lib/templates/skills/deck-blueprint/):ディレクトリ内には SKILL.md と example.html のみが存在し、.sh/.py/.mjs/.ts などの実行可能ファイル、package.json、インストールスクリプトは一切含まれていません。クレデンシャル、環境変数、Cookie を読み取るコードはなく、ディスク書き込み指示もありません(HTML はモデルの応答本文に出力され、保存はホストのフロントエンド側が担当します)。example 内の <script> 数は 0 です。SKILL.md は純粋なレイアウトおよびコンテンツの仕様書であり、実行時にアクセスすべき生成バックエンドや API は指定されていません。バッチ4基準(成果物の参照先は判定対象外、純粋な指示テンプレートは green 判定)に基づき、本テンプレートは純粋指示型に分類されます。ディレクトリ内に実際に現れるエンドポイントは以下のみです(すべてブラウザ側で取得される成果物サンプルまたはメタデータに属し、スキルのコードが開始するものではありません):fonts.googleapis.com(example.html 内)、www.w3.org(example.html 内)。ホスト側の挙動は判定枠外であり、verdict.risks に別途記録されています:convert ルートがローカル agent CLI を spawn して stdin 経由でプロンプトを渡す処理(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結論

  • 制約密度が高く、スタイルのブレが極めて小さい
  • 外部リソースゼロで印刷・エクスポートが可能
  • エンジニアリング解説の全工程を網羅するページバリエーション
  • 共通コンテンツ規律によるセーフティネット
  • 最適な用途: エンジニアリング/アーキテクチャの対外解説に最適:システム構成、データパイプライン、リリース計画レビュー、社内技術共有など。直接の印刷や PDF エクスポートが必要なシーン(印刷対応+専用プリントスタイル)にも適しています。中国語テキストの表示品質も良好です(Noto Serif SC フォールバック)。
    不向きな用途: マーケティング的なインパクトが求められる場面には不向き(意図的なグラデーション排除、低彩度、画像・アニメーションなし);画像主体のコンテンツには不向き(プレースホルダー画像禁止、CSS / SVG による簡易描画のみ許可);長文のナラティブ形式の資料には不向き(パイプライン、カード、数値を主体とした構成)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-blueprint.tar.gz
    sha256: 820effda4eea39de…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.