夜雨聆风最近，Codex生态中出现了两款画布工具——Cowart和Excalidraw，它们正在悄然改变设计师的工作方式。AI + 无限画布，正在带来设计工作流的质变。
一、认识Codex画布插件生态
什么是Codex画布插件？
Codex是OpenAI官方推出的桌面Agent智能体平台，画布插件则是扩展Codex能力的可视化工具。所谓"无限画布"，指的是无边界、可缩放的创意空间——你可以在一个画布上同时放置多个设计稿、标注、参考图，自由缩放、平移、组织，而不受传统文档的页面限制。
这种工作方式特别适合创意美术设计和前端UI设计：多版本对比、标注修改、迭代优化，都可以在同一个可视化空间中完成。
两大核心工具
Cowart：Codex专用画布插件
Cowart由开发者zhongerxin开源，基于tldraw构建，是专门为Codex设计的本地无限画布插件。
核心功能：
本地无限画布服务（默认端口43217） AI image holder图片生成 标注截图智能识别 本地数据持久化（保存在项目的canvas/目录）
工作原理： Cowart启动一个本地网页服务，画布数据保存在当前项目目录下，而不是云端。这意味着你的设计稿、标注、迭代历史都在本地，便于版本控制和团队协作。
GitHub地址： github.com/zhongerxin/cowart
Excalidraw：通用手绘风格白板
Excalidraw是一个开源的虚拟手绘风格白板工具，在GitHub上拥有超过121k Star，被Google Cloud、Meta、Notion等公司集成使用。
核心特点：
手绘风格美学，适合快速表达概念 实时协作与端到端加密 导出PNG、SVG格式 VSCode插件支持，可在IDE内直接编辑
官网： excalidraw.com
Cowart vs Excalidraw：如何选择？
简单来说： Cowart更适合AI图片生成和迭代，Excalidraw更适合绘制架构图、流程图和快速原型。两者可以配合使用——用Excalidraw表达概念，用Cowart进行AI设计迭代。
二、实战案例：几种神仙用法
案例一：UI界面快速迭代设计
场景： 设计师需要快速产出APP界面原型，需要多版本对比和快速修改。
传统方式的痛点：
反复修改提示词，每次重新生成 多个版本散落在不同对话中，难以对比 修改意见只能用文字描述，容易产生歧义
画布方式的解决方案：
在Codex中打开Cowart画布，创建AI image holder并设置目标尺寸比例。选中holder后，描述设计需求，Codex会按比例生成图片并插入到holder中。
迭代时，在画布上直接标注修改意见——用箭头指向需要调整的区域，添加文字说明。截图发送给Codex，它会读取标注生成去掉标注痕迹的新图，并把结果放在原图旁边。
效果对比：
- 传统方式：
反复修改提示词，每次重新生成，版本难以对比 - 画布方式：
可视化标注，精准迭代，多版本在同一画布上对比
案例二：AI绘画作品的标注优化
场景： AI生成的插画需要细节调整，传统方式难以精确表达修改意图。
痛点：
文字描述"把人物表情改得更自然"太抽象 多次尝试不同提示词，浪费生成次数 原图和修改版本分散，难以对比
解决方案：使用Excalidraw进行可视化标注
访问 excalidraw.com（无需注册），将AI生成的图片导入画布。使用手绘工具标注需要修改的地方：用箭头指向具体区域，添加文字说明，用不同颜色区分修改类型（红色=修改，绿色=新增）。
导出PNG格式的标注截图，发送给Codex，描述修改需求，生成修订版本。
优势分析：
- 可视化表达更直观：
箭头指向具体位置，避免文字描述歧义 - 保留原图对比参考：
标注图和原图在同一画布，便于对比 - 节省生成次数：
精准标注减少反复尝试
案例三：设计文档与架构图协作
场景： 前端团队需要快速产出技术架构图，设计师需要标注UI规范。
痛点：
技术架构图需要专业绘图工具，学习成本高 UI规范标注分散在多个文档中 团队协作需要统一的可视化平台
解决方案：Excalidraw + Cowart组合
使用Excalidraw绘制系统架构图，利用手绘风格快速表达概念，导出为SVG格式嵌入技术文档。通过Cowart进行UI标注，在画布上放置UI设计稿，用标注工具添加尺寸、颜色、间距说明。
工具组合技巧：
- Excalidraw：
架构图、流程图、概念表达 - Cowart：
UI设计迭代、AI图片生成 - 两者配合：
从概念到落地，完整的设计工作流
三、安装与配置指南
Cowart安装
Cowart支持自动安装和手动安装两种方式，具体步骤请参考GitHub项目文档：github.com/zhongerxin/cowart
快速安装提示：
让Codex自动安装：直接发送安装指令给Codex 手动安装：clone仓库到本地，运行npm install和npm run build 配置marketplace.json：确保插件正确注册到Codex插件市场
【图片占位：Cowart安装成功后的界面截图】
Excalidraw使用
Excalidraw提供三种使用方式：
- 在线使用：
访问 excalidraw.com，无需注册，即开即用 - VSCode插件：
安装 Excalidraw Editor 扩展，在IDE内直接编辑 - 本地部署：
clone仓库并运行，适合团队内部部署
具体部署步骤请参考GitHub项目文档：github.com/excalidraw/excalidraw
四、进阶技巧与最佳实践
技巧一：画布数据管理
Cowart的数据保存在项目目录的 canvas/ 下：
canvas/pages/<page-id>/cowart-canvas.json— 画布数据 canvas/pages/<page-id>/assets/— 图片资源
建议：
定期备份重要画布文件 使用Git版本控制追踪变更 建立命名规范（如 canvas/pages/ui-login-v1/）
技巧二：高效标注方法
使用不同颜色区分修改类型：
- 红色：
删除/修改 - 绿色：
新增 - 蓝色：
注释说明
保持标注简洁，避免过度标注。每个标注只指向一个具体的修改点，配合简短的文字说明。
技巧三：工作流优化
- 建立标准化命名规范：
如 ui-homepage-v1、ui-homepage-v2-annotated - 创建常用模板：
保存常用的画布布局作为模板 - 利用快捷键：
Excalidraw和Cowart都支持快捷键，提升操作效率
技巧四：团队协作
- Excalidraw实时协作：
多人可同时编辑同一画布 - 分享只读链接：
导出为只读链接，发给客户审阅 - 导出多种格式：
PNG用于演示，SVG用于文档，JSON用于版本控制
五、总结与资源
核心价值回顾
- Cowart：
AI图片生成的可视化迭代利器，深度集成Codex - Excalidraw：
通用手绘风格白板工具，适合架构图和流程图 - 两者结合：
从概念表达到AI设计迭代，完整的设计工作流解决方案
适用人群
创意美术设计师：AI绘画迭代、标注优化 前端UI设计师：界面原型快速迭代、多版本对比 技术团队：架构图绘制、UI规范标注
行动号召：
如果你也在使用AI工具进行设计工作，不妨尝试Cowart和Excalidraw。安装简单，上手快速，或许能给你的工作流带来意想不到的改变。
欢迎在评论区分享你的使用心得，或关注后续更多AI工具分享。
以上，既然看到这里了，如果觉得不错，随手点个赞、在看、转发三连吧～
谢谢你看我的文章，我们，下次再见。
/ 作者：赛博兔AI工坊 / 交流爆料联系邮箱：332302158@qq.com
