Community编程与开发github.com

MrNhoiBong/WhiteBorad

构建并服务“Claude 草稿纸”,一个本地白板(基于 Python 标准库的服务器,在 venv 中运行),用户可在上面绘图或编写 LaTeX,框选区域后提问;终端中的 Claude 读取该区域并回答或重新绘制到白板上。当用户要求创建、打开、启动或使用白板服务器(白色画板、草稿纸、共享画板、草稿板)与 Claude 交流时使用。

WhiteBorad 是什么?

MrNhoiBong/WhiteBorad 技能为 Claude 提供了一个本地白板界面,使用户能够通过视觉草稿与 AI 交互。它作为一个基于 Python 标准库的独立服务器运行,在 venv 中启动,用户可以通过浏览器访问。白板支持手绘、LaTeX 数学公式、SVG 图形和结构化笔记。Claude 可以从白板上框选的区域读取内容并进行推理,然后用文本、LaTeX 或绘制的新元素进行回复。该技能优化了 token 使用,例如通过脚本生成 SVG 图表,而非手动编写坐标。它适用于 Cursor 和 Codex 等平台,支持 Python 脚本、文件管理和 LaTeX 渲染,使其成为开发者协作、数学推理和视觉问题解决的强大工具。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add MrNhoiBong/WhiteBorad

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Claude 草稿纸(白板)

本地白板,作为共享草稿纸使用:用户绘制想法,Claude 在本地分析后回答并绘制到白板上。 代码位于此技能目录中;以下 WB 是指向包含此文件的目录的路径。

启动

export WB_DATA="$PWD/.whiteboard"   # 可选:为当前项目设置独立白板(默认:WB/data)
WB/wb start [--port 8765]           # 自动创建 .venv (python3 -m venv --without-pip),无需外部包
  • 为用户提供 URL (http://127.0.0.1:8765),然后在后台运行 WB/wb wait --timeout 3300(run_in_background)。
  • 如果设置了 WB_DATA,必须为所有后续 wb 命令设置相同的值(在命令中直接写入:WB_DATA=... WB/wb ...)。
  • 如果在 git 仓库中使用 WB_DATA,请将 .whiteboard/ 添加到 .gitignore。

服务循环

  1. 当 wait 以返回码 0 结束时:读取输出。输出包括问题、框选的区域、区域内的项目(包含足够的文本内容)以及 PNG 路径(如果有)。
  2. 仅当输出中列出 PNG 文件时才打开它(仅当区域包含手绘笔迹、框架、箭头或形状时)。不要读取整个白板;如果需要更多上下文,使用 wb look X Y W H 或 wb item ID。
  3. 在本地执行所需操作:读取文件、运行脚本、进行计算。
  4. 使用 wb reply --file F --done 进行回复,如果有帮助则绘制到白板上(参见下文)。
  5. 在后台重新运行 wait。返回码 2 表示超时,没有请求:只需重新运行 wait,无需通知用户。

当用户想要停止时:WB/wb stop。

回复规则

  • 所有数学公式必须使用 LaTeX ($…$ 内联,$$…$$ 显示),无论是在聊天中还是白板上。页面使用 MathJax 进行渲染,可用宏:\Adv。
  • 多行文本或包含 $ 的文本,请写入临时目录中的文件,然后通过 --file 传递,以避免 shell 引用错误。
  • 内容是轻量级 Markdown:**粗体**、*斜体*、`代码`、列表、表格 |…|。
  • 由 Claude 创建的项目默认使用紫色,并自动放置在处理区域附近;使用 --at x,y 放置在其他位置。

绘制命令

命令用途
wb note [TEXT|--file F] [--color C] [--at x,y] [--w W]卡片式笔记(Markdown + LaTeX)
wb tex [TEXT|--file F] [--size N]无框文本或公式
wb svg --file F --title T [--w W --h H]示意图、图表、插图(SVG)
wb rect X Y W H, wb arrow X Y DX DY白板原生框架、箭头
wb patch ID [--text|--file|--svgfile|--at|--color], wb rm ID…修改、删除
wb show [RID] [--pending], wb done [RID]查看或关闭请求

笔记颜色:yellow、pink、sky、mint、violet。笔迹颜色(rect、arrow):ink、red、blue、green、amber、violet。

节省 token 的 SVG 绘制

  • SVG 图形通过 <img> 显示(安全,不执行脚本),因此 SVG 内部的 LaTeX 不会被渲染。如果需要公式,请使用 SVG 绘制框架和箭头,然后在上面放置 tex 项目。
  • 图表或多点图形:使用简短的 Python 脚本生成 SVG,不要手动编写坐标。此时成本仅为脚本长度,与点数无关。
  • 使用 <style>、<defs> 和 <marker>,并对坐标进行四舍五入。如果只需要几个框架和箭头,请使用 rect/arrow。
  • 读取几乎免费:wait 仅为每个 SVG 图形打印一行描述,而不打印源代码。

架构和 API 详情:WB/docs/。

相关技能