尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
Whiteboard快速上手教程:3步连接Claude Code/Codex,10分钟画出第一份设计评审
Whiteboard快速上手教程3步连接Claude Code/Codex10分钟画出第一份设计评审【免费下载链接】whiteboardopen-source canvas for thoughtful software design项目地址: https://gitcode.com/gh_mirrors/whiteboard36/whiteboardWhiteboard 是一个开源的桌面设计画布工具让 Claude Code、Codex 等 AI 编程智能体在可视化画布上画图讲代码。只需 3 步连接智能体10 分钟即可生成第一份包含时序图、流程图与代码链接的交互式设计评审Review。本教程面向新手带你零基础上手。为什么需要 Whiteboard传统 diff 视图又长又吵AI 智能体写代码后也缺少讲解的载体。Whiteboard 解决了两个问题图能跳到代码点击画布上的时序图、实体关系图或智能体引用可直接跳转到对应源码并自带 VS Code 级的按键绑定与 LSP 支持语义化 diff内置 Rust 编写的 AST 感知 diff 查看器大段新增函数自动折叠为伪代码测试与文档变更默认收起它完全运行在你的本地仓库上MIT 协议开源代码就在你手边README.md。第 1 步安装 Whiteboard Desktop打开官网 dev.fast/install 下载 macOS / Windows / Linux 安装包运行安装程序并打开应用确认终端中whiteboard命令可用Desktop 会自动安装配套 CLI 并在~/.local/bin写入 shim Desktop 应用会内置 JSON 评审服务器后续的画布展示、评审发现、会话状态都由它托管。CLI 细节见 packages/review/README.md。第 2 步连接 Claude Code 或 CodexWhiteboard Desktop 启动时会自动检测本机已安装的编程智能体Claude Code、Codex、Cursor、Pi、OpenCode 等并主动提供安装 CLI 通过 MCP 协议连接的向导。整个过程只需点几下确认按钮。如果你更喜欢手动连接在仓库对应目录运行即可whiteboard connect claude # 或 whiteboard connect codex命令会打印该智能体的 MCP 注册步骤Desktop 的智能体设置流程执行的正是同样的步骤。以 Cursor 为例其 MCP 配置仅一行命令MCP 配置示例packages/agent-plugins/cursor/mcp.json各智能体插件目录packages/agent-plugins/官方工作流说明packages/review/onboarding.md连接的本质是智能体获得一个 Whiteboard MCP 服务器该服务器提供创作指令与whiteboard api工具目录智能体通过它在画布上作画。第 3 步10 分钟画出第一份设计评审打开你的项目目录向已连接的智能体提一个需求例如Review 当前分支相对于最新 main 的变更用 Whiteboard 给我画出来我要看到改了什么、为什么改、以及关键的流程图。然后坐等智能体在画布上实时书写它会刻意增量写入让你每隔几秒看到视觉进度。完成后运行whiteboard app pick即可在 Whiteboard Desktop 中打开这份评审。一张典型的评审画布长这样读画布的四个标签标签作用Review智能体写好的交互式评审文档正文 图 代码链接Commits按作者顺序查看固定的 base → head 提交列表Diff固定基线之间的完整变更语义化降噪Trace智能体决策日志它自主做了哪些决定、依据是什么画布中的每个节点、每段引用文字都可点击跳转源码例如正文里的链接会写成[标签](https://link.gitcode.com/i/854dbf686107094ceb5a9b4541c50ad7)的形式。这些创作规则由项目内置的系统提示词驱动全文开源可查packages/review/instructions/authoring.md。好用的提问模板来自官方 README针对新 API 变更可以这样问智能体这组提交是为了让某个 API 达成某个目标。我想看到提议的 API、示例、以及动机。然后我们再深入实现细节。看到不满意的画布内容直接选中文字或图表节点交给智能体重画即可——这是 Whiteboard 与普通截图工具的本质区别。进阶评审画布由哪些部分组成评审文档是结构化的智能体按固定章节写作What/Why改了什么、为什么→ Requirements → Design选一张最贴合的图时序图 / 流程图 / 数据库透镜→ Implementation从入口函数开始走读代码。教程示例文档可参考packages/review/tutorial/document.json配套的完整示例仓库位于 packages/review/tutorial/sample-service/。画布 UIReact 组件、布局库位于 packages/review/app/如果你想阅读源码了解它如何实现这些可视化这里是最佳起点。常见问题支持哪些智能体Claude Code、Codex、Cursor、Pi、OpenCode、OMPwhiteboard connect all可一次连接全部。能直接编辑文件吗目前不能Whiteboard 专注评审与讲解需求反馈请提交 issue见 SECURITY.md 与 CONTRIBUTING.md。隐私如何运行在本地 checkout 上匿名遥测不含你的代码、diff、画布文字或模型输出随时可关闭。详见 docs/privacy.md 与 docs/telemetry.md。多仓库评审跨多个仓库在单个评审中操作目前支持有限建议按仓库分别评审。小结只需记住三步装 Desktop → 连接智能体 → 让智能体画评审。10 分钟后你得到的是比原始 diff 更有信息量的交互式文档图可点、码可跳、决策可溯。Whiteboard 是 MIT 协议的开源项目一切都在你本机运行随时可以 fork 出自己的玩法。【免费下载链接】whiteboardopen-source canvas for thoughtful software design项目地址: https://gitcode.com/gh_mirrors/whiteboard36/whiteboard创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

Token Optimizer 安全深潜:Hook 会泄露数据或执行任意代码吗?零遥测隐私设计全解

Token Optimizer 安全深潜:Hook 会泄露数据或执行任意代码吗?零遥测隐私设计全解

Token Optimizer 安全深潜:Hook 会泄露数据或执行任意代码吗?零遥测隐私设计全解 【免费下载链接】token-optimizer Find the ghost tokens. Fix them. Survive compaction. Avoid context quality decay. 项目地址: https://gitcode.com/gh_mirrors/…

📅 2026/10/4 3:42:40
openrig 工作台:Claude Code 与 Codex 多工具环境整合实战

openrig 工作台:Claude Code 与 Codex 多工具环境整合实战

1. 从 openrig 说起:一个把 Claude Code 和 Codex 装进同一副骨架的终端工作台第一次看到openrig这个名字,我脑子里蹦出来的不是某个具体工具,而是一类东西——rig,在英文里是"钻井平台""装备架"的意思。搞过…

📅 2026/10/4 3:42:40
单节3.7V锂电池太阳能充电方案:基于TPS4059的MPPT恒流恒压设计

单节3.7V锂电池太阳能充电方案:基于TPS4059的MPPT恒流恒压设计

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/10/4 3:42:40
MORE NEWS

更多资讯

📰

OPNET模型库与仿真例子:从op_models到可跑通工程实战

简介:这份资源是面向网络仿真初学者与进阶学习者的OPNET实例合集,围绕网络性能模拟与分析场景,帮助读者从基础模型逐步过渡到复杂网络配置,解决建模思路不清、协议实现无从下手的问题。压缩包共收录1454个文件,约19.85…

📰

AI编码代理上下文压缩后如何接续?10天430条记录实测long_mem与engram方案

1. 为什么“上下文压缩”是 AI 编码代理绕不过去的坎先抛一个我自己的真实感受:用 AI 编码代理写代码,最爽的是前二十分钟,最崩溃的是第四十分钟。前二十分钟它记得你所有的约定——变量命名风格、目录结构、哪个模块不能动、上次那个 bug 是…

📰

OpenShell使用指南:替换Windows开始菜单与系统增强配置

如果你最近在技术社区里刷到 OpenShell 这个词,第一反应大概率是:这又是什么新冒出来的开源终端工具?实际上,OpenShell 在 Windows 用户圈子里已经存在很多年,它的前身叫 Classic Shell,是国内很多老玩家折…

📰

分布式A2A架构实战:从单体Agent到多Agent协作的演进与落地

1. 从单体到分布式:Agent 基础架构为什么必须走这一步1.1 一个 Agent 扛不住的时候,问题出在哪我最早做 Agent 项目的时候,和大多数人一样,先跑通一个单体 Agent 就觉得很满足了。一个进程里塞进规划器、工具调用、记忆模块、模型…

📰

基于华为昇腾与Xing4.0-29B的私有化编程数学教学Agent实战

1. 为什么要在教育场景里折腾私有化大模型先说说我为什么会盯上这个方向。过去大半年,我一直在做编程和数学方向的 AI 辅助教学工具,最开始用的是公有云 API,图省事,接上就能跑。但真到了学校机房、培训机构内网、企业内训这些场景…

📰

自研数据标注工具实战:基于AiLabel.js实现目标检测数据集高效标注

做AI项目我从来不怕调模型,就怕整理数据。去年公司接了一套工业质检识别系统,客户给了我超过6000张设备外观照片,要求把每处缺陷在图上框出来、标上缺陷类别,最后整理成可以直接进训练脚本的数据集。最开始我们买了一个在线标注平…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬