How I Built a Powerful Obsidian Content‑Distribution Plugin with Claude Code (Step‑by‑Step Tutorial)

Overview

Implemented an Obsidian plugin named Content Distribution Assistant that converts long-form notes into platform‑specific article styles (Xiaohongshu, Jike, X). The plugin supports configurable large‑model and platform settings and customizable prompts.

Model and Tools

Development used Claude Code with the Doubao‑Seed‑Code model, which achieved state‑of‑the‑art results on the SWE‑Bench‑Verified benchmark. The model is inexpensive, supports multimodal input (UI sketches, screenshots), and can generate or repair code based on visual cues.

Plugin Architecture

Obsidian is a local, open‑source markdown editor with a plugin ecosystem. The plugin consists of a UI component (sidebar tab), platform configuration, model configuration, and prompt templates. Users may keep default prompts or edit them.

Setup Procedure

Create a new repository from the Obsidian sample plugin template (https://github.com/obsidianmd/obsidian-sample-plugin).

Clone the repository into .obsidian/plugins of the vault.

Enter the plugin directory and run npm install then npm run dev to build.

Restart Obsidian, open Settings → Third‑party plugins, and enable the plugin.

Adjust manifest.json and package.json as shown in the screenshots.

Implement UI, API calls, and content‑conversion logic in the source code.

AI‑Driven Development Workflow

Initial prompt to Claude Code:

我想开发个内容分发助手的obsidian插件，请根据相关需求帮我开发。

produced a popup UI. A hand‑drawn sketch was supplied; the model recognized the image (multimodal) and regenerated the UI as a sidebar tab. Subsequent prompts refined font, platform list display, and overall styling until the desired appearance was achieved.

Configuration

Environment variables required for the model:

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

The API key is obtained from the Volcengine console; the plugin validates the key on connection testing.

Features

One‑click conversion of a note to Xiaohongshu style.

Generation of Jike and X styles, automatic tag creation, and clipboard copy.

Support for multiple large‑model and platform configurations.

Automatic retrieval and validation of API keys.

Development Details

Repository cloning command:

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

Build commands:

# Enter plugin directory
cd obsidian-content-remix
# Install dependencies
npm install
# Compile
npm run dev

After building, enable the plugin via Obsidian’s third‑party plugin settings and reload.

Modifications to manifest.json and package.json follow the screenshots (omitted here). Source code changes include replacing the popup UI with a sidebar tab, adjusting font families, and fixing platform‑list overflow.

Model Capabilities Demonstrated

Doubao‑Seed‑Code’s multimodal ability allowed the model to interpret a hand‑drawn UI sketch and produce corresponding TypeScript/HTML code, a capability claimed as the first domestic model with visual understanding for code generation. The model also performed style and bug fixes based on visual comparison.

Result Screenshots

Images illustrate the transformed content for Xiaohongshu, Jike, and X, as well as the plugin settings UI.

Conclusion

The plugin was built entirely with Claude Code, reducing implementation time and demonstrating rapid prototyping using AI‑assisted coding.