Hubbestaiskill.com

Home / All Skills / Design & Motion / deck-blueprint

Design & Motion · nexu-io/html-anything

deck-blueprint

Cream paper + rust red + blueprint grid mask + hard-bordered cards + pipeline boxes

L1 Basic · Source registration onlyV1 Commit-PinnedDual-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

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

This template is a "layout checklist with locked values" rather than prose instructions: cream #F0EAE0 base, 48px blueprint grid mask, pipeline step boxes (one elevated), rust-red insight callout, large Playfair typography + SVG dashed feedback loop, and strictly mandated "zero gradients, zero soft shadows." The model receives a set of indisputable layout facts rather than room for free interpretation, ensuring consistent output style.

next/src/lib/templates/skills/deck-blueprint/SKILL.md

- 奶油 #F0EAE0 底 + 蓝图 48px 网格 mask

Constraint density is the core mechanism of this template—front-loading aesthetic decisions into constants so the model only handles content population.

The "blueprint grid" is realized via two lines of linear-gradient drawing 1px lines + 48px background-size, overlaid with a mask-image radial-gradient for edge feathering—pure CSS without requiring any image assets.

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%)}

Directly maps to the 48px / cream base specification in SKILL.md, serving as an executable implementation of the standard.

The "single elevated" hero step box = isomorphic box + rust-red fill + flex:1.25 expansion + translateY(-10px) offset + amplified box-shadow: emphasizing hierarchy through displacement rather than strokes, while maintaining a 2px black-bordered hard card.

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)}

Translates "which step in the pipeline is critical" into visual grammar without requiring extra legends or arrow annotations.

The "SVG dashed feedback loop" is an inline path + stroke-dasharray + marker-end arrow drawn on the right side of the code slide to convey "loop / feedback" semantics; the path trajectory is manually positioned using Q quadratic Bézier curves without graphic library dependencies.

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)"/>

Replaces graphic assets with geometric shapes: SKILL.md requires all diagrams to be drawn inline via CSS/SVG, and the example follows this strictly.

"Print-friendly" is not an adjective but functional CSS: in @media print, every .slide is forced visible, displacement is removed, page-break-after:always is applied, and height:100vh is enforced, directly turning a horizontal slide deck into a printable portrait document.

next/src/lib/templates/skills/deck-blueprint/example.html

.slide{position:relative;opacity:1!important;transform:none!important;page-break-after:always;height:100vh}

Validates the frontmatter's "print-friendly" positioning—the output doubles as a printable document.

The page skeleton is fixed to 8 slides: COVER / SECTION DIVIDER / CONTENT 2-col / CODE / DIAGRAM (SVG feedback loop) / STATS / CTA / THANKS, with footers featuring 01 / 08 formatted page numbers + uppercase hairline text.

next/src/lib/templates/skills/deck-blueprint/example.html

The example demonstrates all 8 common presentation slide layouts once, providing the model with a reusable library of slide templates.

Runtime execution is handled by the host: the template directory contains zero executable code; the prompt is assembled via assemblePrompt and passed to the local agent CLI, and deck pagination is parsed by the host deck viewer splitting <section class="slide">.

next/src/lib/agents/invoke.ts

import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";

The skill itself consists solely of prompt instructions and preview assets; execution and file persistence reside entirely on the host side.

2Core Capabilities

01Overall positioning for architecture / pipeline walkthrough decks (rigorous, print-friendly)

02Pipeline step boxes + single-item elevation to convey workflows and core steps

03Rust-red insight callout housing a key takeaway (narrow right-hand column)

04Big-number statistical slide (200px rust-red Playfair numerals)

05Dark code slide: 2px black border + beige text + JetBrains Mono

06Hard-edged card grid (2px black border + 12px border-radius + white background) carrying parallel key points

07Print / PDF export: @media print guarantees one screen per page and forced visibility

3External Dependencies

Kind	Dependency / Endpoint
network	Google Fonts（Playfair Display / Noto Serif SC / JetBrains Mono / Inter）
network	宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Register source and version

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt directives and rule text, without script execution or external impact

Audit Notes: Evaluation target = the skill directory itself (next/src/lib/templates/skills/deck-blueprint/): The directory contains only SKILL.md and example.html, with no executable files like .sh/.py/.mjs/.ts, no package.json, and no install scripts. It contains no code that reads credentials, environment variables, or cookies, nor any disk-writing directives (the HTML is output directly in the model response body, while persistence is handled by the host frontend). The <script> count in example.html is 0. SKILL.md is purely a layout/content specification that does not mention any generative backends or APIs to access at runtime; per batch 4 criteria (output references are not rated; pure instruction templates are rated green), this template is classified as a pure instruction template. The only endpoints actually present in the directory are the following (both belong to output examples or metadata pulled client-side by the browser, not initiated by skill code): fonts.googleapis.com (found in example.html) and www.w3.org (found in example.html). Host-side behavior is not evaluated in this tier and is documented separately under verdict.risks: the convert route spawns a local agent CLI and passes prompts via stdin (next/src/lib/agents/invoke.ts), shared instructions require CDN imports for Tailwind / Google Fonts (next/src/lib/templates/shared.ts), and preview iframes use sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).

5Second-Pass Verification

[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）。文档滞后，不影响模板行为。

6Verdict & Scenarios

High constraint density with minimal style drift

Print / export capable with zero external assets

Slide types cover the entire workflow of engineering explanations

Backed by shared content discipline guidelines

Best for: Ideal for external technical/architecture presentations: system architectures, data pipelines, launch reviews, and internal technical shares; also well-suited for scenarios requiring direct printing or PDF export (print-friendly + dedicated print stylesheets). Excellent experience for Chinese text (Noto Serif SC fallback).

Not for: Not suitable for occasions requiring high marketing impact (deliberately zero gradients, low saturation, no images, no animations); not suitable for image-heavy content (placeholder images forbidden, only CSS / SVG line art permitted); not suitable for long-form narrative documents (structured primarily around pipelines, cards, and metrics).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload deck-blueprint.tar.gz

sha256: 820effda4eea39de…

Option B · Copy Guide for Agent

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.