Agent Skills
Discover and share powerful Agent Skills for AI assistants
canvas-design - Agent Skill - Agent Skills
/ Skills / canvas-design Create beautiful visual art in .png and .pdf documents using design philosophy. Use when the user asks to create a poster, piece of art, design, or other static visual piece. Creates original visual designs.
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i skillcreatorai/Ai-Agent-Skills/skills/canvas-designMethod 2 - openskills (supports sync & update)
npx openskills install skillcreatorai/Ai-Agent-SkillsAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
Claude Code Cursor OpenCode Gemini CLI Codex CLI
~/.claude/skills/canvas-design/ Back No setup needed. Let our cloud agents run this skill for you.
Select Model
Claude Haiku 4.5 $0.10 Claude Sonnet 4.5 $0.20 Claude Opus 4.5 $0.50 Claude Sonnet 4.5 $0.20 /task
Best for coding tasks
No setup required
Create visually striking static designs using HTML Canvas or Python imaging libraries.
Rule of Thirds : Place key elements along grid linesVisual Hierarchy : Size, color, and position indicate importanceWhite Space : Embrace negative space for eleganceBalance : Symmetrical for formal, asymmetrical for dynamic
Complementary : Colors opposite on wheel (high contrast)Analogous : Adjacent colors (harmonious)Triadic : Three equidistant colors (vibrant)Limit palette to 3-5 colors
Pair one display font with one body font
Maintain consistent hierarchy
Ensure readability (contrast, size)
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 ) const canvas = document. createElement ( 'canvas' ); canvas.width = 1200 ; canvas.height = 800 ; const ctx = canvas. getContext ( '2d' );
// Draw ctx.fillStyle = '#1a1a2e' ; ctx. fillRect ( 0 ,
Minimalist : Limited colors, lots of whitespace, clean linesBrutalist : Raw, bold typography, stark contrastsGlassmorphism : Frosted glass effects, subtle bordersRetro/Vintage : Muted colors, textures, classic typographyAbstract : Geometric shapes, gradients, artistic composition 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" )
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' );
Claude Sonnet 4.5