PAGX Skills

简介

PAGX Skills 是面向 AI 编程助手的专业技能扩展包。安装后，AI 可以根据自然语言描述生成结构简洁的 PAGX 矢量图形，优化文件大小和渲染性能，并在需要时查询 PAGX 语法、属性和命令行工具用法。

当前主流的 AI 图像生成工具（如 Stable Diffusion、DALL-E）主要基于位图生成，其本质是一个概率采样过程。这意味着当生成结果中某个局部细节不符合预期时，通常无法仅针对该细节进行精确调整，而需要重新生成整张图像。这种局限性使得基于位图的 AI 工具更适合前期的创意探索，难以满足上线交付环节对精确控制和稳定复用的要求。要解决这一问题，需要让 AI 在具备精确结构的矢量图形上进行工作。然而，目前 AI 在矢量生成领域尚未大规模应用，核心原因在于缺少专门为 AI 优化的通用矢量格式标准。PAGX 正是为此设计的——相比 SVG 等传统矢量格式，PAGX 在文件格式层面针对 AI 进行了深度优化，并配套提供了完善的 Skills 和命令行工具，使其具备更强的视觉表达能力和更精准的元素定位能力，支持精确的二次编辑和持续迭代：理论上，只要迭代次数足够多，产出就能持续逼近上线质量标准。

PAGX 格式目前仍在持续迭代中，规范文档可能随时更新。目前已初步完成静态矢量部分，后续将继续扩充动效能力——届时 AI 也将具备直接生成动效的能力。

安装指南

1. 安装 Node.js

Skills 安装包包含命令行工具 @libpag/pagx，运行依赖 Node.js。若本机尚未安装，请先完成以下步骤：

第 1 步 — 访问 nodejs.org，下载适用于你操作系统的 LTS（长期支持）版本。

第 2 步 — 运行安装程序，按照屏幕提示操作，保持所有默认设置即可。

第 3 步 — 验证安装是否成功。打开终端（macOS 上的"终端"应用，Windows 上的"命令提示符"或"PowerShell"），输入以下命令：

node --version

如果显示类似 v22.x.x 的版本号，说明 Node.js 已安装成功。

2. 安装 AI 编程助手

PAGX Skills 可用于任何支持 Skills 机制的 AI 编程助手。这里以 CodeBuddy Code 为例，其他工具请参考其官方文档完成安装。

第 1 步 — 打开终端，运行以下安装命令：

npm install -g @tencent-ai/codebuddy-code

第 2 步 — 安装完成后，输入以下命令启动：

codebuddy

按照屏幕提示完成初始设置和账号认证。

如需了解详细的安装说明和系统要求，请参阅 CodeBuddy Code 官方文档。

3. 安装 PAGX Skills

下载 pagx.zip 后，将其解压，把得到的 pagx 文件夹放到用户级 Skills 目录中。这样所有项目都可以使用该技能。

平台	Skills 目录
macOS / Linux	`~/.codebuddy/skills/`
Windows	`C:\Users\<用户名>\.codebuddy\skills\`

最终目录结构应如下所示：

.codebuddy/
  skills/
    pagx/
      SKILL.md
      references/
        ...

如果 .codebuddy/skills/ 文件夹尚不存在，手动创建即可。然后在任意项目目录下启动 CodeBuddy Code，PAGX Skills 会被自动识别并加载。

@libpag/pagx 命令行工具会在 AI 助手首次需要时自动安装，这依赖于第 1 步中搭建的 Node.js 环境。

开始使用

PAGX Skills 目前主要在 CodeBuddy Code + Claude Opus 4.6 模型上完成测试。使用其他工具或模型时效果可能有所不同。

安装完成后，可直接用自然语言驱动 AI。下面按"创建→迭代→验证"给出常见示例：

创建 PAGX 文件

首次创建时，请在提示中包含 "PAGX" 关键词，以便 AI 激活 PAGX 技能。激活后，同一对话中的后续消息无需再重复该关键词。

创建一个 PAGX 按钮：蓝色圆角矩形，白色文字 'Submit'
设计一个 PAGX 卡片，包含头像、标题和副标题
用简单几何图形做一个 PAGX 设置图标，24x24 尺寸
创建一个 PAGX 渐变色横幅，加粗文字 'Welcome Back'

修改与迭代

把 Submit 按钮的颜色改成绿色，圆角再大一些
卡片里的标题文字调大一些，改成左对齐
给整个卡片加一个淡淡的阴影效果
设置图标和右侧文字之间的间距太紧了，拉开一些

渲染与检查

把这个 PAGX 文件渲染成截图，我看一下效果
渲染成 2 倍大小的截图，方便在 Retina 屏幕上预览
校验一下这个 PAGX 文件有没有错误，有的话帮我修复
优化这个 PAGX 文件的大小和性能

在线预览

你也可以通过 PAGX Playground 在线预览 PAGX 文件 — 只需将任意 .pagx 文件拖放到页面上，即可在浏览器中查看渲染效果。

使用建议

多轮迭代，稳定收敛。不要期望 AI 单次生成的结果就能直接达到上线标准，而应通过多轮迭代持续优化。其核心原理是：只要迭代次数足够多，产出就能持续逼近上线质量。AI 和工具承担高频执行与自动验证，人类则在关键节点提供审美与结构指导。随着大模型、Skills 及配套工具的持续进步，人工参与的轮次将逐步减少，自然语言描述的效率也会不断提升。

创作导向，非精确临摹。当提供位图参考时，应将其视为风格、氛围和构图方向的指引，而非要求逐像素复刻。位图生成基于概率采样，输出更接近"视觉印象"；而矢量生成则产生参数明确、结构清晰的描述。从概率分布中直接还原唯一结构超出了当前大模型的能力范围。更可靠的做法是：先让 AI 生成结构正确的矢量版本，再通过调整局部参数精细打磨细节。