【免费下载链接】Cowart项目地址https://gitcode.com/gh_mirrors/co/Cowart点击查看免费下载Cowart 是一个面向 Codex 的原生无限画布 widget 插件它把 tldraw 画布直接作为 MCP widget 嵌入 Codex 界面用于构思、标注、AI 图片生成、AI HTML 页面、AI 影片与 AI Slides 演示文稿的创作与迭代。本文基于仓库根目录 README.md 展开并结合 mcp/server.mjs、mcp/lib/canvas-storage.mjs、src/filmConfig.js 等源码完整讲解插件的安装、五大创作工作流、MCP 工具层原理与本地开发方式读完即可在 Codex 中落地一套「画布即工作台」的 AI 视觉创作流程。界面速览画布上的完整创作链路打开画布、生成新图、制作 AI 影片这三步构成了 Cowart 最核心的使用闭环下面对应仓库 assets 目录中的真实界面截图Cowart 是什么面向 Codex 的原生无限画布插件Cowart 的核心定位是Codex 原生无限画布 widget 插件。它基于 tldraw 提供可视化画布用于构思、标注、生成图片和根据标注图迭代图片。与传统的「本地网页服务 in-app browser 打开」方案不同Cowart 的画布由 MCP widget 直接打开数据默认保存到当前用户项目的canvas/目录而不是保存到插件仓库里。仓库同时遵循 Agent Plugins v1.0.0 规范见根目录 plugin.json 的$schema声明根目录的plugin.json、skills/和mcp.json提供可移植插件入口.codex-plugin/plugin.json、.mcp.json和.agents/plugins/marketplace.json保留 Codex 专用的界面与安装元数据。其中 mcp.json 声明了cowart_mcp这个 stdio 类型的 MCP 服务入口命令为node ./scripts/start-mcp.mjs。当前仓库版本为0.1.37见 plugin.json 与 package.jsonplugin.json中通过extensions[com.openai]声明了 Cowart 在 Codex 中的显示名称、品牌色#25BFEF、能力列表与默认提示词如「Open the Cowart canvas for this project.」。核心功能一览在 Codex 中打开一个原生 tldraw 无限画布 widget正常使用不再通过网页浏览器或 in-app browser 打开本地页面。在当前项目目录中持久化画布页面和图片资源。在画布中创建AI 图片框直接输入 prompt、选择参考图并让 Codex 按选中框的位置和比例生成图片后替换它。创建 16:9 的AI HTML框通过 prompt 和参考图生成可运行的单文件 HTML并直接嵌入画布继续编辑或迭代。创建AI 影片把 prompt 和参考图变成带分镜、运动、音乐与音效的 HTML/JS 动效影片支持画布内预览、编辑文字和导出 MP4。创建AI Slides将图片和 HTML 组织成演示文稿或让 Codex 按指定页数生成一组 16:9 HTML 页面支持缩略图预览和全屏播放。标注好图片后可从画布里直接提交标注截图让 Codex 根据标注生成干净的新图并放到原图旁边。通过 Cowart MCP 工具读取选择状态、保存画布、插入图片或 HTML并保存到页面本地资源目录。安装与更新[!IMPORTANT] 安装完成后请务必完全退出并重新启动一次 Codex再开始使用 Cowart。重启后Cowart 的新技能和 MCP 工具才能完整加载。让 Codex 自动安装把下面这段发给 Codex请通过 Cowart 仓库自带的 Git marketplace 安装 Cowart Codex 插件。 先运行 codex plugin marketplace add zhongerxin/Cowart --ref main 再运行 codex plugin add cowartcowart-github并用 codex plugin list 确认插件已启用。 Cowart 发布包已经包含自包含 MCP 和预构建 Widget安装后不会在插件缓存里执行 npm install也不要求新用户预装 tldraw 不要在当前仓库、插件缓存或 marketplace 快照目录手动安装依赖。 不要把仓库 clone 到 personal marketplace。安装完成后请明确提醒我 必须完全退出并重新启动一次 Codex再开始使用 Cowart。手动安装先把 Cowart 的 Git 仓库注册为 Codex marketplacecodex plugin marketplace add zhongerxin/Cowart --ref main再从这个 marketplace 安装并检查 Cowartcodex plugin add cowartcowart-github codex plugin list不需要手动查找插件缓存目录。如果cowart-github已经注册可以跳过第一条marketplace add命令。安装后请完全退出并重新启动一次 Codex让新的 skill、MCP 工具和发布产物完整加载。更新插件Codex 会在启动插件系统时自动检查这个 Git marketplace并在远程main分支发生变化后刷新已安装的 Cowart。需要立即检查更新时可以手动运行codex plugin marketplace upgrade cowart-github更新可能会替换插件缓存。更新后请完全退出并重新启动 Codex。零依赖安装的底层设计README 强调「安装后不会在插件缓存里执行 npm install也不依赖 node_modules、tldraw、npm 或网络」这一点可以从 scripts/start-mcp.mjs 的实现得到印证启动脚本首先校验mcp/generated/下的三个发布产物必须存在cowart-mcp.mjs自包含 MCP bundle、cowart-widget.html预构建的单文件 Widget和release-manifest.json随后校验release-manifest.json的版本与package.json的版本一致不一致直接报错提示重新npm run build:artifacts最后通过import直接加载cowart-mcp.mjs整个进程不触发任何依赖安装。因此 Codex 可以直接发现render_cowart_canvas_widget运行时不会执行npm install。开发依赖如tldraw、vite、react等见 package.json 的devDependencies只用于 Cowart 维护者在发布前重新生成这些产物。快速上手打开画布侧边栏与全屏入口支持 OpenAI MCP Extensions 的 Codex 版本会在全局导航的「更多」菜单中显示 Cowart该能力依据 Extensions 规范的 global entrypoint 与 display modes 定义实现导航入口由工具的_meta[openai/ui].entrypoints注册全屏偏好由 HTML 资源的_meta[openai/ui]声明。可以使用宿主提供的图钉固定入口点击后直接进入系统文稿目录下唯一的Cowart/canvas/画布不展示目录选择页。支持在同一画布内切换 page没有 page 时自动创建第一个。入口行为有两个关键分支在 skills/cowart-open-canvas/SKILL.md 与 mcp/server.mjs 的render_cowart_canvas_widget实现中均有说明导航入口传入空参数macOS 默认保存到~/Documents/Cowart/canvas/Windows 使用系统实际的文稿位置兼容 OneDrive/重定向。这是所有用户共享的一个本地画布按 page 组织只有不存在任何 page 时才创建第一个。项目聊天中指定projectDir直接打开该项目的canvas/不依赖文稿目录不迁移已有数据。每次画布发送的 AI 请求都携带该存储路径。测试可用COWART_DOCUMENTS_DIR环境变量重定向文稿目录避免触碰真实作品。以上能力自0.1.30起提供安装或更新后请完全退出并重启 Codex以加载新的导航入口。打开画布在 Codex 中说Open the Cowart canvas for this project.Cowart 会通过render_cowart_canvas_widget打开 Codex 原生 widget不需要再启动本地网页服务或手动打开 in-app browser工具返回的openai/outputTemplate: ui://widget/cowart/canvas.html会告诉 Codex 直接渲染该 widget。scripts/start-canvas.sh只保留为本地开发 fallback。画布数据会保存在当前项目目录下canvas/pages/page-id/cowart-canvas.json canvas/pages/page-id/assets/五大创作工作流生成新图AI 图片框打开 Cowart 画布。在画布里创建并选中一个AI 图片框。在弹出的生成面板里输入 prompt也可以选择一张或多张参考图然后点击发送。Cowart 会把 prompt、参考图和选中AI 图片框的尺寸信息发送给 Codex。Codex 会按这个框的位置和比例生成图片然后把AI 图片框替换成普通图片形状。从源码看这一步最终由insert_cowart_image工具落地mcp/server.mjs。它的核心行为在 insertCowartImageInTransaction 中体现目标形状通过anchorShapeId/sourceShapeId/ 当前选择cowart-selection.json三层优先级确定默认matchAnchor ! false且replaceAiImageHolder ! false会替换选中的 AI 图片框新图继承框的宽高与旋转角并删除原框及其全部后代形状若没有选中框则按placementright/left/below默认right和margin默认40把图放到锚点旁边choosePlacement还会做最多 60 次的无重叠探测未指定尺寸时图片显示宽度默认为Math.min(原始宽度, 512)高度按原始宽高比计算图片被复制到当前 page 的assets/目录文件名冲突时自动追加-v2、-v3等后缀同时在画布快照中创建 tldraw 的 image asset 与 image shape 记录并写入cowartGeneratedForAiImageHolder等元数据。根据标注图生成修订图在 Cowart 画布中对图片做标注。选中被标注的图片点击按标注修改。Cowart 会导出包含原图、箭头和标注文字的截图并通过 widget bridge 发送给 Codex。Codex 会读取截图里的标注和箭头生成去掉标注痕迹的新图并把结果放在原图旁边。原图和标注不会被删除或移动。你也可以手动把 Cowart 标注截图发给 Codex走同样的修订流程。对应技能为cowart:cowart-image-edit修订结果通过insert_cowart_image写入时会在 shape meta 中记录cowartAnnotationScreenshot与cowartAnnotationSourceShapeId便于溯源。生成 AI HTML在工具栏中创建并选中一个AI HTML框新建框默认是1024 × 57616:9。在框下方的生成面板中输入 prompt也可以选择或粘贴一张或多张参考图。点击发送后Codex 会生成完整可运行的单文件 HTML并把它嵌入选中的AI HTML框。生成后的 HTML 会作为画布中的嵌入页面保存在当前 page 的assets/目录。选中它后可以下载渲染图、直接编辑文本也可以结合画布标注继续修改 HTML或根据 HTML 和标注生成图片。底层由insert_cowart_html_draft工具完成mcp/server.mjs。它的实现要点insertCowartHtmlDraftInTransaction包括优先原位更新已有的 HTML draftupdateExistingDraft默认开启保留原 shape id 与 indexHTML 文件写入 pageassets/目录针对AI HTML占位框则替换占位框replaceDraftHolder通过expectedRevision做并发控制画布在加载后发生变化会拒绝写入避免旧快照覆盖新编辑内容以 SHA-256 哈希cowartHtmlDraftContentHash记录版本便于后续比对HTML 在画布中通过虚拟 URLhttp://cowart.local/page-assets/page-id/file.html引用本地文件只有文件与内联内容字节完全一致时才会被压缩为文件引用见 canvas-storage.mjs 的compactFileBackedHtmlDrafts否则保留完整内联 fallback确保内容永不丢失。生成 AI 影片把产品发布、动态文字、抽象物理、叙事短片或数据流的创意放进画布选择风格与时长输入描述并按需添加参考图Codex 就会制作可播放的 AI 动效影片。你可以在原位预览镜头节奏、编辑文字并导出含音乐与音效的 MP4。影片风格在 src/filmConfig.js 中统一定义共五种风格 id中文标签适用场景product-launch产品发布材质、镜头与产品亮点kinetic-type动态文字字形变换与节拍排版abstract-physics抽象物理碰撞、弹性与连续形变editorial-story叙事短片分镜叙事与纸感拼贴data-flow数据流粒子、路径与信息可视化服务端对影片元数据的归一化逻辑见 mcp/server.mjs时长被钳制在1–120秒之间默认15秒默认风格product-launch默认不静音。独立插入影片时默认尺寸为1024 × 57616:9。影片的运行时契约由技能文档 skills/cowart-film-gen/SKILL.md 与references/runtime-contract.md定义核心约定包括生成结果必须是单文件、自包含的 HTML内联 CSS/JS参考图内联为 data URL不依赖 CDN、远程字体、npm 或运行时构建实现window.CowartFilm { duration, seek(seconds), play(), pause(), setMuted(bool) }seek必须可确定性逐帧定位实现renderAudio({ sampleRate: 48000, numberOfChannels: 2 })返回完整时长的 AudioBuffer供容器导出带音乐与音效的 MP4帧内容按 30 FPS 时间网格定位不使用墙上时钟或未设种子的随机数文本保留为可编辑 DOM带稳定的data-cowart-text-id避免把重要文字光栅化进 canvas生成流程要求先对真实projectDir/canvasDir/draftShapeId调用insert_cowart_html_draft并携带dryRun: true做权限与目标预检最终插入必须省略dryRun且不得把预检成功当作影片已插入。创建与演示 AI Slides在工具栏中创建一个AI Slides。默认外框是1048 × 600对应一页1024 × 57616:9内容和四周各12px的留白。可以把画布中的图片或 HTML 拖入 Slides也可以复制图片后选中 Slides再粘贴进去内容会自动按顺序横向排列。空 Slides 被选中时会显示生成面板。输入整套演示的描述、按需添加参考图并选择 3、5、10 页或自定义页数默认是 5 页。发送后Codex 会生成指定数量、视觉与叙事连贯的独立 16:9 HTML 页面并依次加入当前 Slides。Slides 已有内容时不再显示生成面板。选中 Slides 后点击演示 Slides可以通过左侧缩略图预览和切换页面也可以进入全屏播放。全屏时支持方向键、空格键和点击静态画面翻页HTML 自身的按钮、链接和表单交互会保留播放控制栏固定在顶部。Slides 的插入逻辑同样复用insert_cowart_html_draft当目标形状带cowartAiSlides元数据时mcp/server.mjs工具会读取外框的cowartAiSlidesPadding默认12与cowartAiSlidesGap默认32把新生成的 16:9 HTML 页面按顺序追加到 Slides 框内部mcp/server.mjs。Cowart MCP 工具层深入工具清单cowart_mcp服务注册了如下工具常量定义见 mcp/server.mjs工具作用render_cowart_canvas_widget打开/重新打开/刷新原生画布 widgetget_cowart_canvas_state读取项目落盘的画布快照、视图状态与存储路径save_cowart_canvas_state持久化画布快照支持expectedRevision并发校验save_cowart_selection_state保存当前选择状态到canvas/cowart-selection.jsonsave_cowart_view_state保存当前 page 与相机状态到canvas/cowart-view-state.jsonget_cowart_selection读取当前选中形状及 AI 影片风格/时长/静音元数据insert_cowart_image把本地位图复制进 page 资源目录并插入/替换画布形状insert_cowart_html_draft保存并嵌入单文件 HTML 或 AI 影片支持原位更新与 Slides 追加save_cowart_reference_image把 widget 选中的参考图存入 page 资源目录read_cowart_page_asset按/page-assets/...懒加载读取图片或 HTML 资源download_cowart_file把图片、HTML draft 或导出包保存到系统 Downloads 目录copy_cowart_image_to_clipboard当 iframe 无法使用浏览器剪贴板 API 时写入系统剪贴板仅 PNGmacOS 走 osascriptWindows 走 PowerShelltrack_cowart_analytics_event记录匿名使用事件GA4 / PostHog两通道互不阻塞其中render_cowart_canvas_widget是唯一通过 app tool 注册的全屏入口工具registerWidgetResource注册了ui://widget/cowart/canvas.html资源并声明了 connect/resource/frame 三类域名白名单mcp/server.mjs当画布快照小于32 KBMAX_INITIAL_CANVAS_STATE_BYTES时才随工具结果内联携带大项目则通过路径在 widget 内按需加载。数据持久化per-page 存储与事务锁README 展示的canvas/pages/page-id/cowart-canvas.json只是画布存储形态之一。从 mcp/lib/canvas-storage.mjs 可以看到完整布局per-page 形态有 page 时每个 page 一个canvas/pages/page-id/cowart-canvas.json外加pages/manifest.json记录页面顺序page 内资源放在page-id/assets/保存时会把 data URL 资源本地化localizePageAssets为文件引用并原子写入临时文件 rename。legacy 单文件形态无 page 时退化为canvas/cowart-canvas.json。附加状态文件cowart-selection.json选择状态、cowart-view-state.json当前页与相机。并发安全是这套存储的重点withCowartCanvasTransactioncanvas-storage.mjs用「每画布内存队列 .cowart-canvas-lock目录下的文件锁」实现跨进程互斥锁内采用 Lamport bakery 排序等待超时为 30 秒每次保存还会校验expectedRevision快照的 SHA-256并在protectImageRecords开启时拒绝「图片形状无确认消失」的破坏性写入blocked-destructive-image-loss。本地开发与质量保障npm install npm run dev npm run buildnpm run build会重新生成并校验 mcp/generated 下需要随 Git 版本提交的自包含 MCP 和 Widget 发布产物。提交源码改动前还应运行npm run quality脚本定义见 package.json其中包含一个没有node_modules、使用全新临时目录且禁止调用 npm 的冷启动探针scripts/probe-cold-install.mjs。值得关注的实现细节npm run probe:widget:startup检查实际 MCP 资源中的启动脚本并在隔离环境中测试宿主信息先于项目目录到达、超时、取消和桥接失败它已纳入npm run quality。这些测试不代替 Windows / macOS 上的 Codex 原生界面验证。HTML 图片导出、标注截图和幻灯片导出共用 src/htmlDraftCapture.js。其配套的 src/html2canvasClipFix.js 修正 html2canvas 1.4.1 中祖先裁切先于变换执行的问题避免居中缩放的 HTML 只截到四分之一因此该依赖被固定为1.4.1。npm run probe:html:capture已纳入质量检查另可运行npm run probe:html:capture:browser并打开它打印的地址检查真实浏览器中的像素、缩放与嵌套裁切。排查原生画布启动问题时可在 Codex 客户端日志中搜索[Cowart startup]。从0.1.29起日志记录版本号、启动阶段和耗时包括html_loaded、bridge_connecting/bridge_ready、frontend_started、tool_result_received、storage_target_ready、canvas_state_loaded和canvas_mounted。这些阶段的顺序可能随宿主时序变化失败会记录对应的*_failed、*_timeout或脚本错误阶段。为兼容 Codex 26.928 只收集沙箱 warning/error 的行为正常启动阶段使用 warning 级别不代表故障。每个阶段最多记录一次画布挂载后停止不记录目录、画布内容或原始错误消息。本地开发时仍可以直接启动 Vite 画布服务并指定用户项目目录./scripts/start-canvas.sh /path/to/user/project常用环境变量见 scripts/start-canvas.sh环境变量说明默认值COWART_PORT本地服务端口43217COWART_PROJECT_DIR画布数据所属的用户项目目录当前调用目录COWART_CANVAS_DIR画布数据目录$COWART_PROJECT_DIR/canvas技能Skills体系cowart:cowart-open-canvas打开 Cowart 原生画布 widget完整工作流见 skills/cowart-open-canvas/SKILL.md。cowart:cowart-image-gen接收画布内 prompt 和参考图用生成图片替换选中的AI 图片框没有选中框时也可以把生成图插入当前页面。cowart:cowart-film-gen根据选中的影片风格、prompt、尺寸和参考图生成可播放的 HTML/JS 动效影片完整规范见 skills/cowart-film-gen/SKILL.md。cowart:cowart-image-edit根据画布提交或用户提供的 Cowart 标注截图生成修订图。开发者与致谢Cowart 的画布能力基于 tldraw 实现作者为 ZHONG XINzhongxin123456gmail.comhttps://www.jiqiren.ai英文版说明见 README.en.md。本文涉及的安装命令、数据目录结构、工具参数与运行环境均以当前仓库0.1.37版本的实际内容为准安装或更新后请务必完全退出并重启一次 Codex让新的 skill、MCP 工具与发布产物完整加载。赞分享【免费下载链接】Cowart项目地址https://gitcode.com/gh_mirrors/co/Cowart点击查看免费下载相关推荐Cowart AI 图片生成技能实战指南从 AI 图片占位符到画布位图的完整插入工作流Cowart AI 图片生成技能实战指南从 AI 图片占位符到画布位图的完整插入工作流 导读 本文以 Cowart 仓库中的 cowart image genillustration-flat 提示词实战指南用 Codex 生成扁平风格 SVG 插画卡片illustration flat 提示词实战指南用 Codex 生成扁平风格 SVG 插画卡片 本篇技术指南以 Skills 仓库中 illustratioCodex PPT Skill 快速上手指南把文章一键变成图片式 PowerPoint 演示文稿Codex PPT Skill 快速上手指南把文章一键变成图片式 PowerPoint 演示文稿 导读 codex ppt 是一个面向 Codex 的 PAI 技能人工智能上一篇MXNet 环境变量完全指南线程、内存、引擎、通信与执行优化参数详解下一篇cloud_enum性能优化多线程配置与限速绕过技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考