1. 项目概述在命令行里与AI共享一块“数字画布”如果你和我一样日常开发中重度依赖像Claude Code这类AI编程助手那你肯定遇到过这样的场景你让AI生成一段代码它给了你你又让它基于这段代码画个架构图它又给了你。但这两者之间是割裂的你需要在聊天记录里翻找手动把代码片段和图关联起来更别提让AI基于之前的输出进行迭代或组合了。整个过程就像在一条狭窄的单行道上对话缺乏一个能俯瞰全局、自由组织的空间。这就是flowith-ai/canvas-cowork这个技能Skill要解决的问题。它不是一个独立的应用而是一个为AI Agent特别是通过MCP协议接入的如Claude Code设计的“空间画布”协作扩展。简单来说它给你的AI助手在 Flowith 平台上开辟了一块共享的、可视化的白板。在这块画布上你和AI可以共同创建节点Node这些节点可以是文本、图片、视频甚至是AI多步推理Agent的完整记录。最酷的是这一切都可以直接从你的命令行CLI发起和操控。想象一下你正在终端里用Claude Code调试一个后端API。你可以让它生成接口文档文本节点然后基于文档自动画出时序图图片节点最后再生成一段演示用的Mock数据视频视频节点。所有这些产出物不再是聊天记录里孤立的文本块而是被有序地放置在同一个画布空间里彼此通过位置关系形成逻辑关联。你甚至可以让AI“回忆”起之前在所有画布上做过的工作通过语义搜索快速找到相关内容。对于需要处理复杂、多模态任务的开发者、内容创作者或研究者来说这相当于为AI装配了一个外置的、可持久化的工作记忆和创作沙盒。2. 核心概念与架构解析要玩转这个工具首先得理解几个核心概念以及它们是如何协同工作的。这能帮你从“照着命令敲”升级到“理解为什么这么设计”从而更灵活地运用它。2.1 核心组件Skill, Canvas, Node 与 Flowith 平台这个项目的核心是一个MCPModel Context Protocol Skill。MCP是Anthropic推出的一种协议旨在让AI模型如Claude能够安全、标准化地使用外部工具和数据源。一个Skill就是一组遵循MCP规范的工具Tools和资源Resources的集合。canvas-cowork这个Skill为Claude Code这样的AI Agent提供了操作画布的一系列工具。那么画布和节点又是什么Canvas画布你可以把它理解为一个无限大的、可缩放的二维数字白板。每个画布都有一个唯一的ID和名称比如“Dog Artwork”或“微服务架构设计”。它是所有创作活动的容器和舞台。Node节点画布上的基本元素单位。一个节点代表一项独立的产出或一个工作单元。根据“模式”Mode的不同节点可以是一段文本如代码、分析报告、文章。一张图片由文本描述生成。一段视频由文本描述生成。一个Agent或Neo会话的完整记录包含AI多步思考、调用工具、最终输出的全过程。Flowith 平台这是承载画布和节点的云端服务。它提供了Web界面让你可以可视化地浏览、拖拽、连接画布上的所有节点。CLI技能的所有操作最终都会实时同步到Flowith的云端画布上。这意味着当你在命令行触发一个生成任务时你可以在浏览器中打开对应的Flowith画布亲眼看到一个新的节点图标出现甚至看到一个代表AI Agent的“光标”在画布上移动、创建内容体验非常奇妙。2.2 工作流程与数据流整个协作流程是一个典型的“人机协同循环”发起CLI你在终端通过特定的Bun命令指示Claude Code作为你的AI Agent去执行一个动作例如create-canvas创建画布或submit提交生成任务。执行与同步Agent FlowithClaude Code接收到指令后会通过MCP调用canvas-coworkSkill中对应的工具。该工具会将你的请求如“a golden retriever in a wheat field”和当前模式如image打包通过API发送到Flowith后端。生成与放置Flowith AI服务Flowith后端接收到请求会协调相应的AI服务可能是集成的图像生成模型、视频生成模型或Claude自身进行复杂推理进行内容生成。生成完成后结果会自动作为一个新的节点被放置在你指定的画布或默认画布上。反馈与读取CLI生成任务完成后你可以通过read-db等命令将节点内容以Markdown、文本或链接的形式读回命令行进行下一步处理或查看。可视化与迭代Web CLI你可以随时在浏览器中打开Flowith以图形化方式查看整个画布的全貌理清节点间的逻辑。基于这个视图你可以再回到命令行发起新的生成任务或者使用recall命令语义搜索历史节点实现工作的延续和迭代。这个架构的精妙之处在于它将命令行的效率与自动化能力和可视化界面的全局观与组织能力结合了起来。CLI用于快速发起任务和获取结果Web界面用于宏观管理和灵感激发。2.3 模式Mode深度解读模式是这个技能的核心控制开关它决定了你提交的提示词Prompt将被如何解释和执行。官方文档给出了四种模式但其中的agent/neo模式尤其值得深究。text模式最直接的模式。你的提示词会被发送给AI模型通常是Claude模型返回的纯文本回答会直接作为一个文本节点保存在画布上。适用于问答、代码生成、文案撰写等。image模式提示词被理解为对图像的描述。Flowith后端会调用其集成的图像生成模型具体模型未知但效果类似Midjourney或DALL-E生成图片后以节点形式保存。返回给CLI的通常是一个Markdown格式的图片链接方便你在支持Markdown的环境下直接查看。video模式与图像模式类似但生成的是短视频片段。由于视频生成计算量更大、耗时更久CLI返回的很可能是一个指向生成中或已生成视频的链接。agent/neo模式这是最强大也最复杂的模式。在此模式下你提交的提示词不是一个简单的问答或生成指令而是一个复杂的、多步骤的项目目标。例如“研究一下WebSocket在实时聊天应用中的最佳实践并给出一个包含前端React和后端Node.js的示例项目方案”。工作方式AIClaude会进入一个“规划-执行”循环。它可能会先拆解任务规划步骤然后可能调用其他工具如代码执行、网络搜索——如果Skill支持逐步推进最终产出一个结构化的交付物。这个完整的思考过程、中间步骤和最终结果会被完整地记录并保存为一个“Agent节点”。在Flowith画布上点开这个节点你看到的可能是一棵展开的“思维树”清晰地展示了AI是如何一步步完成任务。这对于复杂问题求解、研究和自动化流程构建至关重要。实操心得模式选择是策略关键不要仅仅把模式看成生成类型的切换。它们对应着不同的资源消耗时间、计算成本和产出粒度。对于快速原型和头脑风暴用text和image模式进行喷射式生成非常高效。但对于需要严谨结论或可执行方案的任务切换到agent模式让AI展示其“工作过程”不仅能得到更可靠的结果其过程本身也具有巨大的学习和审计价值。我个人的习惯是简单任务用text/image快速验证想法复杂任务则创建一个专门的画布用agent模式让AI深度工作并把整个过程存档。3. 环境准备与技能安装实战在开始挥洒创意之前我们需要把“画笔”技能和“颜料”环境准备好。这个过程虽然不复杂但有几个关键点容易踩坑。3.1 前置条件检查根据文档你需要两个核心前提一个已登录的 Flowith 账户这是画布的云端存储和渲染平台。你需要访问 flowith.io 注册并登录账号。最关键的一步是确保你的浏览器当前保持着有效的登录会话。因为canvas-coworkSkill 很可能通过浏览器本地存储的认证信息如Cookie来与Flowith API通信实现CLI操作与Web界面的联动。如果你在浏览器中打开了Flowith并处于登录状态通常就满足了条件。Bun 运行时这是一个新兴的JavaScript/TypeScript运行时以其极快的启动速度和内置的包管理器、测试运行器而闻名。canvas-cowork的技能命令示例都使用bun来执行。安装Bun如未安装如果你的系统还没有Bun安装非常简单。打开终端执行以下命令之一即可# 官方推荐的安装方式 (macOS, Linux, WSL) curl -fsSL https://bun.sh/install | bash # 或者使用 npm如果你有Node.js环境 npm install -g bun安装完成后运行bun --version验证是否成功。3.2. 技能安装与验证安装技能的命令看起来有点特别npx skills add flowith-ai/canvas-cowork。这里涉及到另一个概念skills.sh。skills.sh似乎是一个MCP Skill的管理平台或命令行工具。npx是Node.js的包执行器npx skills add意味着它正在从某个Skill仓库可能是npm也可能是skills.sh自己的注册中心拉取并安装名为flowith-ai/canvas-cowork的Skill包。安装步骤在终端中直接运行安装命令npx skills add flowith-ai/canvas-cowork命令执行过程中可能会提示你进行一些配置比如授权该Skill访问你的Flowith账户。请根据提示完成操作。安装成功后这个Skill就会被添加到你的MCP Skill集合中。接下来你需要在你使用的AI Agent客户端这里是Claude Code中配置并启用这个Skill。配置Claude Code以Cursor IDE为例Claude Code通常作为插件或集成功能存在于像Cursor、Windsurf这类IDE中。你需要找到其MCP服务器配置部分。在Cursor中这通常在设置Settings的Claude或Advanced部分有一个MCP Servers的配置项。你需要添加一个新的MCP服务器配置指向刚刚安装的canvas-coworkSkill。具体的配置方式取决于skills.sh是如何暴露这个Skill的。一个常见的模式是安装后它会提供一个本地运行的服务器命令或socket路径。你需要查阅canvas-cowork项目更详细的文档如提到的SKILL.md来获取准确的MCP服务器连接信息。验证安装配置完成后重启你的IDE或Claude Code会话。然后你可以尝试在Claude Code的聊天框中询问它“你现在有哪些可用的工具” 或者 “你能使用canvas-cowork技能吗”。如果配置正确Claude Code应该会列出可用的工具其中包含create_canvas,submit_to_canvas等与画布协作相关的功能。这才是技能安装成功的最终标志。注意事项环境隔离与认证问题浏览器会话确保你用于安装和测试的终端环境其所在的用户会话与保持Flowith登录状态的浏览器会话是同一用户。在某些系统或远程开发环境中可能存在会话隔离导致CLI无法读取到浏览器的认证信息。网络问题Flowith服务可能需要稳定的网络连接。如果遇到超时或连接错误请检查你的网络环境。技能版本像skills.sh这样的新兴平台其Skill管理方式可能变化较快。如果官方安装命令失效最好的方式是去项目的GitHub仓库如果开源查看最新的安装指南。4. 从入门到精通核心命令实操详解安装配置妥当我们终于可以上手操作了。官方Quick Start给出了几个例子但让我们拆解得再细一些并补充一些隐含的最佳实践。4.1 创建你的第一块画布与单次生成一切从创建一块画布开始。画布是你的工作区给它起个有意义的名字很重要。# 语法bun $S --bot claude-code create-canvas “画布名称” bun $S --bot claude-code create-canvas “我的第一个AI协作画布”命令解析bun: 使用Bun运行时执行。$S: 这是一个环境变量很可能指向你系统中skills.sh命令行工具的路径或一个特定的脚本入口。你需要确保这个变量已正确设置。如果未设置可能需要用绝对路径替代如/path/to/skills。--bot claude-code: 指定使用哪个AI Bot来执行这个技能工具。这里明确使用claude-code。create-canvas: 技能提供的工具名用于创建画布。“我的第一个AI协作画布”: 画布的名称。执行成功后你应该会在终端看到创建成功的反馈同时在Flowith网站的“最近画布”或列表里应该能看到这块新画布。接下来让我们生成一张图片。这需要两步设置模式然后提交提示词。# 1. 切换到图片生成模式 bun $S --bot claude-code set-mode image # 2. 提交生成任务并等待完成 bun $S --bot claude-code submit “一只在星空下奔跑的柴犬赛博朋克风格霓虹灯光” --wait关键参数--wait 这个参数至关重要。没有它命令会立即返回提交一个异步任务。对于图片、视频生成这种耗时操作你需要--wait来让CLI阻塞等待直到生成完成并返回结果如图片的Markdown链接。否则你只能得到一个“任务已提交”的响应还得用其他命令去查询结果。执行成功后终端会输出类似![生成图片](https://flowith.io/.../image.png)的Markdown文本。同时打开你的Flowith画布你会看到一个代表图片的新节点已经出现在画布中央。4.2 批量生成与高效内容喷射当你需要快速生成一系列相关但不连续的内容时比如为文章配图生成多个备选方案或者为一个产品想多个Slogan逐条submit效率太低。这时就需要submit-batch。# 为不同的狗品种生成肖像画 bun $S --bot claude-code set-mode image bun $S --bot claude-code submit-batch “威严的德牧肖像” “微笑的萨摩耶” “沉思的哈士奇” “可爱的柯基”工作原理submit-batch会把你提供的多个提示词以空格分隔长提示需用引号包裹作为独立的并行任务提交。Flowith后端会同时处理这些请求大大缩短总体等待时间。你可以在Flowith画布上看到多个节点几乎同时出现。生成完成后如何快速查看所有结果使用read-db命令。# 读取当前画布上所有节点的信息 bun $S --bot claude-code read-db # 使用 --full 参数获取更详细的内容如图片链接、长文本 bun $S --bot claude-code read-db --fullread-db默认可能只返回节点的ID、类型和标题等元数据。--full参数则会尝试获取节点的完整内容对于图片节点它会返回可嵌入的Markdown链接对于文本节点它会返回完整文本。这是你将画布内容“拉取”回本地终端进行后续处理的关键步骤。4.3 高级功能语义搜索与复杂任务代理随着画布越来越多节点数量爆炸如何快速找到过去的工作成果这就是recall命令的用武之地。# 在所有画布中搜索与“logo”和“minimalist”相关的图片节点 bun $S recall “minimalist logo design” --type image语义搜索的力量recall并非简单的关键词匹配。它很可能利用了嵌入Embedding技术将你的查询语句和所有历史节点的内容/描述转换为向量然后进行相似度计算。这意味着你可以用自然语言描述你的需求即使你记不清当初具体用了什么词它也能找到相关的内容。--type参数可以过滤节点类型让你在图片、文本或视频中精准查找。最后我们来探索最强大的agent模式。让我们完成一个稍微复杂的任务。# 1. 切换到agent模式有时也叫neo模式 bun $S --bot claude-code set-mode agent # 2. 提交一个复杂任务 bun $S --bot claude-code submit “请设计一个简单的个人博客系统API。要求1. 使用Node.js和Express框架。2. 实现博客文章的CRUD操作。3. 包含用户认证JWT。4. 给出主要的API端点设计和数据模型Mongoose Schema。5. 最后生成一个部署到Vercel的简要步骤。”提交这个任务后Claude Code会进入“Agent”工作状态。它可能会先规划任务步骤。然后分步生成Express应用结构、编写具体的路由控制器代码、定义Mongoose Schema。可能会模拟运行或检查代码逻辑。最后整理出完整的API设计文档和部署指南。整个过程会被完整记录。在Flowith画布上你不会只看到一个代码块节点而可能会看到一个父节点“设计博客API”下面连接着多个子节点分别对应“项目结构”、“用户模型”、“文章模型”、“认证中间件”、“路由文件”、“部署说明”等。点击每个子节点都能看到AI在该步骤的具体思考和产出。这不仅是结果更是可复现、可审计的思维过程。实操心得命令组合与工作流单一命令威力有限组合起来才能形成工作流。我常用的一个模式是recall-set-mode-submit。开始新项目前先用recall “类似的项目名或概念”搜索历史画布看看有没有可复用的组件或灵感。找到相关节点后在画布上查看其上下文。回到CLI用set-mode切换到所需模式如agent。基于找到的灵感构造更精确的提示词用submit发起新的、更深度的生成任务。 这种“搜索-启发-深化”的循环能极大提升创作和研究的连续性与质量。5. 常见问题排查与性能优化技巧在实际使用中你肯定会遇到一些问题。下面是我踩过的一些坑以及解决方案希望能帮你节省时间。5.1 安装与连接类问题问题现象可能原因排查步骤与解决方案运行npx skills add ...失败报错“command not found”或网络错误。1. Node.js/npm 环境异常。2.skills.sh命令行工具未全局安装或配置。3. 网络连接问题。1. 检查Node.js和npm版本node --version,npm --version。2. 尝试直接安装skills.sh CLInpm install -g skills.sh/cli(如果存在此包)。3. 查看项目GitHub的README或SKILL.md确认最新的安装方式。4. 检查代理或防火墙设置。命令执行成功但Claude Code中看不到canvas-cowork的工具。1. MCP服务器配置错误。2. Claude Code客户端未正确加载配置。3. Skill安装路径未被正确引用。1.最重要仔细核对Claude Code中MCP服务器的配置。确保路径、命令或socket文件与skills.sh安装后提供的完全一致。2. 重启你的IDE或Claude Code会话。3. 在Claude Code中手动输入/list_tools或类似命令强制刷新工具列表。执行submit命令时报“Authentication failed”或“No active session”。1. 浏览器中Flowith未登录或会话过期。2. CLI环境无法读取浏览器认证信息跨用户、无头环境。1. 打开浏览器访问 flowith.io确认处于登录状态。2. 尝试在同一个用户图形会话下的终端中操作对于Linux/macOS。3.备选方案查看Skill文档是否支持通过API Token等方式认证。可能需要手动在Flowith网站上生成一个Token并设置到环境变量中。5.2 使用与生成类问题问题现象可能原因排查步骤与解决方案submit图片或视频任务后长时间无响应或失败。1. 生成任务排队或服务器负载高。2. 提示词语义不清导致AI模型无法生成。3. 内容可能触发生成服务的安全策略。1. 使用--wait参数耐心等待图像/视频生成通常需要数十秒到数分钟。2. 检查Flowith画布看节点是否处于“生成中”状态。3.优化提示词对于图像使用更具体、艺术化的描述风格、构图、光线。对于视频描述简短场景动作。4. 避免生成涉及真人肖像、暴力、特定商标等可能受限的内容。recall搜索不到明明存在的节点。1. 搜索词与节点内容语义关联度低。2. 节点内容未被正确索引如刚生成不久。3.--type过滤条件设置错误。1. 尝试用更自然、更概括的语言搜索而不是精确匹配的片段。2. 等待几分钟让后台的索引更新。3. 先不用--type过滤进行全局搜索确认节点是否存在。4. 在Flowith网页端直接使用其搜索功能进行对比。agent模式任务运行到一半似乎“卡住”或产出不理想。1. 任务过于复杂AI的“思考”步骤陷入循环或歧途。2. 提示词指令不够清晰导致AI目标不明确。1.分解任务不要试图用一个submit解决一个巨型项目。将大任务拆分成多个连续的、目标明确的agent任务分画布或分阶段进行。2.提供更清晰的指令和约束在提示词中明确步骤、格式要求、不要做什么。例如“请分三步进行第一步…第二步…第三步…最终输出一个Markdown文档。”3. 在Flowith画布上查看Agent节点的详细展开树定位AI在哪一步出现了困惑然后基于此调整你的下一个提示词。5.3 性能优化与最佳实践画布组织策略不要把所有东西都扔进一个画布。建议按项目或主题创建独立的画布。例如“后端用户系统设计”、“前端组件库灵感”、“周报数据可视化”各建一个画布。这样结构清晰recall搜索时也更精准。节点命名与注释虽然节点内容本身能被语义搜索但为重要的节点在Flowith网页端添加一个简短的标题或标签能极大提升后期查找和管理的效率。这相当于为你AI的产出建立了人工索引。批量操作的取舍submit-batch虽快但会同时占用较多的服务器资源配额如果存在的话。对于非紧急的、探索性的任务可以不用--wait异步提交让它们在后台慢慢生成。对于需要立即使用的关键内容再用--wait同步等待。混合模式使用一个复杂项目往往需要多种产出。你可以在一个画布里灵活切换模式。例如先用agent模式生成项目方案和代码框架然后切换到image模式为方案生成架构图再用text模式写一份总结。所有相关产出都汇聚在同一空间。CLI与Web界面协同将终端和浏览器并排摆放。在CLI中执行命令的同时在浏览器中观察画布的实时变化。这种即时反馈不仅能确认命令生效还能带给你一种与AI“并肩作战”的沉浸感并能从可视化的布局中获得新的灵感从而触发下一轮CLI指令。这个工具的魅力在于它模糊了“使用AI”和“与AI协作”的边界。你不再是单向地发送指令和接收文本而是在一个共享的、可延展的空间里与一个具备记忆和空间感知能力的智能体共同构建想法。从简单的命令到复杂的工作流从零散的产出到系统的知识库canvas-cowork提供了一套极具潜力的范式。