Skill Canvas Builder

Skill Canvas Builder 是一个用于在 VS Code 中编排业务流程并生成 Codex Skill 文件夹的可视化画布工具。

功能

• 在无限画布中创建文字块、参考文件块、工具块、脚本块和智能块。
• 用连线表达 block 之间的输入关系。
• 保存和恢复当前工作区的画布状态。
• 配置 OpenAI 兼容模型接口，用于脚本生成、智能块回复和 Skill 生成。
• 一键把画布拆分为多个业务流程，并生成 Codex Skill 目录结构。
• 在右侧执行流程面板中查看模型调用、脚本执行和 Skill 生成进度。
• 收缩小地图，减少画布遮挡。

生成的 Skill 结构

点击“一键生成 Skill”后，插件会在当前工作区生成 生成的Skill 文件夹：

生成的Skill/
  SKILL.md
  某某业务/
    某某业务skill.md
    流程数据.json
    参考文件/
    脚本/

根目录 SKILL.md 是业务导航文件。每个业务文件夹内的 某某业务skill.md 包含三部分：

• 需要向用户确认的信息
• 依赖文件目录
• 步骤

使用方式

1. 在 VS Code 中打开一个工作区文件夹。
2. 运行命令 打开 Skill 画布。
3. 在顶部工具栏添加 block，并用端口连线。
4. 如需模型能力，点击“模型配置”填写 OpenAI 兼容接口地址、模型名和 API Key。
5. 点击“一键生成 Skill”。
6. 在右侧执行流程中查看生成进度。

模型与隐私

插件不会内置模型服务。你需要自行配置 OpenAI 兼容接口。

当执行以下操作时，相关上下文会发送到你配置的模型接口：

• 生成脚本代码
• 智能块对话
• 格式化智能块输出 JSON
• 一键生成 Skill 时总结必要用户信息

API Key 使用 VS Code SecretStorage 保存。插件会尽量避免把 token、API Key 等敏感字段写入画布文件或生成的 Skill 文件，但你仍应在发布或分享生成结果前自行检查。

文件与执行安全

• 画布状态保存到当前工作区的 canvas.json。
• 一键生成 Skill 会写入当前工作区的 生成的Skill 文件夹。
• 参考文件块会读取用户选择的文件夹中的文本类文件。
• 脚本块可以生成并运行本机脚本。请只运行你理解并信任的脚本。
• 插件不会自动安装第三方依赖。

开发

npm install
npm run compile

在 VS Code 中按 F5 启动扩展开发宿主，然后运行命令 打开 Skill 画布。

打包

npm run compile
npx --yes @vscode/vsce package

生成的 .vsix 可以通过以下命令本地安装：

code --install-extension skill-canvas-builder-0.1.0.vsix