mcpField
C
canvas-design

canvas-design

github.com/moizibnyousafDesign & UI1.2k230 installsUpdated 6w ago
Repository

About canvas-design

A design skill for creating static visuals with HTML Canvas or Python imaging libraries. It covers composition, color, typography, and a range of visual styles.

Key features

  1. 01Composition principles
  2. 02Color palette guidance
  3. 03Typography hierarchy
  4. 04Python Canvas with Pillow and Cairo
  5. 05HTML Canvas rendering
  6. 06Multiple visual styles

Use cases

  1. 01Creating a static graphic with Python
  2. 02Rendering a design from HTML Canvas
  3. 03Planning a balanced composition
  4. 04Choosing colors and typography

Install

Copy the command and run it in a terminal.

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

After installing, type/canvas-designin Claude Code to confirm it loaded.

Details

From the project README

Canvas Design

Create visually striking static designs using HTML Canvas or Python imaging libraries.

Design Principles

Composition
  • Rule of Thirds: Place key elements along grid lines
  • Visual Hierarchy: Size, color, and position indicate importance
  • White Space: Embrace negative space for elegance
  • Balance: Symmetrical for formal, asymmetrical for dynamic
Color Theory
  • Complementary: Colors opposite on wheel (high contrast)
  • Analogous: Adjacent colors (harmonious)
  • Triadic: Three equidistant colors (vibrant)
  • Limit palette to 3-5 colors
Typography
  • Pair one display font with one body font
  • Maintain consistent hierarchy
  • Ensure readability (contrast, size)

Python Canvas (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 to Image

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

Design Styles

  • Minimalist: Limited colors, lots of whitespace, clean lines
  • Brutalist: Raw, bold typography, stark contrasts
  • Glassmorphism: Frosted glass effects, subtle borders
  • Retro/Vintage: Muted colors, textures, classic typography
  • Abstract: Geometric shapes, gradients, artistic composition

Comments

Markdown supported