name: canvas-design 描述: 使用设计哲学创建.png和.pdf文档中的美丽视觉艺术。当用户要求创建海报、艺术作品、设计或其他静态视觉作品时使用。创建原创视觉设计。 来源: anthropics/skills 许可证: Apache-2.0
画布设计
使用HTML Canvas或Python成像库创建视觉上引人注目的静态设计。
设计原则
构图
- 三分法则: 将关键元素沿网格线放置
- 视觉层次: 大小、颜色和位置表示重要性
- 留白: 拥抱负空间以体现优雅
- 平衡: 对称用于正式，不对称用于动态
色彩理论
- 互补色: 色轮上相对的颜色（高对比度）
- 类似色: 相邻颜色（和谐）
- 三色组: 三个等距颜色（生动）
- 限制调色板为3-5种颜色
排版
- 搭配一种显示字体和一种正文字体
- 保持一致的层次
- 确保可读性（对比度，大小）
Python画布 (Pillow + Cairo)
from PIL import Image, ImageDraw, ImageFont
import cairo
# Create canvas
width, height = 1200, 800
surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, width, height)
ctx = cairo.Context(surface)
# Background gradient
pattern = cairo.LinearGradient(0, 0, 0, height)
pattern.add_color_stop_rgb(0, 0.1, 0.1, 0.2)
pattern.add_color_stop_rgb(1, 0.05, 0.05, 0.1)
ctx.set_source(pattern)
ctx.paint()
# Draw shapes
ctx.set_source_rgba(1, 0.3, 0.3, 0.8)
ctx.arc(600, 400, 150, 0, 2 * 3.14159)
ctx.fill()
# Add text
ctx.set_source_rgb(1, 1, 1)
ctx.select_font_face("Sans", cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_BOLD)
ctx.set_font_size(48)
ctx.move_to(400, 600)
ctx.show_text("Hello Design")
# Save
surface.write_to_png("design.png")
HTML画布转图像
const canvas = document.createElement('canvas');
canvas.width = 1200;
canvas.height = 800;
const ctx = canvas.getContext('2d');
// Draw
ctx.fillStyle = '#1a1a2e';
ctx.fillRect(0, 0, 1200, 800);
ctx.fillStyle = '#e94560';
ctx.beginPath();
ctx.arc(600, 400, 150, 0, Math.PI * 2);
ctx.fill();
// Export
const dataUrl = canvas.toDataURL('image/png');
设计风格
- 极简主义: 有限颜色，大量留白，干净线条
- 粗野主义: 原始、大胆的排版，鲜明对比
- 玻璃拟态: 毛玻璃效果，微妙边框
- 复古/复古风: 柔和颜色，纹理，经典排版
- 抽象: 几何形状，渐变，艺术构图