Preface¶

It is no longer unusual to write code or revise documents in AI programming tools like Cursor and Claude Code, but when it comes to making a decent poster, event main visual, or brand illustration, many people still switch to Figma, Canva, or repeatedly prompt general-purpose chatbots to “make it more grand” or “don’t let text cover the image.” The problem lies here: AI excels at generating text and code, but it does not necessarily have a stable design workflow—typography rules, font selection, and white space ratios all need to be explained from scratch every time.

Anthropic provides an example Skill called canvas-design in its official Skills repository. It incorporates the workflow of “first establish a design philosophy, then express it on the canvas” into SKILL.md, allowing Agents to produce .md design declarations and .pdf/.png finished products in fixed steps. This article is verified based on the original content of the official repository, introducing what it is, how to install and use it, and which scenarios it is suitable for.

What It Is¶

canvas-design is an Agent Skill maintained by Anthropic, with the repository address:
https://github.com/anthropics/skills/tree/main/skills/canvas-design

The description in the official frontmatter reads: Create visual works in .png and .pdf based on design philosophy; use it when users request posters, artworks, designs, or other static visual content; original visuals must be created, and existing artists’ works must not be copied to avoid copyright risks.

It belongs to the Creative & Design example Skill in the anthropics/skills repository, licensed under Apache 2.0 (see LICENSE.txt in the directory). The Skill itself is a folder, with the core file being SKILL.md, along with the canvas-fonts/ font resource directory (containing multiple OFL-licensed .ttf files and corresponding license instructions).

Unlike “directly asking AI to draw an image”, canvas-design emphasizes a two-step process:
1. Design Philosophy Creation: First write a 4–6 paragraph aesthetic movement manifesto (output as .md), defining visual languages such as form, space, color, and composition.
2. Canvas Expression: Under the guidance of the same philosophy, turn the concept into a single-page .pdf or .png (default single-page, can be extended to multiple pages as needed).

The final deliverable is primarily visual: the official requirement is that the finished product should be approximately 90% visual design and 10% necessary text. Text only serves as an embellishment, with information conveyed through space and form rather than lengthy explanations.

Core Features and Highlights¶

1. Design Philosophy First, Not Template-Based¶

The Skill explicitly requires creating a visual philosophy, not a layout template. The Agent needs to name the movement (1–2 words, such as “Brutalist Joy” and “Chromatic Silence” in the official examples), then use 4–6 paragraphs to explain how this philosophy is presented through space and form, color and material, scale and rhythm, composition and balance, and visual hierarchy.

The philosophy document should emphasize that the final work must present master-level craftsmanship—repeatedly mention phrases like “carefully polished”, “deep professionalism”, “painstaking attention” to set quality benchmarks for the subsequent canvas stage, while retaining interpretive choices for the execution phase.

2. Implicit Theme Embedding to Enhance Work Depth¶

Before starting the canvas creation, the Skill requires deducing subtle conceptual threads from the user’s original requirements. The theme should not be explicitly labeled, but rather like a quotation in jazz—perceivable to those familiar with it, while still appearing as an excellent abstract composition to casual viewers. The design philosophy provides the aesthetic language, and the implicit theme provides the “soul” of the work.

3. Museum-Quality Single-Page Visual Output¶

The official description of the canvas stage goal is museum or magazine quality. Specific constraints include:
- Default output of single-page high visual density PDF or PNG (multiple pages can be made when requested by the user).
- Extremely minimal text, and all elements must stay within the canvas boundaries, without overlapping or overflowing, with sufficient margins.
- Prioritize using fonts from the ./canvas-fonts directory; required fonts can be downloaded, and typography itself should be part of the画面.
- Prefer repeating patterns, precise geometry, and a limited but intentional color palette; you can borrow the visual language of “scientific illustrations” (systematic markings, clinical typography) to express abstract themes.
- Even if the user mentions subjects such as movies, games, or books, the style must remain sophisticated, avoiding cartoonish or amateurish vibes.

4. Secondary Refinement, Not Stacking Materials¶

The official FINAL STEP stipulates that the user implicitly requires “not perfect enough, must be pristine”. When refining, avoid continuing to stack graphics, but instead polish the existing composition—make the typography crisper and the colors more cohesive, rather than adding new filters or shapes. The Skill requires the Agent to perform a second pass, returning to the implementation code or drawing script to continue polishing.

5. Bundled Fonts and Copyright Awareness¶

The canvas-fonts/ directory pre-installs multiple fonts such as Work Sans, JetBrains Mono, and Instrument Sans, along with OFL license files, making it convenient for Agents to select fonts locally without having to look for font libraries temporarily every time. At the same time, the Skill emphasizes originality and no plagiarism of existing artists’ works in its description, which is the compliance bottom line when using it.

Installation and Activation¶

canvas-design follows the universal Agent Skill format (SKILL.md + resource directory) and can be used in environments that support Skills such as Cursor, Claude Code, and Claude.ai. The following methods are all from the official README or public documentation of each tool, please choose one according to the environment.

Directory Structure¶

After installation, the Skill directory should at least contain:

canvas-design/
├── SKILL.md
├── LICENSE.txt
└── canvas-fonts/
    ├── WorkSans-Regular.ttf
    ├── JetBrainsMono-Regular.ttf
    └── ...（more OFL fonts and license instructions）

Note: You must copy the entire canvas-fonts/ directory together, otherwise the Agent will not be able to retrieve local fonts as required by the Skill.

Usage in Cursor¶

Cursor will automatically discover Skills from .cursor/skills/ (project-level) or ~/.cursor/skills/ (user-level). It is recommended to place the full directory in the project repository for team sharing:

# Clone the official repository (shallow clone is sufficient)
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/anthropics-skills

# Copy the entire canvas-design directory to the Cursor Skills path
mkdir -p .cursor/skills/canvas-design
cp -r /tmp/anthropics-skills/skills/canvas-design/* .cursor/skills/canvas-design/

After restarting Cursor or reopening the project, the Agent will automatically match visual design tasks based on the description; you can also explicitly call /canvas-design or @canvas-design in the conversation (subject to the current Cursor version).

The name field must be consistent with the folder name, both being canvas-design (lowercase, hyphenated).

Usage in Claude Code¶

The official README provides the Plugin installation method. canvas-design belongs to the example-skills plugin set (Creative & Design examples):

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

After installation, mention requirements such as posters or visual design in the conversation, or directly state “use the canvas-design skill” to trigger it.

Usage in Claude.ai and API¶

The official note: The example skills in anthropics/skills are built-in and available for paid Claude.ai plan users. For the upload of custom Skills and API usage, please refer to Anthropic’s documentation Using skills in Claude and Skills API Quickstart.

Typical Usage Examples¶

canvas-design has no separate CLI command; the usage method is describe the requirements in natural language + the Skill is loaded and the Agent executes according to SKILL.md. The following prompt directions are consistent with the official description and workflow, and can be directly reproduced.

Example 1: Event Poster¶

Use the canvas-design skill to make a single-page poster for a technical Meetup about "Local LLM Inference Optimization".
The style is Swiss International Style, with dark blue as the main color and a small amount of orange accents.
Output the design philosophy .md and the final PNG.

Expected Agent behavior:
1. Write the design philosophy .md (name the aesthetic movement, elaborate in 4–6 paragraphs).
2. Extract implicit themes from the requirements (such as “edge computing”, “latency”) and subtly embed them into the composition.
3. Use Python and other tools to draw the canvas, select fonts from ./canvas-fonts, and export .png.
4. Perform secondary refinement, check for no overlapping elements and qualified margins.

Example 2: Brand Visual Single Page¶

Help me make a one-page PDF visual work with the theme of "Open Source Collaboration", no text paragraphs, only a small amount of label-style text allowed.
First write the design philosophy, then generate the PDF.

Example 3: Multi-Page Brochure (Optional)¶

The official MULTI-PAGE OPTION note: When the user explicitly requests multiple pages, you can create subsequent pages that are distinctly different under the same design philosophy, like the inner pages of a coffee table book, with tasteful narration and twists on each page. You can prompt:

Following the canvas-design process, based on the same design philosophy, add 2 more pages of PNGs with different compositions, with a unified style but variations across the three pages.

Workflow Summary¶

Applicable Scenarios and Notes¶

Who and What Scenarios It Fits¶

• Developers / Technical Evangelists: Quickly create Meetup posters, open source project release images, speech covers without switching to design tools.
• Independent Creators: Need static visuals with “aesthetic stance” rather than random styles from general text-to-image generation.
• Teams: Write brand preferences into a forked SKILL.md and share it at the project level in Cursor, reducing the cost of repeated verbal alignment of design specifications.

Limitations and Notes¶

1. Demo Nature: The official README states that the Skills in the repository are for demonstration and education only; the actual behavior within Claude products may not fully match the Skill text, and critical tasks need to be fully tested in your own environment.
2. Not a Replacement for Text-to-Image APIs: The output depends on the Agent calling code/drawing libraries to generate vector or bitmap images, and the quality is related to model capabilities and execution environment (fonts, dependency libraries), and cannot guarantee “museum-level” quality every time.
3. Copyright and Originality: The Skill requires originality and prohibits copying existing artists’ works; when using fonts from canvas-fonts, you must comply with the OFL licenses of each font (the *-OFL.txt in the directory).
4. Resource Size: The full copy with canvas-fonts is relatively large. If you only need a lightweight trial, you can keep only a few commonly used fonts, but it may affect the integrity of the Skill’s original “Search the ./canvas-fonts directory” requirement.
5. Output Format: The Skill specifies that only .md, .pdf, and .png should be output; direct delivery of Figma or SVG source files is not supported (unless the Agent extends it on its own, which is beyond the official Skill scope).

Conclusion¶

The value of canvas-design lies in coding design thinking into reusable Agent instructions: first write the philosophy, then put it on the canvas, and finally refine it—this chain allows AI programming tools to cross over to undertake static visual creation, not just generate “viewable” images. For developers already using Cursor or Claude Code, installing one folder can add a stable design production line.

Official Skill directory:
https://github.com/anthropics/skills/tree/main/skills/canvas-design

Parent repository and installation instructions:
https://github.com/anthropics/skills

For Agent Skills open standards and cross-tool specifications, please refer to agentskills.io.