给 Codex 装一个 AI 无限画布:Cowart 安装与使用教程

本文介绍 Codex 无限画布插件 Cowart 的安装与使用方法。通过 Cowart,可以直接在 Codex 中完成 AI 图片生成、图片标注修改、HTML 页面制作和 AI Slides 演示,并将创作内容统一整理在无限画布中。教程同时说明了它适合做什么、目前有哪些限制,以及从安装到实际使用的完整流程。

Cowart 是一个面向 Codex 的原生无限画布插件。

它基于 tldraw,在 Codex 中提供一个可视化工作空间,可以把:

  • AI 图片生成
  • 图片标注修改
  • HTML 页面生成
  • AI Slides 演示

集中到同一个画布中完成。

Cowart 的数据默认保存到当前项目的 canvas/ 目录,而不是插件仓库中。


一、Cowart 可以做什么?

1. 无限画布

安装后,可以直接在 Codex 中打开一个 tldraw 无限画布。

你可以在里面:

  • 创建图片
  • 添加文字和标注
  • 组织设计素材
  • 创建 HTML 页面
  • 制作 Slides

适合用于:

  • AI 创意设计
  • 视频素材规划
  • 网页设计
  • PPT 制作

2. AI 图片生成

Cowart 可以创建一个 AI 图片 框。

输入:

  • 图片提示词
  • 参考图片

然后由 Codex 根据:

  • Prompt
  • 参考图
  • 图片框比例

生成对应图片,并自动替换原来的 AI 图片框。


3. 根据标注修改图片

如果生成的图片存在问题,可以直接在图片上:

  • 画箭头
  • 圈选区域
  • 添加文字说明

例如:

删除右侧建筑
天空增加飞船
整体改成夜景

然后点击:

按标注修改

Codex 会根据标注重新生成图片。

原图片不会删除,新图片会放在旁边。


4. AI HTML

Cowart 可以创建一个 16:9 的 AI HTML 框。

输入需求后,Codex 可以生成:

  • 产品介绍页
  • 个人主页
  • 数据看板
  • 网页 UI 原型

生成的 HTML 会直接嵌入画布。


5. AI Slides

Cowart 还支持创建 Slides。

可以:

  • 导入图片
  • 导入 HTML 页面
  • 让 Codex 自动生成多页演示

支持:

  • 3 页
  • 5 页
  • 10 页
  • 自定义页数

并且可以直接预览和全屏播放。


二、Cowart 做不到什么?

1. Cowart 不是 AI 绘图模型

Cowart 本身不会生成图片。

它负责:

画布操作
↓
收集 Prompt 和参考图
↓
发送给 Codex
↓
展示生成结果

最终图片质量取决于 Codex 使用的模型能力。


2. 不是 Photoshop

“按标注修改”不是传统图片编辑。

它不是:

  • 精确修改一个像素
  • 保留所有区域完全一致

而是:

原图 + 标注
↓
Codex理解修改需求
↓
重新生成图片

所以更适合:

  • 修改风格
  • 调整内容
  • 改变构图

3. 不是完整 PPT 软件

Cowart 的 Slides 更像:

“AI 生成的网页式演示页面”。

它适合:

  • 快速制作展示稿
  • 视频演示页面
  • 产品介绍

但不是传统 PowerPoint:

  • 不支持完整 PPTX 编辑
  • 不替代专业演示软件

三、安装 Cowart

方法一:让 Codex 自动安装

打开 Codex,新建一个对话。

发送:

请从 https://github.com/zhongerxin/cowart.git 安装 Cowart Codex 插件。

请 clone 仓库到 ~/plugins/cowart,确认 .codex-plugin/plugin.json 存在。

把插件加入 personal marketplace:

codex plugin marketplace add ~

然后运行:

codex plugin add cowart@personal

安装后请校验插件,并告诉我是否需要开启一个新对话加载新的 skill 和 MCP 工具。

等待 Codex 自动完成安装。


b7dcf0a3c5116cefcecd59a21f2c1d33


方法二:手动下载安装

打开:

https://github.com/zhongerxin/Cowart

点击:

Code
↓
Download ZIP

下载插件压缩包。

然后把文件交给 Codex:

帮我安装这个技能。

让 Codex 自动处理安装。


8a66e2f646c50338831a3e9f4071b28c


四、打开 Cowart Canvas

安装完成后,建议:

重新打开 Codex 或创建新的对话。

然后输入:

打开 Cowart canvas

Codex 会直接打开 Cowart 无限画布。

不需要:

  • 浏览器
  • localhost 页面
  • 手动启动服务

add92eb3e34aa5f4e8c3a1cc849d309f


五、生成第一张 AI 图片

1. 创建 AI 图片框

在工具栏选择:

AI 图片

创建一个图片框。

例如:

制作视频封面,可以调整为:

16:9

2. 输入 Prompt

示例:

未来赛博朋克城市夜景,
巨大的未来建筑群,
空中飞行器穿梭,
霓虹灯照亮潮湿街道,
电影级摄影,
真实光影,
16:9横版,
超高清。

点击发送。

Codex 会生成对应图片。


45f38ab3107add0af3911e67b6ce440959f3beee8bdcccd387235bfd3d4a18003a72bf7fb0ae132e98801ece29b69376


六、使用标注修改图片

例如生成了一张赛博城市图片。

如果想修改:

  • 增加飞船
  • 改变天气
  • 删除建筑

可以直接在图片上标注。

例如:

这里增加一艘巨大的宇宙飞船

天空增加雷暴效果

然后点击:

按标注修改

bca7e3f92c0417a9f8f7c7a9f7146b47


74fdff724015c80bcb483e6b8edaa52be953ebdae1d4254034f43e3f1f757443


七、生成 AI HTML 页面

选择:

AI HTML

创建页面。

默认比例:

1024 × 576
16:9

示例 Prompt:

制作一个 AI 产品介绍网页。

要求:

16:9 页面比例,
现代科技风格,
包含标题区、功能介绍、应用场景、产品优势。

所有 CSS 和 JS 内嵌,
生成单文件 HTML,
可以直接运行。

发送后,Codex 会生成完整 HTML。


ceefa4880ebce2c7a60eb2808a7814e56c402b1094dccba42edafc3701556af9


八、生成 AI Slides

创建:

AI Slides

输入:

制作一套5页AI Agent介绍演示。

第一页:产品介绍

第二页:AI Agent是什么

第三页:工作流程

第四页:应用场景

第五页:商业价值

统一科技风格,
16:9页面。

选择:

5页

生成。


b391552ca98ffe4ad5c6cb1e21fde7c9a07ccbce0b1416fe9498db6764af24e6fb1b9f90d0036d45f7104d0bbec88cc8



Cowart 最大的价值不是提高模型能力,而是把 Codex 从一个聊天窗口变成一个可以:

  • 生成
  • 修改
  • 组织
  • 展示

AI 创作工作台。

如果你经常使用 Codex 做图片、网页、PPT 或内容创作,Cowart 会是一个非常适合的辅助工具。

本文来自投稿,不代表OPC中国立场,如若转载,请注明出处:https://www.opcchina.ai/?p=4181

(1)
OpenMagic 使用教程:直接选中网页,让人工智能修改源码
上一篇 2026年8月18日 上午10:19
直接圈选网页元素,让 Codex 按照批注修改代码。Pinta 使用教程
下一篇 2026年8月13日 上午10:55

相关推荐

  • OpenMagic 使用教程:直接选中网页,让人工智能修改源码

    使用人工智能编程工具修改网页时,经常需要花很多时间描述自己想改的位置。 例如,我们想修改网页上的一个按钮,可能要先说明它位于哪个区域、旁边有什么内容、现在是什么颜色。页面稍微复杂一些,人工智能就可能找错组件或者改错文件。 OpenMagic 提供了另一种操作方式。它会在本地网页上加入一个悬浮工具栏。我们可以直接选中按钮、标题和卡片等网页元素,用文字说明修改要…

    2026年8月18日
    10500
  • 只有一张 PPT 截图?用 Codex 把它还原成可编辑文件

    只有一张 PPT 截图,也能还原成可编辑的 PowerPoint。本教程将演示如何使用 Image to Editable PPT Skill,自动拆解图片中的文字、图标与图形,并重新生成可单独修改的 PPT 页面,省去手动临摹和重新排版的时间。

    2026年8月14日
    29600
  • 网页滚动视频使用教程:让 Codex 把网页自动录成 MP4

    网页滚动视频 Skill 可以把网页录制过程变成一套可复用的视频流程。你只需要用中文告诉 Codex 要打开哪个网页、如何停顿、滚动、点击和高亮,Codex 就会自动生成动作脚本,控制浏览器逐帧采集画面,并导出平稳的 MP4 视频。

    本文将从安装 Skill、检查运行环境、描述镜头,到生成视频、调整节奏和检查成片,完整演示如何把网页自动制作成专业的演示视频。

    2026年8月14日
    20700
  • Watch Skill 使用教程:让 Codex 看懂视频和录屏

    Watch Skill 是一个视频理解和自我验证工具,可以把视频、录屏或浏览器画面处理成带时间点的证据。它不只是生成转写,还会保留关键画面、时间线、OCR 和可搜索内容,让 Codex 能回答“哪一刻发生了什么”,并给出可以回看的依据。

    使用时,先从官方仓库安装 Watch Skill 引擎,再用 npx skills add 把它接入 Codex。处理隐私内容时,可以优先使用本地 Whisper 和本地 Ollama。单个视频可以直接提问,多个视频可以用 watch-skill batch 建立视频库,再用 library ask 搜索。

    如果要做网页测试或演示验收,可以用 loop 持续观察浏览器,并按照指定标准记录通过或失败的证据。需要交付时,还可以用 viewer 导出 HTML 报告。

    最稳妥的流程是:先提具体问题,再让 Watch Skill 返回时间点和证据,点击时间点回看确认,最后把证据交给 Codex 执行动作。原视频、证据报告和处理结果

    2026年8月19日
    20000
  • 口播停顿太多?用 Auto-Editor Skill 让 Codex 自动完成第一遍粗剪

    录完口播,还在手动寻找在手动寻找停顿、逐段删除空白?本教程将介绍如何在 Codex停顿、逐段删除空白?本教程将介绍 中如何在 Codex 中安装并使用 Auto-Editor Skill:放入口播原片,说清剪辑要求,即可自动识别静安装并使用 Auto-Editor Skill:放入口播原片,说清剪辑要求,即可自动识别静音、预览音、预览删除删除结果并生成粗剪版,还能通过余量和声音阈值调整剪结果并生成粗剪版,还能通过辑力度,适合工具教程、知识口播和课程视频的第一遍粗剪。

    2026年8月13日
    19400

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们

135-1682-0181

客服微信:OPC_China

视频号:OPC中国、OPCChina.ai

微信公众号:OPCChina

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信