1实现原理 · 为什么它能做到
底色直接借用 GitHub Dark 色板（#0d1117 底 / #161b22 面 / #30363d 边），因此代码块、状态色与开发者视觉惯性天然对齐，不需要重新发明暗色体系。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
--oc-bg:#0d1117;
注：借用既有产品色板是低成本高辨识的做法：目标读者的眼睛已经熟悉这套对比度
「紫蓝环境光」＝两层 radial-gradient 叠加（紫 at 28%/38%、蓝 at 72%/62%），分别从左上与右下打光，形成对角氛围而不是均匀渐变。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-cbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 28% 38%,rgba(124,58,237,.25) 0%,transparent 60%),radial-gradient(ellipse at 72% 62%,rgba(88,166,255,.18) 0%,transparent 60%)}
注：两盏位置错开的光比单层渐变更有体积感，且不干扰中心文字对比度
「60px 网格 mask」＝两向 1px 线（#30363d 40%）+ 60px 间距 + radial mask 只留中心，与 SKILL.md 写死的 60px 一致。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-cgrid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(48,54,61,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(48,54,61,.4) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 35%,transparent 80%)}
注：网格参与构成「工程感」，但用 mask 压到边缘渐隐，避免抢正文
「三色渐变标题」＝linear-gradient(135deg,#a855f7 → #60a5fa → #34d399) + background-clip:text，紫→蓝→薄荷绿三段正好是 Claude / 开发者生态的常见配色。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-g{background:linear-gradient(135deg,#a855f7 0%,#60a5fa 55%,#34d399 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
注：渐变只作用于标题文字，正文保持纯色——把「重点」限制在一处，避免整页花
「GitHub 风代码 + 紫色左边框高亮块」：代码块用 #010409 深底 + 四类 token 类（.cp 绿 / .cc 蓝 / .ca 紫 / .cm 暗灰），对应 GitHub 的语法配色习惯。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-code{background:#010409;border:1px solid var(--oc-border);border-radius:12px;padding:20px 24px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.85;width:100%;max-width:860px;text-align:left;color:#e6edf3}
注：代码是这类教程 deck 的主体内容，配色照抄熟悉方案能显著降低阅读成本
「紫色 pill tag」＝胶囊标签 + 半透明紫底（rgba(124,58,237,.14)）+ 1px 紫边，用于标注主题（MCP / agent 等）；另有四色 badge（.oc-bp/.oc-bb/.oc-bg/.oc-bo）做状态标注。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oc-accent3);background:rgba(124,58,237,.14);border:1px solid rgba(168,85,247,.3);padding:5px 16px;border-radius:999px;margin-bottom:22px}
注：标签是教程 deck 的导航锚点：读者靠 pill 判断「这页讲哪块」
页面骨架是「教程结构」而非「产品推介」：COVER / SECTION / 对比卡 / 步骤页 / 代码页 / STATS / QUOTE-CTA / THANKS，示例内容是把 Obsidian 接到 Claude Desktop 的 MCP 配置教程。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
<!-- 3. CONTENT — compare cards -->
注：frontmatter 的 scenario: engineering 与 tags（github, dark, purple, mcp, agent）落到了实际内容类型上
运行时由宿主承担：模板目录零可执行文件、示例零 <script>；prompt 由宿主拼装后交本地 agent CLI。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
注：skill 本体只是 prompt + 静态预览素材
2核心能力
01开发者教程 deck 定位（类 GitHub Blog / Linear Changelog）
02GitHub-dark 底 + 紫蓝 radial 环境光 + 60px 网格 mask
03居中布局 + 紫色 pill tag
04三色渐变标题（#a855f7 → #60a5fa → #34d399）
05GitHub 风代码 palette（cp/cc/ca/cm 四类 token）
06四色状态 badge（紫/蓝/绿/橙半透明胶囊）
07对比卡网格（2 列 / 3 列，居中定宽）
08步骤页与配置代码页（含 MCP server 配置示例）
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（JetBrains Mono / Inter / Noto Sans SC） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
| package | 示例配置文本里提到的 MCP server 包（仅作为教程代码示例出现，skill 不安装也不运行） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 宿主侧：预览 iframe 放宽沙箱 — template-picker.tsx 用 srcDoc + sandbox="allow-scripts allow-same-origin"；同源脚本可自行摘除沙箱，属宿主实现风险，不判档。
- 宿主侧：会 spawn 本地 agent CLI — convert 路由经 invokeAgent 以本地已登录 CLI 执行 prompt。
- 产物示例含 CDN 外链 — 字体 @import 与共享指令的 cdn.tailwindcss.com 在渲染时请求外网；离线时降级为系统字体。
- 会引导读者接触第三方 MCP server — 教程示例教用户 npx 运行 @modelcontextprotocol/server-obsidian 并填入 API key。skill 自身不执行这些命令，但内容会推动读者在自己的机器上运行第三方包 —— 属内容引导风险，非 skill 行为。
- 暗色 + 紫色渐变在打印时失真 — 深底渐变文字与光斑打印会走样，不适合纸质交付。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（next/src/lib/templates/skills/deck-obsidian-claude/）：目录内只有 SKILL.md、example.html，无 .sh/.py/.mjs/.ts 等可执行文件、无 package.json、无安装脚本；目录内不含任何读取凭证 / 环境变量 / cookie 的代码，也没有写盘指令（HTML 由模型在回复正文输出，落盘由宿主前端负责）。example 里的 <script> 计数＝0。SKILL.md 是纯版式 / 内容规范，未点名任何运行时要访问的生成后端或接口；按批4 口径（产物引用不判级、纯指令模板判 green），本模板属纯指令型。目录内实际出现的端点仅以下（均属产物示例或其元数据，由浏览器端拉取，非 skill 代码发起）：127.0.0.1:27123（见于 example.html）；fonts.googleapis.com（见于 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] 示例中的 127.0.0.1:27123 是否构成网络调用 — 不构成。该字符串只出现在 <pre> 的 MCP 配置示例文本里（OBSIDIAN_HOST 的值）；全文件 <script> 计数为 0，没有 fetch/XHR/Image/iframe 等任何请求代码，也没有 WebSocket。它是教程文案，不是运行时外发。
- [ok] 「60px 网格 mask」是否兑现 — .oc-cgrid 的 background-size:60px 60px + mask-image radial-gradient，与 SKILL.md 的 60px 一致。
- [ok] 「三色渐变标题」是否为真渐变 — .oc-g 使用 #a855f7 → #60a5fa → #34d399 的 135° 渐变 + background-clip:text。
- [ok] 「GitHub 风代码 palette」是否真为四类 token — .cp / .cc / .ca / .cm 四个类分别对应绿 / 蓝 / 紫 / 暗灰，落在 #010409 深底代码块内。
- [ok] 教程内容中的凭据写法是否安全 — 配置示例的 OBSIDIAN_API_KEY 用 xxxxxxxxxxxxxxxx 占位，未嵌入任何真实密钥；这是示例文案的良好实践。
- [ok] 目录内是否有脚本 / 凭证读取 / 写盘 — 目录仅 SKILL.md + example.html；<script> 计数 0；无 env/凭证访问代码、无写盘代码。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-obsidian-claude，含 SKILL.md。
6结论
适合：适合开发者工具教程、集成指南、Changelog 式更新说明、MCP / agent 生态内容：需要「GitHub Blog 观感 + 可贴代码」的场景。
不适合：不适合浅色品牌或正式商务场合（模板硬编码 GitHub Dark）；不适合营销型发布（无大图与动效，重心在代码与步骤）；不适合需要高保真打印的交付。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-obsidian-claude.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentb2eadd1665cf47d9…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 为实时上游，内容可能已更新。