跳转到内容
Skills 学习中心

Canvas Design：视觉艺术与海报设计

一句话总结

Section titled “一句话总结”

canvas-design 是使用 Canvas API 创作视觉设计的 Skill——通过”设计哲学 → 视觉表达”两阶段流程，配合 70+ 字体资源库，创建海报、艺术作品和字体丰富的布局。

核心能力

Section titled “核心能力”
  • 🎨 设计哲学创作：以 manifesto 形式定义美学运动
  • 🖼 Canvas 视觉设计：从哲学理念到 PNG/PDF 的完整创作流程
  • 🔤 字体库驱动：内置 70+ TTF 字体（25+ 字体系列），OFL 开源许可
  • 📐 以”视觉优先”原则创作——文本极少，空间/形式/色彩为主要表达手段
  • 🔄 多页支持：可按要求创建多页作品（咖啡馆画册风格）

触发场景

Section titled “触发场景”

当用户请求”创建海报”、“设计作品”、“视觉艺术”、“Canvas 设计”、“PNG/PDF 艺术作品”等时触发。

文件清单

Section titled “文件清单”

One-Line Summary

Section titled “One-Line Summary”

canvas-design is a Skill for creating visual art on Canvas using design philosophy — through a two-phase “philosophy → visual expression” process, backed by a 70+ font library for creating posters, artworks, and font-rich layouts.

Core Capabilities

Section titled “Core Capabilities”
  • 🎨 Design philosophy creation: defining aesthetic movements as manifestos
  • 🖼 Canvas visual design: complete pipeline from philosophy to PNG/PDF output
  • 🔤 Font library: 70+ TTF fonts (25+ typeface families), OFL licensed
  • 📐 “Visual-first” creation — minimal text, space/form/color as primary expression
  • 🔄 Multi-page support: additional pages on demand (coffee-table-book style)

Trigger Scenarios

Section titled “Trigger Scenarios”

Triggers when users request “create poster”, “design artwork”, “visual art”, “Canvas design”, “PNG/PDF artwork”, etc.

File Inventory

Section titled “File Inventory”
  • canvas-design
    • SKILL.md 主入口 · ~130 行 · Markdown
    • LICENSE.txt Apache 2.0
    • canvas-fonts 字体资源库 · 70+ TTF 文件
      • ArsenalSC-Regular.ttf
      • BigShoulders-Regular.ttf
      • BigShoulders-Bold.ttf
      • Boldonse-Regular.ttf
      • BricolageGrotesque-Regular.ttf
      • BricolageGrotesque-Bold.ttf
      • CrimsonPro-Regular.ttf
      • CrimsonPro-Bold.ttf
      • CrimsonPro-Italic.ttf
      • DMMono-Regular.ttf
      • EricaOne-Regular.ttf
      • GeistMono-Regular.ttf
      • GeistMono-Bold.ttf
      • Gloock-Regular.ttf
      • IBMPlexMono-Regular.ttf
      • IBMPlexMono-Bold.ttf
      • IBMPlexSerif-Regular.ttf
      • IBMPlexSerif-Bold.ttf
      • IBMPlexSerif-Italic.ttf
      • IBMPlexSerif-BoldItalic.ttf
      • ... 和 50+ 更多字体 25+ 字体系列，均含 OFL 许可

目录结构分析

Section titled “目录结构分析”

canvas-design 是**“纯指令 + 资产库型”** Skill——核心流程在 SKILL.md 中，字体库提供设计素材。没有脚本，没有模板，一切通过指令驱动。

结构的独特之处在于：

  • SKILL.md（约 130 行）：紧凑的设计哲学 + Canvas 创作指令
  • canvas-fonts/（70+ 字体文件）：25+ 字体系列，每个系列包含 Regular/Bold/Italic 变体，附带 OFL 开源许可文件

SKILL.md 结构解析

Section titled “SKILL.md 结构解析”

与 algorithmic-art 类似，但面向视觉设计而非算法生成：

阶段 1：设计哲学创作（Design Philosophy Creation）

Section titled “阶段 1：设计哲学创作（Design Philosophy Creation）”

创建 4-6 段的”设计哲学”（.md 文件），定义美学运动。哲学必须涵盖：

  • 命名运动（1-2 个词）：如 “Brutalist Joy”、“Chromatic Silence”、“Metabolist Dreams”
  • 视觉表达方式：空间、形式、色彩、构图、视觉节奏
  • 极简文本：强调文本只作为视觉元素，绝不冗长

阶段 2：Canvas 创作（Canvas Creation）

Section titled “阶段 2：Canvas 创作（Canvas Creation）”

将设计哲学在 Canvas 上可视化表达。关键原则：

  • 文本极少、视觉优先——信息通过设计传达，而非段落文字
  • 字体必须从 canvas-fonts/ 目录中选取
  • 输出为单页 PDF/PNG（可按需扩展为多页）
  • 强调”工匠精神”——外观必须像花费无数小时的精雕细琢

特色设计：隐含引用

Section titled “特色设计：隐含引用”

SKILL.md 引入了”隐含引用”的概念——作品中嵌入微妙的视觉线索，熟悉的人能感受到，而其他人只看到一件优秀的抽象作品。这为设计增添了智力深度。

Directory Structure Analysis

Section titled “Directory Structure Analysis”

canvas-design is a “Pure Instruction + Asset Library” Skill — core workflow in SKILL.md, font library as design materials. No scripts, no templates, everything driven by instructions.

The unique aspects of its structure:

  • SKILL.md (~130 lines): Compact design philosophy + Canvas creation instructions
  • canvas-fonts/ (70+ font files): 25+ typeface families, each with Regular/Bold/Italic variants, accompanied by OFL license files

SKILL.md Structure Analysis

Section titled “SKILL.md Structure Analysis”

Similar to algorithmic-art but oriented toward visual design rather than algorithmic generation:

Phase 1: Design Philosophy Creation

Section titled “Phase 1: Design Philosophy Creation”

Create a 4-6 paragraph “design philosophy” (.md file) defining the aesthetic movement. The philosophy must cover:

  • Naming the movement (1-2 words): e.g., “Brutalist Joy”, “Chromatic Silence”, “Metabolist Dreams”
  • Visual expression: space, form, color, composition, visual rhythm
  • Minimal text: emphasis on text as visual element only, never verbose

Phase 2: Canvas Creation

Section titled “Phase 2: Canvas Creation”

Express the design philosophy visually on Canvas. Key principles:

  • Minimal text, visual-first — information communicated through design, not paragraphs
  • Fonts must be selected from the canvas-fonts/ directory
  • Output as single-page PDF/PNG (expandable to multi-page on demand)
  • Emphasis on “craftsmanship” — must look like countless hours of meticulous work

Design Feature: Subtle References

Section titled “Design Feature: Subtle References”

SKILL.md introduces the concept of “subtle references” — visual cues embedded in the work that feel familiar to those in the know while appearing as masterful abstract compositions to others. This adds intellectual depth to the design.

  • canvas-design
    • SKILL.md 主入口 · ~130 行
    • LICENSE.txt Apache 2.0
    • canvas-fonts 字体资源库 · 70+ TTF · 25+ 系列
      • ArsenalSC
        • ArsenalSC-Regular.ttf
        • ArsenalSC-OFL.txt
      • BigShoulders
        • BigShoulders-Regular.ttf
        • BigShoulders-Bold.ttf
      • BricolageGrotesque
        • BricolageGrotesque-Regular.ttf
        • BricolageGrotesque-Bold.ttf
      • CrimsonPro
        • CrimsonPro-Regular.ttf
        • CrimsonPro-Bold.ttf
        • CrimsonPro-Italic.ttf
      • IBMPlexMono
        • IBMPlexMono-Regular.ttf
        • IBMPlexMono-Bold.ttf
      • IBMPlexSerif
        • IBMPlexSerif-Regular.ttf
        • IBMPlexSerif-Bold.ttf
        • IBMPlexSerif-Italic.ttf
        • IBMPlexSerif-BoldItalic.ttf
      • ... 和 19+ 更多系列 GeistMono, DMMono, Gloock, EricaOne, Boldonse 等

脚本清单

Section titled “脚本清单”

canvas-design 没有任何脚本或模板。它是纯”指令 + 资产库”模式。

“资产库”模式的运作方式

Section titled ““资产库”模式的运作方式”

虽然没有可执行代码，但其”资产库”设计是一个重要的 Skill 模式：

字体选择机制

Section titled “字体选择机制”

Claude 在运行中从 canvas-fonts/ 中选择合适的字体：

  1. 分析设计语境：根据用户请求的题材（技术 vs 自然 vs 复古）判断气质
  2. 匹配合适的字体：从 25+ 系列中选择——衬线字体（Crimson Pro、IBM Plex Serif）用于正式场景，无衬线（Bricolage Grotesque、IBM Plex Mono）用于现代场景
  3. 构建字体组合：通常使用 Display + Body 字体组合
  4. 下载并嵌入：通过 PIL/Python 的 ImageFont 加载字体文件并在 Canvas 上绘制

关键洞察

Section titled “关键洞察”

“资产库”模式的核心价值在于：Curated 优于 Generated、Offline-first、OFL 许可安全、设计自由度。

Script Inventory

Section titled “Script Inventory”

canvas-design has no scripts or templates. It’s a pure “instruction + asset library” pattern.

How the “Asset Library” Pattern Works

Section titled “How the “Asset Library” Pattern Works”

Although there’s no executable code, the asset library design is an important Skill pattern:

Font Selection Mechanism

Section titled “Font Selection Mechanism”

Claude selects appropriate fonts from canvas-fonts/ at runtime:

  1. Analyze design context: judge the temperament based on the user’s request (tech vs nature vs retro)
  2. Match suitable fonts: choose from 25+ families — serif (Crimson Pro, IBM Plex Serif) for formal, sans-serif (Bricolage Grotesque, IBM Plex Mono) for modern
  3. Construct font pairing: typically use Display + Body combinations
  4. Load and embed: use PIL/Python ImageFont to load font files and render on Canvas

Key Insight

Section titled “Key Insight”

The core value of the “asset library” pattern:

  • Curated beats Generated
  • Offline-first
  • OFL License Safe
  • Design Freedom

These four qualities make the curated approach more reliable than AI-generated alternatives.

组件作用替代传统编程中的...
SKILL.md 指令设计哲学 + Canvas 创作原则算法逻辑
canvas-fonts/70+ TTF 字体的精选集合静态资源库
OFL 许可文件确保字体可合法使用许可声明
字体目录结构按系列组织，清晰可浏览模块化组织
ComponentRoleReplaces in traditional programming...
SKILL.md instructionsDesign philosophy + Canvas creation principlesAlgorithm logic
canvas-fonts/Curated collection of 70+ TTF fontsStatic resource library
OFL license filesEnsure legal font usageLicense declarations
Font directory structureOrganized by typeface family, clearly browsableModular organization

设计亮点

Section titled “设计亮点”
  1. “哲学 → 视觉”两阶段流程：先定义设计运动 manifesto，再在 Canvas 上实现——确保作品有统一的美学方向
  2. 资产库模式：70+ 精选字体提供了丰富的创作素材，比 AI 随机生成更可靠
  3. 隐含引用机制：作品中嵌入微妙的视觉线索，赋予设计知识深度
  4. 纯指令设计：仅用 ~130 行的 SKILL.md 就实现了完整的设计工作流——不依赖任何脚本

可复用模式

Section titled “可复用模式”

移植思路

Section titled “移植思路”

“如果你想创建一个图片/视频资产库 Skill…”

  1. 保留”哲学→创作”流程：两阶段模式是设计的核心
  2. 替换字体库为其他资产：将 canvas-fonts/ 替换为你需要的任何媒体资源（图片模板、音效、视频素材）
  3. 保留 OFL 许可模式：确保所有资产有清晰的许可声明
  4. 调整 Canvas 指令：根据输出媒介调整创作指令（如从 Canvas 改为 SVG、PDF）
  5. 添加领域特定的创作原则：如”摄影构图原则”、“色彩搭配规则”

常见坑

Section titled “常见坑”

⚠️ 字体文件可能很大： 70+ TTF 文件会占用大量空间。确保在 skill 目录中包含必要的字体，并标注许可证

⚠️ 不要忽视 OFL 许可： 每个字体必须附带 OFL 文件——否则可能引发版权问题

⚠️ 文本不可重叠： SKILL.md 反复强调”nothing falls off the page and nothing overlaps”——需在最终的 Canvas 绘制中严格检查

⚠️ 字体选择是设计决策： canvas-fonts/ 提供了选择，但 Claude 仍可能选错字体——需要 SKILL.md 中的指导原则来约束选择

⚠️ 不要过度添加文字： 哲学强调”minimal text”——如果 Canvas 输出变成了文本密集的文档，就违背了技能的设计意图

Design Highlights

Section titled “Design Highlights”
  1. “Philosophy → Visual” Two-Phase Flow: Define the design movement manifesto first, then implement on Canvas — ensuring unified aesthetic direction
  2. Asset Library Pattern: 70+ curated fonts provide rich creative materials, more reliable than AI random generation
  3. Subtle Reference Mechanism: Embedded visual cues in the work giving intellectual depth to the design
  4. Pure Instruction Design: Only ~130 lines of SKILL.md implements a complete design workflow — no scripts needed

Reusable Patterns

Section titled “Reusable Patterns”

Porting Guide

Section titled “Porting Guide”

“If you want to create an image/video asset library Skill…”

  1. Keep “Philosophy → Creation” flow: the two-phase pattern is the design core
  2. Replace font library with other assets: swap canvas-fonts/ for any media resources you need (image templates, sound effects, video materials)
  3. Keep OFL licensing pattern: ensure all assets have clear license declarations
  4. Adjust Canvas instructions: adapt creation instructions based on output medium (Canvas to SVG, PDF, etc.)
  5. Add domain-specific creation principles: e.g., “photography composition rules”, “color matching guidelines”

Common Pitfalls

Section titled “Common Pitfalls”

⚠️ Font files can be large: 70+ TTF files consume significant space. Ensure necessary fonts are included with license annotations

⚠️ Don’t ignore OFL licenses: Every font must include an OFL file — otherwise copyright issues may arise

⚠️ Text must not overlap: SKILL.md repeatedly emphasizes “nothing falls off the page and nothing overlaps” — strictly check in final Canvas rendering

⚠️ Font selection is a design decision: canvas-fonts/ provides choices, but Claude may still choose wrong — SKILL.md’s guiding principles must constrain the selection

⚠️ Don’t over-add text: The philosophy emphasizes “minimal text” — if Canvas output becomes text-dense documentation, the skill’s design intent has been violated

模式说明适用于...
资产库精选资源集合（字体、图片、声音）供 Claude 在运行中选择任何需要高质量创作素材的 skill
哲学驱动先定义美学理念，再实施创作设计、品牌、艺术类 skill
纯指令流程仅通过 SKILL.md 指令实现完整工作流流程清晰、不需要复杂计算的 skill
隐含引用作品中嵌入微妙的引用或彩蛋需要知识深度的创意 skill
PatternDescriptionApplies to...
Asset LibraryCurated resource collection (fonts, images, sounds) for Claude to select at runtimeAny skill needing high-quality creative materials
Philosophy-DrivenDefine aesthetic concept first, then implementDesign, branding, art skills
Pure Instruction FlowFull workflow via SKILL.md instructions onlySkills with clear flow, no complex computation
Subtle ReferenceEmbedded references or Easter eggs in the workCreative skills needing intellectual depth