canvas-design

canvas-design Skill 多维度简评

类别：创意设计 / 海报视觉 仓库：anthropics/skills 技术栈：Pillow + Cairo + numpy

一、核心定位与价值

canvas-design 不同于 algorithmic-art：

• algorithmic-art：实时生成、可交互的 HTML
• canvas-design：一次性输出 PNG/PDF 的视觉作品

它适合”我要做一张海报 / 证书 / 社交媒体配图 / 品牌物料”的场景——程序化生成而不是手绘。

二、核心能力

2.1 技术栈

2.2 输出格式

2.3 任意尺寸

支持 A0-A6 全尺寸 + 自定义像素尺寸，印刷级（DPI ≥ 300）。

三、SKILL.md 标准结构

---
name: canvas-design
description: Create beautiful visual art and design assets using code.
  Use when generating PNG/PDF images, posters, certificates, or visual compositions.
license: Apache-2.0
---

四、6 大实战场景

场景 1：产品发布海报（A3 印刷级）

用 canvas-design 生成 A3 尺寸的产品发布海报：
- 主视觉：产品 mockup
- 标题：副标题
- 品牌 LOGO
- 二维码（访问产品页）
- 配色：品牌色板
- DPI 300
- 输出 PNG + PDF

场景 2：技术活动海报

生成技术分享活动海报（A2）：
- 主题：AI Agent Skills 实战
- 主讲人：XX
- 时间：2026-07-15 14:00
- 地点：XX
- 报名二维码
- 风格：科技 + 极简

场景 3：春节电子贺卡

生成春节电子贺卡：
- 红色 + 金色
- 福字 + 烟花粒子
- 个性化祝福语（参数）
- PNG + PDF 双格式
- 1920x1080

场景 4：Instagram 方形配图（5 张）

生成 5 张 Instagram 方形配图（1080x1080）：
- 主题：AI 工具介绍系列
- 风格：极简 + 高级灰
- 每张一个核心要点：
  1. Claude Code
  2. Cursor
  3. OpenCode
  4. Codex
  5. Antigravity
- 系列感：相同布局 + 不同配色

场景 5：批量课程证书

批量生成 50 张课程结业证书：
- 学员姓名（参数）
- 课程名称
- 完成日期
- 颁发机构签名
- 序列号
- 输出 PDF（每人一页）

场景 6：产品营销 Banner

为我们的产品生成 5 个营销 Banner：
- 不同尺寸：1200x628 (FB) / 1080x1080 (IG) / 1920x1080 (Web)
- 同主题："让 AI 帮你写代码"
- 配色：渐变紫蓝

五、实战代码示例

5.1 基础海报生成

from PIL import Image, ImageDraw, ImageFont

# A3 尺寸 300 DPI
WIDTH, HEIGHT = 3508, 4961  # 像素
DPI = 300

# 创建画布
img = Image.new('RGB', (WIDTH, HEIGHT), color='white')
draw = ImageDraw.Draw(img)

# 加载字体
title_font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 240)
subtitle_font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 100)
body_font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf", 60)

# 标题（自动换行）
def draw_centered_text(draw, text, font, y, fill='black'):
    bbox = draw.textbbox((0, 0), text, font=font)
    text_width = bbox[2] - bbox[0]
    x = (WIDTH - text_width) // 2
    draw.text((x, y), text, font=font, fill=fill)

draw_centered_text(draw, "AI Agent Skills 实战", title_font, 800)
draw_centered_text(draw, "MagicNetWorld 编辑部", subtitle_font, 1100, fill='#666')

# 主体内容
content = [
    "从 Anthropic 官方到国内精选",
    "126 个优质 Skill 深度评测",
    "全面掌握 Agent 编程工具"
]
for i, line in enumerate(content):
    draw_centered_text(draw, line, body_font, 1500 + i * 120, fill='#333')

# 二维码占位
qr_size = 600
draw.rectangle(
    [(WIDTH - qr_size - 200, HEIGHT - qr_size - 300),
     (WIDTH - 200, HEIGHT - 300)],
    outline='#FF5722', width=8
)
draw_centered_text(draw, "扫码访问", body_font, HEIGHT - 250, fill='#666')

# 保存
img.save('poster.png', dpi=(DPI, DPI))
img.save('poster.pdf', 'PDF', resolution=DPI)

5.2 字体处理（中文）

import platform

def get_chinese_font(size):
    """获取中文字体"""
    system = platform.system()
    if system == 'Darwin':  # macOS
        paths = [
            '/System/Library/Fonts/PingFang.ttc',
            '/System/Library/Fonts/STHeiti Medium.ttc',
        ]
    elif system == 'Linux':
        paths = [
            '/usr/share/fonts/truetype/wqy/wqy-microhei.ttc',
            '/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc',
        ]
    elif system == 'Windows':
        paths = [
            'C:/Windows/Fonts/msyh.ttc',
            'C:/Windows/Fonts/simsun.ttc',
        ]

    for path in paths:
        try:
            return ImageFont.truetype(path, size)
        except:
            continue

    # 兜底：尝试 freetype 加载
    from PIL import ImageFont as IF
    return IF.load_default()

5.3 矢量输出（PDF）

from reportlab.pdfgen import canvas
from reportlab.lib.pagesizes import A3
from reportlab.lib.units import cm

def export_pdf_via_reportlab(title, subtitle, content_lines, out_path):
    """矢量 PDF 输出，印刷级"""
    c = canvas.Canvas(out_path, pagesize=A3)
    w, h = A3

    # 标题
    c.setFont('Helvetica-Bold', 72)
    c.drawCentredString(w / 2, h - 4 * cm, title)

    # 副标题
    c.setFont('Helvetica', 36)
    c.drawCentredString(w / 2, h - 5.5 * cm, subtitle)

    # 内容
    c.setFont('Helvetica', 18)
    y = h - 8 * cm
    for line in content_lines:
        c.drawCentredString(w / 2, y, line)
        y -= 1 * cm

    c.save()

六、5 条设计原则

6.1 字体选择

• 中文标题：思源宋体 Heavy / 苹方粗体
• 中文正文：思源宋体 Regular / 苹方
• 英文标题：Helvetica Bold / Inter Bold
• 英文正文：Helvetica Regular / Inter
• 代码：JetBrains Mono / Fira Code

6.2 配色克制

# 推荐：1 主色 + 1 强调色 + 中性色
COLORS = {
    'primary': '#1976D2',      # 主色
    'accent': '#FF5722',        # 强调
    'text_primary': '#212121',  # 主文字
    'text_secondary': '#757575',  # 次文字
    'background': '#FAFAFA',   # 背景
    'surface': '#FFFFFF',      # 表面
}

6.3 排版网格

• 8pt 网格系统
• 留白 ≥ 元素大小的 25%
• 对齐（左 / 中 / 右，三选一）

6.4 视觉层级

• 标题最大、最粗
• 副标题次之
• 正文最小
• 注释最轻

6.5 配色对比

• 背景 vs 文字：≥ 4.5:1（WCAG AA）
• 主色 vs 背景：≥ 3:1

七、5 大反模式

八、5 条实战技巧

1. 字体预装：确保系统有中文字体
2. PNG + PDF 双输出：PNG 用于屏幕，PDF 用于印刷
3. DPI ≥ 300：印刷标准
4. 批量用模板：参数化设计
5. 配色提取：从品牌 LOGO 取色

九、安装

# Claude Code
/plugin install example-skills@anthropic-agent-skills

# 通用
npx skills add anthropics/skills --skill canvas-design

# Python 依赖
pip install Pillow numpy reportlab

十、Q&A

Q: 输出尺寸限制？ A: 内存限制，理论上无限大（建议 ≤ A0）

Q: 支持中文吗？ A: 支持，但需系统中文字体

Q: 中文字体找不到？ A: 装 fonts-noto-cjk 或 wqy-microhei

Q: 能输出 SVG 吗？ A: 通过 Cairo 可以

Q: 印刷级 DPI 是多少？ A: ≥ 300 DPI，杂志级 ≥ 600 DPI

Q: 透明背景？ A: PNG 支持 alpha，PDF 不支持

参考资料

1. anthropics/skills - canvas-design
2. Pillow (PIL Fork) 官方文档
3. ReportLab PDF 库文档
4. Cairo 矢量图形库

十一、对比相关 Skill

十二、真实踩坑案例（来自 GitHub Issues 与社区）

案例 1：中文文字渲染为方块

现象：海报生成后，中文部分全是”豆腐块”□□□□。 根因：系统未安装中文字体，Pillow 默认用 DejaVuSans，该字体不含 CJK 字符。 解决：

# 方案 A：装系统字体
# macOS:  系统已自带 PingFang / Heiti
# Linux:  apt-get install fonts-noto-cjk
# Windows: 用 C:\Windows\Fonts\msyh.ttc

# 方案 B：在 SKILL.md 提示词中显式指定字体路径
from PIL import ImageFont
font = ImageFont.truetype("/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc", 48)

案例 2：PIL 内存爆炸（8192×5462 海报）

现象：脚本跑到一半 MemoryError: out of memory。 根因：Pillow 默认把所有像素 load 到内存，单张 A2 300DPI 约 65MB RAM，复杂图层会叠加 5-10 倍。 解决：

1. 降低 DPI 至 150-200
2. 缩小画布至 ≤ A3
3. 用 Image.LANCZOS 替代 Image.BICUBIC（更省内存）
4. 分块处理（按 1024×1024 tile 切片后合并）

案例 3：Cairo 中文乱码 + 字距错乱

现象：用 Cairo 输出 PDF，中文渲染为 ? 或乱码，字距断裂。 根因：Cairo 不支持 truetype-collection（.ttc 文件）。 解决：

# 把 .ttc 拆成单个 .ttf
from fontTools.ttLib import TTCollection
ttc = TTCollection("msyh.ttc")
for i, ttf in enumerate(ttc.fonts):
    ttf.save(f"msyh-{i}.ttf")
# 加载时指定单文件
font_path = "msyh-0.ttf"

案例 4：透明 PNG 在微信里变黑底

现象：海报保存为 RGBA 透明 PNG，下载后用微信发送，对方看到黑底。 根因：微信对透明通道处理有 bug，且部分 PNG 压缩后丢失 alpha。 解决：

1. 导出为白底的 RGB 而非 RGBA
2. 或用 Image.alpha_composite(white_bg, transparent_fg) 手动合成白底
3. 验证 alpha 通道没被错误压缩：Image.open("out.png").mode 应为 "RGBA"

案例 5：超大文本自动换行失败

现象：一段 200 字文案塞进海报，被自动截断丢失后半段。 根因：Pillow 的 textwrap 不支持 CJK 自动换行（CJK 没有空格分隔）。 解决：

import re
def wrap_cjk(text, width, font):
    lines = []
    line = ""
    for ch in text:
        test = line + ch
        bbox = font.getbbox(test)
        if bbox[2] - bbox[0] > width:
            lines.append(line)
            line = ch
        else:
            line = test
    if line: lines.append(line)
    return "\n".join(lines)

案例 6：CMYK 颜色印刷偏色

现象：设计稿用 RGB #FF0000 红，印刷出来变成橙红。 根因：印刷用 CMYK 色彩空间，RGB 的纯红对应 CMYK 是 (0, 100, 100, 0)，需要显式转换。 解决：

from PIL import Image
img = Image.open("rgb.png").convert("CMYK")
img.save("cmyk.tif", compression="tiff_lzw")
# 印刷厂接收 CMYK TIFF 或 PDF

案例 7：Pillow 加载 WebP 失败

现象：OSError: cannot identify image file。 根因：Pillow 编译时未带 WebP 支持。 解决：

pip install --upgrade --force-reinstall Pillow
# 或用 libwebp 重新编译
apt-get install libwebp-dev
pip install Pillow --no-binary=Pillow

案例 8：CPU 跑满，渲染 5 分钟未完成

现象：生成 1000 张个性化海报，CPU 100% 卡 5 分钟还没完。 根因：单进程顺序执行。 解决：

from concurrent.futures import ProcessPoolExecutor
import multiprocessing

def render(data):
    # 渲染逻辑
    return image_bytes

with ProcessPoolExecutor(max_workers=multiprocessing.cpu_count()) as ex:
    results = list(ex.map(render, data_list))
# 1000 张海报从 5 分钟 → 30 秒

十三、性能基准测试

13.1 测试环境

• CPU：Apple M2 Pro (10 核)
• RAM：32 GB
• Python：3.11.6
• Pillow：10.2.0

13.2 单张海报渲染时间

13.3 批量渲染（1000 张）

结论：CPU 密集型任务用 ProcessPool 而非 asyncio。

13.4 内存占用

关键经验：

with Image.open(...) as img:
    img.load()
    result = process(img)
# with 块结束自动释放

十四、与 Figma / Sketch / Adobe XD 对比

canvas-design 的杀手锏：

• 100% 可编程 + 版本控制友好
• 批量生成（1000 张个性化海报只要 1 分钟）
• 与 Agent 配合全自动

十五、SKILL.md 工作流详解

15.1 Step 1：解析用户需求

# SKILL.md 中的 Claude 指令
解析以下要素：
1. 输出尺寸（如 "IG Story" → 1080x1920）
2. 品牌色（HEX/HSL）
3. 文字内容（标题/副标题/正文）
4. 字体偏好（中文/英文/混合）
5. 输出格式（PNG/PDF/SVG）
6. 用途（社交/印刷/Web）

15.2 Step 2：加载资源

# 加载字体
def load_font(family: str, size: int) -> ImageFont.FreeTypeFont:
    paths = {
        "cn-bold": "/usr/share/fonts/.../NotoSansCJK-Bold.ttc",
        "cn-regular": ".../NotoSansCJK-Regular.ttc",
        "en-serif": "/System/Library/Fonts/.../Times.ttc",
    }
    return ImageFont.truetype(paths[family], size)

15.3 Step 3：构建画布

# 根据用途选择 DPI
DPI_MAP = {
    "web": 72,
    "social": 72,
    "print-a4": 300,
    "print-a3": 300,
    "magazine": 600,
}

canvas = Image.new(
    mode="RGB" if not transparent else "RGBA",
    size=(width, height),
    color=bg_color,
)
draw = ImageDraw.Draw(canvas)

15.4 Step 4：分层绘制

# 标准图层顺序
layers = [
    background_layer,    # 背景色/渐变/图案
    texture_layer,       # 纹理/光效
    main_visual_layer,   # 主图/产品图
    typography_layer,    # 标题/副标题
    accent_layer,        # 装饰元素
    logo_layer,          # 品牌 logo
]

for layer in layers:
    layer.render(canvas, draw)

15.5 Step 5：导出

def export(canvas, format: str, path: str):
    if format == "png":
        canvas.save(path, "PNG", optimize=True, dpi=(300, 300))
    elif format == "pdf":
        canvas.save(path, "PDF", resolution=300)
    elif format == "svg":
        # 用 svgwrite 或 cairosvg
        cairosvg.svg2png(url=svg_path, write_to=path.replace(".svg", ".png"))
    elif format == "webp":
        canvas.save(path, "WEBP", quality=85, method=6)

15.6 Step 6：质量检查

# 自动 QC
def quality_check(path):
    img = Image.open(path)
    assert img.size[0] >= 1080, "分辨率过低"
    if img.mode == "RGBA":
        bbox = img.getbbox()
        assert bbox is not None, "完全透明"
    return True

十六、Prompt 模板库

模板 1：社交媒体配图

用 canvas-design 做一张 Instagram 故事海报：
- 主题：新产品发布
- 标题："全新 V8 引擎"
- 副标题："动力澎湃，即刻启程"
- 品牌色：#FF5722
- 输出：1080x1920 PNG
- 字体：思源黑体 Bold + Regular

模板 2：证书 / 奖状

做一张可打印的结业证书：
- 学员姓名：${name}
- 课程：${course}
- 颁发日期：${date}
- 尺寸：A4 横版
- 边框：金色花纹
- 落款：校长签名（手写体）
- 输出：PDF

模板 3：电商 Banner

为 618 大促做一组电商 Banner：
- 3 个尺寸：1920x600、750x400、300x250
- 主标题："直降 50%"
- 副标题："限时 24 小时"
- 倒计时占位
- 配色：红 + 金
- 输出：PNG + WebP 双格式

模板 4：会议海报

做一张学术会议海报：
- 会议名称：AI Summit 2026
- 地点 + 日期
- 主题演讲嘉宾头像 + 简介
- 议程时间表
- 二维码占位
- 输出：A0 PDF (300 DPI)

模板 5：动态邀请函

用 canvas-design 做邀请函，然后自动合并到 100 个收件人名单，
输出 100 张个性化 PNG。

十七、与生成式 AI 模型协作

17.1 Agent 调用 Flux 生成主图

# SKILL.md 中的多 Skill 协作
import requests

def generate_main_visual(prompt: str) -> Image.Image:
    resp = requests.post(
        "https://api.replicate.com/v1/predictions",
        headers={"Authorization": f"Token {REPLICATE_TOKEN}"},
        json={
            "version": "black-forest-labs/flux-1.1-pro",
            "input": {"prompt": prompt, "aspect_ratio": "16:9"}
        }
    )
    img_url = resp.json()["output"][0]
    return Image.open(requests.get(img_url, stream=True).raw)

17.2 用 GPT-4o 生成文案

def generate_copy(product: str, tone: str) -> dict:
    resp = openai.ChatCompletion.create(
        model="gpt-4o",
        messages=[{
            "role": "user",
            "content": f"为产品 {product} 写 3 句广告文案，语气 {tone}，返回 JSON {{title, subtitle, cta}}"
        }]
    )
    return json.loads(resp.choices[0].message.content)

17.3 完整工作流

产品名 ─→ GPT-4o 生成文案 ─→ Flux 生成主图 ─→ canvas-design 合成 ─→ Pillow 优化 ─→ 多尺寸导出
   ↓                                                            ↓
品牌色库                                                  S3 / CDN 部署

十八、总结

核心价值：

• 程序化生成视觉物料
• 矢量 + 位图双输出
• 印刷级质量
• 与 Agent 原生集成

适用人群：

• 设计师（快速出图）
• 市场运营（Banner、海报）
• 教学（证书、奖状）
• 开发者（替代 Photoshop）
• AI 工程师（批量生成）

投入产出比：⭐⭐⭐⭐⭐（5/5）—— 高频使用必装。

何时不要用：

• 需要手绘 / 自由曲线 → 用 Figma
• 复杂矢量插画 → 用 Illustrator
• 视频动画 → 用 After Effects
• 3D 渲染 → 用 Blender

配套文档：algorithmic-art 算法艺术 | brand-guidelines 品牌