1实现原理 · 为什么它能做到
CRT 观感由三层绝对定位叠层实现：扫描线（repeating-linear-gradient 4px 周期 + mix-blend-mode:screen）、56px 赛博网格（mask 径向羽化）、暗角（radial-gradient 四角变黑）。全部是 CSS 图层，不需要贴图。
next/src/lib/templates/skills/deck-hermes-cyber/example.html
.tpl-hermes-cyber-terminal .hc-scanlines{position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(126,211,164,.025) 3px,rgba(126,211,164,.025) 4px);mix-blend-mode:screen}
注：三层各管一种老终端的视觉线索，叠起来才有 CRT 味；缺任一层都会塌成普通暗色页
网格层用 56px linear-gradient 画线 + radial mask 只在中心保留，正好兑现 SKILL.md 的「56px 赛博网格」。
next/src/lib/templates/skills/deck-hermes-cyber/example.html
.tpl-hermes-cyber-terminal .hc-grid{position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(126,211,164,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(126,211,164,.08) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 50%,black 30%,transparent 80%)}
注：数值与规范一致：56px 是 SKILL.md 明确写死的量
「窗口红绿灯 chrome + $ prompt 标题」＝三个圆点 span 由 nth-child 上色（#ff5f57 红 / #febc2e 黄 / 薄荷绿），标题左侧用 ::before 生成青色「$ 」前缀——纯 CSS 仿真终端窗口，零图标零 SVG。
next/src/lib/templates/skills/deck-hermes-cyber/example.html
.tpl-hermes-cyber-terminal .hc-prompt::before{content:'$ ';color:var(--hc-cyan)}
注：把「这是一个 CLI 会话」的隐喻编码进伪元素，资源成本为零
「blinking 光标」＝12px 竖条 + steps(2) 1s 无限动画（@keyframes hcBlink{50%{opacity:0}}），直接跟在标题文字后（HERMES AGENT / v0.9.2）。
next/src/lib/templates/skills/deck-hermes-cyber/example.html
.tpl-hermes-cyber-terminal .hc-cursor{display:inline-block;width:12px;height:1em;background:var(--hc-green);vertical-align:middle;margin-left:6px;animation:hcBlink 1s steps(2) infinite}
注：光标闪烁是「命令行正在运行」的最廉价可信信号，仅两行 CSS
「Stroke-only 柱状图」＝内联 SVG：柱体 fill 只用 15% / 12% 淡填充、stroke 用实色 1.5px 描边，坐标轴用 20% 透明线；两组色（薄荷绿 / 琥珀）区分被测对象。
next/src/lib/templates/skills/deck-hermes-cyber/example.html
<rect x="130" y="80" width="80" height="240" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
注：描边而非实心填充，既保持终端线性审美又避免大色块压过文字
「三档 tag」＝.hc-tag 默认绿 / .amber / .red 三种语义色，示例当「强度与风险」标签用（rust-core、mcp-native、72h-benchmark、honest-review），CTA 页的 needs-api-key 用 amber。
next/src/lib/templates/skills/deck-hermes-cyber/example.html
<span class="hc-tag red">honest-review</span>
注：标签体系是测评内容的元语言：绿＝卖点，琥珀＝注意，红＝实话
示例把「CLI / agent / dev tool 测评」叙事走全：封面 → 章节 → spec 卡片 → 代码 → CHART → STATS（benchmark n=48）→ CTA → THANKS，并放真实 trace 节选与 strong / weak points。
next/src/lib/templates/skills/deck-hermes-cyber/example.html
<h3 class="hc-h3" style="margin-top:12px">↓ 真实 trace (节选)</h3>
注：页序与测评体裁对齐：先立规格，再给 trace 与基准数据，最后给结论与安装方式
运行时由宿主承担：模板目录零可执行文件，prompt 由宿主拼装后交本地 agent CLI 执行。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
注：skill 本体只是 prompt + 预览素材
2核心能力
01CLI / agent / dev tool 测评 deck（含 trace、diff、benchmark）
02CRT 质感三层：扫描线 + 56px 网格 + 暗角
03终端窗口 chrome（红绿灯圆点）+ $ 命令行标题
04薄荷绿 #7ed3a4 大字 + JetBrains Mono（带霓虹 text-shadow）
05Stroke-only 柱状图 + 闪烁光标
06琥珀 / 绿 / 红三档 tag 标注强度与风险
07规范 / 指标卡片（lbl / val / desc 三段式）
08基准数据页（chart + 图例 + n=48 页脚）
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（JetBrains Mono / Inter / Noto Sans SC） |
| 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 在渲染时请求外网；离线时降级为系统字体。
- 示例内的测评数字无法回源 — 示例宣称的 trace / 48 任务 / benchmark 结果只出现在预览文案里（见 second_pass 的 unlocatable 项）；若被当成模板自带数据引用会误导。
- 暗色高饱和 + 发光在打印 / 浅色场景走样 — CRT 层、text-shadow 发光与 mix-blend-mode 打印时会丢失或变脏，不适合纸质输出。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（next/src/lib/templates/skills/deck-hermes-cyber/）：目录内只有 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第二遍独立确认
- [ok] 「56px 赛博网格」是否兑现 — .hc-grid 的 background-size:56px 56px + radial mask，与 SKILL.md 的 56px 逐字一致。
- [ok] 「blinking 光标」是否有真动画 — hc-cursor 使用 animation:hcBlink 1s steps(2) infinite，配套 @keyframes hcBlink{50%{opacity:0}}。
- [ok] 「Stroke-only 柱状图」是否真为描边 — SVG rect 的 fill 仅 15% / 12% 透明填充、stroke 实色 1.5px 描边；坐标轴为 20% 透明线。
- [unlocatable] 示例中的测评数据是否可回源核实（n=48、trace 节选） — 示例文案把「48 个任务的 PR 列表」「完整 trace」指向 github.com/lewis/hermes-review，仓库内无对应文件，无法回源核实；这些数字只存在于预览文案中，属示例内容而非模板规范，不代表模板会产出此类数据。
- [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-hermes-cyber，含 SKILL.md。
- [ok] README 收录一致性 — README deck 表列出 deck-hermes-cyber（Hermes Cyber neon-luxe），与目录内容相符。
6结论
适合：适合 CLI / agent / 开发工具测评与对比、技术选型分享、内部 dev-tool 汇报：需要「终端感 + 评测数据 + 结论三档」的场景。
不适合：不适合正式商务 / 印刷 / 浅色品牌场景（黑底霓虹、发光、混合模式在这些场合走样）；不适合教学讲义（无练习与目标页型）；不适合需要大量图片的内容（只有 SVG 图表能力）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-hermes-cyber.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent1065c8cc4396d02f…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 为实时上游，内容可能已更新。