canvas-design Skill

Create beautiful visual art, designs, and graphics in PNG and PDF formats using design philosophy.

When to Use

Use canvas-design when you need:

  • Landing page designs
  • Marketing materials
  • Posters and flyers
  • Social media graphics
  • Presentation slides
  • Infographics
  • Brand visuals

Quick Start

Invoke the Skill

"Use canvas-design to create landing page hero section with:
- Modern gradient background
- Bold headline
- Call-to-action button
- Professional layout"

What You Get

The skill will help you:

  1. Design visual layouts
  2. Choose color schemes
  3. Apply typography
  4. Create compositions
  5. Export high-quality files

Common Use Cases

Landing Pages

"Use canvas-design to create hero section for SaaS product with:
- Gradient background
- Product screenshot
- Value proposition
- CTA button"

Social Media

"Use canvas-design to create Instagram post (1080x1080) announcing new feature launch"

Marketing Materials

"Use canvas-design to create promotional flyer for event with:
- Event details
- Brand colors
- Professional layout
- QR code"

Presentations

"Use canvas-design to create title slide for investor pitch with company branding"

Design Principles

Visual Hierarchy

  • Primary: Headline (largest, boldest)
  • Secondary: Subheading (medium)
  • Tertiary: Body text (smallest)
  • Accent: CTAs, highlights

Color Theory

"Use canvas-design with color scheme:
- Primary: #3B82F6 (blue)
- Secondary: #10B981 (green)
- Accent: #F59E0B (orange)
- Neutral: #6B7280 (gray)"

Typography

  • Headlines: Bold, large (48-72px)
  • Subheadings: Medium (24-36px)
  • Body: Regular (16-20px)
  • Font pairings: Sans-serif + serif

Layout

  • Rule of thirds
  • White space for breathing room
  • Alignment for professional look
  • Contrast for readability

Common Designs

Hero Section

"Use canvas-design to create hero (1920x1080):
- Gradient background (#667eea to #764ba2)
- Headline: 'Build Better Products'
- Subheading: 'AI-powered development tools'
- CTA button: 'Get Started'
- Product mockup on right"

Social Post

"Use canvas-design for Instagram announcement:
- Square 1080x1080
- Brand colors
- Product image
- Announcement text
- Logo"

Infographic

"Use canvas-design to create infographic showing:
- 4 steps process
- Icons for each step
- Brief descriptions
- Professional layout"

Email Header

"Use canvas-design for email header (600x200):
- Newsletter title
- Brand logo
- Issue number
- Subtle background"

Design Styles

Modern Minimal

  • Clean lines
  • Lots of white space
  • Simple colors (1-2 colors)
  • Sans-serif fonts
  • Flat design

Bold & Vibrant

  • Bright colors
  • Strong contrasts
  • Large typography
  • Gradients
  • Eye-catching

Professional Corporate

  • Conservative colors (blue, gray)
  • Structured layouts
  • Professional fonts
  • Subtle effects
  • Clean design

Creative Artistic

  • Unique compositions
  • Creative typography
  • Illustrations
  • Texture overlays
  • Experimental

File Formats

PNG

  • High quality
  • Transparency support
  • Web-friendly
  • Social media
"Use canvas-design and export as PNG (300 DPI) for print"

PDF

  • Vector quality
  • Print-ready
  • Multi-page support
  • Professional
"Use canvas-design and export as PDF for presentation"

Standard Sizes

Web

  • Hero: 1920x1080
  • Thumbnail: 400x300
  • Banner: 1200x400
  • Card: 600x400

Social Media

  • Instagram: 1080x1080 (square), 1080x1350 (portrait)
  • Facebook: 1200x630 (post), 820x312 (cover)
  • Twitter: 1600x900 (post), 1500x500 (header)
  • LinkedIn: 1200x627 (post), 1584x396 (cover)

Print

  • Flyer: 8.5x11” (letter)
  • Poster: 24x36”
  • Business card: 3.5x2”
  • Banner: Custom

Best Practices

Composition

  1. Start with purpose - Know the goal
  2. Use grid - Align elements
  3. Create focal point - Guide attention
  4. Balance elements - Visual weight
  5. Add white space - Don’t crowd

Color

  1. Limit palette - 2-3 main colors
  2. Use contrast - Readability
  3. Consider accessibility - WCAG standards
  4. Test combinations - Color blindness
  5. Brand consistency - Use brand colors

Typography

  1. Hierarchy - Size indicates importance
  2. Limit fonts - 2-3 max
  3. Readable - Appropriate size
  4. Align text - Left, center, or right
  5. Line height - Comfortable spacing

Images

  1. High quality - No pixelation
  2. Appropriate - Matches message
  3. Optimize - File size
  4. Copyright - Use licensed images
  5. Consistent style - Cohesive look

Quick Examples

Simple Header:

"Use canvas-design to create simple header with company logo and tagline"

Product Feature:

"Use canvas-design to showcase product feature:
- Feature name as headline
- Screenshot or illustration
- 3 key benefits
- Modern design"

Event Poster:

"Use canvas-design for event poster with:
- Event name (large)
- Date, time, location
- Key speakers
- Registration QR code
- Branded colors"

Newsletter Banner:

"Use canvas-design for email newsletter header showing this month's theme"

Common Elements

Call-to-Action Buttons

  • Bold, contrasting color
  • Clear text (Get Started, Learn More)
  • Proper spacing
  • Rounded corners (modern)

Icons

  • Consistent style (outlined or filled)
  • Appropriate size
  • Aligned with text
  • Single color or brand colors

Backgrounds

  • Gradients (modern)
  • Solid colors (minimal)
  • Subtle patterns (texture)
  • Images (with overlay)

Accessibility

  • Color contrast: Minimum 4.5:1 for text
  • Font size: Minimum 16px for body
  • Alt text: Describe images
  • Readable fonts: Avoid decorative for body
  • Clear hierarchy: Logical structure

Next Steps

Bottom Line: canvas-design creates professional visual content. Landing pages, social media, marketing - all with great design principles.