mcpField
C
canvas-design

canvas-design

github.com/moizibnyousaf设计与 UI1.2k230 次安装6 周前更新
代码仓库

关于 canvas-design

用于通过 HTML Canvas 或 Python 图像处理库制作静态视觉设计的技能，涵盖构图、配色、字体和多种视觉风格。

主要功能

  1. 01构图原则
  2. 02配色方案指导
  3. 03字体层级设计
  4. 04使用 Pillow 和 Cairo 的 Python Canvas
  5. 05HTML Canvas 渲染
  6. 06多种视觉风格

适用场景

  1. 01使用 Python 制作静态图形
  2. 02从 HTML Canvas 渲染设计
  3. 03规划平衡的构图
  4. 04选择颜色与字体

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/moizibnyousaf/ai-agent-skills --skill canvas-design

安装后在 Claude Code 中输入/canvas-design确认已加载。

详细介绍

画布设计

使用 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 Canvas 转换为图像

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');

设计风格

  • 极简主义：颜色有限、留白充足、线条简洁
  • 粗野主义：原始、醒目的字体，强烈的对比
  • 玻璃拟态：磨砂玻璃效果、微妙的边框
  • 复古风：柔和的颜色、纹理、经典字体
  • 抽象风：几何形状、渐变、艺术化构图

评论

支持 Markdown