Agent skill

Canvas Design

by LeastBit in LeastBit/Claude_skills_zh-CN

使用设计哲学创作精美的 .png 和 .pdf 格式视觉艺术作品。当用户要求创作海报、艺术品、设计作品或其他静态作品时,应使用此技能。创作原创视觉设计,切勿复制现有艺术家的作品以避免版权侵权。

Apache-2.0Auto-check passedMedia & Creative

Install Canvas Design

skills CLI
$ npx skills add LeastBit/Claude_skills_zh-CN --skill canvas-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install LeastBit/Claude_skills_zh-CN canvas-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/LeastBit/Claude_skills_zh-CN.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/canvas-design .claude/skills/canvas-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
canvas-design
GitHub stars
588
Token cost
~961 tokens
SKILL.md length
125 words
Files
83
Skills in repo
16
Repo updated
First seen
Licence
Apache-2.0

At a glance

使用设计哲学创作精美的 .png 和 .pdf 格式视觉艺术作品。当用户要求创作海报、艺术品、设计作品或其他静态作品时,应使用此技能。创作原创视觉设计,切勿复制现有艺术家的作品以避免版权侵权。

  • Works in 2 steps: 设计哲学创建(.md 文件) → 通过在画布上创作来表达(.pdf 文件或 .png 文件)
  • Tasks that involve Generative and creative coding
  • SKILL.md covers 设计哲学创建, 解读微妙的参考, 画布创作 and 最终步骤, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Canvas Design is an agent skill from LeastBit/Claude_skills_zh-CN. 使用设计哲学创作精美的 .png 和 .pdf 格式视觉艺术作品。当用户要求创作海报、艺术品、设计作品或其他静态作品时,应使用此技能。创作原创视觉设计,切勿复制现有艺术家的作品以避免版权侵权。

Its SKILL.md is about 960 tokens, which your agent loads only when the skill is triggered. The skill folder holds 83 other files.

It sits in Media & Creative, covering Generative and creative coding and PDF. The repository describes itself as: Anthropics/skills中文学习版本 来自:https://github.com/anthropics/skills. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Generative and creative coding
  • Tasks that involve PDF

Example prompts

  • “/canvas-design”

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. 设计哲学创建(.md 文件)
  2. 通过在画布上创作来表达(.pdf 文件或 .png 文件)

What it can do on your machine

Read from SKILL.md and the folder at commit 1ab2916. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Canvas Design loads about 961 tokens when it runs. Until then it costs about 28 tokens; SKILL.md has 125 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~28
When it runs · the whole SKILL.md, loaded when a task matches
~961

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from LeastBit/Claude_skills_zh-CN at commit 1ab2916, republished under its Apache-2.0 licence (© LeastBit). 125 words, ~961 tokens.

Download SKILL.mdSave it as .claude/skills/canvas-design/SKILL.md (or your agent's skills folder). This skill also uses 82 other files; get the full folder from GitHub.
name
canvas-design
description
使用设计哲学创作精美的 .png 和 .pdf 格式视觉艺术作品。当用户要求创作海报、艺术品、设计作品或其他静态作品时,应使用此技能。创作原创视觉设计,切勿复制现有艺术家的作品以避免版权侵权。
license
完整条款见 LICENSE.txt

以下是创建设计哲学的指南——这些美学运动将通过视觉方式表达。仅输出 .md 文件、.pdf 文件和 .png 文件。

分两步完成:

  1. 设计哲学创建(.md 文件)
  2. 通过在画布上创作来表达(.pdf 文件或 .png 文件)

首先,完成以下任务:

设计哲学创建

首先,创建一个视觉哲学(而非布局或模板),它将通过以下方式进行诠释:

  • 形式、空间、色彩、构图
  • 图像、图形、形状、图案
  • 作为视觉点缀的极简文字
核心理解
  • 接收到的内容:用户提供的一些细微输入或指示,应将其纳入考虑,但仅作为基础;不应限制创作自由。
  • 创建的内容:一种设计哲学/美学运动。
  • 后续步骤:然后,同一版本接收该哲学并以视觉方式表达——创作的作品应为 90% 视觉设计,10% 必要文字。

考虑以下方法:

  • 为一场艺术运动撰写宣言
  • 下一阶段涉及创作艺术品

该哲学必须强调:视觉表达。空间传达。艺术诠释。极简文字。

如何生成视觉哲学

命名运动(1-2 个词):"粗野主义之悦" / "色彩的沉默" / "新陈代谢派之梦"

阐述哲学(4-6 段落——简洁但完整):

为捕捉视觉本质,表达该哲学如何通过以下方面体现:

  • 空间与形式
  • 色彩与材质
  • 尺度与节奏
  • 构图与平衡
  • 视觉层次

关键指南:

  • 避免冗余:每个设计方面只应提及一次。避免重复关于色彩理论、空间关系或排版原则的观点,除非增加新的深度。
  • 反复强调工艺精湛:该哲学必须多次强调,最终作品应看起来像是耗费无数小时创作、精心雕琢的成果,来自该领域绝对顶尖的人士。这种定位至关重要——反复使用诸如"精心打造"、"深厚专业知识的结晶"、"一丝不苟的关注"、"大师级执行"等表述。
  • 留出创作空间:对美学方向保持具体明确,但足够简洁,让下一个 Claude 也有空间做出同样高水准工艺的诠释选择。

该哲学必须引导下一版本以视觉方式表达想法,而非通过文字。信息存在于设计中,而非段落里。

哲学示例

"混凝土诗歌" 哲学:通过纪念碑式的形式和大胆的几何图形进行传达。 视觉表达:大面积色块、雕塑般的排版(巨大的单词、微小的标签)、粗野主义空间分割、波兰海报的能量与柯布西耶的融合。通过视觉重量和空间张力表达想法,而非解释。文字作为稀有而有力的姿态——绝非段落,只有融入视觉建筑的必要词汇。每个元素都以大师工匠的精准度放置。

"色彩语言" 哲学:色彩作为主要信息系统。 视觉表达:几何精确度,色彩区域创造意义。排版极简——小型无衬线标签让色彩场域进行传达。想想约瑟夫·阿尔伯斯的互动与数据可视化的结合。信息通过空间和色彩编码。文字仅用于锚定色彩已经展示的内容。精心色彩校准的成果。

"模拟冥想" 哲学:通过质感和留白进行安静的视觉沉思。 视觉表达:纸张纹理、墨迹晕染、大片负空间。摄影和插画占主导。排版如耳语(小巧、克制、服务于视觉)。日本摄影集美学。图像在页面间呼吸。文字稀疏出现——短语,绝非解释性文本块。每个构图都以冥想修行般的专注进行平衡。

"有机系统" 哲学:自然聚集和模块化生长模式。 视觉表达:圆润形态、有机排列、建筑中的自然色彩。通过视觉图表、空间关系、图标传达信息。文字仅用于飘浮在空间中的关键标签。构图通过专业的空间编排讲述故事。

"几何沉默" 哲学:纯粹的秩序与克制。 视觉表达:基于网格的精确度、大胆的摄影或鲜明的图形、戏剧性的负空间。排版精确但极简——小型必要文字、大片安静区域。瑞士形式主义与粗野主义材质诚实的结合。结构传达,而非文字。每个对齐都是无数次精炼的结果。

以上是简明示例。实际设计哲学应为 4-6 个充实的段落。

基本原则
  • 视觉哲学:创建一个通过设计表达的美学世界观
  • 极简文字:始终强调文字稀疏、仅保留必要内容、作为视觉元素融入——绝不冗长
  • 空间表达:想法通过空间、形式、色彩、构图传达——而非段落
  • 艺术自由:下一个 Claude 以视觉方式诠释哲学——提供创作空间
  • 纯粹设计:这是关于创作艺术品,而非带装饰的文档
  • 专业工艺:反复强调最终作品必须看起来精心打造、用心雕琢、是该领域顶尖人士无数小时努力的结晶

设计哲学应为 4-6 个段落。 用富有诗意的设计哲学填充,汇集核心愿景。避免重复相同观点。保持设计哲学的通用性,不提及艺术的具体意图,使其可以在任何地方使用。将设计哲学输出为 .md 文件。


解读微妙的参考

关键步骤:在创建画布之前,识别原始请求中的微妙概念线索。

基本原则: 主题是嵌入在艺术本身中的微妙、小众参考——并非总是字面的,但始终是精致的。熟悉该主题的人应能直觉地感受到,而其他人只是体验一幅精湛的抽象构图。设计哲学提供美学语言。解读出的主题提供灵魂——无形地编织进形式、色彩和构图中的安静概念 DNA。

这非常重要:参考必须经过提炼,使其在不自我宣示的情况下增强作品的深度。像爵士音乐家引用另一首歌曲一样思考——只有知道的人才能捕捉到,但每个人都能欣赏音乐。


画布创作

在确立哲学和概念框架后,在画布上表达它。花一点时间整理思绪、清空心灵。使用创建的设计哲学和以下指南来打造杰作,以专业的工艺体现哲学的所有方面。

重要:对于任何类型的内容,即使用户请求的是电影/游戏/书籍相关的内容,方法仍应保持精致。始终记住这应该是艺术,而非卡通化或业余的东西。

要创作博物馆或杂志品质的作品,以设计哲学为基础。创建一个单页、高度视觉化、设计优先的 PDF 或 PNG 输出(除非要求更多页面)。通常使用重复图案和完美形状。将抽象的哲学设计视为科学圣经,借用系统观察的视觉语言——密集的标记积累、重复元素或分层图案,通过耐心的重复构建意义,并奖励持续观看。添加稀疏、临床式的排版和系统的参考标记,暗示这可能是来自一个想象学科的图表,以通常用于记录可观察现象的同等敬意对待无形的主题。用巧妙放置的简单短语或细节锚定作品,使用有限的调色板,让人感觉是刻意且连贯的。拥抱使用分析性视觉语言表达人类体验的悖论:结果应该感觉像是一件证明短暂事物可以通过细心关注来研究、绘制和理解的文物。这是真正的艺术。

文字作为语境元素:文字始终极简且视觉优先,但让语境决定是细语般的标签还是大胆的排版姿态。朋克场馆的海报可能比极简陶瓷工作室的身份设计有更大、更有攻击性的字体。大多数时候,字体应该是细体。所有字体的使用必须是设计优先的,优先考虑视觉传达。无论文字尺度如何,没有任何东西会掉出页面,也没有任何东西重叠。每个元素都必须在画布边界内,有适当的边距。仔细检查所有文字、图形和视觉元素是否有呼吸空间和清晰的分隔。这是专业执行的不可协商原则。重要:如果书写文字,使用不同的字体。搜索 ./canvas-fonts 目录。无论采用何种方法,精致是不可协商的。

下载并使用任何需要的字体来实现这一目标。通过让排版真正成为艺术本身的一部分来发挥创意——如果艺术是抽象的,将字体带到画布上,而非数字排版。

为突破边界,遵循设计直觉/本能,同时将哲学作为指导原则。拥抱终极的设计自由和选择。将美学和设计推向前沿。

关键:为实现手工制作的品质(而非 AI 生成的),创作看起来耗费无数小时的作品。使其看起来像是该领域绝对顶尖的人士在每个细节上精心雕琢的成果。确保构图、间距、色彩选择、排版——一切都彰显专家级的工艺。仔细检查没有任何重叠,格式完美无瑕,每个细节都完美。创作可以向人们展示以证明专业技能、毫无疑问令人印象深刻的作品。

将最终结果输出为单个可下载的 .pdf 或 .png 文件,以及使用的设计哲学作为 .md 文件。


最终步骤

重要:用户已经说过"这还不够完美。它必须是无暇的,是工艺的杰作,仿佛即将在博物馆展出。"

关键:为精炼作品,避免添加更多图形;而是精炼已创建的内容,使其极其清晰,完全尊重设计哲学和极简主义原则。与其添加有趣的滤镜或重构字体,不如考虑如何使现有构图与艺术更加协调。如果本能是调用新函数或绘制新形状,停下来问自己:"如何让已有的内容更像一件艺术品?"

进行第二轮打磨。回到代码中进一步精炼/抛光,使其成为一件哲学设计的杰作。

多页选项

当被要求创建更多页面时,沿着设计哲学创作更多创意页面,但也要有明显的区别。将这些页面打包在同一个 .pdf 或多个 .png 中。将第一页视为等待被填满的精装画册中的单页。使后续页面成为原作的独特变奏和记忆。让它们以非常有品味的方式讲述一个故事。充分发挥创作自由。

© LeastBit, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 82 other files in skills/canvas-design of LeastBit/Claude_skills_zh-CN.

  • SKILL.md
  • LICENSE.txt
  • canvas-fonts/ArsenalSC-OFL.txt
  • canvas-fonts/ArsenalSC-Regular.ttf
  • canvas-fonts/BigShoulders-Bold.ttf
  • canvas-fonts/BigShoulders-OFL.txt
  • canvas-fonts/BigShoulders-Regular.ttf
  • canvas-fonts/Boldonse-OFL.txt
  • canvas-fonts/Boldonse-Regular.ttf
  • canvas-fonts/BricolageGrotesque-Bold.ttf
  • canvas-fonts/BricolageGrotesque-OFL.txt
  • canvas-fonts/BricolageGrotesque-Regular.ttf
  • canvas-fonts/CrimsonPro-Bold.ttf
  • canvas-fonts/CrimsonPro-Italic.ttf
  • canvas-fonts/CrimsonPro-OFL.txt
  • canvas-fonts/CrimsonPro-Regular.ttf
  • canvas-fonts/DMMono-OFL.txt
  • canvas-fonts/DMMono-Regular.ttf
  • canvas-fonts/EricaOne-OFL.txt
  • canvas-fonts/EricaOne-Regular.ttf
  • … and 63 more

Open the folder on GitHubat commit 1ab2916

Compare with similar skills

Canvas Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Canvas Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Canvas Design this skillLeastBit/Claude_skills_zh-CN588—~961Automated safety check: PassApache-2.0
PosterlyChenruishuo/posterly415—~4.6kAutomated safety check: NotesAGPL-3.0
Watchlesschenzixin1/watchless144—~3.7kAutomated safety check: WarnMIT
Multi Surface Renderyonatangross/orchestkit289—~4kAutomated safety check: PassMIT
Drawing With Pycairooaustegard/claude-skills150—~1.9kAutomated safety check: PassMIT
Algorithmic Art with p5.jsanthropics/skills180k38 repos~4.9kAutomated safety check: PassApache-2.0

Similar skills

  • Posterly

    Chenruishuo/posterly

    Create or revise academic conference posters in HTML/CSS and export print-ready PDFs.

    415 GitHub stars~4.6k tokensUpdated 3 days ago
    Media & CreativeAuto-check: notes
  • Watchless

    chenzixin1/watchless

    A skill your agent uses when turning a YouTube URL or local presentation, explainer, interview, podcast, or product-demo video into complete screenshot-led notes, faithful light-polished text, HTML…

    144 GitHub stars~3.7k tokensUpdated 23 days ago
    Media & CreativeAuto-check: warnings
  • Multi Surface Render

    yonatangross/orchestkit

    Multi-surface rendering with json-render — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs, PDFs, emails, Remotion videos, OG images, and 3D scenes.

    289 GitHub stars~4k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Drawing With Pycairo

    oaustegard/claude-skills

    Draws images, PDF/SVG vector files and animation frames with pycairo, and supplies what cairo lacks: shaped text for Arabic, Indic and other scripts, text along curves, blur/glow/drop shadows, path…

    150 GitHub stars~1.9k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Official

    Creates original generative art in two steps: a written algorithmic philosophy, then a p5.js sketch with seeded randomness and an interactive viewer for exploring parameters.

    180k GitHub starsUsed in 38 repos~4.9k tokens
    Media & CreativeAuto-check passed
  • Canvas Design

    anthropics/skills

    Official

    Creates original posters and static art as PNG or PDF by first writing a short design philosophy, then expressing it visually on a canvas.

    180k GitHub starsUsed in 52 repos~3k tokens
    Media & CreativeAuto-check passed

More from LeastBit/Claude_skills_zh-CN

All 16 skills in this repo
  • Skill Creator

    LeastBit/Claude_skills_zh-CN

    创建高效技能的指南。当用户想要创建新技能(或更新现有技能)以扩展 Claude 的能力,包括专业知识、工作流程或工具集成时,应使用此技能。

    588 GitHub stars~1.9k tokensUpdated 8 mo ago
    Auto-check passed
  • DOCX

    LeastBit/Claude_skills_zh-CN

    全面的文档创建、编辑和分析功能,支持修订追踪、批注、格式保留和文本提取。当 Claude 需要处理专业文档(.docx 文件)时使用:(1) 创建新文档,(2) 修改或编辑内容,(3) 处理修订追踪,(4) 添加批注,或其他任何文档任务

    588 GitHub stars~1.3k tokensUpdated 8 mo ago
    Auto-check: notes
  • MCP Builder

    LeastBit/Claude_skills_zh-CN

    构建高质量 MCP(模型上下文协议)服务器的指南,使 LLM 能够通过精心设计的工具与外部服务交互。在使用 Python (FastMCP) 或 Node/TypeScript (MCP SDK) 构建 MCP 服务器以集成外部 API 或服务时使用。

    588 GitHub stars~1.2k tokensUpdated 8 mo ago
    Auto-check passed
  • PDF

    LeastBit/Claude_skills_zh-CN

    全面的 PDF 操作工具包,用于提取文本和表格、创建新 PDF、合并/拆分文档以及处理表单。当 Claude 需要填写 PDF 表单或以编程方式大规模处理、生成或分析 PDF 文档时使用。

    588 GitHub stars~1.5k tokensUpdated 8 mo ago
    Auto-check passed
  • PPTX

    LeastBit/Claude_skills_zh-CN

    演示文稿创建、编辑和分析。当 Claude 需要处理演示文稿(.pptx 文件)时使用,包括:(1) 创建新演示文稿,(2) 修改或编辑内容,(3) 处理版式,(4) 添加批注或演讲者备注,或其他任何演示文稿任务

    588 GitHub stars~3.4k tokensUpdated 8 mo ago
    Auto-check: notes
  • Web Artifacts Builder

    LeastBit/Claude_skills_zh-CN

    用于使用现代前端 Web 技术(React、Tailwind CSS、shadcn/ui)创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。

    588 GitHub stars~458 tokensUpdated 8 mo ago
    Auto-check passed

Questions about Canvas Design

What does Canvas Design do?

使用设计哲学创作精美的 .png 和 .pdf 格式视觉艺术作品。当用户要求创作海报、艺术品、设计作品或其他静态作品时,应使用此技能。创作原创视觉设计,切勿复制现有艺术家的作品以避免版权侵权。. Canvas Design is an agent skill from LeastBit/Claude_skills_zh-CN.

When should I use Canvas Design?

Canvas Design fits situations like: tasks that involve Generative and creative coding; tasks that involve PDF.

How do I install Canvas Design in Claude Code?

Run `npx skills add LeastBit/Claude_skills_zh-CN --skill canvas-design -a claude-code`. Or copy the skill folder (skills/canvas-design in LeastBit/Claude_skills_zh-CN) into .claude/skills/canvas-design in your project. Claude Code loads it when a task matches its description.

How do I install Canvas Design in Codex?

Run `npx skills add LeastBit/Claude_skills_zh-CN --skill canvas-design -a codex`. Or copy the skill folder (skills/canvas-design in LeastBit/Claude_skills_zh-CN) into .agents/skills/canvas-design in your project. Codex loads it when a task matches its description.

Can I use Canvas Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add LeastBit/Claude_skills_zh-CN --skill canvas-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/canvas-design, .gemini/skills/canvas-design, .github/skills/canvas-design and .opencode/skills/canvas-design in your project.

What does Canvas Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Canvas Design is instructions for the agent only.

Does Canvas Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Canvas Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Canvas Design use?

Canvas Design is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Canvas Design use?

About 961 tokens (SKILL.md is roughly 3.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Canvas Design?

Skills that share tags, products or a category with Canvas Design: Posterly (Chenruishuo/posterly, 415 stars), Watchless (chenzixin1/watchless, 144 stars), Multi Surface Render (yonatangross/orchestkit, 289 stars) and Drawing With Pycairo (oaustegard/claude-skills, 150 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Canvas Design?

LeastBit (a GitHub user) maintains it in LeastBit/Claude_skills_zh-CN, which has 588 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on January 19, 2026.

Source: LeastBit/Claude_skills_zh-CN on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.