给 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)
只有一张 PPT 截图?用 Codex 把它还原成可编辑文件
上一篇 2026年8月14日 上午9:55
直接圈选网页元素,让 Codex 按照批注修改代码。Pinta 使用教程
下一篇 2026年8月13日 上午10:55

相关推荐

  • 只有一张 PPT 截图?用 Codex 把它还原成可编辑文件

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

    2026年8月14日
    28700
  • Skill Deck 使用教程:把散落的 AI 技能集中管理

    如果你在电脑里同时使用 Codex、Claude、Cursor 等编程助手,技能文件很容易散落在不同文件夹里。Skill Deck 可以扫描这些本地技能,把它们整理成一个可以搜索、筛选、查看和检查的目录。 本文以 Windows 为例,演示从安装 Skill Deck,到扫描本地技能、搜索技能、检查来源、保存快照,再交给 Codex 使用的完整流程。 一、S…

    2026年8月19日
    9400
  • 直接圈选网页元素,让 Codex 按照批注修改代码。Pinta 使用教程

    介绍了如何使用 Pinta + Codex 实现更直观的网页修改工作流。通过 Pinta,可以直接在网页中选中按钮、标题、卡片等元素并添加修改意见,再通过 Companion 和 MCP 将批注交给 Codex,由 Codex 定位对应源码、生成修改计划并执行代码调整。相比传统的文字描述方式,这种“直接选中网页元素 → 添加批注 → AI 修改源码”的流程,可以明显降低前端页面修改时的人机沟通成本,尤其适合按钮样式、标题文案、布局和间距等 UI 调整场景。

    2026年8月13日
    19300
  • OpenMagic 使用教程:直接选中网页,让人工智能修改源码

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

    2026年8月18日
    9700
  • Plannotator 使用教程:在 Codex 执行前,先把计划审清楚

    Codex 生成复杂任务计划后,如果只在对话框里从头阅读,很容易漏掉范围错误、缺少测试或步骤不合理等问题。本教程将演示如何在 Windows 上安装并使用 Plannotator,把 Codex 的计划放进本地浏览器审阅界面,逐段添加批注、标记删除并退回修改;计划确认无误后,再让 Codex 开始执行,并继续检查最终的代码改动。

    2026年8月17日
    13300

发表回复

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

联系我们

135-1682-0181

客服微信:OPC_China

视频号:OPC中国、OPCChina.ai

微信公众号:OPCChina

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

关注微信