1. 微信读书划线笔记为什么值得做成 HTML 卡片微信读书里攒了几百条划线散落在各个本书的笔记页里想回顾的时候翻起来特别费劲。截图分享吧长图糊成一片复制文字吧排版全丢发到群里像一坨纯文本。我试过手动整理成 Markdown一本书三十条划线光调格式就花了四十分钟最后还懒得发出去。真正的问题不在于「有没有笔记」而在于「笔记能不能变成一张拿得出手的卡片」。HTML 卡片的好处是浏览器直接打开就能看样式随便调发链接、发截图、存本地都行还能顺手加个二维码或者书名封面。对读书笔记爱好者来说这是把「输入」变成「可分享输出」的关键一步对前端新手来说这又是一个练手的小项目——不用搭框架一个 HTML 文件就能跑。那为什么非要拉上 Trae 和 MCP因为手动做卡片的瓶颈在「取数据」和「写模板」这两步。微信读书的划线内容存在它自己的账号体系里没有公开的导出按钮你得先想办法把数据拿出来拿出来之后还得把「书名、作者、划线内容、章节、笔记时间」这些字段映射到卡片模板里。MCPModel Context Protocol在这里扮演的角色就是给 AI 装上一双能直接读微信读书笔记的手。Trae 作为支持 MCP 的 AI 编程工具负责把「读笔记」和「生成 HTML」串成一条流水线。这篇要讲的就是这条流水线怎么搭从微信读书登录、Cookie 同步、MCP 服务配置到 Trae 里发一条指令生成复古风 HTML 卡片再到浏览器预览和常见报错排查。中间会给出可直接复制的 JSON 配置、字段映射表和验证步骤。另外如果你同时用好几个模型比如生成卡片用 Claude、润色文案用别的Key 管理会变得很乱我会顺带说下怎么用 TaoToken 把模型调用通道统一起来省得每个工具配一遍 Key。适合谁看平时用微信读书做笔记、想把笔记整理成可分享卡片的人刚接触 MCP、想找个真实小项目练手的前端新手以及已经在用 Trae 但还没配过 MCP 服务的开发者。不需要你会写复杂前端HTML 和 CSS 基础够用就行。2. Trae 里配置微信读书 MCP 服务的完整步骤先说清楚 MCP 是什么用一句话类比它就像给 AI 助手插了一根 USB 线这根线的另一头连着微信读书。AI 本身读不到你的微信读书数据但通过 MCP 服务它可以调用「读取划线」「读取笔记」这些能力。Trae 支持手动配置 MCP 服务配置写在一个 JSON 里格式和 Claude Desktop 的claude_desktop_config.json基本一致。2.1 前置准备微信读书登录与 Cookie 同步微信读书网页版地址是https://weread.qq.com/扫码登录后浏览器会保存一个 cookie下次打开保持登录状态。MCP 服务要读你的笔记就得拿到这个 cookie。但 cookie 直接复制粘贴容易失效而且手动找很麻烦所以社区里常用 CookieCloud 这个浏览器插件来做同步。插件安装有两种方式。应用商店安装用 Chrome 打开插件页面点「添加至 Chrome」弹窗里点「添加扩展程序」看到插件图标出现就成功了。手动安装去 GitHub releases 页下载压缩包解压后打开浏览器「管理扩展程序」开启开发者模式点「加载已解压的扩展程序」选中解压出来的文件夹。安装完点开插件图标做三处配置服务器地址填https://cc.chenge.ink/点「自动生成」拿到用户 KEY 和端对端加密密码这两个值记下来后面 MCP 配置要用同步域名关键字填wereadCookie 保活填https://weread.qq.com。点「测试」显示成功再点保存。注意CookieCloud 的服务器地址和 KEY 属于个人凭证不要截图发到公开场合。如果你不想用第三方同步服务也可以自建 CookieCloud 服务端配置逻辑一样只是把CC_URL换成你自己的地址。2.2 MCP 服务 JSON 配置片段打开 Trae找到 MCP 配置入口选择手动配置把下面这段 JSON 粘进去{ mcpServers: { weread: { command: npx, args: [ -y, mcp-server-weread ], env: { CC_URL: https://cc.chenge.ink, CC_ID: 替换成你的用户KEY·UUID, CC_PASSWORD: 替换成你的端对端加密密码 } } } }三个字段的含义CC_URL是 CookieCloud 服务地址保持默认即可CC_ID是插件里生成的用户 KEY·UUIDCC_PASSWORD是那个随机端对端加密密码。command和args表示用npx临时拉取mcp-server-weread这个包来运行不需要你提前全局安装。保存后Trae 的 MCP 列表里应该出现weread这一项状态显示绿色「可使用」说明服务起来了。如果显示红色或者一直转圈先看下一节的排查部分。2.3 字段映射表笔记数据怎么对应到卡片MCP 读出来的笔记数据字段名和你要展示的卡片元素不是一一对应的中间需要一层映射。下面这张表是我实测下来比较稳的对应关系你可以照着改模板MCP 返回字段含义卡片展示位置处理建议bookTitle书名卡片顶部大标题直接渲染author作者标题下方副标题加「著」字chapterTitle章节名每条划线的小标签截断到 12 字highlightText划线原文卡片主体引用块保留换行noteText个人想法引用块下方批注可空则隐藏createTime笔记时间卡片底部时间戳格式化为 YYYY-MM-DDbookId书籍 ID用于生成封面链接拼到封面 URL字段名可能随mcp-server-weread版本略有差异第一次跑的时候让 Trae 把原始 JSON 打印出来看一眼再对照调整。这一步别偷懒映射错了后面模板全白搭。2.4 用 TaoToken 统一模型调用通道配好 MCP 只是解决了「读数据」生成 HTML 卡片这一步还是要调模型。如果你 Trae 里同时配了好几个模型供应商每个都要单独填 Key换工具就得重新配一遍很烦。我的做法是用 TaoToken 做统一通道Base URL 填https://taotoken.net/apiKey 在控制台生成一次之后 Trae、Cline、Codex 这些工具都指向同一个地址和 Key模型 ID 按需切换。具体操作登录 TaoToken 控制台在 API Keys 页面创建一个 Key复制出来。然后在 Trae 的模型配置里把 Base URL 改成https://taotoken.net/apiKey 填刚创建的Model ID 填你要用的模型比如生成卡片用 Claude 系列润色用别的。这样 MCP 读数据、模型生成 HTML两条链路都通了而且 Key 只有一份管理成本低很多。3. 一键生成 HTML 卡片的可复制配置与脚本配置通了之后真正生成卡片靠的是一条指令加一个模板。这一节把指令、模板、脚本都拆开讲你可以直接复制去用。3.1 Trae 指令模板让模型按结构输出在 Trae 对话框里输入下面这条指令把书名换成你自己的使用 weread MCP读取《长安的荔枝》的全部划线内容。 按以下要求生成一份复古风格的 HTML 笔记卡片 1. 单文件 HTMLCSS 内联不依赖外部 CDN 2. 顶部显示书名、作者、划线总数 3. 每条划线用引用块展示章节名作为小标签 4. 有个人想法的划线在引用块下方用不同底色展示批注 5. 底部加一行「由 Trae MCP 生成」 6. 配色用米黄底 深棕文字字体用衬线体。 直接输出完整 HTML 代码不要解释。这条指令的关键在于「约束输出格式」。如果你只说「生成好看的卡片」模型可能给你一段需要构建工具的 React 代码或者引用一堆外部 CSS本地打开就白屏。明确「单文件、内联 CSS、不依赖 CDN」才能保证复制出来就能用。3.2 HTML 卡片模板骨架模型生成的 HTML 每次结构可能略有不同为了稳定我建议你先准备一个模板骨架让模型往里填数据。下面这个骨架可以直接用!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title读书笔记卡片/title style body { margin: 0; padding: 40px 16px; background: #f5efe0; font-family: Songti SC, SimSun, serif; color: #3b2f2f; } .card { max-width: 680px; margin: 0 auto; background: #fffaf0; border: 1px solid #d8c9a8; border-radius: 8px; padding: 32px; box-shadow: 0 4px 16px rgba(59, 47, 47, 0.08); } .card h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: 2px; } .meta { font-size: 13px; color: #8a7a5c; margin-bottom: 24px; } .highlight { border-left: 3px solid #b08d57; padding: 12px 16px; margin: 20px 0; background: #fdf6e8; line-height: 1.8; } .chapter { display: inline-block; font-size: 12px; color: #fff; background: #b08d57; padding: 2px 8px; border-radius: 3px; margin-bottom: 8px; } .note { font-size: 14px; color: #6b5b3e; background: #f0e6d2; padding: 8px 12px; border-radius: 4px; margin-top: 8px; } .footer { text-align: center; font-size: 12px; color: #a89878; margin-top: 32px; } /style /head body div classcard h1{{bookTitle}}/h1 div classmeta{{author}} · 共 {{count}} 条划线/div {{#each highlights}} div classhighlight span classchapter{{chapterTitle}}/span div{{highlightText}}/div {{#if noteText}} div classnote{{noteText}}/div {{/if}} /div {{/each}} div classfooter由 Trae MCP 生成/div /div /body /html{{...}}是占位符模型负责把 MCP 读到的数据填进去。如果你不想让模型自由发挥样式就把这个骨架连同指令一起发给它让它只做数据填充。3.3 本地生成脚本把输出写成文件模型输出 HTML 后手动复制粘贴到文件里也行但每次都要新建文件、粘贴、保存重复劳动。写个小脚本自动落盘更省事。下面是一个 Node.js 脚本把模型返回的 HTML 字符串写到本地// save-card.js const fs require(fs); const path require(path); // 假设模型返回的 HTML 存在变量 htmlContent 里 // 实际使用时可以从 stdin 读取或从 Trae 导出的文件读取 const htmlContent process.argv[2]; if (!htmlContent) { console.error(用法: node save-card.js html字符串); process.exit(1); } const bookName process.argv[3] || 读书笔记; const outputDir path.join(__dirname, cards); if (!fs.existsSync(outputDir)) { fs.mkdirSync(outputDir, { recursive: true }); } const fileName ${bookName}.html; const filePath path.join(outputDir, fileName); fs.writeFileSync(filePath, htmlContent, utf-8); console.log(卡片已生成: ${filePath});运行方式node save-card.js html内容 长安的荔枝。脚本会在当前目录建一个cards文件夹把 HTML 写进去。如果你在 Trae 里让模型直接调用终端执行这个脚本就能实现「一条指令 → 卡片落盘」的闭环。注意命令行传超长 HTML 字符串容易触发参数长度限制更稳的做法是让模型把 HTML 写到临时文件脚本读文件再重命名。或者直接在 Trae 里让模型用文件写入工具落盘跳过脚本。4. 验证请求从划线到浏览器预览的完整链路配置和脚本都齐了接下来跑一遍完整流程确认每一步都有预期结果。4.1 第一步确认 MCP 能读到数据在 Trae 对话框输入一条最小指令使用 weread MCP列出我最近有划线的 3 本书的书名和划线数量。预期结果是返回一个列表类似「《长安的荔枝》 42 条」「《置身事内》 28 条」。如果返回空列表说明 Cookie 没同步成功回到第 2 节检查 CookieCloud 配置。如果报错说找不到 MCP 服务检查 Trae 的 MCP 列表里weread是不是绿色状态。这一步很关键它把「MCP 通不通」和「模型生成好不好」两个问题分开了。先确认数据能读到再谈生成质量。4.2 第二步生成 HTML 并落盘确认数据能读之后发完整指令使用 weread MCP读取《长安的荔枝》的全部划线内容 按我给的模板骨架填充数据生成单文件 HTML 用文件写入工具保存到 ./cards/长安的荔枝.html。预期结果是 Trae 调用文件写入工具在项目目录下生成cards/长安的荔枝.html。如果模型只输出了代码没落盘检查 Trae 是否开启了文件写入权限或者手动把代码复制到文件里。4.3 第三步浏览器预览与效果检查打开终端进入文件所在目录用浏览器打开# macOS open cards/长安的荔枝.html # Windows start cards/长安的荔枝.html # Linux xdg-open cards/长安的荔枝.html浏览器里应该看到米黄底、深棕字的卡片顶部是书名和作者中间每条划线带章节标签有批注的划线下方有浅色批注块。检查三处划线数量对不对、章节标签有没有截断、批注有没有正确显示。如果样式错乱多半是模型生成的 CSS 有语法错误打开浏览器开发者工具看 Console 报错。4.4 第四步分享与二次加工卡片确认没问题后可以直接截图分享也可以把 HTML 文件发给朋友对方浏览器打开就能看。想加二维码的话在模板底部加一个img标签指向二维码图片即可。想批量生成多本书的卡片把指令里的书名换成变量循环调用就行。整个链路跑通后从「打开 Trae」到「浏览器看到卡片」熟练的话两三分钟一本。比起手动整理省下来的时间够你多读半本书。5. 常见报错排查401、local proxy failed 与 OAuth 问题这一节列几个我踩过的坑都是真实报错对照着排查能省不少时间。5.1 401 UnauthorizedCookie 失效或 KEY 填错报错长这样Error: Request failed with status code 401 Unauthorized: invalid cookie or credentials原因通常是两个CookieCloud 里的微信读书 cookie 过期了或者 MCP 配置里的CC_ID、CC_PASSWORD填错了。排查顺序先打开 CookieCloud 插件点「测试」看能不能同步成功再检查 Trae 的 MCP 配置里那两个值有没有多余空格。如果 cookie 过期重新登录微信读书网页版等插件自动同步一次再重试。5.2 local proxy failedMCP 服务没起来报错长这样MCP error: local proxy failed to connect spawn npx ENOENTspawn npx ENOENT表示系统找不到npx命令说明 Node.js 没装或者没加到 PATH。解决办法装 Node.js建议 18 以上装完在终端跑node -v和npx -v确认能输出版本号。如果版本号正常但 Trae 里还是报错重启 Trae让它重新读取环境变量。另一种local proxy failed是端口被占用这种情况重启电脑或者换个 MCP 服务端口通常能解决。5.3 reading choices模型返回格式不对报错长这样TypeError: Cannot read properties of undefined (reading choices)这个报错通常出现在模型调用环节不是 MCP 本身的问题。原因是模型接口返回的 JSON 结构里没有choices字段可能是 Base URL 配错了或者 Key 没有对应模型的权限。如果你用 TaoToken 统一通道检查 Base URL 是不是https://taotoken.net/apiKey 是不是在控制台创建的那个Model ID 是不是填了当前 Key 有权限的模型。三者对不上就会出这个错。5.4 OAuth 相关报错认证流程没走完报错长这样OAuth callback failed: invalid state parameter这类报错一般出现在需要 OAuth 授权的 MCP 服务上。微信读书 MCP 走的是 Cookie 同步不涉及 OAuth所以如果你看到 OAuth 报错先确认自己配的是不是mcp-server-weread别把别的服务的配置粘进来了。如果确实需要 OAuth 的服务检查回调地址有没有配错state 参数是不是过期了重新走一遍授权流程。5.5 配置三件套自查清单出现任何连接类报错先对照这张清单过一遍检查项正确值常见错误Base URLhttps://taotoken.net/api漏了/api或多了斜杠API Key控制台创建的 Key复制时带了空格Model ID当前 Key 有权限的模型填了未开通的模型CC_URLhttps://cc.chenge.ink自建服务填错地址CC_ID插件生成的 UUID和 CC_PASSWORD 搞混CC_PASSWORD插件生成的密码手动改过导致不匹配Base URL、Key、Model ID 这三件套只要有一个不对就会报各种奇怪的错。配的时候慢一点比事后排查省时间。6. 把模型调用收口到 TaoToken后续扩展更省心卡片生成跑通之后你可能会想加更多功能自动生成书籍封面、把卡片转成图片、批量处理整个书架。每加一个功能可能就要换一个模型或者加一个工具Key 管理会越来越乱。这时候把模型调用统一收口到 TaoToken收益就体现出来了。具体做法所有需要调模型的地方Base URL 都填https://taotoken.net/apiKey 用同一个Model ID 按任务切换。比如生成 HTML 用 Claude 系列文案润色用另一个模型批量脚本里的 API 调用也指向同一个地址。这样你只需要在 TaoToken 控制台管理一份 Key换模型不用改代码只改 Model ID。如果你还没创建 Key去控制台 API Keys 页面生成一个复制出来填到 Trae 的模型配置里。接入文档里有各工具的详细配置示例Trae、Cline、Codex 都有对应说明。配好之后MCP 读数据、模型生成卡片、脚本落盘整条链路就完整了。后续想扩展的话几个方向把卡片模板做成多套主题用指令切换把生成脚本包成命令行工具支持批量传书名把卡片部署到静态托管生成可分享链接。这些都不难核心链路通了剩下的就是加壳。最后说个实用技巧生成卡片时让模型在 HTML 里加一段media print样式这样浏览器直接 CtrlP 就能导出 PDF比截图清晰得多。这个我用了很久分享给你。