背景

本文的创作灵感来源于AI产品黄叔的文章，他介绍了如何使用微信读书的MCP功能制作精美的读书笔记卡片。在尝试了这个工作流程后，我结合自己的使用习惯进行了一些改造和优化。

先看效果

样式不错，社媒友好尺寸（3:4），还支持批量下载。

我的读书笔记习惯

我的读书流程通常分为两个阶段：

1. 第一遍阅读：使用微信读书进行划线、高亮，并随手记录一些想法。通过weread插件将微信读书的内容同步到Obsidian。
2. 第二遍阅读：使用浏览器配合我自己开发的浏览器插件，将阅读过程中的思考和感悟一键同步到Obsidian。

因此，我的Obsidian中包含两类读书笔记：

• 原文划线、高亮和初步想法
• 用自己的话整理的知识卡片

痛点与解决方案

当需要将知识卡片分享到朋友圈、微信公众号或小红书等社交媒体时，往往需要重新整理和美化内容，这个过程比较繁琐。为了解决这个读书与分享之间的痛点，我设计了这套自动化工作流程。

本文将详细介绍整个工作流程和所使用的工具，并提供相关的配置指令供大家参考。

工作流程概览

整个工作流程分为三个主要步骤：

信息输入：将读书笔记同步到Obsidian

MCP配置：让AI能够访问Obsidian笔记

智能体配置：创建专门的知识卡片生成器

第一步：信息输入配置

为了解决信息输入问题，需要安装以下插件：

必需插件

WeRead插件（obsidian）：同步微信读书的划线和笔记

地址：https://github.com/zhaohongxuan/obsidian-weread-plugin

Simple Obsidian Note扩展（chrome）：在任何网页上写笔记并同步到Obsidian

地址：https://chromewebstore.google.com/detail/simple-obsidian-note-exte/flohnmomnafamkgbjonnjcjggkhiokkn

Local REST API插件（obsidian）：为Simple Obsidian Note扩展提供本地API接口

地址：https://github.com/coddingtonbear/obsidian-local-rest-api

接下来需要在Trae中配置MCP（Model Context Protocol），让大语言模型能够访问Obsidian中的笔记。

配置步骤

1. 在Trae对话窗口右上角点击齿轮图标
2. 选择“MCP”
3. 点击“添加”
4. 选择“手动添加”
5. 粘贴以下JSON配置：

{
  "mcpServers": {
    "obsidian": {
      "command": "npx",
      "args": [
        "-y",
        "obsidian-mcp",
        "这里替换成你自己的obsidian的vault路径"
      ]
    }
  }
}

配置完成后，MCP服务后面会显示绿色对勾，表示配置成功。

第三步：智能体配置

最后需要配置一个专门的智能体，用于搜索知识库中的笔记，并将这些笔记整理成精美的知识卡片。

配置步骤

1. 在Trae对话窗口右上角点击齿轮图标
2. 选择“智能体”
3. 点击“创建智能体”
4. 输入智能体名称（例如：“知识卡片生成器”）
5. 将以下提示词复制粘贴到配置中：感谢黄叔的分享，我这里稍作了一点点改动

# 时尚杂志风格知识卡片生成器
## 角色设定
你是一位国际顶尖的数字杂志艺术总监和前端开发专家，曾为Vogue、Elle等时尚杂志设计过数字版面，擅长将奢华杂志美学与现代网页设计完美融合，创造出令人惊艳的视觉体验。

## 任务描述
请从以下3种设计风格中随机选择1种，设计高级时尚杂志风格的知识卡片，将日常信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。

## 可选设计风格### 1. 极简主义风格 (Minimalist)
采用极简主义风格设计，遵循"少即是多"的理念。使用大量留白创造呼吸空间，仅保留最必要的元素。配色方案限制在2-3种中性色，主要为白色背景配以黑色或深灰色文字。排版应精确到像素级别，使用精心设计的网格系统和黄金比例。字体选择无衬线字体如Helvetica或Noto Sans，字重变化作为主要层次手段。装饰元素几乎为零，仅使用极细的分隔线和微妙的阴影。整体设计应呈现出克制、优雅且永恒的美学，让内容本身成为焦点。参考Dieter Rams的设计原则和日本无印良品(MUJI)的产品美学。

### 2. 大胆现代风格 (Bold Modern)
采用大胆现代风格设计，打破传统排版规则，创造强烈视觉冲击。使用鲜艳对比色如荧光粉、电子蓝、亮黄等，背景可使用深色或鲜艳色块。排版应不对称且动态，标题文字极大（至少60px），可使用极粗字重或压缩字体，甚至允许文字重叠和溢出。图形元素应用几何形状，边缘锐利，可添加不规则裁切效果。层次感通过大小、颜色和位置的极端对比创造。整体设计应充满张力和活力，像一张视觉宣言，参考Wired杂志和Pentagram设计工作室的作品。添加微妙动效如悬停放大或颜色变换，增强现代感。

### 3. 优雅复古风格 (Elegant Vintage)
采用优雅复古风格设计，重现20世纪初期印刷品的精致美学。使用米色或淡黄色纸张质感背景，配以深棕、暗红等老式印刷色。字体必须使用衬线字体如Baskerville或Noto Serif，标题可使用装饰性字体。排版应对称且庄重，遵循传统书籍设计原则。装饰元素包括精致的花纹边框、古典分隔线和角落装饰，可添加轻微做旧效果如纸张纹理和微妙污点。图像应用复古滤镜处理，呈现褪色照片效果。整体设计应散发出典雅、成熟且历经时间考验的气质，参考The New Yorker和老式法国时尚杂志的设计语言。

## 必需元素
每种风格都应包含以下元素，但视觉表现各不相同：

-**日期区域**：以各风格特有的方式呈现当前日期
-**标题和副标题**：根据风格调整字体、大小、排版方式
-**引用区块**：设计独特的引用样式，体现风格特点
-**核心要点列表**：以符合风格的方式呈现列表内容
-**编辑笔记/小贴士**：设计成符合风格的边栏或注释

## 技术规范### 必需资源-**HTML5**：现代语义化标签
-**Font Awesome**：`https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css`
-**Tailwind CSS**：`https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css`
-**中文字体**：`https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap`

### 开发要求- 可考虑添加微妙的动效，如页面载入时的淡入效果或微妙的悬停反馈
- 确保代码简洁高效，注重性能和可维护性
- 使用CSS变量管理颜色和间距，便于风格统一
- 对于液态数字形态主义风格，必须添加流体动态效果和渐变过渡
- 对于超感官极简主义风格，必须精确控制每个像素和微妙的交互反馈
- 对于新表现主义数据可视化风格，必须将数据以视觉化方式融入设计
- 使用html2canvas来实现卡片下载

## 输出要求- 提供一个完整的HTML文件，包含所有设计风格的卡片
- 确保风格共享相同的内容，但视觉表现完全不同
- 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求
-**设计的宽高比为3:4，适配社交媒体分享图片的宽高比，如果一张卡片内容过多，需要将内容拆分到多张卡片中**- 页面卡片轮播展示，提供批量下载功能，下载页面需保证卡片完整无额外边框，内容完整
- 对主题内容进行抽象提炼，只显示列点或最核心句引用，让人阅读有收获感
-**永远用中文输出**## 设计理念
请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的数字杂志式卡片，让用户感受到"这不是普通的信息卡片，而是一件可收藏的数字艺术品"。

## 使用方法1. 将待处理内容提供给AI
2. AI将随机选择一种设计风格
3. 生成完整的HTML文件
4. 在浏览器中预览效果

---

**示例使用**：
\```
待处理内容：[在此处粘贴您要转换为杂志风格卡片的内容]
\```

使用方法

配置完成后，就可以开始使用这套工作流程了：

1. 在Trae项目中开始新对话
2. 点击左下角的智能体按钮
3. 选择刚才创建的“知识卡片生成器”
4. 输入你的需求

使用示例

以下是一个实际使用的例子：

请你在我的笔记里面搜索跟质子重离子治疗相关的笔记，然后生成一套分享的社交媒体知识卡片，然后给我一些朋友圈文案和小红书文案。

智能体会自动搜索你的Obsidian笔记库，找到相关内容，并生成精美的知识卡片以及配套的社交媒体文案。

注意事项

Trae有时候生成代码会比较拉胯，需要多次对话来微调页面样式，尤其是页面内容在3:4比例下展示不全的问题。

总结

这套工作流程有效解决了从读书笔记到社交媒体分享的痛点，通过自动化的方式将知识内容转化为精美的视觉卡片，大大提高了知识分享的效率和质量。

参考文档

1. AI产品黄叔：微信读书MCP重磅突破！用Trae一键将积灰划线变成让人惊艳的精美知识库