1实现原理 · 为什么它能做到
封面由三层叠加构成：160° 深夜渐变底（#08080f→#0e1020→#08080f）+ 三个 blur 光球 + 一层 SVG 连线图谱，全部写在 CSS/SVG 里，不需要图片素材。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .slide{background:linear-gradient(160deg,#08080f,#0e1020 50%,#08080f);color:var(--gd-text);padding:64px 88px;overflow:hidden}
注：「AI-native / dev-tool launch」的观感来自这三层叠加，而非某张背景图
「漂浮 orbs」的实现是 radial-gradient 圆 + filter:blur(110px) + 22s ease-in-out 交替动画（三球错开 delay）：纯 CSS 动画，无 canvas、无 WebGL。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.35;animation:gdDrift 22s ease-in-out infinite alternate}
注：同 repo 大量模板用同一手法做环境光，成本极低且不阻塞主线程
「SVG 力导向图谱」实际是一张手摆坐标的静态 SVG（line 与 circle 固定 x/y，注释自称 live force-directed），文件内没有任何布局计算：力导向只是视觉造型。
next/src/lib/templates/skills/deck-graphify-dark/example.html
<!-- live force-directed graph bg -->
注：这是本模板唯一与描述有出入之处——见 verification.second_pass 的 discrepancy 项
「彩虹渐变标题」由 8 段色标 linear-gradient + background-clip:text + 4s 线性动画轮转 200% 背景实现，文字本身透明只留渐变。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-rainbow{background:linear-gradient(90deg,#ff0080,#ff4d00,#ff9900,#ffe600,#00c853,#0091ea,#6200ea,#ff0080);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gdRainbow 4s linear infinite}
注：这是本批唯一使用彩虹渐变的标题手法，与暗底高对比搭配承担 section 页的视觉重音
「Glassmorphism 卡片页」＝半透明白底 3% + 1px 白边 10% + backdrop-filter:blur(20px) saturate(160%) + 顶部 50% 渐变高光 + 内描边投影。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-glass{position:relative;overflow:hidden;border-radius:20px;padding:22px 26px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
注：玻璃卡片让暗底上的信息块自成语义层，同时把 orbs 的模糊环境透上来
CLI 命令展示＝JetBrains Mono 32px 绿色字 + 双层 text-shadow（30px / 60px）做霓虹发光，是「dev tool launch」调性的核心道具。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-cmd{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;color:var(--gd-green);text-shadow:0 0 30px rgba(126,211,164,.45),0 0 60px rgba(126,211,164,.15);letter-spacing:-.01em}
注：把「这条命令很重要」编码为发光强度，而非加边框或底色
示例 8 页：COVER / SECTION DIVIDER / CONTENT（plugin grid）/ CODE / CHART（race diagram）/ PIPELINE / CTA / THANKS；桌面网格用 gd-grid-3 与 gd-grid-4 三列四列。
next/src/lib/templates/skills/deck-graphify-dark/example.html
<!-- 5. CHART — race diagram -->
注：页型覆盖 dev-tool launch 的讲解顺序：定位 → 能力 → 安装 → 数据 → 流程 → 行动
运行时由宿主承担：模板目录零可执行文件，prompt 由 assemblePrompt 拼装后交本地 agent CLI 执行。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
注：skill 本体只是 prompt + 预览素材
2核心能力
01AI-native / 知识图谱 / dev-tool launch 定位
02封面：深夜渐变 + 漂浮 blur orbs + SVG 图谱背景
03Section 页：彩虹渐变大标题
04代码 / CLI 页：JetBrains Mono + 霓虹发光
05Glassmorphism 卡片页
06三列 / 四列桌面网格（插件、特性清单）
07胶囊标签（gd-tag）做关键词标注
08SVG 连线图谱作背景装饰（line + circle 手摆坐标）
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（JetBrains Mono / Inter / Noto Sans SC / Space Grotesk） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 宿主侧：预览 iframe 放宽沙箱 — template-picker.tsx 用 srcDoc + sandbox="allow-scripts allow-same-origin"；同源脚本可自行摘除沙箱，属宿主实现风险，不判档。
- 宿主侧：会 spawn 本地 agent CLI — convert 路由经 invokeAgent 以本地已登录 CLI 执行 prompt。
- 产物示例含 CDN 外链 — 字体 @import 与共享指令的 cdn.tailwindcss.com 在渲染时请求外网。
- 描述性夸张会影响预期 — 「力导向」实为静态手摆 SVG；若用户按 SKILL.md 期待动态图谱会失望。展示层宜按实测描述呈现。
- backdrop-filter 的性能与打印 — 玻璃卡片在低端设备 / 长页滚动时开销较高，且打印与 PDF 会丢失背景模糊效果。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（next/src/lib/templates/skills/deck-graphify-dark/）：目录内只有 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] 「SVG 力导向图谱」是否真为力导向布局 — 否。示例是手摆固定坐标的 <line>/<circle>（如 <line x1="300" y1="200" x2="520" y2="340"/>），文件内没有 d3-force / requestAnimationFrame / 任何布局计算，注释 <!-- live force-directed graph bg --> 属描述性夸张（视觉上是「无序连线 + 节点」的图谱造型）。对产出无实际影响，但描述与实现不符。
- [ok] 「漂浮 orbs」是否真是动画 — gd-orb 带 filter:blur(110px) 与 animation:gdDrift 22s ease-in-out infinite alternate，三球错开 delay（gd-orb-2 / gd-orb-3 各有 animation-delay）。
- [ok] 「彩虹渐变标题」是否存在 — gd-rainbow 的 8 段色标 + background-clip:text + gdRainbow 4s 动画。
- [ok] 「Glassmorphism 卡片」是否有真实现 — gd-glass 使用 backdrop-filter:blur(20px) saturate(160%) 与半透明描边、内高光。
- [ok] 目录内是否有脚本 / 网络调用 / 凭证读取 — 目录仅 SKILL.md + example.html；<script> 计数 0；无 fetch/XHR/env/写盘代码；无凭证读取。
- [ok] SKILL.md 是否要求运行时外链 — SKILL.md 只列色值与页型（无 URL）；字体 @import 属 example.html（产物示例）。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-graphify-dark，含 SKILL.md。
- [ok] README 收录一致性 — README deck 表列出 deck-graphify-dark（Dark, data-graphic-heavy deck），与目录内容相符。
6结论
适合：适合 AI-native 产品、dev tool / CLI 的发布或技术宣讲：暗色 + 霓虹 + 图谱造型能撑起「基础设施感」，且天然容纳插件网格、命令、数据对比。
不适合：不适合正式商务 / 印刷场景（暗底高饱和、玻璃与霓虹在打印时严重走样）；不适合浅色品牌视觉（模板硬编码暗色）；不适合要求「图谱真实动态渲染」的演示（示例为静态 SVG）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-graphify-dark.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agenta286c3d514e66d5b…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 为实时上游，内容可能已更新。