PAGX Skills

About

PAGX Skills is a professional extension for AI coding assistants. After installation, AI can generate well structured PAGX vector graphics from natural-language prompts, optimize file size and rendering performance, and look up PAGX syntax, attributes, and CLI usage when needed.

Mainstream AI image generation tools (such as Stable Diffusion and DALL-E) are primarily bitmap-based, relying on probabilistic sampling. This means when a local detail in the generated result does not meet expectations, it is usually impossible to adjust only that specific detail precisely; instead, the entire image must be regenerated. This limitation makes bitmap-based AI tools more suitable for early-stage creative exploration, but less capable of meeting the precise control and stable reuse requirements of production delivery. To address this, AI needs to work on vector graphics with precise structures. However, AI has not yet seen widespread adoption in vector generation, largely due to the lack of a universal vector format standard optimized for AI. PAGX is designed precisely for this purpose — compared with traditional vector formats like SVG, PAGX is deeply optimized for AI at the file-format level and comes with a complete set of Skills and command-line tools, giving it stronger visual expressiveness and more accurate element positioning, and supporting precise secondary editing and continuous iteration: theoretically, with enough iteration rounds, output can continuously approach production-ready quality.

The PAGX format is still evolving, and the specification may change at any time. Static vector capability is complete for now; motion capability will continue to be expanded next, after which AI will also support direct animation generation.

Installation Guide

1. Install Node.js

The Skills package includes the @libpag/pagx command-line tool, which depends on Node.js. If Node.js is not installed on your machine, complete these steps first:

node --version

2. Install an AI Coding Assistant

PAGX Skills works with any AI coding assistant that supports a Skills mechanism. Here we use CodeBuddy Code as an example. For other tools, refer to their official documentation for installation.

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

codebuddy

3. Install PAGX Skills

After downloading pagx.zip, extract it and place the resulting pagx folder into your user-level Skills directory. This makes the skill available across all your projects.

The final directory structure should look like:

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

If the .codebuddy/skills/ folders do not exist yet, create them manually. Then launch CodeBuddy Code in any project folder — the PAGX Skills will be automatically detected and loaded.

Getting Started

Once installed, you can drive the AI with natural language. The examples below follow a simple sequence: create, iterate, then validate.

Creating PAGX Files

When creating for the first time, include "PAGX" in your prompt so the AI activates the PAGX skill. Once activated, subsequent messages in the same conversation no longer need the keyword.

• Create a PAGX button: blue rounded rectangle, white text 'Submit'
• Design a PAGX card with an avatar, title, and subtitle
• Make a PAGX settings icon using simple geometric shapes, 24x24
• Create a PAGX gradient banner with bold text 'Welcome Back'

Modifying and Iterating

• Change the Submit button color to green and increase its corner radius
• Make the title text in the card larger and align it to the left
• Add a subtle drop shadow to the entire card
• The spacing between the settings icon and the label text feels too tight, increase it

Rendering and Inspection

• Render this PAGX file as a screenshot so I can preview it
• Render it at 2x scale for Retina display
• Validate this PAGX file and fix any errors
• Optimize this PAGX file for size and performance

Online Preview

You can also preview PAGX files visually using the PAGX Playground — simply drag and drop any .pagx file onto the page to see the rendered result in your browser.

Tips for Best Results

Iterate steadily to converge. Do not expect a single AI generation to meet production standards directly. Instead, iterate continuously. The underlying principle is that with enough iteration rounds, output can keep approaching production‑ready quality. AI and tools can handle high‑frequency execution and automated verification, while humans provide aesthetic and structural guidance at key decision points. As large models, Skills, and supporting tools continue to advance, human involvement will gradually decrease, and the efficiency of natural language descriptions will keep improving.

Guide creation, not precise tracing. When providing bitmap references, treat them as guides for style, mood, and composition, not as pixel‑perfect targets to replicate. Bitmap generation is based on probabilistic sampling, yielding outputs that are closer to “visual impressions.” Vector generation, by contrast, produces explicit, structurally clear descriptions. Recovering a unique structure directly from a probability distribution exceeds the capabilities of current large models. A more reliable approach is to let AI produce a structurally correct vector version first, then refine details through targeted parameter adjustments.