返回 html-ppt-skill
index.html
根目录 / templates / full-decks / obsidian-claude-gradient / index.html
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Obsidian × Claude Gradient</title>
7 <link rel="stylesheet" href="../../../assets/fonts.css">
8 <link rel="stylesheet" href="../../../assets/base.css">
9 <link rel="stylesheet" href="style.css">
10 </head>
11 <body class="tpl-obsidian-claude-gradient">
12 <div class="deck">
13
14 <!-- 1. COVER -->
15 <section class="slide is-active">
16 <div class="oc-cbg"></div>
17 <div class="oc-cgrid"></div>
18 <div class="oc-snum">01 / 08</div>
19 <div class="oc-tag">● OBSIDIAN × CLAUDE · 第二大脑</div>
20 <h1 class="oc-h1">把 Obsidian 和 Claude<br>拧成 <span class="oc-g">一条神经</span></h1>
21 <p class="oc-sub">不是又一个 AI 笔记插件 —— 是让 Claude 真正理解你 vault 的结构、链接、双向引用，<br>然后在你想写东西之前就把资料准备好。</p>
22 <div style="margin-top:32px">
23 <span class="oc-pill">🧠 Markdown-native</span>
24 <span class="oc-pill">⚡ MCP-ready</span>
25 <span class="oc-pill">🔗 双链理解</span>
26 </div>
27 </section>
28
29 <!-- 2. SECTION -->
30 <section class="slide">
31 <div class="oc-cbg"></div>
32 <div class="oc-cgrid"></div>
33 <div class="oc-snum">02 / 08</div>
34 <div class="oc-tag">● CHAPTER 01</div>
35 <h1 class="oc-h1" style="font-size:110px">Why <span class="oc-g">not</span> Notion?</h1>
36 <p class="oc-sub">当你的知识多到会互相引用时，<br>「文件夹」就不够了，「数据库」也不是答案。</p>
37 </section>
38
39 <!-- 3. CONTENT — compare cards -->
40 <section class="slide">
41 <div class="oc-cbg"></div>
42 <div class="oc-cgrid"></div>
43 <div class="oc-snum">03 / 08</div>
44 <div class="oc-tag">● COMPARE</div>
45 <h2 class="oc-h2">Notion vs <span class="oc-g">Obsidian</span> · 对 AI 友好度</h2>
46 <div class="oc-grid-2">
47 <div class="oc-card">
48 <span class="oc-badge oc-bb">NOTION</span>
49 <h4 style="font-size:20px;margin-bottom:10px">数据库原生</h4>
50 <p style="color:var(--oc-dim);font-size:14px;line-height:1.65">适合结构化任务、团队协作，但是——<br>• AI 要走 API，拿不到实时全文<br>• 嵌套块结构复杂，token 成本高<br>• 本地化差，没法当长期记忆</p>
51 </div>
52 <div class="oc-card" style="border-color:rgba(168,85,247,.35);background:rgba(124,58,237,.05)">
53 <span class="oc-badge oc-bp">OBSIDIAN</span>
54 <h4 style="font-size:20px;margin-bottom:10px">纯 Markdown + 双链</h4>
55 <p style="color:var(--oc-dim);font-size:14px;line-height:1.65">对 AI 天生友好 ——<br>• 所有东西就是文件，Claude 直接读<br>• 双链 = 天然 graph，抽实体几乎零成本<br>• 离线、可 git、可 diff、可回滚</p>
56 </div>
57 </div>
58 <div class="oc-hl" style="margin-top:26px">💡 <b>关键洞察：</b>AI 不需要「更聪明的数据库」，它需要「能被它自己读懂的文件系统」。</div>
59 </section>
60
61 <!-- 4. STEPS -->
62 <section class="slide">
63 <div class="oc-cbg"></div>
64 <div class="oc-cgrid"></div>
65 <div class="oc-snum">04 / 08</div>
66 <div class="oc-tag">● SETUP · 4 STEPS</div>
67 <h2 class="oc-h2">从 0 到第一次「AI 写笔记」</h2>
68 <div class="oc-steps">
69 <div class="oc-step"><div class="oc-sn">1</div><div class="oc-sc"><h4>装 Obsidian + 开 Local REST API 插件</h4><p>社区插件，一个勾就开。它让外部进程能 read/write 你的 vault。</p></div></div>
70 <div class="oc-step"><div class="oc-sn">2</div><div class="oc-sc"><h4>接 Claude Desktop + obsidian-mcp server</h4><p>MCP 一个配置文件就能接，token 填 vault 的 api key。</p></div></div>
71 <div class="oc-step"><div class="oc-sn">3</div><div class="oc-sc"><h4>装 5 个 obsidian-skills</h4><p>markdown / bases / canvas / cli / defuddle —— 让 Claude 知道怎么正确使用 Obsidian。</p></div></div>
72 <div class="oc-step"><div class="oc-sn">4</div><div class="oc-sc"><h4>让 Claude 自己整理一次</h4><p>「帮我把最近 10 篇笔记里的重复概念合并，生成一张新的 MOC」—— 90 秒出结果。</p></div></div>
73 </div>
74 </section>
75
76 <!-- 5. CODE -->
77 <section class="slide">
78 <div class="oc-cbg"></div>
79 <div class="oc-cgrid"></div>
80 <div class="oc-snum">05 / 08</div>
81 <div class="oc-tag">● MCP CONFIG</div>
82 <h2 class="oc-h2">claude_desktop_config.json</h2>
83 <pre class="oc-code"><span class="cm">// ~/Library/Application Support/Claude/claude_desktop_config.json</span>
84 {
85 <span class="cc">"mcpServers"</span>: {
86 <span class="cc">"obsidian"</span>: {
87 <span class="cc">"command"</span>: <span class="cs">"npx"</span>,
88 <span class="cc">"args"</span>: [<span class="cs">"-y"</span>, <span class="cs">"@modelcontextprotocol/server-obsidian"</span>],
89 <span class="cc">"env"</span>: {
90 <span class="cc">"OBSIDIAN_API_KEY"</span>: <span class="cs">"xxxxxxxxxxxxxxxx"</span>,
91 <span class="cc">"OBSIDIAN_HOST"</span>: <span class="cs">"http://127.0.0.1:27123"</span>
92 }
93 }
94 }
95 }</pre>
96 <p class="oc-sub" style="margin-top:18px">重启 Claude Desktop，输入 <b style="color:var(--oc-accent3)">/mcp</b>，你会看到 obsidian 已连。</p>
97 </section>
98
99 <!-- 6. STATS -->
100 <section class="slide">
101 <div class="oc-cbg"></div>
102 <div class="oc-cgrid"></div>
103 <div class="oc-snum">06 / 08</div>
104 <div class="oc-tag">● 3 MONTHS IN</div>
105 <h2 class="oc-h2">跑了 90 天，我的 <span class="oc-g">vault 数据</span></h2>
106 <div class="oc-grid-3" style="margin-top:28px">
107 <div class="oc-card" style="text-align:center"><div class="oc-big oc-g" style="font-size:80px">1,842</div><p style="color:var(--oc-dim);margin-top:8px;font-size:13px">notes in vault</p></div>
108 <div class="oc-card" style="text-align:center"><div class="oc-big oc-g" style="font-size:80px">6.3k</div><p style="color:var(--oc-dim);margin-top:8px;font-size:13px">backlinks (由 AI 自动补)</p></div>
109 <div class="oc-card" style="text-align:center"><div class="oc-big oc-g" style="font-size:80px">-74%</div><p style="color:var(--oc-dim);margin-top:8px;font-size:13px">找资料平均耗时</p></div>
110 </div>
111 <div class="oc-hl" style="margin-top:26px">最大收益不是「AI 帮我写」，而是「AI 帮我把旧笔记重新连起来」—— 每周 30 分钟，vault 就会主动生长。</div>
112 </section>
113
114 <!-- 7. QUOTE / CTA -->
115 <section class="slide">
116 <div class="oc-cbg"></div>
117 <div class="oc-cgrid"></div>
118 <div class="oc-snum">07 / 08</div>
119 <div class="oc-tag">● CTA · 今晚可以做</div>
120 <div class="oc-quote">
121 <blockquote>不要再找「AI 笔记应用」了。<br>你要的是一个 <span class="oc-g">文件夹 + 一条神经</span>。</blockquote>
122 <div class="attr">— 我自己，用了 90 天后</div>
123 </div>
124 <div style="margin-top:36px">
125 <span class="oc-pill">⬇ obsidian.md</span>
126 <span class="oc-pill">⬇ Claude Desktop</span>
127 <span class="oc-pill">⬇ obsidian-mcp</span>
128 <span class="oc-pill">⬇ obsidian-skills × 5</span>
129 </div>
130 </section>
131
132 <!-- 8. THANKS -->
133 <section class="slide">
134 <div class="oc-cbg"></div>
135 <div class="oc-cgrid"></div>
136 <div class="oc-snum">08 / 08</div>
137 <div class="oc-big oc-g">Thanks.</div>
138 <p class="oc-sub" style="margin-top:26px">配置模板、skill manifest、我的 vault 结构图都在 <b style="color:var(--oc-accent3)">github.com/lewis/obsidian-claude</b></p>
139 </section>
140
141 </div>
142 <script src="../../../assets/runtime.js"></script>
143 </body>
144 </html>
145
145 lines HTML