我用Claude Code開發(fā)了Obsidian內(nèi)容分發(fā)插件，爆了！（附教程）

這是蒼何的第 448 篇原創(chuàng)！

大家好，我是愛折騰 Obsidian 的b蒼何。

最近實(shí)在是閑的蛋疼，各種折騰 Obsidian，配合 CLI，感覺能玩的地方太多了。

這不，又花了點(diǎn)時(shí)間，用 Claude Code 開發(fā)了個(gè) Obsidian 插件，姑且叫內(nèi)容分發(fā)助手。

它能夠?qū)⑽以?Obsidian 中寫的公眾號(hào)長(zhǎng)文，一鍵轉(zhuǎn)成符合各個(gè)平臺(tái)風(fēng)格的文章。

比如轉(zhuǎn)成小紅書文案：

甚至是標(biāo)簽都能自動(dòng)生成，點(diǎn)擊一鍵復(fù)制，就可以直接去小紅書后臺(tái)發(fā)送了。

還有即刻風(fēng)格的：

還有 X 風(fēng)格，這對(duì)于 X 做海外賬號(hào)來說，別提多有用，省去了轉(zhuǎn)換到翻譯的過程。（當(dāng)然翻譯與否也是可以選擇的）

在整體設(shè)置上，插件支持進(jìn)行大模型配置和平臺(tái)配置，甚至我還把提示詞也做了配置，你可以用默認(rèn)提示詞也可以根據(jù)習(xí)慣自行更改。

目前支持的平臺(tái)有這些：

支持的模型有這些：

當(dāng)點(diǎn)擊獲取 api key 的時(shí)候能自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的開放平臺(tái)獲取 key。

點(diǎn)擊測(cè)試連接的時(shí)候，會(huì)對(duì) API 進(jìn)行驗(yàn)證。

以上就是整個(gè) MVP 版本內(nèi)容分發(fā)助手插件的全部功能。

我已經(jīng)用這個(gè)插件跑了幾天了，目前測(cè)下來，效果相當(dāng)驚人。

小紅書上也是表現(xiàn)不錯(cuò)：

相當(dāng)做到了一魚多吃，對(duì)于公眾號(hào)長(zhǎng)圖文創(chuàng)作來說，可以說是法寶了，至少我目前感覺給我提效不少。

如果你對(duì)這個(gè)插件感興趣，也可以點(diǎn)贊留言告訴我，人多我就考慮給它發(fā)布出來。

但你想象不到，整個(gè)開發(fā)我全程用的居然是字節(jié)新出的 Doubao-Seed-Code 做的，因?yàn)槲以谏现芫鸵呀?jīng)拿到火山新模型的測(cè)試資格。

他們正式官宣是雙十一這天, 還搞了個(gè) 9.9 的活動(dòng)，有點(diǎn)意思。

這個(gè)信息圖也是用 Doubao-Seed-Code 做的：

除了模型選擇外，我開發(fā)的環(huán)境也相當(dāng)?shù)钠孑猓玫?Obsidian 來開發(fā) ob 插件，可以說整個(gè)地球上就湊不齊多少人。（瞎幾把吹牛）

有幾點(diǎn) Obsidian 插件開發(fā)的經(jīng)驗(yàn)特別想和你分享，當(dāng)然了，按照慣例，我也會(huì)手把手帶著大家來一次用 CC 進(jìn)行 Obsidian 插件的開發(fā)。

這也會(huì)導(dǎo)致這篇文章的內(nèi)容又會(huì)顯得巨長(zhǎng)，如果你沒耐心看完，可以先點(diǎn)個(gè)贊收藏慢慢看。

整篇文章結(jié)構(gòu)大概是這樣的：

介紹一下用到的工具

先從模型開始，這次選的 Doubao-Seed-Code 主要也是為了測(cè)試其在實(shí)際應(yīng)用開發(fā)中的能力，我發(fā)現(xiàn)單純的用單個(gè) demo 來驗(yàn)證能力，大家很多也看麻了，還是得在應(yīng)用中來體現(xiàn)。

如你所料，Doubao-Seed-Code 出世也是直接在 SWE-Bench-Verified 中刷新 SOTA。

也是，現(xiàn)在大模型發(fā)布問世，不刷新 SOTA 那還玩?zhèn)€ der。

實(shí)際測(cè)下來的感受是：能干事，挺便宜。

還有比較亮眼的點(diǎn)是，Doubao-Seed-Code 是支持多模態(tài)能力的，它可參照 UI 設(shè)計(jì)稿、截圖或手繪草圖生成代碼，或?qū)ι身撁孢M(jìn)行視覺比對(duì)，自主完成樣式修復(fù)和 Bug 修復(fù)。

比如我第一輪出來的 UI 效果有些抽象，我直接手繪了一個(gè)草圖，它先識(shí)別圖片內(nèi)容，然后再轉(zhuǎn)為 UI 設(shè)計(jì)樣式。

這個(gè)能力，據(jù)我所知，還是國(guó)內(nèi)第一家支持視覺理解能力的編碼模型。

雙十一，他們也在做活動(dòng)，9.9 一個(gè)月，我把活動(dòng)地址放在最后了，想要沖的可以點(diǎn)文末閱讀原文去沖，畢竟雙十一就這一次。

好，關(guān)于模型，就先介紹到這，更多信息，可以去火山官網(wǎng)做了解。

然后再一次介紹下 Obsidian，這是一個(gè)本地的開源的筆記創(chuàng)作軟件，其插件生態(tài)非常繁榮，自由度非常高，而且非常安全，在上面的所有文檔均是大模型最愛的 markdown 格式的。

Claude Code 就不用多介紹了，很多朋友早玩的很 6 了。

那如何把這三個(gè)工具完美融合呢？

首先是把 Claude Code 安裝到 Obsidian 就很簡(jiǎn)單，下載個(gè) Terminal 插件一配就好，之前的文章也講過啦，不會(huì)的可以去看看。

最后就是把 Doubao-Seed-Code 配置到 Claude Code ，輸入這個(gè)配置就好：

export ANTHROPIC_BASE_URL=https://ark.cn-beijing.volces.com/api/compatible export ANTHROPIC_AUTH_TOKEN=你的key export ANTHROPIC_MODEL=doubao-seed-code-preview-latest 

key 的獲取就在火山后臺(tái)：

一、熟悉下插件開發(fā)整體流程

新建一個(gè)新的倉庫用來測(cè)試。（防止亂搞）

保存到指定文件夾：

先下載個(gè)插件模板吧：

第一步，下載示例插件

下載模板：https://github.com/obsidianmd/obsidian-sample-plugin

點(diǎn)擊 Use this template。

在 Repository name 選項(xiàng)中, 輸入您的插件名稱。 Obsidian 的插件名稱往往以 obsidian- 開頭。 舉個(gè) , obsidian-instant-coffee。

點(diǎn)擊 Create repository from template。

我的名字就叫做：obsidian-content-remix

創(chuàng)建 GitHub 倉庫：

將 GitHub 代碼下載到指定文件夾：

cd path/to/vault/.obsidian/plugins  git clone https://github.com/your-username/obsidian-instant-coffee.git 

第二步，構(gòu)建插件

跳轉(zhuǎn)對(duì)應(yīng)文件夾，并安裝依賴：

# 進(jìn)入目錄cd path/to/vault/.obsidian/plugins/obsidian-instant-coffee  # 安裝依賴 npm install  # 編譯插件代碼 npm run dev 

第三步，啟用插件

這時(shí)候重啟 obsidian，打開倉庫-設(shè)置-第三方插件，就可以看到了。點(diǎn)擊啟用。

第四步，修改插件配置

manifest.json 的修改如下：

package.json 的修改如下：

第五步，修改源碼：

比如修改這段

點(diǎn)擊左側(cè)插件，就會(huì)蹦出剛才的提示信息。

需求定義及 claude. md 編寫

在 obsidian 中配置 cc 后的效果是這樣的：

為了讓 AI 更好的工作，我習(xí)慣會(huì)在項(xiàng)目的 claude. md 中寫上相關(guān)規(guī)范和要求。

claude. md 文檔定義我也直接貼出來了：

# Role: Obsidian插件開發(fā)專家

## Profile
- language: 中文
- description: 專業(yè)的Obsidian插件開發(fā)專家，專注于內(nèi)容分發(fā)助手插件的設(shè)計(jì)與實(shí)現(xiàn)
- background: 擁有豐富的Obsidian插件開發(fā)經(jīng)驗(yàn)，熟悉TypeScript、Node.js和Obsidian API
- personality: 嚴(yán)謹(jǐn)細(xì)致，注重用戶體驗(yàn)，善于解決技術(shù)難題
- expertise: Obsidian插件架構(gòu)設(shè)計(jì)、UI組件開發(fā)、API集成、內(nèi)容轉(zhuǎn)換算法
- target_audience: Obsidian用戶、內(nèi)容創(chuàng)作者、技術(shù)開發(fā)者

## Skills

1. 核心開發(fā)技能
   - TypeScript編程: 精通TypeScript語言特性及Obsidian插件開發(fā)規(guī)范
   - UI組件設(shè)計(jì): 熟練使用Obsidian的UI組件庫構(gòu)建用戶界面
   - API集成: 能夠集成各種大模型API實(shí)現(xiàn)內(nèi)容轉(zhuǎn)換功能
   - 配置管理: 實(shí)現(xiàn)靈活的平臺(tái)配置和Prompt模板管理

2. 輔助開發(fā)技能
   - 文檔解析: 解析Obsidian筆記的Markdown格式和元數(shù)據(jù)
   - 錯(cuò)誤處理: 完善的錯(cuò)誤處理機(jī)制和用戶反饋系統(tǒng)
   - 性能優(yōu)化: 確保插件運(yùn)行流暢，不影響Obsidian主程序性能
   - 測(cè)試調(diào)試: 全面的單元測(cè)試和集成測(cè)試方案

## Rules

1. 開發(fā)原則：
   - 代碼規(guī)范: 嚴(yán)格遵循Obsidian官方開發(fā)規(guī)范和TypeScript最佳實(shí)踐
   - 模塊化設(shè)計(jì): 采用模塊化架構(gòu)，確保代碼可維護(hù)性和可擴(kuò)展性
   - 用戶體驗(yàn): 界面簡(jiǎn)潔直觀，操作流程順暢，反饋及時(shí)明確
   - 兼容性: 確保插件兼容主流Obsidian版本和操作系統(tǒng)

2. 行為準(zhǔn)則：
   - 安全第一: 妥善處理用戶數(shù)據(jù)和API密鑰，不泄露隱私信息
   - 穩(wěn)定可靠: 確保插件在各種使用場(chǎng)景下都能穩(wěn)定運(yùn)行
   - 持續(xù)改進(jìn): 根據(jù)用戶反饋不斷優(yōu)化功能和性能
   - 文檔完善: 提供清晰的使用說明和技術(shù)文檔

3. 限制條件：
   - 資源限制: 合理使用系統(tǒng)資源，避免影響Obsidian性能
   - API限制: 遵守各平臺(tái)API的使用條款和頻率限制
   - 功能邊界: 專注于內(nèi)容分發(fā)功能，不涉及無關(guān)特性
   - 法律合規(guī): 確保內(nèi)容轉(zhuǎn)換符合版權(quán)和平臺(tái)規(guī)定

## Workflows

- 目標(biāo): 開發(fā)功能完整的Obsidian內(nèi)容分發(fā)助手插件
- 步驟 1: 分析需求，設(shè)計(jì)插件架構(gòu)和UI界面布局
- 步驟 2: 實(shí)現(xiàn)核心功能模塊：筆記解析、平臺(tái)配置、大模型集成
- 步驟 3: 開發(fā)用戶界面：平臺(tái)選擇、內(nèi)容預(yù)覽、一鍵復(fù)制功能
- 步驟 4: 集成測(cè)試和性能優(yōu)化，確保插件穩(wěn)定可靠
- 預(yù)期結(jié)果: 用戶能夠在Obsidian中輕松將筆記轉(zhuǎn)換為各平臺(tái)風(fēng)格的文案

## Initialization
作為Obsidian插件開發(fā)專家，你必須遵守上述Rules，按照Workflows執(zhí)行任務(wù)。

因?yàn)槭孪榷x好了 claude. md，這里 Chat 的提示詞就可以簡(jiǎn)單一些，我們把背景和要求都寫好了。

提示詞：我想開發(fā)個(gè)內(nèi)容分發(fā)助手的obsidian插件，請(qǐng)根據(jù)相關(guān)需求幫我開發(fā)。 

沒幾分鐘，就出來一個(gè)版本，我們打開他發(fā)現(xiàn)有了。

但并不是我要的效果，他是個(gè)彈窗。

我希望是在側(cè)邊欄能打開，于是我簡(jiǎn)單畫了個(gè)草圖，讓它按照我的草圖來設(shè)計(jì) UI。

先問問豆包是否能識(shí)別到我的草圖。

他說能

于是我才大膽的截圖直接發(fā)給他。

提示詞: OK,這個(gè)obsidian內(nèi)容分發(fā)助手插件我不滿意,你根據(jù)我的草圖重新設(shè)計(jì)下,我不希望是彈窗打開,而是tab頁面打開,UI設(shè)計(jì)參考我的草圖. 

接到需求后，開始賣力干活。

樣式有點(diǎn)不對(duì)，這個(gè)地方字體都顯示不對(duì)。沒關(guān)系，就是要經(jīng)過不斷的描述需求和檢查結(jié)果的過程。

選擇平臺(tái)這里文字沒法展示全, 請(qǐng)修改此地方, 其他無需修改, 現(xiàn)在樣式你可以自己看我給你的截圖. 。

好，修復(fù)好了。

在 obsidian 中直接進(jìn)行插件開發(fā)有個(gè)好處就是，隨心所欲的絲滑。

指揮 Claude Code ，把之前需要切換應(yīng)用看效果這事直接省去。

只需要在第三方插件這個(gè)地方重新開關(guān)一下，就完成了重新加載。

經(jīng)過幾輪的調(diào)教，一個(gè)不辣么簡(jiǎn)單的插件就開發(fā)好了。

可以一鍵轉(zhuǎn)為小紅書風(fēng)格：

即刻風(fēng)格：

X 風(fēng)格：

在整體設(shè)置上，支持進(jìn)行大模型配置和平臺(tái)配置，甚至我還把提示詞也做了配置，你可以用默認(rèn)提示詞也可以根據(jù)習(xí)慣自行更改。

未來的生產(chǎn)力，或許不再是誰能寫出更晦澀的算法，而是誰能更好地駕馭 AI，更快地構(gòu)建出有價(jià)值的產(chǎn)品。

希望這個(gè)插件和這篇教程，能幫你把我踩過的坑都填平。也希望你能拿起這個(gè)新的杠桿，去復(fù)活你項(xiàng)目列表里那個(gè)“一直想做，卻沒時(shí)間做”的絕妙想法。

感謝你閱讀這篇文章，我們下一期見！