Canvas
openclaw/openclaw
Present hosted widget documents on a connected macOS panel and control panel visibility or navigation.
安装、更新并使用 Codex-Canvas。通过 Red SkillHub 或其他 Skill 渠道获得本 Skill 后，继续把最新稳定版 Codex-Canvas 安装为 Codex personal plugin；Skill 安装不是终态。适用于用户要求安装或升级 codex-canvas、输入 /canvas、打开本地无限画布、收集生成图片、把画布图片发送回 Codex 对话，或运行…
MITAuto-check passed
Install Codex Canvas
$ npx skills add Xiangyu-CAS/codex-canvas --skill codex-canvas -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Xiangyu-CAS/codex-canvas codex-canvas --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "codex-canvas" agent skill from https://github.com/Xiangyu-CAS/codex-canvas/tree/main into .claude/skills/codex-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codex-canvas", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Xiangyu-CAS/codex-canvas --skill codex-canvas -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Xiangyu-CAS/codex-canvas codex-canvas --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "codex-canvas" agent skill from https://github.com/Xiangyu-CAS/codex-canvas/tree/main into .agents/skills/codex-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codex-canvas", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Xiangyu-CAS/codex-canvas --skill codex-canvas -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Xiangyu-CAS/codex-canvas codex-canvas --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "codex-canvas" agent skill from https://github.com/Xiangyu-CAS/codex-canvas/tree/main into .cursor/skills/codex-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codex-canvas", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Xiangyu-CAS/codex-canvas --skill codex-canvas -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Xiangyu-CAS/codex-canvas codex-canvas --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "codex-canvas" agent skill from https://github.com/Xiangyu-CAS/codex-canvas/tree/main into .gemini/skills/codex-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codex-canvas", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Xiangyu-CAS/codex-canvas codex-canvasInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Xiangyu-CAS/codex-canvas --skill codex-canvas -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "codex-canvas" agent skill from https://github.com/Xiangyu-CAS/codex-canvas/tree/main into .github/skills/codex-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codex-canvas", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Xiangyu-CAS/codex-canvas --skill codex-canvas -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Xiangyu-CAS/codex-canvas codex-canvas --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "codex-canvas" agent skill from https://github.com/Xiangyu-CAS/codex-canvas/tree/main into .opencode/skills/codex-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codex-canvas", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
codex-canvas- GitHub stars
- 136
- Token cost
- ~880 tokens
- SKILL.md length
- 272 words
- Files
- 104 (incl. scripts, assets)
- Skills in repo
- 7
- Repo updated
- First seen
- Licence
- MIT
At a glance
安装、更新并使用 Codex-Canvas。通过 Red SkillHub 或其他 Skill 渠道获得本 Skill 后，继续把最新稳定版 Codex-Canvas 安装为 Codex personal plugin；Skill 安装不是终态。适用于用户要求安装或升级 codex-canvas、输入 /canvas、打开本地无限画布、收集生成图片、把画布图片发送回 Codex 对话，或运行…
- Works in 7 steps: 将包含本文件的目录视为 。如果本 Skill 刚由 RedSkill… → 在 /scripts/ 中查找唯一以 install-codex-plugin… → 执行 → …
- SKILL.md covers 安装为 Codex 插件, 定位运行时, 打开画布 and 图片收集, plus 3 more sections
- Calls node and codex
What it does
Codex Canvas is an agent skill from Xiangyu-CAS/codex-canvas. 安装、更新并使用 Codex-Canvas。通过 Red SkillHub 或其他 Skill 渠道获得本 Skill 后，继续把最新稳定版 Codex-Canvas 安装为 Codex personal plugin；Skill 安装不是终态。适用于用户要求安装或升级 codex-canvas、输入 /canvas、打开本地无限画布、收集生成图片、把画布图片发送回 Codex 对话，或运行 Quick Edit、Remove BG、Expand、Edit Text、Edit Elements 等图片操作。
Its SKILL.md is about 880 tokens, which your agent loads only when the skill is triggered. The skill folder holds 108 other files, including scripts and assets (for example `.codex-plugin/plugin.json`, `.github/workflows/ci.yml` and `.github/workflows/release.yml`).
The repository describes itself as: Infinite canvas plugin for codex; Codex无限画布插件，图层分离，涂抹修改. The licence is MIT.
Example prompts
- “/codex-canvas”
Requirements
- Node.js
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- 将包含本文件的目录视为 。如果本 Skill 刚由 RedSkill 安装，优先使用 redskill install 输出的安装目录；默认通常是当前 workspace 下的 skills/codex-canvas/`。
- 在 /scripts/ 中查找唯一以 install-codex-plugin 命名的 JavaScript 安装器。仓库源码与 SkillHub 兼容包可能使用不同的模块扩展名；只运行实际存在的那个文件。
- 执行
- 安装器必须完成整条稳定链路：把官方 GitHub 仓库放到用户长期目录、切换到最新已发布且校验通过的稳定 Release、安装锁定依赖、写入 personal marketplace、执行 codex plugin add codex-canvas@personal，再用…
- 默认跳过可选 RapidOCR 安装，以保持首次安装稳定快速。只有用户明确要求同时安装本地 OCR 时，才追加 --with-ocr。
- 如果安装器报告缺少 git、node、npm 或 codex，如实报告缺失项。不要改用未校验的 main 分支、手工拼装插件缓存、系统 UI 自动化或直接链接临时 workspace Skill 目录。
- 成功后告诉用户：插件已经安装，但当前任务不会动态获得刚安装插件的 MCP server 和专用 skills；关闭旧画布并新建一个 Codex 任务，再使用 @Codex-Canvas、$canvas 或“打开 Codex-Canvas 画布”。
What it can do on your machine
Read from SKILL.md and the folder at commit b801839. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
nodecodex
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Codex Canvas loads about 880 tokens when it runs. Until then it costs about 67 tokens; SKILL.md has 272 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from Xiangyu-CAS/codex-canvas at commit b801839, republished under its MIT licence (© Xiangyu-CAS). 272 words, ~880 tokens.
Download SKILL.mdSave it as
.claude/skills/codex-canvas/SKILL.md (or your agent's skills folder). This skill also uses 103 other files; get the full folder from GitHub.- name
- codex-canvas
- description
- 安装、更新并使用 Codex-Canvas。通过 Red SkillHub 或其他 Skill 渠道获得本 Skill 后，继续把最新稳定版 Codex-Canvas 安装为 Codex personal plugin；Skill 安装不是终态。适用于用户要求安装或升级 codex-canvas、输入 /canvas、打开本地无限画布、收集生成图片、把画布图片发送回 Codex 对话，或运行 Quick Edit、Remove BG、Expand、Edit Text、Edit Elements 等图片操作。
Codex-Canvas
把这个根 Skill 作为 Codex-Canvas 的发现和安装入口。最终运行形态必须是完整 Codex 插件：personal marketplace 中存在 codex-canvas@personal，Codex 已把插件复制到版本化缓存，并在新任务中加载插件自带的 skills 和 MCP server。
安装为 Codex 插件
当用户要求安装、升级或修复 Codex-Canvas，或者当前目录来自 redskill install codex-canvas 时，先执行本节。不要在 Skill 文件下载完成后停止。
- 将包含本文件的目录视为
<codex-canvas-skill-root>。如果本 Skill 刚由 RedSkill 安装，优先使用redskill install输出的安装目录；默认通常是当前 workspace 下的skills/codex-canvas/。 - 在
<codex-canvas-skill-root>/scripts/中查找唯一以install-codex-plugin命名的 JavaScript 安装器。仓库源码与 SkillHub 兼容包可能使用不同的模块扩展名；只运行实际存在的那个文件。 - 执行：
node <installer-path> --json - 安装器必须完成整条稳定链路：把官方 GitHub 仓库放到用户长期目录、切换到最新已发布且校验通过的稳定 Release、安装锁定依赖、写入 personal marketplace、执行
codex plugin add codex-canvas@personal，再用codex plugin list --json验证安装状态和版本。 - 默认跳过可选 RapidOCR 安装，以保持首次安装稳定快速。只有用户明确要求同时安装本地 OCR 时，才追加
--with-ocr。 - 如果安装器报告缺少
git、node、npm或codex，如实报告缺失项。不要改用未校验的main分支、手工拼装插件缓存、系统 UI 自动化或直接链接临时 workspace Skill 目录。 - 成功后告诉用户：插件已经安装，但当前任务不会动态获得刚安装插件的 MCP server 和专用 skills；关闭旧画布并新建一个 Codex 任务，再使用
@Codex-Canvas、$canvas或“打开 Codex-Canvas 画布”。
重复执行安装器应更新或复用同一个稳定源码目录和 personal marketplace 条目。遇到非 Codex-Canvas 仓库、脏工作树或普通目录占用了目标位置时必须停止，不得覆盖用户文件。
定位运行时
- 完成上面的插件安装后，优先使用已安装插件缓存中的 Codex-Canvas runtime。只有安装或故障恢复期间才把当前 Skill 目录视为
<codex-canvas-root>。 - 执行 CLI 前，先确认
<codex-canvas-root>/bin/codex-canvas.mjs存在。 - 使用 Node.js 18.18 或更新版本运行命令。
- 将所有画布数据保存在当前工作区的
canvas/目录下。
打开画布
- 使用以下命令启动或复用项目本地画布：
node <codex-canvas-root>/bin/codex-canvas.mjs open --project <workspace> - 如果能拿到当前 Codex thread id，传入
--thread-id <thread-id>。Codex-Canvas 也会读取CODEX_THREAD_ID和CODEX_CANVAS_CODEX_THREAD_ID。 - 优先使用
open，不要直接用start；open会复用健康的已保存运行时，只在需要时启动 detached server。 - 当 Codex in-app browser 控制能力可用时，直接在 Codex 内置浏览器打开返回的 URL。
- 如果当前环境无法控制内置浏览器，返回画布 URL 的 Markdown 链接。不要启动系统默认浏览器。
图片收集
- 对生成或编辑后的图片，尽量将输出保存到当前工作区。
- 已知图片路径时，用以下命令导入：
node <codex-canvas-root>/bin/codex-canvas.mjs import <image-path> --project <workspace> --thread-id <thread-id> - 如果输出路径不明确，用以下命令收集近期图片：
node <codex-canvas-root>/bin/codex-canvas.mjs collect --project <workspace> --thread-id <thread-id> --since-minutes 30 --limit 5 - 默认收集只扫描
~/.codex/generated_images/<thread-id>。未绑定 thread 时默认收集会安全地不执行；只有用户明确要求手动恢复时，才使用--from <dir,dir>扫描指定目录。 - 遵守 Codex-Canvas 的放置规则：同一批生成图横向排列；从画布对象派生的结果放到源图片右侧。
AI 操作边界
AI 图片操作必须使用稳定的 Codex-Canvas action id 和后端 job。不要把具体操作 prompt 写进前端代码。
quick-edit：使用skills/canvas-quick-edit/SKILL.md。remove-bg：使用skills/canvas-remove-bg/SKILL.md。expand：使用skills/canvas-expand/SKILL.md。edit-text：使用skills/canvas-edit-text/SKILL.md。edit-elements：使用skills/canvas-edit-elements/SKILL.md。
只有在对应 action 被请求时，才加载匹配的操作技能。平移、缩放、拖拽、选择、删除、铅笔绘制、文本对象编辑、工具栏状态、视口 framing 等确定性画布交互应保留在本地应用代码中。
跨平台规则
- 保持 macOS 和 Windows 跨平台兼容。
- 核心行为不要依赖 AppleScript、
osascript、System Events、Windows UI Automation、坐标点击、模拟按键、剪贴板粘贴或操作系统特定的浏览器启动方式。 - 优先使用 Codex 支持的浏览器、插件、MCP、CLI 和后端 job 集成面。
- 修改工具栏、dock 和控件 UI 时，使用成熟图标集和应用既有图标风格。
插件兼容
不要要求 .codex-plugin/plugin.json 指向这个根 Skill。Skill 负责发现、bootstrap 和故障恢复；正式使用由 personal marketplace 安装的插件负责。插件安装路径继续暴露现有 skills/ 目录和 MCP server 配置。
© Xiangyu-CAS, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 103 other files (scripts, assets) in the repository root of Xiangyu-CAS/codex-canvas.
- SKILL.md
- .codex-plugin/plugin.json
- .codex/config.toml
- .github/workflows/ci.yml
- .github/workflows/release.yml
- .gitignore
- .mcp.json
- .release-please-manifest.json
- AGENTS.md
- CHANGELOG.md
- INSTALL.md
- LICENSE
- README.ja.md
- README.md
- README.zh-CN.md
- agents/openai.yaml
- … and 88 more
Open the folder on GitHubat commit b801839
Compare with similar skills
Codex Canvas next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Codex Canvas this skillXiangyu-CAS/codex-canvas | 136 | — | ~880 | Automated safety check: Pass | MIT | |
| Canvasopenclaw/openclaw | 392k | — | ~263 | Automated safety check: Pass | MIT | |
| Canva Designerasgeirtj/system_prompts_leaks | 69k | — | ~2.1k | Automated safety check: Pass | CC0-1.0 | |
| Plan Canvasaffaan-m/ECC | 276k | 1 repos | ~2.2k | Automated safety check: Pass | MIT | |
| Canvas Designanthropics/skills | 180k | 52 repos | ~3k | Automated safety check: Pass | Apache-2.0 | |
| Canvas AutomationComposioHQ/awesome-claude-skills | 77k | 3 repos | ~727 | Automated safety check: Pass | None |
Similar skills
Canva Designer
asgeirtj/system_prompts_leaks
Creates and edits Canva designs, generates images and works with brand kits through the canva CLI and Canva's official MCP server, from decks to social posts.
Plan Canvas
affaan-m/ECC
Open plans and HTML artifacts in a local browser canvas where the human annotates elements, chats, and approves or requests changes without leaving the page.
- Official
Canvas Design
anthropics/skills
Creates original posters and static art as PNG or PDF by first writing a short design philosophy, then expressing it visually on a canvas.
Canvas Automation
ComposioHQ/awesome-claude-skills
Automate Canvas tasks via Rube MCP (Composio). An agent skill from ComposioHQ/awesome-claude-skills.
Canvas Display
spinabot/brigade
Shows HTML content such as games, dashboards, visualizations and demos on a connected Brigade node's canvas, using a local canvas host server and a node bridge.
More from Xiangyu-CAS/codex-canvas
Canvas
Xiangyu-CAS/codex-canvas
Open and use Codex-Canvas, a project-local infinite canvas for Codex image generation.
Canvas Edit Elements
Xiangyu-CAS/codex-canvas
Generate an instance segmentation map for a selected Codex-Canvas image, split the source into transparent element layers, and collect the layers back onto the canvas.
Canvas Quick Edit
Xiangyu-CAS/codex-canvas
Run a user-described Quick Edit on a selected Codex-Canvas image and collect the result back onto the canvas.
Canvas Edit Text
Xiangyu-CAS/codex-canvas
Recognize visible text in a selected Codex-Canvas image, apply a user-described text edit with imagegen, and collect the result back onto the canvas.
Canvas Expand
Xiangyu-CAS/codex-canvas
Outpaint a selected Codex-Canvas image beyond its current frame and collect the expanded image back onto the canvas.
Canvas Remove Bg
Xiangyu-CAS/codex-canvas
Remove the background from a selected Codex-Canvas image and collect a transparent PNG result back onto the canvas.
Questions about Codex Canvas
What does Codex Canvas do?
安装、更新并使用 Codex-Canvas。通过 Red SkillHub 或其他 Skill 渠道获得本 Skill 后，继续把最新稳定版 Codex-Canvas 安装为 Codex personal plugin；Skill 安装不是终态。适用于用户要求安装或升级 codex-canvas、输入 /canvas、打开本地无限画布、收集生成图片、把画布图片发送回 Codex 对话，或运行…. Codex Canvas is an agent skill from Xiangyu-CAS/codex-canvas.
How do I install Codex Canvas in Claude Code?
Run `npx skills add Xiangyu-CAS/codex-canvas --skill codex-canvas -a claude-code`. Or copy the skill folder (the Xiangyu-CAS/codex-canvas repository) into .claude/skills/codex-canvas in your project. Claude Code loads it when a task matches its description.
How do I install Codex Canvas in Codex?
Run `npx skills add Xiangyu-CAS/codex-canvas --skill codex-canvas -a codex`. Or copy the skill folder (the Xiangyu-CAS/codex-canvas repository) into .agents/skills/codex-canvas in your project. Codex loads it when a task matches its description.
Can I use Codex Canvas in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Xiangyu-CAS/codex-canvas --skill codex-canvas -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/codex-canvas, .gemini/skills/codex-canvas, .github/skills/codex-canvas and .opencode/skills/codex-canvas in your project.
What does Codex Canvas need to run?
Going by SKILL.md and its folder, Codex Canvas needs the command-line tools its instructions call (node and codex). Our summary lists: Node.js.
Does Codex Canvas access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Codex Canvas safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Codex Canvas use?
Codex Canvas is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Codex Canvas use?
About 880 tokens (SKILL.md is roughly 3.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Codex Canvas?
Skills that share tags, products or a category with Codex Canvas: Canvas (openclaw/openclaw, 392k stars), Canva Designer (asgeirtj/system_prompts_leaks, 69k stars), Plan Canvas (affaan-m/ECC, 276k stars) and Canvas Design (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Codex Canvas?
Xiangyu-CAS (a GitHub user) maintains it in Xiangyu-CAS/codex-canvas, which has 136 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 1, 2026.
Source: Xiangyu-CAS/codex-canvas on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.